/* ============================================================================
   V0.23.25 美术层 · 现代科幻 + 动效（2026-10-24）
   只覆盖颜色 / 描边 / 阴影 / 过渡动效，不动字号、间距、尺寸、DOM —— 功能保持原样。
   删掉 index.html 里引用本文件的那一行，即回到旧配色。
   ========================================================================== */

/* 动效时长/缓动（只有这四个变量住在这里，它们不参与配色） */
:root{
  --t-fast:120ms;--t-mid:180ms;--ease:cubic-bezier(.4,0,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);
}

/* ⚠ 这里**不再定义任何颜色变量**：配色（亮/暗）全部住在 app.css 的 :root / [data-theme="dark"]，
   否则本文件会盖住 app.css 同名变量 → 设计器改色写回 app.css 后不生效（2026-10-24 修正）。
   本文件只放：氛围背景、面板质感、按钮/卡片的发光与过渡、暗色下的非变量微调。 */

/* ---------- 全局氛围：深空光晕 + 细网格（只在空白处透出来，不压内容） ---------- */
body{
  background-image:
    radial-gradient(900px 460px at 8% -12%,rgba(37,99,235,.13),transparent 62%),
    radial-gradient(760px 420px at 92% -8%,rgba(99,102,241,.10),transparent 60%),
    linear-gradient(rgba(37,99,235,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(37,99,235,.035) 1px,transparent 1px);
  background-size:auto,auto,44px 44px,44px 44px;
  background-repeat:no-repeat,no-repeat,repeat,repeat;
  background-attachment:fixed;
  transition:background-color var(--t-mid) var(--ease),color var(--t-mid) var(--ease);
}
[data-theme="dark"] body{
  background-image:
    radial-gradient(1100px 560px at 6% -14%,rgba(56,189,248,.16),transparent 62%),
    radial-gradient(920px 500px at 94% -10%,rgba(99,102,241,.15),transparent 60%),
    linear-gradient(rgba(56,189,248,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(56,189,248,.028) 1px,transparent 1px);
  background-size:auto,auto,44px 44px,44px 44px;
  background-repeat:no-repeat,no-repeat,repeat,repeat;
}
#main,.view{background:transparent}

/* ---------- 面板 / 卡片：细描边 + 顶部一线冷光（用 inset 阴影，不新增定位上下文） ---------- */
.panel,.card,#modalBox{transition:box-shadow var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease)}
.panel,.card{border-color:rgba(37,99,235,.13)}
#topbar{box-shadow:0 1px 0 rgba(37,99,235,.16)}
[data-theme="dark"] .panel,[data-theme="dark"] .card,[data-theme="dark"] #modalBox{
  background:
    linear-gradient(165deg,rgba(56,189,248,.10),rgba(99,102,241,.05) 45%,transparent 72%),
    var(--panel);
  border-color:rgba(56,189,248,.20);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.85),inset 0 1px 0 rgba(56,189,248,.22)}
[data-theme="dark"] .card:hover{border-color:rgba(56,189,248,.34)}

/* ---------- 顶栏 / 页签 ---------- */
#topbar{transition:background var(--t-mid) var(--ease)}
[data-theme="dark"] #topbar{
  background:linear-gradient(180deg,#0d1728,#0a1220);
  border-bottom-color:transparent;
  box-shadow:0 1px 0 rgba(56,189,248,.24),0 10px 26px -20px rgba(56,189,248,.95)}
