[data-theme="dark"] {
  --bg: #030B14;
  --card: rgba(12, 32, 50, 0.62);
  --tile: rgba(8, 26, 42, 0.7);
  --ink: #EAF6F3;
  --muted: #93AFBD;
  --line: rgba(110, 231, 200, 0.14);
  --pri: #4BF0C0;
  --grad: linear-gradient(120deg, #2CF0B8 0%, #22C3E6 100%);
  --onpri: #02201A;
  --soft: rgba(75, 240, 192, 0.12);
  --softline: rgba(75, 240, 192, 0.45);
  --blue: #6CC8FF;
  --bluesoft: rgba(108, 200, 255, 0.12);
  --nav: rgba(3, 11, 20, 0.72);
  --shadow: 0 10px 34px rgba(0, 0, 0, 0.35);
  --btnshadow: 0 0 28px rgba(44, 240, 184, 0.45), 0 0 2px rgba(255, 255, 255, 0.4) inset;
  --sel: 0 0 26px rgba(75, 240, 192, 0.25);
  --selborder: rgba(75, 240, 192, 0.85);
  --avatar: rgba(20, 60, 80, 0.7);
  --stage: #030B14;
  --map: rgba(8, 30, 48, 0.8);
  --mapblk: rgba(30, 70, 95, 0.55);
  --maproad: rgba(75, 240, 192, 0.12);
}

#bgnet { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#app { position: relative; z-index: 1; }

html[data-theme="dark"] body {
  background:
    radial-gradient(1100px 620px at 85% -10%, rgba(34, 195, 230, 0.20), transparent 60%),
    radial-gradient(900px 560px at -10% 105%, rgba(44, 240, 184, 0.16), transparent 60%),
    radial-gradient(700px 400px at 50% 50%, rgba(40, 80, 160, 0.10), transparent 70%),
    #030B14;
  background-attachment: fixed;
}
html[data-theme="light"] body {
  background: radial-gradient(900px 500px at 90% -10%, rgba(16, 148, 127, 0.10), transparent 60%), #F2F7F6;
}

[data-theme="dark"] .shell, [data-theme="dark"] .coord, [data-theme="dark"] .login, [data-theme="dark"] .login-main { background: transparent; }
.shell { background: transparent; }
html[data-theme="light"] .shell { background: rgba(242, 247, 246, 0.86); }

.top { position: relative; z-index: 3; background: rgba(3, 11, 20, 0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
html[data-theme="light"] .top { background: rgba(255, 255, 255, 0.7); }
.nav, .composer-bar { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
html[data-theme="dark"] .composer-bar { background: rgba(3, 11, 20, 0.6); }
[data-theme="dark"] .card, [data-theme="dark"] .qa, [data-theme="dark"] .option, [data-theme="dark"] .tl-card, [data-theme="dark"] .msg.agent .bubble, [data-theme="dark"] .tile {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
[data-theme="dark"] .card { background: linear-gradient(160deg, rgba(16, 42, 64, 0.72), rgba(8, 24, 40, 0.62)); }
[data-theme="dark"] .msg.user .bubble { background: linear-gradient(135deg, rgba(44, 240, 184, 0.22), rgba(34, 195, 230, 0.16)); border-color: rgba(75, 240, 192, 0.4); }
[data-theme="dark"] .input-row input, [data-theme="dark"] .field input, [data-theme="dark"] .field select, [data-theme="dark"] .ta { background: rgba(6, 20, 34, 0.75); color: var(--ink); }
[data-theme="dark"] .icon-btn, [data-theme="dark"] .seg, [data-theme="dark"] .round:not(.pri):not(.live) { background: rgba(12, 32, 50, 0.7); }
[data-theme="dark"] .qa { background: linear-gradient(160deg, rgba(16, 42, 64, 0.72), rgba(8, 24, 40, 0.62)); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s; }
.qa:hover { transform: translateY(-3px); border-color: var(--softline); box-shadow: 0 0 30px rgba(44, 240, 184, 0.22); }
[data-theme="dark"] .ic-box { background: linear-gradient(140deg, rgba(44, 240, 184, 0.22), rgba(34, 195, 230, 0.14)); box-shadow: inset 0 0 0 1px rgba(75, 240, 192, 0.25), 0 0 18px rgba(44, 240, 184, 0.12); }
[data-theme="dark"] .h2, [data-theme="dark"] .head h1 { letter-spacing: -0.2px; }
[data-theme="dark"] .nav button[aria-current="page"] { text-shadow: 0 0 14px rgba(75, 240, 192, 0.7); }
[data-theme="dark"] .nav button[aria-current="page"]::before { box-shadow: 0 0 12px #4BF0C0; }
[data-theme="dark"] .steps li.done .num, [data-theme="dark"] .chk, [data-theme="dark"] .tl-dot:not(.wait):not(.warn) { box-shadow: 0 0 14px rgba(44, 240, 184, 0.55); }
[data-theme="dark"] .steps li.now { background: linear-gradient(90deg, rgba(44, 240, 184, 0.16), rgba(34, 195, 230, 0.06)); box-shadow: inset 0 0 0 1px rgba(75, 240, 192, 0.3); }
[data-theme="dark"] .pill { box-shadow: inset 0 0 0 1px rgba(75, 240, 192, 0.18); }

.screen-in { animation: enter 0.45s cubic-bezier(.2, .8, .2, 1); }
@keyframes enter { from { opacity: 0; transform: translateY(14px) scale(0.985); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.screen-in .body > * { animation: rise 0.5s cubic-bezier(.2, .8, .2, 1) both; }
.screen-in .body > *:nth-child(2) { animation-delay: 0.05s; }
.screen-in .body > *:nth-child(3) { animation-delay: 0.1s; }
.screen-in .body > *:nth-child(4) { animation-delay: 0.15s; }
.screen-in .body > *:nth-child(5) { animation-delay: 0.2s; }
.screen-in .body > *:nth-child(n+6) { animation-delay: 0.25s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.ai-orb { position: relative; width: 120px; height: 120px; flex-shrink: 0; }
.ai-orb.big { width: 150px; height: 150px; }
.ai-orb.sm { width: 54px; height: 54px; }
.ai-orb.xl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.ai-orb .halo { position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(circle, rgba(44, 240, 184, 0.35) 0%, rgba(34, 195, 230, 0.12) 40%, transparent 70%); animation: breathe 4s ease-in-out infinite; }
.ai-orb .r1 { position: absolute; inset: 4%; border-radius: 50%; border: 1.5px dashed rgba(75, 240, 192, 0.55); animation: rot 16s linear infinite; }
.ai-orb .r2 { position: absolute; inset: -2%; border-radius: 50%; border: 2px solid rgba(108, 200, 255, 0.18); border-top-color: #4BF0C0; border-inline-start-color: #22C3E6; animation: rot 3.2s linear infinite; filter: drop-shadow(0 0 6px rgba(75, 240, 192, 0.8)); }
.ai-orb .core {
  position: absolute; inset: 18%; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #F2FFFB 0%, #8BFFE0 14%, #2CF0B8 32%, #109E92 58%, #0A3B5C 86%);
  box-shadow: 0 0 40px rgba(44, 240, 184, 0.6), 0 0 90px rgba(34, 195, 230, 0.25), inset -8px -10px 24px rgba(3, 30, 50, 0.55), inset 6px 6px 18px rgba(255, 255, 255, 0.35);
  display: flex; align-items: center; justify-content: center; gap: 16%;
  animation: breathe 4s ease-in-out infinite;
}
.ai-orb .eye { width: 13%; height: 22%; border-radius: 40%; background: #03223A; box-shadow: 0 0 8px rgba(255, 255, 255, 0.7) inset; animation: blinkeye 5s infinite; }
.ai-orb.sm .eye { width: 14%; height: 24%; }
@keyframes breathe { 50% { transform: scale(1.06); } }
@keyframes blinkeye { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
.ai-orb.thinking .core { animation: breathe 0.9s ease-in-out infinite; }
.ai-orb.thinking .r2 { animation-duration: 0.9s; }
.ai-orb.thinking .halo { animation-duration: 0.9s; }
.ai-orb.speaking .halo { animation: speak 0.6s ease-in-out infinite; }
@keyframes speak { 50% { transform: scale(1.18); opacity: 0.6; } }

.hero { position: relative; display: flex; align-items: center; gap: 22px; padding: 22px 22px 12px; }
.hero-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 5px 12px; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; color: var(--pri); background: var(--soft); box-shadow: inset 0 0 0 1px var(--softline), 0 0 18px rgba(44, 240, 184, 0.18); }
.hero-h { margin: 0; font-family: var(--display); font-weight: 700; font-size: 2rem; line-height: 1.2; background: linear-gradient(90deg, var(--ink) 0%, var(--pri) 60%, var(--blue) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.small-typed { font-size: 1rem !important; min-height: 1.6em; }
html[data-theme="light"] .typed-line.small-typed { color: var(--pri); text-shadow: none; }
html[data-theme="light"] .caret { background: var(--pri); }
@media (max-width: 520px) { .hero { padding: 16px 16px 6px; gap: 14px; } .ai-orb.big { width: 112px; height: 112px; } .hero-h { font-size: 1.55rem; } }

.chat-head { padding-top: 10px; }
.chat-head .ai-orb.sm { margin-inline-end: 2px; }

.mic-hero .ai-orb.xl .core { inset: 26%; }
.mic-hero::before, .mic-hero::after { display: none; }
.mic-hero button { width: 96px; height: 96px; background: rgba(3, 11, 20, 0.55); backdrop-filter: blur(6px); color: #EFFFFA; border: 1.5px solid rgba(160, 255, 228, 0.6); box-shadow: 0 0 30px rgba(44, 240, 184, 0.5); }
html[data-theme="light"] .mic-hero button { background: rgba(255, 255, 255, 0.55); color: var(--pri); }

.plan ol { position: relative; }
.plan ol::before { content: ""; position: absolute; top: 18px; bottom: 18px; inset-inline-start: 21px; width: 2px; background: repeating-linear-gradient(to bottom, var(--pri) 0 6px, transparent 6px 12px); opacity: 0.5; }
.plan.thinking ol::before { animation: flow 0.8s linear infinite; opacity: 0.9; }
@keyframes flow { to { background-position: 0 12px; } }
.plan li { position: relative; z-index: 1; }
[data-theme="dark"] .plan code { background: rgba(3, 11, 20, 0.6); }

.glow-soft { transition: box-shadow 0.3s, border-color 0.3s, transform 0.3s; }
.glow-soft:hover { border-color: var(--softline); box-shadow: 0 0 30px rgba(44, 240, 184, 0.2); transform: translateY(-2px); }
[data-theme="dark"] .kpi-v { background: linear-gradient(90deg, #EAF6F3, #4BF0C0); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 24px rgba(75, 240, 192, 0.25); }
[data-theme="dark"] .c-top { background: rgba(3, 11, 20, 0.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom-color: var(--line); }
[data-theme="dark"] th { background: rgba(75, 240, 192, 0.06); }
[data-theme="dark"] tr.me td { background: linear-gradient(90deg, rgba(44, 240, 184, 0.14), rgba(34, 195, 230, 0.04)); }

.real-stats { overflow: hidden; }
.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.stat { padding: 14px; border-radius: 16px; background: var(--tile); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; transition: border-color 0.3s, box-shadow 0.3s; }
.stat:hover { border-color: var(--softline); box-shadow: 0 0 24px rgba(44, 240, 184, 0.15); }
.stat-v { font-family: var(--display); font-weight: 700; font-size: 1.6rem; line-height: 1.2; color: var(--pri); }
[data-theme="dark"] .stat-v { text-shadow: 0 0 18px rgba(75, 240, 192, 0.45); }
.stat-src { margin-top: auto; padding-top: 6px; font-size: 0.6875rem; color: var(--muted); display: flex; align-items: center; gap: 4px; }
@media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .stat-grid { grid-template-columns: 1fr; } }

.hood-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 82px 82px; gap: 8px; }
.hood { position: relative; border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; overflow: hidden;
  background: linear-gradient(140deg, rgba(44, 240, 184, calc(0.12 + var(--lvl) * 0.55)), rgba(34, 195, 230, calc(0.06 + var(--lvl) * 0.3)));
  border: 1px solid rgba(75, 240, 192, calc(0.2 + var(--lvl) * 0.5));
  box-shadow: 0 0 calc(var(--lvl) * 34px) rgba(44, 240, 184, calc(var(--lvl) * 0.5)); }
.hood b { font-family: var(--display); font-size: 0.95rem; color: var(--ink); }
.hood span { font-size: 0.75rem; color: var(--ink); opacity: 0.85; }
.hood.h0 { grid-column: span 2; }
.hood.h3 { grid-column: span 1; }
.hood.hid { background: repeating-linear-gradient(135deg, rgba(147, 175, 189, 0.12) 0 6px, transparent 6px 12px); border-style: dashed; box-shadow: none; }
html[data-theme="light"] .hood b, html[data-theme="light"] .hood span { color: #0F2A3D; }

[data-theme="dark"] .login-main .seg, [data-theme="dark"] .login-main .icon-btn { background: rgba(12, 32, 50, 0.7); }
[data-theme="dark"] .login-card.glow-card { background: rgba(8, 24, 40, 0.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--line); }
[data-theme="dark"] .login-brand { background-color: transparent; }

[data-motion="reduce"] #bgnet { display: none; }
.login-card > .badge, .hero-txt > .badge, .c-main .badge { align-self: flex-start; width: auto; max-width: max-content; }
.hood-map .hood.h1 { grid-row: span 1; }