/* =========================================================================
   UWA 学生中心 · 设计规范（共享视觉层：所有页面 + 初始化向导）
   app.css 是组件骨架（速查表见其顶部）；本文件在它之后加载，统一颜色、间距、圆角、阴影和动效。
   参考：Vercel Web Interface Guidelines；Carbon 字体 / 间距 / 动效规范。
   ---------------------------------------------------------------------------
   颜色  中性白 / 冷灰底，石墨色文字与主按钮；蓝紫 --accent 只用于链接、焦点、选中；
         红 / 黄 / 绿只表达状态（紧急 / 注意 / 正常）。浅色、深色两套，跟随 html[data-theme] 或系统。
   间距  4 的倍数：--sp-1 4 · --sp-2 8 · --sp-3 12 · --sp-4 16 · --sp-5 20 · --sp-6 24 · --sp-8 32
   圆角  --radius-xs 6 标签 · --radius-sm 10 按钮 / 输入框 · --radius-md 14 列表块 / 选项卡片
         --radius 16 卡片 · --radius-lg 20 弹层 · 999 胶囊
   阴影  --shadow-xs 静止卡片 · --shadow-sm 悬停浮起 · --shadow-md 菜单 / 浮层 · --shadow-lg 抽屉 / 弹窗
   图标块 34–38px 圆角方块（--panel-2 底），放在标题 / 列表项左侧，建立视觉层级（与初始化向导一致）
   动效  时长：--dur-1 120ms 按压 / 悬停 · --dur-2 200ms 小部件状态 · --dur-3 280ms 菜单 / tab / 折叠
               --dur-4 380ms 内容入场 · --dur-5 460ms 大块位移（换页编排见 navigation.js，顺序不改）
         曲线：--ease 缓出（入场、移动）· --ease-in 缓入（退场）· --ease-io 对称（来回往返）
               --ease-spring 轻回弹（勾选、选中点、角标）
         只动 transform / opacity（面板切换可加轻微 blur）；列表入场依次错开 40ms，最多 240ms。
         开关：html[data-motion="off"] 关闭全部动画；JS 用 reducedMotion.matches 判断（不直接写媒体查询）。
   ========================================================================= */
