/* ============================================================
   发票 OCR 识别工作台 · 浅色主题
   设计语言：冷石板灰中性底 + 单一低饱和钢蓝主色
   圆角体系：交互 8px / 容器 10px / 徽章 pill
   无装饰性渐变、无纯黑阴影、单主色、数据优先
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* 表面 */
  --bg:            oklch(0.975 0.004 250);
  /* 登录门专用的不透明底色。不能直接用 --bg：qixi 主题把 --bg 设成 transparent
     （背景交给 .qixi-sky 星空层），登录门若跟着透明，主界面会整个透出来。 */
  --gate-bg:       oklch(0.975 0.004 250);
  --surface:       oklch(1 0 0);
  --surface-2:     oklch(0.958 0.006 250);
  --surface-hover: oklch(0.938 0.008 250);
  --border:        oklch(0.925 0.008 250);
  --border-strong: oklch(0.86 0.012 250);

  /* 文字 */
  --ink:   oklch(0.22 0.015 255);
  --ink-2: oklch(0.44 0.018 255);
  --ink-3: oklch(0.55 0.016 255);

  /* 主色：低饱和钢蓝 */
  --accent:       oklch(0.50 0.11 240);
  --accent-hover: oklch(0.43 0.11 240);
  --accent-ink:   oklch(0.995 0.002 255);
  --accent-soft:  oklch(0.94 0.022 240);

  /* 状态色 */
  --ok:          oklch(0.50 0.11 155);
  --ok-soft:     oklch(0.94 0.03 155);
  --warn:        oklch(0.57 0.11 70);
  --warn-soft:   oklch(0.95 0.045 80);
  --danger:      oklch(0.53 0.16 25);
  --danger-soft: oklch(0.95 0.035 25);

  /* 圆角 */
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  10px;
  --radius-pill: 999px;

  /* 阴影（带底色渲染，非纯黑） */
  --shadow-card: 0 1px 2px oklch(0.30 0.02 250 / 0.06);
  --shadow-pop:  0 10px 28px oklch(0.30 0.02 250 / 0.12);

  /* 背景星云（随主题切换覆盖此变量即可） */
  --bg-image:
    radial-gradient(52rem 30rem at 12% -6%, oklch(0.96 0.025 240 / 0.5), transparent 62%),
    radial-gradient(48rem 30rem at 88% -4%, oklch(0.985 0.016 85 / 0.75), transparent 58%),
    radial-gradient(40rem 26rem at 78% 108%, oklch(0.97 0.02 240 / 0.35), transparent 60%);

  /* 动效 */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 160ms;

  /* 层级 */
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-modal-backdrop: 30;
  --z-modal: 40;
  --z-toast: 50;
  --z-tooltip: 60;
}

html { color-scheme: light; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background:
    var(--bg-image),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent-soft); color: var(--ink); }

