/* ============================================================================
   个人工作台 · 美术层 theme.css（对齐聚水潭 theme-v2325.css 的做法）
   只覆盖氛围背景 / 面板质感 / 发光与过渡动效，不动字号、间距、尺寸、DOM。
   删掉 index.html 里引用本文件的那一行，即回到纯 app.css 的朴素外观。

   ⚠ 本文件**不定义任何颜色变量**：配色（亮/暗）全部住在 app.css 的
     :root / [data-theme="dark"]。否则会盖住 app.css 同名变量 →
     设计器改色写回 app.css 后不生效。
   本文件只放：四个动效变量 + 氛围背景 + 面板/按钮/表格的质感微调。
   ========================================================================== */

/* 动效时长 / 缓动（不参与配色，住这里） */
:root{
  --t-fast:140ms;
  --t-mid:220ms;
  --t-slow:320ms;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- 全局氛围：深空光晕 + 细网格（只在空白处透出来，不压内容） ---------- */
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(180deg, var(--bg) 0%, var(--surface-2) 100%);
  background-attachment:fixed;
  transition:background var(--t-mid) var(--ease), color var(--t-mid) var(--ease);
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:var(--z-0);
  background-image:linear-gradient(var(--line) 1px, transparent 1px),
                   linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:48px 48px;
  opacity:.28;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 78%);
}
[data-theme="dark"] body{
  background-image:
    radial-gradient(900px 460px at 8% -12%, rgba(59,130,246,.16), transparent 62%),
    radial-gradient(760px 420px at 92% -8%, rgba(99,102,241,.12), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, #0a1120 100%);
}
[data-theme="dark"] body::before{opacity:.16}

/* ---------- 顶栏：玻璃质感 ---------- */
#topbar{
  background:color-mix(in srgb, var(--panel) 86%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:0 1px 0 var(--line), 0 8px 24px -18px rgba(15,23,42,.35);
  z-index:var(--z-topbar);
}
.logo{
  background:linear-gradient(135deg, var(--blue) 0%, var(--blue-d) 100%);
  box-shadow:0 4px 14px -4px rgba(37,99,235,.55), inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease);
}
.logo:hover{transform:translateY(-1px) scale(1.03);box-shadow:0 6px 18px -4px rgba(37,99,235,.7)}

/* 导航 tab：下划线随动 + 悬停抬升 */
#tabs button{
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease-out);
}
#tabs button:hover{background:var(--surface-2);color:var(--ink);transform:translateY(-1px)}
#tabs button.on{
  background:linear-gradient(180deg, var(--blue-l), color-mix(in srgb, var(--blue-l) 55%, transparent));
  color:var(--blue-d);
  box-shadow:inset 0 -2px 0 var(--blue), 0 4px 12px -8px rgba(37,99,235,.8);
}
#tabs button .badge{animation:pulse-badge 1.8s var(--ease) infinite}
@keyframes pulse-badge{
  0%,100%{box-shadow:0 0 0 0 rgba(225,29,72,.55)}
  60%{box-shadow:0 0 0 5px rgba(225,29,72,0)}
}

/* ---------- 面板 / 卡片：细描边 + 冷光 ---------- */
.panel,.card{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--panel) 100%, transparent) 0%,
    color-mix(in srgb, var(--panel) 94%, var(--surface-2)) 100%);
  border:var(--bd-w) solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--shadow);
  transition:box-shadow var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease),
             transform var(--t-mid) var(--ease-out);
}
.panel:hover{border-color:color-mix(in srgb, var(--blue) 26%, var(--line))}

/* ---------- 按钮：渐变 + 回弹 ---------- */
.btn{
  background:linear-gradient(180deg, var(--blue) 0%, var(--blue-d) 100%);
  box-shadow:0 1px 2px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease),
             filter var(--t-fast) var(--ease);
}
.btn:hover{filter:brightness(1.06);box-shadow:0 4px 14px -6px rgba(37,99,235,.75)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn.ghost{
  background:var(--panel);
  color:var(--blue);
  border:var(--btn-bd) solid color-mix(in srgb, var(--blue) 42%, var(--line));
  box-shadow:none;
}
.btn.ghost:hover{background:var(--blue-xl);border-color:var(--blue);filter:none}
.btn.gray{background:var(--surface-3);color:var(--ink);box-shadow:none}
.btn.gray:hover{background:var(--surface-2);filter:none}
.btn.danger{background:linear-gradient(180deg, var(--red), color-mix(in srgb, var(--red) 78%, #000))}
.btn.mini{box-shadow: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);
}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb, var(--blue) 34%, var(--line))}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent);
}

/* ---------- 表格：悬停行 + 斑马纹（暗色去白线） ---------- */
table.tbl th{
  position:sticky;top:0;z-index:var(--z-1);
  background:var(--surface-2);
  backdrop-filter:blur(6px);
}
table.tbl tbody tr{transition:background var(--t-fast) var(--ease)}
table.tbl tbody tr:nth-child(even) td{background:color-mix(in srgb, var(--surface-2) 55%, transparent)}
table.tbl tbody tr:hover td{background:var(--blue-xl)}
[data-theme="dark"] table.tbl th,[data-theme="dark"] table.tbl td{border-color:var(--line)}
[data-theme="dark"] table.tbl tbody tr:nth-child(even) td{background:rgba(255,255,255,.022)}

