:root {
  --primary: #4c8dff;
  --primary-light: #8ab4ff;
  --primary-bg: rgba(76,141,255,.14);
  --success: #2fb344;
  --warning: #f59f00;
  --danger: #d63939;
  --bg: #0a0f1c;
  --bg2: #111827;
  --bg3: #182235;
  --text: #f1f5fb;
  --text2: #a7b3c7;
  --text3: #6f7e97;
  --border: rgba(145,163,195,.16);
  --shadow: 0 18px 46px rgba(0,0,0,.2);
  --radius: 10px;
  --input-bg: #0d1525;
  --sidebar-width: 264px;
  --font-body:15px;
  --font-ui:14px;
  --font-label:13px;
  --font-caption:12px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { min-height:100%; background:var(--bg); }
body { min-height:100vh; font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif; background:var(--bg); color:var(--text); font-size:var(--font-body); line-height:1.55; font-variant-numeric:tabular-nums; }

/* ===== Login ===== */
.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px; background:radial-gradient(circle at 50% 0,rgba(76,141,255,.18),transparent 38%),var(--bg); }
.login-card { width:min(420px,100%); padding:40px; text-align:left; background:rgba(17,24,39,.94); border:1px solid var(--border); border-radius:16px; box-shadow:0 30px 90px rgba(0,0,0,.42); }
.login-brand { display:flex; align-items:center; gap:10px; margin-bottom:30px; color:var(--text2); font-size:var(--font-caption); font-weight:800; letter-spacing:1.4px; }
.brand-mark { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; color:#fff; background:linear-gradient(145deg,#4c8dff,#7950f2); box-shadow:0 10px 28px rgba(76,141,255,.28); font-size:var(--font-caption); font-weight:800; letter-spacing:.3px; }
.login-card h2 { margin-bottom:7px; color:var(--text); font-size:22px; font-weight:700; }
.login-sub { margin-bottom:28px; color:var(--text3); font-size:13px; line-height:1.6; }
.form-group { margin-bottom:16px; text-align:left; }
.form-group label { display:block; font-size:13px; color:var(--text2); margin-bottom:6px; font-weight:500; }
.form-group input { width:100%; min-height:40px; padding:9px 14px; border:1px solid var(--border); border-radius:6px; font-size:var(--font-ui); line-height:1.2; outline:none; transition:border .2s; background:var(--input-bg); color:var(--text); }
.form-group input:focus { border-color:var(--primary); }
.form-group input::placeholder { color:var(--text3); }
.error-msg { color:var(--danger); font-size:13px; margin-bottom:12px; text-align:left; }

/* ===== Buttons ===== */
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:6px 14px; border:none; border-radius:6px; cursor:pointer; font-family:inherit; font-size:var(--font-ui); font-weight:500; line-height:1.2; transition:all .2s; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-light); }
.btn-success { background:var(--success); color:#fff; }
.btn-danger { background:var(--danger); color:#fff; }
.btn-outline { background:transparent; border:1px solid var(--border); color:var(--text2); }
.btn-outline:hover { border-color:var(--primary); color:var(--primary); }
.btn-sm { min-height:32px; padding:5px 10px; font-size:var(--font-label); }
.btn-block { width:100%; min-height:40px; padding:8px 14px; font-size:var(--font-body); margin-top:8px; }
.btn:disabled { opacity:0.5; cursor:not-allowed; }
.btn-logout { display:inline-flex; align-items:center; min-height:32px; padding:5px 9px; background:none; border:none; color:var(--text3); cursor:pointer; font-size:var(--font-label); }
.btn-logout:hover { color:var(--danger); }

/* ===== Layout ===== */
#app { min-height:100vh; }
.admin-shell { display:flex; }
.sidebar { position:fixed; inset:0 auto 0 0; z-index:100; display:flex; flex-direction:column; width:var(--sidebar-width); padding:0; color:var(--text2); background:linear-gradient(180deg,#111827,#0c1321); border:0; border-right:1px solid var(--border); box-shadow:18px 0 48px rgba(0,0,0,.16); transition:transform .25s ease; }
.sidebar-header { display:flex; align-items:center; justify-content:space-between; min-height:74px; padding:16px 18px; border-bottom:1px solid var(--border); }
.brand-lockup { display:flex; align-items:center; gap:11px; min-width:0; }
.brand-lockup .brand-mark { width:38px; height:38px; flex:0 0 auto; }
.brand-lockup strong,.brand-lockup small { display:block; }
.brand-lockup strong { color:var(--text); font-size:14px; letter-spacing:.3px; }
.brand-lockup small { margin-top:2px; color:var(--text3); font-size:var(--font-caption); letter-spacing:.5px; }
.environment-chip { padding:4px 7px; border:1px solid rgba(76,141,255,.25); border-radius:6px; color:#77a8ff; background:rgba(76,141,255,.08); font-size:var(--font-caption); font-weight:800; letter-spacing:.7px; }
.sidebar-nav { flex:1; padding:8px 10px 22px; overflow-y:auto; }
.sidebar-nav::-webkit-scrollbar { width:3px; }
.sidebar-nav::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
.nav-section { margin:0; padding:0; }
.nav-group-label {
  margin:0;
  padding:17px 10px 7px;
  border:0;
  color:#596881;
  font-size:var(--font-caption);
  font-weight:800;
  line-height:1.2;
  letter-spacing:1.4px;
  text-transform:uppercase;
}
.nav-item { position:relative; display:flex; align-items:center; gap:11px; width:100%; min-height:44px; margin:2px 0; padding:9px 10px; border:1px solid transparent; border-radius:8px; color:#9aa7bb; background:transparent; cursor:pointer; font:inherit; font-size:var(--font-ui); text-align:left; text-decoration:none; transition:color .15s,border-color .15s,background .15s; }
.nav-item:hover,.nav-item:focus-visible { color:#f3f6fb; background:rgba(123,145,182,.08); text-decoration:none; }
.nav-item.active { color:#fff; border-color:rgba(76,141,255,.2); background:linear-gradient(90deg,rgba(76,141,255,.22),rgba(76,141,255,.06)); box-shadow:inset 3px 0 #4c8dff; }
.nav-icon { display:grid; place-items:center; width:20px; height:20px; flex:0 0 auto; color:#7f8da5; font-size:var(--font-ui); font-weight:700; }
.nav-item.active .nav-icon { color:#8ab4ff; }
.main-area {
  width:calc(100% - var(--sidebar-width));
  min-width:0;
  min-height:100vh;
  margin-left:var(--sidebar-width);
  flex:0 0 calc(100% - var(--sidebar-width));
  background:transparent;
}
.top-bar { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; min-height:64px; padding:9px 28px; background:rgba(10,15,28,.88); border:0; border-bottom:1px solid var(--border); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.top-bar-context,.top-bar-right { display:flex; align-items:center; gap:12px; }
.top-bar-context small,.top-bar-context strong,.admin-identity small,.admin-identity strong { display:block; }
.top-bar-context small { color:var(--text3); font-size:var(--font-caption); font-weight:800; letter-spacing:1px; }
.top-bar-context strong { margin-top:2px; color:var(--text); font-size:var(--font-body); }
.top-bar-right { color:var(--text3); font-size:var(--font-label); }
.system-state { display:flex; align-items:center; gap:7px; margin-right:8px; color:#95a2b7; font-size:var(--font-caption); }
.system-state i { width:7px; height:7px; border-radius:50%; background:var(--success); box-shadow:0 0 10px rgba(47,179,68,.65); }
.admin-avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:#dce9ff; background:rgba(76,141,255,.16); border:1px solid rgba(76,141,255,.24); font-size:var(--font-caption); font-weight:800; }
.admin-identity { min-width:72px; }
.admin-identity small { color:var(--text3); font-size:var(--font-caption); }
.admin-identity strong { margin-top:1px; color:var(--text2); font-size:var(--font-label); }
.menu-toggle { display:none; width:34px; height:34px; padding:0; border:1px solid var(--border); border-radius:8px; color:var(--text); background:rgba(255,255,255,.03); cursor:pointer; font-size:18px; }
.content-wrap { width:100%; max-width:1920px; min-width:0; margin:0 auto; padding:26px 30px 44px; }

/* ===== Cards / Stats ===== */
.page-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:24px; }
.page-header h2 { font-size:18px; font-weight:600; }
.page-header p { color:var(--text3); font-size:var(--font-ui); margin-top:3px; }
.page-header-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px; margin-bottom:24px; }
.stat-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:16px; }
.stat-card .label { font-size:var(--font-label); color:var(--text3); margin-bottom:6px; }
.stat-card .value { font-size:24px; font-weight:700; color:var(--text); }
.stat-card .sub { font-size:var(--font-caption); color:var(--text3); margin-top:4px; }
.card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin-bottom:20px; color:var(--text); }
.card h3 { font-size:16px; margin-bottom:16px; color:var(--text); }

/* ===== Table ===== */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:var(--font-body); }
thead { background:var(--bg3); }
th, td { padding:10px 14px; text-align:center; border-bottom:1px solid var(--border); white-space:nowrap; }
td { color:var(--text)!important; }
th { font-weight:600; color:var(--text3); font-size:var(--font-caption); text-transform:uppercase; letter-spacing:.4px; }
tr:hover td { background:rgba(255,255,255,0.02); }
.users-table .user-row-vip > td,
.users-table .user-row-vip > td :not(.btn):not(.badge) {
  color:#f4d37a!important;
  text-shadow:0 1px 8px rgba(244,211,122,.2);
}
.badge { display:inline-flex; align-items:center; min-height:26px; padding:3px 10px; border-radius:20px; font-size:var(--font-label); font-weight:500; }
.badge-success { background:rgba(0,184,148,0.15); color:#00B894; }
.badge-warning { background:rgba(253,203,110,0.15); color:#FDCB6E; }
.badge-danger { background:rgba(225,112,85,0.15); color:#E17055; }
.badge-info { background:var(--primary-bg); color:var(--primary-light); }

/* ===== Form / Modal ===== */
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.form-row.full { grid-template-columns:1fr; }
.form-control { width:100%; min-height:40px; padding:8px 12px; border:1px solid var(--border); border-radius:6px; font-size:var(--font-ui); line-height:1.2; outline:none; background:var(--input-bg); color:var(--text); }
.form-control:focus { border-color:var(--primary); }
.form-control::placeholder { color:var(--text3); }
select.form-control { appearance:auto; background:var(--input-bg); color:var(--text); }
textarea.form-control { min-height:80px; resize:vertical; background:var(--input-bg); color:var(--text); }
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:1000; }
.modal-box { background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:28px; width:520px; max-width:90vw; max-height:85vh; overflow-y:auto; }
.modal-box h3 { margin-bottom:20px; font-size:16px; color:var(--text); }

/* ===== Industrial Wide Modal — full-screen overlay for long content ===== */
.modal-box-wide {
  background:var(--bg2); border:1px solid var(--border); border-radius:12px;
  padding:36px 40px; width:94vw; max-width:1500px; max-height:94vh; overflow-y:auto;
}
.modal-box-wide h3 {
  margin-bottom:28px; font-size:20px; font-weight:700; color:var(--text);
  letter-spacing:0.3px; border-bottom:2px solid var(--primary); padding-bottom:14px;
}
.modal-box-wide label {
  display:block; font-size:14px; font-weight:600; color:var(--primary-light);
  margin-bottom:8px; letter-spacing:0.2px;
}

/* ===== .input class (used in industrial pages) ===== */
.input {
  width:100%; padding:10px 14px; border:1px solid var(--border); border-radius:6px;
  font-size:14px; outline:none; background:var(--input-bg); color:var(--text);
  transition:border .2s; line-height:1.6;
}
.input:focus { border-color:var(--primary); box-shadow:0 0 0 2px rgba(108,92,231,0.15); }
.input::placeholder { color:var(--text3); }
select.input { appearance:auto; padding:8px 12px; }
textarea.input { min-height:100px; resize:vertical; font-size:14px; line-height:1.7; }

/* ===== Industrial page-level design tokens ===== */
.i-section { margin-bottom:24px; }
.i-section-title {
  font-size:15px; font-weight:700; color:var(--primary-light);
  margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:8px;
}
.i-field { margin-bottom:16px; }
.i-field > label {
  display:block; font-size:14px; font-weight:600; color:var(--primary-light);
  margin-bottom:8px;
}
.i-field textarea {
  width:100%; padding:12px 14px; background:var(--bg3); color:var(--text);
  border:1px solid var(--border); border-radius:8px; font-family:monospace;
  font-size:14px; line-height:1.7; resize:vertical; outline:none; min-height:120px;
}
.i-field textarea:focus { border-color:var(--primary); box-shadow:0 0 0 2px rgba(108,92,231,0.15); }
.i-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.i-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.i-grid-4 { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:12px; }
.i-meta { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; font-size:13px; }
.i-meta-item { background:var(--bg3); padding:10px 12px; border-radius:6px; }
.i-meta-item b { display:block; color:var(--text2); font-size:var(--font-label); text-transform:uppercase; letter-spacing:0.4px; margin-bottom:4px; }
.i-meta-item span { color:var(--text); font-size:14px; font-weight:600; }

/* ===== Toast ===== */
.toast { position:fixed; top:24px; right:24px; padding:12px 24px; border-radius:6px; color:#fff; font-size:14px; z-index:9999; animation:slideIn .3s; }
.toast-success { background:var(--success); }
.toast-error { background:var(--danger); }
.toast-info { background:var(--primary); }
@keyframes slideIn { from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1} }

/* ===== Pagination ===== */
.pagination { display:flex; justify-content:center; align-items:center; gap:8px; margin-top:20px; }
.pagination button { display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:5px 10px; border:1px solid var(--border); background:var(--bg2); border-radius:6px; cursor:pointer; font-size:var(--font-label); line-height:1.2; color:var(--text2); }
.pagination button.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.pagination button:disabled { opacity:.4; cursor:not-allowed; }
.pagination span { font-size:13px; color:var(--text3); }

/* ===== Toolbar ===== */
.toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-wrap:wrap; gap:12px; }
.search-box { display:flex; align-items:center; gap:8px; }
.search-box input { width:240px; background:var(--input-bg); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:7px 12px; outline:none; }
.search-box input:focus { border-color:var(--primary); }
.filter-group { display:flex; gap:8px; align-items:center; }
.filter-group select { padding:7px 12px; background:var(--input-bg); color:var(--text); border:1px solid var(--border); border-radius:6px; }

/* ===== Filter Bar (商城管理筛选栏) ===== */
.filter-bar {
  display:flex; align-items:center; gap:12px; margin-bottom:20px;
  padding:14px 18px; background:var(--bg2); border:1px solid var(--border);
  border-radius:12px; flex-wrap:wrap;
}
.filter-bar .filter-label {
  font-size:13px; color:var(--text3); font-weight:600; white-space:nowrap;
}
.filter-bar .filter-select {
  appearance:none; -webkit-appearance:none;
  padding:8px 36px 8px 14px; font-size:13px; font-weight:500;
  background:var(--input-bg); color:var(--text);
  border:1px solid var(--border); border-radius:8px;
  cursor:pointer; outline:none; transition:all .2s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
.filter-bar .filter-select:hover { border-color:var(--primary); }
.filter-bar .filter-select:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(99,102,241,0.15); }
.filter-bar .filter-select option { background:var(--bg2); color:var(--text); padding:8px; }
.filter-bar .filter-divider {
  width:1px; height:20px; background:var(--border); margin:0 4px;
}

/* ===== Analytics Grid ===== */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:0; }
.chart-box { position:relative; height:240px; }

/* ===== Funnel ===== */
.funnel { padding:8px 0; }
.funnel-row { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.funnel-row-label { width:64px; flex-shrink:0; font-size:13px; color:var(--text2); text-align:right; font-weight:500; }
.funnel-row-bar { flex:1; height:32px; background:var(--bg3); border-radius:6px; overflow:hidden; position:relative; }
.funnel-row-fill { height:100%; border-radius:6px; transition:width .5s ease; }
.funnel-row-num { width:52px; flex-shrink:0; font-size:15px; font-weight:700; color:var(--text); }
.funnel-row-pct { width:60px; flex-shrink:0; font-size:var(--font-label); color:var(--text3); }

/* ===== Retention Ring ===== */
.retention-grid { display:flex; justify-content:space-around; padding:16px 0; }
.retention-item { text-align:center; }
.retention-ring { width:72px; height:72px; border-radius:50%; background:conic-gradient(var(--primary) calc(var(--pct)*3.6deg), var(--bg3) 0); display:flex; align-items:center; justify-content:center; margin:0 auto 6px; }
.retention-ring span { font-size:14px; font-weight:700; color:var(--text); background:var(--bg2); width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.retention-label { font-size:var(--font-label); color:var(--text2); }
.retention-sub { font-size:var(--font-caption); color:var(--text3); }

/* ===== Sys Tabs ===== */
.sys-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:24px; }
.sys-tab { display:inline-flex; align-items:center; min-height:36px; padding:7px 14px; font-size:var(--font-ui); color:var(--text3); cursor:pointer; border-bottom:2px solid transparent; transition:all .15s; }
.sys-tab:hover { color:var(--text2); }
.sys-tab.active { color:var(--primary-light); border-bottom-color:var(--primary); }
.sys-panel { padding:4px 0; }

/* ===== Harness 管理 ===== */
.hn-tabs { display:flex; gap:4px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:4px; margin-bottom:16px; }
.hn-tab { min-height:36px; padding:7px 14px; border-radius:6px; font-size:var(--font-ui); font-weight:500; color:var(--text3); cursor:pointer; transition:all .15s; user-select:none; display:flex; align-items:center; gap:8px; }
.hn-tab:hover { color:var(--text); background:rgba(255,255,255,0.04); }
.hn-tab.active { color:#fff; background:var(--primary); }
.hn-tab .hn-dot { width:8px; height:8px; border-radius:50%; }
.hn-tab .hn-count { font-size:var(--font-caption); opacity:.8; }
.hn-sub { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.hn-pill { display:inline-flex; align-items:center; min-height:32px; padding:5px 10px; border-radius:20px; font-size:var(--font-label); color:var(--text3); background:var(--bg2); border:1px solid var(--border); cursor:pointer; transition:all .15s; user-select:none; }
.hn-pill:hover { color:var(--text); border-color:var(--text3); }
.hn-pill.active { color:#fff; background:var(--primary); border-color:var(--primary); }
.hn-pill .pill-count { font-size:var(--font-caption); opacity:.8; margin-left:4px; }
.hn-list { display:flex; flex-direction:column; gap:8px; }
.hn-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:border-color .15s; }
.hn-card:hover { border-color:var(--text3); }
.hn-card.editing { border-color:var(--primary); }
.hn-card-head { display:flex; align-items:center; padding:14px 18px; cursor:pointer; gap:12px; }
.hn-card-head .hn-name { font-size:14px; font-weight:500; flex:1; }
.hn-card-head .hn-key { font-size:var(--font-caption); color:var(--text3); font-family:monospace; background:var(--bg3); padding:2px 8px; border-radius:4px; }
.hn-card-head .hn-preview { font-size:var(--font-label); color:var(--text3); max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hn-card-head .hn-status { margin-left:auto; }
.hn-card-head .hn-arrow { color:var(--text3); font-size:var(--font-caption); margin-left:8px; transition:transform .2s; }
.hn-card.editing .hn-arrow { transform:rotate(90deg); }
.hn-editor { display:none; padding:0 18px 18px; border-top:1px solid var(--border); }
.hn-card.editing .hn-editor { display:block; padding-top:18px; }
.hn-editor .hn-meta-row { display:flex; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.hn-editor .hn-meta-item { font-size:var(--font-label); }
.hn-editor .hn-meta-item span { color:var(--text3); }
.hn-prompt-label { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.hn-prompt-label label { font-size:13px; font-weight:500; color:var(--text2); }
.hn-prompt-label .hn-char-count { font-size:var(--font-caption); color:var(--text3); }
.hn-prompt-textarea { width:100%; min-height:200px; max-height:500px; background:var(--bg3); border:1px solid var(--border); border-radius:6px; padding:14px; font-family:monospace; font-size:13px; line-height:1.7; color:var(--text); resize:vertical; outline:none; transition:border-color .15s; }
.hn-prompt-textarea:focus { border-color:var(--primary); }
.hn-actions { display:flex; gap:8px; margin-top:14px; justify-content:flex-end; }
.hn-actions .btn { min-width:80px; }

/* ===== Tabler-aligned visual system ===== */
body {
  background:
    radial-gradient(circle at 82% -10%, rgba(78,118,255,.16), transparent 34%),
    radial-gradient(circle at 18% 105%, rgba(31,210,170,.08), transparent 30%),
    #070A12;
  font-variant-numeric: tabular-nums;
}
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:-1;
  opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:48px 48px;
}
.page-header h2 { font-size:22px; letter-spacing:-.3px; }
.btn { border-radius:9px; letter-spacing:.1px; }
.btn-primary { background:linear-gradient(135deg,#6574F7,#5965D8); box-shadow:0 8px 24px rgba(91,105,226,.2); }
.btn-primary:hover { background:linear-gradient(135deg,#7885FF,#6672E6); transform:translateY(-1px); }
.btn-outline { border-color:rgba(139,154,193,.23); background:rgba(255,255,255,.025); }
.btn-outline:hover { border-color:rgba(130,145,255,.65); color:#C9D0FF; background:rgba(106,122,243,.08); }
.btn:focus-visible,.nav-item:focus-visible,.sys-tab:focus-visible,.mc-range button:focus-visible { outline:2px solid #8894FF; outline-offset:2px; }
.card,.stat-card {
  background:linear-gradient(150deg,rgba(20,27,45,.9),rgba(13,18,31,.94));
  border-color:rgba(132,151,195,.14); box-shadow:0 20px 50px rgba(0,0,0,.16);
}
.card { border-radius:14px; }
.stat-card { border-radius:12px; }
thead { background:rgba(114,133,177,.07); }
th { color:#71809C; }
th,td { border-bottom-color:rgba(130,151,197,.12); }
tr:hover td { background:rgba(104,124,184,.045); }
.form-control,.input,.form-group input {
  border-color:rgba(130,151,197,.2); background:rgba(5,9,18,.56); border-radius:9px;
}
.form-control:focus,.input:focus,.form-group input:focus { border-color:#7180F3; box-shadow:0 0 0 3px rgba(113,128,243,.13); }
.modal-overlay { background:rgba(1,4,10,.76); backdrop-filter:blur(10px); }
.modal-box,.modal-box-wide { background:linear-gradient(155deg,#151C2E,#0D1322); border-color:rgba(137,155,201,.22); box-shadow:0 34px 100px rgba(0,0,0,.55); }

.mc-page-head {
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  margin-bottom:20px; padding:8px 2px 4px;
}
.mc-page-copy { max-width:760px; }
.mc-eyebrow { margin-bottom:8px; color:#8190FF; font-size:var(--font-caption); font-weight:800; letter-spacing:1.5px; }
.mc-page-copy h2 { font-size:28px; line-height:1.18; letter-spacing:-.7px; }
.mc-page-copy p { margin-top:8px; color:#7E8BA5; line-height:1.65; }
.mc-head-actions { display:flex; align-items:center; gap:10px; }
.mc-range { display:flex; padding:3px; border:1px solid rgba(130,151,197,.16); border-radius:10px; background:rgba(6,10,19,.55); }
.mc-range button { min-height:32px; border:0; border-radius:7px; padding:5px 10px; color:#8794AA; background:transparent; cursor:pointer; font-size:var(--font-label); line-height:1.2; }
.mc-range button.active { color:#F4F7FF; background:rgba(102,119,240,.24); box-shadow:inset 0 0 0 1px rgba(128,143,255,.23); }
.mc-refresh { white-space:nowrap; }
.mc-tabs { gap:4px; padding:4px; margin-bottom:20px; border:1px solid rgba(130,151,197,.13); border-radius:12px; background:rgba(10,15,27,.6); overflow-x:auto; }
.mc-tabs .sys-tab { flex:0 0 auto; border:0; border-radius:8px; padding:9px 16px; }
.mc-tabs .sys-tab.active { background:rgba(103,120,240,.18); box-shadow:inset 0 0 0 1px rgba(126,141,255,.2); color:#DDE2FF; }

.mc-lens-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:14px; }
.mc-lens {
  position:relative; min-height:238px; overflow:hidden; padding:20px;
  border:1px solid rgba(132,151,195,.16); border-radius:16px;
  background:linear-gradient(145deg,rgba(22,29,49,.96),rgba(10,15,27,.96));
  box-shadow:0 24px 70px rgba(0,0,0,.2);
}
.mc-lens::after { content:''; position:absolute; right:-60px; bottom:-88px; width:190px; height:190px; border-radius:50%; filter:blur(4px); opacity:.14; }
.mc-lens-usage::after { background:#7180FF; }
.mc-lens-points::after { background:#31D2AA; }
.mc-lens-cost::after { background:#F1B95B; }
.mc-lens-top { display:flex; align-items:center; gap:9px; color:#9BA7BB; font-size:var(--font-label); letter-spacing:.4px; }
.mc-lens-index { display:grid; place-items:center; width:25px; height:25px; border-radius:7px; background:rgba(255,255,255,.055); color:#BAC3D7; font-weight:800; }
.mc-lens-label { font-weight:700; }
.mc-live-dot { margin-left:auto; width:7px; height:7px; border-radius:50%; background:#31D2AA; box-shadow:0 0 12px #31D2AA; }
.mc-accounting-badge { margin-left:auto; padding:4px 8px; border:1px solid rgba(142,157,197,.22); border-radius:999px; color:#8794AA; font-size:var(--font-caption); }
.mc-lens-value { margin:24px 0 17px; color:#F3F6FC; font-size:32px; font-weight:760; letter-spacing:-1.1px; }
.mc-lens-value small { color:#8794AA; font-size:var(--font-caption); font-weight:600; letter-spacing:.1px; }
.mc-lens-kpis { display:flex; flex-wrap:wrap; gap:7px 14px; color:#8794AA; font-size:var(--font-caption); }
.mc-lens-kpis span { white-space:nowrap; }
.mc-lens-kpis b { color:#C4CCDA; font-size:var(--font-label); }
.mc-lens-kpis .positive b { color:#52D9B5; }
.mc-lens-kpis .negative b { color:#F07B70; }
.mc-meter { height:3px; margin:17px 0 13px; overflow:hidden; border-radius:4px; background:rgba(255,255,255,.07); }
.mc-meter i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#6677F3,#32D4AE); }
.mc-lens p { position:relative; z-index:1; margin-top:17px; color:#8794AA; font-size:var(--font-label); line-height:1.6; }

.mc-health-strip {
  display:grid; grid-template-columns:repeat(4,minmax(135px,1fr)) auto; align-items:center; gap:0;
  margin-bottom:14px; padding:13px 16px; border:1px solid rgba(132,151,195,.13); border-radius:13px;
  background:rgba(12,17,29,.78);
}
.mc-health-strip > div { min-width:0; padding:3px 16px; border-right:1px solid rgba(132,151,195,.11); }
.mc-health-strip > div:first-child { padding-left:2px; }
.mc-health-strip b { display:block; margin:4px 0 2px; color:#DCE2EE; font-size:16px; }
.mc-health-strip small,.mc-health-label { display:block; overflow:hidden; color:#8794AA; font-size:var(--font-caption); text-overflow:ellipsis; white-space:nowrap; }
.mc-health-strip .is-healthy b { color:#52D9B5; }
.mc-health-strip .is-alert b { color:#F0BF68; }
.mc-health-strip .btn { margin-left:16px; }
.mc-data-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:14px; }
.mc-data-card { min-width:0; padding:0; overflow:hidden; }
.mc-card-head { display:flex; align-items:flex-end; justify-content:space-between; padding:18px 20px 14px; border-bottom:1px solid rgba(132,151,195,.11); }
.mc-card-head span { color:#8190FF; font-size:var(--font-caption); font-weight:800; letter-spacing:1.1px; }
.mc-card-head h3 { margin:4px 0 0; font-size:14px; }
.mc-card-head small { color:#8794AA; font-size:var(--font-caption); }
.mc-data-card .table-wrap { max-height:410px; }
.mc-data-card thead { position:sticky; top:0; z-index:2; }
.mc-governance-note { display:flex; gap:14px; margin-top:14px; padding:17px 18px; border:1px solid rgba(111,127,234,.22); border-radius:13px; background:linear-gradient(90deg,rgba(93,108,220,.1),rgba(13,18,31,.7)); }
.mc-note-mark { flex:0 0 26px; display:grid; place-items:center; width:26px; height:26px; border-radius:8px; background:rgba(111,127,234,.2); color:#AEB8FF; font-family:Georgia,serif; font-weight:700; }
.mc-governance-note h3 { margin:0 0 5px; font-size:13px; }
.mc-governance-note p { color:#929EB2; font-size:var(--font-label); line-height:1.7; }
.mc-partial-alert {
  margin:-7px 0 16px; padding:11px 14px; border:1px solid rgba(240,191,104,.24);
  border-radius:10px; color:#A99470; background:rgba(83,61,25,.16); font-size:12px;
}
.mc-partial-alert b { color:#E8C989; }
.mc-unavailable { border-left:4px solid var(--warning); }
.mc-unavailable p { margin:9px 0 14px; color:var(--text2); line-height:1.7; }

/* ===== Model control · three independent ledgers ===== */
.mc-ledger-shell { display:flex; flex-direction:column; gap:14px; min-width:0; }
.mc-ledger-title {
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:3px 2px 1px;
}
.mc-ledger-title > div { min-width:0; }
.mc-ledger-title span:first-child { color:#8190FF; font-size:var(--font-caption); font-weight:800; letter-spacing:1.1px; }
.mc-ledger-title h3 { margin:5px 0 6px; color:#EDF1F8; font-size:20px; letter-spacing:-.25px; }
.mc-ledger-title p { max-width:900px; color:#929EB2; font-size:var(--font-label); line-height:1.65; }
.mc-ledger-badge {
  flex:0 0 auto; padding:6px 9px; border:1px solid rgba(137,154,196,.2);
  border-radius:999px; font-size:12px!important; letter-spacing:.7px!important;
}
.mc-ledger-badge-api { color:#AEB7FF!important; background:rgba(113,128,255,.1); }
.mc-ledger-badge-points { color:#74E2C4!important; background:rgba(49,210,170,.09); }
.mc-ledger-badge-cost { color:#F1C878!important; background:rgba(241,185,91,.09); }

.mc-ledger-filters {
  display:grid; grid-template-columns:repeat(4,minmax(145px,1fr)); gap:10px 12px;
  padding:15px; border:1px solid rgba(132,151,195,.14); border-radius:13px;
  background:rgba(10,15,27,.72);
}
.mc-ledger-filters label { min-width:0; color:#929EB2; font-size:var(--font-label); font-weight:650; letter-spacing:.1px; }
.mc-ledger-filters .form-control { width:100%; height:40px; margin-top:6px; padding:8px 10px; font-size:var(--font-label); }
.mc-ledger-filter-actions { display:flex; align-items:flex-end; gap:8px; min-height:53px; }
.mc-ledger-filter-actions .btn { min-width:78px; }

.mc-compat-note,.mc-semantics-note {
  padding:11px 14px; border:1px solid rgba(111,127,234,.2); border-radius:10px;
  color:#9BA7BB; background:rgba(82,98,198,.08); font-size:var(--font-label); line-height:1.65;
}
.mc-compat-note b,.mc-semantics-note b { color:#C3CBDF; }
.mc-semantics-note { border-color:rgba(49,210,170,.18); background:rgba(29,128,107,.07); }
.mc-semantics-note code { color:#7FE1C6; }
.mc-economic-warning {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:13px 15px; border:1px solid rgba(241,185,91,.34); border-radius:11px;
  color:#A68E67; background:linear-gradient(90deg,rgba(117,78,20,.2),rgba(41,31,20,.11));
  font-size:var(--font-label); line-height:1.55;
}
.mc-economic-warning b { color:#F0C978; font-size:var(--font-label); }

.mc-ledger-table { min-width:0; padding:0; overflow:hidden; }
.mc-ledger-table .table-wrap { max-height:620px; overflow:auto; }
.mc-ledger-table table { min-width:1320px; }
.mc-ledger-table thead { position:sticky; top:0; z-index:3; background:#111827; }
.mc-ledger-table th { padding:11px 10px; font-size:12px; letter-spacing:.2px; }
.mc-ledger-table td { max-width:270px; padding:11px 10px; color:#B8C1D0; font-size:13px; vertical-align:top; }
.mc-ledger-table td small { color:#8794AA; font-size:12px; line-height:1.55; }
.mc-ledger-table code { color:#B7C1D8; font-size:12px; overflow-wrap:anywhere; white-space:normal; }
.mc-cell-primary { text-align:left!important; }
.mc-cell-detail { min-width:230px; text-align:left!important; white-space:normal!important; line-height:1.55; }
.mc-muted { color:#8794AA; font-size:12px; }
.mc-value-positive { color:#52D9B5!important; }
.mc-value-negative { color:#F07B70!important; }

.mc-record-type,.mc-event-semantics {
  display:inline-flex; align-items:center; max-width:100%; padding:4px 7px;
  border:1px solid rgba(134,151,194,.18); border-radius:999px;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:12px;
  overflow-wrap:anywhere; white-space:normal;
}
.mc-record-type.is-attempt { color:#B5BEFF; border-color:rgba(113,128,255,.28); background:rgba(113,128,255,.09); }
.mc-record-type.is-disposition { color:#7DDCC3; border-color:rgba(49,210,170,.26); background:rgba(49,210,170,.08); }
.mc-event-semantics { color:#91DCC8; }
.mc-event-semantics.is-uncertain { color:#F0C978; border-color:rgba(241,185,91,.3); background:rgba(241,185,91,.08); }

.mc-ledger-pager {
  display:flex; align-items:center; justify-content:flex-end; gap:12px;
  padding:3px 2px 0; color:#8794AA; font-size:var(--font-label);
}
.mc-ledger-pager span { margin-right:auto; }
.mc-ledger-pager b { color:#C2CAD8; }
.mc-ledger-pager .btn:disabled { opacity:.38; cursor:not-allowed; }
.mc-ledger-empty {
  display:grid; justify-items:center; gap:6px; min-height:230px; padding:48px 24px;
  border:1px dashed rgba(132,151,195,.2); border-radius:14px; background:rgba(12,17,29,.52);
  text-align:center;
}
.mc-ledger-empty-mark { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.04); color:#65728A; font-size:20px; }
.mc-ledger-empty h3 { margin-top:5px; color:#C2CAD8; font-size:14px; }
.mc-ledger-empty p { max-width:560px; color:#8794AA; font-size:var(--font-label); line-height:1.65; }
.mc-ledger-dependency { padding:22px; border-left:4px solid #F1B95B; }
.mc-ledger-dependency .mc-dependency-tag { color:#E0B96F; font-size:var(--font-caption); font-weight:800; letter-spacing:1.1px; }
.mc-ledger-dependency h3 { margin:8px 0 7px; font-size:16px; }
.mc-ledger-dependency p { max-width:850px; margin:7px 0 12px; color:#929EB2; font-size:var(--font-label); line-height:1.65; }
.mc-ledger-dependency code { display:inline-block; padding:6px 8px; border-radius:7px; color:#C4CCDA; background:rgba(0,0,0,.2); font-size:var(--font-caption); }

@media (max-width: 1280px) {
  .mc-lens-grid { grid-template-columns:1fr 1fr; }
  .mc-lens:last-child { grid-column:1 / -1; min-height:210px; }
  .mc-data-grid { grid-template-columns:1fr; }
  .mc-health-strip { grid-template-columns:repeat(2,1fr); gap:10px; }
  .mc-health-strip > div { border-right:0; padding:4px 8px; }
  .mc-health-strip .btn { margin:4px 8px; }
  .mc-ledger-filters { grid-template-columns:repeat(3,minmax(145px,1fr)); }
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .main-area { width:100%; margin-left:0; flex-basis:100%; }
  .menu-toggle { display:block; }
  .system-state { display:none; }
  .content-wrap { padding:20px 14px 34px; }
  .mc-page-head { align-items:flex-start; flex-direction:column; }
  .mc-head-actions { width:100%; justify-content:space-between; }
  .mc-lens-grid { grid-template-columns:1fr; }
  .mc-lens:last-child { grid-column:auto; }
  .mc-health-strip { grid-template-columns:1fr 1fr; }
  .mc-health-strip .btn { grid-column:1 / -1; margin:4px 0 0; }
  .mc-ledger-title,.mc-economic-warning { align-items:flex-start; flex-direction:column; }
  .mc-ledger-filters { grid-template-columns:1fr 1fr; }
  .mc-ledger-filter-actions { align-items:center; min-height:auto; }
  .mc-ledger-pager { flex-wrap:wrap; justify-content:space-between; }
  .mc-ledger-pager span { flex:1 0 100%; margin:0; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .form-row { grid-template-columns:1fr; }
}

@media (max-width: 480px) {
  .mc-range button { padding:7px 8px; }
  .mc-lens-value { font-size:27px; }
  .mc-health-strip { grid-template-columns:1fr; }
  .mc-ledger-filters { grid-template-columns:1fr; }
  .mc-ledger-filter-actions { display:grid; grid-template-columns:1fr 1fr; }
  .mc-ledger-filter-actions .btn { width:100%; }
  .stats-grid { grid-template-columns:1fr; }
}

/* ===== Analytics detail alert ===== */
.analytics-data-alert {
  margin:0 0 16px;
  padding:12px 14px;
  border:1px solid rgba(245,159,0,.28);
  border-left:3px solid var(--warning);
  border-radius:8px;
  color:#D9C18F;
  background:rgba(245,159,0,.08);
  font-size:var(--font-label);
  line-height:1.6;
}
.analytics-data-alert b { color:#F5CF7A; }