/* ---------- 顶栏 ---------- */
.topbar {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  background: color-mix(in oklab, var(--surface) 52%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid oklch(0.40 0.02 250 / 0.08);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  flex: none;
}
.brand-mark svg { width: 26px; height: 26px; }
.brand-mark svg path { stroke-width: 3.4; }
.brand-mark .bl-1 { stroke: var(--accent); }
.brand-mark .bl-2 { stroke: var(--ok); }
.brand-mark .bl-3 { stroke: var(--warn); }
.brand-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.brand-sub { font-size: 12px; color: var(--ink-3); margin-left: 2px; }

.topbar-right { display: flex; align-items: center; gap: 10px; }

.provider-badge {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  color: var(--ink-2);
  background: color-mix(in oklab, var(--surface) 55%, transparent);
  border: 1px solid oklch(0.45 0.02 250 / 0.12);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.provider-badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
}
.provider-badge .dot.unconfigured { background: var(--warn); }
#provider { color: var(--ink); font-weight: 600; }

/* 用量徽章：本月已识别 / 额度 */
.usage-badge {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px;
  color: var(--ink-2);
  background: color-mix(in oklab, var(--surface) 55%, transparent);
  border: 1px solid oklch(0.45 0.02 250 / 0.12);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.usage-badge svg { width: 13px; height: 13px; color: var(--accent); flex: none; }
#usageMonth, #usageTotal { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.usage-sep { opacity: .55; }
.usage-badge.warn {
  border-color: color-mix(in oklab, var(--warn) 45%, var(--border));
  background: color-mix(in oklab, var(--warn) 9%, var(--surface));
}
.usage-badge.warn svg, .usage-badge.warn #usageMonth, .usage-badge.warn #usageTotal { color: var(--warn); }
.usage-badge.danger {
  border-color: color-mix(in oklab, var(--danger) 55%, var(--border));
  background: color-mix(in oklab, var(--danger) 10%, var(--surface));
}
.usage-badge.danger svg, .usage-badge.danger #usageMonth, .usage-badge.danger #usageTotal { color: var(--danger); }

/* ---------- 主题切换器 ---------- */
.theme-switcher { position: relative; }
.theme-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px;
  font-family: inherit; font-size: 12px;
  color: var(--ink-2);
  background: color-mix(in oklab, var(--surface) 55%, transparent);
  border: 1px solid oklch(0.45 0.02 250 / 0.12);
  border-radius: var(--radius-pill);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.theme-trigger:hover { border-color: var(--border-strong); color: var(--ink); }
.theme-trigger > svg:first-child { width: 13px; height: 13px; color: var(--accent); flex: none; }
.theme-trigger .chev { width: 12px; height: 12px; flex: none; transition: transform var(--dur) var(--ease-out); }
.theme-switcher.open .theme-trigger .chev { transform: rotate(180deg); }

/* 齿轮：打开 OCR 密钥设置。与 theme-trigger 同一视觉语言，故为纯图标圆形按钮 */
.settings-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  color: var(--ink-2);
  background: color-mix(in oklab, var(--surface) 55%, transparent);
  border: 1px solid oklch(0.45 0.02 250 / 0.12);
  border-radius: var(--radius-pill);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.settings-trigger:hover { border-color: var(--border-strong); color: var(--ink); }
.settings-trigger svg { width: 15px; height: 15px; flex: none; }
/* 未配置密钥时轻微呼吸提示，引导用户点开填写 */
.settings-trigger.needs-setup {
  color: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 45%, transparent);
  animation: settingsPulse 2.4s var(--ease-out) infinite;
}
@keyframes settingsPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 35%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent) 0%, transparent); }
}
.theme-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 148px; padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  z-index: var(--z-dropdown);
  animation: menuIn 0.18s var(--ease-out);
}
.theme-menu[hidden] { display: none; }
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.theme-option {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 8px 10px;
  border: none; background: transparent; border-radius: 8px;
  font-family: inherit; font-size: 12.5px;
  color: var(--ink-2); text-align: left; cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.theme-option:hover { background: var(--surface-hover); color: var(--ink); }
.theme-option.active { color: var(--ink); font-weight: 600; }
.theme-swatch {
  width: 14px; height: 14px; flex: none;
  border-radius: 50%;
  border: 1px solid oklch(0.5 0.02 250 / 0.16);
}
.theme-option .check {
  margin-left: auto; width: 13px; height: 13px; flex: none;
  color: var(--accent);
  opacity: 0; transform: scale(0.6);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.theme-option.active .check { opacity: 1; transform: none; }

/* ---------- 主容器：放宽到 1360，容纳 7 列表格 ---------- */
main { flex: 1; width: 100%; max-width: 1360px; margin: 0 auto; padding: 28px 24px 56px; }

/* ---------- 首屏（上传） ---------- */
.landing {
  max-width: 920px;
  margin: 0 auto;
  padding: 44px 0 72px;
  display: flex;
  flex-direction: column;
}

/* Hero：宽容器大字，保证 1-2 行 */
.hero { text-align: center; margin-bottom: 40px; }
.hero h1 {
  font-size: clamp(1.75rem, 3.8vw, 2.5rem);
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.hero h1 .accent {
  color: var(--accent);
  position: relative;
  white-space: nowrap;
}
.hero h1 .accent::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px; bottom: 0.04em;
  height: 0.3em;
  background: var(--accent-soft);
  border-radius: var(--radius-pill);
  z-index: -1;
  transform: rotate(-1.2deg);
}
.hero-sub {
  margin-top: 14px;
  font-size: 14px;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}

/* 上传区容器：承载漂浮卡片 */
.dropzone-wrap { position: relative; }

.upload-zone {
  position: relative;
  z-index: 1;
  border: 1.5px dashed oklch(0.78 0.045 240);
  border-radius: 18px;
  background: oklch(0.995 0.002 100 / 0.72);
  backdrop-filter: blur(6px);
  padding: 64px 28px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.upload-zone:hover {
  border-color: var(--accent);
  background: var(--surface);
  transform: translateY(-3px);
  box-shadow: var(--shadow-pop);
}
.upload-zone.dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1.5px var(--accent), var(--shadow-pop);
}
.upload-icon {
  width: 60px; height: 60px;
  margin: 0 auto 18px;
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
  border: 1px solid oklch(0.86 0.03 240);
  display: grid; place-items: center;
  color: var(--accent);
  animation: bob 3.4s ease-in-out infinite;
}
.upload-zone.dragover .upload-icon { animation: none; transform: translateY(-4px); }
.upload-icon svg { width: 26px; height: 26px; }
.upload-zone p { font-size: 15.5px; color: var(--ink); }
.upload-zone .link { color: var(--accent); font-weight: 600; text-decoration: none; }
.upload-zone .link:hover { text-decoration: underline; }
.upload-zone .hint { font-size: 12.5px; color: var(--ink-3); margin-top: 12px; }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* 漂浮迷你发票卡（装饰，不拦截点击）
   动画只用 translate/rotate 等合成器属性（GPU 合成,不触发布局重排,避免卡顿） */
.float-card {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 132px;
  filter: drop-shadow(0 14px 26px oklch(0.32 0.03 250 / 0.14));
  animation: drift 7s ease-in-out infinite alternate;
  transition: translate 0.5s var(--ease-out), rotate 0.5s var(--ease-out);
  will-change: translate;
}
.float-card svg { display: block; width: 100%; height: auto; }
.fc-1 { top: -26px; left: -34px; rotate: -7deg; }
.fc-2 { bottom: -30px; right: -28px; rotate: 6deg; animation-delay: -2.4s; }
.fc-3 {
  top: 34%; right: -46px; width: 112px; opacity: 0.82;
  rotate: -3deg; animation-delay: -4.1s;
}
.dropzone-wrap:hover .fc-1 { rotate: -4deg; translate: 0 -5px; }
.dropzone-wrap:hover .fc-2 { rotate: 3deg; translate: 0 6px; }
.dropzone-wrap:hover .fc-3 { rotate: -1deg; translate: 0 -4px; }

@keyframes drift {
  from { translate: 0 0; }
  to   { translate: 0 -10px; }
}

/* 首屏底部：示例入口 + 说明 */
.landing-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 32px;
}
.btn-demo {
  font-size: 13px;
  padding: 9px 18px;
  background: var(--accent-soft);
  border-color: oklch(0.86 0.03 240);
  color: var(--accent);
  transition: background var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.btn-demo:hover {
  background: color-mix(in oklab, var(--accent-soft) 70%, var(--accent-hover));
  color: var(--accent-hover);
  transform: translateY(-1px);
}
.foot-link {
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-2);
  cursor: pointer;
  transition: color var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.foot-link svg { width: 15px; height: 15px; }
.foot-link:hover {
  color: var(--accent);
  background: var(--surface-hover);
  border-color: var(--border);
}

/* 入场动效 */
.hero { animation: riseIn 0.6s var(--ease-out) both; }
.dropzone-wrap { animation: riseIn 0.6s var(--ease-out) 0.08s both; }
.landing-foot { animation: riseIn 0.6s var(--ease-out) 0.16s both; }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero, .dropzone-wrap, .landing-foot { animation: none; }
  .upload-icon, .float-card { animation: none; }
}
@media (max-width: 760px) {
  body { overflow-x: hidden; }
  .landing { padding: 28px 0 56px; }
  .hero h1 { font-size: clamp(1.5rem, 6.5vw, 1.9rem); }
  .float-card { display: none; }
  .upload-zone { padding: 44px 20px; }
}
@media (max-width: 640px) {
  .brand-sub { display: none; }
  .theme-trigger #themeLabel { display: none; }
}

/* ---------- 主题系统 ----------
   新增主题只需两步:
   1) 本文件加 body[data-theme="xxx"] 变量覆盖块
   2) app.js 的 THEMES 配置加一项(菜单项自动渲染) */

/* ---------- 海洋主题(默认,清澈海洋蓝) ---------- */
body[data-theme="default"] {
  /* 表面:带青色相的白 */
  --bg:            oklch(0.975 0.010 225);
  --gate-bg:       oklch(0.975 0.010 225);
  --surface:       oklch(0.995 0.005 220);
  --surface-2:     oklch(0.955 0.014 225);
  --surface-hover: oklch(0.935 0.016 225);
  --border:        oklch(0.915 0.018 225);
  --border-strong: oklch(0.85 0.024 225);

  /* 文字:中性微蓝 */
  --ink:   oklch(0.22 0.022 235);
  --ink-2: oklch(0.45 0.028 235);
  --ink-3: oklch(0.56 0.022 235);

  /* 主色:清澈海洋蓝(偏青) */
  --accent:       oklch(0.53 0.14 230);
  --accent-hover: oklch(0.44 0.15 230);
  --accent-ink:   oklch(0.995 0.002 255);
  --accent-soft:  oklch(0.93 0.04 225);

  /* 状态色:与主色同族,低饱和不抢眼 */
  --ok:          oklch(0.50 0.09 170);
  --ok-soft:     oklch(0.94 0.03 175);
  --warn:        oklch(0.57 0.09 75);
  --warn-soft:   oklch(0.95 0.035 85);
  --danger:      oklch(0.54 0.12 25);
  --danger-soft: oklch(0.95 0.03 30);

  /* 阴影:带青色底 */
  --shadow-card: 0 1px 2px oklch(0.28 0.04 235 / 0.07);
  --shadow-pop:  0 10px 28px oklch(0.28 0.04 235 / 0.13);

  /* 背景:海面晨光,青蓝星云 */
  --bg-image:
    radial-gradient(52rem 30rem at 12% -6%, oklch(0.94 0.035 215 / 0.55), transparent 62%),
    radial-gradient(48rem 30rem at 88% -4%, oklch(0.95 0.035 180 / 0.55), transparent 58%),
    radial-gradient(40rem 26rem at 78% 108%, oklch(0.92 0.03 240 / 0.4), transparent 60%);
}
/* 修正海洋主题下的硬编码钢蓝细节 */
body[data-theme="default"] .upload-zone {
  border-color: oklch(0.74 0.06 230);
  background: oklch(0.99 0.006 220 / 0.75);
}
body[data-theme="default"] .upload-icon,
body[data-theme="default"] .btn-demo { border-color: oklch(0.80 0.05 230); }
body[data-theme="default"] .provider-badge,
body[data-theme="default"] .usage-badge,
body[data-theme="default"] .theme-trigger { border-color: oklch(0.42 0.04 235 / 0.15); }
body[data-theme="default"] .theme-swatch { border-color: oklch(0.50 0.05 235 / 0.18); }

body[data-theme="qixi"] {
  color-scheme: dark;
  /* 背景交给 .qixi-sky 星空层，自身透明 */
  --bg:       transparent;
  --bg-image: none;
  /* 登录门自己铺一层不透明深紫，再叠一个 .qixi-sky 子层把星空补回来
     （见 index.html 里 #authGate 内的 qixi-sky 与 #authGate 的规则） */
  --gate-bg:  oklch(0.16 0.035 300);

  --accent:       oklch(0.72 0.13 305);
  --accent-hover: oklch(0.64 0.14 305);
  --accent-ink:   oklch(0.15 0.04 305);
  --accent-soft:  oklch(0.40 0.08 305 / 0.35);
  --qixi-purple:  oklch(0.42 0.11 305);

  /* 文字：深色背景上的浅色 */
  --ink:   oklch(0.93 0.015 305);
  --ink-2: oklch(0.78 0.025 305);
  --ink-3: oklch(0.62 0.025 305);

  /* 表面：半透明深色卡片，透出星空 */
  --surface:       oklch(0.24 0.04 305 / 0.55);
  --surface-2:     oklch(0.28 0.045 305 / 0.5);
  --surface-hover: oklch(0.34 0.05 305 / 0.62);
  --border:        oklch(0.72 0.06 305 / 0.18);
  --border-strong: oklch(0.78 0.07 305 / 0.30);

  /* 阴影：深色下用更柔和的暗影 */
  --shadow-card: 0 1px 2px oklch(0.10 0.02 305 / 0.4);
  --shadow-pop:  0 12px 30px oklch(0.08 0.02 305 / 0.55);

  /* 状态色:与紫色系协调(青玉绿/香槟金/玫瑰红)，提亮以适配深色 */
  --ok:          oklch(0.72 0.12 165);
  --ok-soft:     oklch(0.34 0.06 165 / 0.3);
  --warn:        oklch(0.74 0.11 75);
  --warn-soft:   oklch(0.36 0.06 75 / 0.3);
  --danger:      oklch(0.70 0.14 350);
  --danger-soft: oklch(0.36 0.06 350 / 0.3);
}
body[data-theme="qixi"] .upload-zone {
  border-color: oklch(0.78 0.06 305 / 0.5);
  background: oklch(0.26 0.04 305 / 0.45);
}
body[data-theme="qixi"] .upload-icon { border-color: oklch(0.85 0.05 305 / 0.6); }
body[data-theme="qixi"] .btn-demo { border-color: oklch(0.85 0.05 305 / 0.6); }
/* 曲奇提示/底栏等也融入深色星空 */
body[data-theme="qixi"] .topbar {
  background: color-mix(in oklab, oklch(0.20 0.04 305 / 0.7), transparent);
}

/* 七夕专属装饰:仅七夕主题显示,其他主题自动隐藏 */
body:not([data-theme="qixi"]) .qixi-sky,
body:not([data-theme="qixi"]) .qixi-badge,
body:not([data-theme="qixi"]) .qixi-footer,
body:not([data-theme="qixi"]) .petal-canvas { display: none; }

/* 七夕鼠标花瓣画布：覆盖全屏，不拦截交互，浮于内容之上 */
.petal-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 60;
}

