/* =========================================================================
   aitoken-new 设计系统 (app.css) · 深色科技风 + Supabase 方正圆角
   变更基线：线上 app.css sha256 c6784459…（2026-09-24 19:55）
   本文件只做「视觉层最小精修」，保留原有深色科技底 + teal 强调 + tech-bg。
   改动（方案B · 方正圆角，借 Supabase「禁胶囊」基因）：
   - 按钮圆角 8 → 6px；卡片 16 → 12px；输入/导航 8 → 6px；统计卡 12 → 10px
   - 字号层级整体下移 0.08–0.12rem（更克制）：
     --fs-xs .75→.70 / --fs-sm .82→.78 / --fs-base .92→.88 / --fs-md 1→.96
     --fs-lg 1.12→1.08 / --fs-xl 1.35→1.30 / --fs-2xl 1.9→1.8
   不动：颜色 / 阴影 / 发光 / tech-bg / js 逻辑 / 后端 API
   回滚：见 _rollback-20260924T1955-pre-supabase/（线上原始版 + 本新版对照）
   ========================================================================= */

:root {
  /* 色彩 —— 保留原深空青绿调性（未动） */
  --bg:        #080b14;
  --bg-2:      #0b0f1a;
  --panel:     #121a2e;
  --panel-2:   #18223c;
  --panel-3:   #1f2b49;
  --accent:    #2de2c4;   /* 青绿 = 安全/可信信号 */
  --accent-2:  #6c8cff;   /* 蓝 = 科技/链接 */
  --accent-ink:#04201c;   /* 主按钮上的深色文字 */
  --text:      #eaf0fb;
  --muted:     #8a97b3;
  --muted-2:   #6b7896;
  --border:        rgba(120,150,220,.14);
  --border-strong: rgba(120,150,220,.30);
  --ok:   #38d39f;
  --warn: #ffcc66;
  --danger:#ff5d6c;

  --accent-soft: rgba(45,226,196,.12);
  --accent-2-soft: rgba(108,140,255,.14);
  --danger-soft: rgba(255,93,108,.12);
  --warn-soft:   rgba(255,204,102,.12);
  --ok-soft:     rgba(56,211,159,.12);

  /* 字体层级 —— Supabase 克制化：整体下移 0.08–0.12rem（更沉稳） */
  --fs-xs:  .70rem;   /* 原 .75 */
  --fs-sm:  .78rem;   /* 原 .82 */
  --fs-base: .88rem;  /* 原 .92 */
  --fs-md:  .96rem;   /* 原 1.00 */
  --fs-lg:  1.08rem;  /* 原 1.12 */
  --fs-xl:  1.30rem;  /* 原 1.35 */
  --fs-2xl: 1.80rem;  /* 原 1.90 */

  /* 圆角 —— Supabase 方正化：禁胶囊、小圆角 */
  --r-sm: 6px;  /* 原 8：按钮 / 导航 / 输入 / icon-btn */
  --r:    10px; /* 原 12：统计卡 / 表格 / 小容器 */
  --r-lg: 12px; /* 原 16：卡片 / 门禁 / 模态 */
  --r-xl: 16px; /* 原 20：保留备用 */
  --r-pill: 999px; /* 胶囊保留，但 B 方案仅用 pill 徽章 */

  /* 阴影 / 焦点环 / 侧栏宽度 —— 未动 */
  --shadow:    0 12px 34px rgba(0,0,0,.38);
  --shadow-sm: 0 6px 18px rgba(0,0,0,.28);
  --ring: 0 0 0 3px rgba(45,226,196,.22);
  --sidebar-w: 250px;
}

/* ---------- 基础 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Segoe UI", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--text); line-height: 1.6; font-size: var(--fs-base); -webkit-font-smoothing: antialiased; }
a { color: var(--muted); text-decoration: none; transition: color .15s; }
a:hover { color: var(--accent); }
h1,h2,h3,h4 { color: var(--text); font-weight: 700; letter-spacing: .2px; }
.ic { width: 18px; height: 18px; flex: none; }

/* ---------- App 骨架：侧边栏(常驻) + 主区(满屏) ---------- */
.app-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(18,26,46,.92), rgba(11,15,26,.92));
  border-right: 1px solid var(--border);
  padding: 1.25rem 1rem; backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; gap: .7rem; padding: .35rem .5rem .5rem; margin-bottom: 1.2rem; }
