/* ============================================================
   base.css — 基础排版与布局
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: calc(15px * var(--font-scale));
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
input, select, textarea { font: inherit; color: inherit; }
a { color: var(--info); text-decoration: none; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--brand-soft); }

/* hidden 属性必须生效：下方组件普遍用了 display:flex/grid，会覆盖 UA 的 [hidden]{display:none}，
   导致 el.hidden = true 完全失效（如 #netbar/#tabbar 常驻显示） */
[hidden] { display: none !important; }

/* 数字等宽（时长/编号/统计） */
.num, td.num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.2px; }

/* ---- 布局骨架 ---- */
#app { min-height: 100dvh; display: flex; }
#main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.view { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 12px var(--pad) calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom)); }

/* PC 端左侧导航（默认隐藏，宽屏由媒体查询显示） */
.sidebar { display: none; }

.boot { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; transition: opacity .4s var(--ease); }
.boot.hide { opacity: 0; pointer-events: none; }
.boot-logo { animation: bootPulse 1.6s var(--ease) infinite alternate; }
@keyframes bootPulse { from { transform: scale(.96); opacity: .8; } to { transform: scale(1.03); opacity: 1; } }
.boot-name { font-size: 20px; font-weight: 700; letter-spacing: 1px; }
.boot-sub { font-size: 12px; color: var(--ink-3); letter-spacing: .5px; }
.boot-bar { width: 160px; height: 3px; border-radius: 2px; background: var(--panel-2); overflow: hidden; margin-top: 18px; }
.boot-bar i { display: block; height: 100%; width: 40%; border-radius: 2px; background: var(--brand-grad); animation: bootSlide 1.1s var(--ease) infinite; }
@keyframes bootSlide { from { transform: translateX(-120%); } to { transform: translateX(420%); } }

/* 顶部栏（磨砂玻璃） */
.appbar { position: sticky; top: 0; z-index: 60; height: calc(var(--appbar-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0; display: flex; align-items: center; gap: 6px; background: var(--glass-bg-strong); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); border-bottom: 1px solid var(--glass-edge); box-shadow: 0 1px 12px -6px rgba(16, 40, 70, .18); }
.appbar-title { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 4px; }
.appbar-btn { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--ink-2); transition: background var(--dur); }
.appbar-btn:active { background: var(--panel-2); }
.appbar-btn svg { width: 22px; height: 22px; }
.appbar-actions { display: flex; align-items: center; gap: 4px; }
.appbar-icon { position: relative; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--ink-2); }
.appbar-icon:active { background: var(--panel-2); }
.appbar-icon svg { width: 21px; height: 21px; }
.appbar-badge { position: absolute; top: 6px; right: 5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }

/* 网络状态条 */
.netbar { position: sticky; top: calc(var(--appbar-h) + env(safe-area-inset-top)); z-index: 55; height: var(--netbar-h); display: flex; align-items: center; gap: 8px; padding: 0 var(--pad); font-size: 12px; color: var(--warn); background: var(--warn-soft); border-bottom: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); backdrop-filter: blur(10px); }
.netbar-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.netbar-sync { margin-left: auto; padding: 3px 12px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent); font-size: 12px; font-weight: 600; color: var(--warn); }

/* 底部导航（磨砂玻璃） */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; justify-content: center; gap: 2px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: var(--glass-bg-strong); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); border-top: 1px solid var(--glass-edge); box-shadow: 0 -6px 24px -12px rgba(16, 40, 70, .22); }
.tabbar-item { flex: 1; max-width: 108px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0 2px; border-radius: 12px; color: var(--ink-3); font-size: 11px; position: relative; transition: color var(--dur); }
.tabbar-item svg { width: 23px; height: 23px; }
.tabbar-item.active { color: var(--brand); }
.tabbar-item.active::after { content: ""; position: absolute; bottom: -2px; width: 18px; height: 3px; border-radius: 2px; background: var(--brand-grad); }
.tabbar-item .tb-badge { position: absolute; top: 0; right: calc(50% - 22px); min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--danger); color: #fff; font-size: 9.5px; font-weight: 700; display: grid; place-items: center; }

/* 通用 section 标题 */
.sec-title { display: flex; align-items: baseline; gap: 8px; margin: 20px 2px 10px; font-size: 15px; font-weight: 700; }
.sec-title .sub { font-size: 12px; font-weight: 400; color: var(--ink-3); }
.sec-title .link { margin-left: auto; font-size: 12.5px; font-weight: 500; color: var(--info); }
.empty { padding: 40px 20px; text-align: center; color: var(--ink-3); font-size: 13.5px; }
.empty svg { width: 46px; height: 46px; margin: 0 auto 10px; opacity: .5; }