/* ---------- 七夕开场动画 ---------- */
.intro-anim {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(circle at 50% 42%, #5a2a63 0%, #3a1d4d 38%, #1d1030 75%, #120a22 100%);
  transition: opacity 0.8s ease;
}
.intro-anim.fade { opacity: 0; }
body:not([data-theme="qixi"]) .intro-anim { display: none !important; }
.intro-glow {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,143,199,0.32), rgba(255,143,199,0) 60%);
  filter: blur(18px);
  animation: introPulse 3s ease-in-out infinite;
}
.intro-center {
  position: relative;
  text-align: center;
  animation: introRise 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.intro-title {
  margin: 0;
  font-size: clamp(3rem, 13vw, 7rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #fff;
  text-shadow: 0 0 32px rgba(255,143,199,0.75), 0 0 8px rgba(255,255,255,0.6);
}
.intro-sub {
  margin: 14px 0 0;
  font-size: clamp(0.9rem, 3.2vw, 1.25rem);
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.88);
  text-shadow: 0 0 14px rgba(255,143,199,0.5);
}
.intro-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
@keyframes introRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes introPulse {
  0%, 100% { transform: scale(1);    opacity: 0.8; }
  50%      { transform: scale(1.12); opacity: 1; }
}

/* ---------- 星空主题(深色) ---------- */
html:has(body[data-theme="starry"]) { color-scheme: dark; }
body[data-theme="starry"] {
  color-scheme: dark;
  /* 表面 */
  --bg:            oklch(0.15 0.035 280);
  --gate-bg:       oklch(0.15 0.035 280);
  --surface:       oklch(0.21 0.035 280);
  --surface-2:     oklch(0.25 0.035 280);
  --surface-hover: oklch(0.28 0.04 280);
  --border:        oklch(0.80 0.02 280 / 0.16);
  --border-strong: oklch(0.80 0.02 280 / 0.30);

  /* 文字 */
  --ink:   oklch(0.94 0.012 280);
  --ink-2: oklch(0.78 0.018 280);
  --ink-3: oklch(0.66 0.02 280);

  /* 主色:星光暖金 */
  --accent:       oklch(0.80 0.12 85);
  --accent-hover: oklch(0.72 0.13 85);
  --accent-ink:   oklch(0.20 0.02 280);
  --accent-soft:  oklch(0.35 0.05 285);

  /* 状态色(深色适配) */
  --ok:          oklch(0.75 0.11 155);
  --ok-soft:     oklch(0.28 0.05 155);
  --warn:        oklch(0.80 0.11 80);
  --warn-soft:   oklch(0.30 0.05 80);
  --danger:      oklch(0.72 0.14 25);
  --danger-soft: oklch(0.30 0.06 25);

  /* 阴影(深色下加重) */
  --shadow-card: 0 1px 2px oklch(0.05 0.01 280 / 0.35);
  --shadow-pop:  0 10px 28px oklch(0.05 0.01 280 / 0.55);

  /* 背景:深蓝夜空 + 星点 + 星云 */
  --bg-image:
    radial-gradient(1.5px 1.5px at 18% 28%, oklch(0.95 0.01 250 / 0.9), transparent 100%),
    radial-gradient(1px 1px at 55% 12%, oklch(0.98 0.01 90 / 0.8), transparent 100%),
    radial-gradient(2px 2px at 78% 42%, oklch(0.95 0.01 250 / 0.7), transparent 100%),
    radial-gradient(1px 1px at 34% 62%, oklch(0.97 0.01 300 / 0.7), transparent 100%),
    radial-gradient(1.5px 1.5px at 68% 78%, oklch(0.96 0.01 250 / 0.8), transparent 100%),
    radial-gradient(1px 1px at 9% 82%, oklch(0.98 0.01 200 / 0.6), transparent 100%),
    radial-gradient(1px 1px at 88% 15%, oklch(0.95 0.01 90 / 0.7), transparent 100%),
    radial-gradient(1.5px 1.5px at 46% 44%, oklch(0.95 0.01 280 / 0.55), transparent 100%),
    radial-gradient(55rem 32rem at 15% -10%, oklch(0.45 0.11 290 / 0.32), transparent 62%),
    radial-gradient(48rem 30rem at 90% 4%, oklch(0.40 0.10 250 / 0.30), transparent 60%),
    radial-gradient(44rem 30rem at 75% 110%, oklch(0.42 0.10 300 / 0.24), transparent 62%);
}
/* 深色下修正部分硬编码的浅色/暗色细节 */
body[data-theme="starry"] .topbar { border-bottom-color: oklch(0.80 0.02 280 / 0.12); }
body[data-theme="starry"] .provider-badge,
body[data-theme="starry"] .usage-badge,
body[data-theme="starry"] .theme-trigger { border-color: oklch(0.80 0.02 280 / 0.18); }
body[data-theme="starry"] .theme-swatch { border-color: oklch(0.80 0.02 280 / 0.25); }
body[data-theme="starry"] .upload-zone {
  background: color-mix(in oklab, var(--surface) 78%, transparent);
  border-color: oklch(0.75 0.05 280 / 0.5);
}
body[data-theme="starry"] .upload-icon,
body[data-theme="starry"] .btn-demo { border-color: oklch(0.80 0.04 280 / 0.5); }

/* ---------- 七夕星夜装饰层（深色星空背景） ---------- */
.qixi-sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, #4a2358 0%, #311a47 42%, #1c1130 74%, #120a22 100%);
}
/* 静态星海：用多重径向渐变撒出细密白点，密布全屏 */
.qixi-sky::before {
  content: "";
  position: absolute;
  inset: -10%;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(1.2px 1.2px at 28% 62%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1.6px 1.6px at 44% 12%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(1.1px 1.1px at 63% 38%, rgba(255,255,255,0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 22%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1.2px 1.2px at 88% 70%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1.3px 1.3px at 7% 78%, rgba(255,255,255,0.75), transparent 60%),
    radial-gradient(1.1px 1.1px at 52% 84%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(1.4px 1.4px at 36% 44%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1.0px 1.0px at 70% 56%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 20% 92%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 92% 40%, rgba(255,255,255,0.65), transparent 60%);
  background-repeat: repeat;
  background-size: 320px 320px;
  opacity: 0.9;
}
.spark {
  position: absolute;
  height: auto;
  opacity: 0;
  filter: drop-shadow(0 0 5px oklch(0.80 0.12 55 / 0.6));
  animation: starFall var(--dur, 28s) linear var(--del, 0s) infinite;
}
.spark path { fill: oklch(0.88 0.10 60); }
.dot-star {
  position: absolute;
  width: 4px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: oklch(0.90 0.09 320);
  box-shadow: 0 0 6px 1px oklch(0.85 0.10 315 / 0.5);
  opacity: 0;
  animation: twinkle var(--dur, 3.4s) ease-in-out var(--del, 0s) infinite;
}
@keyframes starFall {
  0%   { transform: translate3d(0, -10vh, 0) rotate(0deg) scale(1); opacity: 0; }
  8%   { opacity: var(--star-o, 0.6); }
  50%  { transform: translate3d(var(--drift, 0px), 48vh, 0) rotate(150deg) scale(0.95); opacity: var(--star-o, 0.6); }
  92%  { opacity: var(--star-o, 0.6); }
  100% { transform: translate3d(var(--drift, 0px), 108vh, 0) rotate(300deg) scale(0.85); opacity: 0; }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.75); }
  50%      { opacity: 0.95; transform: scale(1.2); }
}

/* ---------- 七夕徽章 ---------- */
.qixi-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 7px 18px 7px 12px;
  border-radius: var(--radius-pill);
  background: linear-gradient(120deg, oklch(0.94 0.045 305 / 0.9), oklch(0.95 0.04 350 / 0.9));
  border: 1px solid oklch(0.86 0.06 320 / 0.55);
  color: var(--qixi-purple);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 10px oklch(0.50 0.12 305 / 0.16);
  animation: riseIn 0.6s var(--ease-out) 0.06s both;
}
.qixi-badge svg { width: 17px; height: 17px; flex: none; }

