:root { color-scheme: light; --ink:#242e36; --muted:#52616b; --line:#d5dfe5; --accent:#09634f; --surface:#f4f7f8; }
* { box-sizing:border-box; }
body { margin:0; background:var(--surface); color:var(--ink); font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; }
header { display:flex; align-items:center; justify-content:space-between; padding:20px max(24px,calc((100% - 1160px)/2)); background:#fff; border-bottom:1px solid var(--line); gap:16px; }
h1 { font-size:24px; margin:0; font-weight:650; }
main { max-width:1208px; padding:24px; margin:auto; }
h2 { font-size:19px; margin:0 0 20px; font-weight:650; }
p { margin:0 0 16px; }
.intro,.hint { color:var(--muted); }
.hint { font-size:13px; margin-top:14px; }
section,#login { background:#fff; padding:24px; border:1px solid var(--line); border-radius:12px; margin-bottom:24px; }
#login { max-width:560px; margin:28px 0; }
label { display:block; margin-bottom:6px; font-weight:550; }
input,textarea,select,button { font:inherit; border-radius:6px; }
input,textarea,select { border:1px solid #9caeb9; padding:9px 12px; width:100%; color:var(--ink); background:#fff; caret-color:var(--accent); }
textarea { resize:vertical; }
button { background:var(--accent); color:#fff; border:1px solid var(--accent); padding:9px 16px; min-height:44px; cursor:pointer; white-space:nowrap; }
button:hover { background:#084e40; }
button:active { background:#073e33; }
button:disabled { opacity:.5; cursor:default; }
button.quiet { color:var(--accent); background:#fff; border-color:#b2c8bf; }
button.quiet:hover { background:#edf6f2; }
:focus-visible { outline:3px solid #eaab32; outline-offset:3px; }
::selection { background:#cce8db; color:var(--ink); }
[hidden] { display:none !important; }
.toolbar,.login-row,.search-row { display:flex; align-items:end; gap:12px; }
.toolbar > div:first-child { width:100px; }
.toolbar { flex-wrap:wrap; }
#custom-duration { width:120px; }
#generation-mode { max-width:260px; margin-bottom:18px; }
#custom-keys-area { margin-bottom:20px; }
#renew-form { background:var(--surface); padding:20px; margin-top:20px; border-radius:6px; }
#renew-hours { max-width:200px; display:block; }
.grow,.login-row input,.search-row input { flex:1; min-width:0; }
.search-row { margin-bottom:20px; }
.section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.section-heading span { color:var(--muted); }
#generated { margin-top:24px; }
#new-keys,.key { font-family:Consolas,monospace; font-size:13px; }
#message { white-space:pre-line; color:var(--accent); min-height:24px; }
#message.error { color:#a52b25; }
.table-scroll { overflow:auto; }
table { width:100%; min-width:1080px; border-collapse:collapse; text-align:left; font-variant-numeric:tabular-nums; }
th { color:var(--muted); background:var(--surface); font-size:13px; font-weight:550; }
th,td { padding:13px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
td { font-size:14px; }
td small { display:block; color:var(--muted); margin-top:4px; }
.key { white-space:nowrap; }
.status { white-space:nowrap; font-weight:600; }
.status.active { color:var(--accent); }
.status.expired,.status.banned { color:#a52b25; }
.actions { white-space:nowrap; }
.actions button { padding:6px 10px; font-size:13px; margin-right:8px; }
.pager { display:flex; justify-content:flex-end; align-items:center; gap:16px; margin-top:20px; }
#confirm-action { background:#fff6e5; padding:16px; border-radius:6px; }
#confirm-action button { margin-right:8px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:640px) {
  header { padding:16px; }
  main { padding:16px; }
  section,#login { padding:18px; }
  .toolbar { flex-wrap:wrap; }
  .toolbar .grow { min-width:160px; }
  .toolbar > button { width:100%; }
  .login-row,.search-row { align-items:stretch; flex-direction:column; }
  .pager { justify-content:space-between; gap:8px; }
}