/* ============================================================
   乐AI · Codex-Style Design System
   Fusion: Codex CLI terminal + 暗金奢华 brand identity
   ============================================================ */

:root {
  /* Brand */
  --primary: #C9A87C;
  --primary-hover: #B8976B;
  --primary-glow: rgba(201,168,124,.12);
  --primary-light: rgba(201,168,124,.06);

  /* Codex accent (cyan/teal) */
  --accent: #4ADE80;
  --accent2: #22D3EE;
  --accent-dim: rgba(74,222,128,.1);
  --accent2-dim: rgba(34,211,238,.1);

  /* Surfaces */
  --bg: #09090B;
  --bg2: #0F0F14;
  --card: #141419;
  --card2: #1A1A22;
  --card-hover: #1E1E28;
  --border: rgba(255,255,255,.05);
  --border2: rgba(255,255,255,.08);
  --border-accent: rgba(201,168,124,.15);

  /* Text */
  --text: rgba(255,255,255,.92);
  --text2: rgba(255,255,255,.62);
  --text3: rgba(255,255,255,.35);
  --text4: rgba(255,255,255,.18);

  /* Semantic */
  --success: #4ADE80;
  --warning: #FBBF24;
  --error: #F87171;
  --info: #60A5FA;

  /* Spacing & Radius */
  --radius: 8px;
  --radius-lg: 12px;
  --radius-sm: 4px;

  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Inter", sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Cascadia Code", "JetBrains Mono", monospace;

  /* Sidebar */
  --sidebar-w: 220px;
  --sidebar-bg: #0C0C11;

  /* Transitions */
  --ease: cubic-bezier(.4,0,.2,1);
}

/* === Base === */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text2);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* === Scrollbar (Codex-style thin) === */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.08); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.15); }

/* === Sidebar === */
.sidebar {
  position:fixed; left:0; top:0; bottom:0;
  width:var(--sidebar-w);
  background:var(--sidebar-bg);
  border-right:1px solid var(--border);
  z-index:100;
  display:flex; flex-direction:column;
  transition:transform .25s var(--ease);
}
.sidebar-brand {
  padding:20px 16px 16px;
  border-bottom:1px solid var(--border);
}
.sidebar-brand h1 {
  font-size:16px; font-weight:700; color:#fff;
  letter-spacing:.3px;
  font-family:var(--font-mono);
}
.sidebar-brand h1 span { color:var(--primary); }
.sidebar-brand p {
  font-size:9px; color:var(--text4);
  margin-top:3px; letter-spacing:2px;
  text-transform:uppercase;
  font-family:var(--font-mono);
}
.sidebar-nav { flex:1; overflow-y:auto; padding:8px 0; }
.nav-group { margin-bottom:4px; }
.nav-group-title {
  padding:8px 16px 4px;
  font-size:9px; color:var(--text4);
  text-transform:uppercase; letter-spacing:2px;
  font-weight:600; font-family:var(--font-mono);
}
.nav-item {
  display:flex; align-items:center; gap:8px;
  padding:7px 16px;
  color:var(--text3); text-decoration:none;
  font-size:12px; transition:all .12s;
  border-left:2px solid transparent;
  cursor:pointer;
  font-family:var(--font);
}
.nav-item:hover {
  color:var(--text2);
  background:rgba(255,255,255,.02);
}
.nav-item.active {
  color:var(--accent);
  background:var(--accent-dim);
  border-left-color:var(--accent);
  font-weight:500;
}
.nav-item .icon { width:16px; text-align:center; font-size:12px; flex-shrink:0; }
.sidebar-footer {
  padding:10px 16px;
  border-top:1px solid var(--border);
  font-size:9px; color:var(--text4);
  font-family:var(--font-mono);
  display:flex; align-items:center; gap:6px;
}
.sidebar-footer .dot {
  width:5px; height:5px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 6px rgba(74,222,128,.4);
}

/* === Main === */
.main {
  margin-left:var(--sidebar-w);
  min-height:100vh;
  transition:margin .25s var(--ease);
}

