@charset "UTF-8";

/* ============================================
   招财-私域转化大师 | 墨绿白 · 玻璃质感
   Inspired by DONGFENG UI Style Guide
   Design Language: Glassmorphism + 墨绿White
   ============================================ */

/* ---- CSS Variables ---- */
:root {
  /* 墨绿主色 */
  --green-deep: #0d1f17;
  --green-dark: #132a1e;
  --green-mid: #1a3a2a;
  --green-surface: #1f4532;
  --green-primary: #10b981;
  --green-emerald: #059669;
  --green-light: #34d399;
  --green-pale: #6ee7b7;

  /* 内容区暖白背景（与雌黄色侧栏协调） */
  --bg-page: #f5f0e8;
  --bg-card: #ffffff;
  --bg-card-hover: #faf8f5;
  --bg-table-hover: #f3f0eb;
  --bg-input: #ffffff;
  --border: #e4ddd2;
  --border-light: #f0ebe3;
  --border-focus: #10b981;

  /* 文字（浅色背景用） */
  --text: #1e2330;
  --text-primary: #1e2330;
  --text-secondary: #5a6072;
  --text-dim: #8b90a0;
  --text-muted: #b0b5c3;

  /* 侧栏深色（保持不变） */
  --glass-sidebar: rgba(5,15,12,0.95);

  /* 阴影（浅色背景适配） */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.08);
  --shadow-glow: 0 0 15px rgba(16,185,129,0.15);

  /* 功能色 */
  --success: #10b981;
  --success-bg: #ecfdf5;
  --error: #ef4444;
  --error-bg: #fef2f2;
  --warning: #f59e0b;
  --warning-bg: #fffbeb;
  --info: #3b82f6;
  --info-bg: #eff6ff;

  /* 渐变 */
  --gradient-primary: linear-gradient(135deg, #10b981, #059669);
  --gradient-accent: linear-gradient(135deg, #34d399, #10b981);

  /* 尺寸 */
  --sidebar-w: 220px;
  --topbar-h: 56px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;

  /* 字体 */
  --font: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font);
  font-size:15px;
  line-height:1.6;
  background:var(--bg-page);
  color:var(--text);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.08);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.15)}

/* ---- Selection ---- */
::selection{background:rgba(16,185,129,0.2);color:inherit}

