/* =====================================================================
   MintSesh console — operator design system.
   Strict-CSP safe: external stylesheet only, no inline styles anywhere
   in the templates. Usage-bar widths use bucket classes (.w0..w100).
   ===================================================================== */
:root{
  --bg:#0c0f0d; --panel:#121613; --panel2:#171c18;
  --line:#273129; --line2:#354238;
  --text:#edf2ee; --muted:#93a198; --faint:#7c877f;
  --ok:#6d8f79;
  --mint:#87d7a1; --mint2:#a1e4b6; --mintdim:#173322;
  --amber:#d8b36a; --amberdim:#352b16;
  --red:#df7d7d; --reddim:#351b1b;
  --slate:#9aa9b0; --slatedim:#20292d;
  --expire:#7f8c81; --expiredim:#161b17;
  --r:10px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  --sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;color:var(--text);
  background:
    linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.016) 1px,transparent 1px),
    var(--bg);
  background-size:34px 34px;
  font:15px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}

/* ---- shell ---- */
.app{min-height:100vh;display:grid;grid-template-columns:220px minmax(0,1fr)}
.sidebar{border-right:1px solid var(--line);background:rgba(12,15,13,.96);padding:22px 14px 16px;display:flex;flex-direction:column;min-height:100vh;position:sticky;top:0;align-self:start}
.brand{padding:2px 8px 22px;border-bottom:1px solid var(--line)}
.brandmark{display:flex;align-items:center;gap:10px;font-weight:750;font-size:18px;letter-spacing:-.01em}
.glyph{width:28px;height:28px;border:1px solid var(--line2);border-radius:7px;display:grid;place-items:center;color:var(--mint);font:12px var(--mono);background:var(--panel)}
.brandsub{margin-top:6px;color:var(--muted);font-size:11px;letter-spacing:.11em;text-transform:uppercase}
.nav{padding-top:16px;display:grid;gap:3px}
.nav a{padding:9px 10px;border-radius:7px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;font-size:14px}
.nav a:hover{background:var(--panel);color:var(--text)}
.nav a.active{color:var(--text);background:var(--panel2);box-shadow:inset 2px 0 0 var(--mint)}
.count{font:11px var(--mono);color:var(--faint)}
.sidebottom{margin-top:auto;padding:14px 8px 2px;border-top:1px solid var(--line);display:grid;gap:12px}
.sys{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(109,143,121,.10)}
.user{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:12px;margin:0}
.logout{border:0;background:none;color:var(--faint);font:12px var(--sans);cursor:pointer;padding:0}
.logout:hover{color:var(--text)}

.main{min-width:0}
.topbar{height:64px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 26px;background:rgba(12,15,13,.9);position:sticky;top:0;z-index:5}
.context{display:flex;align-items:center;gap:12px;min-width:0}
.ctitle{font-weight:650}
.host{font:12px var(--mono);color:var(--faint)}
.content{padding:26px 28px 48px;max-width:1400px;margin:auto}

