:root{
	--bg: #0f1724;
	--card: #0b1220;
	--muted: #9aa4b2;
	--accent: #4f46e5;
	--success: #16a34a;
	--error: #ef4444;
	--surface: #0b1220;
	--text: #e6eef8;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	background: linear-gradient(180deg,#071029 0%, #071627 100%);
	color:var(--text);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
.container{
	max-width:720px;
	margin:48px auto;
	padding:28px;
	background:rgba(255,255,255,0.02);
	border-radius:12px;
	box-shadow:0 6px 30px rgba(2,6,23,0.6);
}
h1{margin-top:0;font-size:1.6rem}
form{display:flex;flex-direction:column;gap:12px}
label{font-size:0.9rem;color:var(--muted)}
input[type="text"],textarea{
	padding:10px 12px;
	border-radius:8px;
	border:1px solid rgba(255,255,255,0.06);
	background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
	color:var(--text);
	font-size:1rem;
	outline:none;
}
input:focus,textarea:focus{box-shadow:0 0 0 4px rgba(79,70,229,0.12);border-color:var(--accent)}
.actions{display:flex;gap:12px;margin-top:6px}
button{padding:10px 14px;border-radius:8px;border:0;background:var(--accent);color:white;font-weight:600;cursor:pointer}
button.secondary{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text)}
button:disabled{opacity:0.6;cursor:not-allowed}
.message{margin-top:14px;padding:12px;border-radius:8px}
.message.info{background:rgba(255,255,255,0.02);color:var(--muted)}
.message.success{background:linear-gradient(180deg, rgba(16,185,129,0.12), rgba(16,185,129,0.06));border:1px solid rgba(16,185,129,0.08);color:var(--success)}
.message.error{background:linear-gradient(180deg, rgba(239,68,68,0.08), rgba(239,68,68,0.04));border:1px solid rgba(239,68,68,0.06);color:var(--error)}
.note{margin-top:18px;color:var(--muted);font-size:0.9rem}
code{background:rgba(255,255,255,0.02);padding:2px 6px;border-radius:6px}

@media (max-width:640px){
	.container{margin:20px;padding:18px}
}

/* Posts list */
#postsSection{margin-top:22px}
#postsList{margin-top:12px;display:flex;flex-direction:column;gap:12px}
.post{padding:12px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03)}
.post h3{margin:0 0 6px 0}
.post p{margin:0;color:var(--muted)}
.post .meta{font-size:0.8rem;color:var(--muted);margin-bottom:8px}
.posts-actions{display:flex;justify-content:flex-end}

/* Modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,0.6);z-index:40}
.modal-content{background:var(--surface);padding:20px;border-radius:12px;max-width:420px;width:92%;box-shadow:0 8px 40px rgba(2,6,23,0.7)}
.modal h3{margin:0 0 6px 0}
.modal .muted{color:var(--muted);font-size:0.95rem;margin-bottom:10px}
.modal input{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);margin-bottom:10px}
.modal-actions{display:flex;justify-content:flex-end}