/* ---------- 状态 ---------- */
.loading {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 56px 0; color: var(--ink-2); font-size: 14px;
}
.spinner {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.error-box {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--danger-soft);
  border: 1px solid color-mix(in oklab, var(--danger) 45%, var(--border));
  color: var(--danger);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  font-size: 13.5px;
}
.error-box svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--danger); }
.error-box.ok {
  background: color-mix(in oklab, oklch(0.60 0.14 155) 12%, var(--surface));
  border-color: color-mix(in oklab, oklch(0.60 0.14 155) 45%, var(--border));
  color: oklch(0.48 0.13 155);
}
.error-box.ok svg { color: oklch(0.55 0.13 155); }

/* ---------- 应用内轻提示 toast ---------- */
.toast-wrap {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 2000; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  max-width: min(560px, calc(100vw - 40px));
  padding: 10px 16px; border-radius: 10px;
  font-size: 13.5px; line-height: 1.5;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border);
  box-shadow: 0 10px 26px oklch(0.20 0.02 250 / 0.16);
  animation: toastIn 0.22s var(--ease-out);
  word-break: break-word;
}
.toast.ok {
  border-color: color-mix(in oklab, oklch(0.60 0.14 155) 45%, var(--border));
  color: oklch(0.42 0.13 155);
}
.toast.err {
  border-color: color-mix(in oklab, var(--danger) 45%, var(--border));
  color: var(--danger);
}
.toast.out { animation: toastOut 0.2s var(--ease-out) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-8px); } }

/* ---------- 处理中遮罩（导出等） ---------- */
.busy {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  background: oklch(0.20 0.02 250 / 0.35);
  backdrop-filter: blur(2px);
  animation: fadeIn 0.15s var(--ease-out);
}
.busy-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 22px;
  font-size: 14px; color: var(--ink);
  box-shadow: 0 14px 40px oklch(0.20 0.02 250 / 0.22);
}
#failList { margin: 6px 0 0 18px; font-size: 13px; color: var(--danger); }

/* 重复发票提示（自动去重） */
.skip-box {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--warn-soft);
  border: 1px solid color-mix(in oklab, var(--warn) 45%, var(--border));
  color: var(--warn);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  font-size: 13.5px;
}
.skip-box svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--warn); }
#skipList { margin: 6px 0 0 18px; font-size: 13px; color: var(--warn); }

