/* ============================================================
   VizLab 设计系统 v2 —— 全站统一（前端体验第一梯队改造）
   ============================================================ */

:root {
  --brand: #00FFCC; --brand-hover: #33FFDB;
  --brand-dim: rgba(0,255,204,.14); --brand-soft: rgba(0,255,204,.08);
  --brand-line: rgba(0,255,204,.35); --brand-ink: #04231D;
  --brand-glow: 0 0 14px rgba(0,255,204,.25);
  --bg-0:#0D0F13; --bg-1:#14161B; --bg-2:#1B1E26; --bg-3:#242936;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --line-3:rgba(255,255,255,.22);
  --t-1:#EDEFF3; --t-2:#98A0AC; --t-3:#5E6673;
  --ok:#3DDC84; --ok-dim:rgba(61,220,132,.12);
  --warn:#FFB020; --warn-dim:rgba(255,176,32,.12);
  --err:#FF5D5D; --err-dim:rgba(255,93,93,.12);
  --fs-10:10px; --fs-11:11px; --fs-12:12px; --fs-13:13px;
  --fs-14:14px; --fs-16:16px; --fs-20:20px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --r-sm:6px; --r:10px; --r-lg:14px; --r-xl:18px;
  --h-ctrl:36px; --h-touch:44px;
  --sh-1:0 1px 2px rgba(0,0,0,.30),0 2px 8px rgba(0,0,0,.18);
  --sh-2:0 4px 16px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.25);
  --sh-3:0 12px 40px rgba(0,0,0,.55);
  --ring:0 0 0 3px rgba(0,255,204,.18);
  --ease:cubic-bezier(.4,0,.2,1); --dur:.16s; --dur-slow:.26s;
}

html, body { background: var(--bg-0) !important; color: var(--t-1);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
::selection { background: var(--brand-dim); color: var(--t-1); }
:focus { outline: none; }
:focus-visible { box-shadow: var(--ring); border-radius: 4px; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.26); }

/* 按钮 */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:var(--h-ctrl); padding:0 16px; border:1px solid transparent; border-radius:var(--r);
  font-size:var(--fs-13); font-weight:500; cursor:pointer; font-family:inherit; letter-spacing:.01em; white-space:nowrap;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.btn:disabled { opacity:.4; cursor:not-allowed; transform:none !important; }
.btn-primary { background:var(--brand); color:var(--brand-ink); font-weight:600; box-shadow:0 2px 10px rgba(0,255,204,.22); }
.btn-primary:hover:not(:disabled) { background:var(--brand-hover); transform:translateY(-1px); box-shadow:0 4px 18px rgba(0,255,204,.32); }
.btn-primary:active:not(:disabled) { transform:translateY(0); }
.btn-secondary { background:var(--bg-2); color:var(--t-1); border-color:var(--line-2); }
.btn-secondary:hover:not(:disabled) { border-color:var(--brand-line); color:var(--brand); }
.btn-danger { background:var(--err-dim); color:var(--err); border-color:rgba(255,93,93,.35); }
.btn-danger:hover:not(:disabled) { background:rgba(255,93,93,.2); }
.btn-ghost { background:transparent; color:var(--t-2); }
.btn-ghost:hover:not(:disabled) { color:var(--t-1); background:rgba(255,255,255,.05); }
.btn-sm { height:30px; padding:0 10px; font-size:var(--fs-12); }
.btn-lg { height:46px; padding:0 24px; font-size:var(--fs-14); }
.btn .i { width:16px; height:16px; }
/* Q4: GD-VizLab .btn-del 别名 */
.btn-del { background: var(--err-dim); color: var(--err); border: 1px solid rgba(255,93,93,.35); border-radius: var(--r); height: 30px; padding: 0 10px; font-size: 12px; cursor: pointer; }
.btn-del:hover { background: rgba(255,93,93,.2); }

