:root { --ink:#17212b; --muted:#687382; --line:#dce3e8; --panel:#fff; --canvas:#f4f7f8; --brand:#0d766e; --brand-dark:#075f59; --danger:#b53b3b; --warning:#b56d00; --shadow:0 10px 30px rgba(18,32,42,.06); }
* { box-sizing:border-box; } [hidden] { display:none!important; } body { margin:0; color:var(--ink); background:var(--canvas); font:14px/1.45 Inter,"Microsoft YaHei",Arial,sans-serif; } button,input,select,textarea { font:inherit; } button { cursor:pointer; } h1,h2,p { margin:0; } h1 { font-size:26px; font-weight:700; } h2 { font-size:16px; } label { display:grid; gap:6px; color:var(--muted); font-size:13px; } input,select,textarea { width:100%; border:1px solid var(--line); background:#fff; border-radius:5px; color:var(--ink); padding:9px 10px; outline:none; } input:focus,select:focus,textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(13,118,110,.12); } textarea { min-height:76px; resize:vertical; } .eyebrow { color:var(--brand); font-size:11px; letter-spacing:1px; font-weight:800; } .primary { border:0; border-radius:5px; background:var(--brand); color:#fff; padding:10px 15px; font-weight:700; } .primary:hover { background:var(--brand-dark); }.wide { width:100%; }.login-shell { min-height:100vh; display:grid; place-items:center; background:linear-gradient(135deg,#e7f2f0 0%,#f6f8f8 55%,#f1e9d9 100%); }.login-panel { width:min(420px,calc(100vw - 32px)); padding:38px; display:grid; gap:18px; background:#fff; box-shadow:var(--shadow); border-radius:8px; }.login-panel h1 { margin-bottom:8px; }.form-error { color:var(--danger); }.app-shell { min-height:100vh; display:grid; grid-template-columns:226px minmax(0,1fr); }.sidebar { background:#132d32; color:#dce9e8; padding:22px 14px; display:flex; flex-direction:column; gap:28px; }.brand { display:flex; align-items:center; gap:10px; color:#fff; font-weight:800; }.brand-mark { display:grid; place-items:center; width:30px; height:30px; border-radius:4px; background:#d2a952; color:#132d32; }.sidebar nav { display:grid; gap:4px; }.nav-link,.logout { border:0; background:transparent; color:#b8cbca; border-radius:4px; padding:10px 12px; text-align:left; }.nav-link:hover,.nav-link.active { background:#23484d; color:#fff; }.logout { margin-top:auto; color:#f0c8c8; }.workspace { min-width:0; padding:30px clamp(20px,4vw,56px); }.workspace>header { display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; }.admin-chip { border:1px solid var(--line); background:#fff; border-radius:20px; padding:7px 12px; color:var(--muted); }.view { display:none; }.view.active { display:block; }.metrics { display:grid; grid-template-columns:repeat(4,minmax(120px,1fr)); gap:14px; margin-bottom:26px; }.metrics article,.section-block,.tool-panel { background:var(--panel); border:1px solid #e7ecef; box-shadow:var(--shadow); }.metrics article { padding:18px; border-radius:6px; display:grid; gap:6px; }.metrics span { color:var(--muted); }.metrics strong { font-size:29px; color:var(--brand); }.section-block { border-radius:6px; overflow:hidden; }.section-heading { min-height:58px; display:flex; gap:12px; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line); }.text-action { border:0; color:var(--brand); background:none; font-weight:700; }.split-layout { display:grid; grid-template-columns:290px minmax(0,1fr); gap:20px; }.account-layout { grid-template-columns:290px minmax(0,1fr); }.tool-panel { align-self:start; border-radius:6px; padding:20px; display:grid; gap:14px; }.tool-panel h2 { margin-bottom:4px; }.check-line { display:flex; align-items:center; gap:8px; }.check-line input { width:auto; }.table-wrap { overflow:auto; }.data-table { width:100%; border-collapse:collapse; white-space:nowrap; }.data-table th { color:var(--muted); font-size:12px; font-weight:600; background:#fbfcfc; }.data-table td,.data-table th { padding:12px 16px; text-align:left; border-bottom:1px solid #edf0f2; }.data-table tr:last-child td { border-bottom:0; }.status { display:inline-flex; border-radius:10px; padding:2px 8px; font-size:12px; font-weight:700; }.status.active { color:#126a43; background:#e1f4ea; }.status.expired { color:#936000; background:#fff0d2; }.status.disabled { color:#9c3434; background:#fde6e6; }.group-list { display:grid; }.group-item { display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px; padding:15px 18px; border-bottom:1px solid #edf0f2; }.group-item:last-child { border-bottom:0; }.muted { color:var(--muted); font-size:13px; }.filters { display:flex; gap:8px; }.filters input { min-width:155px; }.icon-button { width:36px; border:1px solid var(--line); border-radius:5px; background:#fff; font-size:18px; }.renew-grid { display:grid; grid-template-columns:repeat(2,minmax(260px,1fr)); gap:20px; margin-bottom:20px; }.selection-note { color:var(--muted); }.empty { padding:28px; text-align:center; color:var(--muted); }.row-check { width:auto; }.small-button { border:1px solid var(--line); background:#fff; border-radius:4px; padding:5px 8px; color:var(--brand); }.danger { color:var(--danger); }.hidden { display:none!important; }#toast { position:fixed; right:22px; bottom:22px; max-width:360px; padding:12px 16px; border-radius:5px; color:white; background:#16343a; opacity:0; pointer-events:none; transform:translateY(8px); transition:.2s; box-shadow:var(--shadow); }#toast.show { opacity:1; transform:translateY(0); }#toast.error { background:var(--danger); }
 .group-actions,.group-account-tools { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; } .group-account-panel { margin-top:20px; } .account-heading { align-items:flex-start; } .account-toolbar { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; } .bulk-tools { display:flex; gap:7px; align-items:center; padding-left:10px; border-left:1px solid var(--line); } .bulk-tools select { width:150px; padding:6px 8px; } .account-editor { width:min(440px,calc(100vw - 28px)); border:0; border-radius:7px; padding:0; box-shadow:0 24px 80px rgba(18,32,42,.24); } .account-editor::backdrop { background:rgba(12,30,33,.52); } .account-editor form { display:grid; gap:16px; padding:22px; } .editor-header { display:flex; align-items:start; justify-content:space-between; } .editor-header h2 { margin-top:3px; font-size:19px; } .editor-actions { display:flex; justify-content:flex-end; padding-top:4px; }
@media (max-width:860px) { .app-shell { grid-template-columns:1fr; }.sidebar { position:sticky; top:0; z-index:2; flex-direction:row; align-items:center; padding:10px 14px; gap:14px; }.sidebar nav { display:flex; overflow:auto; }.nav-link { white-space:nowrap; }.logout { margin:0 0 0 auto; white-space:nowrap; }.metrics { grid-template-columns:repeat(2,1fr); }.split-layout,.renew-grid { grid-template-columns:1fr; }.workspace { padding:22px 16px; }.workspace>header { margin-bottom:20px; }.filters { max-width:58%; }.filters input { min-width:0; }.account-toolbar { width:100%; justify-content:space-between; }.bulk-tools { border-left:0; padding-left:0; } }
@media (max-width:540px) { .sidebar .brand { display:none; }.sidebar { justify-content:space-between; }.sidebar nav { max-width:calc(100vw - 86px); }.metrics { grid-template-columns:1fr 1fr; gap:8px; }.metrics article { padding:13px; }.metrics strong { font-size:23px; }.admin-chip { display:none; }.section-heading { padding:12px; }.data-table td,.data-table th { padding:10px 12px; } }