:root {
  --bg:#fafafa;--panel:#fff;--panel-2:#f3f4f5;--panel-3:#e9ebee;
  --border:#e7e9ec;--border-strong:#d7dae0;--text:#25272b;--muted:#6d7279;--faint:#92979e;
  --accent:#4c63c7;--accent-2:#3e52ae;--accent-bg:#edf0fc;
  --green:#25836b;--green-bg:#eaf5f0;--blue:#4f70c2;--blue-bg:#edf2fc;
  --red:#bd4c50;--red-bg:#fcf0f0;--yellow:#9b722b;--yellow-bg:#fbf6e9;
  --sidebar-w:248px;--radius:16px;--radius-sm:10px;--radius-xs:6px;--radius-md:14px;--radius-lg:20px;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;
  --shadow-xs:0 1px 2px rgb(25 30 40 / .03);
  --shadow-sm:0 1px 2px rgb(25 30 40 / .04),0 6px 18px rgb(25 30 40 / .06);
  --shadow-md:0 2px 6px rgb(25 30 40 / .04),0 14px 36px rgb(25 30 40 / .09);
  --shadow-lg:0 14px 45px rgb(25 30 40 / .12);
  --shadow:var(--shadow-xs);
  --ease:cubic-bezier(.22,1,.36,1);--ease-in:cubic-bezier(.4,0,.9,.55);--ease-io:cubic-bezier(.65,0,.35,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-1:120ms;--dur-2:200ms;--dur-3:280ms;--dur-4:380ms;--dur-5:460ms;
  --motion-fast:140ms;--motion-normal:240ms;--motion-slow:380ms;
  --skeleton-hi:rgb(255 255 255 / .75);
}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --bg:#18191c;--panel:#202125;--panel-2:#292b30;--panel-3:#34363d;
    --border:#34363b;--border-strong:#42454c;--text:#eceef2;--muted:#a3a7af;--faint:#858a94;
    --accent:#a5b4fa;--accent-2:#c2ccff;--accent-bg:#30364e;
    --green:#7bb9a3;--green-bg:#263a32;--blue:#93aceb;--blue-bg:#29344d;
    --red:#e89a9c;--red-bg:#3d2b2e;--yellow:#ddbe7c;--yellow-bg:#3a3326;
    --shadow-xs:0 1px 2px rgb(0 0 0 / .18);--shadow-sm:0 1px 2px rgb(0 0 0 / .2),0 8px 22px rgb(0 0 0 / .26);
    --shadow-md:0 14px 36px rgb(0 0 0 / .38);--shadow-lg:0 16px 45px rgb(0 0 0 / .45);
    --skeleton-hi:rgb(255 255 255 / .06);
  }
}
:root[data-theme="dark"] {
  --bg:#18191c;--panel:#202125;--panel-2:#292b30;--panel-3:#34363d;
  --border:#34363b;--border-strong:#42454c;--text:#eceef2;--muted:#a3a7af;--faint:#858a94;
  --accent:#a5b4fa;--accent-2:#c2ccff;--accent-bg:#30364e;
  --green:#7bb9a3;--green-bg:#263a32;--blue:#93aceb;--blue-bg:#29344d;
  --red:#e89a9c;--red-bg:#3d2b2e;--yellow:#ddbe7c;--yellow-bg:#3a3326;
  --shadow-xs:0 1px 2px rgb(0 0 0 / .18);--shadow-sm:0 1px 2px rgb(0 0 0 / .2),0 8px 22px rgb(0 0 0 / .26);
  --shadow-md:0 14px 36px rgb(0 0 0 / .38);--shadow-lg:0 16px 45px rgb(0 0 0 / .45);
  --skeleton-hi:rgb(255 255 255 / .06);
}
body { font-family:Inter,"Segoe UI Variable","Segoe UI","PingFang SC","Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif;font-size:14px;line-height:1.65;-webkit-font-smoothing:antialiased; }
button,input,textarea,select { font:inherit; }
button,a,input,textarea,select { -webkit-tap-highlight-color:transparent; }
button { touch-action:manipulation; }
::selection { background:color-mix(in srgb,var(--accent) 22%,transparent); }

/* ---------- 外壳：侧边栏 ---------- */
.sidebar { background:var(--bg);border-right:1px solid var(--border);padding:24px 14px 14px;transition:width var(--motion-normal) var(--ease),transform var(--motion-normal) var(--ease); }
.brand { gap:10px;padding:0 12px 27px;align-items:baseline;letter-spacing:0;white-space:nowrap; }
.brand-wordmark { font-size:21px;font-weight:750;letter-spacing:-.065em;line-height:1; }
.brand-name { font-size:14px;font-weight:500;white-space:nowrap;letter-spacing:.02em; }
.side-nav { gap:3px; }
.side-nav a { min-height:42px;padding:9px 13px;font-size:14px;color:var(--muted);border-radius:10px;gap:12px;font-weight:450;transition:background var(--dur-2),color var(--dur-2); }
.side-nav a:hover { background:var(--panel-3);color:var(--text); }
.side-nav a .icon { transition:transform var(--dur-3) var(--ease); }
.side-nav a:hover .icon { transform:translateX(1px) scale(1.06); }
.side-nav a.active { color:var(--text);background:var(--panel-3);font-weight:550; }
.side-nav .icon { width:19px;height:19px; }
.nav-badge { font-size:10px;background:var(--red);color:#fff;font-weight:600;min-width:18px;height:18px;border-radius:9px;animation:badge-pop var(--dur-4) var(--ease-spring); }
.side-foot { display:flex;flex-direction:row;align-items:center;gap:3px;padding:12px 3px 0;border-top:1px solid var(--border); }
.account-link { display:flex;align-items:center;gap:9px;flex:1;min-width:0;padding:4px 5px;color:var(--text);font-size:12px;border-radius:10px;transition:background var(--dur-2); }
.account-link:hover { text-decoration:none;background:var(--panel-3); }
.account-avatar { width:30px;height:30px;display:grid;place-items:center;color:var(--muted); }
.account-avatar .icon { width:25px;height:25px; }
.account-name { text-overflow:ellipsis;overflow:hidden;white-space:nowrap; }
.side-foot .icon-btn { width:31px;height:34px;color:var(--muted); }
.side-foot .icon { width:17px;height:17px; }

/* ---------- 主区域 / 页面头 ---------- */
.main { max-width:calc(1320px + var(--sidebar-w));padding:38px 42px 64px;transition:margin-left var(--motion-normal) var(--ease); }
.page-head { margin-bottom:26px;gap:16px; }
.page-title,.hello { font-size:25px;font-weight:550;letter-spacing:-.035em;text-wrap:balance; }
body .page-head .hello { font-size:26px;font-weight:550; }
.page-sub { margin-top:7px;font-size:13px;color:var(--muted);max-width:65ch; }
.page-actions .btn .icon { width:16px;height:16px; }
.drawer-body,.sheet,.model-options { overscroll-behavior:contain; }
.conversation-row,.nt-item,.mail-item { content-visibility:auto;contain-intrinsic-size:auto 44px; }

/* ---------- 卡片 ---------- */
.card { padding:22px;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-xs);background:var(--panel);
  transition:border-color var(--dur-2),box-shadow var(--dur-3) var(--ease),transform var(--dur-3) var(--ease); }
.card-head { margin-bottom:16px;gap:10px; }
.card-head h2 { font-size:14px;font-weight:600;letter-spacing:0;gap:9px; }
/* 卡片标题前的小图标块 */
.h-ico { display:inline-grid;place-items:center;width:28px;height:28px;flex-shrink:0;border-radius:8px;background:var(--panel-2);color:var(--muted); }
.h-ico .icon { width:15px;height:15px; }
.card-foot { color:var(--muted);font-size:12px; }
/* 可点的卡片：悬停浮起 */
.card.lift { cursor:pointer; }
.card.lift:hover { transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:var(--border-strong); }
.card.lift:active { transform:translateY(0) scale(.995);transition-duration:var(--dur-1); }

/* ---------- 数字块 ---------- */
.stats { gap:14px;margin-bottom:22px; }
.stat { position:relative;border-radius:14px;padding:18px 18px 16px;border-color:var(--border);box-shadow:var(--shadow-xs);
  transition:border-color var(--dur-2),box-shadow var(--dur-3) var(--ease),transform var(--dur-3) var(--ease); }
a.stat:hover { border-color:var(--border-strong);box-shadow:var(--shadow-sm);transform:translateY(-2px); }
a.stat:active { transform:scale(.985);transition-duration:var(--dur-1); }
.stat-num { font-size:28px;font-weight:550;letter-spacing:-.035em;color:var(--text);font-variant-numeric:tabular-nums; }
.stat-label { font-size:12px;margin-top:8px; }
.stat.ok .stat-num { color:var(--text); }
.stat-ico { position:absolute;top:14px;right:14px;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--panel-2);color:var(--faint);transition:color var(--dur-2),background var(--dur-2); }
.stat-ico .icon { width:14px;height:14px; }
.stat.danger .stat-ico { background:var(--red-bg);color:var(--red); }
.stat.warn .stat-ico { background:var(--yellow-bg);color:var(--yellow); }
.stat.ok .stat-ico { background:var(--green-bg);color:var(--green); }
a.stat:hover .stat-ico { color:var(--text); }

