:root { --ink:#182420; --muted:#66746f; --line:#dce5e0; --surface:#fff; --canvas:#f4f7f5; --brand:#087e8b; --brand-dark:#056674; --warn:#bc5b1a; --danger:#b12d2d; --shadow:0 12px 32px rgba(22,50,42,.08); font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif; color:var(--ink); background:var(--canvas); }
* { box-sizing:border-box; } body { margin:0; min-width:320px; } button,input,select { font:inherit; } button { cursor:pointer; } button:disabled { opacity:.58; cursor:not-allowed; }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 18% 10%,#dff4ed,transparent 32rem),var(--canvas); }
.login-card { width:min(440px,100%); padding:36px; background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); }
.eyebrow { color:var(--brand-dark); font-weight:750; font-size:.84rem; letter-spacing:.08em; } h1 { margin:8px 0 10px; font-size:1.75rem; } h2 { margin:0; font-size:1.18rem; } .subtle { color:var(--muted); line-height:1.6; }
.field { display:grid; gap:7px; margin:17px 0; font-size:.92rem; font-weight:650; } input,select { min-height:42px; width:100%; border:1px solid #bdcac4; border-radius:9px; padding:9px 11px; color:var(--ink); background:#fff; } input:focus,select:focus { outline:3px solid #b6e5de; border-color:var(--brand); }
.button { min-height:42px; padding:9px 14px; border:1px solid transparent; border-radius:9px; background:var(--brand); color:#fff; font-weight:700; } .button:hover { background:var(--brand-dark); } .button.secondary { color:var(--ink); background:#fff; border-color:#bfcac4; } .button.danger { background:var(--danger); } .button.compact { min-height:34px; padding:6px 10px; font-size:.88rem; }
.alert { margin:14px 0; padding:11px 13px; border-radius:9px; line-height:1.45; } .alert.error { color:#8d201d; background:#fff0ef; } .alert.success { color:#04603c; background:#e8f8ef; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:240px minmax(0,1fr); } .sidebar { background:#102e2a; color:#effaf7; padding:24px 14px; display:flex; flex-direction:column; gap:20px; } .brand { padding:0 10px; font-weight:800; line-height:1.35; } .brand small { display:block; color:#a9cac1; font-size:.76rem; font-weight:600; margin-top:4px; } .nav { display:grid; gap:5px; } .nav button { text-align:left; border:0; padding:10px 12px; border-radius:8px; color:#d5ebe4; background:transparent; font-weight:650; } .nav button.active,.nav button:hover { color:#fff; background:#1d5049; } .sidebar-footer { margin-top:auto; padding:0 10px; color:#a9cac1; font-size:.82rem; line-height:1.5; }
.content { padding:28px clamp(18px,4vw,58px) 48px; max-width:1500px; width:100%; margin:0 auto; } .topbar { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:24px; } .topbar-actions { display:flex; align-items:center; gap:10px; } .store-select { min-width:160px; }
.panel { border:1px solid var(--line); background:var(--surface); border-radius:14px; box-shadow:0 4px 14px rgba(18,50,42,.035); padding:20px; } .panel + .panel { margin-top:18px; } .section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:15px; } .section-head p { margin:3px 0 0; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; } .metric { padding:17px; border-radius:12px; background:#e9f4f1; } .metric.warn { background:#fff2e7; } .metric .value { display:block; font-size:1.65rem; font-weight:800; margin-bottom:4px; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:10px; } table { width:100%; border-collapse:collapse; min-width:640px; } th,td { padding:11px 12px; text-align:left; border-bottom:1px solid var(--line); font-size:.9rem; vertical-align:top; } th { color:#52625c; background:#f7faf8; white-space:nowrap; } tr:last-child td { border-bottom:0; } tr.clickable { cursor:pointer; } tr.clickable:hover { background:#f1f8f5; }
.editor { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:end; } .editor .field { margin:0; } .editor-actions { display:flex; gap:8px; flex-wrap:wrap; } .form-note { grid-column:1 / -1; color:var(--muted); margin:0; font-size:.88rem; } .empty { padding:28px 10px; text-align:center; color:var(--muted); } .tag { display:inline-block; padding:3px 8px; border-radius:999px; background:#e2f1ed; color:#075e55; font-size:.78rem; font-weight:700; } .tag.off { background:#f1e8e7; color:#9a3430; }
.loading { padding:32px; text-align:center; color:var(--muted); } code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.83em; word-break:break-word; }
@media (max-width:900px) { .app-shell { grid-template-columns:1fr; } .sidebar { padding:15px; gap:12px; } .nav { display:flex; overflow:auto; } .nav button { white-space:nowrap; } .sidebar-footer { display:none; } .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .editor { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:580px) { .content { padding:18px 14px 32px; } .topbar { align-items:flex-start; flex-direction:column; } .topbar-actions { width:100%; flex-wrap:wrap; } .store-select { flex:1; } .metrics,.editor { grid-template-columns:1fr; } .login-card { padding:26px; } }