* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0b0d12;
  --bg-raised: #12151f;
  --bg-card: #161a26;
  --line: #232838;
  --text: #dfe3ee;
  --dim: #8b93a8;
  --dimmer: #59617a;
  --accent: #8b7cf6;
  --accent-soft: #b9aefc;
  --good: #4cd6a4;
  --warn: #e0616c;
}

body {
  background: var(--bg);
  color: var(--text);
  font: 15.5px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
}

a { color: var(--accent-soft); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.dim { color: var(--dim); }
.dimmer { color: var(--dimmer); }

/* ---------- landing: a wordless, moving field ---------- */

body.landing { display: flex; align-items: center; justify-content: center; }
.void { text-align: center; max-width: 560px; padding: 40px 24px; }
.void form { text-align: left; }
.hex-big { font-size: 64px; color: var(--accent); opacity: .55; margin-bottom: 26px; }
.whisper { margin: 8px 0; }
.whisper.err { color: var(--warn); }

.sr-note {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

.field { position: fixed; inset: 0; overflow: hidden; background: var(--bg); }

.aura {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .16;
  will-change: transform;
}
.aura.a1 {
  width: 55vmax; height: 55vmax; left: -12vmax; top: -18vmax;
  background: radial-gradient(circle, #6d5df0, transparent 65%);
  animation: drift-a 76s ease-in-out infinite alternate;
}
.aura.a2 {
  width: 48vmax; height: 48vmax; right: -15vmax; bottom: -20vmax;
  background: radial-gradient(circle, #1f8f80, transparent 65%);
  animation: drift-b 94s ease-in-out infinite alternate;
}
.aura.a3 {
  width: 30vmax; height: 30vmax; left: 40vw; top: 55vh;
  background: radial-gradient(circle, #37427a, transparent 60%);
  animation: drift-c 61s ease-in-out infinite alternate;
}
@keyframes drift-a { to { transform: translate(14vmax, 10vmax) scale(1.15); } }
@keyframes drift-b { to { transform: translate(-12vmax, -9vmax) scale(0.9); } }
@keyframes drift-c { to { transform: translate(-16vmax, -20vmax) scale(1.25); } }

.grid {
  position: absolute; inset: -60px; opacity: .05;
  background:
    repeating-linear-gradient(0deg, transparent 0 59px, #8b7cf6 59px 60px),
    repeating-linear-gradient(90deg, transparent 0 59px, #8b7cf6 59px 60px);
  animation: grid-pan 120s linear infinite;
}
@keyframes grid-pan { to { transform: translate(60px, 60px); } }

.scan {
  position: absolute; left: 0; right: 0; top: -2px; height: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(139,124,246,.5), transparent);
  animation: scan-sweep 13s linear infinite;
}
@keyframes scan-sweep {
  0% { transform: translateY(0); opacity: 0; }
  6% { opacity: .8; }
  50% { opacity: .35; }
  94% { opacity: .8; }
  100% { transform: translateY(100vh); opacity: 0; }
}

.field i { position: absolute; font-style: normal; color: var(--accent); will-change: transform, opacity; }
.field i::after { content: "⬡"; display: block; }
.field i { animation: node-drift var(--dur, 50s) ease-in-out infinite alternate,
                      node-glow calc(var(--dur, 50s) / 7) ease-in-out infinite; }
@keyframes node-drift { to { transform: translate(var(--dx, 4vw), var(--dy, -5vh)); } }
@keyframes node-glow { 0%, 100% { opacity: .1; } 50% { opacity: .5; } }

.field i:nth-of-type(1)  { left: 8vw;  top: 16vh; font-size: 18px; --dur: 47s; --dx: 6vw;  --dy: 8vh; }
.field i:nth-of-type(2)  { left: 21vw; top: 68vh; font-size: 11px; --dur: 63s; --dx: 8vw;  --dy: -10vh; }
.field i:nth-of-type(3)  { left: 33vw; top: 28vh; font-size: 26px; --dur: 55s; --dx: -7vw; --dy: 9vh; }
.field i:nth-of-type(4)  { left: 46vw; top: 81vh; font-size: 14px; --dur: 71s; --dx: 5vw;  --dy: -12vh; }
.field i:nth-of-type(5)  { left: 58vw; top: 14vh; font-size: 12px; --dur: 44s; --dx: -9vw; --dy: 11vh; }
.field i:nth-of-type(6)  { left: 71vw; top: 44vh; font-size: 22px; --dur: 66s; --dx: 6vw;  --dy: 7vh; }
.field i:nth-of-type(7)  { left: 84vw; top: 71vh; font-size: 13px; --dur: 52s; --dx: -6vw; --dy: -9vh; }
.field i:nth-of-type(8)  { left: 91vw; top: 23vh; font-size: 17px; --dur: 58s; --dx: -8vw; --dy: 10vh; }
.field i:nth-of-type(9)  { left: 5vw;  top: 47vh; font-size: 13px; --dur: 69s; --dx: 9vw;  --dy: 6vh; }
.field i:nth-of-type(10) { left: 15vw; top: 88vh; font-size: 19px; --dur: 49s; --dx: 7vw;  --dy: -8vh; }
.field i:nth-of-type(11) { left: 40vw; top: 55vh; font-size: 10px; --dur: 74s; --dx: -5vw; --dy: -7vh; }
.field i:nth-of-type(12) { left: 63vw; top: 90vh; font-size: 15px; --dur: 57s; --dx: -7vw; --dy: -11vh; }
.field i:nth-of-type(13) { left: 77vw; top: 8vh;  font-size: 11px; --dur: 62s; --dx: 5vw;  --dy: 12vh; }
.field i:nth-of-type(14) { left: 95vw; top: 52vh; font-size: 20px; --dur: 46s; --dx: -8vw; --dy: -6vh; }

.core {
  position: absolute; left: 50%; top: 50%;
  font-size: 54px; color: var(--accent);
  transform: translate(-50%, -50%);
  animation: core-breathe 9s ease-in-out infinite;
  text-shadow: 0 0 34px rgba(139,124,246,.55);
}
@keyframes core-breathe {
  0%, 100% { opacity: .3; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  50% { opacity: .75; transform: translate(-50%, -50%) scale(1.12) rotate(14deg); }
}

@media (prefers-reduced-motion: reduce) {
  .field *, .field i { animation: none !important; }
  .field i, .core { opacity: .3; }
}

form label { display: flex; flex-direction: column; gap: 4px; color: var(--dim); font-size: 13px; }
input, textarea, select {
  background: var(--bg-raised); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 11px; font: inherit;
}
input:focus, textarea:focus, select:focus { outline: 1px solid var(--accent); }
textarea { resize: vertical; }
button {
  font: inherit; font-weight: 650; cursor: pointer;
  background: var(--accent); color: #0b0d12;
  border: none; border-radius: 8px; padding: 9px 20px;
  align-self: flex-start;
}
button:hover { filter: brightness(1.1); }
button.ghost {
  background: transparent; color: var(--dim);
  border: 1px solid var(--line); padding: 3px 10px; font-size: 12px; font-weight: 500;
}
button.ghost:hover { color: var(--text); border-color: var(--accent); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.login { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
.login input { width: 240px; }
.login button { align-self: auto; }

/* ---------- archive: plain, indexable, machine-styled ---------- */

main.plain { max-width: 760px; margin: 0 auto; padding: 30px 20px 60px; }
main.plain h1 { font-size: 20px; margin-bottom: 10px; }
main.plain h2 { font-size: 15px; margin-bottom: 4px; }
.arc-list { list-style: none; margin-top: 18px; }
.arc-list li { margin: 12px 0; }
.arc-list a { font-weight: 600; }
.arc-body { white-space: pre-wrap; overflow-wrap: break-word; margin: 8px 0 4px; }
.arc-reply { border-left: 2px solid var(--line); padding-left: 16px; margin: 20px 0; }
main.plain article { margin: 18px 0; }
.crumbs a { color: var(--dim); text-decoration: none; }
.crumbs a:hover { color: var(--accent-soft); }

/* ---------- owner console ---------- */

header {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 22px; border-bottom: 1px solid var(--line); background: var(--bg-raised);
}
.brand { font-weight: 700; }
.hex { color: var(--accent); }
header .dim { flex: 1; font-size: 13px; }
header nav { display: flex; gap: 14px; align-items: center; }
header nav a { font-size: 13px; text-decoration: none; }
form.inline { display: inline; }

main { max-width: 900px; margin: 0 auto; padding: 22px 22px 60px; }

.stats { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13.5px; color: var(--dim); }
.stats strong { color: var(--good); font-size: 15px; }

.bykind { margin: 12px 0 6px; display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font-size: 11.5px; border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 10px; color: var(--dim);
}
.kind-idea { color: var(--accent-soft); border-color: #3d3670; }
.kind-recommendation, .kind-advice { color: var(--good); border-color: #2a5c49; }
.kind-complaint { color: var(--warn); border-color: #5c2a33; }
.kind-observation, .kind-question { color: #d9a53a; border-color: #5c4a1e; }
.hiddenchip { color: var(--warn); border-color: var(--warn); }

.filters { display: flex; gap: 16px; align-items: end; margin: 14px 0 6px; }
.filters label.check { flex-direction: row; align-items: center; gap: 6px; }
.filters button { padding: 7px 16px; }

.entry {
  background: var(--bg-card); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 10px;
  padding: 12px 16px; margin: 12px 0;
}
.entry.is-hidden { opacity: .55; border-left-color: var(--warn); }
.entry-meta {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: 12.5px; color: var(--dim); margin-bottom: 7px;
}
.entry-meta strong { color: var(--accent-soft); }
.badge { font-size: 11px; border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.entry-body { white-space: pre-wrap; overflow-wrap: break-word; }
.ua { margin-top: 8px; font-size: 11.5px; color: var(--dimmer); overflow-wrap: break-word; }

.hitswrap { margin-top: 34px; }
.hitswrap h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--dim); margin-bottom: 10px; }
.hit {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline;
  border-bottom: 1px solid var(--line); padding: 6px 0; font-size: 12.5px;
}
.hit .ua { margin: 0; flex-basis: 100%; }

@media (max-width: 640px) {
  main { padding: 16px 12px 50px; }
  .stats { gap: 12px; }
}

.entry-title { margin-bottom: 4px; color: var(--accent-soft); }