:root { color-scheme:light; font-family:Inter,ui-sans-serif,system-ui,sans-serif; background:#f3f6fb; color:#172033; --page:#f3f6fb; --glow:#dbeafe; --text:#172033; --surface:#ffffffed; --surface-solid:#fff; --header:#ffffffdf; --border:#d5deea; --row-border:#e4eaf2; --input:#fff; --input-border:#bcc9da; --muted:#64748b; --secondary:#e4eaf2; --secondary-text:#263449; --code:#1d5fae; --offline:#64748b; --shadow:#253a5a1a; --dialog-backdrop:#17203366; --alert-bg:#fef2f2; --alert-border:#fecaca; --alert-text:#991b1b; }
:root[data-theme="dark"] { color-scheme:dark; background:#0a0d12; color:#edf2f7; --page:#0a0d12; --glow:#172435; --text:#edf2f7; --surface:#111722e8; --surface-solid:#111722; --header:#0c1119dd; --border:#293344; --row-border:#202938; --input:#0b1018; --input-border:#344157; --muted:#8391a5; --secondary:#202a38; --secondary-text:#fff; --code:#9cc5ff; --offline:#8794a8; --shadow:#0005; --dialog-backdrop:#05070bbd; --alert-bg:#450a0a; --alert-border:#7f1d1d; --alert-text:#fecaca; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--text); background:radial-gradient(circle at 20% 0,var(--glow) 0,transparent 35%),var(--page); }
header { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 5vw; border-bottom:1px solid var(--border); background:var(--header); }
header>div { display:flex; align-items:center; gap:12px; }
.header-actions { display:flex; align-items:center; gap:10px; }
.header-actions form { margin:0; }
.header-actions button { height:40px; }
.theme-toggle { width:42px; padding:0; display:inline-flex; align-items:center; justify-content:center; font-size:20px; line-height:1; }
.theme-toggle::before { content:"☾"; }
:root[data-theme="dark"] .theme-toggle::before { content:"☀"; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:#3b82f6; font-weight:800; }
main { width:min(1120px,90vw); margin:48px auto; }
.summary-card,.panel,.login-card { background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:0 24px 70px var(--shadow); }
.summary-card { display:flex; justify-content:space-between; align-items:center; padding:28px 32px; margin-bottom:24px; }
.summary-card h1,.panel h2 { margin:6px 0 0; }
.eyebrow { color:var(--muted); font-size:.76rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.dot { display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:12px; background:#ef4444; box-shadow:0 0 16px #ef444488; }
.dot.online { background:#22c55e; box-shadow:0 0 16px #22c55e88; }
.panel-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; padding:26px 30px; }
.add-form { display:flex; gap:10px; }
input { min-width:240px; padding:11px 13px; color:var(--text); background:var(--input); border:1px solid var(--input-border); border-radius:9px; outline:none; }
input:focus { border-color:#60a5fa; box-shadow:0 0 0 3px #3b82f633; }
button,.button { border:0; border-radius:9px; padding:11px 16px; background:#3b82f6; color:white; font-weight:700; text-decoration:none; cursor:pointer; }
button.secondary,.button.secondary { color:var(--secondary-text); background:var(--secondary); }
button.danger { background:#dc2626; }
.table-wrap { overflow:auto; border-top:1px solid var(--border); }
table { width:100%; border-collapse:collapse; font-size:14px; }
th,td { padding:17px 30px; text-align:left; border-bottom:1px solid var(--row-border); }
th { color:var(--muted); font-size:14px; font-weight:400; text-transform:uppercase; letter-spacing:.08em; }
td,td code,td .status,td .validity { font-size:14px; font-weight:400; }
code { color:var(--code); }
.status { color:var(--offline); }
.status.connected { color:#4ade80; }
.validity.valid { color:#4ade80; }
.validity.expired { color:#f87171; }
.actions { text-align:right; white-space:nowrap; }
.actions form { display:inline; margin-left:8px; }
.actions > button { margin-left:8px; }
.action-button { display:inline-flex; align-items:center; justify-content:center; width:92px; height:38px; padding:0 12px; border-radius:9px; color:#fff; font-family:inherit; font-size:14px; font-weight:400; line-height:1; vertical-align:middle; }
.download-button { background:#16a34a; }
.rename-button { background:#2563eb; }
.delete-button { background:#dc2626; }
.alert { padding:13px 16px; margin-bottom:18px; border:1px solid var(--alert-border); border-radius:10px; background:var(--alert-bg); color:var(--alert-text); }
.login-page { display:grid; place-items:center; }
.login-card { width:min(420px,90vw); padding:38px; }
.login-card h1 { margin-top:0; }
.login-card p { color:var(--muted); margin-bottom:28px; }
.login-card form { display:grid; gap:12px; }
.login-card input { width:100%; min-width:0; }
dialog { width:min(460px,calc(100vw - 32px)); padding:0; color:var(--text); background:var(--surface-solid); border:1px solid var(--input-border); border-radius:18px; box-shadow:0 24px 80px var(--shadow); }
dialog::backdrop { background:var(--dialog-backdrop); backdrop-filter:blur(3px); }
dialog form { display:grid; gap:16px; padding:28px; }
.dialog-heading { display:flex; align-items:start; justify-content:space-between; gap:20px; }
.dialog-heading h2 { margin:5px 0 0; }
.dialog-close { background:#202a38; }
.dialog-heading .dialog-close { width:38px; height:38px; padding:0; font-size:24px; line-height:1; }
dialog label { display:grid; gap:7px; color:var(--muted); font-size:.88rem; font-weight:700; }
dialog input { width:100%; min-width:0; }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:4px; }
@media(max-width:720px){
  header { padding:0 20px; }
  main { width:min(94vw,1120px); margin:24px auto; }
  .summary-card,.panel-heading { align-items:stretch; flex-direction:column; }
  .add-form { flex-direction:column; }
  .add-form input { min-width:0; width:100%; }
  table,tbody { display:block; width:100%; }
  thead { display:none; }
  tbody tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:16px; border-bottom:1px solid var(--border); }
  tbody td { display:flex; min-width:0; flex-direction:column; gap:7px; padding:4px 8px 12px; border:0; text-align:left; }
  tbody td::before { content:attr(data-label); color:var(--muted); font-size:14px; font-weight:400; letter-spacing:.08em; text-transform:uppercase; }
  tbody td code { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  tbody td.actions { grid-column:1 / -1; display:flex; flex-direction:row; gap:8px; padding:8px 8px 0; }
  tbody td.actions::before { display:none; }
  .actions .action-button,.actions form { flex:1 1 0; width:auto; min-width:0; margin:0; }
  .actions form .action-button { width:100%; }
  header { height:auto; min-height:72px; gap:12px; flex-wrap:wrap; padding-top:12px; padding-bottom:12px; }
  .header-actions { width:100%; }
  .header-actions button,.header-actions form { flex:1; }
  .header-actions .theme-toggle { flex:0 0 42px; }
  .header-actions form button { width:100%; }
}