:root { --bg:#eef1f3; --surface:#fff; --ink:#182126; --muted:#69777e; --line:#d8dee2; --green:#087f5b; --green-dark:#056b4c; --red:#b42318; --orange:#c75b1c; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--bg); font:14px/1.5 "Microsoft YaHei UI","Microsoft YaHei",sans-serif; }
.topbar { height:64px; padding:0 28px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.brand { color:var(--ink); text-decoration:none; font-weight:700; font-size:17px; display:flex; align-items:center; gap:10px; }
.brand span { width:32px; height:32px; display:grid; place-items:center; color:#fff; background:var(--green); border-radius:6px; }
nav { display:flex; gap:16px; align-items:center; }
nav a, nav button { border:0; background:none; color:#314047; font:inherit; cursor:pointer; text-decoration:none; padding:7px 4px; }
nav form { margin:0; }
.page { width:min(1180px, calc(100% - 32px)); margin:32px auto; }
.auth-page { min-height:calc(100vh - 128px); display:grid; place-items:center; }
.auth-box { width:min(420px, 100%); background:#fff; padding:32px; border:1px solid var(--line); box-shadow:0 14px 36px rgba(24,33,38,.1); border-radius:8px; }
h1,h2,p { margin-top:0; }
h1 { margin-bottom:8px; font-size:28px; }
h2 { font-size:18px; }
.eyebrow { color:var(--green); font-size:12px; font-weight:700; }
.muted { color:var(--muted); }
.stack { display:grid; gap:16px; margin-top:24px; }
label { display:grid; gap:6px; color:#425159; font-weight:600; }
input { width:100%; height:40px; border:1px solid #bcc7cd; border-radius:5px; padding:0 10px; font:inherit; background:#fff; }
input:focus { outline:2px solid rgba(8,127,91,.2); border-color:var(--green); }
button { min-height:38px; border:1px solid #b7c2c7; border-radius:5px; background:#fff; padding:0 14px; font:inherit; font-weight:600; cursor:pointer; }
button.primary { color:#fff; background:var(--green); border-color:var(--green); }
button.primary:hover { background:var(--green-dark); }
button.danger { color:var(--red); border-color:#e5aaa5; }
.flash { max-width:720px; margin:0 auto 16px; padding:11px 14px; border:1px solid; border-radius:5px; }
.flash.error { color:var(--red); background:#fff0ee; border-color:#f0b9b4; }
.flash.success { color:#056b4c; background:#e5f4ee; border-color:#a9d7c5; }
.page-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:20px; }
.page-head h1 { margin:0; }
.operator { color:var(--muted); }
.panel { background:#fff; border:1px solid var(--line); border-radius:7px; margin-bottom:20px; padding:20px; }
.create-grid { display:grid; grid-template-columns:1fr 1fr 1fr auto; align-items:end; gap:12px; }
.panel-title { display:flex; align-items:center; justify-content:space-between; }
.panel-title span { color:var(--muted); }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; min-width:860px; }
th,td { text-align:left; border-top:1px solid #e4e8ea; padding:12px 10px; vertical-align:top; }
th { color:#637178; font-size:12px; }
.badge { display:inline-block; border-radius:999px; padding:2px 8px; font-size:12px; font-weight:700; }
.badge.ok { color:#056b4c; background:#e5f4ee; }
.badge.off { color:#59666c; background:#edf0f2; }
.badge.expired { color:var(--orange); background:#fff0e6; }
.actions { position:relative; }
.actions summary { cursor:pointer; color:var(--green); font-weight:700; }
.actions[open] { min-width:220px; }
.actions form { display:grid; grid-template-columns:1fr auto; gap:6px; margin-top:8px; }
.actions form:last-child { grid-template-columns:1fr; }
.actions input { height:34px; }
.actions button { min-height:34px; padding:0 9px; }
@media (max-width:800px) { .create-grid { grid-template-columns:1fr; } .topbar { padding:0 14px; } .page { margin:18px auto; } }