/* ---------- 导出对话框 ---------- */
.dialog-mask {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: oklch(0.20 0.02 250 / 0.45);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.2s var(--ease-out);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.dialog {
  width: min(480px, calc(100vw - 40px));
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow-pop);
  animation: dialogIn 0.25s var(--ease-out);
}
@keyframes dialogIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.dialog-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 0;
}
.dialog-head h3 { font-size: 17px; margin: 0; }
.dialog-close {
  font-size: 24px; line-height: 1; cursor: pointer;
  color: var(--ink-3); padding: 2px 6px; border-radius: var(--radius-sm);
  background: none; border: none;
}
.dialog-close:hover { background: var(--surface-hover); color: var(--ink); }
.dialog-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.export-option {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.export-option:hover { border-color: var(--border-strong); background: var(--surface-2); }
.export-option:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent-soft) 55%, var(--surface));
  box-shadow: inset 0 0 0 1px var(--accent);
}
.export-option input { margin-top: 3px; accent-color: var(--accent); flex: none; }
.export-option-icon {
  width: 34px; height: 34px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--ink-2);
}
.export-option-icon svg { width: 18px; height: 18px; }
.export-option strong { display: block; font-size: 14px; color: var(--ink); }
.export-option small { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.5; }
.append-pick {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px 4px 60px;
}
.append-file-name {
  font-size: 13px; color: var(--ink-2);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dialog-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--border);
}

/* ---------- OCR 密钥设置对话框 ---------- */
#settingsDialog { z-index: 1300; }  /* 高于 export(1100) 与默认 mask(1000)；
                                      必须低于 #confirmDialog(1400)，否则弹窗内的二次确认会被盖住 */
#settingsDialog .dialog { width: min(520px, calc(100vw - 40px)); }
.settings-status {
  margin: 0; font-size: 13px; line-height: 1.65; color: var(--ink-2);
  padding: 9px 12px; border-radius: var(--radius-md);
  background: var(--surface-2); border: 1px solid var(--border);
}
.settings-status.is-ok {
  color: var(--ink);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
  background: color-mix(in oklab, var(--accent-soft) 45%, var(--surface));
}
.settings-status.is-err {
  border-color: color-mix(in oklab, var(--danger) 45%, var(--border));
  background: color-mix(in oklab, var(--danger) 8%, var(--surface));
}
.settings-field { display: flex; flex-direction: column; gap: 5px; margin-top: 11px; }
.settings-field label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.settings-field input,
.settings-field select {
  width: 100%; box-sizing: border-box;
  height: 36px; padding: 0 11px;
  font-family: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur) var(--ease-out);
}
.settings-field input:focus,
.settings-field select:focus { outline: none; border-color: var(--accent); }
.settings-field input::placeholder { color: var(--ink-3); }
.settings-note {
  margin: 12px 0 0; font-size: 12px; line-height: 1.75; color: var(--ink-3);
  padding-top: 11px; border-top: 1px dashed var(--border);
}
.settings-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  padding: 1px 5px; border-radius: 4px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.settings-note strong { color: var(--ink-2); }
/* 「清除页面配置」推到最左，与右侧主操作拉开距离，降低误点概率 */
#btnSettingsClear { margin-right: auto; }

/* 导出对话框可从核销弹窗内打开，抬高层级避免被遮住 */
#exportDialog { z-index: 1100; }

/* ---------- 通用确认对话框 ---------- */
#confirmDialog { z-index: 1400; }  /* 必须是所有业务弹窗中最高：settings(1300) / export(1100) / mask(1000)。
                                      低于它会出真 bug——从弹窗里点「清除/覆盖」时，确认框被压在下面，
                                      用户看着像「点了没反应」，实际是按钮被遮住点不到。 */
#confirmDialog .dialog { width: min(460px, calc(100vw - 40px)); }
.confirm-text { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--ink); }
.confirm-list {
  margin: 0; padding: 10px 12px; font-size: 12.5px; line-height: 1.7; color: var(--ink-2);
  border: 1px solid color-mix(in oklab, var(--warn) 40%, var(--border));
  border-radius: var(--radius-md);
  max-height: 190px; overflow: auto; word-break: break-all;
  display: flex; flex-direction: column; gap: 8px;
}
.confirm-item { display: flex; flex-direction: column; gap: 2px; }
.confirm-item + .confirm-item { border-top: 1px dashed var(--border); padding-top: 8px; }
.ci-no { font-weight: 600; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ci-meta { font-size: 12px; color: var(--ink-3); }
.btn.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.btn-danger:hover { filter: brightness(1.06); }

/* ---------- 上传记录对话框 ---------- */
#historyDialog .dialog {
  width: min(680px, calc(100vw - 40px));
}
.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 58vh;
  overflow-y: auto;
}
.history-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: var(--surface);
  transition: border-color var(--dur) var(--ease-out);
}
.history-item:hover { border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); }
.history-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.history-time { font-size: 13px; font-weight: 600; color: var(--ink); }
.history-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
}
.history-badge.ok { background: var(--ok-soft, oklch(0.93 0.05 155 / 0.6)); color: var(--ok, oklch(0.55 0.13 155)); }
.history-badge.fail { background: var(--warn-soft, oklch(0.93 0.06 60 / 0.6)); color: var(--warn); }
.history-badge.total { background: var(--surface-hover); color: var(--ink-2); }
.history-files {
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-invoices {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.history-invoice-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  background: color-mix(in oklab, var(--surface) 92%, var(--bg));
}
.history-invoice-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}
.history-invoice-no {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-invoice-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.history-kv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
}
@media (max-width: 560px) {
  .history-kv-grid { grid-template-columns: 1fr; }
}
.history-kv-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.history-kv-item label {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.history-kv-value {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
  word-break: break-all;
  font-variant-numeric: tabular-nums;
}
.history-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 4px;
}
.history-toolbar .history-search { flex: 1; margin-bottom: 0; }
.history-toolbar .btn { flex: none; white-space: nowrap; }
.history-search {
  position: relative;
  margin-bottom: 4px;
}
.history-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: var(--ink-3);
  pointer-events: none;
}
.history-search input {
  width: 100%;
  height: 38px;
  padding: 0 14px 0 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s ease;
}
.history-search input:focus { border-color: var(--accent); }
.history-search input::placeholder { color: var(--ink-3); }
.history-empty {
  font-size: 14px;
  color: var(--ink-3);
  text-align: center;
  padding: 26px 0;
}
.history-err {
  font-size: 13px;
  color: var(--warn);
  text-align: center;
  padding: 18px 0;
}

.hidden { display: none !important; }

