:root { --bg:#1b1b1d; --bg2:#242427; --bg3:#2e2e32; --fg:#ececea; --fg2:#a3a29d; --line:#3a3a3f; --accent:#7aa2ff; --ok:#3fb86b; --warn:#e0a03a; --err:#e05a4f; }
* { box-sizing:border-box }
body { margin:0; font:13.5px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; color:var(--fg); background:var(--bg) }
a { color:var(--accent); text-decoration:none } a:hover { text-decoration:underline }
header.top { display:flex; align-items:center; gap:14px; padding:12px 20px; border-bottom:1px solid var(--line); background:var(--bg2); flex-wrap:wrap }
header.top h1 { margin:0; font-size:16px } header.top h1 a { color:inherit } header.top .spacer { flex:1 }
header.top nav { display:flex; gap:14px } header.top nav a { color:var(--fg2) } header.top nav a.active, header.top nav a:hover { color:var(--fg); text-decoration:none }
header.top form { margin:0 }
main { padding:18px 20px; display:grid; grid-template-columns:1fr; gap:16px; max-width:1300px; margin:0 auto }
.card { background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:14px 16px }
.card h2 { margin:0 0 10px; font-size:14px } .card h3 { font-size:13px; margin:14px 0 6px }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px }
.stat { background:var(--bg3); border-radius:10px; padding:10px 12px } .stat b { font-size:20px; display:block } .stat span { color:var(--fg2); font-size:12px }
table { width:100%; border-collapse:collapse; font-size:12.5px }
th { text-align:left; color:var(--fg2); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.05em; padding:6px 8px; border-bottom:1px solid var(--line) }
td { padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:middle }
tr.row:hover td { background:var(--bg3) }
table.kv th { text-transform:none; letter-spacing:0; font-size:12.5px; width:110px; vertical-align:top }
.pill { display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; background:var(--bg3); color:var(--fg2) }
.pill.active { background:rgba(63,184,107,.16); color:var(--ok) } .pill.revoked { background:rgba(224,90,79,.14); color:var(--err) } .pill.expired { background:rgba(224,160,58,.16); color:var(--warn) }
.pill.trial { background:rgba(122,162,255,.16); color:var(--accent) }
button, input, select { font:inherit; color:var(--fg); background:var(--bg3); border:1px solid var(--line); border-radius:8px; padding:6px 10px }
button { cursor:pointer } button.primary { background:var(--accent); color:#101010; border-color:transparent; font-weight:600 } button.danger { color:var(--err) } button.small { padding:3px 8px; font-size:12px } button.link { background:none; border:none; color:var(--fg2); padding:0 } button.link:hover { color:var(--fg) }
.row-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:10px } .row-actions form { display:flex; gap:6px; align-items:center; margin:0 }
.form { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px; align-items:end } .form label { display:flex; flex-direction:column; gap:3px; font-size:11.5px; color:var(--fg2) } .form label input, .form label select { width:100% }
.form label.check { flex-direction:row; align-items:center; gap:6px }
.toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px } .toolbar form { display:flex; gap:8px; align-items:center; margin:0 }
.muted { color:var(--fg2) } .small { font-size:12px } .mono { font-family:"SF Mono",Menlo,Consolas,monospace }
.key { font-family:"SF Mono",Menlo,monospace; font-size:16px; background:var(--bg3); padding:8px 12px; border-radius:8px; display:inline-block; margin:6px 0; user-select:all }
.msg { padding:8px 12px; border-radius:8px; margin:8px 0 } .msg.err { background:rgba(224,90,79,.14); color:var(--err) } .msg.ok { background:rgba(63,184,107,.14); color:var(--ok) } .msg.warn { background:rgba(224,160,58,.16); color:var(--warn) }
.detail { display:grid; grid-template-columns:1fr 1fr; gap:14px } @media (max-width:900px){ .detail { grid-template-columns:1fr } }
.events { max-height:360px; overflow:auto; font-size:12px } .events div { display:grid; grid-template-columns:150px 1fr; gap:8px; padding:3px 0; border-bottom:1px dotted var(--line) }
.login { max-width:420px; margin:80px auto } .login label { display:block; margin-bottom:10px; color:var(--fg2); font-size:12px } .login input { width:100%; margin-top:4px }
.machines { list-style:none; margin:0; padding:0 } .machines li { display:flex; align-items:center; gap:10px; padding:4px 0; flex-wrap:wrap } .machines form { margin:0 }
.pub { word-break:break-all }
.toolbar .spacer { flex:1 }
.summary { margin:0 0 10px }
.pager { display:flex; align-items:center; gap:12px; margin-top:10px }
a.btn { display:inline-block; padding:4px 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg3); color:var(--fg); font-size:12px } a.btn:hover { text-decoration:none; border-color:var(--accent) }
dialog { border:1px solid var(--line); border-radius:12px; padding:18px 20px; width:min(760px, calc(100vw - 32px)); color:var(--fg); background:var(--bg2) }
dialog::backdrop { background:rgba(0,0,0,.6) }
dialog h2 { margin:0 0 12px; font-size:15px }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:14px }
td.actions { text-align:right; white-space:nowrap } td.actions form { margin:0; display:inline }