:root {
  --radius-sm: 6px; --radius: 10px; --radius-lg: 14px;
  --shadow: 0 4px 16px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.18);
  --t: .18s ease;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace;
}
html[data-theme="dark"] {
  --bg: #0b0d12; --bg-elev: #11141b; --bg-elev-2: #161a23; --bg-hover: #1c2230;
  --border: #232a39; --border-strong: #2e3648;
  --text: #e6e9ef; --text-soft: #a8b0bf; --text-mute: #6b7385;
  --primary: #6366f1; --primary-2: #818cf8; --primary-soft: rgba(99,102,241,.16);
  --success: #22c55e; --success-soft: rgba(34,197,94,.14);
  --danger: #ef4444; --danger-soft: rgba(239,68,68,.14);
  --warn: #f59e0b; --warn-soft: rgba(245,158,11,.14);
  --info: #38bdf8; --info-soft: rgba(56,189,248,.14);
  --sidebar-bg: rgba(15,18,25,.78);
}
html[data-theme="light"] {
  --bg: #f4f6fb; --bg-elev: #fff; --bg-elev-2: #f8fafc; --bg-hover: #eef2f7;
  --border: #e6e9f0; --border-strong: #cdd3df;
  --text: #1a1d24; --text-soft: #4b5263; --text-mute: #8a93a3;
  --primary: #4f46e5; --primary-2: #6366f1; --primary-soft: rgba(79,70,229,.10);
  --success: #16a34a; --success-soft: rgba(22,163,74,.10);
  --danger: #dc2626; --danger-soft: rgba(220,38,38,.10);
  --warn: #d97706; --warn-soft: rgba(217,119,6,.10);
  --info: #0284c7; --info-soft: rgba(2,132,199,.10);
  --sidebar-bg: rgba(255,255,255,.78);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;background-image:radial-gradient(1200px 600px at 80% -10%,var(--primary-soft),transparent 60%),radial-gradient(900px 500px at -10% 100%,var(--info-soft),transparent 60%);background-attachment:fixed}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;color:inherit}
::selection{background:var(--primary-soft);color:var(--text)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--text-mute)}

.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center}
.login-card{width:380px;padding:36px;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.login-card::before{content:'';position:absolute;inset:-1px;background:linear-gradient(135deg,var(--primary),transparent 50%);opacity:.35;z-index:0}
.login-card>*{position:relative;z-index:1}
.login-logo{width:48px;height:48px;border-radius:12px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;font-weight:700;font-size:22px;box-shadow:0 6px 20px var(--primary-soft)}
.login-card h2{font-size:22px;margin-bottom:4px}
.login-card .sub{color:var(--text-mute);font-size:13px;margin-bottom:24px}
.input-group{margin-bottom:14px}
.input-group label{display:block;font-size:12px;color:var(--text-soft);margin-bottom:6px}
.input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-elev-2);color:var(--text);font-size:14px;transition:border-color var(--t),box-shadow var(--t)}
.input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.input.with-icon{padding-left:36px}
.input-wrap{position:relative}
.input-wrap .icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-mute)}
.btn-block{width:100%;padding:11px;margin-top:8px}
.login-error{padding:10px 12px;border-radius:var(--radius-sm);background:var(--danger-soft);color:var(--danger);font-size:13px;margin-bottom:12px;border:1px solid var(--danger)}

