/* =========================================================================
   aitoken-new 设计系统 (app.css)
   设计理念：科技感 + 安全感（保留 SibyX 同源深空青绿调性）
   - 侧边栏 + 顶栏的 App 骨架，符合 SaaS 用户习惯
   - 统一色彩令牌、间距、圆角、阴影、字体层级
   - 全套组件：卡片 / 按钮 / 输入框 / 表格 / 徽章 / 统计卡 / 标签
   - 全部图标用内联 SVG（stroke=currentColor），无外部依赖
   说明：本文件只改视觉层；页面内的元素 id 与内联脚本保持不变，功能不动。
   ========================================================================= */

:root {
  /* 色彩 —— 在 tech-bg.css 基础上细化层次 */
  --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);

  /* 字体层级 */
  --fs-xs:  .75rem;
  --fs-sm:  .82rem;
  --fs-base: .92rem;
  --fs-md:  1rem;
  --fs-lg:  1.12rem;
  --fs-xl:  1.35rem;
  --fs-2xl: 1.9rem;

  /* 圆角 / 阴影 / 间距 */
  --r-sm: 8px;  --r: 12px;  --r-lg: 16px;  --r-xl: 20px;  --r-pill: 999px;
  --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 加载前布局抖动 */