/* ---------- KPI / 首页卡：左侧色条四边成套 ---------- */
.dash-card{
  border-left:var(--stat-bar-w,3px) solid var(--stat-bar,var(--blue));
  border-top:1px solid color-mix(in srgb, var(--stat-bar,var(--blue)) 22%, var(--line));
  border-right:1px solid color-mix(in srgb, var(--stat-bar,var(--blue)) 22%, var(--line));
  border-bottom:1px solid color-mix(in srgb, var(--stat-bar,var(--blue)) 22%, var(--line));
  transition:transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease),
             border-color var(--t-mid) var(--ease);
}
.dash-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px -18px rgba(15,23,42,.5);
}
.dash-card .num{transition:color var(--t-mid) var(--ease)}

/* ---------- 看板卡：拖动/悬停 ---------- */
.kb-card{transition:transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease),
                    border-color var(--t-fast) var(--ease)}
.kb-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}

/* ---------- 弹窗：遮罩淡入 + 面板上浮 ---------- */
.mask{animation:fade-in var(--t-fast) var(--ease)}
.dlg{animation:dlg-in var(--t-mid) var(--ease-out)}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes dlg-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

/* ---------- toast ---------- */
#toast{transform:translate(-50%,-6px);transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-out)}
#toast.show{transform:translate(-50%,0)}

/* ---------- 骨架屏（三态规范：加载用同构骨架） ---------- */
.skel{
  background:linear-gradient(90deg,
    var(--surface-2) 0%, var(--surface-3) 40%, var(--surface-2) 80%);
  background-size:200% 100%;
  border-radius:var(--r-sm);
  animation:skel-shine 1.35s var(--ease) infinite;
}
@keyframes skel-shine{from{background-position:120% 0}to{background-position:-40% 0}}
.skel-row{height:34px;margin-bottom:8px}
.skel-card{height:86px;border-radius:var(--r-md)}

/* ---------- 空态 / 错误态 ---------- */
.empty-state{
  padding:var(--sp-5);text-align:center;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);
}
.empty-state .ico{font-size:30px;opacity:.35;line-height:1}
.empty-state .t{font-size:var(--fs-lg);font-weight:600;color:var(--ink)}
.empty-state .d{font-size:var(--fs-md);max-width:420px;line-height:1.7}
.err-state{
  padding:var(--sp-4);border-radius:var(--r-md);
  background:color-mix(in srgb, var(--red) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--red) 32%, var(--line));
  color:var(--red);font-size:var(--fs-md);line-height:1.7;
}
.err-state .hint{color:var(--muted);margin-top:6px}

/* ---------- 分页条 ---------- */
.pager{display:flex;gap:6px;align-items:center;justify-content:flex-end;
       margin-top:var(--sp-3);font-size:var(--fs-md);color:var(--muted)}
.pager button{
  min-width:28px;height:26px;border:1px solid var(--line);background:var(--panel);
  color:var(--gray);border-radius:var(--r-sm);font-size:var(--fs-md);
  transition:all var(--t-fast) var(--ease);
}
.pager button:hover{border-color:var(--blue);color:var(--blue)}
.pager button.on{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.pager select{height:26px;padding:0 4px;font-size:var(--fs-md)}

/* ---------- 强提示横幅（面单预警用） ---------- */
#warnBar{
  position:fixed;top:52px;left:0;right:0;z-index:var(--z-toolbar);
  display:none;align-items:center;gap:var(--sp-3);
  padding:10px var(--sp-4);
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--red) 92%, #000) 0%,
    color-mix(in srgb, var(--amber) 88%, #000) 100%);
  color:#fff;font-size:var(--fs-lg);font-weight:600;
  box-shadow:0 8px 26px -12px rgba(225,29,72,.7);
  animation:warn-slide var(--t-mid) var(--ease-out);
}
#warnBar.on{display:flex}
#warnBar .w-ico{font-size:18px;animation:warn-blink 1.1s var(--ease) infinite}
#warnBar .w-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#warnBar .w-btn{
  border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.16);color:#fff;
  padding:5px 12px;border-radius:var(--r-sm);font-size:var(--fs-md);font-weight:600;
  transition:background var(--t-fast) var(--ease);
}
#warnBar .w-btn:hover{background:rgba(255,255,255,.3)}
@keyframes warn-slide{from{transform:translateY(-100%)}to{transform:none}}
@keyframes warn-blink{0%,100%{opacity:1}50%{opacity:.35}}
body.warn-on #main{height:calc(100% - 52px - 44px)}
body.warn-on .view{padding-top:calc(16px + 44px)}

/* ---------- 减少动效偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
                       transition-duration:.01ms!important}
}