/* ---- Sidebar ---- */
.sidebar{
  position:fixed;left:0;top:0;bottom:0;
  width:var(--sidebar-w);z-index:100;
  background:#2a1508;
  border-right:1px solid rgba(255,255,255,0.04);
  display:flex;flex-direction:column;
}
.sidebar-header{
  padding:24px 20px 18px;
  border-bottom:1px solid rgba(255,255,255,0.04);
  display:flex;align-items:center;gap:12px;
  justify-content:center;
}
.sidebar-logo{
  width:48px;height:48px;
  border-radius:10px;
  background:var(--gradient-primary);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:22px;font-weight:700;flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.sidebar-info{line-height:1.3;text-align:center}
.sidebar-title{font-size:17px;font-weight:700;color:#0a2e1e;letter-spacing:2px}
.sidebar-ver{font-size:11px;color:rgba(10,46,30,0.6)}
.sidebar-nav{flex:1;padding:12px 10px;overflow-y:auto}
.nav-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;border-radius:var(--radius-sm);
  cursor:pointer;color:rgba(255,255,255,0.55);
  transition:all .2s;font-size:15px;font-weight:450;
  margin-bottom:3px;
}
.nav-item:hover{color:#fff;background:rgba(255,255,255,0.08)}
.nav-item.active{
  color:#fff;
  background:rgba(16,185,129,0.2);
  font-weight:600;
  border-left:3px solid var(--green-primary);
}
.nav-item svg{width:20px;height:20px;flex-shrink:0}
.nav-item.active svg{stroke-width:2}
.sidebar-footer{
  padding:14px 20px;
  border-top:1px solid rgba(255,255,255,0.04);
  font-size:12px;color:rgba(255,255,255,0.3);
}

/* ---- 金属铭牌 ---- */
.metal-plate{
  background:linear-gradient(145deg, #2a2a2a, #1a1a1a);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:8px;
  padding:8px 14px;
  text-align:center;
  width:100%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    0 4px 12px rgba(0,0,0,0.2);
}
.metal-title{
  font-size:13px;
  font-weight:700;
  letter-spacing:1px;
  background:linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1.4;
}
.metal-sub{
  font-size:10px;
  color:rgba(255,255,255,0.5);
  letter-spacing:0.5px;
  margin-top:1px;
}

/* ---- Topbar ---- */
.topbar{
  position:fixed;top:0;left:var(--sidebar-w);right:0;
  height:var(--topbar-h);z-index:90;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;
  justify-content:space-between;
  padding:0 28px;
}
.page-title{font-size:18px;font-weight:600;color:var(--text)}
.topbar-status{
  display:flex;align-items:center;gap:8px;
  font-size:13px;color:var(--text-secondary);
}
.status-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--success);display:inline-block;
  animation:statusBreathe 3s ease-in-out infinite;
}
@keyframes statusBreathe{
  0%,100%{opacity:0.6;transform:scale(1)}
  50%{opacity:1;transform:scale(1.2)}
}
.topbar-time{font-size:13px;color:var(--text-dim);font-variant-numeric:tabular-nums}

/* ---- Main Content ---- */
.main{
  position:fixed;top:var(--topbar-h);left:var(--sidebar-w);right:0;bottom:0;
  overflow-y:auto;padding:28px 32px;
  background:var(--bg-page);
  font-size:17px; /* 主页面文字放大2号（基准15→17） */
}
.main::-webkit-scrollbar{width:5px}
.page{display:none}
.page.active{display:block;animation:springIn .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes springIn{
  0%{opacity:0;transform:scale(0.95) translateY(16px)}
  60%{transform:scale(1.02) translateY(-2px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}

/* ---- Stats Cards ---- */
.stats-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:24px}

/* ---- Action Buttons Row ---- */
.actions-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.action-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:var(--radius-sm);
  background:var(--bg-card);border:1px solid var(--border);
  color:var(--text-secondary);font-size:13px;
  cursor:pointer;transition:all .2s;font-family:var(--font);
  box-shadow:var(--shadow-sm);
}
.action-btn:hover{
  border-color:var(--border-focus);color:var(--green-primary);
  background:var(--success-bg);transform:translateY(-1px);
}
.action-btn svg{width:17px;height:17px}

/* ---- Columns Layout ---- */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:1000px){.cols{grid-template-columns:1fr}}

/* ---- Cards v2 (Swishy 风格: 渐变顶条 + 光晕 + spring 动效) ---- */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.92));
  border:1px solid rgba(16,185,129,0.10);
  border-radius:14px;padding:20px 22px;
  margin-bottom:16px;
  box-shadow:0 1px 2px rgba(42,21,8,0.04), 0 8px 24px -16px rgba(16,185,129,0.12);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, border-color .35s ease;
  position:relative;
}
/* 顶部渐变细条 */
.card::before{
  content:'';position:absolute;top:0;left:12px;right:12px;height:2.5px;
  background:linear-gradient(90deg, transparent, rgba(16,185,129,0.4), transparent);
  border-radius:0 0 14px 14px;
  opacity:.55;transition:opacity .3s ease;
}
.card:hover{
  transform:translateY(-3px);
  border-color:rgba(16,185,129,0.30);
  box-shadow:0 2px 4px rgba(42,21,8,0.05), 0 20px 44px -20px rgba(16,185,129,0.28);
}
.card:hover::before{opacity:1}
.card-title{font-size:16px;font-weight:600;margin-bottom:14px;color:var(--text)}
.card-grid{display:grid;gap:16px}
.cg-auto{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.cg-2{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.cg-4{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

/* ---- 卡片入场动画 (stagger) ---- */
@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.card-in{animation:cardIn .5s cubic-bezier(.34,1.56,.64,1) both}

/* ---- 品牌卡片 v2 ---- */
.brand-card{
  overflow:hidden;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
}
.brand-card:hover{transform:translateY(-4px)}
.brand-card .brand-avatar{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.brand-card:hover .brand-avatar{transform:scale(1.12) rotate(-6deg)}

/* ---- 统计卡片 v2: 角落光斑 + 数字强调 ---- */
.stat{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.92));
  border:1px solid rgba(16,185,129,0.10);
  border-radius:14px;padding:20px;
  box-shadow:0 1px 2px rgba(42,21,8,0.04), 0 8px 24px -16px rgba(16,185,129,0.12);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
}
.stat::after{
  content:'';position:absolute;right:-24px;top:-24px;width:96px;height:96px;
  background:radial-gradient(circle, rgba(16,185,129,0.14), transparent 70%);
  border-radius:50%;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
.stat:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(42,21,8,0.05), 0 20px 44px -20px rgba(16,185,129,0.26)}
.stat:hover::after{transform:scale(1.8)}
.stat-num{font-size:34px;font-weight:650;line-height:1.2;color:var(--text);font-variant-numeric:tabular-nums}
.stat-label{font-size:12px;color:var(--text-dim);margin-top:4px;font-weight:500;letter-spacing:.3px}

/* ---- Strategy Card ---- */
.strategy-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px 18px;
  box-shadow:var(--shadow-sm);
  transition:all .2s;
}
.strategy-card:hover{border-color:var(--border-focus);box-shadow:var(--shadow)}
.strategy-card .top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.strategy-card .name{font-size:14px;font-weight:600;margin-bottom:6px;color:var(--text)}
.strategy-card .meta{font-size:12px;color:var(--text-dim)}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 20px;border-radius:var(--radius-sm);
  border:none;font-size:14px;font-weight:500;
  cursor:pointer;font-family:var(--font);
  transition:all .25s cubic-bezier(.34,1.56,.64,1);
}
.btn-primary{
  background:var(--gradient-primary);color:#fff;
  box-shadow:0 4px 16px rgba(16,185,129,0.25);
}
.btn-primary:hover{
  box-shadow:0 6px 24px rgba(16,185,129,0.4);
  transform:translateY(-1px);
}
.btn-primary:active{transform:scale(0.97)}
.btn-ghost{
  background:transparent;color:var(--text-secondary);
  border:1px solid var(--border);
}
.btn-ghost:hover{background:var(--bg-card-hover);border-color:var(--border-focus);color:var(--green-primary)}
.btn-sm{padding:5px 12px;font-size:12px;gap:4px}

