/* ============================================================
   苹果风格增强层 · Apple-style Theme Layer (V1.2.2+)
   - 浅 / 深双主题（自动跟随系统 + 手动切换）
   - 毛玻璃 Vibrancy（顶部栏 / 侧栏 / 抽屉 / 弹层 / 提示）
   - 增大圆角 + 柔阴影替代生硬边框
   - 按压回弹 / hover 浮起 / spring 过渡
   - 分段控制器（Segmented Control）
   - 响应式：窄屏侧栏收为抽屉
   本文件独立于 styles.css，移除本文件即可回到原风格。
   ============================================================ */

/* ---------- 1. 主题令牌（深色为默认，浅色为覆盖） ---------- */
:root{
  /* 圆角升级：全局略增，卡片用更大圆角 */
  --radius:13px;
  --radius-lg:18px;
  /* 毛玻璃与阴影令牌（深色默认） */
  --glass-bg:rgba(17,24,36,.72);
  --glass-border:rgba(255,255,255,.10);
  --hairline:rgba(255,255,255,.09);
  --shadow-card:0 1px 2px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.30);
  --shadow-pop:0 18px 50px rgba(0,0,0,.50);
  --spring:cubic-bezier(.34,1.56,.64,1);   /* 回弹 */
  --ease:cubic-bezier(.22,1,.36,1);        /* 顺滑 */
  --focus:0 0 0 3px rgba(45,212,191,.35);
}
/* 手动浅色 */
:root[data-theme="light"]{
  --bg:#f5f5f7; --surface-1:#ffffff; --surface-2:#fbfbfd; --surface-3:#eef0f3; --surface-hi:#ffffff;
  --line:#d9d9de; --line-soft:#ececf0; --text:#1d1d1f; --text-2:#42424a; --text-mute:#86868b;
  --accent:#0d9488; --accent-2:#6366f1; --accent-3:#d97706; --danger:#dc2626; --ok:#059669;
  --fact:#059669; --human:#6366f1; --assume:#d97706; --tbd:#64748b;
  --kpi-num:#1d1d1f; --kpi-lab:#6e6e73;
  --glass-bg:rgba(255,255,255,.72); --glass-border:rgba(0,0,0,.10); --hairline:rgba(0,0,0,.08);
  --shadow-card:0 1px 2px rgba(0,0,0,.06),0 10px 30px rgba(0,0,0,.10);
  --shadow-pop:0 18px 50px rgba(0,0,0,.18);
  --focus:0 0 0 3px rgba(13,148,136,.35);
}
/* 手动深色 */
:root[data-theme="dark"]{
  --glass-bg:rgba(17,24,36,.72); --glass-border:rgba(255,255,255,.10); --hairline:rgba(255,255,255,.09);
  --shadow-card:0 1px 2px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.30);
  --shadow-pop:0 18px 50px rgba(0,0,0,.50);
}
/* 自动跟随系统：未手动设置时按系统偏好 */
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg:#f5f5f7; --surface-1:#ffffff; --surface-2:#fbfbfd; --surface-3:#eef0f3; --surface-hi:#ffffff;
    --line:#d9d9de; --line-soft:#ececf0; --text:#1d1d1f; --text-2:#42424a; --text-mute:#86868b;
    --accent:#0d9488; --accent-2:#6366f1; --accent-3:#d97706; --danger:#dc2626; --ok:#059669;
    --fact:#059669; --human:#6366f1; --assume:#d97706; --tbd:#64748b;
    --kpi-num:#1d1d1f; --kpi-lab:#6e6e73;
    --glass-bg:rgba(255,255,255,.72); --glass-border:rgba(0,0,0,.10); --hairline:rgba(0,0,0,.08);
    --shadow-card:0 1px 2px rgba(0,0,0,.06),0 10px 30px rgba(0,0,0,.10);
    --shadow-pop:0 18px 50px rgba(0,0,0,.18);
    --focus:0 0 0 3px rgba(13,148,136,.35);
  }
}
/* 浅色下的细网格背景调淡 */
:root[data-theme="light"] body::before{
  background-image:
    linear-gradient(rgba(0,0,0,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.025) 1px,transparent 1px);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme]) body::before{
    background-image:
      linear-gradient(rgba(0,0,0,.025) 1px,transparent 1px),
      linear-gradient(90deg,rgba(0,0,0,.025) 1px,transparent 1px);
  }
}