/* ---------- 结果区 ---------- */
.result { animation: rise 0.45s var(--ease-out); }
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rowIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.toolbar {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 14px; margin-bottom: 28px;
}
.toolbar h2 {
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
  display: flex; align-items: baseline; gap: 10px;
}
.file-name {
  color: var(--ink-3); font-size: 13px; font-weight: 400;
  max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.toolbar-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* 按钮 */
.btn {
  height: 38px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  box-shadow: var(--shadow-card);
  transition: background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.btn:hover { background: var(--surface-hover); border-color: var(--border-strong); transform: translateY(-1px); box-shadow: 0 4px 12px oklch(0.30 0.02 250 / 0.08); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:active { transform: scale(0.98); box-shadow: none; }
.btn svg { width: 15px; height: 15px; }
.btn-primary {
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 88%, white), var(--accent));
  border-color: transparent;
  color: var(--accent-ink);
  box-shadow: 0 2px 10px color-mix(in oklab, var(--accent) 30%, transparent);
}
.btn-primary:hover { background: var(--accent-hover); border-color: transparent; transform: translateY(-1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--surface); border-color: var(--border); transform: none; box-shadow: var(--shadow-card); }

/* ---------- 校验面板 ---------- */
.check-panel {
  background: color-mix(in oklab, var(--surface-2) 55%, var(--surface));
  border: none;
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 20px;
  box-shadow: none;
}
.check-panel h3 {
  font-size: 13.5px; font-weight: 650;
  display: flex; align-items: center; gap: 10px;
  color: var(--ink);
}
.check-summary { font-size: 12.5px; font-weight: 600; }
.check-summary.ok { color: var(--ok); }
.check-summary.bad { color: var(--warn); }

#checkList { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
#checkList li {
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 10px;
  display: flex; gap: 10px; align-items: flex-start;
  border-left: 3px solid transparent;
  animation: rowIn 0.35s var(--ease-out) both;
}
#checkList li.error { background: var(--danger-soft); color: var(--danger); }
#checkList li.warn  { background: var(--warn-soft); color: var(--warn); }
#checkList li.ok    { background: var(--ok-soft); color: var(--ok); }
#checkList li > span { flex: 1; display: flex; gap: 8px; align-items: flex-start; }
#checkList li.ignored { opacity: 0.6; background: var(--surface-hover); color: var(--ink-2); }
#checkList li.ignored-head {
  background: none; border-left-color: transparent; color: var(--ink-3);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; padding: 4px 14px;
}
.btn-ignore {
  flex-shrink: 0;
  align-self: center;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 7px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-ignore:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 12%, transparent); }
.status-dot.error { background: var(--danger); }
.status-dot.warn  { background: var(--warn); }
.status-dot.ok    { background: var(--ok); }

/* ---------- 网格布局 ---------- */
.grid { display: grid; grid-template-columns: 360px 1fr; gap: 24px; margin-bottom: 24px; }
@media (max-width: 880px) { .grid { grid-template-columns: 1fr; } }

.card {
  background: var(--surface);
  border: none;
  border-radius: 18px;
  padding: 24px 26px;
  box-shadow: 0 1px 2px oklch(0.30 0.02 250 / 0.05), 0 12px 32px oklch(0.30 0.02 250 / 0.06);
}
.card h3 {
  font-size: 13px; font-weight: 700;
  color: var(--ink-2);
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
  letter-spacing: 0.01em;
}
.editable-tip { color: var(--ink-3); font-size: 11.5px; font-weight: 400; }

#preview {
  width: 100%;
  border-radius: 12px;
  border: none;
  background: var(--bg);
  display: block;
  cursor: zoom-in;
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
#preview:hover {
  box-shadow: 0 10px 26px oklch(0.30 0.02 250 / 0.14);
  transform: translateY(-2px);
}

/* ---------- 发票头信息 ---------- */
.kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
@media (max-width: 1080px) { .kv-grid { grid-template-columns: 1fr; } }
.kv-item { display: flex; flex-direction: column; gap: 5px; }
.kv-item label { font-size: 11px; color: var(--ink-3); font-weight: 600; letter-spacing: 0.04em; }
.kv-item input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ink);
  background: color-mix(in oklab, var(--surface) 88%, var(--bg));
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.kv-item input:hover { border-color: var(--border-strong); background: var(--surface); }
.kv-item input:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 14%, transparent); }
.kv-item input.flagged { border-color: var(--danger); }
.kv-item input.flagged.warn { border-color: var(--warn); }

/* ---------- 统计汇总表格 ---------- */
#summaryTable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
#summaryTable th, #summaryTable td {
  padding: 0 16px;
  text-align: center;
  height: 56px;
  white-space: nowrap;
  vertical-align: middle;
  border-bottom: none;
}
#summaryTable thead th {
  background: color-mix(in oklab, var(--surface-2) 60%, var(--surface));
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  height: 40px;
  border-bottom: none;
  text-transform: uppercase;
}
#summaryTable thead th:first-child { border-top-left-radius: 12px; }
#summaryTable thead th:last-child { border-top-right-radius: 12px; }
#summaryTable tbody td { background: transparent; }
#summaryTable tbody tr { transition: background-color var(--dur) var(--ease-out); animation: rowIn 0.45s var(--ease-out) both; animation-delay: min(calc(var(--i, 99) * 28ms), 420ms); }
#summaryTable tbody tr:hover td { background: color-mix(in oklab, var(--surface-hover) 70%, transparent); }
#summaryTable tbody tr:last-child td { border-bottom: none; }
#summaryTable .num { font-variant-numeric: tabular-nums; }

/* 长文本列：截断 + 悬浮查看全称，避免撑破表格 */
#summaryTable td.col-seller,
#summaryTable td.col-project {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  color: var(--ink);
}

/* 含税金额：重点强调 */
#summaryTable .col-amount {
  text-align: center;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
#summaryTable th.col-amount { font-size: 12px; color: var(--accent); }

#summaryTable .col-thumb { width: 96px; text-align: center; padding: 8px; }
#summaryTable .col-op { width: 136px; text-align: center; }
.thumb {
  width: 74px; height: 46px;
  object-fit: cover;
  border-radius: 10px;
  border: none;
  cursor: zoom-in;
  display: inline-block;
  vertical-align: middle;
  background: var(--bg);
  box-shadow: 0 1px 3px oklch(0.30 0.02 250 / 0.08);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.thumb:hover { transform: scale(1.08); box-shadow: 0 8px 18px oklch(0.30 0.02 250 / 0.16); }

/* 操作列：详情按钮 + 校验标记 */
.btn-sm {
  height: 30px;
  padding: 0 14px;
  font-size: 12.5px;
  border-radius: 8px;
}
.btn-sm svg { width: 13px; height: 13px; }
.row-tag {
  display: inline-flex; align-items: center;
  font-size: 11.5px; font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  margin-left: 6px;
  vertical-align: middle;
}
.row-tag.tag-error { background: var(--danger-soft); color: var(--danger); }
.row-tag.tag-warn  { background: var(--warn-soft);   color: var(--warn); }
.row-tag.tag-ok    { background: var(--ok-soft);     color: var(--ok); }

/* ---------- 详情面板 ---------- */
#detailPanel { margin-top: 28px; animation: rise 0.4s var(--ease-out); }
.detail-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.detail-head h3 { font-size: 16px; font-weight: 800; margin: 0; letter-spacing: -0.01em; }
#detailPanel .card {
  margin-bottom: 20px;
  background: color-mix(in oklab, var(--surface-2) 40%, var(--surface));
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: none;
}

#summaryFoot td {
  background: color-mix(in oklab, var(--accent-soft) 45%, var(--surface));
  font-weight: 650;
  height: 52px;
  border-bottom: none;
}
#summaryFoot td:first-child { border-bottom-left-radius: 12px; }
#summaryFoot td:last-child { border-bottom-right-radius: 12px; }
#summaryFoot .foot-label { text-align: right; color: var(--ink-2); }
#summaryFoot .foot-total {
  color: var(--accent);
  font-size: 16px;
  font-weight: 800;
}

