/* =========================================================================
   TMC LAB OA · 极光暗色玻璃主题（Aurora Dark-Glass）
   -------------------------------------------------------------------------
   仅当 <html class="aurora"> 时生效；移除该 class 即回到浅色基础主题（app.css）。
   令牌体系在 theme-switch.css 中补齐（--grad-nav / --grad-emphasis / --brand），
   浅色与暗色共用，避免重复定义。本文件只负责「暗色玻璃覆盖层」。
   还原：删除 index.html 对 theme-aurora.css / theme-aurora.js 的引用即可。
   ========================================================================= */

/* ---------- 1. 暗色玻璃令牌（仅 aurora 态覆盖） ---------- */
html.aurora{
  /* 主色（暗底上提亮，区别于浅色体系的 #4C6FE0） */
  --brand:#5b8cff;
  --grad-brand:linear-gradient(135deg,#3b82f6 0%,#8b5cf6 100%);

  --accent:#5b8cff;
  --accent-hover:#6f9bff;
  --accent-press:#3f6fe0;
  --accent-ink:#bcd0ff;
  --accent-ink-2:#6f9bff;
  --accent-soft:#15203c;
  --accent-soft-2:#1b2746;
  --accent-ring:rgba(91,140,255,.30);

  --emphasis:#a78bfa;
  --emphasis-ink:#c4b5fd;
  --emphasis-soft:#221a3b;
  --emphasis-hover:#b794f6;

  --green:#34d399;  --green-soft:#0e2a20;  --green-ink:#6ee7b7;
  --amber:#fbbf24;  --amber-soft:#2a2110;  --amber-ink:#fcd34d;
  --red:#f87171;    --red-soft:#2c1518;    --red-ink:#fca5a5;
  --blue:#60a5fa;   --blue-soft:#0e1d33;   --blue-ink:#93c5fd;
  --purple:#a78bfa; --purple-soft:#20193a; --purple-ink:#c4b5fd;
  --teal:#2dd4bf;   --teal-soft:#0b2726;   --teal-ink:#5eead4;

  --ink:#eaf0ff;
  --ink-2:#c2cce0;
  --ink-3:#94a1bd;
  --ink-4:#6b7790;

  --bg:#070b16;
  --surface:rgba(18,26,48,.62);
  --surface-2:rgba(255,255,255,.04);
  --surface-3:rgba(0,0,0,.32);

  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.07);
  --line-3:rgba(255,255,255,.24);
  --n-200:rgba(255,255,255,.14);        /* 组织树引线 / 分隔条底色（暗色适配） */

  --nav:#0b1126;
  --nav-2:#0e1730;
  --nav-3:#0a1124;
  --navy:#0b1126;
  --navy-2:#0e1730; --navy-3:#0a1124;
  --nav-ink:#aab4cc;
  --nav-hover:rgba(120,160,255,.12);
  --nav-active:rgba(120,160,255,.18);
  --nav-active-bar:#6ea8ff;
  --navy-soft:#15203c; --navy-ink:#bcd0ff;
  --nav-sep:rgba(255,255,255,.08);

  --tier-1:#60a5fa; --tier-1-soft:#0e1d33;
  --tier-2:#34d399; --tier-2-soft:#0e2a20;
  --tier-3:#fbbf24; --tier-3-soft:#2a2110;
  --tier-4:#a78bfa; --tier-4-soft:#20193a;
  --tier-5:#94a1bd; --tier-5-soft:#0e1730;
  --chart-1:#5b8cff; --chart-2:#4fd6b0; --chart-3:#f6c560;
  --chart-4:#f29b7e; --chart-5:#b79bff; --chart-6:#7ad4d6;

  --sh-xs:0 1px 2px rgba(0,0,0,.45);
  --sh-sm:0 1px 3px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.3);
  --sh:0 2px 8px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.3);
  --sh-md:0 4px 16px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.3);
  --sh-lg:0 12px 36px rgba(0,0,0,.6),0 4px 12px rgba(0,0,0,.35);
  --sh-xl:0 24px 64px rgba(0,0,0,.7),0 8px 24px rgba(0,0,0,.4);
  --sh-hover:0 8px 26px rgba(91,140,255,.30),0 2px 8px rgba(0,0,0,.4);
}

/* ---------- 2. 底色透明化，透出极光 ---------- */
html.aurora, html.aurora body{background:#070b16}
html.aurora .app{background:transparent;background-image:none}
html.aurora ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)}
html.aurora ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3)}

