/* ============================================
   CAD 3D 扫码看图系统 — Atelier Noir 主题
   设计风格：建筑美学 · 暗黑工作室 · 暖金质感
   ============================================ */

/* ========================================
   一、设计令牌（CSS 变量）
   ======================================== */

/* ---------- 浅色主题：暖石灰 ---------- */
:root {
  /* 字体系统 */
  --font-display: "Sora", "Microsoft YaHei", "PingFang SC", sans-serif;
  --font-body: "Manrope", "Microsoft YaHei", "PingFang SC", sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", "Consolas", monospace;

  /* 背景层级 — 暖石灰 */
  --bg-primary: #f2eee8;
  --bg-secondary: #e8e3da;
  --bg-tertiary: #ddd7cc;
  --bg-elevated: #ffffff;
  --bg-overlay: rgba(255, 255, 255, 0.72);

  /* 面板 */
  --panel-bg: rgba(255, 255, 255, 0.82);
  --panel-solid: #ffffff;
  --panel-hover: rgba(255, 255, 255, 0.92);

  /* 强调色 — 古铜金 */
  --accent: #a8843c;
  --accent-hover: #8f6e2e;
  --accent-light: #c4a05a;
  --accent-soft: rgba(168, 132, 60, 0.08);
  --accent-border: rgba(168, 132, 60, 0.22);

  /* 文字 */
  --text-primary: #1a1c20;
  --text-secondary: #54575e;
  --text-muted: #868a93;
  --text-inverse: #f2eee8;

  /* 状态色 */
  --success: #4a7c59;
  --success-soft: rgba(74, 124, 89, 0.1);
  --warning: #b8862e;
  --warning-soft: rgba(184, 134, 46, 0.1);
  --danger: #a83c3c;
  --danger-soft: rgba(168, 60, 60, 0.08);

  /* 边框 */
  --border-color: rgba(26, 28, 32, 0.07);
  --border-hover: rgba(168, 132, 60, 0.28);
  --border-strong: rgba(26, 28, 32, 0.12);

  /* 阴影 */
  --shadow-xs: 0 1px 2px rgba(26, 28, 32, 0.04);
  --shadow-sm: 0 2px 8px rgba(26, 28, 32, 0.06);
  --shadow-md: 0 6px 20px rgba(26, 28, 32, 0.08);
  --shadow-lg: 0 12px 40px rgba(26, 28, 32, 0.1);
  --shadow-xl: 0 24px 60px rgba(26, 28, 32, 0.12);
  --shadow-accent: 0 4px 20px rgba(168, 132, 60, 0.15);

  /* 圆角 */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* 过渡 */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 0.15s var(--ease-out);
  --transition-base: 0.3s var(--ease-out);
  --transition-slow: 0.5s var(--ease-out);

  /* 兼容旧变量 */
  --blue: var(--accent);
  --line: var(--border-color);
  --muted: var(--text-muted);
  --panel: var(--panel-solid);
  --dark: var(--text-primary);

  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-primary);
}

/* ---------- 深色主题：暗黑工作室 ---------- */
body.theme-premium {
  /* 背景层级 — 深黑曜石 */
  --bg-primary: #0a0c0f;
  --bg-secondary: #11141a;
  --bg-tertiary: #181c24;
  --bg-elevated: #1f242e;
  --bg-overlay: rgba(15, 18, 24, 0.8);

  /* 面板 — 毛玻璃 */
  --panel-bg: rgba(17, 20, 26, 0.78);
  --panel-solid: #11141a;
  --panel-hover: rgba(31, 36, 46, 0.9);
  --panel-active: rgba(40, 46, 58, 0.95);

  /* 强调色 — 暖金 */
  --accent: #c8a063;
  --accent-hover: #dab277;
  --accent-light: #e0bc82;
  --accent-soft: rgba(200, 160, 99, 0.1);
  --accent-border: rgba(200, 160, 99, 0.25);

  /* 文字 */
  --text-primary: #ebe8e3;
  --text-secondary: #9a9ba0;
  --text-muted: #5c5e64;
  --text-inverse: #0a0c0f;

  /* 状态色 */
  --success: #6ab07a;
  --success-soft: rgba(106, 176, 122, 0.1);
  --warning: #d4a955;
  --warning-soft: rgba(212, 169, 85, 0.1);
  --danger: #d4655a;
  --danger-soft: rgba(212, 101, 90, 0.1);

  /* 边框 */
  --border-color: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(200, 160, 99, 0.3);
  --border-strong: rgba(255, 255, 255, 0.1);

  /* 阴影 */
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.6);
  --shadow-accent: 0 4px 24px rgba(200, 160, 99, 0.18);

  /* 毛玻璃 */
  --blur-sm: blur(10px);
  --blur-md: blur(20px);
  --blur-lg: blur(32px);

  background: var(--bg-primary);
  color: var(--text-primary);
}