/* 表单 */
.form-input, .form-select, .form-textarea, .param-input, .param-select {
  width:100%; min-height:var(--h-ctrl); padding:0 12px;
  background:var(--bg-3); border:1px solid var(--line-2); border-radius:var(--r);
  color:var(--t-1); font-size:var(--fs-13); font-family:inherit;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.form-input:focus, .form-select:focus, .form-textarea:focus, .param-input:focus, .param-select:focus {
  border-color:var(--brand-line); box-shadow:var(--ring); }
.form-textarea { padding:10px 12px; resize:vertical; min-height:80px; }
.form-label, .param-label { display:block; font-size:var(--fs-12); color:var(--t-2); margin-bottom:6px; }
.form-hint { font-size:var(--fs-11); color:var(--t-3); margin-top:4px; }
.form-error { font-size:var(--fs-11); color:var(--err); margin-top:4px; }
input[type="range"] { accent-color:var(--brand); cursor:pointer; }

/* 卡片/面板 */
.card, .panel { background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; box-shadow:var(--sh-1); }
.card-title, .panel-title { font-size:var(--fs-14); font-weight:600; color:var(--t-1); }

/* 徽章 */
.badge { display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:999px; font-size:var(--fs-11); font-weight:600; }
.badge-info { background:var(--brand-dim); color:var(--brand); }
.badge-success { background:var(--ok-dim); color:var(--ok); }
.badge-warning { background:var(--warn-dim); color:var(--warn); }
.badge-danger { background:var(--err-dim); color:var(--err); }
.badge-secondary { background:rgba(255,255,255,.06); color:var(--t-2); }

/* 表格 */
.table { width:100%; border-collapse:collapse; font-size:var(--fs-12); }
.table th { background:var(--bg-2); color:var(--t-3); font-weight:600; text-align:left;
  padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap; font-size:var(--fs-11); letter-spacing:.03em; }
.table td { padding:10px 12px; border-bottom:1px solid var(--line); color:var(--t-1); }
.table tr:last-child td { border-bottom:none; }
.table tr:hover td { background:rgba(255,255,255,.02); }
.table td.num, .table th.num { text-align:right; font-variant-numeric:tabular-nums; }

/* 分页 */
.pagination { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:20px; flex-wrap:wrap; }
.pagination button { min-width:34px; height:34px; padding:0 8px; background:var(--bg-2);
  border:1px solid var(--line-2); border-radius:var(--r); color:var(--t-2); cursor:pointer; font-size:var(--fs-12); transition:all var(--dur) var(--ease); }
.pagination button:hover:not(:disabled):not(.active) { border-color:var(--brand-line); color:var(--brand); }
.pagination button.active { background:var(--brand); border-color:var(--brand); color:var(--brand-ink); font-weight:600; }
.pagination button:disabled { opacity:.35; cursor:not-allowed; }
.pagination-info { color:var(--t-3); font-size:var(--fs-12); margin-right:8px; }

/* Toast */
.toast { background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-lg); box-shadow:var(--sh-2); }
.toast-icon { flex:0 0 auto; width:20px; height:20px; display:flex; align-items:center; justify-content:center; }
.toast-icon svg { width:16px; height:16px; }
.toast.success { border-left:3px solid var(--ok); } .toast.success .toast-icon { color:var(--ok); }
.toast.error { border-left:3px solid var(--err); } .toast.error .toast-icon { color:var(--err); }
.toast.warning { border-left:3px solid var(--warn); } .toast.warning .toast-icon { color:var(--warn); }
.toast.info { border-left:3px solid var(--brand); } .toast.info .toast-icon { color:var(--brand); }

/* 弹窗（Q1: modal-overlay遮罩补全） */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 2000; animation: fadeIn .15s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal { background:var(--bg-1); border:1px solid var(--line-2); border-radius:var(--r-xl); box-shadow:var(--sh-3); }
.modal-header { border-bottom:1px solid var(--line); }
.modal-footer { border-top:1px solid var(--line); background:transparent; }
.modal.modal-danger { border-color:rgba(255,93,93,.35); }
.modal.modal-danger .modal-title { color:var(--err); }

/* 空态/加载 */
.empty-state { text-align:center; padding:48px 20px; color:var(--t-3); }
.empty-state-icon { display:flex; justify-content:center; margin-bottom:12px; color:var(--t-3); opacity:.5; }
.empty-state-icon svg { width:40px; height:40px; }
.empty-state-text { font-size:var(--fs-13); }
.loading { border:2px solid var(--brand-soft); border-top-color:var(--brand); }
.skeleton { background:linear-gradient(90deg,var(--bg-2) 25%,var(--bg-3) 50%,var(--bg-2) 75%); background-size:200% 100%; animation:skeleton 1.5s infinite; border-radius:var(--r-sm); }
@keyframes skeleton { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }

/* 导航栏 */
.navbar { position:fixed; top:0; left:0; right:0; height:52px; background:rgba(13,15,19,.82);
  backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid var(--line); display:flex; align-items:center; padding:0 20px; z-index:1000; }
.navbar-brand { font-size:15px; font-weight:700; letter-spacing:-.01em; display:inline-flex; align-items:center;
  height:32px; margin-right:20px; flex:0 0 auto; color:var(--t-1) !important; background:none !important;
  -webkit-text-fill-color:currentColor !important; }
