:root {
  --bg:#0a0c11; --bg2:#0d1017; --fg:#eef1f6; --muted:#7c8797;
  --h:#3b82f6; --h-soft:#1e3a5f; --v:#c026d3; --v-soft:#3d1a42;
  --line:#1a1f2b; --panel:#10141d; --warn:#f59e0b; --warn-soft:#3a2a10;
  --sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",monospace;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; min-height:100vh; color:var(--fg); font:500 22px/1.5 var(--sans);
  background:
    radial-gradient(1100px 520px at 12% -10%, var(--h-soft) 0%, transparent 55%),
    radial-gradient(900px 460px at 105% 8%, var(--v-soft) 0%, transparent 55%),
    var(--bg);
  background-attachment:fixed;
}
#barra { display:flex; gap:10px; padding:12px 16px; background:var(--panel);
  border-bottom:1px solid var(--line); align-items:center; flex-wrap:wrap;
  position:sticky; top:0; z-index:10; box-shadow:0 6px 24px -12px #000; }
#barra input { flex:1; min-width:220px; padding:11px 13px; font:500 15px var(--sans);
  background:var(--bg); color:var(--fg); border:1px solid var(--line); border-radius:9px;
  transition:border-color .15s; }
#barra input:focus { outline:none; border-color:var(--h); }
#barra button { padding:11px 18px; font:700 14px var(--sans); letter-spacing:.02em;
  border:0; border-radius:9px; background:var(--h); color:#fff; cursor:pointer;
  transition:filter .15s; }
#barra button:hover { filter:brightness(1.12); }
#recolher { background:#1c2230 !important; color:var(--muted); }
#status { font:600 13px var(--mono); color:var(--muted); white-space:nowrap; }

#erro-banner { margin:0; padding:10px 16px; font:600 14px var(--sans);
  background:var(--warn-soft); color:var(--warn); border-bottom:1px solid #4a3410; }

#mural { padding:18px 20px 90px; max-width:1100px; margin:0 auto; }
#vazio { color:var(--muted); font-size:19px; padding:36px 0; text-align:center; }

.msg { padding:9px 0; border-bottom:1px solid var(--line); display:flex; gap:12px;
  align-items:baseline; animation:in .18s ease-out; }
@keyframes in { from{opacity:0; transform:translateY(5px);} to{opacity:1; transform:none;} }

.selo { flex:0 0 auto; min-width:28px; height:26px; padding:0 6px; border-radius:6px;
  color:#fff; font:800 13px/26px var(--mono); letter-spacing:.03em;
  display:grid; place-items:center; align-self:center; }
.selo.H { background:var(--h); box-shadow:0 0 0 1px #ffffff22 inset; }
.selo.V { background:var(--v); box-shadow:0 0 0 1px #ffffff22 inset; }

.autor { font-weight:700; color:#c7d0de; white-space:nowrap; }
.texto { color:var(--fg); word-break:break-word; }

#novas { position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  padding:10px 20px; font:700 14px var(--sans); border:0; border-radius:999px;
  background:var(--h); color:#fff; cursor:pointer; z-index:20;
  box-shadow:0 8px 22px -6px #000, 0 0 0 1px #ffffff22 inset; }
#novas:hover { filter:brightness(1.12); }

#mostrar { position:fixed; top:10px; right:10px; background:#1c2230; color:#fff;
  border:0; border-radius:9px; padding:9px 13px; cursor:pointer; z-index:20; }