/* ========================================
   二、全局基础样式
   ======================================== */

body {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* 深色主题背景纹理 */
body.theme-premium::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(200, 160, 99, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 85% 100%, rgba(200, 160, 99, 0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* 浅色主题背景纹理 */
body:not(.theme-premium)::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 15% 0%, rgba(168, 132, 60, 0.04) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 90%, rgba(168, 132, 60, 0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

body > * { position: relative; z-index: 1; }

/* 滚动条 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-border); }

/* 选中文字 */
::selection {
  background: var(--accent-soft);
  color: var(--accent);
}

/* ========================================
   三、品牌标识
   ======================================== */

.brand-mark {
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--bg-tertiary) 100%) !important;
  color: var(--accent-light) !important;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

body.theme-premium .brand-mark {
  background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-tertiary) 100%) !important;
  border: 1px solid var(--border-strong) !important;
}

/* ========================================
   四、按钮系统
   ======================================== */

.primary, button.primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%) !important;
  color: #fff !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-accent), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transition: all var(--transition-base) !important;
}

.primary:hover, button.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(168, 132, 60, 0.25), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

.primary:active, button.primary:active {
  transform: translateY(0);
}

.primary:disabled {
  background: var(--bg-tertiary) !important;
  color: var(--text-muted) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

button, .ghost, .link-button {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  border-radius: var(--radius-sm) !important;
  transition: all var(--transition-fast) !important;
}

body.theme-premium button,
body.theme-premium .ghost {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
}

body.theme-premium button:hover,
body.theme-premium .ghost:hover {
  background: var(--panel-hover) !important;
  border-color: var(--border-hover) !important;
  color: var(--text-primary) !important;
}

/* ========================================
   五、输入框
   ======================================== */

.field input[type="text"],
.field input[type="password"],
.field input[type="datetime-local"],
.field input[type="number"],
input, textarea, select {
  font-family: var(--font-body) !important;
  border-radius: var(--radius-sm) !important;
  transition: all var(--transition-fast) !important;
}

body.theme-premium input,
body.theme-premium textarea,
body.theme-premium select {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}

body.theme-premium input:focus,
body.theme-premium textarea:focus,
body.theme-premium select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  outline: none !important;
}

body.theme-premium input::placeholder {
  color: var(--text-muted) !important;
}

/* ========================================
   六、登录页 — 全新设计
   ======================================== */

.login-shell {
  background: var(--bg-primary) !important;
}

/* 左侧视觉区 */
.login-product-visual {
  background:
    linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%) !important;
  position: relative;
  overflow: hidden;
}

/* 网格背景纹理 */
.login-product-visual::before,
.login-visual::before {
  background:
    linear-gradient(90deg, var(--border-color) 1px, transparent 1px),
    linear-gradient(0deg, var(--border-color) 1px, transparent 1px) !important;
  background-size: 48px 48px, 48px 48px !important;
  opacity: 0.5 !important;
}

/* 渐变光晕 */
.login-product-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 30%, var(--accent-soft) 0%, transparent 45%),
    radial-gradient(circle at 75% 70%, var(--accent-soft) 0%, transparent 40%);
  pointer-events: none;
}

/* 产品标题 */
.login-masthead h1,
.login-hero h1 {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.05 !important;
}

.login-product-copy p,
.login-hero p,
.login-masthead p {
  font-family: var(--font-body) !important;
  color: var(--text-secondary) !important;
  line-height: 1.7 !important;
}

.eyebrow {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
}

/* 能力条 */
.login-capability-strip {
  gap: 10px !important;
}

.login-capability-strip > * {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-xs) !important;
  padding: 6px 10px !important;
  background: var(--panel-bg) !important;
  backdrop-filter: var(--blur-sm);
}

.login-capability-strip strong {
  color: var(--accent) !important;
  font-weight: 600 !important;
}

/* 统计卡片 */
.login-stats span {
  background: var(--panel-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  font-family: var(--font-body) !important;
  color: var(--text-muted) !important;
}

.login-stats strong {
  font-family: var(--font-display) !important;
  color: var(--text-primary) !important;
  font-weight: 700 !important;
}

/* 视觉卡片 */
.login-visual-card {
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--panel-bg) !important;
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  box-shadow: var(--shadow-lg) !important;
}

/* 右侧登录区 */
.login-auth-panel {
  background: var(--bg-elevated) !important;
}

body:not(.theme-premium) .login-auth-panel,
body:not(.theme-premium) .login-card {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
}

body.theme-premium .login-auth-panel,
body.theme-premium .login-card {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

.login-auth-head {
  border-bottom: 1px solid var(--border-color) !important;
}

.login-auth-head h2 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}