.logo{background:linear-gradient(135deg,#38bdf8,#6366f1);box-shadow:0 0 14px rgba(56,189,248,.42);
  transition:transform var(--t-mid) var(--ease-out),box-shadow var(--t-mid) var(--ease)}
.logo:hover{transform:scale(1.06) rotate(-3deg);box-shadow:0 0 22px rgba(56,189,248,.6)}
#tabs button{transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
#tabs button:hover:not(.on){background:var(--surface-3);color:var(--ink)}
#tabs button.on{background:var(--blue-l);color:var(--blue-d);box-shadow:inset 0 0 0 1px rgba(56,189,248,.30)}
[data-theme="dark"] #tabs button.on{color:#7dd3fc;text-shadow:0 0 12px rgba(56,189,248,.5)}

/* ---------- 按钮：主按钮辉光 + 按下回弹 ---------- */
.btn{background:linear-gradient(135deg,var(--blue),var(--blue-d));
  box-shadow:0 1px 2px rgba(37,99,235,.28);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.btn:hover{background:linear-gradient(135deg,var(--blue-d),var(--blue-d));transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
[data-theme="dark"] .btn{background:linear-gradient(135deg,#0ea5e9,#2563eb);color:#f8fbff;
  box-shadow:0 0 0 1px rgba(56,189,248,.35),0 4px 14px -4px rgba(56,189,248,.5)}
[data-theme="dark"] .btn:hover{box-shadow:0 0 0 1px rgba(56,189,248,.6),0 6px 20px -4px rgba(56,189,248,.7)}
.btn.ghost,.btn.gray,.icon-btn{transition:transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.btn.ghost:hover,.icon-btn:hover:not(:disabled){transform:translateY(-1px)}
[data-theme="dark"] .btn.ghost,[data-theme="dark"] .icon-btn{background:var(--surface-3);border-color:var(--line);color:#7dd3fc}
[data-theme="dark"] .btn.ghost:hover,[data-theme="dark"] .icon-btn:hover:not(:disabled){border-color:rgba(56,189,248,.6);box-shadow:0 0 12px -2px rgba(56,189,248,.5)}
#btnWorkbench:hover,#btnWorkbench:focus-visible,#btnWorkbench:active{color:var(--btn-color,var(--panel))}
#btnWorkbench:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
#btnWorkbench:not(:hover){transition:color var(--t-fast) var(--ease)}
[data-theme="dark"] .btn.gray{background:var(--surface-3);color:var(--ink)}
.icon-btn:disabled{opacity:.35;cursor:not-allowed;transform:none}

/* ---------- 输入控件：聚焦一圈冷光 ---------- */
input,select,textarea{transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{background:var(--surface-2);border-color:var(--line);color:var(--ink)}
[data-theme="dark"] input:focus,[data-theme="dark"] select:focus,[data-theme="dark"] textarea:focus{
  border-color:rgba(56,189,248,.65);box-shadow:0 0 0 3px rgba(56,189,248,.16);outline:none}

/* ---------- 表格：暗色去白线，行悬停一圈冷光 ---------- */
table.tbl th,table.dm th,table.sp-tbl th{background:var(--surface-2);color:var(--gray)}
table.tbl td,table.dm td,table.sp-tbl td{border-bottom-color:var(--line);transition:background var(--t-fast) var(--ease)}
[data-theme="dark"] table.tbl th,[data-theme="dark"] table.dm th,[data-theme="dark"] table.sp-tbl th{
  background:var(--surface-3);color:#9fb3cf;box-shadow:inset 0 -1px 0 rgba(56,189,248,.30),0 6px 14px -12px rgba(56,189,248,.9)}
[data-theme="dark"] table.tbl tbody tr:hover td,[data-theme="dark"] table.dm tbody tr:hover td{background:rgba(56,189,248,.10)}
[data-theme="dark"] table.tbl tbody tr:nth-child(even) td{background:rgba(56,189,248,.025)}
table.tbl tbody tr:hover td,table.dm tbody tr:hover td{background:var(--surface-2)}

/* ---------- KPI 卡：4 套合一 + 数字发光 ---------- */
.stat-card,.stat-card.g2,.stat-card.g3,.stat-card.g4{
  background:var(--panel);color:var(--ink);border:1px solid var(--line);border-left:3px solid var(--blue);
  border-radius:var(--card-r);box-shadow:var(--shadow);
  transition:transform var(--t-mid) var(--ease-out),box-shadow var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease)}
.stat-card:hover,.stat-card.g2:hover,.stat-card.g3:hover,.stat-card.g4:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.stat-card .num{color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.2px}
.stat-card .lbl{color:var(--muted)}
.stat-card.g2{border-left-color:#0ea5e9}
.stat-card.g3{border-left-color:#6366f1}
.stat-card.g4{border-left-color:#14b8a6}
[data-theme="dark"] .stat-card,[data-theme="dark"] .stat-card.g2,[data-theme="dark"] .stat-card.g3,[data-theme="dark"] .stat-card.g4{
  background:linear-gradient(135deg,rgba(56,189,248,.10),rgba(99,102,241,.05) 60%,transparent),var(--panel)}
[data-theme="dark"] .stat-card .num{color:#7dd3fc;text-shadow:0 0 18px rgba(56,189,248,.45)}

/* ---------- 标签 / 徽标 / 键值 / 列表项 ---------- */
.tag{background:var(--blue-l);color:var(--blue-d);box-shadow:inset 0 0 0 1px rgba(56,189,248,.22);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
[data-theme="dark"] .tag{background:rgba(56,189,248,.14);color:#7dd3fc}
.kv{border-bottom-color:var(--line)}
.sec-badge,.tool-ver{background:var(--surface-3);color:var(--gray)}
[data-theme="dark"] .sc-row kbd,[data-theme="dark"] .tool-ver{background:var(--surface-3);color:#9fb3cf;border-color:var(--line)}
.tool-item,.drow,.cell,.kb-card{transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.tool-item:hover{transform:translateX(2px)}
[data-theme="dark"] .tool-item:hover,[data-theme="dark"] .drow:hover{background:rgba(56,189,248,.07);border-color:rgba(56,189,248,.28)}

/* ---------- 浮层入场：模态 / 下拉 / toast ---------- */
@keyframes fzFade{from{opacity:0}to{opacity:1}}
@keyframes fzSlideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes fzDialogIn{from{opacity:0;transform:translateY(var(--sp-2)) scale(.992)}to{opacity:1;transform:none}}
#modal{animation:fzFade var(--t-fast) var(--ease);transform:none}
#modalBox{animation:none}
#modal:not(.hidden)>#modalBox{animation:fzDialogIn var(--t-mid) var(--ease-out)}
.notif-panel:not(.hidden),.cmd-box{animation:fzSlideDown var(--t-mid) var(--ease-out)}
.notif-item[role="button"]{cursor:pointer;transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.notif-item[role="button"]:hover{background:var(--blue-xl);border-color:var(--blue)}
.notif-item[role="button"]:focus-visible{outline:var(--bd-w) solid var(--blue);outline-offset:var(--bd-w)}
.pager button,.subtabs button,.step-btn,.ver-tabs button,.mod-side .mi,.hier-head,.hier-sub,.sg-tab{
  transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.btn:disabled,.btn:hover:disabled{transform:none}
.srch-pop,.ms-pop,.dz-more-pop,[class*="-pop"]{animation:fzSlideDown 160ms var(--ease-out)}
#toast:not(.hidden){animation:fzFade 180ms var(--ease)}
#overlay,.mask{animation:fzFade 160ms var(--ease)}

/* 页签淡入由 switchView 的一次性原生动画触发；同页刷新不重复播放。 */

/* ---------- 滚动条 / 骨架屏 / 选中 ---------- */
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#233248}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:#2e4463}
::-webkit-scrollbar-thumb{transition:background var(--t-fast) var(--ease)}
[data-theme="dark"] .sk{background:linear-gradient(90deg,#16233a 25%,#1e2b42 37%,#16233a 63%)}
[data-theme="dark"] ::selection{background:rgba(56,189,248,.28);color:#fff}

/* ---------- 暗色补丁：app.css 里硬编码的浅底 / 白线（只覆盖暗色，亮色完全不动） ---------- */
[data-theme="dark"] #searchResults{background:var(--panel);border-color:var(--line)}
[data-theme="dark"] .ver-tabs button,[data-theme="dark"] .pager button,[data-theme="dark"] .cell,
[data-theme="dark"] .anf-del{background:var(--surface-3);border-color:var(--line);color:var(--ink)}
[data-theme="dark"] .cell{border-color:transparent}
[data-theme="dark"] .cell.on{border-color:var(--blue)}
[data-theme="dark"] table.dm th{background:var(--surface-3);color:#9fb3cf}
[data-theme="dark"] table.dm tr:hover td{background:rgba(56,189,248,.08)}
[data-theme="dark"] td.dm-pk{background:var(--panel)}
[data-theme="dark"] .tag.gray,[data-theme="dark"] .stk,[data-theme="dark"] .subtabs button,
[data-theme="dark"] .file-pill,[data-theme="dark"] .rate.zero{background:var(--surface-3);color:var(--gray)}
[data-theme="dark"] .rank-cover,[data-theme="dark"] .style-cover,[data-theme="dark"] .sku-row img,
[data-theme="dark"] .sku-main-img,[data-theme="dark"] .cell img,[data-theme="dark"] .bar{background:var(--surface-3)}
[data-theme="dark"] .img-group .ig{border-color:var(--line)}
[data-theme="dark"] .pager button:hover:not(:disabled){border-color:rgba(56,189,248,.6);color:#7dd3fc}

/* ---------- 尊重系统「减少动态效果」 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
  .btn:hover,.stat-card:hover,.tool-item:hover,.logo:hover{transform:none}
  #modal,#modal:not(.hidden)>#modalBox,.notif-panel:not(.hidden),.cmd-box{animation:none!important}
}