:root{
  --bg:#0e1114; --panel:#161a20; --panel2:#1c222a; --line:#28303a; --line2:#333d49;
  --ink:#eef2f6; --mut:#94a1b0; --faint:#6d7986;
  --grn:#3ddc84; --grn-d:#12301f; --red:#ff4d5e; --red-d:#3a1116;
  --amb:#f0a020; --amb-d:#332512; --blue:#4aa8ff; --blue-d:#122436;
  --brand:#3ddc84;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:14.5px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
button{font:inherit;cursor:pointer;border:0;border-radius:8px;padding:9px 14px;font-weight:650;
  background:var(--brand);color:#07200f;transition:.15s}
button:hover{filter:brightness(1.08)}
button:disabled{opacity:.5;cursor:not-allowed}
button.ghost{background:var(--panel2);color:var(--ink);border:1px solid var(--line2)}
button.ghost:hover{background:#262f3a}
button.danger{background:var(--red-d);color:var(--red);border:1px solid #5a2029}
button.sm{padding:5px 10px;font-size:12px;border-radius:6px}
input,select{background:#0f1418;border:1px solid var(--line2);color:var(--ink);border-radius:8px;
  padding:9px 11px;font:inherit;outline:none;width:100%}
input:focus,select:focus{border-color:var(--brand)}
label{display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mut);margin-bottom:6px;font-weight:700}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;
  background:radial-gradient(1100px 500px at 50% -10%,#16241d 0%,var(--bg) 60%)}
.login{width:100%;max-width:390px;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:34px 30px}
.login img{height:46px;display:block;margin:0 auto 22px}
.login h1{font-size:17px;margin:0 0 4px;text-align:center}
.login p.sub{margin:0 0 24px;text-align:center;color:var(--mut);font-size:12.5px}
.login .field{margin-bottom:14px}
.login button{width:100%;margin-top:8px;padding:11px}
.err{background:var(--red-d);color:var(--red);border:1px solid #5a2029;border-radius:8px;
  padding:9px 12px;font-size:12.5px;margin-bottom:14px}
.hintbox{margin-top:18px;padding:10px 12px;background:#101519;border:1px dashed var(--line2);
  border-radius:8px;font-size:11.5px;color:var(--faint);text-align:center}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.side{background:#11151a;border-right:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column}
.side img{height:30px;margin:2px 6px 22px}
.nav{display:flex;flex-direction:column;gap:2px;flex:1}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;
  color:var(--mut);font-weight:600;font-size:13.5px;cursor:pointer}
.nav a:hover{background:var(--panel2);color:var(--ink)}
.nav a.on{background:var(--grn-d);color:var(--grn)}
.nav .ico{width:16px;text-align:center;opacity:.9}
.whoami{border-top:1px solid var(--line);padding-top:12px;font-size:12px;color:var(--mut)}
.whoami b{display:block;color:var(--ink);font-size:12.5px}
.whoami .role{display:inline-block;margin-top:5px;padding:2px 8px;border-radius:20px;
  background:var(--blue-d);color:var(--blue);font-size:10.5px;font-weight:700}

.main{padding:22px 26px 40px;overflow-x:hidden}
.top{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.top h1{font-size:20px;margin:0;font-weight:700}
.top .spacer{flex:1}
.pill{font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:20px;background:var(--panel2);color:var(--mut)}
.pill.ok{background:var(--grn-d);color:var(--grn)}
.pill.bad{background:var(--red-d);color:var(--red)}

/* ---------- cards & stats ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:15px 16px}
.card .k{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut);font-weight:700}
.card .v{font-size:28px;font-weight:750;margin-top:6px;letter-spacing:-.02em}
.card.crit .v{color:var(--red)} .card.warn .v{color:var(--amb)}
.card.good .v{color:var(--grn)} .card.info .v{color:var(--blue)}
.card .sub{font-size:11.5px;color:var(--faint);margin-top:3px}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:18px}
.panel h2{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);
  margin:0;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--panel2);
  display:flex;align-items:center;gap:10px}
.panel h2 .spacer{flex:1}
.panel .body{padding:16px}

/* ---------- table ---------- */
.tblwrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut);
  padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap;font-weight:700}
td{padding:11px 14px;border-bottom:1px solid #1e242c;vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#191f26}
td.mono,.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.badge{display:inline-block;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px}
.badge.active{background:var(--grn-d);color:var(--grn)}
.badge.revoked{background:var(--red-d);color:var(--red)}
.badge.expired{background:var(--amb-d);color:var(--amb)}
.badge.superseded{background:#232b34;color:var(--faint)}
.days{font-weight:700}
.days.crit{color:var(--red)} .days.warn{color:var(--amb)} .days.ok{color:var(--mut)}
.filters{display:flex;gap:9px;flex-wrap:wrap;align-items:end;padding:14px 16px;border-bottom:1px solid var(--line)}
.filters .f{min-width:150px}
.filters .f.grow{flex:1;min-width:220px}
.empty{padding:34px;text-align:center;color:var(--faint);font-size:13px}
.rowacts{display:flex;gap:6px;justify-content:flex-end}

/* ---------- modal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(4,7,10,.72);display:grid;place-items:center;z-index:50;padding:20px}
.modal{background:var(--panel);border:1px solid var(--line2);border-radius:14px;width:100%;max-width:430px;padding:22px}
.modal h3{margin:0 0 4px;font-size:16px}
.modal p.sub{margin:0 0 18px;color:var(--mut);font-size:12.5px}
.modal .field{margin-bottom:14px}
.modal .acts{display:flex;flex-wrap:wrap;gap:9px;justify-content:flex-end;margin-top:20px}
.modal .acts > *{flex:0 0 auto;white-space:nowrap}
.modal{max-height:calc(100vh - 40px);overflow-y:auto}
.notice{border-radius:8px;padding:10px 12px;font-size:12.5px;margin:10px 0;border:1px solid var(--line2)}
.notice.bad{border-color:var(--red);background:rgba(229,72,77,.08)}
.notice.warn{border-color:var(--amb);background:rgba(245,166,35,.08)}
.toast{position:fixed;right:20px;bottom:20px;z-index:60;background:var(--panel);
  border:1px solid var(--line2);border-left:3px solid var(--grn);border-radius:10px;
  padding:12px 16px;font-size:13px;max-width:390px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.toast.bad{border-left-color:var(--red)}
.spin{display:inline-block;width:12px;height:12px;border:2px solid currentColor;border-top-color:transparent;
  border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}
@media(max-width:820px){.shell{grid-template-columns:1fr}.side{display:none}}

/* ---------- dashboard extras ---------- */
.dgrid{margin-bottom:18px}
@media(max-width:900px){.dgrid{grid-template-columns:1fr !important}}
.bars{display:flex;align-items:flex-end;gap:14px;height:140px;padding:6px 4px}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px}
.barv{width:100%;max-width:46px;background:linear-gradient(180deg,var(--amb),#7a5310);border-radius:6px 6px 0 0;min-height:3px}
.barn{font-size:12px;font-weight:700}
.barl{font-size:10.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
/* ---------- detail modal ---------- */
.modal{max-width:620px}
table.kv{width:100%;border-collapse:collapse;margin-top:6px}
table.kv td{padding:7px 0;border-bottom:1px solid #1e242c;font-size:13px;vertical-align:top}
table.kv td:first-child{color:var(--mut);width:170px;font-size:12px;text-transform:uppercase;
  letter-spacing:.06em;font-weight:700}
.pem{background:#0b0f13;border:1px solid var(--line);border-radius:8px;padding:10px;
  font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:#8fe3b0;white-space:pre-wrap;
  word-break:break-all;max-height:170px;overflow:auto;margin-top:6px}
textarea{background:#0f1418;border:1px solid var(--line2);color:var(--ink);border-radius:8px;
  padding:10px;font-family:ui-monospace,Menlo,monospace;font-size:12px;width:100%;resize:vertical}
textarea:focus{outline:none;border-color:var(--brand)}
.btnlink{display:inline-block;border-radius:8px;padding:9px 14px;font-weight:650;font-size:14.5px;
  background:var(--brand);color:#07200f;cursor:pointer}
.btnlink:hover{filter:brightness(1.08)}
.btnlink.ghostlink{background:var(--panel2);color:var(--ink);border:1px solid var(--line2)}

.badge.type{background:#1b2a38;color:#7cc4ff}
.bulkbar{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:55;
  background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:10px 16px;
  display:flex;align-items:center;gap:10px;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
input[type=checkbox]{width:auto;accent-color:var(--brand)}

.ssosep{display:flex;align-items:center;gap:10px;color:var(--faint);font-size:11px;margin:16px 0 12px}
.ssosep::before,.ssosep::after{content:"";flex:1;height:1px;background:var(--line)}
.ssobtn{width:100%;padding:11px;background:var(--panel2);color:var(--ink);
  border:1px solid var(--line2);border-radius:8px;font-weight:650;cursor:pointer}
.ssobtn:hover{background:#262f3a;border-color:var(--brand)}

.deptabs{display:flex;gap:6px;margin:4px 0 10px}
.deptab{background:var(--panel2);color:var(--mut);border:1px solid var(--line);border-radius:7px;
  padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer}
.deptab.on{background:var(--grn-d);color:var(--grn);border-color:var(--brand)}
.depnote{color:var(--mut);font-size:12px;line-height:1.5;margin-bottom:8px}

/* ---------- workflows ---------- */
.wf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.wf-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;
  cursor:pointer;transition:.15s}
.wf-card:hover{border-color:var(--brand);transform:translateY(-2px)}
.wf-card h3{margin:8px 0 6px;font-size:15.5px}
.wf-card p{margin:0;color:var(--mut);font-size:13px;line-height:1.5}
.wf-num{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.1em;
  color:var(--brand);background:var(--grn-d);border-radius:999px;padding:3px 9px}
.wf-meta{margin-top:12px;color:var(--faint);font-size:11.5px}
.wf-run{display:grid;grid-template-columns:250px 1fr;gap:16px;align-items:start}
.wf-steps{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px}
.wf-step{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:8px;
  color:var(--mut);font-size:13px}
.wf-step.cur{background:var(--panel2);color:var(--ink)}
.wf-step.ok{color:var(--grn)}
.wf-step.fail{color:var(--red)}
.wf-dot{width:22px;height:22px;border-radius:50%;background:var(--panel2);border:1px solid var(--line2);
  display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
.wf-step.ok .wf-dot{background:var(--grn-d);border-color:var(--grn);color:var(--grn)}
.wf-step.fail .wf-dot{background:var(--red-d);border-color:var(--red);color:var(--red)}
.wf-main{padding:22px}
.wf-why{color:var(--mut);max-width:620px;margin:8px 0 16px;line-height:1.6}
.wf-log{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.wf-result{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--grn);
  border-radius:8px;padding:10px 14px;font-size:13px}
.wf-result div{color:var(--mut);margin-top:3px}
.wf-result pre{background:#0f1418;border-radius:6px;padding:10px;overflow:auto;font-size:11.5px;max-height:260px}
.wf-result summary{cursor:pointer;color:var(--faint);font-size:11.5px;margin-top:6px}
.wf-done{text-align:center;padding:30px 0}
.wf-bigcheck{width:64px;height:64px;border-radius:50%;background:var(--grn-d);color:var(--grn);
  font-size:30px;display:grid;place-items:center;margin:0 auto 14px;border:2px solid var(--grn)}
/* inline field validation */
.ferr{margin:5px 0 0;font-size:12px;color:var(--red);min-height:0}
.ferr:empty{display:none}
input.bad,select.bad{border-color:var(--red)!important}
/* tenant detail rows */
dl.kv{display:grid;grid-template-columns:150px 1fr;gap:6px 14px;margin:8px 0 14px}
dl.kv dt{color:var(--mut, #8b949e)}
dl.kv dd{margin:0}
/* failure-testing timeline */
#rzlog .crit{color:var(--red)}
#rzlog .good{color:var(--green, #3fb950)}
#rzlog .warn{color:var(--amber, #d29922)}
/* risk posture */
.riskbar{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--line, #2a3438)}
.riskbar span{display:block;min-width:4px}
.rk-critical{background:#d64545}.rk-high{background:#e0892b}.rk-medium{background:#d9b92f}.rk-low{background:#3fa66a}
.risklegend{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;font-size:12.5px}
.risklegend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.badge.rkb-critical{background:rgba(214,69,69,.15);color:#e06666}.badge.rkb-high{background:rgba(224,137,43,.15);color:#e0892b}
.badge.rkb-medium{background:rgba(217,185,47,.15);color:#c9a92a}
.spacer{flex:1}

/* Phone width: navigation as a drawer, tables scroll inside their panel (customer review #6, #148). */
.menubtn{display:none}
@media(max-width:820px){
  .menubtn{display:block;position:fixed;top:10px;right:12px;z-index:60;padding:6px 12px;font-size:18px}
  .side.open{display:flex;position:fixed;inset:0 30% 0 0;z-index:70;overflow-y:auto;box-shadow:0 0 40px #000a}
  .main{padding:56px 14px 40px}
  .tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tblwrap table{min-width:640px}
  .modal .acts{position:sticky;bottom:0;background:var(--panel,#161b22);padding-top:8px}
}
/* Key-value tables never collapse their value column (customer review #120). */
table.kv{table-layout:fixed}
table.kv td:last-child{word-break:break-word;overflow-wrap:anywhere}

/* Timestamps stay on one line (review #118). */
td.mono{white-space:nowrap}

/* Certificate details get room (customer review #42). */
.modal.wide{max-width:min(1100px,96vw);width:96vw}

/* toolbar menus (review #26) */
.dd{position:relative;display:inline-block}
.dd>summary{list-style:none;cursor:pointer;user-select:none}
.dd>summary::-webkit-details-marker{display:none}
.dd .ddm{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:220px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:2px}
.dd .ddm a,.dd .ddm button{display:block;width:100%;text-align:left;background:none;border:0;color:inherit;padding:9px 12px;border-radius:7px;font:inherit;cursor:pointer;text-decoration:none}
.dd .ddm a:hover,.dd .ddm button:hover{background:rgba(127,127,127,.14)}
.split{display:inline-flex;align-items:stretch}
.split>button{border-top-right-radius:0;border-bottom-right-radius:0}
.split>.dd>summary{height:100%;display:flex;align-items:center;padding:0 12px;border-radius:0 8px 8px 0;background:var(--brand);color:#07200f;border-left:1px solid rgba(0,0,0,.25)}
/* inventory row actions wrap instead of running off the right edge */
#ct .rowacts{flex-wrap:wrap;max-width:200px;margin-left:auto}
/* a checkbox's label is a sentence, not a field caption (review #33) */
label:has(> input[type=checkbox]),label:has(> input[type=radio]){text-transform:none;letter-spacing:0;font-weight:400;
  font-size:13px;color:var(--ink);display:flex;gap:8px;align-items:flex-start;line-height:1.45}
label:has(> input[type=checkbox]) > input,label:has(> input[type=radio]) > input{width:auto;margin:2px 0 0;flex:none}
/* errors inside the dialog they belong to (review #9) */
.formerr{margin:12px 0 0;padding:10px 12px;border:1px solid var(--red);border-radius:8px;color:var(--red);font-size:13px;line-height:1.45;background:rgba(229,83,75,.08)}
.toastx{background:none;border:0;color:var(--mut);padding:0 0 0 10px;font-size:13px;cursor:pointer}
/* view tabs (review #69) */
.tabs{display:flex;gap:4px;margin:0 0 16px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs .tab{background:none;color:var(--mut);border:0;border-bottom:2px solid transparent;border-radius:0;padding:10px 14px;font-weight:600;white-space:nowrap}
.tabs .tab.on{color:var(--ink);border-bottom-color:var(--brand)}
.tabs .tab:hover{color:var(--ink)}
/* certificate details: one grouped action bar at the top (review #42) */
.dacts{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin:4px 0 14px;padding:10px 0;border-bottom:1px solid var(--line)}
.dgrp{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dgl{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-right:2px}
.dgrp:empty,.dgl:empty{display:none}
/* secrets are masked until asked for */
.secretwrap{display:flex;gap:8px;align-items:flex-start}
.secretwrap .pem{flex:1;margin:0}
.pem.masked{letter-spacing:.15em;color:var(--mut);user-select:none}
.secretfield{position:relative}
.secretfield > input{padding-right:64px}
.secretfield > textarea{padding-right:64px}
.secretfield > .revealbtn,.login .secretfield > .revealbtn{position:absolute;right:6px;top:6px;width:auto;margin:0;
  padding:5px 10px;font-size:11.5px;background:transparent;border:0;color:var(--mut);box-shadow:none}
.secretfield > input + .revealbtn,.login .secretfield > input + .revealbtn{top:50%;transform:translateY(-50%)}
.secretfield > .revealbtn:hover{color:var(--ink);background:rgba(255,255,255,.06)}
textarea.maskedta{-webkit-text-security:disc;text-security:disc}


/* =====================================================================
   Polish layer -- depth, rhythm and motion over the base styles above.
   System fonts only: the console runs on air-gapped networks.
   ===================================================================== */
:root{
  --shadow-1:0 1px 0 rgba(255,255,255,.03) inset, 0 1px 2px rgba(0,0,0,.35);
  --shadow-2:0 1px 0 rgba(255,255,255,.04) inset, 0 12px 32px -12px rgba(0,0,0,.6);
  --ring:0 0 0 3px rgba(61,220,132,.22);
  --ease:cubic-bezier(.2,.7,.2,1);
}
html{color-scheme:dark}
body{font-feature-settings:"cv11","ss01";text-rendering:optimizeLegibility;
  background:radial-gradient(1200px 600px at 110% -10%,rgba(61,220,132,.045),transparent 60%),
             radial-gradient(900px 500px at -10% 110%,rgba(74,168,255,.035),transparent 60%),var(--bg);
  background-attachment:fixed}
::selection{background:rgba(61,220,132,.28);color:#fff}
.v,.barn,.days,td.mono,.mono,table td{font-variant-numeric:tabular-nums}

/* scrollbars */
*{scrollbar-width:thin;scrollbar-color:#2c3540 transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#2a323c;border-radius:10px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#3a4552;background-clip:padding-box}

/* focus: visible for keyboards, quiet for mice */
:focus{outline:none}
:focus-visible{outline:none;box-shadow:var(--ring)}
input,select,textarea{transition:border-color .15s var(--ease),box-shadow .15s var(--ease),background .15s}
input:hover,select:hover,textarea:hover{border-color:#3b4653}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:var(--ring)}
textarea{background:#0f1418;border:1px solid var(--line2);color:var(--ink);border-radius:8px;padding:9px 11px;font:inherit;width:100%}
input::placeholder,textarea::placeholder{color:#56616d}

/* buttons: a little light from above, a press you can feel */
button{transition:filter .15s,background .15s,border-color .15s,transform .08s,box-shadow .15s}
button:where(:not(.ghost,.danger,.tab,.revealbtn,.toastx,.ssobtn,.menubtn)){
  background:linear-gradient(180deg,#52e596,#33c974);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 6px 16px -8px rgba(61,220,132,.55)}
button:not(:disabled):active{transform:translateY(1px) scale(.99)}
button.ghost:hover{border-color:#3d4855}
button.danger:hover{background:#4a1520;border-color:#7a2a35}
.btnlink{transition:background .15s,border-color .15s}

/* sidebar: an accent bar on the current page */
.side{background:linear-gradient(180deg,#12171d,#0f1318);box-shadow:1px 0 0 rgba(255,255,255,.02)}
.nav a{position:relative;transition:background .15s,color .15s}
.nav a.on{background:linear-gradient(90deg,rgba(61,220,132,.16),rgba(61,220,132,.04))}
.nav a.on::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;
  background:var(--grn);box-shadow:0 0 12px rgba(61,220,132,.6)}
.nav a:hover .ico{opacity:1}
.whoami{border-top-color:rgba(255,255,255,.06)}

/* page header */
.top h1{font-size:22px;letter-spacing:-.015em}

/* panels and cards: depth instead of flat boxes */
.panel{border-color:rgba(255,255,255,.07);border-radius:14px;box-shadow:var(--shadow-2);
  background:linear-gradient(180deg,#171c23,#151a20)}
.panel h2{background:transparent;border-bottom-color:rgba(255,255,255,.06);padding:15px 18px}
.panel .body{padding:18px}
.card{position:relative;overflow:hidden;border-color:rgba(255,255,255,.07);border-radius:14px;box-shadow:var(--shadow-1);
  background:linear-gradient(180deg,#181e25,#151a20);transition:transform .18s var(--ease),border-color .18s,box-shadow .18s}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--line2);opacity:.9}
.card.good::before{background:linear-gradient(90deg,var(--grn),transparent)}
.card.crit::before{background:linear-gradient(90deg,var(--red),transparent)}
.card.warn::before{background:linear-gradient(90deg,var(--amb),transparent)}
.card.info::before{background:linear-gradient(90deg,var(--blue),transparent)}
.card[data-cf]:hover,.card[style*="pointer"]:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.14);box-shadow:var(--shadow-2)}
.card .v{font-size:30px;letter-spacing:-.03em}

/* tables */
th{background:rgba(255,255,255,.015)}
tbody tr{transition:background .12s}
tbody tr:hover{background:rgba(255,255,255,.028)}
td{border-bottom-color:rgba(255,255,255,.05)}

/* badges and pills: a hairline ring for crispness */
.badge,.pill{box-shadow:0 0 0 1px rgba(255,255,255,.05) inset;letter-spacing:.02em}
.badge.active{box-shadow:0 0 0 1px rgba(61,220,132,.22) inset}
.badge.revoked{box-shadow:0 0 0 1px rgba(255,77,94,.25) inset}
.badge.expired{box-shadow:0 0 0 1px rgba(240,160,32,.25) inset}

/* modals: blurred backdrop, a gentle arrival */
.modal-bg{background:rgba(4,7,10,.62);backdrop-filter:blur(6px) saturate(120%);-webkit-backdrop-filter:blur(6px) saturate(120%);
  animation:fadein .16s var(--ease)}
.modal{border-color:rgba(255,255,255,.1);border-radius:16px;
  background:linear-gradient(180deg,#1a2028,#161b21);box-shadow:0 30px 80px -20px rgba(0,0,0,.75),0 1px 0 rgba(255,255,255,.05) inset;
  animation:rise .2s var(--ease)}
.modal h3{font-size:17px;letter-spacing:-.01em}
@keyframes fadein{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(8px) scale(.985)}}

/* toasts slide in */
.toast{animation:slidein .22s var(--ease);backdrop-filter:blur(8px);background:rgba(24,30,37,.92)}
@keyframes slidein{from{opacity:0;transform:translateY(10px)}}

/* code and key blocks */
.pem{border-radius:10px;background:#0b0f13;border:1px solid rgba(255,255,255,.06)}

/* login: a card that floats */
.login{border-color:rgba(255,255,255,.08);border-radius:20px;box-shadow:0 40px 100px -30px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.05) inset;
  background:linear-gradient(180deg,rgba(26,32,40,.96),rgba(21,26,32,.96));animation:rise .3s var(--ease)}
.login-wrap{background:radial-gradient(900px 480px at 50% -8%,rgba(61,220,132,.13),transparent 62%),
  radial-gradient(700px 400px at 90% 110%,rgba(74,168,255,.08),transparent 60%),var(--bg)}

/* expiry bars */
.barv{background:linear-gradient(180deg,#ffc15a,#a86d12);box-shadow:0 0 18px -4px rgba(240,160,32,.45)}
.bar{transition:transform .15s var(--ease)}
.bar:hover{transform:translateY(-2px)}

/* tabs underline glides */
.tabs .tab{transition:color .15s,border-color .2s}

/* dropdown menus */
.dd .ddm{animation:rise .14s var(--ease);box-shadow:0 20px 50px -12px rgba(0,0,0,.7)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
.dd .ddm button,.dd .ddm a{box-shadow:none}
#ct .rowacts{max-width:270px}
#ct .rowacts button.sm{padding:4px 9px}
#ct td:last-child{min-width:190px}
.badge{white-space:nowrap}
/* the inventory table fits a laptop screen */
#ct th,#ct td{padding-left:9px;padding-right:9px}
#ct td:last-child{min-width:170px}
#ct .whereCompact .mono{max-width:170px}