/* CipherChat by DarkCipher Systems: the portal's base styles (the DarkCipher Systems design system: teal on near-black,
   one accent, mono for anything technical). The terminal itself is app/chat.css; the portal pages add portal.css. */
:root {
  --bg: #050b0c;
  --bg-2: #0a1416;
  --panel: #0d1a1c;
  --panel-2: #112326;
  --line: #1c3337;
  --line-2: #27464b;
  --fg: #e3f1f0;
  --fg-dim: #9db6b4;
  --fg-mute: #6a8784;
  --accent: #3dd6d0;
  --accent-2: #5ff2ea;
  --accent-ink: #032321;
  --warn: #f2c14e;
  --radius: 14px;
  --mono: "JetBrains Mono", Consolas, "Cascadia Mono", monospace;
  --sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --max: 1160px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 var(--sans); overflow-x: hidden; }
body::before { /* faint grid + glow backdrop */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(61,214,208,.13), transparent 60%),
    linear-gradient(rgba(61,214,208,.035) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(61,214,208,.035) 1px, transparent 1px) 0 0 / 40px 40px;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; }
p { margin: 0 0 1em; }
code { font-family: var(--mono); font-size: .92em; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.dim { color: var(--fg-dim); }
.mute { color: var(--fg-mute); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.site-header { position: sticky; top: 0; z-index: 20; background: rgba(5,11,12,.82); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 20px; height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--fg); font-weight: 800; letter-spacing: -.01em; flex: none; }
.brand:hover { color: var(--fg); }
.brand img { width: 34px; height: 34px; }
.brand small { display: block; font: 600 10.5px/1 var(--mono); color: var(--accent); letter-spacing: .14em; text-transform: uppercase; margin-top: 3px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 10px;
  border: 1px solid var(--line-2); background: var(--panel); color: var(--fg); font: 600 .95rem var(--sans); cursor: pointer;
  transition: border-color .15s, transform .15s, background .15s; }
.btn:hover { color: var(--fg); border-color: var(--accent); transform: translateY(-1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary { background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: var(--accent-ink); border-color: transparent; }
.btn-primary:hover { color: var(--accent-ink); }
.btn-sm { padding: 6px 12px; font-size: .85rem; border-radius: 8px; }
.btn.danger { color: #ff8a8a; border-color: rgba(255,122,122,.4); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }