:root{--bg:#0f172a;--card:#111827;--text:#e5e7eb;--muted:#9ca3af;--primary:#22c55e;--secondary:#60a5fa;--danger:#ef4444;--late:#f59e0b;--expired:#f87171;--border:#334155;--input-bg:#0b1220;--shadow:0 8px 30px rgba(0,0,0,0.25);--ring:color-mix(in oklab, var(--secondary) 30%, transparent)}
:root[data-theme='light']{--bg:#f3f4f6;--card:#ffffff;--text:#111827;--muted:#6b7280;--primary:#16a34a;--secondary:#2563eb;--danger:#dc2626;--late:#d97706;--expired:#ef4444;--border:#e5e7eb;--input-bg:#ffffff;--shadow:0 8px 24px rgba(0,0,0,0.08);--ring:color-mix(in oklab, var(--secondary) 35%, transparent)}
:root[data-theme='emerald']{--bg:#062b22;--card:#0b3a2e;--text:#e8fff6;--muted:#a3dac8;--primary:#10b981;--secondary:#14b8a6;--danger:#ef4444;--late:#f59e0b;--expired:#f87171;--border:#185a49;--input-bg:#083127;--shadow:0 12px 34px rgba(0,0,0,0.35);--ring:color-mix(in oklab, var(--primary) 30%, transparent)}
:root[data-theme='ocean']{--bg:#0b1020;--card:#0e1a35;--text:#e6f0ff;--muted:#a0b6d9;--primary:#3b82f6;--secondary:#22d3ee;--danger:#ef4444;--late:#f59e0b;--expired:#f87171;--border:#1f2f56;--input-bg:#0a142b;--shadow:0 12px 34px rgba(0,0,0,0.35);--ring:color-mix(in oklab, var(--secondary) 35%, transparent)}
:root[data-theme='rose']{--bg:#1a0f18;--card:#271222;--text:#ffeaf1;--muted:#e3b8c9;--primary:#e11d48;--secondary:#f472b6;--danger:#dc2626;--late:#f59e0b;--expired:#ef4444;--border:#4a1738;--input-bg:#1f0d19;--shadow:0 12px 34px rgba(0,0,0,0.35);--ring:color-mix(in oklab, var(--secondary) 35%, transparent)}
:root[data-theme='amber']{--bg:#1a1406;--card:#281d0a;--text:#fff7ed;--muted:#e8d3b0;--primary:#f59e0b;--secondary:#fbbf24;--danger:#ef4444;--late:#ffb020;--expired:#f87171;--border:#4a3213;--input-bg:#211805;--shadow:0 12px 34px rgba(0,0,0,0.35);--ring:color-mix(in oklab, var(--primary) 35%, transparent)}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(1200px 600px at 100% -20%, color-mix(in oklab, var(--secondary) 10%, transparent), transparent 60%), radial-gradient(1000px 500px at -10% 120%, color-mix(in oklab, var(--primary) 10%, transparent), transparent 60%), var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto}
a{color:var(--text);text-decoration:none}
input,select,button{padding:.6rem;border-radius:.75rem;border:1px solid var(--border);background:var(--input-bg);color:var(--text);width:100%;transition:.2s border-color,.2s box-shadow,.2s transform}
input:focus,select:focus{outline:none;border-color:var(--secondary);box-shadow:0 0 0 3px var(--ring)}
label{display:flex;flex-direction:column;gap:.3rem}
.btn{background:linear-gradient(180deg, color-mix(in oklab, var(--card) 70%, var(--secondary)), color-mix(in oklab, var(--card) 90%, black));border:0;padding:.6rem 1rem;border-radius:.75rem;display:inline-block;box-shadow:var(--shadow);transition:.15s transform,.2s filter,.2s box-shadow}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(0,0,0,0.35)}
.btn:active{transform:translateY(0);filter:saturate(120%)}
.btn.primary{background:linear-gradient(180deg, color-mix(in oklab, var(--primary) 75%, white), color-mix(in oklab, var(--primary) 85%, black));color:#111827}
.btn.secondary{background:linear-gradient(180deg, color-mix(in oklab, var(--secondary) 75%, white), color-mix(in oklab, var(--secondary) 85%, black))}
.btn.danger{background:var(--danger)}
.btn.small{padding:.3rem .6rem;font-size:.9rem}
.linklike{background:transparent;border:0;color:var(--text);cursor:pointer}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid var(--border);background:linear-gradient(180deg, color-mix(in oklab, var(--bg) 90%, black), color-mix(in oklab, var(--bg) 96%, black));backdrop-filter:saturate(180%) blur(8px);position:sticky;top:0;z-index:10}
.brand{font-weight:700}
.nav{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.nav a,.nav form{margin-inline-start:0}
.container{padding:1rem}
.card{background:linear-gradient(180deg, color-mix(in oklab, var(--card) 96%, white), color-mix(in oklab, var(--card) 94%, black));padding:1rem;border-radius:1rem;margin-bottom:1rem;border:1px solid var(--border);box-shadow:var(--shadow)}
.card:hover{border-color:color-mix(in oklab, var(--secondary) 40%, var(--border));}
.card.gradient{background:linear-gradient(135deg, color-mix(in oklab, var(--card) 80%, var(--primary)), color-mix(in oklab, var(--card) 80%, var(--secondary)));border:0}
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-5{grid-template-columns:repeat(5,1fr)}
@media (max-width:900px){.grid-3,.grid-5{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid-2,.grid-3,.grid-5{grid-template-columns:1fr}}
.flex{display:flex;gap:.5rem;align-items:center}
.flex-between{display:flex;justify-content:space-between;align-items:center}
.toolbar{display:flex;gap:.5rem;align-items:center;margin-bottom:1rem}
.table-responsive{overflow:auto}
.table{width:100%;border-collapse:collapse;border:1px solid var(--border);border-radius:.75rem;overflow:hidden}
.table th{padding:.75rem;border-bottom:1px solid var(--border);text-align:start;background:color-mix(in oklab, var(--card) 88%, var(--secondary))}
.table td{padding:.75rem;border-bottom:1px solid var(--border);text-align:start}
.table tbody tr:nth-child(odd){background:color-mix(in oklab, var(--card) 94%, black 6%)}
.table tbody tr:hover{background:color-mix(in oklab, var(--secondary) 12%, var(--card))}
.row-late{background:color-mix(in oklab, var(--late) 14%, var(--card))}
.row-expired{background:color-mix(in oklab, var(--expired) 12%, var(--card))}
.stat{text-align:center}
.stat-value{font-size:2rem;font-weight:700;margin-top:.5rem}
.alert{background:color-mix(in oklab, var(--secondary) 10%, var(--card));padding:.75rem;border-radius:.75rem;border:1px solid var(--border)}
.alert-error{background:color-mix(in oklab, var(--danger) 16%, var(--card))}
.muted{color:var(--muted)}
.rounded{border-radius:.75rem}
.rounded-lg{border-radius:1.25rem}
.shadow-lg{box-shadow:0 20px 50px rgba(0,0,0,0.4)}
.no-print{display:block}
@media print{.no-print{display:none}}
.print-page .sheet{padding:10mm}
.card-item{border-radius:.6rem;overflow:hidden}
.actions{margin-top:1rem;display:flex;gap:.5rem}
.muted{color:var(--muted)}
.cards-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem}
.card-item{border:1px dashed var(--border);min-height:200px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, color-mix(in oklab, var(--bg) 85%, black), color-mix(in oklab, var(--bg) 80%, var(--secondary)));border-radius:.75rem;position:relative;overflow:hidden}
.card-item::after{content:'';position:absolute;inset:0;background:radial-gradient(800px 300px at -20% -20%, color-mix(in oklab, var(--secondary) 12%, transparent), transparent 60%);pointer-events:none}
.card-face{padding:.5rem;text-align:center}
.card-title{font-weight:700;margin-bottom:.25rem}
.card-qr img{width:80px;height:80px}
.print-actions{margin-top:1rem}
@media print{.no-print{display:none}.topbar,.footer{display:none}.container{padding:0}.card-item{page-break-inside:avoid;background:none;}}
.footer{padding:1rem;color:var(--muted)}

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
}
.login-box {
  width: 100%;
  max-width: 400px;
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
}
.login-box h1 {
  text-align: center;
  margin-top: 0;
}
.theme-toggle{display:inline-flex;align-items:center;gap:.4rem}
.theme-select{min-width:130px}
.theme-select option{color:#111827;background:#ffffff}