/* ---------- 2. 毛玻璃 Vibrancy ---------- */
.topbar{
  background:var(--glass-bg);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--glass-border);
}
.sidebar{
  background:var(--glass-bg);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-right:1px solid var(--glass-border);
}
.drawer{
  background:var(--glass-bg);
  -webkit-backdrop-filter:saturate(180%) blur(30px);
  backdrop-filter:saturate(180%) blur(30px);
  border-left:1px solid var(--glass-border);
  transition:transform .34s var(--ease);
  box-shadow:var(--shadow-pop);
}
.drawer-mask{ background:rgba(0,0,0,.35); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.suggest{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border:1px solid var(--glass-border); box-shadow:var(--shadow-pop);
}
.toast{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border:1px solid var(--glass-border); box-shadow:var(--shadow-pop);
  animation:toastIn .32s var(--spring);
}
@keyframes toastIn{ from{opacity:0; transform:translateY(8px) scale(.96)} to{opacity:1; transform:none} }

/* ---------- 3. 容器：圆角 + 柔阴影 ---------- */
.panel{ border-radius:var(--radius-lg); border-color:var(--hairline); box-shadow:var(--shadow-card); }
.kpi{ border-radius:var(--radius-lg); border-color:var(--hairline); box-shadow:var(--shadow-card); }
.cards .card{ border-radius:var(--radius-lg); border-color:var(--hairline); box-shadow:var(--shadow-card); }
.table-wrap{ border-radius:var(--radius-lg); border-color:var(--hairline); box-shadow:var(--shadow-card); }
.gsearch input{ border-radius:var(--radius-pill); border-color:var(--hairline); background:var(--surface-3);
  transition:border-color .18s, box-shadow .18s, background .18s; }
.gsearch input:focus{ box-shadow:var(--focus); border-color:var(--accent); }

/* ---------- 4. 苹果交互动效 ---------- */
.btn-ic{
  border-radius:var(--radius); border-color:var(--hairline); background:var(--surface-3); color:var(--text-2);
  transition:transform .18s var(--spring), box-shadow .2s, color .15s, border-color .15s, background .15s;
}
.btn-ic:hover{ color:var(--text); border-color:var(--accent); transform:translateY(-1px); box-shadow:var(--shadow-card); }
.btn-ic:active{ transform:scale(.92); }
.btn-ic:focus-visible{ outline:none; box-shadow:var(--focus); }

.navitem{
  border-radius:var(--radius);
  transition:background .15s, color .15s, transform .18s var(--spring), box-shadow .2s;
}
.navitem:hover{ background:var(--surface-3); color:var(--text); transform:translateX(3px); }
.navitem:active{ transform:scale(.98); }
.navitem.active{ box-shadow:inset 3px 0 0 var(--accent); background:var(--surface-3); }

.kpi{ transition:transform .22s var(--spring), box-shadow .22s, border-color .15s, background .15s; }
.kpi:hover{ transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow-pop); background:var(--surface-3); }
.kpi:active{ transform:scale(.98) translateY(-1px); }

.panel, .cards .card{ transition:transform .22s var(--spring), box-shadow .22s, border-color .15s; }
.panel:hover, .cards .card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-pop); }

.stop{ border-radius:var(--radius); border-color:var(--hairline); transition:color .15s,border-color .15s,background .15s,transform .18s var(--spring); }
.stop:hover{ transform:translateY(-1px); }
.stop:active{ transform:scale(.97); }

/* 统一焦点环（键盘可达性） */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .navitem:focus-visible{
  outline:none; box-shadow:var(--focus);
}

/* 细分滚动条 */
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-thumb{ background:var(--line); border-radius:9px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:var(--text-mute); }

/* ---------- 5. 分段控制器 Segmented Control ---------- */
.seg{ display:inline-flex; padding:2px; background:var(--surface-3); border:1px solid var(--hairline); border-radius:var(--radius-pill); gap:2px; }
.seg button{
  appearance:none; border:0; background:transparent; color:var(--text-2); font:inherit; font-size:13px;
  padding:5px 13px; border-radius:var(--radius-pill); cursor:pointer; white-space:nowrap;
  transition:color .18s, background .2s var(--spring), box-shadow .2s, transform .15s var(--spring);
}
.seg button:hover{ color:var(--text); }
.seg button.active{ background:var(--surface-1); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.22); }
.seg button:active{ transform:scale(.94); }
.seg button:focus-visible{ outline:none; box-shadow:var(--focus); }

/* 主题切换按钮：图标随主题变化（由 app.js 设置 innerHTML） */
#themeBtn .ic{ width:18px; height:18px; }

/* ---------- 6. 响应式：窄屏侧栏收为抽屉 ---------- */
#navToggle{ display:none; }
@media (max-width: 980px){
  #navToggle{ display:inline-flex; }
  .brand .lab{ display:none; }
  .brand .ver{ display:none; }
  .gsearch{ max-width:none; }
  .body{ grid-template-columns:1fr; }
  .sidebar{
    position:fixed; top:0; bottom:0; left:0; width:var(--sidebar-w); z-index:260;
    transform:translateX(-100%); transition:transform .32s var(--ease); box-shadow:var(--shadow-pop);
  }
  .sidebar.open{ transform:translateX(0); }
  .sidebar.collapsed{ --sidebar-w:236px; }   /* 移动端不折叠为 60px，直接抽屉开合 */
  main#view{ padding-left:0; }
}
@media (max-width: 560px){
  .topbar{ gap:10px; padding:8px 12px; }
  .topright{ gap:6px; }
  .brand .name{ font-size:14px; }
  .conn .txt{ display:none; }   /* 仅显示状态点 */
}