/* ---- buttons / links ---- */
.btn{display:inline-flex;align-items:center;gap:7px;min-height:38px;border-radius:7px;border:1px solid var(--line2);padding:0 13px;background:var(--panel);color:var(--text);cursor:pointer;font:600 13px var(--sans)}
.btn:hover{border-color:#46564a;background:#171d18}
.btn.primary{background:var(--mintdim);border-color:#2f5d3d;color:var(--mint2)}
.btn.primary:hover{background:#1c3f29}
.btn.danger{color:#f0a2a2;border-color:#5a3232;background:var(--reddim)}
.btn.danger:hover{background:#43201f}
.btn.sm{min-height:33px;padding:0 10px;font-size:12px}
.btn.block{width:100%;justify-content:center}
.ghost{color:var(--muted);font-size:13px}
.ghost:hover{color:var(--text)}
.backlink{color:var(--faint);font:12px var(--mono);display:inline-block;margin-bottom:16px}
.backlink:hover{color:var(--text)}
.inline{display:inline;margin:0}

/* ---- interaction: focus + transitions (polish) ---- */
.btn,.nav a,.passrow,.metric,.status,.tag,.backlink,.ghost,.logout,.revoke-link,
.infobox>summary,.pname a{transition:background .13s ease,border-color .13s ease,color .13s ease,box-shadow .13s ease}
.btn:focus-visible,.nav a:focus-visible,.backlink:focus-visible,.ghost:focus-visible,
.logout:focus-visible,.revoke-link:focus-visible,.infobox>summary:focus-visible,
.pname a:focus-visible{outline:2px solid var(--mint);outline-offset:2px;border-radius:6px}

/* ---- page head ---- */
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}
.kicker{font:600 11px/1 var(--mono);letter-spacing:.15em;color:var(--mint);text-transform:uppercase;margin-bottom:9px}
h1{font-size:27px;letter-spacing:-.02em;font-weight:700}
.lead{margin-top:8px;color:var(--muted);max-width:60ch;line-height:1.55}
h2{font-size:17px;font-weight:700;letter-spacing:-.01em}
.sectionhead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:13px}
.section{margin-top:30px}

/* ---- metrics ---- */
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:24px}
.metric{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:17px}
.metric.attn{border-color:#5a4a22;background:var(--amberdim);box-shadow:inset 2px 0 0 var(--amber)}
.mlabel{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.07em}
.mvalue{margin-top:11px;font:700 30px/1 var(--mono);letter-spacing:-.04em}
.mvalue.warn{color:var(--amber)}
.mnote{margin-top:10px;color:var(--faint);font-size:12px}

/* ---- panels / split ---- */
.split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.85fr);gap:16px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.phead{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 16px;border-bottom:1px solid var(--line)}
.phead.divided{border-top:1px solid var(--line)}
.ptitle{font-size:13px;font-weight:700}
.pmeta{font:11px var(--mono);color:var(--faint)}
.activityrow{display:grid;grid-template-columns:64px 170px minmax(0,1fr);gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid rgba(39,49,41,.7)}
.activityrow:last-child{border-bottom:0}
.time{font:12px var(--mono);color:var(--faint)}
.event{font-size:13px}
.event.deny{color:var(--red)}
.target{font-size:13px;color:var(--muted);font-family:var(--mono)}
.notice{padding:13px 16px;display:flex;gap:12px;border-bottom:1px solid rgba(39,49,41,.7)}
.notice:last-child{border:0}
.mark{width:8px;height:8px;border-radius:2px;margin-top:5px;flex:none;background:var(--amber)}
.notice.good .mark{background:var(--mint)}
.notice.bad .mark{background:var(--red)}
.ntitle{font-size:13px;font-weight:650}
.ncopy{margin-top:4px;color:var(--muted);font-size:12px;line-height:1.45}

/* ---- pass list ---- */
.passlist{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.passrow{display:grid;grid-template-columns:minmax(200px,1.05fr) minmax(210px,1fr) minmax(220px,.95fr) auto;align-items:center;gap:20px;padding:16px 18px;border-bottom:1px solid var(--line)}
.passrow:last-child{border:0}
.passrow:hover{background:var(--panel2)}
.passrow.dim{opacity:.62}
.passrow.dim:hover{background:var(--panel)}
.pname{font-weight:700}
.pname a{color:inherit;display:inline-block}
.passrow:hover .pname a{color:var(--mint2)}
.psub{margin-top:6px;color:var(--faint);font:11px var(--mono)}
.rowactions{display:flex;gap:7px;justify-content:flex-end;align-items:center}

/* ---- status pills ---- */
.status{display:inline-flex;align-items:center;gap:7px;width:max-content;padding:4px 9px;border:1px solid;border-radius:999px;font:700 10px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.status:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.status.active{color:var(--mint);background:var(--mintdim);border-color:#2d5d3c}
.status.disabled{color:var(--slate);background:var(--slatedim);border-color:#39474d}
.status.exhausted{color:var(--amber);background:var(--amberdim);border-color:#54441f}
.status.expired{color:var(--expire);background:var(--expiredim);border-color:#2b342d}
.status.revoked{color:var(--red);background:var(--reddim);border-color:#553030}
/* direct-access marker (orthogonal to status) + status stack on detail */
.statustags{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.tag{display:inline-flex;align-items:center;width:max-content;padding:3px 8px;border:1px solid var(--line2);border-radius:4px;font:700 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--panel2)}
.tag.direct{color:var(--amber);background:var(--amberdim);border-color:#54441f}
/* zero-JS info disclosure (native <details>): used for the direct-access warning */
.infobox{margin-top:16px;border:1px solid var(--line);border-radius:8px;background:var(--panel2)}
.infobox>summary{cursor:pointer;padding:11px 14px;color:var(--muted);font-size:13px;list-style:none}
.infobox>summary::-webkit-details-marker{display:none}
.infobox>summary:before{content:"\25B8  ";color:var(--faint)}
.infobox[open]>summary{color:var(--text);border-bottom:1px solid var(--line)}
.infobox[open]>summary:before{content:"\25BE  "}
.infobody{padding:12px 14px;font-size:13px;line-height:1.55;color:var(--muted)}
.infobody p{margin:0 0 9px}
.infobody p:last-child{margin-bottom:0}
.infobody b{color:var(--text)}
.infobody .warn-line{color:var(--amber)}
.infobody .warn-line b{color:var(--amber)}

/* ---- usage meter ---- */
.usage{margin-top:10px}
.utop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12px}
.ustrong{font-family:var(--mono)}
.unote{color:var(--faint)}
.bar{margin-top:8px;height:5px;border-radius:99px;background:#202720;overflow:hidden}
.fill{height:100%;background:var(--mint)}
.fill.warn{background:var(--amber)}
.fill.dead{background:var(--faint)}
.usage.none .bar{background:repeating-linear-gradient(90deg,#202720 0 6px,transparent 6px 12px)}
.w0{width:0}.w5{width:5%}.w10{width:10%}.w15{width:15%}.w20{width:20%}.w25{width:25%}
.w30{width:30%}.w35{width:35%}.w40{width:40%}.w45{width:45%}.w50{width:50%}.w55{width:55%}
.w60{width:60%}.w65{width:65%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w85{width:85%}
.w90{width:90%}.w95{width:95%}.w100{width:100%}

/* ---- pass meta grid ---- */
.meta{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;font-size:12px;color:var(--muted)}
.meta b{display:block;color:var(--text);font:600 12px var(--mono);margin-top:2px}

/* ---- pass detail ---- */
.detail{display:grid;grid-template-columns:minmax(0,1fr) 312px;gap:16px}
.detailmain,.share{background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.dtitle{padding:18px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.dtitle h2{font-size:20px}
.dtitle p{margin-top:8px;color:var(--muted);font-size:13px;line-height:1.5;max-width:52ch}
.dgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line)}
.datum{padding:15px 16px;border-right:1px solid var(--line)}
.datum:last-child{border-right:0}
.dlabel{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.07em}
.dvalue{margin-top:7px;font:650 13px var(--mono)}
.dactions{padding:14px 16px;display:flex;gap:8px;align-items:center}
.spacer{flex:1}
.srow{display:grid;grid-template-columns:120px 1fr 1.1fr auto;gap:12px;padding:11px 16px;border-bottom:1px solid rgba(39,49,41,.72);font-size:12px;align-items:center}
.srow:last-child{border-bottom:0}
.srow.header{color:var(--faint);text-transform:uppercase;letter-spacing:.07em;font-size:10px;background:#101410}
.srow code{font-family:var(--mono);color:var(--muted)}
.srow form{margin:0;justify-self:end}
.revoke-link{border:0;background:none;color:var(--red);font:600 12px var(--sans);cursor:pointer;padding:0}
.revoke-link:hover{text-decoration:underline}
.emptyrow{padding:16px;color:var(--faint);font-size:13px}

.share{align-self:start;padding:16px}
.share h3{font-size:14px}
.share p{margin-top:7px;color:var(--muted);font-size:12px;line-height:1.5}
.sharemeta{border-top:1px solid var(--line);margin-top:16px;padding-top:13px;display:grid;gap:6px;font:11px var(--mono);color:var(--muted)}

/* ---- forms ---- */
.formcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px;max-width:30rem}
label{display:block;margin:14px 0 6px;color:var(--muted);font-size:13px}
label:first-child{margin-top:0}
input[type=text],input[type=password],input:not([type]){width:100%;padding:10px 12px;background:var(--bg);border:1px solid var(--line2);color:var(--text);font:14px var(--sans);border-radius:7px}
input:focus{outline:2px solid var(--mint);outline-offset:1px;border-color:var(--mint)}
.field-check{display:flex;gap:9px;align-items:center;margin-top:16px;color:var(--text);font-size:14px}
.cb{width:auto}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:20px}

/* ---- messages ---- */
.error{color:#f0a2a2;background:var(--reddim);border:1px solid #5a3232;border-radius:7px;padding:11px 13px;margin:0 0 14px;font-size:13px}
.callout{border-radius:8px;padding:14px 16px;margin:18px 0;font-size:13px;line-height:1.55}
.callout.danger{background:var(--reddim);border:1px solid #5a3232;color:#f2b3b3}
.callout.warn{background:var(--amberdim);border:1px solid #54441f;color:var(--amber)}
.callout b{color:#fff}
.empty{color:var(--faint);font-size:14px;padding:20px 0}

/* ---- data / code ---- */
.qrbox{background:#e7ece7;display:inline-block;padding:12px;border-radius:6px}
.qrbox svg{width:190px;height:190px;display:block}
.share .qrbox{display:block;width:max-content;margin:16px auto}
.url{display:block;margin:14px 0;padding:12px;background:var(--bg);border:1px solid var(--line2);border-radius:7px;font:13px var(--mono);color:var(--mint2);word-break:break-all}
.secret{display:block;margin:12px 0;padding:12px;background:var(--bg);border:1px dashed var(--line2);border-radius:7px;font:14px var(--mono);letter-spacing:.14em;color:var(--text)}

/* ---- table (audit) ---- */
.table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.table th,.table td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);font-weight:400;font-size:13px}
.table thead th{color:var(--faint);font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;background:#101410}
.table tbody tr:last-child td{border-bottom:0}
.table .mono{font-family:var(--mono);color:var(--muted)}
.table .deny{color:var(--red)}

.foot{margin-top:30px;color:var(--faint);font:11px var(--mono);letter-spacing:.04em}

/* ---- auth pages (no sidebar) ---- */
.authwrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.authbox{width:100%;max-width:24rem;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:26px}
.authbrand{display:flex;align-items:center;gap:10px;font-weight:750;font-size:19px;margin-bottom:4px}
.authbrand .glyph{width:30px;height:30px}
.authsub{color:var(--muted);font-size:13px;margin:2px 0 20px}
.authbox h2{font-size:15px;color:var(--text);margin-bottom:14px}
.authbox p.hint{color:var(--muted);font-size:13px;line-height:1.5;margin-bottom:6px}

/* ---- responsive ---- */
@media(max-width:1100px){
  .metrics{grid-template-columns:repeat(2,1fr)}
  .split,.detail{grid-template-columns:1fr}
  .passrow{grid-template-columns:1fr 1fr;row-gap:16px}
  .rowactions{grid-column:1/-1;justify-content:flex-start}
}
@media(max-width:760px){
  .app{display:block}.sidebar{display:none}
  .topbar{padding:0 16px}.host{display:none}
  .content{padding:20px 16px 40px}
  .metrics{grid-template-columns:1fr 1fr}
  .activityrow{grid-template-columns:56px 1fr}.activityrow .target{grid-column:2}
  .passrow{grid-template-columns:1fr}
  .dgrid{grid-template-columns:1fr 1fr}.datum{border-bottom:1px solid var(--line)}
  .srow{grid-template-columns:1fr 1fr}.srow.header{display:none}
  .pagehead{flex-direction:column;align-items:flex-start}
}
@media(max-width:440px){.metrics,.dgrid,.srow,.meta{grid-template-columns:1fr}}