/* 登录表单卡片 */
.login-auth-card,
.login-form-card {
  border-radius: var(--radius-lg) !important;
}

.login-error {
  background: var(--danger-soft) !important;
  border: 1px solid var(--danger) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--danger) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
}

/* 登录卡片品牌标识 */
.login-card .brand-mark,
.console-panel .brand-mark,
.admin-sidebar .brand-mark {
  background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-elevated)) !important;
  color: var(--accent) !important;
  border: 1px solid var(--border-color) !important;
}

/* ========================================
   七、控制台 / 工作台
   ======================================== */

.home, .console-shell {
  background: var(--bg-primary) !important;
}

.console-panel,
.panel {
  background: var(--bg-elevated) !important;
  border-right: 1px solid var(--border-color) !important;
}

body.theme-premium .console-panel,
body.theme-premium .panel {
  background: var(--bg-secondary) !important;
}

/* 工作区面板 */
.workspace-shell,
.console-shell {
  background: var(--bg-primary) !important;
}

body.theme-premium .workspace-shell,
body.theme-premium .console-shell {
  background: var(--panel-bg) !important;
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}

.workspace-header {
  background: var(--bg-elevated) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

body.theme-premium .workspace-header {
  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%) !important;
  backdrop-filter: var(--blur-md);
}

/* 上传区域 */
.dropzone {
  border: 2px dashed var(--border-strong) !important;
  border-radius: var(--radius-md) !important;
  background: var(--bg-secondary) !important;
  transition: all var(--transition-base) !important;
}

.dropzone:hover {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
}

body.theme-premium .dropzone {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-strong) !important;
}

/* 项目列表 */
.project-list,
.result,
.notice {
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  background: var(--bg-elevated) !important;
}

body.theme-premium .project-list,
body.theme-premium .result,
body.theme-premium .notice {
  background: var(--bg-secondary) !important;
}

.project-item,
.project-table-row {
  border-radius: var(--radius-sm) !important;
  transition: all var(--transition-fast) !important;
}

.project-item:hover,
.project-table-row:hover {
  background: var(--accent-soft) !important;
}

/* 项目列表工具栏 */
.project-list-toolbar {
  border-bottom: 1px solid var(--border-color) !important;
}

/* ========================================
   八、管理面板
   ======================================== */

.admin-shell {
  background: var(--bg-primary) !important;
}

.admin-sidebar {
  background: var(--bg-elevated) !important;
  border-right: 1px solid var(--border-color) !important;
}

body.theme-premium .admin-sidebar {
  background: var(--bg-secondary) !important;
}

.admin-sidebar .brand {
  border-bottom: 1px solid var(--border-color) !important;
}

.admin-sidebar h1 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}

.admin-nav a {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  border-radius: var(--radius-sm) !important;
  transition: all var(--transition-fast) !important;
  color: var(--text-secondary) !important;
}

