:root{color-scheme:dark;--bg: #06070d;--bg-alt: #0b0f1a;--panel: rgba(14, 19, 33, .6);--panel-border: rgba(0, 240, 255, .22);--text-primary: #e7f3ff;--text-dim: #7d8bab;--cyan: #00f0ff;--magenta: #ff2bd6;--violet: #7b5bff;--font-display: "Jura", "Segoe UI", sans-serif;--font-body: "Exo 2", "Segoe UI", sans-serif}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--text-primary);font-family:var(--font-body);overflow-x:hidden}#root{min-height:100vh}.scene{position:relative;min-height:100vh;display:flex;justify-content:center;padding:clamp(1.5rem,4vw,4rem) 1rem;isolation:isolate}.scene:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-2;background:radial-gradient(ellipse at top,var(--bg-alt),var(--bg) 70%)}.scene__grid{position:fixed;top:-1px;right:-1px;bottom:-1px;left:-1px;z-index:-1;background-image:linear-gradient(rgba(0,240,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,240,255,.06) 1px,transparent 1px);background-size:42px 42px;-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 40%,transparent 90%);mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 40%,transparent 90%)}.scene__glow{position:fixed;z-index:-1;width:45vmax;height:45vmax;border-radius:50%;filter:blur(90px);opacity:.28;pointer-events:none;animation:drift 22s ease-in-out infinite alternate}.scene__glow--cyan{top:-10vmax;left:-12vmax;background:var(--cyan)}.scene__glow--magenta{bottom:-14vmax;right:-10vmax;background:var(--magenta);animation-duration:26s;animation-delay:-6s}@keyframes drift{0%{transform:translate(0) scale(1)}to{transform:translate(6vmax,4vmax) scale(1.15)}}.console{width:100%;max-width:720px;display:flex;flex-direction:column;gap:1.75rem}.console__header{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center}.brand{display:flex;align-items:center;gap:.6rem}.brand__mark{color:var(--cyan);font-size:1.1rem;text-shadow:0 0 8px var(--cyan),0 0 20px var(--cyan);animation:pulseDot 2.4s ease-in-out infinite}.brand__title{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,6vw,3rem);letter-spacing:.08em;text-transform:uppercase;color:var(--text-primary);text-shadow:0 0 6px rgba(0,240,255,.55),0 0 22px rgba(0,240,255,.35),0 0 60px rgba(123,91,255,.25)}.brand__subtitle{margin:0;color:var(--text-dim);font-size:.85rem;letter-spacing:.06em}.status{margin-top:.6rem;display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .9rem;border-radius:999px;border:1px solid var(--panel-border);background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:.75rem;letter-spacing:.05em;color:var(--text-dim)}.status__dot{width:8px;height:8px;border-radius:50%;background:var(--text-dim)}.status--online .status__dot{background:#29ffb0;box-shadow:0 0 6px #29ffb0,0 0 16px #29ffb0;animation:pulseDot 1.8s ease-in-out infinite}.status--online .status__label{color:#29ffb0}.status--error .status__dot{background:var(--magenta);box-shadow:0 0 6px var(--magenta),0 0 16px var(--magenta)}.status--error .status__label{color:var(--magenta)}.status--connecting .status__dot{background:var(--cyan);animation:pulseDot 1.2s ease-in-out infinite}@keyframes pulseDot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}.feed{display:flex;flex-direction:column;gap:1rem}.feed__error{margin:0;padding:.9rem 1.1rem;border-radius:12px;border:1px solid rgba(255,43,214,.4);background:#ff2bd614;color:#ff9fe9;font-size:.9rem}.feed__empty{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:3.5rem 1rem;color:var(--text-dim);font-family:var(--font-display);letter-spacing:.05em}.feed__empty-pulse{width:14px;height:14px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan),0 0 30px var(--cyan);animation:pulseDot 1.6s ease-in-out infinite}.feed__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9rem}.message{padding:1rem 1.25rem;border-radius:14px;border:1px solid var(--panel-border);background:var(--panel);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:fadeInUp .45s ease both}.message--latest{border-color:#00f0ff8c;box-shadow:0 0 0 1px #00f0ff26,0 0 28px #00f0ff2e}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message__meta{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.45rem;font-family:var(--font-display);font-size:.72rem;letter-spacing:.06em;color:var(--text-dim)}.message__meta-left{display:flex;align-items:center;gap:.6rem}.message__meta time{color:var(--violet)}.message__source{padding:.1rem .5rem;border-radius:999px;border:1px solid rgba(123,91,255,.4);text-transform:uppercase;font-size:.65rem}.message__text{margin:0;font-size:1.02rem;line-height:1.55;color:var(--text-primary)}.message--deleting{opacity:.4;filter:grayscale(.6);pointer-events:none}.message__actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.message__delete{flex-shrink:0;padding:.2rem .55rem;border-radius:999px;border:1px solid rgba(255,43,214,.35);background:transparent;color:var(--text-dim);font-family:var(--font-display);font-size:.68rem;letter-spacing:.04em;cursor:pointer;transition:color .15s ease,border-color .15s ease,box-shadow .15s ease}.message__delete:hover:not(:disabled){color:var(--magenta);border-color:var(--magenta);box-shadow:0 0 10px #ff2bd659}.message__delete:disabled{cursor:default;opacity:.6}.message__delete--confirm{color:var(--magenta);border-color:var(--magenta);background:#ff2bd61a;box-shadow:0 0 10px #ff2bd659;animation:pulseDot 1s ease-in-out infinite}.message__cancel{flex-shrink:0;padding:.2rem .55rem;border-radius:999px;border:1px solid var(--panel-border);background:transparent;color:var(--text-dim);font-family:var(--font-display);font-size:.68rem;letter-spacing:.04em;cursor:pointer;transition:color .15s ease,border-color .15s ease}.message__cancel:hover{color:var(--cyan);border-color:var(--cyan)}.message__error{margin:.5rem 0 0;font-size:.78rem;color:var(--magenta)}.typed-cursor{display:inline-block;width:.5em;height:1em;margin-left:2px;vertical-align:-.15em;background:var(--cyan);box-shadow:0 0 6px var(--cyan);animation:blink .9s steps(1) infinite}@keyframes blink{0%,49%{opacity:1}50%,to{opacity:0}}@media (prefers-reduced-motion: reduce){.scene__glow,.brand__mark,.status__dot,.feed__empty-pulse,.message,.message__delete--confirm,.typed-cursor{animation:none!important}}
