:root{font-family:Inter,PingFang SC,Microsoft YaHei,Segoe UI,system-ui,sans-serif;color:#1d2129;background:#f0f2f5;--ink:#1d2129;--muted:#86909c;--line:#e5e6eb;--line-light:#f2f3f5;--accent:#4080ff;--accent-hover:#6c9bff;--accent-active:#2e63d8;--accent-soft:#ecf3ff;--success:#34c77b;--danger:#f56c6c;--card:#fff;--shadow:0 4px 14px rgba(30,42,80,.06);--shadow-lg:0 12px 32px rgba(30,42,80,.1)}*{box-sizing:border-box}html,body,#app{min-height:100%}body{margin:0;min-height:100vh;-webkit-font-smoothing:antialiased}button,input,select{font:inherit;outline:none}button{cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:8px;padding:9px 15px;transition:all .18s ease;box-shadow:0 1px 2px #1e2a500a}button:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}button:active{transform:translateY(1px)}button:disabled{cursor:wait;opacity:.55}button.primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 4px 10px #4080ff47}button.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}button.primary:active{background:var(--accent-active)}button.danger{color:var(--danger)}button.danger:hover{color:var(--danger);border-color:var(--danger);background:#fef2f2}input,select{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:#fff;min-width:0;transition:border-color .18s,box-shadow .18s;color:var(--ink)}input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px #4080ff1f}input:disabled{background:var(--line-light);color:var(--muted)}label{font-size:12px;color:var(--muted);display:grid;gap:6px;font-weight:500}h1,h2,p{margin:0}h1{font-size:20px;font-weight:600}h2{font-size:15px;font-weight:600}.muted{color:var(--muted)}.toast{position:fixed;right:24px;bottom:24px;background:#1d2129;color:#fff;padding:12px 18px;border-radius:10px;box-shadow:var(--shadow-lg);z-index:5;font-size:13px;animation:toast-in .25s ease}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.badge-latest{display:inline-block;background:#ecf3ff;color:#4080ff;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;margin-left:6px;vertical-align:1px}.login-page{display:grid;place-items:center;min-height:100vh;padding:24px;background:linear-gradient(160deg,#eef3ff,#f0f2f5 42%,#eefaf5)}.login-card{background:var(--card);width:min(420px,100%);padding:38px 34px;border-radius:16px;box-shadow:var(--shadow-lg);display:grid;gap:22px;border:1px solid #fff}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:40px;height:40px;background:linear-gradient(135deg,#4080ff,#6c9bff);color:#fff;display:grid;place-items:center;border-radius:10px;font-size:22px;box-shadow:0 6px 14px #4080ff52}.brand h1{font-size:17px}.login-form{display:grid;gap:16px}.login-form button{padding:11px;font-size:14px}.login-error{min-height:18px;color:var(--danger);font-size:13px}.shell{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh;align-items:stretch}.sidebar{position:sticky;top:0;height:100vh;background:#fff;border-right:1px solid var(--line-light);padding:20px 14px;display:flex;flex-direction:column;gap:22px}.sidebar .brand{padding:2px 8px}.sidebar .brand small{display:block;color:var(--muted);font-size:11px;margin-top:2px}.sidebar .side-footer span{color:var(--muted)}.side-nav{display:grid;gap:4px}.side-nav button{background:transparent;border:0;color:#4e5969;text-align:left;padding:11px 14px;border-radius:8px;font-size:13.5px;box-shadow:none}.side-nav button:hover{background:var(--line-light);color:var(--ink)}.side-nav button.active{background:var(--accent-soft);color:var(--accent);font-weight:600}.side-footer{margin-top:auto;display:grid;gap:8px;padding:0 8px;font-size:12px}.side-footer button{padding:7px 12px;font-size:12px}.content{padding:22px 26px;max-width:1400px;width:100%;margin:0 auto}.topbar{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px}.topbar .muted{font-size:13px;margin-top:4px}.notice{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 16px;font-size:12.5px;color:var(--muted);box-shadow:var(--shadow)}.notice.online{color:var(--success);border-color:#d3f2e2;background:#f2fcf7}.section{display:grid;gap:18px}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}.stat{background:var(--card);border-radius:12px;padding:18px 20px;box-shadow:var(--shadow);border:1px solid #fff;display:grid;gap:8px;position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s}.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.stat:before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#4080ff,#6c9bff)}.stat .muted{font-size:12px}.stat b{font-size:26px;font-weight:600;letter-spacing:.5px}.card{background:var(--card);border-radius:12px;padding:22px;box-shadow:var(--shadow);border:1px solid #fff}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.grid-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;align-items:end;background:#fafbfc;border:1px dashed var(--line);border-radius:10px;padding:16px}.grid-form button{justify-self:start}.inline-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.inline-form input{flex:1;max-width:520px}.table-wrap{overflow:auto;border:1px solid var(--line-light);border-radius:10px;margin-top:16px}table{border-collapse:collapse;width:100%;min-width:720px}th,td{padding:12px 14px;border-bottom:1px solid var(--line-light);text-align:left;white-space:nowrap;font-size:13px}th{background:#fafbfc;color:#4e5969;font-weight:600;font-size:12.5px}tbody tr{transition:background .15s}tbody tr:hover{background:#f5f8ff}tbody tr:last-child td{border-bottom:0}.code-list{white-space:pre-wrap;background:#1d2129;color:#8fd4ff;padding:16px;border-radius:10px;font:13px ui-monospace,Consolas,monospace;max-height:260px;overflow:auto;margin:16px 0 0;line-height:1.7}.code-list .code-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 8px;border-radius:6px}.code-list .code-row:hover{background:#ffffff0f}.code-list .code-text{-webkit-user-select:all;user-select:all;word-break:break-all}.code-list .code-row button,.code-list .code-actions button{background:#4080ff;color:#fff;border:none;padding:4px 12px;border-radius:6px;font-size:12px;cursor:pointer}.code-list .code-actions{display:flex;justify-content:flex-end;margin-bottom:8px}.code-list .code-row button:hover,.code-list .code-actions button:hover{background:#6c9bff}.header-actions{display:flex;gap:10px}.header-actions .primary{background:#4080ff;color:#fff;border:none;padding:8px 16px;border-radius:8px;cursor:pointer;font-weight:500}.header-actions .primary:hover{background:#6c9bff}.modal-mask{position:fixed;top:0;right:0;bottom:0;left:0;background:#1d212973;display:flex;align-items:center;justify-content:center;z-index:50;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal{background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);width:min(640px,92vw);max-height:86vh;overflow:auto;padding:24px 26px;animation:modal-in .18s ease}@keyframes modal-in{0%{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.modal-header h2{font-size:17px;margin:0}.modal-close{background:#f2f3f5;border:none;width:30px;height:30px;border-radius:8px;font-size:16px;cursor:pointer;color:#4e5969}.modal-close:hover{background:#e5e6eb}.modal .grid-form{margin-top:8px}.modal .actions{margin-top:20px;display:flex;justify-content:flex-end;gap:10px}.modal .actions .primary{background:#4080ff;color:#fff;border:none;padding:9px 20px;border-radius:8px;cursor:pointer}.modal .actions .primary:hover{background:#6c9bff}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;margin-top:4px}.detail-grid label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#86909c}.detail-grid label>div{font-size:14px;color:#1d2129;word-break:break-all;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.detail-grid .mono{font-family:ui-monospace,Consolas,monospace;font-size:13px}.detail-grid label:nth-child(5){grid-column:1/-1}.detail-grid button{background:#ecf3ff;color:#4080ff;border:none;padding:3px 10px;border-radius:6px;font-size:12px;cursor:pointer}.detail-grid button:hover{background:#d8e6ff}.settings-list{display:grid;gap:10px}.settings-row{display:grid;grid-template-columns:240px 1fr auto;gap:12px;align-items:center}.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,320px));gap:16px}.actions{margin-top:16px}.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}.chart{width:100%;height:auto;display:block}.chart-label{font-size:10px;fill:#86909c}.chart-value{font-size:10px;fill:#1d2129;font-weight:600}.donut{max-width:170px;margin:0 auto}.donut-total{font-size:22px;font-weight:600;fill:#1d2129}.donut-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.legend{display:grid;gap:8px;font-size:13px;color:#4e5969}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;vertical-align:middle}@media(max-width:1100px){.stats{grid-template-columns:repeat(3,1fr)}}@media(max-width:900px){.shell{grid-template-columns:1fr}.sidebar{position:static;height:auto;padding:14px;gap:12px}.side-nav{display:flex;overflow:auto}.side-footer{display:flex;justify-content:space-between;align-items:center}.content{padding:16px}.stats{grid-template-columns:repeat(2,1fr)}.grid-form,.profile-grid,.settings-row{grid-template-columns:1fr}.topbar{display:block}.notice{display:inline-block;margin-top:14px}}