.admin-nav a:hover {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

.admin-main {
  background: var(--bg-primary) !important;
}

.admin-topbar,
.admin-section,
.admin-metrics article {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
}

body.theme-premium .admin-topbar,
body.theme-premium .admin-section,
body.theme-premium .admin-metrics article {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

.admin-metrics strong {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
}

/* 管理面板表格 */
.admin-table-shell {
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
}

.admin-table-head {
  background: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

body.theme-premium .admin-table-head {
  background: var(--bg-tertiary) !important;
}

.admin-table-row {
  border-bottom: 1px solid var(--border-color) !important;
  transition: background var(--transition-fast) !important;
}

.admin-table-row:hover {
  background: var(--accent-soft) !important;
}

/* 状态标签 */
.status-pill {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border-radius: var(--radius-xs) !important;
  padding: 3px 8px !important;
  font-weight: 500 !important;
}

.status-pill.status-success {
  background: var(--success-soft) !important;
  color: var(--success) !important;
}

.status-pill.status-warning {
  background: var(--warning-soft) !important;
  color: var(--warning) !important;
}

.status-pill.status-danger {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
}

.status-pill.status-neutral {
  background: var(--bg-tertiary) !important;
  color: var(--text-muted) !important;
}

/* ========================================
   九、3D 查看器 UI
   ======================================== */

/* 顶部工具栏 */
.cad-viewer > nav,
.cad-viewer .viewer-topbar {
  background: var(--panel-bg) !important;
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border-bottom: 1px solid var(--border-color) !important;
}

body.theme-premium .cad-viewer > nav,
body.theme-premium .cad-viewer .viewer-topbar {
  background: rgba(10, 12, 15, 0.85) !important;
}

/* 工具栏按钮 */
.cad-viewer .viewer-topbar button,
.cad-viewer nav button {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-sm) !important;
  transition: all var(--transition-fast) !important;
}

.cad-viewer .viewer-topbar button:hover,
.cad-viewer nav button:hover {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

/* 右侧工具栏 */
.cad-viewer .viewer-side-tools,
.cad-viewer nav:nth-child(2) {
  background: var(--panel-bg) !important;
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border-left: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
}

body.theme-premium .cad-viewer .viewer-side-tools,
body.theme-premium .cad-viewer nav:nth-child(2) {
  background: rgba(17, 20, 26, 0.82) !important;
}

/* 底部工具栏 */
.cad-viewer .viewer-bottombar,
.cad-viewer nav:last-of-type {
  background: var(--panel-bg) !important;
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border-top: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
}

body.theme-premium .cad-viewer .viewer-bottombar,
body.theme-premium .cad-viewer nav:last-of-type {
  background: rgba(17, 20, 26, 0.85) !important;
}

/* 底部工具栏按钮激活态 */
.cad-viewer .viewer-bottombar button.active,
.cad-viewer nav:last-of-type button.active {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: var(--shadow-accent) !important;
}

/* 柜体选择栏 */
.cad-viewer .cabinet-bar,
.cad-viewer .viewer-cabinet-list {
  background: var(--panel-bg) !important;
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border-top: 1px solid var(--border-color) !important;
}

/* 渲染计时器 */
#renderTimer {
  font-family: var(--font-mono) !important;
  background: var(--panel-bg) !important;
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
}

.render-timer-label {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  color: var(--accent) !important;
}

/* 质量徽章 */
.quality-badge {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.05em !important;
  border-radius: var(--radius-xs) !important;
}

/* Toast 提示 */
#toast {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-lg) !important;
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  padding: 10px 18px !important;
}

body.theme-premium #toast {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
}

/* ========================================
   十、卡片 / 面板通用
   ======================================== */

.card, .stat-card, .info-card {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--transition-base) !important;
}

body.theme-premium .card,
body.theme-premium .stat-card,
body.theme-premium .info-card {
  background: var(--bg-secondary) !important;
}

.card:hover, .stat-card:hover {
  border-color: var(--border-hover) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px);
}

/* 徽章/标签 */
.badge, .tag, .chip {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.05em !important;
  border-radius: var(--radius-xs) !important;
  font-weight: 500 !important;
}

/* 分隔线 */
hr, .divider {
  border-color: var(--border-color) !important;
}

/* 分享行 */
.share-row input {
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
}

/* QR 码区域 */
.qr {
  border-radius: var(--radius-md) !important;
  background: var(--bg-elevated) !important;
  padding: 16px !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ========================================
   十零补、扫码公开看图页
   ======================================== */

/* QR 面板容器 */
.qr-panel {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden;
}

body.theme-premium .qr-panel {
  background: var(--bg-secondary) !important;
}

/* QR 面板头部 */
.qr-panel-header,
.qr-panel-title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--text-primary) !important;
}

.qr-panel-header {
  border-bottom: 1px solid var(--border-color) !important;
  background: var(--bg-secondary) !important;
}

body.theme-premium .qr-panel-header {
  background: var(--bg-tertiary) !important;
}

/* 单个 QR 卡片 */
.qr-single {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  transition: all var(--transition-base) !important;
}

.qr-single:hover {
  border-color: var(--border-hover) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px);
}

body.theme-premium .qr-single {
  background: var(--bg-secondary) !important;
}

/* QR 回退区域 */
.qr-fallback {
  background: var(--bg-secondary) !important;
  border: 1px dashed var(--border-strong) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-muted) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
}

/* 分享链接 */
.share-link {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  border: 1px solid var(--accent-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 12px !important;
  transition: all var(--transition-fast) !important;
}

.share-link:hover {
  background: var(--accent) !important;
  color: #fff !important;
}

/* 分享操作栏 */
.share-actions {
  gap: 8px !important;
}

.share-actions button,
.share-actions .ghost,
.share-actions .link-button {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  border-radius: var(--radius-sm) !important;
  transition: all var(--transition-fast) !important;
}

/* 公开看图页提示 */
.login-public-note {
  background: var(--accent-soft) !important;
  border: 1px solid var(--accent-border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

.login-public-note strong {
  color: var(--accent) !important;
  font-family: var(--font-display) !important;
}

/* 公开看图页 Shell */
.login-public-shell,
.qr-public-shell {
  background: var(--bg-primary) !important;
}

body.theme-premium .login-public-shell,
body.theme-premium .qr-public-shell {
  background: var(--bg-primary) !important;
}

/* 扫码页项目标题 */
.qr-project-title {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--text-primary) !important;
}

/* 扫码页项目元信息 */
.qr-project-meta {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.02em !important;
}

/* 扫码页操作按钮 */
.qr-action-btn {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%) !important;
  color: #fff !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-accent) !important;
  transition: all var(--transition-base) !important;
}

.qr-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(168, 132, 60, 0.25) !important;
}