/* === Topbar === */
.topbar {
  display:flex; align-items:center; gap:12px;
  padding:10px 24px;
  border-bottom:1px solid var(--border);
  background:rgba(9,9,11,.85);
  backdrop-filter:blur(16px);
  position:sticky; top:0; z-index:50;
}
.hamburger {
  display:none; background:none; border:none;
  color:var(--text2); font-size:18px; cursor:pointer;
}
.topbar-title {
  font-size:13px; font-weight:600; color:var(--text);
  font-family:var(--font-mono);
}
.topbar-subtitle {
  font-size:10px; color:var(--text4);
  margin-left:6px; font-family:var(--font-mono);
  padding:2px 8px; border-radius:var(--radius-sm);
  background:var(--accent-dim); color:var(--accent);
}
.topbar-right { margin-left:auto; display:flex; align-items:center; gap:8px; }
.btn-chat {
  background:linear-gradient(135deg,var(--primary),#E5D4B8);
  color:#1A1A22; border:none;
  padding:5px 14px; border-radius:6px;
  font-size:11px; font-weight:600; cursor:pointer;
  transition:all .15s; font-family:var(--font-mono);
}
.btn-chat:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(201,168,124,.25); }

/* === Content === */
.content { padding:20px 24px 40px; }

/* === Stat Cards (Codex dense grid) === */
.stats-row {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px; margin-bottom:20px;
}
.stat-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 16px;
  transition:all .15s;
  position:relative; overflow:hidden;
}
.stat-card::before {
  content:""; position:absolute; top:0; left:0; right:0;
  height:2px; background:var(--primary);
  opacity:0; transition:opacity .15s;
}
.stat-card:hover {
  border-color:var(--border2);
  background:var(--card-hover);
}
.stat-card:hover::before { opacity:1; }
.stat-card .stat-icon {
  width:28px; height:28px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; margin-bottom:8px;
}
.stat-card .stat-value {
  font-size:22px; font-weight:700; color:#fff;
  line-height:1; font-family:var(--font-mono);
}
.stat-card .stat-label {
  font-size:10px; color:var(--text4);
  margin-top:4px; text-transform:uppercase;
  letter-spacing:1px; font-family:var(--font-mono);
}
.stat-card .stat-change {
  font-size:10px; margin-top:3px; font-weight:600;
  font-family:var(--font-mono);
}

/* === Charts === */
.charts-row {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:10px; margin-bottom:20px;
}
.chart-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
}
.chart-card h3 {
  font-size:11px; font-weight:600; color:var(--text2);
  margin-bottom:12px; display:flex; align-items:center; gap:8px;
  text-transform:uppercase; letter-spacing:1px;
  font-family:var(--font-mono);
}
.chart-card h3::before {
  content:""; width:2px; height:10px;
  background:var(--accent); border-radius:1px;
}
.chart-wrap { position:relative; height:180px; }
.chart-wrap canvas { width:100%!important; height:100%!important; }

/* === Function Cards (Codex compact grid) === */
.func-section { margin-bottom:20px; }
.func-section h3 {
  font-size:11px; font-weight:600; color:var(--text2);
  margin-bottom:12px; display:flex; align-items:center; gap:8px;
  text-transform:uppercase; letter-spacing:1px;
  font-family:var(--font-mono);
}
.func-section h3::before {
  content:""; width:2px; height:10px;
  background:var(--primary); border-radius:1px;
}
.func-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:8px;
}
.func-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px; cursor:pointer;
  transition:all .12s;
  text-decoration:none; display:block;
}
.func-card:hover {
  border-color:var(--border-accent);
  background:var(--card-hover);
  transform:translateY(-1px);
}
.func-card .func-icon { font-size:18px; margin-bottom:6px; }
.func-card .func-name {
  font-size:12px; font-weight:600; color:var(--text);
}
.func-card .func-desc {
  font-size:10px; color:var(--text4);
  margin-top:3px; line-height:1.4;
}