/* ---- Tags ---- */
.tag{
  display:inline-flex;align-items:center;
  padding:2px 10px;border-radius:4px;
  font-size:11px;font-weight:500;
}
.tag-cyan{background:var(--info-bg);color:var(--info)}
.tag-purple{background:#f5f3ff;color:#8b5cf6}
.tag-green{background:var(--success-bg);color:var(--success)}
.tag-gold{background:var(--warning-bg);color:var(--warning)}
.tag-red{background:var(--error-bg);color:var(--error)}
.tag-pink{background:#fdf2f8;color:#ec4899}
.tag-dim{background:var(--bg-table-hover);color:var(--text-dim)}
.tag-blue{background:var(--info-bg);color:var(--info)}

/* ---- Tables ---- */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{
  text-align:left;padding:10px 14px;
  font-size:11px;font-weight:600;color:var(--text-dim);
  text-transform:uppercase;letter-spacing:.4px;
  border-bottom:1px solid var(--border);
  background:var(--bg-table-hover);
}
td{
  padding:10px 14px;font-size:14px;
  color:var(--text-secondary);
  border-bottom:1px solid var(--border-light);
}
tr:hover td{background:var(--bg-table-hover);color:var(--text)}

/* ---- Progress Bars ---- */
.progress{height:5px;border-radius:3px;background:var(--glass-quiet);overflow:hidden}
.progress-fill{
  height:100%;border-radius:3px;
  background:var(--gradient-primary);
  transition:width .6s cubic-bezier(.34,1.56,.64,1);
}

/* ---- Tabs ---- */
.tab{
  padding:7px 16px;border-radius:var(--radius-sm);
  font-size:13px;cursor:pointer;color:var(--text-secondary);
  background:transparent;border:none;
  font-family:var(--font);transition:all .15s;
  font-weight:450;
}
.tab:hover{color:var(--green-primary);background:var(--success-bg)}
.tab.active{color:#fff;background:var(--gradient-primary);font-weight:500;box-shadow:var(--shadow-glow)}

/* ---- Modal ---- */
.modal-overlay{
  position:fixed;inset:0;z-index:999;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transition:all .3s;
}
.modal-overlay.active{opacity:1;visibility:visible}
.modal{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  min-width:440px;max-width:580px;max-height:80vh;
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--shadow-lg);
  transform:scale(.95);transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.modal-overlay.active .modal{transform:scale(1)}
.modal-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--border);
}
.modal-hd h3{font-size:16px;font-weight:600;color:var(--text-primary)}
.modal-close{
  background:none;border:none;color:var(--text-dim);
  font-size:24px;cursor:pointer;padding:2px 6px;line-height:1;
  transition:color .15s;border-radius:4px;
}
.modal-close:hover{color:var(--text);background:var(--bg-table-hover)}
.modal-bd{padding:22px;overflow-y:auto;flex:1}
.modal-ft{
  display:flex;justify-content:flex-end;gap:8px;
  padding:16px 22px;border-top:1px solid var(--border);
}

/* ---- Login Page ---- */
.login-page{
  position:fixed;inset:0;z-index:10000;
  display:flex;align-items:center;justify-content:center;
  background:#1a0e08;
  overflow:hidden;
}
.login-page.hide{display:none}
#loginCanvas{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;
}
.login-card{
  position:relative;z-index:1;
  background:rgba(30,18,12,0.85);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:20px;
  padding:40px 36px 32px;
  width:380px;
  text-align:center;
  box-shadow:0 24px 80px rgba(0,0,0,0.6), 0 0 40px rgba(16,185,129,0.05);
}
.login-logo{
  width:auto;height:64px;
  margin-bottom:16px;
  border-radius:8px;
}
.login-brand{
  font-size:18px;font-weight:700;
  letter-spacing:2px;
  background:linear-gradient(135deg,#fbbf24,#f59e0b,#d97706);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:4px;
}
.login-desc{
  font-size:12px;color:rgba(255,255,255,0.4);
  letter-spacing:1px;
  margin-bottom:28px;
}
.login-form{text-align:left}
.login-field{margin-bottom:18px}
.login-field label{
  font-size:12px;color:rgba(255,255,255,0.5);
  margin-bottom:6px;display:block;font-weight:500;
}
.login-field input{
  width:100%;padding:12px 16px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  color:#fff;font-size:14px;
  outline:none;transition:all .3s;
  font-family:var(--font);
}
.login-field input:focus{
  border-color:rgba(16,185,129,0.3);
  box-shadow:0 0 0 3px rgba(16,185,129,0.08);
  background:rgba(255,255,255,0.08);
}
.login-field input::placeholder{color:rgba(255,255,255,0.2)}
.login-error{
  font-size:12px;color:#ef4444;
  margin-bottom:12px;display:none;text-align:center;
}
.login-btn{
  width:100%;padding:12px;
  background:linear-gradient(135deg,#10b981,#059669);
  border:none;border-radius:10px;
  color:#fff;font-size:15px;font-weight:600;
  cursor:pointer;transition:all .3s;
  font-family:var(--font);
  box-shadow:0 4px 16px rgba(16,185,129,0.2);
}
.login-btn:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(16,185,129,0.35)}
.login-btn:active{transform:scale(0.98)}
.login-btn:disabled{opacity:0.5;cursor:not-allowed}
.login-footer{
  margin-top:24px;
  font-size:11px;color:rgba(255,255,255,0.2);
  letter-spacing:0.5px;
}

/* ---- Toast ---- */
.toast-wrap{
  position:fixed;top:20px;right:20px;left:auto;transform:none;
  z-index:9999;display:flex;flex-direction:column;gap:8px;
  pointer-events:none;
}
.toast{
  display:flex;align-items:center;gap:10px;
  padding:12px 22px;border-radius:var(--radius-sm);
  background:#fff;border:1px solid var(--border);
  color:var(--text);font-size:13px;
  box-shadow:var(--shadow-md);
  pointer-events:auto;
  animation:toastIn .4s cubic-bezier(.34,1.56,.64,1);min-width:280px;
}
.toast.dismiss{animation:toastOut .25s ease forwards}
.toast.ok{border-left:3px solid var(--success)}
.toast.err{border-left:3px solid var(--error)}
.toast.info{border-left:3px solid var(--info)}
.toast.warn{border-left:3px solid var(--warning)}
@keyframes toastIn{
  0%{transform:translateX(100%) scale(0.8);opacity:0}
  60%{transform:translateX(-5%) scale(1.02)}
  100%{transform:translateX(0) scale(1);opacity:1}
}
@keyframes toastOut{to{opacity:0;transform:translateX(100%)}}

/* ---- Forms ---- */
input,select,textarea{
  font-family:var(--font);font-size:13px;
  padding:9px 14px;border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--bg-input);
  color:var(--text);
  outline:none;transition:border-color .2s, box-shadow .2s;
  width:100%;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--border-focus);
  box-shadow:0 0 0 3px rgba(16,185,129,0.1);
}
input::placeholder{color:var(--text-muted)}
label{
  font-size:12px;color:var(--text-secondary);
  margin-bottom:5px;font-weight:500;display:block;
}
.form-group{margin-bottom:16px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ---- Empty State ---- */
.empty{padding:48px 20px;text-align:center;color:var(--text-tertiary)}

/* ---- Loading Screen ---- */
.loading{
  position:fixed;inset:0;z-index:9999;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  background:var(--bg-page);
  transition:opacity .5s ease;
}
.loading.hide{opacity:0;pointer-events:none}
.loading-ring{
  width:36px;height:36px;
  border-radius:50%;
  border:3px solid rgba(16,185,129,0.1);
  border-top-color:var(--green-primary);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.icon-spin{display:inline-block;animation:spin .8s linear infinite}
.loading-txt{margin-top:20px;font-size:14px;color:var(--text-tertiary)}

/* ---- Panel ---- */
.panel{
  background:var(--glass-resting);
  backdrop-filter:blur(20px) saturate(1.2);
  border:1px solid rgba(16,185,129,0.06);
  border-radius:var(--radius);
  padding:16px 18px;
  box-shadow:0 4px 16px rgba(0,0,0,0.2);
}

/* ---- Page Loading Overlay ---- */
.page-loading{
  display:flex;align-items:center;justify-content:center;
  padding:60px 20px;color:var(--text-dim);font-size:14px;gap:8px;
}
.page-loading::before{
  content:'';width:20px;height:20px;
  border-radius:50%;
  border:2px solid var(--border);
  border-top-color:var(--green-primary);
  animation:spin .8s linear infinite;
}

/* ---- Responsive ---- */
@media(max-width:1200px){
  .stats-row{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .main{padding:20px}
}
@media(max-width:768px){
  .sidebar{width:56px}
  .sidebar-header{padding:12px 8px}
  .sidebar-nav{padding:8px 6px}
  .nav-item{padding:8px;justify-content:center}
  .nav-item span{display:none}
  .nav-item svg{width:22px;height:22px}
  .metal-plate{display:none}
  .sidebar-footer{display:none}
  .main{left:56px;padding:16px}
  .topbar{left:56px;padding:0 16px}
  .cols{grid-template-columns:1fr}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .card-grid.cg-2,.card-grid.cg-4{grid-template-columns:1fr}
}

/* ---- Utility ---- */
.flex-between{display:flex;justify-content:space-between;align-items:center}
.mb-8{margin-bottom:8px}
.mb-12{margin-bottom:12px}
.mb-16{margin-bottom:16px}
.mt-8{margin-top:8px}
.mt-16{margin-top:16px}
.text-dim{color:var(--text-tertiary)}
.text-sm{font-size:12px}
.text-xs{font-size:11px}
.text-center{text-align:center}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- Glass Glow Border Effect ---- */
.glass-glow{position:relative}
.glass-glow::before{
  content:'';position:absolute;inset:-1px;
  border-radius:inherit;
  background:var(--gradient-primary);
  z-index:-1;opacity:0;
  transition:opacity .3s;
}
.glass-glow:hover::before{opacity:0.4}

/* ============================================================
   IP 助手悬浮球（如意形象）
   ============================================================ */
.ip-assistant{
  position:fixed;right:24px;bottom:24px;z-index:900;
  cursor:pointer;
}
.ip-assistant-avatar{
  width:76px;height:76px;object-fit:contain;
  filter:drop-shadow(0 6px 16px rgba(16,185,129,0.35));
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  animation:ipFloat 3.2s ease-in-out infinite;
}
.ip-assistant-avatar:hover{transform:scale(1.12) rotate(-4deg)}
@keyframes ipFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
/* 打招呼泡泡 */
.ip-bubble{
  position:absolute;right:92px;bottom:16px;
  background:#fff;border:1px solid rgba(16,185,129,0.2);
  border-radius:12px;padding:12px 14px;
  width:240px;box-shadow:0 8px 30px rgba(42,21,8,0.12);
  opacity:0;transform:translateY(10px) scale(.95);pointer-events:none;
  transition:opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.ip-bubble::after{
  content:'';position:absolute;right:-7px;top:18px;
  width:12px;height:12px;background:#fff;
  border-right:1px solid rgba(16,185,129,0.2);border-top:1px solid rgba(16,185,129,0.2);
  transform:rotate(45deg);
}
.ip-assistant:hover .ip-bubble,
.ip-assistant.open .ip-bubble{
  opacity:1;transform:translateY(0) scale(1);pointer-events:auto;
}
.ip-bubble-txt{font-size:13px;color:var(--text);line-height:1.6;margin-bottom:8px}
.ip-bubble-actions{display:flex;gap:6px;flex-wrap:wrap}
.ip-bubble-actions .btn{padding:4px 10px;font-size:12px}
/* 欢迎横幅形象 */
.ip-hero{flex-shrink:0;width:96px;height:96px;object-fit:contain;animation:ipFloat 3.2s ease-in-out infinite}
/* 空状态大拇指 */
.ip-empty{
  text-align:center;padding:28px 0;
}
.ip-empty img{width:72px;height:72px;object-fit:contain;opacity:.75;margin-bottom:8px}


/* ============================================================
   深色赛博玻璃主题 v3（参考定价对比设计）
   玻璃拟态 + 彩色发光 + 双层渐变边框
   ============================================================ */
:root {
  /* —— 补齐历史缺失变量（app.js 大量引用但从未定义）—— */
  --accent: #10b981;
  --accent-light: rgba(16,185,129,0.12);
  --green: #10b981;
  --green-bg: rgba(16,185,129,0.14);
  --red: #f87171;
  --gold: #fbbf24;
  --gold-bg: rgba(251,191,36,0.14);
  --cyan: #22d3ee;
  --purple: #a78bfa;
  --text-tertiary: #6b7280;
  --glass-quiet: rgba(255,255,255,0.04);
  --glass-resting: rgba(20,26,36,0.72);

  /* —— 深色画布 —— */
  --bg-page: #0a0e14;
  --bg-card: rgba(19,25,35,0.72);
  --bg-card-hover: rgba(26,33,45,0.86);
  --bg-table-hover: rgba(255,255,255,0.04);
  --bg-input: rgba(255,255,255,0.055);
  --border: rgba(255,255,255,0.09);
  --border-light: rgba(255,255,255,0.05);
  --border-focus: rgba(16,185,129,0.55);

  /* —— 浅色文字体系 —— */
  --text: #d5dae2;
  --text-primary: #f3f4f6;
  --text-secondary: #9aa3b2;
  --text-dim: #6b7280;
  --text-muted: #4b5563;

  /* —— 深投影 —— */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow: 0 4px 14px rgba(0,0,0,0.4);
  --shadow-md: 0 10px 30px -8px rgba(0,0,0,0.55);
  --shadow-lg: 0 30px 60px -15px rgba(0,0,0,0.7);
  --shadow-glow: 0 0 20px rgba(16,185,129,0.25);
  --glass-border-gradient: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.035));
}

/* —— 画布氛围光（青绿 + 微青双光斑）—— */
body{
  background:
    radial-gradient(1100px 720px at 12% -8%, rgba(16,185,129,0.11), transparent 62%),
    radial-gradient(900px 620px at 102% 104%, rgba(34,211,238,0.06), transparent 55%),
    var(--bg-page);
}

/* —— 滚动条深色适配 —— */
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12)}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.22)}
::selection{background:rgba(16,185,129,0.35);color:#fff}

/* ============================================================
   卡片 v3：深玻璃 + 双层渐变玻璃边框 + 深投影 + 发光 hover
   ============================================================ */
.card{
  background:
    linear-gradient(145deg, rgba(26,33,45,0.72), rgba(12,16,23,0.85)) padding-box,
    var(--glass-border-gradient) border-box;
  border:1px solid transparent;
  border-radius:16px;
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 30px 60px -15px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.045);
  padding:20px 22px;margin-bottom:16px;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, border-color .35s ease;
  position:relative;
}
/* 顶部发光细条（主色） */
.card::before{
  content:'';position:absolute;top:0;left:14px;right:14px;height:2px;
  background:linear-gradient(90deg, transparent, rgba(16,185,129,0.75), rgba(34,211,238,0.5), transparent);
  border-radius:0 0 14px 14px;
  opacity:.45;transition:opacity .35s ease, box-shadow .35s ease;
  box-shadow:0 0 12px rgba(16,185,129,0.35);
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 34px 70px -18px rgba(0,0,0,0.7), 0 0 34px -6px rgba(16,185,129,0.28), inset 0 1px 0 rgba(255,255,255,0.06);
}
.card:hover::before{opacity:1;box-shadow:0 0 18px rgba(16,185,129,0.6)}