/* ========================================
   十一、主题切换按钮
   ======================================== */

.theme-toggle-btn {
  font-size: 18px !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: var(--panel-bg) !important;
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--transition-base) !important;
  z-index: 100 !important;
}

.theme-toggle-btn:hover {
  transform: scale(1.1) rotate(15deg);
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-accent) !important;
}

/* ========================================
   十二、备案信息
   ======================================== */

.site-beian a {
  font-family: var(--font-mono) !important;
  backdrop-filter: var(--blur-sm);
}

/* ========================================
   十三、材质库面板
   ======================================== */

.material-library-shell {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
}

body.theme-premium .material-library-shell {
  background: var(--bg-secondary) !important;
}

.material-library-item {
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  transition: all var(--transition-fast) !important;
}

.material-library-item:hover {
  border-color: var(--accent-border) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ========================================
   十四、安装动画工具栏
   ======================================== */

.install-toolbar {
  background: var(--panel-bg) !important;
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}

.install-icon-btn {
  border-radius: var(--radius-sm) !important;
  transition: all var(--transition-fast) !important;
}

.install-icon-btn:hover {
  background: var(--accent-soft) !important;
}

.install-progress-track {
  background: var(--bg-tertiary) !important;
  border-radius: var(--radius-xs) !important;
}

.install-progress-fill {
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 100%) !important;
  border-radius: var(--radius-xs) !important;
}

/* ========================================
   十五、房间场景面板
   ======================================== */

.room-scene-panel {
  background: var(--panel-bg) !important;
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ========================================
   十六、动画
   ======================================== */

/* 页面加载淡入 */
@keyframes atelierFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

#app > * {
  animation: atelierFadeIn 0.6s var(--ease-out);
}

/* 登录页元素交错淡入 */
.login-product-copy > *,
.login-masthead > *,
.login-auth-card > * {
  animation: atelierFadeIn 0.7s var(--ease-out) both;
}

.login-product-copy > *:nth-child(2) { animation-delay: 0.1s; }
.login-product-copy > *:nth-child(3) { animation-delay: 0.2s; }
.login-product-copy > *:nth-child(4) { animation-delay: 0.3s; }
.login-auth-card > *:nth-child(2) { animation-delay: 0.15s; }
.login-auth-card > *:nth-child(3) { animation-delay: 0.25s; }

/* 按钮波纹效果 */
.primary, button.primary {
  position: relative;
  overflow: hidden;
}

.primary::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.primary:active::after {
  width: 300px;
  height: 300px;
}

/* 项目卡片悬停 */
.project-item {
  transition: all var(--transition-base) !important;
}

.project-item:hover {
  border-color: var(--accent-border) !important;
  transform: translateX(4px);
}

/* ========================================
   十七、上传命令卡片
   ======================================== */

.upload-command-card,
.project-operations-card {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}

body.theme-premium .upload-command-card,
body.theme-premium .project-operations-card {
  background: var(--bg-secondary) !important;
}

/* ========================================
   十八、响应式微调
   ======================================== */

@media (max-width: 900px) {
  .login-hero h1,
  .login-masthead h1 {
    font-size: 36px !important;
  }

  .login-product-copy > *,
  .login-masthead > * {
    animation: none;
  }
}

/* ========================================
   十九、打印样式
   ======================================== */

@media print {
  body::before, body::after { display: none !important; }
  .theme-toggle-btn, .site-beian { display: none !important; }
}

/* ========================================
   二十、旧浏览器降级（backdrop-filter 不支持时）
   ======================================== */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .login-auth-card,
  .login-hero-panel,
  .viewer-toolbar,
  .viewer-bottom-bar,
  .viewer-side-panel,
  .admin-side-panel,
  .console-side-panel,
  .toast,
  .qr-panel,
  .qr-sidebar {
    background: var(--bg-elevated) !important;
  }
  body.theme-premium .login-auth-card,
  body.theme-premium .viewer-toolbar,
  body.theme-premium .viewer-bottom-bar,
  body.theme-premium .viewer-side-panel,
  body.theme-premium .admin-side-panel,
  body.theme-premium .console-side-panel,
  body.theme-premium .toast,
  body.theme-premium .qr-panel,
  body.theme-premium .qr-sidebar {
    background: var(--bg-tertiary) !important;
  }
}

/* ========================================
   二十一、移动端性能优化（禁用重动画）
   ======================================== */

@media (max-width: 768px) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.1s !important;
  }
  body::before, body::after {
    display: none !important;
  }
}

