:root {
    --bg: #f4f6fb;
    --card: rgba(255,255,255,.78);
    --border: rgba(255,255,255,.9);          /* 卡片描边：贴在极光上要够亮 */
    --border-subtle: rgba(226,232,240,.85);  /* 输入框 / 次级分隔：要够淡 */
    --text: #0f172a;
    --muted: #64748b;
    /* 品牌与交互色。散落的品牌蓝与 hover 底色全部收在这里，改主题色只需动这
       几行，不必全局搜替换。（badge-blue 的底色自带一档更浅的透明度，单独留存。） */
    --brand: #2563eb;
    --brand-soft: rgba(37,99,235,.1);
    --brand-soft-hover: rgba(37,99,235,.16);
    --brand-fg: #2563eb;
    --hover-bg: rgba(120,130,150,.12);
    --hover-bg-soft: rgba(120,130,150,.1);
    --focus-ring: rgba(59,130,246,.18);
    --glass-blur: 26px;
    --glass-hi: rgba(255,255,255,.95);
    --glass-shadow: rgba(15,23,42,.07);
    --glass-shadow-hover: rgba(15,23,42,.13);
  }
  html.dark {
    --bg: #090d16;
    --card: rgba(15,23,42,.72);
    --border: rgba(255,255,255,.09);
    --border-subtle: rgba(148,163,184,.16);
    --text: #f8fafc;
    --muted: #94a3b8;
    --brand: #3b82f6;
    --brand-soft: rgba(59,130,246,.16);
    --brand-soft-hover: rgba(59,130,246,.22);
    --brand-fg: #60a5fa;
    --hover-bg: rgba(148,163,184,.14);
    --hover-bg-soft: rgba(148,163,184,.1);
    --focus-ring: rgba(59,130,246,.28);
    --glass-hi: rgba(255,255,255,.12);
    --glass-shadow: rgba(0,0,0,.45);
    --glass-shadow-hover: rgba(0,0,0,.65);
  }
  body { font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
         background: var(--bg); color: var(--text); position: relative; min-height: 100vh;
         transition: background-color .3s ease, color .3s ease;
         -webkit-font-smoothing: antialiased; }
  /* 苹果「动态玻璃」的动感来源：几团缓慢漂移、呼吸缩放的彩色光斑铺在最底层，
     上面的半透明玻璃卡片透过它就有了流动的光泽，而不是死板的一块白。 */
  body::before {
    content: ""; position: fixed; inset: -30%; z-index: -1; pointer-events: none;
    background:
      radial-gradient(38% 38% at 18% 22%, rgba(56,189,248,.38), transparent 64%),
      radial-gradient(36% 36% at 82% 18%, rgba(139,92,246,.36), transparent 64%),
      radial-gradient(44% 44% at 74% 82%, rgba(244,63,94,.28), transparent 64%),
      radial-gradient(40% 40% at 22% 80%, rgba(16,185,129,.30), transparent 64%);
    filter: blur(56px) saturate(1.3);
    animation: auroraFloat 24s ease-in-out infinite alternate;
  }
  /* 深色下必须单独降饱和：亮色系光斑叠在近黑底上会糊成一团发灰的雾，
     压掉部分 opacity 并加大模糊才透得出来。 */
  html.dark body::before { filter: blur(64px) saturate(1.1); opacity: .75; }
  @keyframes auroraFloat {
    0%   { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
    50%  { transform: translate3d(2%,-2%,0) scale(1.08) rotate(5deg); }
    100% { transform: translate3d(-2%,2%,0) scale(1.03) rotate(-4deg); }
  }
  @media (prefers-reduced-motion: reduce) { body::before { animation: none; } }
  /* 玻璃卡片：半透明 + 背景模糊(backdrop-filter) + 顶沿内高光，苹果 liquid glass 质感。
     阴影带负扩散(-10px)让投影更收敛下沉，配合 Apple 式缓动曲线。 */
  .card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    backdrop-filter: blur(var(--glass-blur)) saturate(1.9);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.9);
    box-shadow: 0 10px 30px -10px var(--glass-shadow), inset 0 1px 1px var(--glass-hi);
    transition: box-shadow .25s cubic-bezier(.16,1,.3,1),
                transform .25s cubic-bezier(.16,1,.3,1),
                border-color .25s;
  }
  /* 模态弹窗专用卡片：居中定位、严禁 hover 偏移、圆角与顶部舒适留白 */
  .modal-dialog {
    margin: auto !important;
    transform: none !important;
    border-radius: 24px;
  }
  /* 模态遮罩层强制提供上下各 60px 的留白间距，绝对不贴顶 */
  .fixed[id$="-modal"] {
    padding-top: 64px !important;
    padding-bottom: 48px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .card:not(.modal-dialog):hover { box-shadow: 0 20px 40px -12px var(--glass-shadow-hover), inset 0 1px 1px var(--glass-hi);
                transform: translateY(-2px); }
  .row-hover:hover td { background: rgba(241,245,249,.65); }
  html.dark .row-hover:hover td { background: rgba(30,41,59,.55); }

  /* 徽章：半透明底 + 同色描边（而非实心药丸），暗色下自动提亮前景色。
     white-space:nowrap 是必须的：窄表格列里「失败」「拦截」会被拆成两行，
     徽章看起来像两个半截药丸。 */
  .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
           border-radius: 9999px; font-size: 11.5px; line-height: 1.4; font-weight: 600;
           white-space: nowrap; transition: all .15s; }
  .badge-green  { background: rgba(16,185,129,.12); color: #059669; border: 1px solid rgba(16,185,129,.2); }
  .badge-red    { background: rgba(239,68,68,.12);  color: #dc2626; border: 1px solid rgba(239,68,68,.2); }
  .badge-amber  { background: rgba(245,158,11,.12); color: #d97706; border: 1px solid rgba(245,158,11,.2); }
  .badge-gray   { background: rgba(100,116,139,.12);color: #64748b; border: 1px solid rgba(100,116,139,.2); }
  .badge-blue   { background: rgba(37,99,235,.12);  color: var(--brand); border: 1px solid rgba(37,99,235,.2); }
  .badge-cyan   { background: rgba(6,182,212,.12);  color: #0891b2; border: 1px solid rgba(6,182,212,.2); }
  .badge-violet { background: rgba(124,58,237,.12); color: #7c3aed; border: 1px solid rgba(124,58,237,.2); }
  html.dark .badge-green  { background: rgba(16,185,129,.18); color: #34d399; border-color: rgba(16,185,129,.3); }
  html.dark .badge-red    { background: rgba(239,68,68,.18);  color: #f87171; border-color: rgba(239,68,68,.3); }
  html.dark .badge-amber  { background: rgba(245,158,11,.18); color: #fbbf24; border-color: rgba(245,158,11,.3); }
  html.dark .badge-gray   { background: rgba(148,163,184,.18);color: #cbd5e1; border-color: rgba(148,163,184,.3); }
  html.dark .badge-blue   { background: var(--focus-ring); color: #60a5fa; border-color: rgba(59,130,246,.3); }
  html.dark .badge-cyan   { background: rgba(6,182,212,.18); color: #22d3ee; border-color: rgba(6,182,212,.3); }
  html.dark .badge-violet { background: rgba(139,92,246,.18); color: #a78bfa; border-color: rgba(139,92,246,.3); }

  .toast { animation: slidein .3s cubic-bezier(.16,1,.3,1); }
  @keyframes slidein { from { transform: translateX(100%); opacity: 0 } to { transform: none; opacity: 1 } }

  /* 输入框：聚焦用光环(box-shadow)而非 outline，并把底色压得更实——
     玻璃卡片上再叠个半透明输入框，聚焦时很容易「看不出焦点在哪」。 */
  .inp { width: 100%; border: 1px solid var(--border-subtle); border-radius: 12px;
         padding: 9px 14px; font-size: 13.5px; color: var(--text);
         background: rgba(255,255,255,.6);
         transition: all .2s cubic-bezier(.16,1,.3,1); }
  html.dark .inp { background: rgba(15,23,42,.6); color: #f1f5f9; }
  .inp:focus { outline: none; border-color: #3b82f6;
               box-shadow: 0 0 0 3px var(--focus-ring);
               background: rgba(255,255,255,.9); }
  html.dark .inp:focus { background: rgba(15,23,42,.9); }

  /* 非 input 的 contenteditable 占位符机制（彻底防止任何浏览器表单引擎嗅探） */
  [contenteditable][data-placeholder]:empty:before {
    content: attr(data-placeholder);
    color: var(--muted);
    pointer-events: none;
    opacity: 0.75;
  }

  /* 原生 <option> 不继承 CSS 变量，也不吃 dark: 类。不显式指定的话，桌面
     Chrome/Edge 在深色系统主题下会渲染成「深底 + 深字」，下拉列表整个看不清。 */
  select option { background-color: #ffffff; color: #0f172a; }
  html.dark select option { background-color: #0f172a; color: #f8fafc; }

  /* 账号页区域过滤按钮（全部/国行/国际/Qoder） */
  .acct-region-btn { padding: 7px 15px; border-radius: 10px; border: 1px solid var(--border-subtle);
                     background: var(--card); color: var(--muted); font-size: 13px; font-weight: 500;
                     cursor: pointer; transition: all .15s; }
  .acct-region-btn:hover { color: var(--text); }
  .acct-region-active { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); font-weight: 600; }
  html.dark .acct-region-active { color: #60a5fa; border-color: #3b82f6; background: rgba(59,130,246,.16); }

  /* 登录区域切换段控件（国行 / 国际版）。选中态用品牌蓝描边高亮。 */
  .login-region-btn { background: var(--card); color: var(--muted); border-color: var(--border-subtle);
                      cursor: pointer; transition: all .2s; }
  .login-region-btn:hover { color: var(--text); }
  .login-region-active { border-color: var(--brand) !important; color: var(--brand) !important; background: var(--brand-soft) !important; }

  /* 侧边栏 / 移动端顶栏也玻璃化，与卡片主题统一（半透明 + 背景模糊）。 */
  .glass-nav {
    background: var(--card) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(1.9);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.9);
  }

  /* 账号卡片的图标按钮与「…」下拉菜单 */
  .acc-icon-btn { width: 32px; height: 32px; display: inline-flex; align-items: center;
                  justify-content: center; border-radius: 9px; color: var(--muted); transition: all .15s; }
  .acc-icon-btn:hover { background: rgba(120,130,150,.15); color: var(--text); }
  .acc-menu {
    position: absolute; right: 0; top: 36px; z-index: 40; min-width: 176px; padding: 6px;
    background: var(--card); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 16px 40px rgba(15,23,42,.18);
    backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8);
  }
  /* 菜单项是 <button>（键盘/读屏可操作），必须显式清掉 UA 默认的边框、底色、
     字体与居中文字——不清的话会渲染成带灰边框的系统按钮。 */
  .acc-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 16px;
                   width: 100%; padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 500;
                   color: var(--text); cursor: pointer; white-space: nowrap; transition: background .12s;
                   background: none; border: 0; text-align: left; font-family: inherit; }
  .acc-menu-item:hover { background: var(--hover-bg); }
  .acc-menu-item:focus-visible { outline: 2px solid #3b82f6; outline-offset: -2px; }
  .acc-menu-item.danger { color: #dc2626; }
  .acc-menu-item.danger i { color: #dc2626; }
  .acc-menu-item i { font-size: 12px; color: var(--muted); }
  .acc-menu-sep { height: 1px; margin: 5px 4px; background: var(--border-subtle); }

  /* 视图切换用 hidden **属性** 而不是 Tailwind 的 .hidden 类：#overview 带着
     .grid（display:grid），两个同级 display 工具类谁赢取决于 CDN 构建的出场
     顺序，靠不住。属性选择器加 !important 则一锤定音。 */
  [hidden] { display: none !important; }
  .view { animation: viewin .2s cubic-bezier(.16,1,.3,1); }
  @keyframes viewin { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }

  /* 侧边导航。样式收在这里而不是散在 Tailwind class 串里，切换态只用加减
     .active 一个类——之前要同时 toggle 六个 class，改一处就得改六处。 */
  .nav-group {
    padding: 16px 14px 6px; font-size: 11px; font-weight: 700;
    color: var(--muted); letter-spacing: .06em; text-transform: uppercase;
  }
  .nav-item {
    position: relative; display: flex; align-items: center; gap: 11px;
    padding: 9px 13px; margin: 2px 0; border-radius: 12px;
    font-size: 13.5px; font-weight: 500; color: var(--text); text-decoration: none;
    transition: all .2s cubic-bezier(.16,1,.3,1);
    /* 点击后浏览器默认的黑色 focus 边框在这里纯属噪音——鼠标点一下就留一个
       方框挂着。键盘 Tab 访问仍然需要焦点指示，所以只对 :focus-visible 保留。 */
    outline: none;
  }
  /* 选中态左侧 3px 渐变指示条：从 0 高度展开，比只换背景色多一个明确的指向。 */
  .nav-item::before {
    content: ""; position: absolute; left: 4px; top: 50%;
    width: 3px; height: 0; border-radius: 3px;
    background: linear-gradient(180deg, #3b82f6, #6366f1);
    transform: translateY(-50%); transition: height .22s cubic-bezier(.16,1,.3,1);
  }
  .nav-item:focus { outline: none; }
  .nav-item:focus-visible { outline: 2px solid #3b82f6; outline-offset: -2px; }
  .nav-item i { width: 18px; font-size: 14px; text-align: center; color: var(--muted);
                transition: all .2s cubic-bezier(.16,1,.3,1); }
  .nav-item:hover { background: var(--hover-bg-soft); transform: translateX(2px); }
  .nav-item:hover i { transform: scale(1.15); color: var(--text); }
  .nav-item.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
  .nav-item.active::before { height: 20px; }
  .nav-item.active i { color: var(--brand); }
  html.dark .nav-item.active { background: rgba(59,130,246,.16); color: #60a5fa; }
  html.dark .nav-item.active i { color: #60a5fa; }
  html.dark .nav-item.active::before { background: linear-gradient(180deg, #60a5fa, #a78bfa); }

  #sidebar { transition: transform .28s cubic-bezier(.16,1,.3,1); }
  @media (prefers-reduced-motion: reduce) {
    .nav-item, .nav-item:hover, .nav-item i, #sidebar { transition: none; transform: none; }
  }

  /* 三态主题切换段控件（浅色 / 深色 / 自动） */
  .theme-toggle-group { display: flex; align-items: center; background: var(--hover-bg);
                        border-radius: 10px; padding: 3px; gap: 3px; }
  .theme-toggle-btn { flex: 1; display: flex; align-items: center; justify-content: center;
                      padding: 5px 8px; border-radius: 8px; font-size: 11.5px; font-weight: 500;
                      color: var(--muted); transition: all .15s; cursor: pointer; }
  .theme-toggle-btn:hover { color: var(--text); }
  .theme-toggle-btn.theme-active { background: var(--card); color: var(--brand);
                                   box-shadow: 0 1px 4px rgba(0,0,0,.1); font-weight: 600; }
  html.dark .theme-toggle-btn.theme-active { color: #60a5fa; }

  /* 纯 CSS 悬浮提示气泡：文案写在 data-hint 里。
     比 title= 强的三点：样式可控、可换行、移动端长按也能出。 */
  .hint { position: relative; display: inline-flex; cursor: help; color: var(--muted); }
  .hint::after {
    content: attr(data-hint);
    position: absolute; bottom: 150%; left: 50%; transform: translateX(-50%) translateY(4px);
    width: max-content; max-width: 280px; padding: 9px 13px; border-radius: 12px;
    background: #0f172a; color: #f8fafc; font-size: 12px; line-height: 1.55; font-weight: 400;
    text-align: left; white-space: normal; box-shadow: 0 12px 32px rgba(0,0,0,.3);
    opacity: 0; visibility: hidden; pointer-events: none; z-index: 70;
    transition: opacity .16s, transform .16s;
  }
  .hint:hover::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* Popover：hover / 键盘聚焦时展开一块明细面板。
   与 .hint 的区别：hint 是纯文案气泡（::after + attr()），适合一句话说明；
   popover 要塞结构化内容（多行 k/v、徽标），必须用真实子元素，所以是独立组件。 */
.pop-wrap { position: relative; display: inline-flex; }
.pop-panel {
  position: absolute; left: 0; top: 150%; z-index: 70;
  min-width: 176px; padding: 10px 12px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--border);
  box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  display: flex; flex-direction: column; gap: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .16s, transform .16s, visibility .16s;
  pointer-events: none; font-weight: 400; white-space: nowrap;
}
.pop-wrap:hover .pop-panel,
.pop-wrap:focus-within .pop-panel {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
.pop-title { font-size: 10px; font-weight: 700; letter-spacing: .05em;
             text-transform: uppercase; color: var(--muted); }
.pop-row { display: flex; align-items: center; justify-content: space-between;
           gap: 16px; font-size: 12px; color: var(--text); }
.pop-row > span { color: var(--muted); }
.pop-sep { height: 1px; background: var(--border-subtle); margin: 2px 0; }
.pop-region { display: flex; flex-wrap: wrap; gap: 4px; }
.pop-fresh { font-size: 10px; color: var(--muted); }

/* 段控件（segmented tabs）：灰底胶囊 + 选中项实心高亮。
   用于「全部/月/周/日」这类互斥的视图切换 —— 比下拉框快（一次点击 vs 两次），
   且四个选项能一眼看全，适合选项少、切换频繁的场景。 */
/* align-self 是必需的：.tab-group 是 .card（flex column）的直接子项，而 flex
   子项默认 stretch —— 会被拉成整卡宽、看着像 block。它语义上是 inline 控件，
   宽度应当贴合内容（四个按钮排完就结束）。 */
.tab-group {
  display: inline-flex; align-items: center; gap: 2px;
  align-self: flex-start;
  padding: 3px; border-radius: 10px;
  background: rgba(120,130,150,.14);
}
.tab-btn {
  padding: 4px 9px; border-radius: 8px; border: 0; background: none;
  font-size: 11.5px; font-weight: 600; line-height: 1.4;
  color: var(--muted); cursor: pointer;
  transition: color .15s, background .15s, box-shadow .15s;
  font-family: inherit;
}
.tab-btn:hover { color: var(--text); }
.tab-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: -1px; }
.tab-btn.tab-active {
  background: var(--brand); color: #fff;
  box-shadow: 0 1px 4px rgba(37,99,235,.35);
}
.tab-btn.tab-active:hover { color: #fff; }

/* popover 被裁剪的根因修复。
   .card 带 backdrop-filter，这会创建新的层叠上下文 —— 于是卡内 z-index:70 的
   popover 只在卡片内部有效，一旦溢出卡片边界就会被相邻卡片盖住。
   解法是让「含 popover 的卡片」在悬停时整体抬到最上层，popover 自然随之可见。 */
.card:has(.pop-wrap:hover),
.card:has(.pop-wrap:focus-within) { z-index: 60; position: relative; }