/* ============================================================
   统计卡 v3：发光渐变大数字（参考价格大字风格）
   ============================================================ */
.stat{
  background:
    linear-gradient(150deg, rgba(26,33,45,0.7), rgba(12,16,23,0.85)) padding-box,
    var(--glass-border-gradient) border-box;
  border:1px solid transparent;
  border-radius:16px;
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:0 24px 50px -16px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
  padding:18px 20px;
  position:relative;overflow:hidden;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
}
.stat::after{
  content:'';position:absolute;right:-30px;top:-30px;width:110px;height:110px;
  background:radial-gradient(circle, rgba(16,185,129,0.16), rgba(34,211,238,0.05) 55%, transparent 72%);
  border-radius:50%;pointer-events:none;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
.stat:hover{transform:translateY(-3px);box-shadow:0 28px 60px -18px rgba(0,0,0,0.7), 0 0 30px -8px rgba(16,185,129,0.3)}
.stat:hover::after{transform:scale(1.9)}
.stat-num{
  font-size:36px;font-weight:300;line-height:1.15;letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg, #ffffff 20%, #10b981 120%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 14px rgba(16,185,129,0.35));
}
.stat-label{font-size:12.5px;color:var(--text-secondary);margin-top:6px;font-weight:400;letter-spacing:.4px}

/* ============================================================
   表格深色适配
   ============================================================ */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{
  text-align:left;padding:9px 10px;font-weight:500;color:var(--text-secondary);
  border-bottom:1px solid var(--border);background:rgba(255,255,255,0.03);
  font-size:12px;letter-spacing:.4px;
}
tbody td{padding:9px 10px;border-bottom:1px solid var(--border-light);color:var(--text)}
tbody tr{transition:background .15s ease}
tbody tr:hover{background:var(--bg-table-hover)}
tbody tr:last-child td{border-bottom:none}

/* ============================================================
   表单/输入深色玻璃
   ============================================================ */
input,select,textarea{
  background:var(--bg-input);border:1px solid var(--border);border-radius:10px;
  color:var(--text-primary);padding:8px 12px;font-size:14px;font-family:var(--font);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
  outline:none;
}
input::placeholder,textarea::placeholder{color:var(--text-muted)}
input:focus,select:focus,textarea:focus{
  border-color:var(--border-focus);
  box-shadow:0 0 0 3px rgba(16,185,129,0.14), 0 0 18px -6px rgba(16,185,129,0.45);
  background:rgba(255,255,255,0.08);
}
select option{background:#131923;color:var(--text-primary)}
label{color:var(--text-secondary);font-size:13px}

/* ============================================================
   按钮深色适配（主按钮保留墨绿发光）
   ============================================================ */
.btn-primary{
  background:linear-gradient(135deg, #34d399, #10b981);color:#04140e;
  border:none;border-radius:10px;font-weight:600;
  box-shadow:0 6px 20px -6px rgba(16,185,129,0.55), inset 0 1px 0 rgba(255,255,255,0.25);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 28px -8px rgba(16,185,129,0.7), 0 0 24px -6px rgba(16,185,129,0.4)}
.btn-ghost{
  background:rgba(255,255,255,0.055);color:var(--text);border:1px solid var(--border);
  border-radius:10px;transition:all .2s ease;
}
.btn-ghost:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.18);color:var(--text-primary)}

/* ============================================================
   标签/徽章：半透明彩色胶囊（参考等级标签）
   ============================================================ */
.tag{border-radius:999px;padding:2px 10px;font-size:12px;font-weight:500;display:inline-flex;align-items:center;gap:4px}
.tag-green{background:rgba(16,185,129,0.15);color:#34d399;border:1px solid rgba(16,185,129,0.25)}
.tag-red{background:rgba(248,113,113,0.14);color:#f87171;border:1px solid rgba(248,113,113,0.25)}
.tag-gold{background:rgba(251,191,36,0.14);color:#fbbf24;border:1px solid rgba(251,191,36,0.25)}
.tag-cyan{background:rgba(34,211,238,0.13);color:#22d3ee;border:1px solid rgba(34,211,238,0.25)}
.tag-purple{background:rgba(167,139,250,0.14);color:#a78bfa;border:1px solid rgba(167,139,250,0.25)}
.tag-dim{background:rgba(255,255,255,0.06);color:var(--text-secondary);border:1px solid var(--border)}

/* ============================================================
   模态框深玻璃
   ============================================================ */
.modal-overlay{background:rgba(2,5,9,0.72);backdrop-filter:blur(6px)}
.modal{
  background:
    linear-gradient(150deg, rgba(24,31,42,0.94), rgba(11,15,21,0.97)) padding-box,
    var(--glass-border-gradient) border-box;
  border:1px solid transparent;border-radius:18px;
  backdrop-filter:blur(20px) saturate(1.2);
  box-shadow:0 40px 90px -20px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.05);
}
.modal-hd{border-bottom:1px solid var(--border-light)}
.modal-hd h3{color:var(--text-primary);font-weight:600}
.modal-ft{border-top:1px solid var(--border-light)}

/* ============================================================
   Toast 深色玻璃
   ============================================================ */
.toast{
  background:
    linear-gradient(150deg, rgba(24,31,42,0.95), rgba(11,15,21,0.97)) padding-box,
    var(--glass-border-gradient) border-box;
  border:1px solid transparent;border-radius:12px;color:var(--text-primary);
  backdrop-filter:blur(14px);
  box-shadow:0 20px 50px -14px rgba(0,0,0,0.8);
}

/* ============================================================
   其他元素深色适配
   ============================================================ */
.progress{background:rgba(255,255,255,0.08);border-radius:999px;overflow:hidden}
.progress-fill{background:linear-gradient(90deg, #34d399, #10b981);box-shadow:0 0 10px rgba(16,185,129,0.5)}
code{background:rgba(255,255,255,0.08);color:#6ee7b7;padding:2px 6px;border-radius:5px;font-family:var(--font-mono)}
hr{border:none;border-top:1px solid var(--border-light)}
.page-loading{color:var(--text-secondary)}

/* 动态内联浅色块深色修正（扫码区/AI提示块等硬编码背景）
   注意: 不可用 [style*="background:#fff;"] 全局覆盖——会破坏登录二维码白底（必须白底才能扫描）
   白色背景元素已在 app.js 源头按用途分别处理（二维码保留白底 / 其他改深色玻璃） */
[style*="background:#f0fdf4"]{background:rgba(16,185,129,0.09) !important}
[style*="background:#eef0f5"]{background:rgba(255,255,255,0.07) !important}
[style*="background:#f0f2f5"]{background:rgba(255,255,255,0.05) !important}
[style*="background:var(--accent-light)"]{background:rgba(16,185,129,0.1) !important}
[style*="background:var(--bg-table-hover)"]{background:rgba(255,255,255,0.045) !important}

/* ============================================================
   主题 v3 补充：顶栏/侧栏/登录页/助手气泡 深色统一
   ============================================================ */
/* 顶栏深玻璃 */
.topbar{
  background:rgba(10,14,20,0.82);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--border);
}
.page-title{color:var(--text-primary)}

/* 侧栏配色统一为深黑绿（原深棕与画布不协调） */
.sidebar{
  background:linear-gradient(180deg, #0c1412, #080c0b 70%);
  border-right:1px solid rgba(255,255,255,0.05);
}
/* 修复：原深绿字(#0a2e1e)在深底上不可见 */
.sidebar-title{color:#e8f5f0;text-shadow:0 0 20px rgba(16,185,129,0.35)}
.sidebar-ver{color:rgba(232,245,240,0.5)}
.sidebar-header{border-bottom:1px solid rgba(255,255,255,0.05)}
.sidebar-logo{
  background:linear-gradient(135deg, #34d399, #059669);
  box-shadow:0 4px 18px -4px rgba(16,185,129,0.6), inset 0 1px 0 rgba(255,255,255,0.3);
}
.nav-item.active{
  background:linear-gradient(90deg, rgba(16,185,129,0.22), rgba(16,185,129,0.08));
  box-shadow:0 0 18px -6px rgba(16,185,129,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
  border:1px solid rgba(16,185,129,0.18);
}

/* 登录页深色玻璃 */
.login-page, #loginPage{
  background:
    radial-gradient(900px 600px at 20% 0%, rgba(16,185,129,0.14), transparent 60%),
    radial-gradient(700px 500px at 90% 100%, rgba(34,211,238,0.08), transparent 55%),
    #0a0e14;
}
.login-brand, .login-desc, .login-footer{color:var(--text)}
.login-brand{color:var(--text-primary)}

/* IP 助手气泡深玻璃 */
.ip-bubble{
  background:
    linear-gradient(150deg, rgba(24,31,42,0.94), rgba(11,15,21,0.96)) padding-box,
    var(--glass-border-gradient) border-box;
  border:1px solid transparent;
  color:var(--text-primary);
  backdrop-filter:blur(14px);
  box-shadow:0 18px 44px -14px rgba(0,0,0,0.75);
}
.ip-bubble-txt{color:var(--text-primary)}

/* 加载页 */
.loading{background:var(--bg-page)}
.loading-txt{color:var(--text-secondary)}

/* 表格内空白/说明文字兜底 */
.text-dim{color:var(--text-dim)}
.text-sm{font-size:13px}

/* 统计数字增强：更接近参考的专业大字（大字号+强发光） */
.stat-num{
  font-size:42px;
  font-weight:275;
  letter-spacing:-0.03em;
  filter:drop-shadow(0 0 16px rgba(16,185,129,0.42)) drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}