/* ========================================
   二十二、右侧工具栏 - 自适应屏幕高度
   ======================================== */

/* 桌面端：限制最大高度，超出时滚动（scale 0.5 后通常足够） */
.ref-side-toolbar {
  max-height: calc(100vh - 16px) !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch;
}
.ref-side-toolbar::-webkit-scrollbar {
  display: none !important;
}

/* 平板（<=900px）：去掉 scale，按钮用 clamp 自适应高度 */
@media (max-width: 900px) {
  .ref-side-toolbar {
    top: 6px !important;
    right: 6px !important;
    gap: clamp(2px, 0.5vh, 6px) !important;
    max-height: calc(100vh - 80px) !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    overflow-y: auto !important;
  }
  .ref-side-toolbar button {
    width: clamp(28px, 4vh, 36px) !important;
    height: clamp(28px, 4vh, 36px) !important;
    font-size: clamp(9px, 1.2vh, 12px) !important;
    flex-shrink: 0 !important;
  }
  .tool-icon,
  .tool-icon svg {
    width: clamp(15px, 2vh, 19px) !important;
    height: clamp(15px, 2vh, 19px) !important;
  }
}

/* 手机竖屏（<=480px）：更紧凑，确保所有12个按钮可见 */
@media (max-width: 480px) {
  .ref-side-toolbar {
    top: 4px !important;
    right: 4px !important;
    gap: clamp(2px, 0.4vh, 4px) !important;
    max-height: calc(100vh - 72px) !important;
  }
  .ref-side-toolbar button {
    width: clamp(26px, 3.8vh, 32px) !important;
    height: clamp(26px, 3.8vh, 32px) !important;
    font-size: clamp(8px, 1vh, 11px) !important;
  }
  .tool-icon,
  .tool-icon svg {
    width: clamp(14px, 1.8vh, 17px) !important;
    height: clamp(14px, 1.8vh, 17px) !important;
  }
}

/* 超短屏（iPhone SE 等高度 <=568px）：极限压缩 */
@media (max-height: 568px) and (orientation: portrait) {
  .ref-side-toolbar {
    top: 2px !important;
    gap: 1px !important;
    max-height: calc(100vh - 60px) !important;
  }
  .ref-side-toolbar button {
    width: 26px !important;
    height: 26px !important;
    font-size: 8px !important;
  }
  .tool-icon,
  .tool-icon svg {
    width: 14px !important;
    height: 14px !important;
  }
}

/* 手机横屏（高度 <=500px）：保持原有横向滚动方案 + 高度适配 */
@media (max-height: 500px) and (orientation: landscape) {
  .ref-side-toolbar {
    top: 4px !important;
    right: 4px !important;
    gap: clamp(1px, 0.3vh, 4px) !important;
    max-height: calc(100vh - 8px) !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    overflow-y: auto !important;
  }
  .ref-side-toolbar button {
    width: clamp(22px, 4vh, 28px) !important;
    height: clamp(22px, 4vh, 28px) !important;
    font-size: clamp(7px, 1vh, 10px) !important;
    flex-shrink: 0 !important;
  }
  .tool-icon,
  .tool-icon svg {
    width: clamp(12px, 2vh, 16px) !important;
    height: clamp(12px, 2vh, 16px) !important;
  }
}

/* 底部工具栏也做高度自适应（移动端） */
@media (max-width: 900px) {
  .ref-bottom-toolbar {
    height: clamp(28px, 4.5vh, 36px) !important;
  }
  .ref-bottom-toolbar button {
    font-size: clamp(9px, 1.1vh, 11px) !important;
    min-height: 100% !important;
  }
  .cabinet-strip {
    bottom: clamp(28px, 4.5vh, 36px) !important;
  }
  .ref-bottom-sheet {
    bottom: clamp(28px, 4.5vh, 36px) !important;
  }
}

/* ============================================
   八、居中登录页 — 全屏大气重设计
   ============================================ */

/* 全屏居中布局 - 卡片几乎全宽 */
.login-shell[data-screen="login"] {
  display: flex !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  background: var(--bg-primary) !important;
}

/* 全屏动态背景 */
.login-shell[data-screen="login"]::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, var(--accent-soft) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 80%, var(--accent-soft) 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 80% 70%, var(--accent-soft) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: loginBgFloat 12s ease-in-out infinite alternate;
}

@keyframes loginBgFloat {
  0% { transform: translate(0, 0) scale(1); opacity: 0.7; }
  100% { transform: translate(20px, -10px) scale(1.05); opacity: 1; }
}

/* 网格纹理覆盖 */
.login-shell[data-screen="login"]::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    linear-gradient(90deg, var(--border-color) 1px, transparent 1px),
    linear-gradient(0deg, var(--border-color) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 70% 70% at center, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at center, black 0%, transparent 80%);
}