/* ---------- 原图灯箱 ---------- */
.lightbox {
  position: fixed; inset: 0;
  background: oklch(0.13 0.015 250 / 0.68);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  z-index: var(--z-modal);
  padding: 32px;
  animation: rise var(--dur) var(--ease-out);
}
.lightbox-body {
  background: var(--surface);
  border-radius: 18px;
  border: none;
  overflow: hidden;
  max-width: min(920px, 92vw);
  max-height: 88vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px oklch(0.16 0.02 250 / 0.4);
  animation: zoomIn 0.28s var(--ease-out);
}
.lightbox-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  font-size: 13px; font-weight: 600;
  border-bottom: none;
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.lightbox-close {
  border: none; background: transparent;
  font-size: 22px; line-height: 1; cursor: pointer;
  color: var(--ink-3); padding: 2px 6px; border-radius: var(--radius-sm);
}
.lightbox-close:hover { background: var(--surface-hover); color: var(--ink); }
.lightbox-body img {
  display: block; width: auto; max-width: 100%;
  max-height: 74vh; margin: 0 auto; object-fit: contain;
}

/* ---------- 明细表格 ---------- */
.table-wrap { overflow-x: auto; border-radius: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td {
  border: none;
  padding: 0;
  text-align: left;
  white-space: nowrap;
  height: 46px;
}
th {
  background: color-mix(in oklab, var(--surface-2) 60%, var(--surface));
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
  padding: 0 14px;
  letter-spacing: 0.06em;
  border-bottom: none;
  text-transform: uppercase;
}
td { background: transparent; padding: 0; }
td input {
  border: none;
  background: transparent;
  padding: 0 14px;
  height: 44px;
  font-size: 13px;
  color: var(--ink);
  width: 100%;
  min-width: 76px;
  font-variant-numeric: tabular-nums;
}
td input.col-wide { min-width: 300px; }
td input:hover { background: color-mix(in oklab, var(--surface-hover) 55%, transparent); border-radius: 8px; }
td input:focus { outline: none; background: var(--surface); box-shadow: 0 0 0 2px var(--accent); border-radius: 8px; }
tr:hover td { background: color-mix(in oklab, var(--surface-hover) 50%, transparent); }
tbody tr:last-child td { border-bottom: none; }

tr.row-error td { background: var(--danger-soft); }
tr.row-error:hover td { background: color-mix(in oklab, var(--danger-soft) 88%, var(--surface-hover)); }
tr.row-error td input.flagged { box-shadow: inset 0 0 0 1.5px var(--danger); border-radius: 6px; }
tr.row-error td input.flagged.warn { box-shadow: inset 0 0 0 1.5px var(--warn); }

/* ---------- 页脚 ---------- */
footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
  padding: 24px 18px 34px;
  color: var(--ink-3);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.qixi-footer {
  color: color-mix(in oklab, var(--accent) 60%, var(--ink-3));
  font-size: 11.5px;
  letter-spacing: 0.08em;
}

/* ICP 备案号：法定义务，页脚常驻 + 链接工信部 */
.icp-footer {
  color: var(--ink-2);
  font-size: 11.5px;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.15s ease;
}

.icp-footer:hover,
.icp-footer:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

/* ---------- 数据表浏览（管理员只读） ---------- */
.dialog-wide {
  width: min(1080px, calc(100vw - 40px));
}
.dialog-wide .dialog-body {
  max-height: min(72vh, 760px);
  overflow: hidden;
}
.admin-db-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
  margin-left: 8px;
  vertical-align: middle;
}
.admin-db-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-db-select {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  min-width: 190px;
}
.admin-db-meta {
  font-size: 12.5px;
  color: var(--ink-3);
  margin-left: auto;
}
.admin-db-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
}
.admin-db-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.admin-db-table th,
.admin-db-table td {
  border-bottom: 1px solid var(--border);
  padding: 7px 10px;
  text-align: left;
  vertical-align: top;
  max-width: 460px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-db-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  font-weight: 600;
}
.admin-db-table tbody tr:hover {
  background: color-mix(in oklab, var(--accent) 7%, transparent);
}
.admin-db-empty {
  text-align: center !important;
  color: var(--ink-3);
  padding: 26px 10px !important;
}
.admin-db-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.admin-db-page {
  font-size: 12.5px;
  color: var(--ink-3);
  min-width: 96px;
  text-align: center;
}
.admin-db-tip {
  margin: 0;
  font-size: 11.5px;
  color: var(--ink-3);
}

/* 管理后台：视图切换与业务表格 */
.admin-db-tabs {
  display: flex;
  gap: 4px;
  margin-left: auto;
  margin-right: 12px;
}
.admin-db-tab {
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-3);
  font-size: 13px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color var(--dur, .15s) var(--ease-out), background-color var(--dur, .15s) var(--ease-out);
}
.admin-db-tab:hover { color: var(--ink); }
.admin-db-tab.is-active {
  color: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  font-weight: 600;
}
.admin-view {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
}
.admin-db-who { font-size: 13px; color: var(--ink); }
.admin-mini { height: 26px; padding: 0 10px; font-size: 12px; line-height: 1; }
.admin-db-table--biz { font-family: inherit; font-size: 13px; }
.admin-db-table--biz td { max-width: 320px; }

/* ---------- 确认完成态 ---------- */
.confirmed-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--ok-soft);
  border: 1px solid color-mix(in oklab, var(--ok) 40%, var(--border));
  color: var(--ok);
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

/* ---------- 发票核销对话框 ---------- */
#verifyDialog .dialog { width: min(880px, calc(100vw - 40px)); }
.verify-tip {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-2);
  background: color-mix(in oklab, var(--accent) 7%, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.verify-tip b { color: var(--ink); }
.verify-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
/* “从表格读入核销…”及其后的“清空核销记录”靠右显示 */
.verify-actions #btnVerifyFromTable { margin-left: auto; }
.verify-status { margin: 10px 0 0; font-size: 13px; color: var(--ink-2); min-height: 18px; }
.verify-status.verify-err { color: var(--danger); }
.verify-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 8px 0;
  font-size: 13px;
}
.verify-stat { color: var(--ink); font-weight: 600; }
.verify-updated { color: var(--ink-3); font-size: 12px; }
.verify-table-wrap {
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
#verifyTable { width: 100%; border-collapse: collapse; font-size: 13px; }
#verifyTable th,
#verifyTable td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
#verifyTable th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  color: var(--ink-2);
  font-weight: 600;
}
.verify-ok { color: oklch(0.55 0.13 155); font-weight: 600; }
.verify-pending { color: var(--warn); }
#verifyTable td.verify-note { color: var(--warn); font-size: 12px; white-space: normal; min-width: 150px; }
.verify-unmatched {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--ink-2);
  border: 1px solid color-mix(in oklab, var(--warn) 40%, var(--border));
  background: color-mix(in oklab, var(--warn) 8%, var(--surface));
  border-radius: var(--radius-md);
  padding: 10px 12px;
  max-height: 180px;
  overflow: auto;
}
.verify-unmatched ul { margin: 6px 0 0; padding-left: 18px; }

