:root { --ink:#14261b; --muted:#6c786f; --line:#dfe6e1; --green:#1c6b4a; --lime:#c9ed5b; --paper:#fff; --bg:#f2f5f1; --red:#b63b30; --red-soft:#fff0ed; }
* { box-sizing: border-box; }
body { margin:0; color:var(--ink); background:var(--bg); font:14px/1.5 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif; }
button,input,select,textarea { font:inherit; }
button { min-height:42px; padding:0 16px; border:0; border-radius:11px; cursor:pointer; font-weight:750; }
button:disabled { cursor:wait; opacity:.6; }
.primary { color:#102117; background:var(--lime); }
.secondary { color:var(--ink); background:#e4eae5; }
.danger { min-height:30px; padding:0 10px; color:var(--red); background:var(--red-soft); font-size:12px; }
.text-button { min-height:auto; padding:3px; color:var(--green); background:transparent; }
.topbar { height:68px; padding:0 max(22px,calc((100vw - 1240px)/2)); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(255,255,255,.88); backdrop-filter:blur(12px); }
.brand,.brand>div { display:flex; align-items:center; gap:10px; }
.brand>span { display:grid; width:38px; height:38px; place-items:center; border-radius:12px; background:var(--lime); font-size:20px; font-weight:900; }
.brand>div { align-items:flex-start; flex-direction:column; gap:0; }.brand small { color:var(--muted); }
.server-state { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:12px; }.server-state i { width:8px; height:8px; border-radius:50%; background:#9aa59d; }.server-state.online i { background:#35a36b; box-shadow:0 0 0 4px #e2f5e9; }
main { width:min(1240px,calc(100% - 36px)); margin:0 auto; padding:44px 0 70px; }
.login-card { width:min(480px,100%); margin:70px auto; padding:34px; border:1px solid var(--line); border-radius:20px; background:var(--paper); box-shadow:0 24px 70px rgba(20,38,27,.08); }.login-card h1,.hero h1 { margin:2px 0 8px; font-size:30px; }.login-card p { color:var(--muted); }.login-card form { display:grid; gap:12px; margin-top:24px; }
.eyebrow { margin:0; color:var(--green); font-size:11px; font-weight:850; letter-spacing:.12em; }
input,select,textarea { width:100%; border:1px solid var(--line); border-radius:10px; background:#f9fbf9; outline:0; }input,select { height:44px; padding:0 12px; }textarea { padding:11px; resize:vertical; }input:focus,select:focus,textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(28,107,74,.09); }
.message { min-height:20px; margin:10px 0 0; color:var(--red); font-size:12px; }
.hero { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:24px; }.hero p:last-child { margin:0; color:var(--muted); }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }.metrics article,.panel { border:1px solid var(--line); border-radius:16px; background:var(--paper); }.metrics article { padding:18px; }.metrics span { display:block; color:var(--muted); font-size:12px; }.metrics strong { display:block; margin-top:5px; font-size:28px; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.panel { padding:22px; }.panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.panel h2 { margin:2px 0 0; }.pill { padding:5px 9px; border-radius:999px; color:var(--green); background:#e4f5e9; font-size:11px; font-weight:750; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-top:20px; }.form-grid label { display:grid; gap:6px; color:var(--muted); font-size:12px; font-weight:700; }.form-grid .wide { grid-column:1/-1; }.form-grid .check { display:flex; align-items:center; flex-direction:row; }.form-grid .check input { width:18px; height:18px; }.form-grid input[type="file"] { height:auto; padding:10px; }
.upload-progress { position:relative; min-height:38px; overflow:hidden; display:flex; align-items:center; justify-content:center; border-radius:10px; background:#edf1ee; }.upload-progress[hidden] { display:none; }.upload-progress span { position:absolute; inset:0 auto 0 0; width:0; background:rgba(201,237,91,.72); transition:width .2s ease; }.upload-progress strong { position:relative; font-size:11px; }
.code-result { margin-top:18px; padding:14px; border-radius:12px; background:#eef4ed; }.code-result>div { display:flex; align-items:center; justify-content:space-between; }.code-result textarea { min-height:150px; margin-top:8px; font:12px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace; }.code-result small { color:var(--muted); }
.table-panel { margin-top:16px; }.table-wrap { margin:16px -22px -22px; overflow:auto; }table { width:100%; border-collapse:collapse; white-space:nowrap; }th,td { padding:13px 16px; border-top:1px solid #edf1ee; text-align:left; font-size:12px; }th { color:var(--muted); background:#fafbfa; }.status { display:inline-flex; padding:4px 8px; border-radius:999px; background:#edf1ee; }.status.used { color:var(--green); background:#e4f5e9; }.status.revoked { color:var(--red); background:var(--red-soft); }
@media(max-width:850px){.metrics{grid-template-columns:1fr 1fr}.grid{grid-template-columns:1fr}.topbar{padding:0 18px}}@media(max-width:520px){main{width:calc(100% - 24px);padding-top:26px}.hero{align-items:stretch;flex-direction:column;gap:14px}.metrics{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.panel{padding:18px}.table-wrap{margin:14px -18px -18px}}