/* 隐藏左侧视觉区 */
.login-shell[data-screen="login"] .login-product-visual {
  display: none !important;
}

/* 右侧面板居中 - 几乎全宽 */
.login-shell[data-screen="login"] .login-auth-panel {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 16px !important;
}

/* 登录卡片 - 居中大气 超宽版 */
.login-shell[data-screen="login"] .login-auth-card {
  width: 100% !important;
  max-width: 1480px !important;
  padding: 80px 160px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background: var(--panel-bg) !important;
  backdrop-filter: blur(24px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-xl), 0 0 80px var(--accent-soft) !important;
  animation: loginCardIn 0.6s var(--ease-spring) both;
}

@keyframes loginCardIn {
  from { opacity: 0; transform: translateY(30px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 登录卡片头部 */
.login-shell[data-screen="login"] .login-auth-head {
  text-align: center !important;
  border-bottom: none !important;
  padding-bottom: 8px !important;
  margin-bottom: 32px !important;
}

.login-shell[data-screen="login"] .login-auth-head .brand-mark {
  margin: 0 auto 20px !important;
  width: 64px !important;
  height: 64px !important;
  font-size: 20px !important;
  border-radius: var(--radius-lg) !important;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover)) !important;
  color: var(--text-inverse) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: var(--shadow-accent) !important;
  border: none !important;
}

.login-shell[data-screen="login"] .login-auth-head h2 {
  font-size: 28px !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 8px !important;
}

/* 登录表单 */
.login-shell[data-screen="login"] .login-form-card {
  gap: 18px !important;
  width: 100% !important;
  max-width: min(420px, 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  margin: 0 auto !important;
}

/* 覆盖 .field 的 grid 布局，改为 flex 垂直 */
.login-shell[data-screen="login"] .login-form-card .field {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.login-shell[data-screen="login"] .login-form-card input {
  width: 100% !important;
  box-sizing: border-box !important;
  height: 48px !important;
  font-size: 15px !important;
  border-radius: var(--radius-sm) !important;
  background: var(--bg-overlay) !important;
  border: 1px solid var(--border-color) !important;
  transition: var(--transition-fast) !important;
}

/* 确保表单内 label.field 也占满宽度 */
.login-shell[data-screen="login"] .login-form-card label.field {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.login-shell[data-screen="login"] .login-form-card input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

.login-shell[data-screen="login"] .login-submit {
  width: 100% !important;
  height: 50px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  margin-top: 8px !important;
  border-radius: var(--radius-sm) !important;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover)) !important;
  color: var(--text-inverse) !important;
  box-shadow: var(--shadow-accent) !important;
  transition: var(--transition-base) !important;
}

.login-shell[data-screen="login"] .login-submit:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 30px var(--accent-soft) !important;
}

.login-shell[data-screen="login"] .login-submit:active {
  transform: translateY(0) !important;
}

/* 公开说明已移除 */

/* 移动端登录页 */
@media (max-width: 480px) {
  .login-shell[data-screen="login"] {
    padding: 16px !important;
  }
  .login-shell[data-screen="login"] .login-auth-card {
    padding: 36px 28px !important;
  }
  .login-shell[data-screen="login"] .login-auth-head h2 {
    font-size: 24px !important;
  }
}

/* ============================================
   九、多风格主题系统
   ============================================ */

/* 风格切换器 */
.style-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
}

.style-switcher-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-inverse);
  position: relative;
  flex-shrink: 0;
}

.style-switcher-btn:hover {
  transform: scale(1.1);
}

.style-switcher-btn.active {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 2px var(--panel-solid), 0 0 12px var(--accent-soft);
}