.grid-2,.grid-3,.grid-auto { gap:18px; }
.stack { gap:16px; }

/* ---------- 按钮 ---------- */
.btn { border-radius:10px;font-weight:500;font-size:13px;padding:9px 14px;min-height:36px;box-shadow:none;
  transition:background var(--dur-2),border-color var(--dur-2),color var(--dur-2),box-shadow var(--dur-2),transform var(--dur-2) var(--ease),opacity var(--dur-2); }
.btn.sm { font-size:12px;min-height:30px;padding:5px 11px;border-radius:8px; }
.btn .icon { width:16px;height:16px; }
.btn.sm .icon { width:14px;height:14px; }
.btn.primary { background:var(--text);border-color:var(--text);color:var(--panel);box-shadow:0 1px 2px rgb(20 24 30 / .12); }
.btn.primary:hover { background:color-mix(in srgb,var(--text) 86%,var(--panel));border-color:var(--text); }
.btn:not(.primary):hover { border-color:color-mix(in srgb,var(--text) 25%,var(--border)); }
.btn.ghost { color:var(--muted); }
.btn.ghost:hover { color:var(--text); }
.btn:active { transform:scale(.97);transition-duration:var(--dur-1); }
.btn[data-busy] { opacity:.78; }
.icon-btn { border-radius:9px;color:var(--muted);font-size:16px;transition:background var(--dur-2),color var(--dur-2),transform var(--dur-2) var(--ease); }
.icon-btn:hover { color:var(--text);background:var(--panel-2); }
.icon-btn:active { transform:scale(.92);transition-duration:var(--dur-1); }
.icon { width:19px;height:19px; }