.brand-mark { width: 38px; height: 38px; flex: none; filter: drop-shadow(0 0 10px rgba(45,226,196,.35)); }
.brand-logo { width: 36px; height: 36px; flex: none; border-radius: 8px; object-fit: contain; }
.brand-name { font-size: 1.05rem; font-weight: 800; color: var(--text); line-height: 1.1; }
.brand-sub { font-size: .68rem; color: var(--muted-2); letter-spacing: .4px; margin-top: 2px; }
.lang-toggle { background: transparent; border: 1px solid rgba(255,255,255,.2); color: inherit; border-radius: 8px; padding: 0.35rem 0.7rem; font-size: 0.8rem; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.lang-toggle:hover { background: rgba(45,226,196,.12); border-color: rgba(45,226,196,.45); }

.nav { display: flex; flex-direction: column; gap: .25rem; margin-top: .25rem; }
.nav-label { font-size: .66rem; text-transform: uppercase; letter-spacing: 1.4px; color: var(--muted-2);
  padding: .4rem .6rem; margin-top: .4rem; }
.nav-item {
  display: flex; align-items: center; gap: .7rem; padding: .62rem .7rem; border-radius: var(--r-sm);
  color: var(--muted); font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  border: 1px solid transparent; transition: all .15s;
}
.nav-item .ic { color: var(--muted-2); transition: color .15s; }
.nav-item:hover { background: var(--panel-2); color: var(--text); }
.nav-item:hover .ic { color: var(--accent); }
.nav-item.active {
  background: linear-gradient(90deg, var(--accent-soft), transparent);
  color: var(--accent); border-color: rgba(45,226,196,.28);
  box-shadow: inset 3px 0 0 var(--accent);
}
.nav-item.active .ic { color: var(--accent); }

.side-foot { margin-top: auto; padding: .7rem .6rem 0; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: .5rem; font-size: var(--fs-xs); color: var(--muted-2); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot.ok { background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.75rem; background: rgba(8,11,20,.7); border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}
.crumb { font-size: var(--fs-xs); color: var(--muted-2); letter-spacing: .5px; }
.topbar h1 { font-size: var(--fs-xl); margin-top: 2px; }
.top-actions { display: flex; align-items: center; gap: 1rem; }
.link { font-size: var(--fs-sm); }
.content { padding: 1.6rem 1.75rem 3rem; max-width: 100%; width: 100%; }

/* ---------- 卡片 ---------- */
.card {
  background: linear-gradient(180deg, rgba(18,26,46,.78), rgba(15,21,38,.78));
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 1.4rem 1.5rem; margin-bottom: 1.4rem; backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.card-head .ch-left { display: flex; align-items: center; gap: .6rem; }
.card-head .ch-ic {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(45,226,196,.25);
}
.card-head h2, .card-head h3 { font-size: var(--fs-lg); }
.card-head .ch-actions { display: flex; gap: .5rem; align-items: center; }

/* ---------- 卡片可折叠 ---------- */
.collapse-btn {
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px;
  background: rgba(255,255,255,.04); border: 1px solid var(--border); color: var(--muted);
  cursor: pointer; transition: all .15s; flex: none;
}
.collapse-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: rgba(45,226,196,.3); }
.collapse-btn .ic { transition: transform .2s ease; }
.card.collapsed .collapse-btn .ic { transform: rotate(-90deg); }
.card.collapsed .card-body { display: none; }

/* ---------- 按钮系统 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink); border: none; padding: .68rem 1.25rem; border-radius: var(--r-sm);
  font-weight: 700; font-size: var(--fs-sm); cursor: pointer; transition: transform .12s, box-shadow .15s, filter .15s;
  font-family: inherit;
}
.btn .ic { width: 16px; height: 16px; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(45,226,196,.28); filter: brightness(1.05); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn.secondary { background: var(--panel-2); color: var(--accent); border: 1px solid var(--border-strong); }
.btn.secondary:hover { box-shadow: 0 8px 22px rgba(108,140,255,.18); }
.btn.ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.btn.ghost:hover { color: var(--text); background: var(--panel-2); box-shadow: none; }
.btn.danger { background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(255,93,108,.35); }
.btn.danger:hover { box-shadow: 0 8px 22px rgba(255,93,108,.18); }
.btn.sm { padding: .4rem .8rem; font-size: var(--fs-xs); }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.icon-btn {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-sm);
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); cursor: pointer; transition: all .15s;
}
.icon-btn:hover { color: var(--accent); border-color: rgba(45,226,196,.3); background: var(--accent-soft); }

/* ---------- 表单 / 输入 ---------- */
.field { margin-bottom: .9rem; }
.field > label { display: block; color: var(--muted); font-size: var(--fs-sm); margin-bottom: .35rem; font-weight: 600; }
.field .hint { font-size: var(--fs-xs); color: var(--muted-2); margin-top: .3rem; }
.input {
  width: 100%; background: rgba(8,11,20,.6); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: .7rem .85rem; color: var(--text); font-size: var(--fs-base); font-family: inherit; transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--muted-2); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.input:read-only { color: var(--muted); background: rgba(8,11,20,.4); cursor: default; }
.check { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: var(--fs-sm); cursor: pointer; }
.check input { width: auto; }

/* ---------- 标签 / 状态徽章 ---------- */
.pill, .badge {
  display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700; line-height: 1.5;
}
.pill.ok, .badge.ok { background: var(--ok-soft); color: var(--ok); border: 1px solid rgba(56,211,159,.3); }
.pill.active, .badge.active { background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(45,226,196,.3); }
.pill.pending, .badge.pending { background: var(--warn-soft); color: var(--warn); border: 1px solid rgba(255,204,102,.3); }
.pill.rejected, .badge.rejected { background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(255,93,108,.3); }
.badge .dot { width: 6px; height: 6px; }

/* ---------- 统计卡 ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.stat {
  background: rgba(8,11,20,.5); border: 1px solid var(--border); border-radius: var(--r); padding: 1.1rem 1.2rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.stat .s-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); }
.stat .v { font-size: var(--fs-2xl); font-weight: 800; color: var(--accent); line-height: 1; }
.stat .l { color: var(--muted); font-size: var(--fs-sm); }

/* ---------- 表格 ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--r); }
table.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.table th {
  text-align: left; padding: .6rem .7rem; color: var(--accent); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .8px; border-bottom: 1px solid var(--border-strong); white-space: nowrap;
}
table.table td { padding: .6rem .7rem; border-bottom: 1px solid var(--border); color: var(--muted); vertical-align: middle; }
table.table tbody tr { transition: background .12s; }
table.table tbody tr:hover { background: rgba(108,140,255,.06); }
table.table tbody tr:nth-child(even) { background: rgba(255,255,255,.012); }
table.table tbody tr:nth-child(even):hover { background: rgba(108,140,255,.06); }
table.table td:first-child, table.table th:first-child { color: var(--text); font-weight: 600; }
.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--accent-2); }

/* ---------- 锚点滚动留白（常驻顶栏不被遮）---------- */
html { scroll-behavior: smooth; }
section.card { scroll-margin-top: 84px; }

/* ---------- 分页控件 ---------- */
.pager { display: flex; align-items: center; gap: .45rem; margin-top: .9rem; flex-wrap: wrap; }
.pager .pg-info { color: var(--muted); font-size: var(--fs-xs); margin-right: auto; }
.pager .pg-ellipsis { color: var(--muted-2); padding: 0 .25rem; }
.pager button {
  min-width: 34px; height: 34px; padding: 0 .55rem; border-radius: var(--r-sm);
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
  cursor: pointer; font-size: var(--fs-xs); font-weight: 700; font-family: inherit; transition: all .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: .25rem;
}
.pager button:hover:not(:disabled) { color: var(--accent); border-color: rgba(45,226,196,.3); background: var(--accent-soft); }
.pager button.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); border-color: transparent; }
.pager button:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- 标签切换（登录/注册）---------- */
.tabs { display: inline-flex; gap: .25rem; padding: .25rem; background: rgba(8,11,20,.6);
  border: 1px solid var(--border); border-radius: var(--r-pill); margin-bottom: 1.2rem; }