/* ============================================================
   登录门 / 账号 / 邀请码
   ------------------------------------------------------------
   层级阶梯（务必保持）：
     authGate 2000  ← 最高。未登录时任何业务弹窗都不该压在上面
     confirmDialog 1400
     settingsDialog / inviteDialog / passwordDialog 1300
     exportDialog 1100
     dialog-mask 1000（默认）
   authGate 若低于 confirmDialog，会出现「没登录却点到确认框按钮」的真 bug。
   ============================================================ */

/* ---------- 全屏登录门 ---------- */
#authGate {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  overflow: auto;
  /* 用与 body 相同的底 + 每个主题自己的 --bg-image，
     视觉上像一个独立页面而非「盖住内容的遮罩」。
     注意这里必须用 --gate-bg 而不是 --bg：qixi 主题的 --bg 是 transparent，
     用了它登录门就变成全透明，主界面（顶栏、首屏文案）会整个透出来。
     唯一例外是 qixi —— 它的底纹来自 .qixi-sky 图层，所以 index.html 在
     #authGate 内部也放了一个同款 qixi-sky 子层（其他主题下它被 display:none）。 */
  background-color: var(--gate-bg);
  background-image: var(--bg-image);
  background-attachment: fixed;
  animation: fadeIn 0.25s var(--ease-out);
}
.auth-card {
  /* 抬到 #authGate 内嵌的 qixi-sky 子层（z-index:-1）之上 */
  position: relative;
  z-index: 1;
  width: min(400px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-pop);
  padding: 26px 26px 22px;
  animation: dialogIn 0.3s var(--ease-out);
}

/* 登录门底部的备案号：登录后 #authGate 整体隐藏，与页脚那条不会重复 */
.gate-icp {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--ink-2);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  text-decoration: none;
  opacity: 0.9;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.gate-icp:hover,
.gate-icp:focus-visible {
  opacity: 1;
  color: var(--accent);
  text-decoration: underline;
}
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.auth-brand .brand-mark {
  width: 40px; height: 40px; flex: none;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.auth-brand .brand-mark svg { width: 23px; height: 23px; }
.auth-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.auth-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }

.auth-form { display: flex; flex-direction: column; }
/* 第一个字段紧贴上方，避免与卡片顶部留出双份间距 */
.auth-form .settings-field:first-child { margin-top: 0; }

.auth-hint {
  margin: 0 0 14px; font-size: 12.5px; line-height: 1.75; color: var(--ink-2);
  padding: 10px 12px; border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--accent-soft) 45%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--border));
}
.auth-hint code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  padding: 1px 5px; border-radius: 4px;
  background: var(--surface); border: 1px solid var(--border);
}

.auth-submit {
  width: 100%; height: 40px; margin-top: 16px;
  justify-content: center; font-size: 14px;
}
.auth-switch { margin: 14px 0 0; text-align: center; font-size: 12.5px; color: var(--ink-3); }
.auth-switch a { color: var(--accent); text-decoration: none; font-weight: 600; }
.auth-switch a:hover { text-decoration: underline; }
/* 「忘记密码？ · 有邀请码？注册」之间的分隔点：比链接暗、比正文淡，
   视线扫过去不会误当成可点区域 */
.auth-sep { margin: 0 7px; color: var(--border-strong); }

/* 提示行：无内容时整体不占位（min-height 会凭空撑出一段空白） */
.auth-msg { margin: 12px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }
.auth-msg:empty { display: none; }
.auth-msg.is-err { color: var(--danger); }
.auth-msg.is-ok  { color: var(--ok); }

/* ---------- 顶栏账号菜单 ---------- */
.user-chip { position: relative; }
.user-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 10px 0 4px;
  font-family: inherit; font-size: 12px;
  color: var(--ink-2);
  background: color-mix(in oklab, var(--surface) 55%, transparent);
  border: 1px solid oklch(0.45 0.02 250 / 0.12);
  border-radius: var(--radius-pill);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.user-trigger:hover { border-color: var(--border-strong); color: var(--ink); }
.user-trigger .chev { width: 12px; height: 12px; flex: none; transition: transform var(--dur) var(--ease-out); }
.user-chip.open .user-trigger .chev { transform: rotate(180deg); }
.user-avatar {
  width: 24px; height: 24px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11px; font-weight: 700; line-height: 1;
  text-transform: uppercase;
  user-select: none;
}
.user-name { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 复用 .theme-menu 的下拉语言，只换宽度与内容排布 */
.user-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 190px; padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  z-index: var(--z-dropdown);
  animation: menuIn 0.18s var(--ease-out);
}
.user-menu[hidden] { display: none; }
.user-menu-head {
  padding: 7px 10px 9px;
  margin-bottom: 5px;
  border-bottom: 1px solid var(--border);
}
.user-menu-name {
  font-size: 13px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-menu-role { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.user-menu-item {
  display: block; width: 100%;
  padding: 8px 10px;
  border: none; background: transparent; border-radius: 8px;
  font-family: inherit; font-size: 12.5px;
  color: var(--ink-2); text-align: left; cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.user-menu-item:hover { background: var(--surface-hover); color: var(--ink); }
.user-menu-item[hidden] { display: none; }
.user-menu-danger { color: var(--danger); }
.user-menu-danger:hover {
  background: color-mix(in oklab, var(--danger) 10%, var(--surface));
  color: var(--danger);
}

/* ---------- 成员与邀请码对话框 ---------- */
#inviteDialog { z-index: 1300; }   /* 与 settings 同级：两者不会同时打开；须低于 confirmDialog(1400) */
.dialog.dialog-wide { width: min(640px, calc(100vw - 40px)); }
.invite-gen { display: flex; align-items: flex-end; gap: 10px; }
.invite-gen .settings-field { flex: 1 1 auto; margin-top: 0; min-width: 0; }
.invite-gen .btn { flex: none; height: 36px; }
.invite-section {
  margin: 16px 0 8px;
  font-size: 12.5px; font-weight: 700; color: var(--ink-2);
  letter-spacing: 0.02em;
}
.invite-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 220px; overflow: auto;
}
.invite-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  font-size: 12.5px;
}
.invite-row.is-off { opacity: 0.6; }
.invite-code {
  flex: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--ink); cursor: pointer;
  padding: 3px 8px; border-radius: 5px;
  border: 1px dashed var(--border-strong);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.invite-code:hover { border-color: var(--accent); background: var(--accent-soft); }
.invite-name { flex: none; font-size: 13px; font-weight: 600; color: var(--ink); }
.invite-meta {
  flex: 1 1 auto; min-width: 0;
  color: var(--ink-3); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.invite-row .btn-sm { margin-left: auto; flex: none; }
.invite-tag {
  flex: none;
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--surface-hover); color: var(--ink-3);
}
.invite-tag.is-used { background: var(--warn-soft); color: var(--warn); }
.invite-tag.is-admin { background: var(--accent-soft); color: var(--accent); }
.invite-empty {
  padding: 12px; text-align: center;
  font-size: 12.5px; color: var(--ink-3);
}

/* ---------- 修改密码对话框 ---------- */
#passwordDialog { z-index: 1300; }
#passwordDialog .dialog { width: min(440px, calc(100vw - 40px)); }

/* 窄屏：账号名收起，只留头像，给品牌和按钮让位 */
@media (max-width: 640px) {
  .user-name { display: none; }
  .user-trigger { padding: 0 8px 0 4px; }
}

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