.app{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;padding:18px 14px;background:var(--sidebar-bg);backdrop-filter:blur(14px);border-right:1px solid var(--border);display:flex;flex-direction:column;gap:4px}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 18px;border-bottom:1px solid var(--border);margin-bottom:12px}
.brand-logo{width:32px;height:32px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;font-weight:700;font-size:14px}
.brand-name{font-weight:600;font-size:15px}
.brand-sub{font-size:11px;color:var(--text-mute)}
.nav-section{margin-top:12px}
.nav-section-title{font-size:11px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.08em;padding:6px 10px}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius-sm);color:var(--text-soft);cursor:pointer;user-select:none;font-size:13.5px;transition:background var(--t),color var(--t);position:relative}
.nav-item:hover{background:var(--bg-hover);color:var(--text)}
.nav-item.active{background:var(--primary-soft);color:var(--primary-2);font-weight:600}
.nav-item.active::before{content:'';position:absolute;left:-14px;top:8px;bottom:8px;width:3px;background:var(--primary);border-radius:0 2px 2px 0}
.nav-item .icon{width:18px;height:18px;flex-shrink:0}
.nav-item .badge-count{margin-left:auto;background:var(--primary);color:#fff;font-size:10px;padding:1px 6px;border-radius:8px;font-weight:600}
.sidebar-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--border)}
.user-chip{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);cursor:pointer;transition:background var(--t)}
.user-chip:hover{background:var(--bg-hover)}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#ec4899);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:13px;flex-shrink:0}
.user-chip .name{font-size:13px;font-weight:500}
.user-chip .role{font-size:11px;color:var(--text-mute)}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{position:sticky;top:0;z-index:50;background:var(--sidebar-bg);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);padding:12px 24px;display:flex;align-items:center;gap:16px}
.breadcrumb{display:flex;align-items:center;gap:8px;color:var(--text-mute);font-size:13px}
.breadcrumb .current{color:var(--text);font-weight:500}
.search-box{position:relative;flex:0 1 320px;margin-left:auto}
.search-box input{width:100%;padding:8px 12px 8px 34px;border:1px solid var(--border);background:var(--bg-elev-2);border-radius:var(--radius-sm);font-size:13px}
.search-box input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.search-box .icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text-mute)}
.search-box kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:10px;padding:1px 5px;border:1px solid var(--border);border-radius:3px;background:var(--bg-elev);color:var(--text-mute)}
.icon-btn{width:36px;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-elev-2);color:var(--text-soft);display:inline-flex;align-items:center;justify-content:center;transition:all var(--t)}
.icon-btn:hover{background:var(--bg-hover);color:var(--text);border-color:var(--border-strong)}
.content{position:relative;padding:24px;flex:1;min-width:0}
/* 内容区加载动画（只覆盖数据部分，不做全屏遮罩） */
.content-loading{position:absolute;inset:0;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:color-mix(in srgb, var(--bg) 65%, transparent);border-radius:var(--radius);z-index:20;pointer-events:auto}
.content-loading.screen{position:fixed;z-index:90;background:transparent;pointer-events:none}
.content-loading-spinner{width:32px;height:32px;border:3px solid var(--border-strong);border-top-color:var(--primary);border-radius:50%;animation:spinnerRotate .7s linear infinite}
.content-loading-text{font-size:13px;color:var(--text-mute)}
@keyframes spinnerRotate{to{transform:rotate(360deg)}}
.page-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px;gap:16px;flex-wrap:wrap}
.page-title{font-size:22px;font-weight:700;letter-spacing:-.01em}
.page-desc{color:var(--text-mute);font-size:13px;margin-top:4px}
.page-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.stat-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:20px}
.stat-card{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:18px;position:relative;overflow:hidden;transition:transform var(--t),border-color var(--t)}
.stat-card:hover{transform:translateY(-2px);border-color:var(--border-strong)}
.stat-card .label{font-size:12px;color:var(--text-mute);display:flex;align-items:center;gap:6px}
.stat-card .value{font-size:26px;font-weight:700;margin-top:6px;letter-spacing:-.02em}
.stat-card .icon-bg{position:absolute;right:-10px;top:-10px;width:70px;height:70px;border-radius:50%;opacity:.14;display:flex;align-items:center;justify-content:center;font-size:28px}
.stat-card.primary .icon-bg{background:var(--primary);color:var(--primary)}
.stat-card.success .icon-bg{background:var(--success);color:var(--success)}
.stat-card.warn .icon-bg{background:var(--warn);color:var(--warn)}
.stat-card.danger .icon-bg{background:var(--danger);color:var(--danger)}
.stat-card.info .icon-bg{background:var(--info);color:var(--info)}

