/* ============================================================
   AI PPT Studio — 设计系统
   ============================================================ */

:root {
  /* 主色 */
  --brand-50:#eef4ff; --brand-100:#dbe6ff; --brand-200:#bdd0ff; --brand-300:#90b0ff;
  --brand-400:#5c87fb; --brand-500:#3563f6; --brand-600:#2348e0; --brand-700:#1c39b6;
  --brand-800:#1a3192; --brand-900:#1a2d74;

  /* 中性色（浅色主题） */
  --bg:#f5f7fa;
  --bg-elev:#ffffff;
  --bg-subtle:#f8fafc;
  --bg-muted:#f1f5f9;
  --border:#e3e8ef;
  --border-strong:#cbd5e1;
  --text:#0f172a;
  --text-secondary:#475569;
  --text-muted:#94a3b8;

  /* 语义色 */
  --success:#10b981; --success-bg:#ecfdf5;
  --warning:#f59e0b; --warning-bg:#fffbeb;
  --danger:#ef4444;  --danger-bg:#fef2f2;
  --info:#0ea5e9;    --info-bg:#f0f9ff;

  /* 阴影 */
  --shadow-xs:0 1px 2px rgba(15,23,42,.04);
  --shadow-sm:0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md:0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --shadow-lg:0 12px 32px rgba(15,23,42,.12), 0 4px 8px rgba(15,23,42,.04);
  --shadow-xl:0 24px 56px rgba(15,23,42,.16);

  /* 圆角 */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-full:999px;

  /* 间距 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;

  --header-h:60px;
  --sidebar-w:232px;
  --ease:cubic-bezier(.4,0,.2,1);
}

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

html { -webkit-text-size-adjust:100%; }

body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB",
              "Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a { color:inherit; text-decoration:none; }
button, input, select, textarea { font-family:inherit; font-size:inherit; color:inherit; }
button { cursor:pointer; border:none; background:none; }
img { max-width:100%; display:block; }

/* 滚动条 */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:5px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background:#94a3b8; }

/* ============================ 布局 ============================ */
.app { display:flex; min-height:100vh; }

.sidebar {
  width:var(--sidebar-w);
  background:#0f172a;
  color:#cbd5e1;
  display:flex; flex-direction:column;
  position:fixed; inset:0 auto 0 0;
  z-index:50;
}

.sidebar-brand {
  height:var(--header-h);
  display:flex; align-items:center; gap:10px;
  padding:0 20px;
  border-bottom:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
}
.sidebar-logo {
  width:30px; height:30px; border-radius:8px;
  background:linear-gradient(135deg,var(--brand-400),var(--brand-600));
  display:grid; place-items:center;
  font-weight:800; font-size:13px; color:#fff;
  box-shadow:0 2px 8px rgba(53,99,246,.4);
  letter-spacing:-.5px;
}
.sidebar-title { font-weight:650; color:#fff; font-size:15px; letter-spacing:-.2px; }
.sidebar-title small { display:block; font-size:10px; font-weight:400; color:#64748b; letter-spacing:0; }

.sidebar-nav { flex:1; overflow-y:auto; padding:12px 12px 20px; }
.sidebar-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-color:transparent; }

.nav-section { margin-top:18px; }
.nav-section:first-child { margin-top:4px; }
.nav-label {
  font-size:10.5px; text-transform:uppercase; letter-spacing:.9px;
  color:#64748b; padding:0 10px; margin-bottom:6px; font-weight:600;
}
.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:var(--r-md);
  color:#cbd5e1; font-size:13.5px; font-weight:500;
  transition:background .16s var(--ease), color .16s var(--ease);
  margin-bottom:2px; cursor:pointer; user-select:none;
}
.nav-item:hover { background:rgba(255,255,255,.06); color:#fff; }
.nav-item.active { background:linear-gradient(90deg,var(--brand-600),var(--brand-500)); color:#fff; box-shadow:0 2px 10px rgba(35,72,224,.35); }
.nav-item svg { width:16px; height:16px; flex-shrink:0; opacity:.9; }
.nav-item .badge-count { margin-left:auto; font-size:11px; background:rgba(255,255,255,.14); padding:1px 7px; border-radius:var(--r-full); }
.nav-item.active .badge-count { background:rgba(255,255,255,.25); }

.sidebar-foot { padding:12px; border-top:1px solid rgba(255,255,255,.08); }
.sidebar-user { display:flex; align-items:center; gap:10px; padding:8px; border-radius:var(--r-md); }
.sidebar-user:hover { background:rgba(255,255,255,.06); }
.avatar {
  width:32px; height:32px; border-radius:var(--r-full);
  background:linear-gradient(135deg,var(--brand-400),var(--brand-600));
  display:grid; place-items:center; color:#fff; font-weight:650; font-size:13px; flex-shrink:0;
}
.sidebar-user-info { min-width:0; flex:1; }
.sidebar-user-info b { display:block; color:#fff; font-size:13px; font-weight:550; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-user-info span { font-size:11px; color:#64748b; }

.main { flex:1; margin-left:var(--sidebar-w); min-width:0; display:flex; flex-direction:column; }

.topbar {
  height:var(--header-h);
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:16px;
  padding:0 28px;
  position:sticky; top:0; z-index:40;
}
.topbar h1 { font-size:16px; font-weight:650; letter-spacing:-.2px; }
.topbar .sub { color:var(--text-muted); font-size:12.5px; }
.topbar-actions { margin-left:auto; display:flex; align-items:center; gap:10px; }

.content { padding:28px; flex:1; }
.content-narrow { max-width:980px; margin:0 auto; }

/* ============================ 卡片 ============================ */
.card {
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}
.card-head {
  padding:18px 22px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:12px;
}
.card-head h2 { font-size:15px; font-weight:650; }
.card-head .sub { font-size:12.5px; color:var(--text-muted); }
.card-head .spacer { margin-left:auto; }
.card-body { padding:22px; }
.card-body.tight { padding:14px; }

.grid { display:grid; gap:20px; }
.grid-1 { grid-template-columns:1fr; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
.grid-auto { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }

/* ============================ 统计卡 ============================ */
.stat {
  background:var(--bg-elev); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:20px;
  box-shadow:var(--shadow-sm);
  position:relative; overflow:hidden;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.stat:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.stat::after {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--brand-500),var(--brand-400));
}
.stat-label { font-size:12.5px; color:var(--text-muted); font-weight:500; display:flex; align-items:center; gap:6px; }
.stat-value { font-size:28px; font-weight:700; letter-spacing:-.8px; margin-top:6px; line-height:1.2; }
.stat-value small { font-size:14px; font-weight:500; color:var(--text-muted); margin-left:3px; }
.stat-foot { font-size:12px; color:var(--text-muted); margin-top:6px; display:flex; align-items:center; gap:5px; }
.stat-icon {
  position:absolute; right:16px; top:16px; width:36px; height:36px;
  border-radius:var(--r-md); display:grid; place-items:center;
  background:var(--brand-50); color:var(--brand-500);
}
.stat-icon svg { width:18px; height:18px; }

/* ============================ 按钮 ============================ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:38px; padding:0 16px;
  border-radius:var(--r-md);
  font-size:13.5px; font-weight:550;
  border:1px solid transparent;
  transition:all .16s var(--ease);
  white-space:nowrap; user-select:none;
}
.btn svg { width:15px; height:15px; }
.btn-primary {
  background:var(--brand-600); color:#fff;
  box-shadow:0 1px 2px rgba(35,72,224,.2), 0 2px 8px rgba(35,72,224,.2);
}
.btn-primary:hover { background:var(--brand-700); box-shadow:0 4px 14px rgba(35,72,224,.3); transform:translateY(-1px); }
.btn-primary:active { transform:translateY(0); }
.btn-primary:disabled { background:var(--border-strong); box-shadow:none; color:#fff; cursor:not-allowed; transform:none; }

.btn-secondary { background:var(--bg-elev); border-color:var(--border); color:var(--text-secondary); box-shadow:var(--shadow-xs); }
.btn-secondary:hover { border-color:var(--border-strong); color:var(--text); background:var(--bg-subtle); }

.btn-ghost { color:var(--text-secondary); }
.btn-ghost:hover { background:var(--bg-muted); color:var(--text); }

.btn-success { background:var(--success); color:#fff; box-shadow:0 2px 8px rgba(16,185,129,.25); }
.btn-success:hover { background:#059669; }

.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { background:#dc2626; }

.btn-danger-ghost { color:var(--danger); background:var(--danger-bg); }
.btn-danger-ghost:hover { background:#fee2e2; }

.btn-sm { height:30px; padding:0 11px; font-size:12.5px; border-radius:var(--r-sm); }
.btn-sm svg { width:13px; height:13px; }
.btn-lg { height:44px; padding:0 22px; font-size:15px; border-radius:var(--r-md); }
.btn-icon { width:34px; padding:0; }
.btn-block { width:100%; }

/* ============================ 表单 ============================ */
.field { margin-bottom:18px; }
.field-label {
  display:block; font-size:13px; font-weight:600; margin-bottom:7px; color:var(--text);
}
.field-label .req { color:var(--danger); margin-left:2px; }
.field-hint { font-size:12px; color:var(--text-muted); margin-top:6px; line-height:1.5; }

.input, .textarea, .select {
  width:100%; height:40px; padding:0 13px;
  border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--bg-elev); color:var(--text);
  transition:border-color .16s, box-shadow .16s, background .16s;
  outline:none;
}
.textarea { height:auto; padding:11px 13px; resize:vertical; min-height:100px; line-height:1.65; }
.input:hover, .textarea:hover, .select:hover { border-color:var(--border-strong); }
.input:focus, .textarea:focus, .select:focus {
  border-color:var(--brand-400);
  box-shadow:0 0 0 3px rgba(53,99,246,.12);
}
.input::placeholder, .textarea::placeholder { color:var(--text-muted); }
.select { appearance:none; padding-right:34px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
.input:disabled, .textarea:disabled, .select:disabled { background:var(--bg-muted); color:var(--text-muted); cursor:not-allowed; }

.input-group { display:flex; gap:10px; }
.input-group .input { flex:1; }

.counter { float:right; font-size:11.5px; color:var(--text-muted); font-weight:400; margin-top:-24px; margin-right:10px; pointer-events:none; }
.counter.warn { color:var(--warning); }
.counter.over { color:var(--danger); }

.switch { display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none; }
.switch input { display:none; }
.switch-track {
  width:38px; height:21px; border-radius:var(--r-full);
  background:var(--border-strong); position:relative;
  transition:background .2s var(--ease);
}
.switch-track::after {
  content:''; position:absolute; top:2px; left:2px;
  width:17px; height:17px; border-radius:50%; background:#fff;
  transition:transform .2s var(--ease);
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.switch input:checked + .switch-track { background:var(--brand-500); }
.switch input:checked + .switch-track::after { transform:translateX(17px); }

/* ============================ 标签 ============================ */
.tag {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 9px; border-radius:var(--r-full);
  font-size:11.5px; font-weight:600; line-height:1.7;
  background:var(--bg-muted); color:var(--text-secondary);
  white-space:nowrap;
}
.tag-brand { background:var(--brand-50); color:var(--brand-600); }
.tag-success { background:var(--success-bg); color:#047857; }
.tag-warning { background:var(--warning-bg); color:#b45309; }
.tag-danger { background:var(--danger-bg); color:#dc2626; }
.tag-info { background:var(--info-bg); color:#0369a1; }
.tag-dot { width:5px; height:5px; border-radius:50%; background:currentColor; }

/* ============================ 表格 ============================ */
.table-wrap { overflow-x:auto; }
.table { width:100%; border-collapse:collapse; font-size:13.5px; }
.table th {
  text-align:left; padding:11px 16px;
  font-size:11.5px; font-weight:650; text-transform:uppercase; letter-spacing:.5px;
  color:var(--text-muted); background:var(--bg-subtle);
  border-bottom:1px solid var(--border); white-space:nowrap;
}
.table td { padding:13px 16px; border-bottom:1px solid var(--border); vertical-align:middle; }
.table tbody tr { transition:background .12s; }
.table tbody tr:hover { background:var(--bg-subtle); }
.table tbody tr:last-child td { border-bottom:none; }

/* ============================ 空状态 ============================ */
.empty { padding:64px 24px; text-align:center; }
.empty-icon {
  width:60px; height:60px; border-radius:var(--r-xl);
  background:var(--bg-muted); color:var(--text-muted);
  display:grid; place-items:center; margin:0 auto 18px;
}
.empty-icon svg { width:28px; height:28px; }
.empty h3 { font-size:15px; font-weight:650; margin-bottom:6px; }
.empty p { font-size:13.5px; color:var(--text-muted); max-width:380px; margin:0 auto 20px; line-height:1.6; }

/* ============================ 模态框 ============================ */
.modal-mask {
  position:fixed; inset:0; z-index:200;
  background:rgba(15,23,42,.5);
  backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  animation:fadeIn .16s var(--ease);
}
.modal {
  background:var(--bg-elev); border-radius:var(--r-xl);
  box-shadow:var(--shadow-xl);
  width:100%; max-width:520px; max-height:88vh;
  display:flex; flex-direction:column;
  animation:modalIn .22s var(--ease);
}
.modal.wide { max-width:860px; }
.modal-head { padding:20px 24px; border-bottom:1px solid var(--border); display:flex; align-items:center; }
.modal-head h2 { font-size:16px; font-weight:650; }
.modal-head .close { margin-left:auto; color:var(--text-muted); font-size:20px; line-height:1; padding:4px; border-radius:var(--r-sm); }
.modal-head .close:hover { background:var(--bg-muted); color:var(--text); }
.modal-body { padding:24px; overflow-y:auto; flex:1; }
.modal-foot { padding:16px 24px; border-top:1px solid var(--border); display:flex; gap:10px; justify-content:flex-end; background:var(--bg-subtle); border-radius:0 0 var(--r-xl) var(--r-xl); }

@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes modalIn { from { opacity:0; transform:translateY(12px) scale(.98) } to { opacity:1; transform:none } }
@keyframes slideUp { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:none } }
@keyframes spin { to { transform:rotate(360deg) } }

/* ============================ Toast ============================ */
.toast-wrap {
  position:fixed; top:20px; right:20px; z-index:500;
  display:flex; flex-direction:column; gap:10px; pointer-events:none;
}
.toast {
  display:flex; align-items:flex-start; gap:11px;
  min-width:280px; max-width:420px;
  padding:13px 16px;
  background:var(--bg-elev); border:1px solid var(--border);
  border-left:3px solid var(--brand-500);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
  animation:toastIn .24s var(--ease);
  pointer-events:auto; font-size:13.5px;
}
.toast.success { border-left-color:var(--success); }
.toast.error   { border-left-color:var(--danger); }
.toast.warning { border-left-color:var(--warning); }
.toast-icon { flex-shrink:0; margin-top:1px; }
.toast-icon svg { width:17px; height:17px; }
.toast.success .toast-icon { color:var(--success); }
.toast.error .toast-icon { color:var(--danger); }
.toast.warning .toast-icon { color:var(--warning); }
.toast.info .toast-icon { color:var(--brand-500); }
.toast-body { flex:1; min-width:0; }
.toast-body b { display:block; font-weight:600; margin-bottom:1px; }
.toast-body span { color:var(--text-secondary); font-size:12.5px; word-break:break-word; }
@keyframes toastIn { from { opacity:0; transform:translateX(24px) } to { opacity:1; transform:none } }

/* ============================ 加载 ============================ */
.spinner {
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  animation:spin .7s linear infinite;
}
.spinner-dark { border-color:var(--border-strong); border-top-color:var(--brand-500); }

.progress-track { height:6px; background:var(--bg-muted); border-radius:var(--r-full); overflow:hidden; }
.progress-fill {
  height:100%; background:linear-gradient(90deg,var(--brand-500),var(--brand-400));
  border-radius:var(--r-full); transition:width .4s var(--ease);
  position:relative; overflow:hidden;
}
.progress-fill::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  animation:shimmer 1.4s infinite;
}
@keyframes shimmer { from { transform:translateX(-100%) } to { transform:translateX(100%) } }

.skeleton { background:linear-gradient(90deg,var(--bg-muted) 25%,#e8edf3 50%,var(--bg-muted) 75%);
  background-size:200% 100%; animation:skeleton 1.4s infinite; border-radius:var(--r-sm); }
@keyframes skeleton { from { background-position:200% 0 } to { background-position:-200% 0 } }

/* ============================ Tabs ============================ */
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:22px; overflow-x:auto; }
.tab {
  padding:10px 16px; font-size:13.5px; font-weight:550;
  color:var(--text-muted); border-bottom:2px solid transparent;
  margin-bottom:-1px; transition:all .16s var(--ease); white-space:nowrap;
}
.tab:hover { color:var(--text-secondary); }
.tab.active { color:var(--brand-600); border-bottom-color:var(--brand-600); }

/* ============================ 记录卡片 ============================ */
.record-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:20px; }
.record-card {
  background:var(--bg-elev); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden; cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
  display:flex; flex-direction:column;
}
.record-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--brand-200); }
.record-cover {
  height:148px; background:var(--bg-muted);
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--border);
}
.record-cover .thumb { pointer-events:none; box-shadow:0 4px 16px rgba(15,23,42,.12); }
.record-cover-empty { color:var(--text-muted); font-size:12.5px; }
.record-status {
  position:absolute; top:10px; right:10px; z-index:2;
  backdrop-filter:blur(8px); background:rgba(255,255,255,.9);
}
.record-body { padding:14px 16px; flex:1; display:flex; flex-direction:column; }
.record-title {
  font-size:14px; font-weight:600; margin-bottom:6px; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.record-meta { font-size:12px; color:var(--text-muted); display:flex; gap:10px; flex-wrap:wrap; }
.record-foot {
  padding:10px 16px; border-top:1px solid var(--border);
  display:flex; gap:6px; align-items:center; background:var(--bg-subtle);
}

/* ============================ 模板选择卡 ============================ */
.tpl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
.tpl-card {
  border:1.5px solid var(--border); border-radius:var(--r-lg);
  padding:16px; cursor:pointer; background:var(--bg-elev);
  transition:all .18s var(--ease); position:relative;
}
.tpl-card:hover { border-color:var(--brand-300); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.tpl-card.selected { border-color:var(--brand-500); background:var(--brand-50); box-shadow:0 0 0 3px rgba(53,99,246,.12); }
.tpl-card h3 { font-size:14.5px; font-weight:650; margin-bottom:5px; display:flex; align-items:center; gap:7px; }
.tpl-card p { font-size:12.5px; color:var(--text-muted); line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tpl-card .tpl-check {
  position:absolute; top:12px; right:12px; width:20px; height:20px;
  border-radius:50%; background:var(--brand-600); color:#fff;
  display:none; place-items:center; font-size:12px;
}
.tpl-card.selected .tpl-check { display:grid; }
.tpl-swatches { display:flex; gap:4px; margin-top:10px; }
.tpl-swatch { width:16px; height:16px; border-radius:4px; border:1px solid rgba(0,0,0,.06); }

/* ============================ 幻灯片预览（核心） ============================ */
.slide {
  width:960px; height:540px; position:relative; overflow:hidden;
  transform-origin:top left;
}
.slide .sh { box-sizing:border-box; }
.slide .sh-text { overflow:visible; word-break:break-word; }

.editor-stage {
  background:#e8ecf3;
  padding:28px;
  display:flex; justify-content:center;
  min-height:100%;
}
.editor-slide-wrap {
  box-shadow:var(--shadow-xl);
  position:relative; background:#fff;
  outline:2px solid transparent;
}
.editor-slide-wrap.editable { outline-color:var(--brand-300); cursor:text; }
.editor-slide-wrap.editable:hover { outline-color:var(--brand-500); }
.editor-page-no {
  position:absolute; bottom:-30px; left:50%; transform:translateX(-50%);
  font-size:12px; color:var(--text-muted); white-space:nowrap;
}

.thumb-strip {
  background:var(--bg-elev); border-right:1px solid var(--border);
  width:210px; flex-shrink:0; overflow-y:auto; padding:14px;
}
.thumb-item {
  border:2px solid transparent; border-radius:var(--r-md);
  overflow:hidden; margin-bottom:12px; cursor:pointer;
  background:var(--bg-muted); position:relative; transition:border-color .16s;
}
.thumb-item:hover { border-color:var(--border-strong); }
.thumb-item.active { border-color:var(--brand-500); }
.thumb-item .thumb { width:100%; }
.thumb-item .no {
  position:absolute; bottom:6px; right:6px; z-index:2;
  background:rgba(15,23,42,.75); color:#fff; font-size:11px;
  padding:1px 7px; border-radius:var(--r-full); backdrop-filter:blur(4px);
}
.thumb-item .thumb-inner { transform-origin:top left; }

/* ============================ 幻灯片结构树 ============================ */
.slide-tree { list-style:none; }
.slide-node {
  display:flex; align-items:center; gap:8px;
  padding:9px 12px; border-radius:var(--r-md);
  font-size:13.5px; cursor:pointer; transition:background .14s;
  border:1px solid transparent;
}
.slide-node:hover { background:var(--bg-muted); }
.slide-node.active { background:var(--brand-50); border-color:var(--brand-200); color:var(--brand-700); font-weight:600; }
.slide-node .idx {
  width:22px; height:22px; border-radius:var(--r-sm); flex-shrink:0;
  background:var(--bg-muted); color:var(--text-muted);
  display:grid; place-items:center; font-size:11px; font-weight:650;
}
.slide-node.active .idx { background:var(--brand-600); color:#fff; }
.slide-node .nm { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ============================ 时间线（详情页） ============================ */
.timeline { list-style:none; position:relative; padding-left:24px; }
.timeline::before {
  content:''; position:absolute; left:6px; top:6px; bottom:6px;
  width:2px; background:var(--border);
}
.timeline li { position:relative; padding-bottom:18px; }
.timeline li:last-child { padding-bottom:0; }
.timeline li::before {
  content:''; position:absolute; left:-22px; top:5px;
  width:9px; height:9px; border-radius:50%;
  background:var(--brand-500); border:2px solid var(--bg-elev);
  box-shadow:0 0 0 2px var(--brand-100);
}
.timeline b { display:block; font-size:13.5px; margin-bottom:2px; }
.timeline span { font-size:12px; color:var(--text-muted); }

/* ============================ 登录页 ============================ */
.auth-page {
  min-height:100vh; display:grid; grid-template-columns:1fr 1fr;
  background:var(--bg);
}
.auth-visual {
  background:linear-gradient(150deg,#1c39b6 0%,#2348e0 45%,#3563f6 100%);
  color:#fff; padding:56px;
  display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden;
}
.auth-visual::before {
  content:''; position:absolute; width:520px; height:520px; border-radius:50%;
  background:rgba(255,255,255,.07); top:-160px; right:-160px;
}
.auth-visual::after {
  content:''; position:absolute; width:340px; height:340px; border-radius:50%;
  background:rgba(255,255,255,.05); bottom:-100px; left:-80px;
}
.auth-visual > * { position:relative; z-index:1; }
.auth-logo { display:flex; align-items:center; gap:11px; margin-bottom:48px; }
.auth-logo-badge {
  width:40px; height:40px; border-radius:11px;
  background:rgba(255,255,255,.18); backdrop-filter:blur(8px);
  display:grid; place-items:center; font-weight:800; font-size:16px;
  border:1px solid rgba(255,255,255,.2);
}
.auth-headline { font-size:38px; font-weight:700; line-height:1.24; letter-spacing:-1.2px; margin-bottom:18px; }
.auth-desc { font-size:15px; opacity:.85; line-height:1.7; max-width:420px; margin-bottom:44px; }
.auth-features { display:flex; flex-direction:column; gap:16px; }
.auth-feature { display:flex; align-items:flex-start; gap:13px; font-size:14px; }
.auth-feature-ico {
  width:32px; height:32px; border-radius:9px; flex-shrink:0;
  background:rgba(255,255,255,.15); display:grid; place-items:center;
}
.auth-feature-ico svg { width:16px; height:16px; }
.auth-feature b { display:block; margin-bottom:1px; }
.auth-feature span { opacity:.78; font-size:13px; }

.auth-form-wrap { display:flex; align-items:center; justify-content:center; padding:40px; }
.auth-form { width:100%; max-width:390px; }
.auth-form h2 { font-size:25px; font-weight:700; letter-spacing:-.6px; margin-bottom:8px; }
.auth-form .lead { color:var(--text-muted); margin-bottom:30px; font-size:14px; }
.auth-switch { text-align:center; margin-top:22px; font-size:13.5px; color:var(--text-muted); }
.auth-switch a { color:var(--brand-600); font-weight:600; }
.auth-switch a:hover { text-decoration:underline; }

.auth-alert {
  background:var(--danger-bg); color:#dc2626; border:1px solid #fecaca;
  padding:11px 14px; border-radius:var(--r-md); font-size:13px;
  margin-bottom:18px; display:flex; gap:9px; align-items:flex-start;
}
.auth-alert svg { width:16px; height:16px; flex-shrink:0; margin-top:1px; }

/* ============================ 响应式 ============================ */
@media (max-width:1100px) {
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .auth-page { grid-template-columns:1fr; }
  .auth-visual { display:none; }
}
@media (max-width:820px) {
  .sidebar { transform:translateX(-100%); transition:transform .24s var(--ease); }
  .sidebar.open { transform:none; box-shadow:var(--shadow-xl); }
  .main { margin-left:0; }
  .grid-2, .grid-3 { grid-template-columns:1fr; }
  .content { padding:18px; }
  .topbar { padding:0 16px; }
  .sidebar-toggle { display:grid !important; }
  .record-grid { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
}
@media (min-width:821px) { .sidebar-toggle { display:none !important; } }

.sidebar-backdrop {
  position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:45;
  display:none; animation:fadeIn .16s;
}
.sidebar-backdrop.show { display:block; }

/* ============================ 工具类 ============================ */
.flex { display:flex; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-1 { gap:4px } .gap-2 { gap:8px } .gap-3 { gap:12px } .gap-4 { gap:16px }
.ml-auto { margin-left:auto }
.mt-0{margin-top:0}.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}
.mt-4{margin-top:16px}.mt-5{margin-top:20px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}
.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}
.text-muted { color:var(--text-muted) }
.text-secondary { color:var(--text-secondary) }
.text-sm { font-size:12.5px }
.text-xs { font-size:11.5px }
.text-lg { font-size:16px }
.fw-500 { font-weight:500 } .fw-600 { font-weight:600 } .fw-700 { font-weight:700 }
.mono { font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; font-size:12.5px }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hidden { display:none !important; }
.divider { height:1px; background:var(--border); margin:20px 0; }
.pointer { cursor:pointer }
.w-full { width:100% }

/* 动画 */
.anim-up { animation:slideUp .3s var(--ease); }
.fade-in { animation:fadeIn .2s var(--ease); }
/* ============================ 后台登录页（深色） ============================ */
.auth-page.admin-entry .auth-visual {
  background:linear-gradient(150deg,#0F172A 0%,#1E293B 50%,#334155 100%);
}
.auth-page.admin-entry .auth-form-wrap {
  background:#F8FAFC;
}

/* 侧栏「只读」角标（权限=只读的栏目） */
.nav-item .nav-ro {
  margin-left: auto;
  font-size: 10px;
  line-height: 1.5;
  padding: 0 6px;
  border-radius: 99px;
  background: rgba(148, 163, 184, .22);
  color: #94A3B8;
  flex-shrink: 0;
}

/* 后台 tab 上的「只读」角标 */
.tab .tab-ro { margin-left: 6px; font-size: 10px; padding: 0 5px; border-radius: 99px; background: rgba(148,163,184,.22); color: #64748B; }
/* 权限分配面板 */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 14px; }
.perm-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 6px 8px; border: 1px solid var(--line,#E3E8F0); border-radius: 8px; }
.perm-row .perm-name { flex: 1; min-width: 0; }
.perm-row .perm-name small { display: block; color: #94A3B8; font-size: 10.5px; font-weight: 400; }
.perm-row select { width: 84px; padding: 3px 6px; font-size: 12px; }
.perm-row.lv-edit { border-color: #A7D7C5; background: #F3FBF7; }
.perm-row.lv-view { border-color: #C7D9F0; background: #F5F9FF; }
.perm-none { font-size: 11px; color: #94A3B8; }

/* 权限行：选择「跟随」时的样式 */
.perm-row.lv-inherit { border-color:#DDD6FE; background:#FAF8FF; }
.perm-row.lv-inherit .perm-name small { color:#8B7FD4; }

/* ── 登录页文案编辑（系统设置）───────────────────── */
.lp-acc { border: 1px solid var(--border, #E3E8F0); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.lp-acc > summary { cursor: pointer; padding: 9px 13px; font-size: 12.5px; font-weight: 600; color: #334155;
    background: #F8FAFC; list-style: none; user-select: none; display: flex; align-items: center; gap: 8px; }
.lp-acc > summary::-webkit-details-marker { display: none; }
.lp-acc > summary::before { content: '▸'; font-size: 10px; color: #94A3B8; transition: transform .15s; }
.lp-acc[open] > summary::before { transform: rotate(90deg); }
.lp-acc > summary:hover { color: #2563EB; }
.lp-acc .lp-n { margin-left: auto; font-size: 11px; font-weight: 400; color: #94A3B8; }
.lp-body { padding: 12px 13px 4px; border-top: 1px solid var(--border, #E3E8F0); }

/* ── 个人中心 ───────────────────────────────────── */
.pf-stat { text-align:center; padding:14px 8px; border:1px solid var(--border,#E3E8F0); border-radius:10px; background:#FAFBFD; }
.pf-stat b { display:block; font-size:20px; font-weight:700; color:var(--text); line-height:1.3;
    font-variant-numeric:tabular-nums; }
.pf-stat span { display:block; font-size:11.5px; color:var(--text-muted,#94A3B8); margin-top:3px; }

/* 侧栏底部用户区：可点击进个人中心 */
.sidebar-user { position:relative; }
.sidebar-user-link { display:flex; align-items:center; gap:9px; flex:1; min-width:0; color:inherit; text-decoration:none;
    padding:6px; margin:-6px; border-radius:8px; transition:background .15s; }
.sidebar-user-link:hover { background:rgba(148,163,184,.14); }
.sidebar-user.on .sidebar-user-link { background:rgba(37,99,235,.16); }

/* ── 编辑器加载遮罩（切页/载入时覆盖画布区，不影响页面其他部分）──────── */
.ve-loading {
  position:absolute; inset:0; z-index:40;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:rgba(255,255,255,.72); backdrop-filter:blur(1px);
  font-size:12.5px; color:var(--text-secondary,#64748B); border-radius:var(--r-md);
}
.ve-loading .spinner { border-color:rgba(37,99,235,.25); border-top-color:var(--brand-500,#2563EB); }
/* 兜底：若父级没有 position:relative，遮罩会错位，故显式给画布容器定位 */
#veStage, #veCanvas { position:relative; }

/* ══════════════════════════════════════════════════════════
   Token 用量表格（看板 · 各用户消耗与额度）
   ══════════════════════════════════════════════════════════ */
.uw-title { font-size:13.5px; font-weight:600; color:var(--text); }
.uw-hint  { font-size:11.5px; color:var(--text-muted,#94A3B8); }

.uw-wrap {
  border:1px solid var(--border,#E3E8F0); border-radius:12px; overflow:hidden;
  background:var(--bg,#fff);
}
.uw-table { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.uw-table thead th {
  position:sticky; top:0; z-index:2;
  background:#F7F9FC; color:var(--text-secondary,#64748B);
  font-size:11.5px; font-weight:600; letter-spacing:.02em;
  padding:10px 14px; text-align:left; white-space:nowrap;
  border-bottom:1px solid var(--border,#E3E8F0);
}
.uw-table tbody td {
  padding:11px 14px; vertical-align:middle;
  border-bottom:1px solid #F1F4F9;
}
/* 斑马纹 + 悬停高亮 */
.uw-table tbody tr:nth-child(even) { background:#FBFCFE; }
.uw-table tbody tr:hover { background:#F0F6FF; }
.uw-table tbody tr:last-child td { border-bottom:0; }

/* 数值列：右对齐 + 等宽数字，避免跳动 */
.uw-c-num, .uw-table td.uw-num {
  text-align:right; font-variant-numeric:tabular-nums;
  white-space:nowrap; color:var(--text-secondary,#475569);
}
.uw-table td.uw-num strong { color:var(--text); font-weight:600; }
.uw-table td.uw-num.uw-today strong { color:#1D4ED8; }
.uw-table td.uw-num.uw-over  strong { color:var(--danger,#DC2626); }

/* 用户列 */
.uw-user { display:flex; align-items:center; gap:10px; min-width:0; }
.uw-avatar {
  width:32px; height:32px; border-radius:9px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600; color:#fff;
  background:linear-gradient(135deg,#6366F1,#8B5CF6);
}
.uw-avatar.is-admin { background:linear-gradient(135deg,#0EA5E9,#2563EB); }
.uw-user-info { min-width:0; }
.uw-user-name {
  font-weight:600; color:var(--text); line-height:1.35;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.uw-user-sub {
  font-size:11px; color:var(--text-muted,#94A3B8); line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* 额度条 */
.uw-quota { min-width:210px; }
.uw-quota-top {
  display:flex; align-items:baseline; justify-content:space-between;
  gap:8px; margin-bottom:5px;
}
.uw-quota-num {
  font-size:12px; font-weight:600; font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.uw-quota-bar {
  height:6px; border-radius:99px; background:#EDF1F6; overflow:hidden;
}
.uw-quota-fill { height:100%; border-radius:99px; transition:width .3s ease; }
.uw-quota-note {
  margin-top:5px; font-size:11px; color:var(--text-muted,#94A3B8); line-height:1.5;
  display:flex; align-items:center; gap:5px; flex-wrap:wrap;
}
.uw-dot { width:6px; height:6px; border-radius:99px; flex:0 0 auto; }

/* 无额度状态 */
.uw-none {
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; color:var(--text-muted,#94A3B8);
}

/* 操作列 */
.uw-c-act { width:1%; white-space:nowrap; text-align:right; }
.uw-table td.uw-act { text-align:right; }

/* 数值列对齐修正：
   .uw-table thead th（优先级 0,1,2）会压过 .uw-c-num（0,1,0）导致表头左对齐、数值右对齐，
   上下错位。这里用更高优先级把表头一并右对齐，列头正好压在数字右边缘上方。 */
.uw-table thead th.uw-c-num,
.uw-table tbody td.uw-num { text-align:right; }

/* ══════════ AI 服务商卡片（系统设置）══════════ */
.prov-card {
  border:1px solid var(--border,#E3E8F0); border-radius:12px;
  padding:14px 15px; margin-bottom:12px; background:var(--bg,#fff);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.prov-card.active {
  border-color:var(--success,#059669);
  box-shadow:0 0 0 1px var(--success,#059669) inset;
  background:linear-gradient(180deg,#F0FDF4,#fff 42%);
}
.prov-card .spacer { flex:1; }

/* ══════════ 拖拽上传区域 ══════════ */
.file-drop-zone {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--bg-subtle);
  cursor: pointer;
  transition: all .2s ease;
  flex: 1;
  max-width: 420px;
  min-width: 260px;
  user-select: none;
}
.file-drop-zone:hover,
.file-drop-zone.drag-over {
  border-color: var(--brand-400);
  background: var(--brand-50);
}
.file-drop-zone.has-file {
  border-style: solid;
  border-color: var(--success, #10b981);
  background: linear-gradient(135deg, #f0fdf4 0%, #fff 100%);
}
.file-drop-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.file-drop-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: color .2s;
}
.file-drop-zone:hover .file-drop-icon,
.file-drop-zone.has-file .file-drop-icon {
  color: var(--brand-500);
}
.file-drop-zone.has-file .file-drop-icon {
  color: var(--success, #10b981);
}
.file-drop-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-drop-zone.has-file .file-drop-text {
  color: var(--success, #10b981);
}
.file-drop-hint {
  font-size: 12px;
  color: var(--text-muted);
}
.file-drop-zone.has-file .file-drop-hint {
  color: var(--text-secondary);
}

/* ============================ 手机端（≤640px）============================ */
@media (max-width:640px) {
  .content { padding:12px; }
  .content-narrow { max-width:none; }
  .card-head { padding:13px 14px; flex-wrap:wrap; gap:8px; }
  .card-head h2 { font-size:14.5px; }
  .card-body { padding:14px; }
  .card-body.tight { padding:10px; }

  .topbar { padding:0 12px; gap:8px; }
  .topbar h1 { font-size:14.5px; }
  .topbar .sub { display:none; }
  .topbar-actions { gap:6px; }
  .topbar-actions .btn { padding:0 10px; }
  .topbar-actions .btn span { display:none; }

  .grid-2, .grid-3, .grid-4, .grid-auto { grid-template-columns:1fr; }
  .record-grid { grid-template-columns:1fr; gap:14px; }
  .record-cover { height:132px; }
  .stat-value { font-size:23px; }

  .modal { max-width:calc(100vw - 20px); }
  .modal.wide { max-width:calc(100vw - 20px); }
  .modal-body { padding:16px; }
  .modal-foot { padding:12px 16px; flex-wrap:wrap; gap:8px; }
  .modal-foot .btn { flex:1; }

  .toast-wrap { left:12px; right:12px; top:12px; }
  .toast { min-width:0; max-width:none; }

  .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .table { min-width:560px; }
  .uw-table { min-width:640px; }

  .btn { height:36px; padding:0 13px; }
  .btn-sm { height:29px; padding:0 10px; }
  .btn-icon { width:32px; }
  .input, .textarea, .select { height:38px; }

  .tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:1px; }
  .tab { padding:9px 12px; font-size:13px; white-space:nowrap; }

  .pd-steps { flex-direction:column; gap:8px; }
  .pd-step { min-width:0; }
  .pd-preview { flex-direction:column; }
  .pd-prev-col { min-width:0; }

  .auth-form-wrap { padding:20px 16px; }
  .auth-form { max-width:100%; }
}

/* ══════════ 操作日志表格（后台）══════════ */
.tag-admin { background:#F3E8FF; color:#7C3AED; }
.tag-tpl   { background:#CFFAFE; color:#0E7490; }
.tag-muted { background:var(--bg-muted); color:var(--text-secondary); }

.log-who { display:flex; align-items:center; gap:8px; min-width:0; }
.log-who-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.log-avatar {
  width:24px; height:24px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; font-size:11px; font-weight:650; color:#fff;
  background:linear-gradient(135deg,var(--brand-400),var(--brand-600));
  box-shadow:0 1px 3px rgba(35,72,224,.25);
}
.log-avatar.ghost { background:var(--bg-muted); color:var(--text-muted); box-shadow:none; }

.log-time { white-space:nowrap; line-height:1.35; }
.log-time-date { font-size:12.5px; color:var(--text-secondary); font-variant-numeric:tabular-nums; }
.log-time-hms  { font-size:11px; color:var(--text-muted); font-variant-numeric:tabular-nums; }

.log-detail { max-width:460px; line-height:1.5; }
.log-detail-main { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-secondary); font-size:13px; }
.log-detail-sub {
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px; color:var(--text-muted); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.log-ip { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; color:var(--text-muted); }

.log-empty { text-align:center; padding:48px 20px; color:var(--text-muted); }
.log-empty svg { width:36px; height:36px; opacity:.35; margin-bottom:10px; }
.log-empty p { font-size:13px; margin:0; }

/* ══════════════════════════════════════════════════════════
   编辑器移动端：三栏 → 纵向堆叠（画布优先，面板在下）
   适用：可视化模板编辑器(.dz-*) / 演示编辑器(.ve-*)
   ══════════════════════════════════════════════════════════ */
@media (max-width:900px) {
  .dz-wrap, .ve-wrap {
    flex-direction: column;
    gap: 12px;
    height: auto !important;
    align-items: stretch;
  }
  /* 画布区提到最前 */
  .dz-mid, .ve-mid { order: -1; height: auto; }
  /* 面板占满宽度、随页面滚动（不再内部滚动） */
  .dz-panel, .dz-panel-r, .ve-side {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }
  /* 折叠按钮在小屏同样有效：收起对应面板减少滚动 */
  .dz-wrap.hide-l .dz-panel,
  .dz-wrap.hide-r .dz-panel-r,
  .ve-wrap.hide-r .ve-side { display: none !important; }

  /* 画布舞台：给足高度、允许横向滑动查看 */
  .dz-stage, .ve-stage {
    min-height: 300px;
    max-height: 62vh;
    overflow: auto;
    padding: 12px;
    -webkit-overflow-scrolling: touch;
  }
  /* 缩放条换行居中 */
  .dz-zoom, .ve-zoom {
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px 6px;
    padding: 6px 10px;
    align-self: stretch;
  }
  /* 元素列表别太高 */
  .dz-list, .ve-side [id$="ElList"] { max-height: 230px; }
  /* 页签条横向滑动 */
  .ve-pages { padding-bottom: 6px; }
  .ve-page-tab { font-size: 12px; padding: 5px 10px; }
}

@media (max-width:560px) {
  .dz-stage, .ve-stage { min-height: 240px; padding: 10px; }
  .dz-fields { grid-template-columns: 1fr !important; }
  .dz-zoom button, .ve-zoom button { padding: 4px 9px; font-size: 12.5px; }
  .dz-sub, .ve-sub { font-size: 11px; line-height: 1.5; }
  .dz-tabs button, .ve-add button { font-size: 12.5px; padding: 5px 10px; }
  .dz-item { padding: 8px 10px; }
}

/* ══════════ 顶栏：小屏标题省略 + 操作区可横滑 ══════════ */
@media (max-width:640px) {
  .topbar { gap: 8px; }
  .topbar > div:first-of-type { min-width: 0; flex: 1 1 auto; overflow: hidden; }
  .topbar h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-actions {
    margin-left: auto;
    flex: 0 1 auto;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .topbar-actions::-webkit-scrollbar { display: none; }
  .topbar-actions .btn { flex: 0 0 auto; }
}

/* ══════════ 看板图表：小屏降低高度、柱间距收紧 ══════════ */
@media (max-width:640px) {
  #trendChart { height: 140px !important; gap: 4px !important; }
  #usageChart { height: 120px !important; gap: 3px !important; }
  .uw-quota { min-width: 0; }
  .pf-stat { padding: 10px; }
}

/* ══════════════════════════════════════════════════════════
   传统模板编辑器（#editorLayout：缩略图 + 预览 + 字段栏）
   小屏 → 纵向堆叠；缩略图转横向滚动条
   ══════════════════════════════════════════════════════════ */
@media (max-width:900px) {
  #editorLayout {
    flex-direction: column !important;
    margin: 0 !important;
    min-height: 0 !important;
    gap: 0;
  }
  /* 左：缩略图 → 顶部横向滑动条 */
  .thumb-strip {
    width: 100% !important;
    flex-direction: row !important;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 12px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    -webkit-overflow-scrolling: touch;
  }
  .thumb-strip > .text-xs { display: none; }
  #thumbList { display: flex; gap: 10px; flex: 0 0 auto !important; height: auto; }
  .thumb-item { flex: 0 0 150px; width: 150px; margin-bottom: 0 !important; }
  .thumb-item .thumb { width: 150px !important; }
  .thumb-item .thumb-inner { width: 150px !important; }
  .thumb-item .no { bottom: 4px; right: 4px; font-size: 10px; }

  /* 中：预览区 */
  .editor-stage { padding: 14px !important; min-height: 0; }

  /* 右：字段栏 → 全宽 */
  .ed-side {
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid var(--border);
    max-height: none !important;
  }
  .ed-side > div[style*="flex:1"] { overflow: visible !important; }
}

@media (max-width:560px) {
  .thumb-item { flex: 0 0 120px; width: 120px; }
  .thumb-item .thumb, .thumb-item .thumb-inner { width: 120px !important; }
  .editor-stage { padding: 10px !important; }
  .editor-page-no { bottom: -22px; font-size: 11px; }
}

/* ══════════ 手机端：弹窗改「底部弹出」（更像原生 App）══════════ */
@media (max-width:640px) {
  .modal-mask { align-items: flex-end !important; padding: 0 !important; }
  .modal, .modal.wide {
    max-width: 100% !important;
    width: 100%;
    border-radius: 18px 18px 0 0 !important;
    max-height: 90vh;
    animation: sheetUp .26s cubic-bezier(.4,0,.2,1);
  }
  .modal-head { padding: 16px 18px; }
  .modal-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}
@keyframes sheetUp {
  from { transform: translateY(18px); opacity: .65; }
  to   { transform: none; opacity: 1; }
}

/* ══════════ 触摸设备：点击反馈 + 去掉高亮灰块 ══════════ */
@media (hover: none) and (pointer: coarse) {
  * { -webkit-tap-highlight-color: transparent; }
  .btn:active { transform: scale(.975); }
  .nav-item:active { background: rgba(255,255,255,.12); }
  .record-card:active { transform: scale(.995); }
  .thumb-item:active { border-color: var(--brand-400); }
  .tab:active, .ve-page-tab:active { opacity: .85; }
}

/* ══════════ 手机端细节修补 ══════════ */
@media (max-width:640px) {
  /* 服务商卡片：去掉弹性占位，按钮紧随标题，更紧凑 */
  .prov-card { padding: 12px 13px; }
  .prov-card .spacer { display: none; }
  /* 卡片内按钮组自动换行，避免横向溢出 */
  .card-body .flex { flex-wrap: wrap; }
  /* 长网址/密钥等防溢出 */
  .mono { word-break: break-all; }
  /* 表单行内 inline 提示文字别再挤 */
  .field-hint { font-size: 11.5px; }
}

/* ══════════ 手机端：面板顺序优化（画布 → 元素/属性 → 模板/底图）══════════ */
@media (max-width:900px) {
  /* .dz-panel 是「模板 / 底图 / 示例」等设置，排在最后；属性面板紧跟画布更顺手 */
  .dz-wrap > .dz-panel   { order: 2; }
  .dz-wrap > .dz-panel-r { order: 1; }
  .dz-wrap > .dz-mid     { order: -1; }
  /* 演示编辑器同理：画布在上、侧栏在下 */
  .ve-wrap > .ve-side    { order: 1; }
  .ve-wrap > .ve-mid     { order: -1; }
}

/* 操作日志：操作人账号已删除的小标签 */
.log-del-tag {
  flex-shrink: 0;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--text-muted);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  white-space: nowrap;
}

/* ══════════ 操作日志：时间筛选工具条 ══════════ */
.log-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}
.log-filter .lf-label { font-size: 12.5px; color: var(--text-secondary); }
.log-filter .lf-tilde { font-size: 12px; color: var(--text-muted); }
.log-filter .lf-date {
  width: auto;
  height: 32px;
  padding: 4px 10px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color-scheme: light;
}
.log-filter .spacer { flex: 1 1 auto; }
.log-filter .lf-quick { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.log-filter .lf-chip {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.log-filter .lf-chip:hover { border-color: var(--brand-400); color: var(--brand-600); }
.log-filter .lf-chip.active {
  border-color: var(--brand-400);
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 600;
}
@media (max-width:640px) {
  .log-filter { padding: 10px 12px; gap: 6px; }
  .log-filter .lf-date { flex: 1 1 108px; min-width: 0; }
  .log-filter .spacer { display: none; }
  .log-filter #btnLogPurge { width: 100%; justify-content: center; }
}

/* ══════════ AI 设置：测试连接检出的模型名（可点选） ══════════ */
.prov-models {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  border: 1px dashed var(--border-strong);
}
.model-chip {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.model-chip:hover { border-color: var(--brand-400); color: var(--brand-600); }
.model-chip.active {
  border-color: var(--brand-400);
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 600;
}