:root {
  color-scheme: dark;
  --bg: #020403;
  --panel: #07100b;
  --panel-2: #0b1712;
  --text: #d7ffe7;
  --muted: #72a588;
  --accent: #37ff88;
  --accent-2: #42d9ff;
  --warn: #ffcc66;
  --danger: #ff4d6d;
  --purple: #bd7bff;
  --line: rgba(81, 255, 143, 0.24);
  --shadow: rgba(28, 255, 119, 0.18);
  font-family: "Cascadia Mono", "Consolas", "SFMono-Regular", monospace;
}

[data-theme="amber"] { --accent: #ffc857; --accent-2: #ff8a3d; --text: #fff1cf; --line: rgba(255, 200, 87, 0.28); --shadow: rgba(255, 166, 57, 0.2); }
[data-theme="red"] { --accent: #ff4d6d; --accent-2: #ffc857; --text: #ffe1e7; --line: rgba(255, 77, 109, 0.3); --shadow: rgba(255, 77, 109, 0.18); }
[data-theme="blue"] { --accent: #42d9ff; --accent-2: #37ff88; --text: #e1f7ff; --line: rgba(66, 217, 255, 0.28); --shadow: rgba(66, 217, 255, 0.18); }
[data-theme="purple"] { --accent: #bd7bff; --accent-2: #37ff88; --text: #f1e8ff; --line: rgba(189, 123, 255, 0.26); --shadow: rgba(189, 123, 255, 0.18); }
[data-theme="matrix"] { --accent: #00ff41; --accent-2: #8affc1; --text: #d8ffe4; --line: rgba(0, 255, 65, 0.3); --shadow: rgba(0, 255, 65, 0.22); }
[data-theme="blood"] { --accent: #ff1744; --accent-2: #ff8a80; --text: #ffe5ea; --line: rgba(255, 23, 68, 0.32); --shadow: rgba(255, 23, 68, 0.22); }
[data-theme="ghost"] { --accent: #cfd8dc; --accent-2: #90a4ae; --text: #eef5f7; --muted: #9eabb0; --line: rgba(207, 216, 220, 0.24); --shadow: rgba(207, 216, 220, 0.12); }
[data-theme="blackout"] { --accent: #8bffb0; --accent-2: #ffffff; --text: #f5fff8; --muted: #829085; --line: rgba(139, 255, 176, 0.18); --shadow: rgba(139, 255, 176, 0.1); --bg: #000; --panel: #030303; --panel-2: #070707; }
[data-theme="neon"] { --accent: #00e5ff; --accent-2: #ff2bd6; --text: #e8fbff; --line: rgba(0, 229, 255, 0.3); --shadow: rgba(255, 43, 214, 0.2); }
[data-theme="mono"] { --accent: #f5f5f5; --accent-2: #9e9e9e; --text: #f7f7f7; --muted: #bbbbbb; --line: rgba(255, 255, 255, 0.2); --shadow: rgba(255, 255, 255, 0.12); }

* { box-sizing: border-box; }
html, body { min-height: 100%; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 20% 0%, rgba(55, 255, 136, 0.08), transparent 34%),
    linear-gradient(135deg, #010201 0%, #050608 45%, #020807 100%);
  color: var(--text);
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.035), rgba(255,255,255,0.035) 1px, transparent 1px, transparent 4px);
  mix-blend-mode: screen;
  opacity: 0.35;
  z-index: 20;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 0 80px rgba(0,0,0,0.7), inset 0 0 28px var(--shadow);
  z-index: 21;
}

body.matrix-on {
  background:
    repeating-linear-gradient(90deg, rgba(0, 255, 65, 0.05), rgba(0, 255, 65, 0.05) 1px, transparent 1px, transparent 28px),
    radial-gradient(circle at 20% 0%, rgba(55, 255, 136, 0.08), transparent 34%),
    linear-gradient(135deg, #010201 0%, #050608 45%, #020807 100%);
}

.matrix-rain {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: var(--matrix-opacity, 0);
  transition: opacity 160ms ease;
}

body.matrix-on .matrix-rain {
  opacity: var(--matrix-opacity, 0.28);
}

button, input, textarea, select {
  font: inherit;
}

button {
  border: 1px solid var(--line);
  background: rgba(7, 16, 11, 0.9);
  color: var(--text);
  min-height: 36px;
  border-radius: 6px;
  padding: 7px 10px;
  cursor: pointer;
}

button:hover, button:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 16px var(--shadow);
  outline: none;
}

button.primary { color: #061008; background: var(--accent); border-color: var(--accent); }
button.warn { border-color: var(--warn); color: var(--warn); }
button.danger, .danger { border-color: var(--danger); color: var(--danger); }
button:disabled, input:disabled, textarea:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  box-shadow: none;
}
.icon-btn { width: 38px; padding: 0; font-weight: 900; }

input, textarea, select {
  width: 100%;
  color: var(--text);
  background: #020403;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 10px;
}

textarea { min-height: 110px; resize: vertical; }
pre { white-space: pre-wrap; word-break: break-word; }

.boot-screen, .panic-screen, .auth-gate {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-content: center;
  background: #020403;
  color: var(--accent);
}

.auth-gate {
  z-index: 29;
  padding: 20px;
  background:
    radial-gradient(circle at 50% 0%, var(--shadow), transparent 32%),
    linear-gradient(140deg, rgba(1, 1, 1, 0.84) 0%, rgba(3, 16, 8, 0.82) 55%, rgba(0, 0, 0, 0.88) 100%);
}

.gate-panel {
  width: min(980px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: 1fr minmax(280px, 420px);
  gap: 18px;
  border: 1px solid var(--line);
  background: rgba(2, 4, 3, 0.86);
  box-shadow: 0 0 42px var(--shadow);
  padding: 18px;
}

.gate-hero {
  border-right: 1px solid var(--line);
  padding: 12px 18px 12px 6px;
}

.gate-hero h1 {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: clamp(28px, 6vw, 60px);
  line-height: 0.95;
}

.gate-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.gate-output {
  min-height: 120px;
  border: 1px solid var(--line);
  padding: 10px;
  color: var(--accent-2);
  background: #020403;
}

.loading-bar {
  height: 10px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: #020403;
}

.loading-bar span {
  display: block;
  width: 62%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  animation: loadingSweep 1.8s ease-in-out infinite alternate;
}

@keyframes loadingSweep {
  from { transform: translateX(-72%); }
  to { transform: translateX(72%); }
}

.ascii {
  color: var(--accent);
  text-shadow: 0 0 14px var(--shadow);
  margin: 0 0 18px;
}

.boot-lines {
  min-height: 120px;
  color: var(--muted);
  line-height: 1.7;
}

.panic-terminal {
  width: min(620px, calc(100vw - 32px));
  border: 1px solid rgba(255,255,255,0.12);
  background: #050505;
  padding: 28px;
}

.app-shell {
  position: relative;
  z-index: 1;
  height: 100vh;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  overflow: hidden;
}

.sidebar {
  border-right: 1px solid var(--line);
  background: rgba(4, 10, 7, 0.88);
  padding: 18px;
  overflow: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--accent);
  color: var(--accent);
  box-shadow: 0 0 18px var(--shadow);
}

.brand strong { display: block; letter-spacing: 0; }
.brand small, .eyebrow, .status-grid span, .muted { color: var(--muted); }

.status-grid {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.status-grid div {
  border: 1px solid var(--line);
  padding: 9px;
  background: rgba(2, 4, 3, 0.45);
}

.status-grid span, .status-grid strong {
  display: block;
  overflow-wrap: anywhere;
}

.fs-tree {
  display: grid;
  gap: 4px;
}

.fs-tree button {
  text-align: left;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.fs-tree button.active, .fs-tree button:hover {
  color: var(--accent);
  border-color: var(--line);
  background: rgba(255,255,255,0.03);
}

.workspace {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) 240px;
  overflow: hidden;
}

.module-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 9, 7, 0.82);
}

.module-head h1 {
  margin: 4px 0 0;
  font-size: 26px;
  line-height: 1.15;
}

.module-actions { display: flex; gap: 8px; }
.module-panel {
  overflow: auto;
  padding: 22px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.tool, .thread, .message, .feed-row, .mission, .window-panel, .room-card, .theme-card, .friend-card, .notification, .monitor-card, .profile-card {
  border: 1px solid var(--line);
  background: rgba(7, 16, 11, 0.72);
  border-radius: 6px;
  padding: 14px;
}

.tool h2, .tool h3 { margin-top: 0; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row > * { flex: 1 1 180px; }
.row > button, .row > .fit { flex: 0 0 auto; }
.stack { display: grid; gap: 10px; }
.terminal {
  min-height: 0;
  border-top: 1px solid var(--line);
  background: rgba(2, 4, 3, 0.95);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.terminal-log {
  overflow: auto;
  padding: 12px 16px;
  color: var(--muted);
  line-height: 1.55;
}

.terminal-log div::before {
  content: "$ ";
  color: var(--accent);
}

.command-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 14px;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.command-line span { color: var(--accent); }
.command-line input {
  border: none;
  border-radius: 0;
  padding: 4px 0;
  background: transparent;
}

.ghost-zone, .ghost-zone * {
  user-select: none;
  -webkit-user-select: none;
}

.ghost-text {
  filter: blur(7px);
  transition: filter 140ms ease;
  color: var(--accent-2);
}

.ghost-off .ghost-text {
  filter: none;
}

.ghost-text.revealed {
  filter: none;
}

.badge {
  display: inline-flex;
  border: 1px solid var(--line);
  color: var(--accent);
  padding: 3px 7px;
  border-radius: 999px;
  margin: 2px;
  font-size: 12px;
}

.room-list {
  display: grid;
  gap: 8px;
  max-height: 320px;
  overflow: auto;
}

.room-card {
  text-align: left;
}

.room-card.active {
  border-color: var(--accent);
  color: var(--accent);
}

.member-list, .notification-list, .friend-list {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
}

.friend-card, .notification, .monitor-card, .profile-card {
  display: grid;
  gap: 8px;
}

.notification.unread {
  border-color: var(--accent);
  box-shadow: 0 0 18px var(--shadow);
}

.toast-host {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 50;
  display: grid;
  gap: 8px;
  width: min(360px, calc(100vw - 28px));
  pointer-events: none;
}

.toast {
  border: 1px solid var(--line);
  background: rgba(2, 4, 3, 0.96);
  color: var(--text);
  padding: 10px 12px;
  box-shadow: 0 0 24px var(--shadow);
}

.command-palette {
  position: fixed;
  inset: 12vh 50%;
  transform: translateX(-50%);
  z-index: 60;
  width: min(720px, calc(100vw - 30px));
  height: min(620px, 76vh);
  border: 1px solid var(--line);
  background: rgba(2, 4, 3, 0.98);
  box-shadow: 0 20px 80px rgba(0,0,0,0.72), 0 0 32px var(--shadow);
  padding: 14px;
  overflow: auto;
}

.palette-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.palette-list button {
  text-align: left;
}

.status-pill {
  display: inline-flex;
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--accent);
}

.split-terminals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.mini-terminal {
  min-height: 180px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.46);
  padding: 10px;
  overflow: auto;
  color: var(--muted);
}

.meter {
  height: 8px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.4);
  overflow: hidden;
}

.meter span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.chat-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chat-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--danger);
}

.chat-status.online::before {
  background: var(--accent);
  box-shadow: 0 0 10px var(--shadow);
}

.theme-card {
  min-height: 84px;
  text-align: left;
}

.theme-swatch {
  display: block;
  width: 100%;
  height: 18px;
  border: 1px solid rgba(255,255,255,0.16);
  margin-bottom: 8px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.severity-INFO { color: var(--accent-2); }
.severity-WATCH { color: var(--warn); }
.severity-SUSPICIOUS, .severity-CRITICAL { color: var(--danger); }

.matrix {
  min-height: 220px;
  overflow: hidden;
  color: var(--accent);
  line-height: 1.2;
  opacity: 0.86;
}

.desktop-layer {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.38);
  z-index: 10;
  pointer-events: none;
}

.desktop-window {
  position: absolute;
  width: min(520px, calc(100vw - 40px));
  min-height: 220px;
  border: 1px solid var(--line);
  background: rgba(2, 4, 3, 0.96);
  box-shadow: 0 14px 48px rgba(0,0,0,0.42);
  pointer-events: auto;
}

.desktop-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  cursor: move;
}

.desktop-body { padding: 12px; max-height: 340px; overflow: auto; }
.hidden { display: none !important; }
.copy-block { overflow: auto; max-height: 260px; }

@media (max-width: 860px) {
  body { overflow: auto; }
  .app-shell {
    min-height: 100vh;
    height: auto;
    grid-template-columns: 1fr;
  }
  .sidebar {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .workspace {
    grid-template-rows: auto auto 280px;
    min-height: 760px;
  }
  .gate-panel {
    grid-template-columns: 1fr;
  }
  .gate-hero {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
}

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