/* ---------- 标签 / 徽章 / 状态灯 ---------- */
.chip { background:transparent;color:var(--muted);font-size:12px;padding:5px 12px;border-color:var(--border);
  transition:background var(--dur-2),border-color var(--dur-2),color var(--dur-2),transform var(--dur-2) var(--ease); }
.chip.on { background:var(--panel-3);color:var(--text);border-color:transparent; }
.chip:hover { color:var(--text);border-color:var(--faint); }
.chip:active { transform:scale(.95);transition-duration:var(--dur-1); }
.chip .icon { width:14px;height:14px; }
.badge { font-size:11px;font-weight:500;padding:1px 8px;gap:4px;transition:background var(--dur-2),color var(--dur-2); }
.badge .icon { width:11px;height:11px; }
.badge.green { color:var(--green);background:var(--green-bg); }
.badge.gray { background:var(--panel-3);color:var(--muted); }
.light { position:relative;transition:background var(--dur-3),box-shadow var(--dur-3); }
/* 红灯：轻微呼吸，提示需要处理 */
.light.red::after { content:"";position:absolute;inset:0;border-radius:50%;background:var(--red);animation:light-ping 2.4s var(--ease) infinite;opacity:.0; }

/* ---------- Tabs（滑块指示器由 app.js 同步位置） ---------- */
.tabs { position:relative;isolation:isolate;background:var(--panel-2);border-radius:10px;padding:3px;gap:1px; }
.tabs button { font-size:13px;font-weight:450;padding:6px 13px;border-radius:7px;transition:background var(--dur-1),color var(--dur-2),box-shadow var(--dur-1); }
.tabs button:hover { color:var(--text); }
.tabs button.active { box-shadow:0 1px 3px rgb(0 0 0 / .06);font-weight:550; }
.tabs[data-indicator] { position:relative;isolation:isolate; }
.tabs[data-indicator]::before { content:'';position:absolute;left:3px;top:3px;bottom:3px;width:var(--tab-width);transform:translateX(var(--tab-x));border-radius:7px;background:var(--panel);box-shadow:0 1px 3px rgb(0 0 0 / .07),0 0 0 .5px rgb(0 0 0 / .03);transition:transform var(--dur-3) var(--ease),width var(--dur-3) var(--ease);z-index:0; }
.tabs[data-indicator] button { position:relative;z-index:1; }
.tabs[data-indicator] button.active { background:transparent;box-shadow:none; }