.tabs button {
  background: transparent; border: none; color: var(--muted); padding: .45rem 1.2rem; border-radius: var(--r-pill);
  cursor: pointer; font-size: var(--fs-sm); font-weight: 700; font-family: inherit; transition: all .15s;
}
.tabs button.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); }

/* ---------- 提示信息 ---------- */
.msg { font-size: var(--fs-sm); min-height: 1.1rem; margin-top: .7rem; }
.msg.ok { color: var(--accent); } .msg.err { color: var(--danger); }

/* ---------- 栅格 / 工具类 ---------- */
.row { display: flex; gap: 1rem; flex-wrap: wrap; }
.row > div { flex: 1; min-width: 200px; }
.big { font-size: var(--fs-2xl); font-weight: 800; color: var(--accent); }
.muted { color: var(--muted); }
.copybtn { cursor: pointer; color: var(--muted-2); }
.copybtn:hover { color: var(--accent); }

/* ---------- 登录闸门（admin）---------- */
.overlay { position: fixed; inset: 0; display: grid; place-items: center; padding: 1.5rem; z-index: 20; }
.gate {
  width: 100%; max-width: 380px; background: linear-gradient(180deg, rgba(18,26,46,.9), rgba(15,21,38,.92));
  border: 1px solid rgba(45,226,196,.4); border-radius: var(--r-lg); padding: 1.8rem;
  box-shadow: 0 0 0 1px rgba(45,226,196,.2), 0 0 40px rgba(45,226,196,.16), var(--shadow);
}
.gate .g-head { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.2rem; }
.gate .g-head .ch-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(45,226,196,.25); }