/* === Sections & Forms === */
.section {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px; margin-bottom:16px;
}
.section h3 {
  font-size:13px; font-weight:600; color:var(--text);
  margin-bottom:16px; display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono);
}
.section h3::before {
  content:""; width:2px; height:14px;
  background:var(--primary); border-radius:1px;
}
.tabs { display:flex; gap:4px; margin-bottom:16px; flex-wrap:wrap; }
.tab {
  padding:6px 14px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:6px;
  color:var(--text3); cursor:pointer;
  font-size:11px; transition:all .12s;
  font-family:var(--font-mono);
}
.tab.active {
  background:var(--accent-dim);
  color:var(--accent);
  border-color:rgba(74,222,128,.2);
  font-weight:500;
}
.form-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px; margin-bottom:16px;
}
.form-group { display:flex; flex-direction:column; gap:4px; }
.form-group label {
  font-size:10px; color:var(--text4);
  font-weight:500; font-family:var(--font-mono);
  text-transform:uppercase; letter-spacing:.5px;
}
.form-group input, .form-group select {
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:6px;
  padding:8px 10px; color:var(--text);
  font-size:12px; outline:none; width:100%;
  transition:border .15s;
  font-family:var(--font-mono);
}
.form-group input:focus, .form-group select:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 2px var(--primary-glow);
}

/* Slider */
.slider-wrap { display:flex; align-items:center; gap:8px; }
.slider-wrap input[type=range] {
  -webkit-appearance:none; flex:1;
  height:3px; background:rgba(255,255,255,.06);
  border-radius:2px; outline:none;
}
.slider-wrap input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; width:14px; height:14px;
  background:var(--primary); border-radius:50%;
  cursor:pointer;
  box-shadow:0 0 8px var(--primary-glow);
}
.slider-val {
  min-width:36px; text-align:center;
  font-weight:700; color:var(--primary);
  font-size:13px; font-family:var(--font-mono);
}

/* === Buttons === */
.btn {
  background:linear-gradient(135deg,var(--primary),#E5D4B8);
  color:#1A1A22; border:none;
  padding:9px 22px; border-radius:6px;
  font-weight:600; cursor:pointer;
  font-size:12px; transition:all .15s;
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono);
}
.btn:hover {
  transform:translateY(-1px);
  box-shadow:0 6px 20px var(--primary-glow);
}
.btn:disabled { opacity:.3; cursor:not-allowed; transform:none; }
.btn-gold { background:linear-gradient(135deg,var(--primary),#E5D4B8); color:#1A1A22; }
.btn-outline { background:transparent; border:1px solid var(--primary); color:var(--primary); }
.btn-accent { background:var(--accent-dim); color:var(--accent); border:1px solid rgba(74,222,128,.2); }

.hidden { display:none!important; }

/* Result/Policy items */
.result-box {
  background:rgba(255,255,255,.02);
  border-radius:var(--radius); padding:14px; margin-top:12px;
  border:1px solid var(--border);
}
.result-box h4 {
  font-size:12px; font-weight:600; color:var(--text);
  margin-bottom:8px; font-family:var(--font-mono);
}
.policy-item {
  background:rgba(255,255,255,.02);
  border-radius:6px; padding:12px; margin-bottom:8px;
  border-left:2px solid var(--accent);
}
.policy-item .p-name { font-size:13px; font-weight:600; color:var(--text); }
.policy-item .p-amount { font-size:12px; color:var(--primary); margin-top:2px; }
.policy-item .p-dept { font-size:10px; color:var(--text4); margin-top:2px; }
.policy-item .p-status {
  display:inline-block; padding:2px 8px; border-radius:4px;
  font-size:10px; font-weight:600; margin-top:4px;
  font-family:var(--font-mono);
}

/* === Prefill Banner === */
.prefill-banner {
  padding:10px 16px; margin-bottom:16px;
  background:var(--accent2-dim);
  border:1px solid rgba(34,211,238,.15);
  border-radius:var(--radius);
  font-size:12px; color:var(--accent2);
  display:flex; align-items:center; gap:8px;
}

/* === Mobile Responsive === */
@media(max-width:768px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .main { margin-left:0; }
  .hamburger { display:block; }
  .content { padding:14px 14px 32px; }
  .stats-row { grid-template-columns:repeat(2,1fr); gap:8px; }
  .charts-row { grid-template-columns:1fr; }
  .func-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .form-grid { grid-template-columns:1fr; }
  .stat-card { padding:12px; }
  .stat-card .stat-value { font-size:18px; }
  .nav-item { padding:6px 14px; font-size:11px; }
}

/* === Animations === */
@keyframes fadeIn {
  from { opacity:0; transform:translateY(4px); }
  to { opacity:1; transform:translateY(0); }
}
.stat-card, .func-card, .chart-card {
  animation: fadeIn .3s var(--ease) both;
}