.card{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:16px}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);gap:12px;flex-wrap:wrap}
.card-header h3{font-size:15px;font-weight:600}
.card-header .sub{font-size:12px;color:var(--text-mute);margin-top:2px}
.card-body{padding:18px}
.card-body.flush{padding:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 14px;font-size:13px;font-weight:500;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-elev-2);color:var(--text);transition:all var(--t);white-space:nowrap}
.btn:hover{background:var(--bg-hover);border-color:var(--border-strong)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-sm{padding:4px 10px;font-size:12px}
.btn-lg{padding:10px 20px;font-size:14px}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-2);border-color:var(--primary-2)}
.btn-danger{color:var(--danger);border-color:var(--danger);background:transparent}
.btn-danger:hover{background:var(--danger-soft)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-soft)}
.btn-ghost:hover{background:var(--bg-hover);color:var(--text)}
.btn-success{background:var(--success);color:#fff;border-color:var(--success)}

.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{text-align:left;padding:11px 16px;font-weight:600;color:var(--text-soft);background:var(--bg-elev-2);border-bottom:1px solid var(--border);font-size:12px;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
tbody td{padding:12px 16px;border-bottom:1px solid var(--border);vertical-align:middle;white-space:nowrap}
tbody tr{transition:background var(--t)}
tbody tr:hover{background:var(--bg-hover)}
tbody tr:last-child td{border-bottom:none}
.table-actions{display:flex;gap:6px;flex-wrap:wrap}

.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;font-size:11px;font-weight:600;border-radius:999px;background:var(--bg-hover);color:var(--text-soft)}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.openai{background:var(--info-soft);color:var(--info)}
.badge.anthropic{background:rgba(245,158,11,.14);color:var(--warn)}
.badge.active,.badge.success,.badge.enabled{background:var(--success-soft);color:var(--success)}
.badge.disabled,.badge.error{background:var(--danger-soft);color:var(--danger)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.cache-hit{background:var(--success-soft);color:var(--success)}
.badge.cache-miss{background:var(--bg-hover);color:var(--text-soft)}
.badge.cache-expired,.badge.cache-stale,.badge.cache-bypass{background:var(--warn-soft);color:var(--warn)}
.badge.no-dot::before{display:none}

.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:12px;color:var(--text-soft);margin-bottom:6px;font-weight:500}
.form-row{display:flex;gap:12px;flex-wrap:wrap}
.form-row .form-group{flex:1;min-width:150px}
.form-help{font-size:11px;color:var(--text-mute);margin-top:4px}
select.input{appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7385' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}
textarea.input{font-family:var(--mono);min-height:80px;resize:vertical}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .15s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{position:relative;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius-lg);width:540px;max-width:100%;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);animation:slideUp .2s ease}
@keyframes slideUp{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.modal-head h3{font-size:16px}
.modal-head .close{background:none;border:none;color:var(--text-mute);font-size:20px;padding:0;line-height:1}
.modal-head .close:hover{color:var(--text)}
.modal-body{padding:20px 22px;overflow-y:auto}
.modal-foot{padding:14px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}

.toast-container{position:fixed;top:16px;right:16px;z-index:300;display:flex;flex-direction:column;gap:8px}
.toast{padding:11px 16px;border-radius:var(--radius-sm);color:#fff;font-size:13px;box-shadow:var(--shadow-lg);min-width:220px;display:flex;align-items:center;gap:8px;animation:slideIn .25s ease;border:1px solid rgba(255,255,255,.08)}
.toast.success{background:var(--success)}
.toast.error{background:var(--danger)}
.toast.info{background:var(--info)}
.toast.warn{background:var(--warn)}
@keyframes slideIn{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}

.progress{height:6px;background:var(--bg-elev-2);border-radius:999px;overflow:hidden;min-width:100px}
.progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-2));border-radius:999px;transition:width .3s}
.progress.warn>span{background:linear-gradient(90deg,var(--warn),#fbbf24)}
.progress.danger>span{background:linear-gradient(90deg,var(--danger),#f87171)}

.chart-grid{display:grid;gap:16px;grid-template-columns:2fr 1fr;margin-bottom:16px}
@media (max-width:1100px){.chart-grid{grid-template-columns:1fr}}
.chart{height:280px}
.chart-sm{height:220px}

.mono{font-family:var(--mono);font-size:12px;color:var(--text-soft)}
.muted{color:var(--text-mute)}
.hidden{display:none!important}
.row{display:flex;align-items:center;gap:8px}
.flex-1{flex:1;min-width:0}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.copy-icon{display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;border:1px solid var(--border);border-radius:4px;font-size:11px;cursor:pointer;background:var(--bg-elev-2);color:var(--text-soft);transition:all var(--t);user-select:none;gap:4px}
.copy-icon:hover{border-color:var(--primary);color:var(--primary)}
.copy-icon.copied{border-color:var(--success);color:var(--success);background:var(--success-soft)}
.copy-icon.active-tab{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.tag-list{display:flex;flex-wrap:wrap;gap:4px}
.tag{display:inline-block;padding:1px 7px;font-size:11px;border:1px solid var(--border);border-radius:4px;background:var(--bg-elev-2);color:var(--text-soft)}
.empty-row td{padding:40px 16px !important;text-align:center;color:var(--text-mute)}

.dot{display:inline-block;width:8px;height:8px;border-radius:50%}
.dot.live{background:var(--success);box-shadow:0 0 0 3px var(--success-soft);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--success-soft)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.dot.warn{background:var(--warn)}
.dot.error{background:var(--danger)}

.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:150;opacity:0;pointer-events:none;transition:opacity .2s}
.drawer-overlay.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:480px;max-width:90vw;background:var(--bg-elev);border-left:1px solid var(--border);z-index:160;transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column}
.drawer.open{transform:translateX(0)}
.drawer-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.drawer-body{flex:1;overflow-y:auto;padding:20px}
.kv{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;gap:12px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--text-mute);flex-shrink:0}
.kv .v{font-weight:500;text-align:right;word-break:break-all}

.text-success{color:var(--success)}
.text-danger{color:var(--danger)}
tr.clickable{cursor:pointer}
tr.clickable:hover{background:var(--bg-hover)}
tr.clickable.selected{background:var(--primary-soft)}

@media (max-width:768px){.app{grid-template-columns:1fr}.sidebar{display:none}.chart-grid{grid-template-columns:1fr}.stat-grid{grid-template-columns:1fr 1fr}.search-box{display:none}}