/* ---------- 3. 极光背景层 ---------- */
html.aurora .aurora-bg{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(1200px 700px at 82% -10%, rgba(59,130,246,.22), transparent 60%),
    radial-gradient(900px 600px at 6% 120%, rgba(139,92,246,.20), transparent 60%),
    linear-gradient(160deg,#070b16 0%,#0a1124 50%,#070b16 100%)}
html.aurora .aurora-bg .orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;
  mix-blend-mode:screen;pointer-events:none;animation:auroraFloat 22s ease-in-out infinite}
html.aurora .aurora-bg .orb.a{width:46vw;height:46vw;left:-8vw;top:-12vw;background:radial-gradient(circle,#3b82f6,transparent 70%)}
html.aurora .aurora-bg .orb.b{width:40vw;height:40vw;right:-6vw;top:8vh;background:radial-gradient(circle,#8b5cf6,transparent 70%);animation-delay:-7s}
html.aurora .aurora-bg .orb.c{width:38vw;height:38vw;left:28vw;bottom:-16vw;background:radial-gradient(circle,#06b6d4,transparent 70%);animation-delay:-13s}
html.aurora .aurora-bg .grid-bg{position:absolute;inset:0;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000,transparent 78%);
          mask-image:radial-gradient(circle at 50% 30%,#000,transparent 78%)}
@keyframes auroraFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(4vw,3vh) scale(1.1)}66%{transform:translate(-3vw,2vh) scale(.95)}}

/* ---------- 4. 鼠标光斑 ---------- */
html.aurora .spotlight{position:fixed;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(560px circle at var(--mx,50%) var(--my,30%),rgba(120,160,255,.09),transparent 62%)}

/* ---------- 5. 玻璃拟态：主要容器 ---------- */
html.aurora .card,
html.aurora .kpi,
html.aurora .modal,
html.aurora .topbar,
html.aurora .sidebar,
html.aurora .kv,
html.aurora .inp,
html.aurora .filters,
html.aurora .coswitch,
html.aurora .tag,
html.aurora .perm-item,
html.aurora .ms-toggle,
html.aurora .ms-panel,
html.aurora .viewer-bar{
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}
html.aurora .ms-panel{background:rgba(16,23,43,.92);border-color:rgba(255,255,255,.14)}
html.aurora .sidebar{background:rgba(11,17,38,.55);border-right:1px solid rgba(255,255,255,.08)}
html.aurora .topbar{background:rgba(10,15,30,.55);border-bottom:1px solid rgba(255,255,255,.08)}
html.aurora .viewer-bar{background:rgba(10,15,30,.72)}
html.aurora .viewer-page{background:#fff}
html.aurora .perm-item{background:var(--surface)}
html.aurora .perm-item.on{background:var(--blue-soft);border-color:#2f4d7a}
html.aurora .coswitch{background:var(--surface-3);border-color:var(--line)}

/* 标签：暗底上用亮色文字 */
html.aurora .tag{background:var(--surface-3);color:var(--ink-2)}
html.aurora .tag.red{background:var(--red-soft);color:var(--red-ink)}
html.aurora .tag.green{background:var(--green-soft);color:var(--green-ink)}
html.aurora .tag.amber{background:var(--amber-soft);color:var(--amber-ink)}
html.aurora .tag.blue{background:var(--blue-soft);color:var(--blue-ink)}
html.aurora .tag.purple{background:var(--purple-soft);color:var(--purple-ink)}
html.aurora .tag.gray{background:var(--surface-3);color:var(--ink-2)}
html.aurora .tag.navy{background:var(--navy-soft);color:var(--navy-ink)}
html.aurora .tag.teal{background:var(--teal-soft);color:var(--teal-ink)}

/* 提示条：暗底上用亮色文字（覆盖原硬编码深色文字） */
html.aurora .notice{color:var(--ink-2)}
html.aurora .notice.warn{background:var(--amber-soft);border-color:rgba(251,191,36,.4);color:var(--amber-ink)}
/* 提示条内的快捷键胶囊：暗色下用半透明白底，避免出现刺眼白块 */
html.aurora .notice kbd{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);
  box-shadow:none;color:var(--ink);
}
html.aurora .notice .tips-list li::before{opacity:.55}
html.aurora .nd-done{color:var(--green-ink)}
html.aurora .nd-hint{background:var(--accent-soft)}

/* 卡片悬浮：发光 + 轻抬起（3D 倾斜由 JS 接管 transform） */
html.aurora .card:hover{box-shadow:var(--sh-hover),0 0 0 1px rgba(120,160,255,.22) inset}
html.aurora .kpi:hover{box-shadow:var(--sh-hover),0 0 0 1px rgba(120,160,255,.22) inset}

/* ---------- 6. 卡片 3D 倾斜 + 悬浮辉光 + 入场交错 ---------- */
html.aurora .content{perspective:1400px}
html.aurora .grid{perspective:1200px}
html.aurora .card,
html.aurora .kpi{transform-style:preserve-3d;will-change:transform}
html.aurora .card:hover{transform:translateY(-3px)}
html.aurora .card::after,
html.aurora .kpi::before{content:'';position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;opacity:0;transition:opacity .25s var(--ease);
  background:radial-gradient(420px circle at var(--cx,50%) var(--cy,0%),rgba(120,160,255,.18),transparent 60%)}
html.aurora .card:hover::after,
html.aurora .kpi:hover::before{opacity:1}

html.aurora .card.aurora-rise,
html.aurora .kpi.aurora-rise{
  animation:auroraRise .55s cubic-bezier(.2,.7,.2,1) both;
  animation-delay:calc(var(--i,0) * .05s)}
@keyframes auroraRise{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}

/* ---------- 7. 实心按钮对比度（WCAG AA） ----------
   暗色下白字压在亮色底上会失效：--accent #5b8cff 白字仅 3.16:1、--red #f87171 白字仅 2.77:1，
   均低于正文 AA 4.5:1。实心按钮改用 app.css 已有的合规色阶（与亮色主题按钮一致），
   保持白字并保留光晕(box-shadow 用亮 accent-ring)，hover/active 用加深档保证各态均达标。 */
html.aurora .btn.primary{background:#4C6FE0;border-color:#4C6FE0;color:#fff}
html.aurora .btn.primary:hover:not(:disabled){background:#4362C5;border-color:#4362C5}
html.aurora .btn.primary:active:not(:disabled){background:#3852A6;border-color:#3852A6}
html.aurora .btn.danger{background:#D24444;border-color:#D24444;color:#fff}

/* ---------- 8. 降级：尊重减少动效偏好 ---------- */
@media (prefers-reduced-motion: reduce){
  html.aurora .aurora-bg .orb,
  html.aurora .aurora-rise{animation:none !important}
  html.aurora .aurora-rise{opacity:1 !important}
}