/* ---------- 表单 ---------- */
input,textarea,select { font-size:14px;background:var(--panel);border-color:var(--border);padding:10px 12px;border-radius:10px; }
input:hover:not(:focus):not(:disabled),textarea:hover:not(:focus):not(:disabled),select:hover:not(:focus):not(:disabled) { border-color:var(--border-strong); }
input::placeholder,textarea::placeholder { color:var(--faint);opacity:1; }
/* 聚焦：和石墨色主按钮同一色系（不再用蓝紫光圈）；键盘焦点的 :focus-visible 轮廓仍用 --accent 保证清晰 */
input:focus,textarea:focus,select:focus { border-color:color-mix(in srgb,var(--text) 42%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--text) 8%,transparent); }
input[type="checkbox"],input[type="radio"] { width:16px;height:16px;accent-color:var(--text); }
:focus-visible { outline:2px solid var(--accent);outline-offset:3px; }
.field>label,.field>.label { color:var(--muted);font-size:12px;font-weight:500;transition:color var(--dur-2); }
.field:focus-within>label { color:var(--text); }
.hint { font-size:11px;color:var(--muted);line-height:1.7; }
input,select,textarea { transition:border-color var(--dur-2),box-shadow var(--dur-2),background var(--dur-2); }

/* ---------- 列表 ---------- */
.item { gap:12px;padding-top:13px;padding-bottom:13px;border-color:var(--border); }
.item-title { font-size:14px;font-weight:500; }
.item-sub { font-size:12px;margin-top:4px; }
.item.clickable { border-radius:10px;transition:background var(--dur-2),transform var(--dur-2) var(--ease); }
.item.clickable:active { transform:scale(.995); }
.item.unread::before { width:7px;height:7px;animation:badge-pop var(--dur-4) var(--ease-spring); }
.ico-tile { display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;border-radius:10px;background:var(--panel-2);color:var(--muted); }
.ico-tile .icon { width:17px;height:17px; }

/* ---------- 空状态 / 骨架 / 进度 ---------- */
.empty { display:flex;flex-direction:column;align-items:center;gap:10px;padding:30px 12px;color:var(--muted);font-size:13px;line-height:1.7;text-align:center; }
.empty .empty-ico { display:grid!important;place-items:center;width:42px;height:42px;margin:0;border-radius:14px;background:var(--panel-2);color:var(--faint);font-size:0;animation:empty-in var(--dur-4) var(--ease) both; }
.empty .empty-ico:empty { display:none!important; }
.empty .empty-ico .icon { width:19px;height:19px; }
.empty-text { max-width:36ch;text-wrap:balance;animation:fade var(--dur-4) var(--ease) .06s both; }
.skeleton { background:var(--panel-2);background-image:linear-gradient(100deg,transparent 30%,var(--skeleton-hi) 50%,transparent 70%);background-size:200% 100%;
  animation:skeleton-sweep 1.25s ease-in-out infinite;border-radius:8px; }
.skeleton:nth-child(2) { width:86%; } .skeleton:nth-child(3) { width:68%; }
.progress { height:7px;border-radius:4px; }
.progress>i { border-radius:4px; }
.progress .mark { width:2px;border-radius:1px; }

/* ---------- 表格 ---------- */
.table { font-size:13px; }.table th { font-size:11px;font-weight:500; }.table th,.table td { padding-top:12px;padding-bottom:12px; }

/* ---------- 横幅（每页顶部的连接 / 账户事项） ---------- */
.banners { gap:6px; }
.banner { min-height:38px;padding:8px 12px;border:0;border-radius:12px;gap:10px;font-size:12px;animation:banner-in var(--dur-4) var(--ease) both; }
.banner.expired { background:var(--yellow-bg);border:0; }.banner.warn { background:var(--panel-2);border:0; }
.banner>.icon { width:16px;height:16px;color:var(--yellow); }.banner.warn>.icon { color:var(--muted); }
.banner .banner-text { font-weight:450;min-width:160px; }
.banner .btn .icon { width:12px;height:12px;transition:transform var(--dur-2) var(--ease); }.conn>.light { display:none; }
.banner .btn { background:transparent;border:0;padding:2px 4px;min-height:24px;font-size:12px;color:var(--text);box-shadow:none; }
.banner .btn:hover { text-decoration:underline; }.banner .btn:hover .icon { transform:translateX(2px); }.banner .btn.primary { background:transparent;color:var(--text); }

