:root{--bg:#070b16;--glass1:#0d1327;--glass2:#0a0f22;--line:#1a2750;--txt:#e7efff;--muted:#9fb0d1;--b1:#3b82f6;--b2:#2563eb;--b3:#1d4ed8;--ok:#22c55e;--err:#ef4444}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;color:var(--txt);background:linear-gradient(180deg,#060a15,#070b16);padding-bottom:120px}
a{color:#dbeafe;text-decoration:none}code{background:rgba(255,255,255,.06);border:1px solid var(--line);padding:2px 6px;border-radius:6px}
.nav{position:sticky;top:0;z-index:1000;background:rgba(8,12,28,.55);border-bottom:1px solid rgba(255,255,255,.06);backdrop-filter:blur(10px) saturate(1.2)}
.nav-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;gap:10px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:900}
.links{display:flex;align-items:center;gap:10px}
.links a,.links .trigger{color:#e9f2ff;font-weight:800;padding:10px 12px;border-radius:12px}
.links a:hover,.links .trigger:hover{background:rgba(255,255,255,.08)}
.item{position:relative}
.chev{font-size:10px;opacity:.9}
.item .dropdown{position:absolute;top:calc(100% + 8px);left:0;display:none;min-width:220px;
  background:linear-gradient(180deg,#0f1a2f,#0a1022);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 60px rgba(0,0,0,.5); padding:8px; z-index:1200}
.item.open>.dropdown{display:block;animation:fadeIn .12s ease-out}
.dropdown::before{content:"";position:absolute;top:-8px;left:18px;border-width:0 8px 8px 8px;border-style:solid;border-color:transparent transparent var(--line) transparent}
.dropdown a{display:block;color:#e2e8f0;padding:10px 12px;border-radius:10px}
.dropdown a:hover{background:rgba(59,130,246,.22)}
.menu-toggle{display:none;background:#0f1a2f;border:1px solid var(--line);color:#cfe3ff;padding:10px 12px;border-radius:10px;font-weight:800}
.container{max-width:1280px;margin:24px auto;padding:0 16px}
.card{background:linear-gradient(180deg,var(--glass1),var(--glass2));border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.55);padding:22px}
h1,h2,h3{margin:0 0 12px;color:#eaf2ff}.helper{color:var(--muted)}.muted{color:var(--muted)}
.btn,button{background:linear-gradient(180deg,var(--b1),var(--b2));border:1px solid rgba(255,255,255,.12);color:#fff;padding:12px 16px;font-weight:900;border-radius:12px;cursor:pointer;box-shadow:0 10px 26px rgba(59,130,246,.35)}
input,select{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#0a0f1d;color:#e6eeff;height:48px;line-height:20px;box-sizing:border-box;min-width:0}
.input-row{position:relative}.eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;color:#9fb0d1}
.hero{max-width:1280px;margin:28px auto;padding:0 16px}.hero-inner{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:center;background:linear-gradient(180deg,#0e1632,#0a1022);border:1px solid var(--line);border-radius:22px;box-shadow:0 24px 80px rgba(0,0,0,.6);padding:36px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}@media (max-width:1000px){.hero-inner{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}}
.table{width:100%;border-collapse:collapse;margin-top:12px}.table th,.table td{border:1px solid var(--line);padding:10px;text-align:left}.table th{background:#0f1a2f;color:#cfe3ff;cursor:pointer}
.table .actions{width:480px} /* Increased width for action buttons */
.table-responsive{overflow-x:auto;width:100%}
.tabs{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}.tab-btn{background:#0f1a2f;border:1px solid var(--line);color:#cfe3ff;padding:10px 12px;border-radius:10px;cursor:pointer;white-space:nowrap}.tab-btn.active{background:linear-gradient(180deg,#2563eb,#1d4ed8)}.tab{display:none}.tab.active{display:block}
.toast{position:fixed;right:16px;bottom:76px;min-width:240px;max-width:360px;background:linear-gradient(180deg,#0f1a2f,#0b1220);color:#cfe3ff;border:1px solid var(--line);border-left:6px solid var(--b2);padding:12px 14px;border-radius:12px;box-shadow:0 10px 26px rgba(0,0,0,.55);display:none;z-index:90}.toast.show{display:block;animation:fadeIn .2s ease-out}.toast.error{border-left-color:var(--err)}.toast.success{border-left-color:var(--ok)}
.footer{position:fixed;left:0;right:0;bottom:0;height:48px;display:flex;align-items:center;justify-content:center;background:rgba(7,11,22,.6);backdrop-filter:blur(6px);border-top:1px solid var(--line);color:#93a5c7;font-weight:600}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
input[type=date]{height:48px;line-height:48px}
select{height:48px;line-height:48px}
/* ---- Keys row: desktop single row; mobile stacks neatly ---- */
label{display:flex;align-items:center;gap:8px}
label .note{font-size:12px;color:var(--muted);font-weight:600;opacity:.95;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.form-row{display:grid;gap:12px;align-items:end;grid-template-columns:minmax(0,1.4fr) minmax(0,1.8fr) minmax(160px,1fr) minmax(140px,0.8fr);padding-bottom:4px}
.form-row .col{min-width:0}
.controls-inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* DEVICE MODE v1 */
body.device-mobile .nav-inner{flex-wrap:wrap}
body.device-mobile .menu-toggle{display:block; order:2}
body.device-mobile .links{order:3; width:100%; display:none; flex-direction:column; gap:6px; padding:8px 0}
body.device-mobile .links.open{display:flex}
body.device-mobile .item{width:100%}
body.device-mobile .item .trigger{display:flex; justify-content:space-between; align-items:center}
body.device-mobile .item .dropdown{position:static; margin-top:6px; display:none; border:1px solid var(--line); box-shadow:none}
body.device-mobile .item.open>.dropdown{display:block}
body.device-mobile .dropdown::before{display:none}
body.device-mobile .hero-inner{grid-template-columns:1fr}
body.device-mobile .grid-3{grid-template-columns:1fr}
body.device-mobile .table .actions{width:auto}
body.device-mobile .form-row{grid-template-columns:1fr}
body.device-desktop .menu-toggle{display:none}

/* Status indicators */
.status-active{color:var(--ok)}
.status-expired{color:var(--err)}
.status-frozen{color:#f39c12}

/* Sort indicators */
.sort-asc::after{content:" ↑"}
.sort-desc::after{content:" ↓"}
.sort-none::after{content:" ↕"}

/* Action buttons */
.action-buttons{display:flex;gap:4px;flex-wrap:wrap}
.action-buttons button{padding:6px 8px;font-size:12px;font-weight:600}