/* ---------- 认证卡（console 登录/注册）---------- */
/* 登录/注册态：主区水平垂直居中；登录后（#auth hidden）恢复顶部正常流布局 */
.content:has(#auth:not([hidden])) {
  display: flex; flex-direction: column; align-items: center;
  min-height: calc(100vh - 96px); /* 视口减 topbar 高度，实现垂直居中 */
}
.auth-card {
  max-width: 460px; width: 100%;
  margin: auto; /* flex 容器内 auto margin 双向居中；内容超高时可滚动不裁切 */
  background: transparent;               /* 透明背景，透出科技感底图 */
  backdrop-filter: none;
  box-shadow: none;
  border-color: rgba(45,226,196,.35);
  box-shadow: 0 0 0 1px rgba(45,226,196,.12), 0 0 30px rgba(45,226,196,.10);
}
.auth-card .brand-row { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; }

/* ---------- 响应式 ---------- */
.menu-btn { display: none; }
@media (max-width: 860px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w); z-index: 30;
    transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--shadow);
  }
  .app-shell.nav-open .sidebar { transform: translateX(0); }
  .menu-btn { display: grid; }
  .content { padding: 1.1rem 1rem 2.5rem; }
  .topbar { padding: .85rem 1rem; }
}
@media (max-width: 520px) {
  .row { flex-direction: column; }
  .row > div { min-width: 0; }
}

/* ---------- 弹窗（忘记密码）---------- */
.modal { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(4,7,14,.66); backdrop-filter: blur(2px); }
.modal.open { display: flex; }
.modal-card { max-width: 420px; width: 100%; }
.modal-card h3 { font-size: var(--fs-lg); }
.modal .field { margin-top: .6rem; }
.cf-turnstile { min-height: 65px; } /* 占位，避免 widget 加载前布局抖动 */