/* ---------- 抽屉 / 底部弹层 ---------- */
.drawer-backdrop,.sheet-backdrop { background:rgb(17 24 39 / .26);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fade var(--dur-3) ease; }
.drawer { box-shadow:-10px 0 50px rgb(17 24 39 / .1);animation:drawer-in var(--dur-5) var(--ease);border-left:1px solid var(--border); }
.drawer-head { padding:18px 22px;border-color:var(--border); }.drawer-head h3 { font-weight:550;font-size:16px; }.drawer-body { padding:24px; }
.drawer-head .icon-btn { width:32px;height:32px; }
/* 抽屉内容：骨架 → 内容替换时依次浮现 */
.drawer-body>* { animation:rise var(--dur-4) var(--ease) both; }
.drawer-body>*:nth-child(2) { animation-delay:30ms; }.drawer-body>*:nth-child(3) { animation-delay:60ms; }
.drawer-body>*:nth-child(4) { animation-delay:90ms; }.drawer-body>*:nth-child(5) { animation-delay:120ms; }
.drawer-body>*:nth-child(n+6) { animation-delay:150ms; }
.sheet { animation:sheet-in var(--dur-4) var(--ease); }
.more-grid a { background:var(--panel-2);border-radius:14px;font-size:13px;padding:17px 4px;gap:8px;color:var(--text);animation:rise var(--dur-4) var(--ease) both;transition:background var(--dur-2),transform var(--dur-2) var(--ease); }
.more-grid a:active { transform:scale(.96); }
.more-grid a:nth-child(2) { animation-delay:25ms; }.more-grid a:nth-child(3) { animation-delay:50ms; }.more-grid a:nth-child(4) { animation-delay:75ms; }.more-grid a:nth-child(5) { animation-delay:100ms; }.more-grid a:nth-child(6) { animation-delay:125ms; }

/* ---------- 提示（toast） ---------- */
.toasts { top:18px;gap:8px; }
.toast { display:flex;align-items:center;gap:9px;padding:9px 16px 9px 12px;border-radius:12px;font-size:13px;box-shadow:var(--shadow-md);animation:toast-in var(--dur-4) var(--ease);
  background:var(--text);color:var(--panel);line-height:1.5; }
