:root{--bg:#f5f7fb;--panel:#fff;--panel-strong:#eef3f8;--text:#16202a;--muted:#64717f;--line:#dbe3eb;--accent:#0f766e;--accent-strong:#0b5f59;--danger:#b42318;--warn:#a15c07;--ok:#137333}*{box-sizing:border-box}html,body{background:var(--bg);min-height:100%;color:var(--text);margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input,select,textarea{font:inherit}a{color:inherit}.app-shell{grid-template-columns:248px 1fr;min-height:100vh;display:grid}.sidebar{color:#f8fafc;background:#17212b;padding:20px 16px}.brand{align-items:center;gap:10px;margin-bottom:24px;font-size:20px;font-weight:800;display:flex}.nav-button{color:#cbd5e1;cursor:pointer;text-align:left;background:0 0;border:0;border-radius:8px;align-items:center;gap:10px;width:100%;padding:10px 12px;display:flex}.nav-button.active,.nav-button:hover{color:#fff;background:#263544}.main{padding:24px;overflow:auto}.topbar{justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;display:flex}.title{margin:0;font-size:24px;line-height:1.2}.grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;display:grid}.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:16px}.panel-header{justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.metric{font-size:30px;font-weight:800}.muted{color:var(--muted);font-size:14px}.toolbar{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.table-wrap{border:1px solid var(--line);background:var(--panel);border-radius:8px;overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:840px}th,td{border-bottom:1px solid var(--line);text-align:left;vertical-align:top;padding:10px 12px;font-size:14px}th{background:var(--panel-strong);color:#3c4856;font-weight:700}tr:last-child td{border-bottom:0}.status{background:#edf2f7;border-radius:999px;align-items:center;gap:6px;padding:3px 8px;font-size:12px;font-weight:700;display:inline-flex}.status.active{color:var(--ok);background:#e7f6ec}.status.expired,.status.maintenance{color:var(--warn);background:#fff4df}.status.banned,.status.disabled{color:var(--danger);background:#fdecec}.button{border:1px solid var(--line);color:var(--text);cursor:pointer;white-space:nowrap;background:#fff;border-radius:8px;justify-content:center;align-items:center;gap:8px;min-height:36px;padding:0 12px;text-decoration:none;display:inline-flex}.button.primary{background:var(--accent);border-color:var(--accent);color:#fff}.button.primary:hover{background:var(--accent-strong)}.button.danger{color:var(--danger)}.icon-button{width:36px;height:36px;padding:0}.form-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;display:grid}.field{gap:6px;display:grid}.field span{color:var(--muted);font-size:13px}.field input,.field select,.field textarea{border:1px solid var(--line);width:100%;min-height:38px;color:var(--text);background:#fff;border-radius:8px;padding:8px 10px}.stack{gap:14px;display:grid}.login-page,.pay-page{place-items:center;min-height:100vh;padding:24px;display:grid}.login-box,.pay-box{background:var(--panel);border:1px solid var(--line);border-radius:8px;width:min(560px,100%);padding:22px}.plan-list{gap:10px;display:grid}.plan-row{border:1px solid var(--line);cursor:pointer;border-radius:8px;justify-content:space-between;align-items:center;gap:14px;padding:12px;display:flex}.plan-row.selected{border-color:var(--accent);background:#ebf7f5}.qr-cell{border:1px solid var(--line);background:#fff;border-radius:8px;place-items:center;width:84px;height:84px;display:grid}.error{color:var(--danger);font-size:14px}@media (max-width:760px){.app-shell{grid-template-columns:1fr}.sidebar{z-index:2;position:sticky;top:0}.main{padding:16px}}