/* ============================================================
   AI牌面人设馆 · 管理后台主题（2026-11-01 paimian-v1）
   叠加在 styles.css 之后，只改视觉，不动任何功能脚本。
   设计语言来源：Claude Design「AI牌面人设馆」设计系统
     - 深色 = 金卡 Night，浅色 = 旧卡 Paper（沿用原来的明暗切换）
     - 一切「牌」用 14px 圆角，按钮 / 输入框 6px，标签用胶囊
     - 金属渐变只给主按钮和侧栏金卡
   还原：index.html 去掉本文件和 paimian-theme.js 两行即可，
   或用 /opt/aiwanshiwu-ops/backups/20261101-before-paimian/ 整体覆盖。
   ============================================================ */

/* ---------- 令牌映射 ---------- */
:root,
body[data-theme="dark"] {
  --bg: #1A0B04;
  --panel: #2A1509;
  --panel2: #331B0D;
  --sunken: #110702;
  --line: #3D2414;
  --line2: #6E553E;
  --fg: #F3E9D6;
  --fg2: #CDBBA2;
  --fg3: #B5A38C;
  /* 原后台的主题色会以内联样式写进 --accent，这里统一锁成牌面金 */
  --accent: #F0B447 !important;
  --ink: #1F0E04 !important;
  --accent-text: #F0B447 !important;
  --gold: #F0B447;
  --gold-hi: #FBDF7B;
  --gold-lo: #A15C01;
  --on-gold: #1F0E04;
  --parchment: #CFC3B3;
  --rose: #E9A58E;
  --platinum: #C9CDD1;
  --bronze: #C98545;
  --warn: #F2C46B;
  --danger: #FF8A6B;
  --success: #7FD6A4;
  --focus: #FBDF7B;
  --accent-12: rgba(240, 180, 71, .12);
  --accent-20: rgba(240, 180, 71, .2);
  --glow: 0 0 48px rgba(240, 180, 71, .35);
  --shadow-float: 0 24px 48px rgba(0, 0, 0, .45);
  --shadow-window: 0 40px 100px -24px rgba(0, 0, 0, .7);
  --hatch: repeating-linear-gradient(45deg, transparent 0 7px, #3D2414 7px 8px);
  --hatch-strong: repeating-linear-gradient(45deg, transparent 0 5px, #6E553E 5px 6px);
  --font-ui: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
  --r-card: 14px;
  --r-sm: 6px;
  --metal: linear-gradient(135deg, #FBDF7B 0%, #F0B447 45%, #A15C01 130%);
}

/* 原后台把用户选的主题色以内联样式写在 html 和 body 上，两档主题都要顶住 */
html,
body,
body[data-theme] {
  --accent: #F0B447 !important;
  --ink: #1F0E04 !important;
}

body[data-theme="light"] {
  --bg: #F1E9DA;
  --panel: #FAF5EC;
  --panel2: #FFFDF8;
  --sunken: #E5DAC6;
  --line: #D6C7AE;
  --line2: #A8957C;
  --fg: #1F120A;
  --fg2: #4E3F31;
  --fg3: #6B5947;
  --accent-text: #7C4A05 !important;
  --warn: #8A5A00;
  --danger: #B23A1E;
  --success: #2D6A48;
  --focus: #1F120A;
  --accent-12: rgba(240, 180, 71, .18);
  --accent-20: rgba(240, 180, 71, .3);
  --glow: 0 12px 32px rgba(122, 74, 5, .18);
  --shadow-float: 0 10px 24px rgba(31, 18, 10, .12);
  --shadow-window: 0 32px 80px -28px rgba(31, 18, 10, .3);
  --hatch: repeating-linear-gradient(45deg, transparent 0 7px, #D6C7AE 7px 8px);
  --hatch-strong: repeating-linear-gradient(45deg, transparent 0 5px, #A8957C 5px 6px);
}

@supports (color: oklch(from red l c h)) {
  :root,
  body[data-theme="dark"] { --accent-text: #F0B447 !important; }
  body[data-theme="light"] { --accent-text: #7C4A05 !important; }
}

/* ---------- 全局 ---------- */
body {
  font-size: 13px;
  background: var(--bg);
}

button, input, select, textarea { font-size: 13px; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: rgba(240, 180, 71, .3); }

/* 冷几何的切角全部去掉 */
.topbar-btn,
.ops-mini-btn,
.action-btn.primary,
.compact-actions .neumo-btn,
.action-grid button,
.module-drag-handle,
.release-flags .toggle-option,
.form-actions button.primary,
.ops-col-menu {
  clip-path: none !important;
}

/* ---------- 圆角：牌 14px / 控件 6px / 标签胶囊 ---------- */
.panel, .login-card, .stat-card, .stat, .nav-footer, .table-wrap, .empty-state,
.file-drop-zone, .modal, .dialog, .drawer, .ops-col-menu, .module-expanded-row > td > *,
.license-create-form, .inline-create-form, .release-upload-form, .monitor-chip {
  border-radius: var(--r-card) !important;
}

button, .neumo-btn, .action-btn, .topbar-btn, .ops-mini-btn, .copy-chip, .daily-expand-chip,
input:not([type="checkbox"]):not([type="radio"]), select, textarea, .segment-control,
.segment-control button, .toggle-option, .nav-item, .module-inline-select, .module-group-select,
.module-inline-input, .customer-group-select, .filter-bar input, .filter-bar select {
  border-radius: var(--r-sm) !important;
}

.pill, .pill-mark, .soft-tag, .customer-group-chip, .accent-swatch, .nav-avatar,
.topbar-logo, .brand-logo, .topbar-dot, .statusbar-dot {
  border-radius: 999px !important;
}

/* ---------- 外壳 ---------- */
.topbar {
  height: 64px;
  gap: 16px;
  padding: 0 28px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.topbar-logo {
  width: 36px;
  height: 36px;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--gold-lo);
}

.topbar-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .02em;
}

.topbar-title::after {
  content: "✦";
  margin-left: .2em;
  font-size: .6em;
  vertical-align: .45em;
  color: var(--accent-text);
}

.topbar-divider { background: var(--line); }

.topbar-console,
.topbar-online,
.stats-cell-label,
.stats-cell-meta,
.nav-section-label,
.nav-num,
.nav-badge,
.nav-user-copy span,
.nav-footer-head,
.mini,
.readonly-id {
  font-family: var(--font-mono);
}

.topbar-dot {
  transform: none;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(127, 214, 164, .18);
}

.topbar-online { color: var(--success); }

.topbar-btn {
  height: 32px;
  border-color: var(--line2);
  color: var(--fg2);
  font-family: var(--font-mono);
}

.topbar-btn:hover {
  color: var(--fg);
  border-color: var(--fg3);
  background: var(--panel);
}

/* 主题色色板：牌面馆只有一种金，色板不再生效，隐藏 */
.accent-row { display: none !important; }

/* 读数条（已被 v6 搬进顶栏） */
.server-usage-panel {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.topbar .server-usage-panel {
  background: transparent;
  border-bottom: 0;
  border-left: 1px solid var(--line);
}

.stats-cell { border-right-color: var(--line); }

.stats-cell-label { color: var(--fg3); }
.stats-cell:first-child .stats-cell-label { color: var(--accent-text); }

.stats-cell-value { font-family: var(--font-mono); }

.stats-track {
  height: 4px;
  border-radius: 2px !important;
  background: var(--sunken);
}

.stats-track.is-hatch { background: var(--sunken); }

.stats-fill {
  border-radius: 2px !important;
  background: var(--gold) !important;
}

/* 侧栏 */
.nav-panel {
  width: 264px;
  background: var(--sunken);
  border-right: 1px solid var(--line);
  padding: 8px 16px 0;
}

body[data-theme="light"] .nav-panel { background: var(--sunken); }

.nav-user {
  padding: 18px 8px;
  border-bottom: 1px solid var(--line);
}

.nav-avatar {
  width: 40px;
  height: 40px;
  border: 0;
  background: var(--bg) url("/admin/paimian-logo.png?v=20261101-paimian") center / cover no-repeat;
  box-shadow: 0 0 0 1px var(--gold-lo);
}

.nav-user-copy strong {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .01em;
}

.nav-user-copy span { color: var(--fg3); }

.nav-section-label { padding: 20px 12px 8px; }

.nav { gap: 2px; }

.nav-item {
  position: relative;
  height: 40px;
  padding: 0 12px;
  border-left: 0;
  color: var(--fg2);
  font-size: 13.5px;
}

.nav-item::before { display: none; }

.nav-item:hover {
  color: var(--fg);
  background: var(--panel);
}

.nav-item.active {
  border-left: 0;
  background: var(--panel);
  color: var(--fg);
  font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--line);
}

.nav-item.active::after {
  content: "✦";
  position: absolute;
  left: -12px;
  font-size: 10px;
  color: var(--accent-text);
}

.nav-item.active .nav-num,
.nav-item.active .nav-badge { color: var(--accent-text); }

/* 侧栏底部「同步」块 = 一屏唯一的金卡 */
.nav-footer {
  position: relative;
  margin: 20px 0 16px;
  margin-top: auto;
  border: 0;
  overflow: hidden;
  color: var(--on-gold);
  background: var(--metal);
  box-shadow: var(--glow);
}

.nav-footer::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--gold-lo);
  border-radius: 8px;
  opacity: .6;
  pointer-events: none;
}

.nav-footer > * { position: relative; }

.nav-footer-head {
  height: auto;
  padding: 16px 16px 4px;
  border-bottom: 0;
  color: var(--on-gold);
  justify-content: space-between;
}

.nav-footer-head::after { content: "AI ✦"; letter-spacing: .12em; }

.nav-footer-accent { display: none; }

.nav-footer-body {
  padding: 4px 16px 16px;
  color: var(--on-gold);
}

.nav-footer-body span { color: rgba(31, 14, 4, .72); }
.nav-footer-body strong { color: var(--on-gold); font-family: var(--font-mono); }

/* 工作区 */
.workspace { background: var(--bg); }

.workspace-scroll { padding: 28px 32px 40px; }

/* 状态栏 */
.statusbar {
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.statusbar-accent { display: none; }

.statusbar-dot {
  transform: none;
  background: var(--success);
}

/* ---------- 面板 ---------- */
.panel,
.panel:has(.action-btn.primary),
.panel:has(.release-upload-form),
.login-card,
.inline-admin-panel,
.license-fill-panel,
.admin-choice-panel,
.hotfix-group-standalone-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 1px solid var(--line) !important;
  box-shadow: none;
}

.section-header {
  border-bottom-color: var(--line);
}

.section-header h2,
.section-header h3,
.panel > .section-header h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: .01em;
}

/* 标题前的菱形 / 竖条 → 金色星芒 */
.panel > .section-header:not(.sub-head)::before {
  content: "✦";
  width: auto;
  height: auto;
  background: none;
  border: 0;
  transform: none;
  color: var(--accent-text);
  font-size: 12px;
  line-height: 1;
}

.section-header .icon { color: var(--accent-text); }

/* 数字卡 */
.stat-card,
.stat {
  background: var(--panel);
  border: 1px solid var(--line);
}

.stat strong,
.stat-card strong {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: -.02em;
}

.stat-icon { color: var(--accent-text); }

/* ---------- 按钮 ---------- */
.neumo-btn,
.ops-mini-btn,
.action-grid button,
.copy-chip,
.daily-expand-chip {
  border-color: var(--line2);
  background: transparent;
  color: var(--fg);
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .2s;
}

.neumo-btn:hover,
.ops-mini-btn:hover,
.action-grid button:hover {
  background: var(--panel2);
  border-color: var(--fg3);
  color: var(--fg);
}

/* 一档主操作：金属渐变 */
.action-btn.primary,
.form-actions button.primary,
.ops-mini-btn.primary,
button.primary {
  border: 0 !important;
  color: var(--on-gold) !important;
  background: var(--metal) !important;
  font-weight: 700;
}

.action-btn.primary:hover,
.form-actions button.primary:hover,
.ops-mini-btn.primary:hover,
button.primary:hover {
  box-shadow: var(--glow);
  filter: brightness(1.03);
}

/* 行内的「发布」保持描边，不抢主操作 */
.release-row-actions .ops-mini-btn.primary,
td .ops-mini-btn.primary {
  border: 1px solid var(--gold) !important;
  background: transparent !important;
  color: var(--accent-text) !important;
}

/* 二档面板主按钮：金色描边 + 淡金底 */
.section-header .neumo-btn,
.section-header .inline-actions .neumo-btn,
.section-header > .neumo-btn,
.title-with-actions .neumo-btn {
  border-color: var(--gold);
  background: var(--accent-12);
  color: var(--accent-text);
}

.danger-text,
button.danger,
.module-delete-btn:hover { color: var(--danger) !important; }

/* ---------- 表单控件 ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
select,
textarea {
  background: var(--sunken);
  border-color: var(--line2);
  color: var(--fg);
}

body[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
body[data-theme="light"] select,
body[data-theme="light"] textarea {
  background: var(--panel2);
}

input::placeholder,
textarea::placeholder { color: var(--fg3); }

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--line2);
}

select option { background: var(--panel); color: var(--fg); }

.segment-control {
  background: var(--sunken);
  border: 1px solid var(--line);
  padding: 3px;
}

.segment-control button.active,
.segment-control button[aria-pressed="true"],
.toggle-option.pressed,
.toggle-option.active {
  background: var(--panel2);
  color: var(--fg);
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold);
}

.file-drop-zone {
  background: var(--sunken);
  border-color: var(--line2);
}

/* ---------- 表格 ---------- */
.table-wrap {
  border: 1px solid var(--line);
  background: var(--panel);
}

.table-wrap--scroll { overflow: auto; }

thead th {
  background: var(--panel2);
  color: var(--fg3);
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: .12em;
  border-bottom: 1px solid var(--line);
}

tbody td { border-bottom-color: var(--line); }

tbody tr:hover td { background: var(--accent-12); }

/* ---------- 标签 ---------- */
.pill {
  border-color: var(--line2);
  background: var(--panel2);
  color: var(--fg2);
}

.pill-mark { transform: none; }

body[data-theme="light"] .pill { background: var(--bg); }

.soft-tag {
  border-color: var(--gold);
  background: var(--accent-12);
  color: var(--accent-text);
}

/* ---------- 登录页 ---------- */
body.login {
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(240, 180, 71, .14), transparent 70%),
    var(--bg);
}

body[data-theme="light"].login {
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(240, 180, 71, .22), transparent 70%),
    var(--bg);
}

.login-shell { position: relative; }

.login-shell::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 900px;
  height: 900px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(240, 180, 71, .07) 0deg 1.2deg, transparent 1.2deg 7.5deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 15%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 15%, transparent 100%);
}

body[data-theme="light"] .login-shell::before { display: none; }

.login-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-float);
}

.login-card::before { display: none; }

.brand-lockup .brand-logo {
  width: 56px;
  height: 56px;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--gold-lo), var(--glow);
}

.brand-lockup h1 {
  font-family: var(--font-serif);
  font-weight: 900;
  letter-spacing: .01em;
}

.brand-lockup h1::after {
  content: "✦";
  margin-left: .2em;
  font-size: .6em;
  vertical-align: .45em;
  color: var(--accent-text);
}

.login-copy strong { font-weight: 700; }

/* ---------- 实时换人卡密弹层（脚本注入的样式，需要 !important 顶住） ---------- */
.cs-cards {
  clip-path: none !important;
  border-radius: var(--r-card) !important;
  background: var(--panel) !important;
  border-color: var(--line) !important;
}

.cs-cards-head h2 { font-family: var(--font-serif); font-weight: 700; }

.cs-cards-fresh {
  border-radius: var(--r-sm) !important;
  border-color: var(--gold) !important;
}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 900px) {
  .nav-panel { width: 100%; }
  .workspace-scroll { padding: 20px 16px 32px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}