.toast-ico { display:grid;place-items:center;width:20px;height:20px;flex-shrink:0;border-radius:50%;background:rgb(255 255 255 / .16); }
:root[data-theme="dark"] .toast-ico { background:rgb(0 0 0 / .12); }
.toast-ico .icon { width:12px;height:12px;stroke-width:2.4; }
.toast.ok { background:var(--text);color:var(--panel); }
.toast.ok .toast-ico { background:var(--green);color:#fff; }
.toast.error { background:var(--red);color:#fff; }
.toast.error .toast-ico { background:rgb(255 255 255 / .22); }
.toast-text { min-width:0;overflow-wrap:anywhere; }

/* ---------- 登录 ---------- */
.login-wrap { background:var(--bg); }.login-card { padding:28px;border:1px solid var(--border);box-shadow:0 14px 55px rgb(25 30 40 / .05); }
.login-card .brand { padding-bottom:22px; }.login-card .brand-mark { display:none; }

/* ---------- 其它 ---------- */
.dev-tools { display:none; }.settings-help { margin:0 0 12px;font-size:12px;color:var(--muted); }.settings-help summary,.push-guide details summary { cursor:pointer; }.push-guide details { margin-bottom:12px; }.push-guide details summary { color:var(--text);font-size:12px; }
.sr-only { position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important; }
details>summary { transition:color var(--dur-2); }
details[open]>summary~* { animation:rise var(--dur-3) var(--ease) both; }

/* 模型生成的 HTML（早报 / 周报 / 记账点评 / 通知详情）常写死浅色背景下的内联颜色（如 color:#222）：
   深色模式下统一换成主题文字色、浅底换成面板色，保证可读 */
:root[data-theme="dark"] .prose [style*="color"] { color:inherit!important; }
:root[data-theme="dark"] .prose [style*="background"] { background:var(--panel-2)!important; }
:root[data-theme="dark"] .prose [style*="border"] { border-color:var(--border)!important; }
@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .prose [style*="color"] { color:inherit!important; }
  :root:not([data-theme="light"]) .prose [style*="background"] { background:var(--panel-2)!important; }
  :root:not([data-theme="light"]) .prose [style*="border"] { border-color:var(--border)!important; }
}

/* 主题切换：View Transitions 圆形扩散（app.js 控制 clip-path；不支持时直接切换） */
::view-transition-old(root),::view-transition-new(root) { animation:none;mix-blend-mode:normal; }
::view-transition-old(root) { z-index:1; }
::view-transition-new(root) { z-index:2; }

/* ---------- 关键帧 ---------- */
@keyframes drawer-in { from { opacity:0;transform:translateX(40px); } to { opacity:1;transform:translateX(0); } }
@keyframes sheet-in { from { opacity:0;transform:translateY(32px); } to { opacity:1;transform:translateY(0); } }
@keyframes toast-in { from { opacity:0;transform:translateY(-10px) scale(.96); } to { opacity:1;transform:translateY(0) scale(1); } }
@keyframes rise { from { opacity:0;transform:translateY(8px); } to { opacity:1;transform:none; } }
@keyframes banner-in { from { opacity:0;transform:translateY(-6px); } to { opacity:1;transform:none; } }
@keyframes empty-in { from { opacity:0;transform:scale(.8); } to { opacity:1;transform:none; } }
@keyframes badge-pop { 0% { transform:scale(.4);opacity:0; } 100% { transform:scale(1);opacity:1; } }
@keyframes skeleton-sweep { from { background-position:150% 0; } to { background-position:-50% 0; } }
@keyframes light-ping { 0% { transform:scale(1);opacity:.45; } 70%,100% { transform:scale(2.6);opacity:0; } }
@keyframes check-draw { to { stroke-dashoffset:0; } }

@media(min-width:901px) { .sheet { left:16px;right:auto;bottom:78px;width:350px;border-radius:16px;padding:18px; }.sheet-handle { display:none; } }
@media(max-width:1100px) and (min-width:901px) { :root { --sidebar-w:224px; }.main { padding-left:28px;padding-right:28px; } }
@media(max-width:900px) {
  .main { padding:24px 16px calc(82px + env(safe-area-inset-bottom)); }
  .mobile-top { padding:14px 16px;padding-top:max(14px,env(safe-area-inset-top));background:color-mix(in srgb,var(--panel) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); }
  .mobile-top .brand { padding:0;align-items:baseline;gap:8px; }.mobile-top .brand-wordmark { font-size:20px; }.mobile-top .brand-name { font-size:13px; }
  .tabbar { background:color-mix(in srgb,var(--panel) 94%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); }
  .tabbar a,.tabbar button { padding:9px 0 7px;gap:4px;transition:color var(--dur-2); }.tabbar .active { color:var(--text); }.tabbar .icon { width:20px;height:20px;transition:transform var(--dur-3) var(--ease-spring); }
  .tabbar .active .icon { transform:translateY(-1px) scale(1.06); }
  .tabbar a:active .icon,.tabbar button:active .icon { transform:scale(.88); }
  .card { padding:18px; }.page-title,.hello { font-size:23px; }.page-head { margin-bottom:22px; }.page-sub { font-size:12px; }
  .stats { gap:9px; }.stat { padding:14px 12px; }.stat-num { font-size:23px; }.stat-label { font-size:11px;line-height:1.5; }.stat-ico { display:none; }
  .drawer-body { padding:20px; }.drawer-head { padding:15px 18px; }.drawer { animation:sheet-in var(--dur-5) var(--ease);border-left:0; }
  .banner { font-size:11px;min-height:36px;padding:7px 10px; }.banner .btn { font-size:11px; }
  .card.lift:hover { transform:none;box-shadow:var(--shadow-xs); }
}
@media(max-width:640px) {
  /* 底部弹层式抽屉：左右贴边（100vw 会把桌面滚动条宽度也算进去），顶部加一个拖动把手的视觉提示 */
  .drawer { left:0;right:0;width:auto; }
  .drawer::before { content:"";position:absolute;top:7px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--border-strong); }
}
/* 确认 / 输入对话框（ui.confirm / ui.prompt，替代浏览器自带弹窗）：桌面居中浮起，手机底部弹层 */
.dlg { padding:0;border:0;width:min(420px,calc(100vw - 32px));max-width:none;border-radius:var(--radius-lg);background:var(--panel);color:var(--text);box-shadow:var(--shadow-lg);overflow:visible; }
.dlg[open] { animation:dlg-in var(--dur-3) var(--ease) both; }
.dlg::backdrop { background:rgb(17 24 39 / .3);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fade var(--dur-3) ease both; }
.dlg.closing { animation:dlg-out 160ms var(--ease-in) forwards; }
.dlg.closing::backdrop { animation:dlg-fade-out 160ms ease forwards; }
.dlg.shake { animation:dlg-shake .32s var(--ease-io); }
.dlg-panel { padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-5); }
.dlg-head { display:flex;gap:var(--sp-3);align-items:flex-start; }
.dlg-ico { flex:none;width:38px;height:38px;border-radius:var(--radius-sm);display:grid;place-items:center;background:var(--panel-2);color:var(--text);animation:badge-pop var(--dur-4) var(--ease-spring) 60ms both; }
.dlg-ico .icon { width:19px;height:19px; }
.dlg.danger .dlg-ico { background:var(--red-bg);color:var(--red); }
.dlg-text { min-width:0;padding-top:1px; }
.dlg-title { margin:0;font-size:16px;font-weight:600;line-height:1.45;letter-spacing:-.01em;overflow-wrap:anywhere; }
.dlg-msg { margin:5px 0 0;color:var(--muted);font-size:13.5px;line-height:1.6;white-space:pre-line;overflow-wrap:anywhere; }
.dlg-field { margin:0; }
.dlg-actions { display:flex;justify-content:flex-end;gap:var(--sp-2); }
.dlg-actions .btn { min-width:84px;justify-content:center; }
.dlg .btn.dlg-ok.danger { background:var(--red);border-color:var(--red);color:var(--panel); }
.dlg .btn.dlg-ok.danger:hover { background:color-mix(in srgb,var(--red) 88%,var(--text));border-color:color-mix(in srgb,var(--red) 88%,var(--text)); }
@keyframes dlg-in { from { opacity:0;transform:translateY(10px) scale(.96); } }
@keyframes dlg-out { to { opacity:0;transform:translateY(6px) scale(.97); } }
@keyframes dlg-fade-out { to { opacity:0; } }
@keyframes dlg-shake { 20%,60% { transform:translateX(-6px); } 40%,80% { transform:translateX(6px); } }
@media(max-width:640px) {
  .dlg { width:100%;margin:auto 0 0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding-bottom:env(safe-area-inset-bottom); }
  .dlg::before { content:"";position:absolute;top:7px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--border-strong); }
  .dlg[open] { animation:dlg-sheet-in var(--dur-4) var(--ease) both; }
  .dlg.closing { animation:dlg-sheet-out 180ms var(--ease-in) forwards; }
  .dlg-panel { padding:var(--sp-6) var(--sp-5) var(--sp-5); }
  .dlg-actions { display:grid;grid-template-columns:1fr 1fr; }
  .dlg-actions .btn { min-height:44px; }
}
@keyframes dlg-sheet-in { from { transform:translateY(100%); } }
@keyframes dlg-sheet-out { to { transform:translateY(100%); } }
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; }
html[data-motion="off"] .dlg::backdrop { animation:none!important; }
html[data-motion="off"]::view-transition-old(root),html[data-motion="off"]::view-transition-new(root) { animation:none; }