*{box-sizing:border-box}
:root{--bg:#eef4fb;--ink:#101828;--muted:#667085;--line:#d9e4f2;--blue:#2563eb;--deep:#0f2747;--cyan:#06b6d4;--green:#138044;--red:#b42318;--amber:#b54708}
body{margin:0;font-family:"Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif;background:radial-gradient(circle at 15% 0,#dbeafe 0,#eef4fb 34%,#f7faff 100%);color:var(--ink)}
.wrap{max-width:1280px;margin:0 auto;padding:30px}
.top{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px;background:linear-gradient(135deg,#0d203a,#123e68 65%,#155e75);border:1px solid rgba(255,255,255,.18);border-radius:22px;box-shadow:0 20px 55px rgba(15,39,71,.18);padding:24px 26px;color:#fff}
.title{font-size:30px;font-weight:900;letter-spacing:.3px}
.sub{color:#667085;margin-top:5px;font-size:13px}
.top .sub{color:#bfdbfe}
.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:18px 0}
.metric{position:relative;overflow:hidden;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 14px 34px rgba(15,39,71,.08)}
.metric:after{content:"";position:absolute;right:-30px;top:-42px;width:92px;height:92px;border-radius:50%;background:rgba(37,99,235,.08)}
.metric b{display:block;font-size:28px;line-height:1.1}
.metric span{color:var(--muted);font-weight:700}
.card{background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:20px;box-shadow:0 18px 45px rgba(15,39,71,.08);padding:22px}
.form{display:flex;gap:12px;flex-wrap:wrap;align-items:end;margin:18px 0}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-weight:800;color:#344054}
.input,.select{height:42px;border:1px solid #cfd9e8;border-radius:12px;padding:0 13px;background:#fff;outline:none;min-width:160px}
.input:focus,.select:focus,.cards:focus{border-color:#3b82f6;box-shadow:0 0 0 4px rgba(59,130,246,.12)}
.btn{height:42px;border:0;border-radius:12px;padding:0 18px;font-weight:900;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;transition:.15s ease;white-space:nowrap}
.btn:hover{transform:translateY(-1px);filter:brightness(1.02)}
.primary{background:linear-gradient(135deg,#2563eb,#0891b2);color:#fff;box-shadow:0 10px 22px rgba(37,99,235,.22)}
.danger{background:#fee4e2;color:var(--red)}
.muted{background:#eef4fb;color:#344054}
.ok{color:var(--green)}.warn{color:var(--amber)}.bad{color:var(--red)}
.table-wrap{width:100%;overflow:auto;border:1px solid #e4ebf5;border-radius:16px}
.table{width:100%;border-collapse:collapse;min-width:1040px}
.table th,.table td{border-bottom:1px solid #e6edf5;padding:13px 12px;text-align:left;white-space:nowrap;vertical-align:middle}
.table th{position:sticky;top:0;background:#f8fbff;color:#475467;font-size:13px;z-index:1}
.table tr:hover td{background:#f8fbff}
.pill{border-radius:999px;padding:5px 10px;font-size:12px;font-weight:900}
.p-unused{background:#eff6ff;color:#1d4ed8}.p-active{background:#dcfce7;color:#166534}.p-disabled,.p-expired{background:#fee2e2;color:#991b1b}
.login{max-width:520px;margin:8vh auto;padding:0 18px}
.login .card{padding:30px}
.notice{padding:13px 15px;border-radius:14px;background:#fff7ed;color:#9a3412;margin:14px 0;border:1px solid #fed7aa;font-weight:700}
.cards{width:100%;min-height:130px;border:1px solid #cfd8e3;border-radius:14px;padding:14px;font-family:Consolas,monospace;background:#f8fbff;color:#0f2747}
.ops{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
@media(max-width:900px){.wrap{padding:18px}.top{align-items:flex-start;flex-direction:column}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.title{font-size:24px}.card{padding:16px}}