.navbar-brand::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--brand); margin-right:8px; box-shadow:var(--brand-glow); }
.navbar-menu { display:flex; gap:2px; flex:1; min-width:0; }
.navbar-menu a { display:inline-flex !important; align-items:center !important; height:32px !important; padding:0 12px !important;
  font-size:13px; font-weight:500; line-height:1 !important; border-radius:8px !important; color:var(--t-2);
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease); }
.navbar-menu a:hover, .navbar-menu a.active { color:var(--t-1); background:rgba(255,255,255,.06); }
.navbar-user { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.navbar-user a { color:var(--t-2); font-size:13px; }
.navbar-user a:hover { color:var(--t-1); }
.role-badge { height:20px; padding:0 8px; border-radius:999px; font-size:11px; font-weight:600; border:1px solid currentColor; }
.role-badge.admin { color:var(--brand); } .role-badge.member { color:var(--ok); } .role-badge.pending { color:var(--t-2); }

/* 后台侧栏 */
.admin-layout { display:flex; min-height:calc(100vh - 52px); }
.admin-sidebar { width:190px; background:var(--bg-1); border-right:1px solid var(--line); padding:12px 8px; flex-shrink:0; }
.admin-sidebar-item { display:flex; align-items:center; gap:8px; height:36px; padding:0 12px; margin-bottom:2px;
  color:var(--t-2); cursor:pointer; border-radius:var(--r); font-size:13px;
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease); }
.admin-sidebar-item:hover { color:var(--t-1); background:rgba(255,255,255,.04); }
.admin-sidebar-item.active { color:var(--brand); background:var(--brand-dim); }
.admin-content { flex:1; padding:20px 24px; overflow-x:auto; }

/* 页头 */
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:12px; }
.page-title { font-size:var(--fs-20); font-weight:700; letter-spacing:-.01em; }
.page-subtitle { color:var(--t-2); font-size:var(--fs-13); margin-top:2px; }

/* 手机 ≤768px */
@media (max-width:768px) {
  .navbar { height:48px !important; padding:0 10px !important; }
  .navbar-brand { font-size:14px; margin-right:0; white-space:nowrap; flex-shrink:0; }
  .navbar-brand .brand-suffix { display:none !important; }
  .navbar-menu { display:none !important; }
  .navbar-user { display:none !important; }
  .btn { min-height:var(--h-touch); }
  .admin-layout { flex-direction:column; }
  .admin-sidebar { width:100%; display:flex; overflow-x:auto; padding:8px; }
  .admin-sidebar-item { white-space:nowrap; flex:0 0 auto; }
  .container { padding:14px; }
  .card, .panel { padding:14px; }
  .page-title { font-size:var(--fs-16); }
  .form-input, .form-select, .form-textarea, .param-input, .param-select, .param-num { font-size:16px !important; }
}
/* 平板 769-1024px */
@media (min-width:769px) and (max-width:1024px) {
  .navbar { padding:0 16px; }
  .page-header { flex-wrap:wrap; }
  .template-grid{ grid-template-columns:repeat(2,1fr); }
  .profile-layout{ grid-template-columns:240px minmax(0,1fr); }
  .admin-sidebar{ width:170px; }
}
/* 动态敏感降级 */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* 后台专属（从 GD-VizLab 内联块迁移） */
.tpl-status { display:inline-flex; align-items:center; gap:6px; font-size:12px; }
.tpl-status.on { color:var(--ok); } .tpl-status.off { color:var(--t-3); }
.trash-card.picked { border-color:var(--err); }
.btn-purgeall { border-color:rgba(255,93,93,.4); color:var(--err); }
.purge-mask { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:2200; display:flex; align-items:center; justify-content:center; }
.purge-panel { background:var(--bg-1); border:1px solid rgba(255,93,93,.35); border-radius:var(--r-xl); padding:20px; max-width:420px; width:90%; }
.purge-panel h3 { color:var(--err); font-size:16px; margin:0 0 10px; }
.purge-ok { background:var(--err); color:#fff; border:none; border-radius:var(--r); height:36px; padding:0 16px; font-weight:600; cursor:pointer; }

/* 参数 tab 条（手机端） */
.param-tabs{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin:0 0 10px; padding:2px 0; }
.param-tabs::-webkit-scrollbar{ display:none; }
.param-tab{ flex:0 0 auto; height:32px; min-width:56px; padding:0 14px; border-radius:999px; background:transparent; border:1px solid var(--line-2); color:var(--t-2); font-size:12px; font-family:inherit; line-height:1; cursor:pointer; white-space:nowrap; -webkit-tap-highlight-color:transparent; }
.param-tab.active{ background:var(--brand-dim); border-color:var(--brand); color:var(--brand); font-weight:600; }
#paramsList .param-group{ display:none !important; }
#paramsList .param-group.active{ display:block !important; }
#paramsList .param-group.active .param-group-body{ display:block !important; }
#miniPlayBtn{ display:none !important; }

/* SVG 图标基础样式（全站通用） */
svg.i{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }