:root{
  --bg-1:#05010f; --bg-2:#0b0c2a;
  --nebula-purple:#8a3ffc; --nebula-teal:#22d3c8;
  --gold:#ffd76a; --rose:#ff6fb0; --ink:#f6f3ff; --muted:#a9a3d6;
  --font-groovy:'Boogaloo', 'Baloo 2', cursive, sans-serif;
  --font-ui:'Baloo 2', 'Trebuchet MS', sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; min-height:100dvh;
  background:linear-gradient(160deg, var(--bg-2), var(--bg-1) 55%, #000 100%);
  background-attachment:fixed; color:var(--ink); font-family:var(--font-ui);
  overflow-x:hidden; position:relative;
}

.nebula{ position:fixed; width:60vmax; height:60vmax; border-radius:50%; filter:blur(90px); opacity:.32; mix-blend-mode:screen; pointer-events:none; z-index:0; animation:drift 42s ease-in-out infinite alternate; }
.nebula-a{ background:radial-gradient(circle at 30% 30%, var(--nebula-purple), transparent 60%); top:-22%; left:-18%; }
.nebula-b{ background:radial-gradient(circle at 70% 70%, var(--nebula-teal), transparent 60%); bottom:-28%; right:-16%; animation-delay:-21s; }
@keyframes drift{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(4%,-3%) scale(1.08); } }

#starfield{ position:fixed; inset:0; z-index:1; pointer-events:none; }
.star{ position:absolute; background:#fff; border-radius:50%; box-shadow:0 0 6px 1px rgba(255,255,255,.85); animation:twinkle var(--dur) ease-in-out infinite; animation-delay:var(--delay); }
@keyframes twinkle{ 0%,100%{ opacity:.15; transform:scale(.7); } 50%{ opacity:1; transform:scale(1.2); } }

.grain{ position:fixed; inset:0; z-index:40; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.vignette{ position:fixed; inset:0; z-index:41; pointer-events:none; background:radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.6) 100%); }

.top-bar{ position:relative; z-index:20; display:flex; align-items:center; justify-content:space-between; padding:1.2rem clamp(1rem,4vw,2.5rem); }
.back-link{ color:var(--muted); text-decoration:none; font-weight:700; font-size:.85rem; display:flex; align-items:center; gap:.35rem; padding:.4rem .7rem; border-radius:999px; transition:background .2s, color .2s; }
.back-link:hover{ color:var(--ink); background:rgba(255,255,255,.08); }
.account-link{ color:var(--muted); text-decoration:none; font-weight:700; font-size:.8rem; display:flex; align-items:center; gap:.35rem; padding:.4rem .8rem; border-radius:999px; border:1px solid rgba(255,255,255,.18); transition:border-color .2s, color .2s; }
.account-link:hover{ color:var(--ink); border-color:var(--gold); }

main{ position:relative; z-index:10; max-width:680px; margin:0 auto; padding:1rem clamp(1rem,4vw,2rem) 5rem; }
.page-title{ text-align:center; font-family:var(--font-groovy); font-size:clamp(2.2rem,8vw,3.4rem); color:var(--gold); text-shadow:0 0 30px rgba(255,215,106,.45); margin:.5rem 0 .3rem; }
.page-tag{ text-align:center; color:var(--muted); font-size:.85rem; margin-bottom:2rem; }

.composer{ background:rgba(10,6,24,.85); border:1px solid rgba(255,215,106,.3); border-radius:18px; padding:1.3rem; margin-bottom:2.2rem; box-shadow:0 10px 40px rgba(0,0,0,.4); }
.composer[hidden]{ display:none; }
.composer h2{ font-family:var(--font-groovy); font-size:1.2rem; color:var(--gold); margin:0 0 .8rem; font-weight:400; }
.composer input, .composer textarea{
  width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:12px;
  padding:.65rem .9rem; color:var(--ink); font-family:var(--font-ui); font-size:.9rem; outline:none; resize:vertical;
}
.composer input{ margin-bottom:.7rem; }
.composer textarea{ min-height:120px; margin-bottom:.9rem; line-height:1.5; }
.composer input:focus, .composer textarea:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(255,215,106,.15); }
.composer button{ background:linear-gradient(135deg, var(--gold), var(--rose)); border:none; color:#1a0f2e; font-family:var(--font-ui); font-weight:800; font-size:.9rem; padding:.65rem 1.4rem; border-radius:999px; cursor:pointer; transition:transform .2s ease; }
.composer button:hover{ transform:translateY(-1px); }
.composer .hint{ font-size:.7rem; color:var(--muted); margin-top:.5rem; }

.guest-note{ text-align:center; font-size:.78rem; color:var(--muted); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:.7rem 1rem; margin-bottom:2.2rem; }

.post{ background:rgba(12,7,28,.8); border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:1.3rem 1.4rem; margin-bottom:1.2rem; animation:post-in .4s ease; }
@keyframes post-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
.post-title{ font-family:var(--font-groovy); font-size:1.4rem; color:var(--ink); margin:0 0 .3rem; }
.post-meta{ font-size:.72rem; color:var(--muted); margin-bottom:.7rem; display:flex; gap:.5rem; align-items:center; }
.post-meta .badge{ font-size:.6rem; font-weight:800; letter-spacing:.05em; color:#1a0f2e; background:linear-gradient(135deg, var(--gold), var(--rose)); padding:.05rem .4rem; border-radius:5px; }
.post-body{ font-size:.92rem; line-height:1.6; color:var(--ink); white-space:pre-wrap; word-break:break-word; }

.feed-empty{ text-align:center; color:var(--muted); font-size:.9rem; padding:2.5rem 1rem; }
.status-line{ text-align:center; color:var(--muted); font-size:.72rem; margin-bottom:1rem; display:flex; align-items:center; justify-content:center; gap:.4rem; }
.status-line i{ width:.4rem; height:.4rem; border-radius:50%; background:#e2b93b; box-shadow:0 0 6px #e2b93b; }
.status-line[data-state="live"] i{ background:#4ade80; box-shadow:0 0 6px #4ade80; }

@media (max-width:480px){
  .composer{ padding:1.1rem; }
}