.style-switcher-btn[data-vs="default"] { background: linear-gradient(135deg, #a8843c, #c4a05a); }
.style-switcher-btn[data-vs="nordic"] { background: linear-gradient(135deg, #4A90A4, #7BB3C7); }
.style-switcher-btn[data-vs="imperial"] { background: linear-gradient(135deg, #1a1a2e, #C9A84C); }
.style-switcher-btn[data-vs="forest"] { background: linear-gradient(135deg, #4A7C59, #8FAB6E); }
.style-switcher-btn[data-vs="ocean"] { background: linear-gradient(135deg, #1B4965, #62A8AC); }

/* --- Nordic Frost 北欧冰锋 --- */
body.vs-nordic {
  --accent: #4A90A4;
  --accent-hover: #3A7A8C;
  --accent-light: #7BB3C7;
  --accent-soft: rgba(74, 144, 164, 0.08);
  --accent-border: rgba(74, 144, 164, 0.22);
  --shadow-accent: 0 4px 20px rgba(74, 144, 164, 0.15);
}

body.vs-nordic.theme-premium {
  --accent: #7BB3C7;
  --accent-hover: #5A9AAE;
  --accent-light: #A0C8D8;
  --accent-soft: rgba(123, 179, 199, 0.1);
  --accent-border: rgba(123, 179, 199, 0.2);
  --shadow-accent: 0 4px 20px rgba(123, 179, 199, 0.12);
}

/* --- Imperial Dark 帝王暗金 --- */
body.vs-imperial {
  --accent: #C9A84C;
  --accent-hover: #A88838;
  --accent-light: #E0C468;
  --accent-soft: rgba(201, 168, 76, 0.08);
  --accent-border: rgba(201, 168, 76, 0.22);
  --shadow-accent: 0 4px 20px rgba(201, 168, 76, 0.18);
}

body.vs-imperial.theme-premium {
  --accent: #E0C468;
  --accent-hover: #C9A84C;
  --accent-light: #F0D888;
  --accent-soft: rgba(224, 196, 104, 0.1);
  --accent-border: rgba(224, 196, 104, 0.2);
  --shadow-accent: 0 4px 24px rgba(224, 196, 104, 0.15);
}

/* --- Forest Calm 森林静谧 --- */
body.vs-forest {
  --accent: #4A7C59;
  --accent-hover: #3A6A48;
  --accent-light: #6A9C78;
  --accent-soft: rgba(74, 124, 89, 0.08);
  --accent-border: rgba(74, 124, 89, 0.22);
  --shadow-accent: 0 4px 20px rgba(74, 124, 89, 0.15);
}

body.vs-forest.theme-premium {
  --accent: #8FAB6E;
  --accent-hover: #6A8B5A;
  --accent-light: #A8C288;
  --accent-soft: rgba(143, 171, 110, 0.1);
  --accent-border: rgba(143, 171, 110, 0.2);
  --shadow-accent: 0 4px 20px rgba(143, 171, 110, 0.12);
}

/* --- Ocean Deep 深海蔚蓝 --- */
body.vs-ocean {
  --accent: #1B4965;
  --accent-hover: #0F3850;
  --accent-light: #3A6A88;
  --accent-soft: rgba(27, 73, 101, 0.08);
  --accent-border: rgba(27, 73, 101, 0.22);
  --shadow-accent: 0 4px 20px rgba(27, 73, 101, 0.15);
}

body.vs-ocean.theme-premium {
  --accent: #62A8AC;
  --accent-hover: #4A8890;
  --accent-light: #82C0C4;
  --accent-soft: rgba(98, 168, 172, 0.1);
  --accent-border: rgba(98, 168, 172, 0.2);
  --shadow-accent: 0 4px 20px rgba(98, 168, 172, 0.12);
}

/* ============================================
   十、磁盘空间显示卡片
   ============================================ */

.disk-space-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.disk-space-card {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  transition: var(--transition-fast);
}

.disk-space-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-sm);
}

.disk-space-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.disk-space-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.disk-space-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.disk-space-status {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  letter-spacing: 0.05em;
}

.disk-space-status[data-level="ok"] {
  background: var(--success-soft);
  color: var(--success);
}

.disk-space-status[data-level="warn"] {
  background: var(--warning-soft);
  color: var(--warning);
}

.disk-space-status[data-level="danger"] {
  background: var(--danger-soft);
  color: var(--danger);
}

.disk-space-bar {
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
  position: relative;
}

.disk-space-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s var(--ease-out);
  position: relative;
}

.disk-space-bar-fill[data-level="ok"] {
  background: linear-gradient(90deg, var(--success), var(--accent-light));
}

.disk-space-bar-fill[data-level="warn"] {
  background: linear-gradient(90deg, var(--warning), #e0a030);
}

.disk-space-bar-fill[data-level="danger"] {
  background: linear-gradient(90deg, var(--danger), #d05050);
  animation: diskPulse 2s ease-in-out infinite;
}

@keyframes diskPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.disk-space-detail {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}

.disk-space-free {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.disk-space-free-unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 2px;
}

.disk-space-total {
  color: var(--text-muted);
  font-size: 11px;
}

.disk-space-error {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--danger);
  padding: 4px 0;
}

/* ========================================
   十七、上传进度条
   ======================================== */

.upload-progress-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}

.upload-progress-wrap[data-active="true"] {
  opacity: 1;
}

.upload-progress-track {
  width: 100%;
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.upload-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 100%);
  border-radius: var(--radius-xs);
  transition: width 0.15s linear;
  box-shadow: 0 0 8px var(--accent-soft);
}

.upload-progress-percent {
  font-family: var(--font-mono);
  font-size: 80px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.02em;
}