/* «مَنار» : المدرسة الليلية للوحة القيادة الرقابية
   Surfaces: layered deep navy. Depth by layering, not blur.
   One luminous accent (teal). Gold belongs to PAPER only. */

@font-face { font-family:'IBM Plex Sans Arabic'; font-weight:400; font-display:swap;
  src:url('/static/assets/IBMPlexSansArabic-Regular-arabic.woff2') format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF; }
@font-face { font-family:'IBM Plex Sans Arabic'; font-weight:400; font-display:swap;
  src:url('/static/assets/IBMPlexSansArabic-Regular-latin.woff2') format('woff2'); unicode-range:U+0000-00FF; }
@font-face { font-family:'IBM Plex Sans Arabic'; font-weight:500; font-display:swap;
  src:url('/static/assets/IBMPlexSansArabic-Medium-arabic.woff2') format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF; }
@font-face { font-family:'IBM Plex Sans Arabic'; font-weight:500; font-display:swap;
  src:url('/static/assets/IBMPlexSansArabic-Medium-latin.woff2') format('woff2'); unicode-range:U+0000-00FF; }
@font-face { font-family:'IBM Plex Sans Arabic'; font-weight:600; font-display:swap;
  src:url('/static/assets/IBMPlexSansArabic-SemiBold-arabic.woff2') format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF; }
@font-face { font-family:'IBM Plex Sans Arabic'; font-weight:600; font-display:swap;
  src:url('/static/assets/IBMPlexSansArabic-SemiBold-latin.woff2') format('woff2'); unicode-range:U+0000-00FF; }
@font-face { font-family:'IBM Plex Sans Arabic'; font-weight:700; font-display:swap;
  src:url('/static/assets/IBMPlexSansArabic-Bold-arabic.woff2') format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF; }
@font-face { font-family:'IBM Plex Sans Arabic'; font-weight:700; font-display:swap;
  src:url('/static/assets/IBMPlexSansArabic-Bold-latin.woff2') format('woff2'); unicode-range:U+0000-00FF; }

:root {
  --bg:#0A1420; --panel:#101F31; --raised:#142639; --raised2:#183050;
  --hair:#1D3348; --hair-soft:#16283C;
  --ink:#E8F0F7; --ink-2:#AEC2D4; --ink-3:#7E97AC; --ink-4:#54708A;
  --teal:#17C3C3; --teal-dim:#0E7F86; --teal-glow:rgba(23,195,195,.14);
  --amber:#E3A34C; --amber-glow:rgba(227,163,76,.13);
  --blue:#5C9CE6; --blue-glow:rgba(92,156,230,.12);
  --red:#E0564B; --red-glow:rgba(224,86,75,.12);
  --paper:#F8F4EC; --paper-edge:#E9E1D0; --paper-ink:#2B2313; --gold:#B48A3E; --gold-deep:#8A6829;
  --mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --sans:'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
  --rail-w:212px;
}

* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body {
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:14px; line-height:1.7; overflow:hidden;
}
::selection { background:rgba(23,195,195,.25); }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; }

.mono, .num { font-family:var(--mono); font-variant-numeric:tabular-nums; unicode-bidi:plaintext; }

/* ---------------- layout ---------------- */
#app { display:flex; height:100vh; }
#rail {
  width:var(--rail-w); flex:0 0 auto; background:var(--panel);
  border-inline-end:1px solid var(--hair);
  display:flex; flex-direction:column;
}
.rail-brand { padding:18px 16px 14px; border-block-end:1px solid var(--hair-soft); }
.rail-brand img { width:150px; display:block; }
.brand-name {
  font-size:22px; font-weight:700; color:var(--ink); margin-block-start:14px; line-height:1.2;
  padding-block-start:12px; border-block-start:1px solid var(--hair-soft);
}
.brand-sub { font-size:10.5px; color:var(--ink-4); line-height:1.5; margin-block-start:2px; }
#nav { flex:1; padding:10px 0; display:flex; flex-direction:column; gap:2px; }
#nav a {
  display:flex; align-items:center; gap:10px;
  padding:9px 16px; color:var(--ink-2); font-size:13.5px; font-weight:500;
  border-inline-start:2px solid transparent;
}
#nav a:hover { color:var(--ink); background:var(--raised); }
#nav a.active {
  color:var(--teal); background:linear-gradient(270deg, transparent, var(--teal-glow));
  border-inline-start-color:var(--teal);
}
.nav-glyph { width:18px; text-align:center; font-size:14px; opacity:.9; }
.rail-foot { padding:14px 16px; border-block-start:1px solid var(--hair-soft); }
.rail-foot img { width:64px; opacity:.55; display:block; }

#shell { flex:1; display:flex; flex-direction:column; min-width:0; }
#topbar {
  height:52px; flex:0 0 auto; display:flex; align-items:center; gap:16px;
  padding-inline:22px; background:var(--panel); border-block-end:1px solid var(--hair);
}
#crumb { font-weight:600; font-size:14px; color:var(--ink-2); white-space:nowrap; }
#crumb b { color:var(--ink); }
#search-wrap { flex:1; position:relative; max-width:430px; margin-inline-start:auto; }
#search {
  width:100%; background:var(--bg); border:1px solid var(--hair); color:var(--ink);
  border-radius:6px; padding:6px 12px; font-family:inherit; font-size:13px; outline:none;
}
#search:focus { border-color:var(--teal-dim); box-shadow:0 0 0 3px var(--teal-glow); }
#search-results {
  position:absolute; inset-inline:0; top:38px; z-index:60;
  background:var(--raised); border:1px solid var(--hair); border-radius:8px;
  max-height:320px; overflow:auto;
}
#search-results a { display:flex; justify-content:space-between; gap:8px; padding:8px 12px; font-size:13px; border-block-end:1px solid var(--hair-soft); }
#search-results a:hover { background:var(--raised2); }
.chip {
  border:1px solid var(--hair); border-radius:99px; padding:2px 12px;
  font-size:12px; color:var(--ink-3); white-space:nowrap;
}
#main { flex:1; overflow-y:auto; padding:22px 24px 60px; scroll-behavior:smooth; }

/* ---------------- primitives ---------------- */
.panel { background:var(--panel); border:1px solid var(--hair); border-radius:10px; }
.raised { background:var(--raised); border:1px solid var(--hair); border-radius:8px; }
.section-title { font-size:15px; font-weight:700; color:var(--ink); margin-block:4px 12px; display:flex; align-items:baseline; gap:10px; }
.section-title .sub { font-size:12px; font-weight:400; color:var(--ink-3); }
.grid { display:grid; gap:14px; }
.muted { color:var(--ink-3); }
.dim { color:var(--ink-4); }
.small { font-size:12px; }
.tiny { font-size:11px; }
hr.hair { border:0; border-block-start:1px solid var(--hair-soft); margin-block:14px; }

.btn {
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  background:var(--raised); color:var(--ink); border:1px solid var(--hair);
  border-radius:7px; padding:6px 14px; font-size:13px; font-weight:500;
  transition:border-color .15s, background .15s;
}
.btn:hover { border-color:var(--teal-dim); }
.btn.primary { background:var(--teal-dim); border-color:var(--teal-dim); color:#04252B; background:var(--teal); font-weight:600; }
.btn.primary:hover { filter:brightness(1.07); }
.btn.ghost { background:transparent; }
.btn:disabled { opacity:.45; cursor:default; }
.btn.danger:hover { border-color:var(--red); color:var(--red); }
.btn.danger.armed { border-color:var(--red); color:var(--red); background:var(--red-glow); }

/* pill tags */
.tag { display:inline-block; border-radius:5px; padding:1px 8px; font-size:11.5px; border:1px solid var(--hair); color:var(--ink-2); background:var(--raised); white-space:nowrap; }
.tag.teal { color:var(--teal); border-color:rgba(23,195,195,.35); background:var(--teal-glow); }
.tag.amber { color:var(--amber); border-color:rgba(227,163,76,.4); background:var(--amber-glow); }
.tag.blue { color:var(--blue); border-color:rgba(92,156,230,.4); background:var(--blue-glow); }
.tag.red { color:var(--red); border-color:rgba(224,86,75,.4); background:var(--red-glow); }
.tag.ghost { background:transparent; }

/* stat tiles */
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.tile { background:var(--panel); border:1px solid var(--hair); border-radius:10px; padding:12px 16px 10px; }
.tile .t-label { font-size:12px; color:var(--ink-3); margin-block-end:2px; }
.tile .t-value { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:26px; font-weight:600; color:var(--ink); line-height:1.25; }
.tile .t-value .unit { font-size:12px; color:var(--ink-4); font-family:var(--sans); margin-inline-start:4px; }
.tile .t-foot { font-size:11px; color:var(--ink-4); margin-block-start:2px; }
.tile.accent .t-value { color:var(--teal); }
.tile.warm .t-value { color:var(--amber); }

/* tables */
table.data { width:100%; border-collapse:collapse; font-size:13px; }
table.data th {
  text-align:start; font-size:11.5px; font-weight:600; color:var(--ink-3);
  padding:7px 10px; border-block-end:1px solid var(--hair); white-space:nowrap;
  position:sticky; top:0; background:var(--panel); z-index:2;
}
table.data td { padding:7px 10px; border-block-end:1px solid var(--hair-soft); vertical-align:middle; }
table.data tr:hover td { background:rgba(23,195,195,.035); }
table.data tr.clickable { cursor:pointer; }
td.num, th.num { font-family:var(--mono); font-variant-numeric:tabular-nums; direction:ltr; text-align:end; unicode-bidi:isolate; }

/* ---------------- findings ---------------- */
.finding {
  background:var(--panel); border:1px solid var(--hair); border-radius:9px;
  padding:12px 14px; position:relative; overflow:hidden;
}
.finding::before {
  content:''; position:absolute; inset-block:0; inset-inline-start:0; width:3px;
}
.finding.k-ind::before { background:var(--amber); box-shadow:0 0 14px 1px var(--amber); }
.finding.k-note::before { background:var(--blue); box-shadow:0 0 12px 0 var(--blue); }
.finding.k-dropped::before { background:var(--ink-4); box-shadow:none; }
.finding .f-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-block-end:5px; }
.finding .f-title { font-weight:600; font-size:13.5px; }
.finding .f-body { color:var(--ink-2); font-size:13px; }
.finding .f-meta { display:flex; gap:6px; flex-wrap:wrap; margin-block-start:8px; align-items:center; }
.finding .f-reg { font-size:11px; color:var(--ink-4); margin-block-start:6px; }
.finding.k-dropped { opacity:.6; }

/* ---------------- charts ---------------- */
.chart-card { background:var(--panel); border:1px solid var(--hair); border-radius:10px; padding:12px 14px 8px; }
.chart-card .c-head { display:flex; align-items:baseline; gap:10px; margin-block-end:4px; flex-wrap:wrap; }
.chart-card .c-title { font-size:13px; font-weight:600; }
.chart-card .c-unit { font-size:11px; color:var(--ink-4); }
.chart-card .c-last { margin-inline-start:auto; font-family:var(--mono); font-size:15px; color:var(--teal); direction:ltr; }
.chart-svg-wrap { direction:ltr; }
svg.chart text { font-family:var(--mono); font-size:10px; fill:var(--ink-4); }
svg.chart .axis line, svg.chart .grid line { stroke:var(--hair-soft); stroke-width:1; }
svg.chart .series { stroke:var(--teal); stroke-width:2; fill:none; stroke-linejoin:round; stroke-linecap:round; }
svg.chart .area { fill:url(#gradTeal); opacity:.55; }
svg.chart .band { fill:rgba(126,151,172,.10); }
svg.chart .refline { stroke:var(--ink-4); stroke-dasharray:4 4; stroke-width:1.4; fill:none; }
svg.chart .pdfmark { stroke:#D9E4EE; stroke-width:1.6; }
svg.chart .breakline { stroke:var(--amber); stroke-dasharray:2 5; stroke-width:1.2; opacity:.75; }
.spark { direction:ltr; display:block; }
.spark path { stroke:var(--teal); stroke-width:1.6; fill:none; }
.spark .sp-end { fill:var(--teal); }

#tooltip {
  position:fixed; z-index:100; pointer-events:none; max-width:300px;
  background:var(--raised2); border:1px solid var(--hair); border-radius:8px;
  padding:8px 12px; font-size:12px; color:var(--ink); direction:rtl;
}
#tooltip .tt-num { font-family:var(--mono); direction:ltr; unicode-bidi:isolate; color:var(--teal); }

/* ---------------- home narrative ---------------- */
.narrative {
  background:linear-gradient(180deg, var(--raised), var(--panel));
  border:1px solid var(--hair); border-radius:12px; padding:20px 24px;
}
.narrative h1 { font-size:19px; font-weight:700; margin-block-end:6px; }
.narrative p { color:var(--ink-2); max-width:900px; }
.narrative .num, .narrative b.n { font-family:var(--mono); color:var(--teal); font-weight:600; unicode-bidi:isolate; direction:ltr; display:inline-block; }

/* three-layer architecture strip */
.layers { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.layer { border:1px solid var(--hair); border-radius:10px; padding:12px 16px; background:var(--panel); position:relative; }
.layer .l-k { font-size:11px; color:var(--ink-4); letter-spacing:.4px; }
.layer .l-t { font-weight:700; font-size:14px; margin-block:2px 4px; }
.layer .l-d { font-size:12px; color:var(--ink-3); }
.layer.above { border-block-start:2px solid var(--gold); }
.layer.inside { border-block-start:2px solid var(--teal); }
.layer.beside { border-block-start:2px solid var(--blue); }

/* attention queue */
.q-row { display:flex; align-items:center; gap:14px; padding:12px 16px; border-block-end:1px solid var(--hair-soft); cursor:pointer; }
.q-row:hover { background:rgba(23,195,195,.04); }
.q-rank { font-family:var(--mono); font-size:18px; color:var(--ink-4); width:36px; text-align:center; flex:0 0 auto; }
.q-main { flex:1; min-width:0; }
.q-name { font-weight:600; font-size:14px; }
.q-sub { font-size:12px; color:var(--ink-3); display:flex; gap:8px; flex-wrap:wrap; margin-block-start:2px; }
.q-score { font-family:var(--mono); font-size:20px; color:var(--teal); flex:0 0 auto; direction:ltr; }
.scorebar { height:4px; background:var(--hair-soft); border-radius:3px; overflow:hidden; margin-block-start:6px; }
.scorebar i { display:block; height:100%; background:linear-gradient(90deg, var(--teal-dim), var(--teal)); border-radius:3px; }

/* ---------------- entity file ---------------- */
.id-card { display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; }
.id-main h1 { font-size:20px; font-weight:700; }
.id-main .en { font-size:12.5px; color:var(--ink-4); direction:ltr; text-align:end; unicode-bidi:isolate; text-align:start; }
.id-attrs { display:flex; gap:8px; flex-wrap:wrap; margin-block-start:8px; }
.charts-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:14px; }

.tabs { display:flex; gap:2px; border-block-end:1px solid var(--hair); margin-block-end:14px; }
.tabs button {
  background:none; border:none; color:var(--ink-3); font-size:13.5px; font-weight:500;
  padding:8px 16px; cursor:pointer; border-block-end:2px solid transparent; font-family:inherit;
}
.tabs button.active { color:var(--teal); border-block-end-color:var(--teal); }
.tabs button:hover { color:var(--ink); }

/* ---------------- grid 5x3 (method) ---------------- */
.gridmap { border-collapse:collapse; width:100%; }
.gridmap th, .gridmap td { border:1px solid var(--hair); padding:10px 12px; text-align:center; font-size:12.5px; }
.gridmap th { background:var(--raised); color:var(--ink-2); font-weight:600; }
.gridmap td { background:var(--panel); color:var(--ink-3); }
.gridmap td.hot { color:var(--ink); }
.gridmap td .cnt { font-family:var(--mono); color:var(--teal); font-size:15px; display:block; }

/* ---------------- paper (the ONLY lit object) ---------------- */
.paper {
  background:var(--paper); color:var(--paper-ink); border-radius:4px;
  padding:40px 48px; max-width:820px; margin-inline:auto;
  border:1px solid var(--paper-edge);
  box-shadow:0 0 0 1px rgba(180,138,62,.25), 0 18px 60px rgba(0,0,0,.5);
  font-size:14.5px; line-height:2;
}
.paper .p-head { display:flex; justify-content:space-between; align-items:center; border-block-end:2px solid var(--gold); padding-block-end:12px; margin-block-end:18px; }
.paper .p-head .p-org { font-size:12px; color:var(--gold-deep); font-weight:600; }
.paper h1 { font-size:18px; color:var(--paper-ink); margin-block-end:10px; }
.paper h2, .paper h3 { color:var(--gold-deep); font-size:15px; margin-block:16px 6px; }
.paper strong { color:#1d1808; }
.paper .p-cite { color:var(--gold-deep); font-size:12.5px; }
.paper ul, .paper ol { padding-inline-start:22px; }
.paper .p-seal {
  margin-block-start:24px; padding-block-start:12px; border-block-start:1px solid var(--gold);
  font-size:12px; color:var(--gold-deep); display:flex; justify-content:space-between;
}
.paper .num { color:#153a45; }

/* decision buttons */
.decide-row { display:flex; gap:10px; flex-wrap:wrap; }
.decide {
  flex:1; min-width:150px; text-align:center; cursor:pointer;
  border:1px solid var(--hair); border-radius:9px; background:var(--panel);
  padding:14px; font-size:14px; font-weight:600; color:var(--ink-2); font-family:inherit;
}
.decide small { display:block; font-weight:400; font-size:11.5px; color:var(--ink-4); margin-block-start:4px; }
.decide:hover { border-color:var(--ink-3); }
.decide.sel-dismiss { border-color:var(--ink-3); background:var(--raised); color:var(--ink); }
.decide.sel-follow { border-color:var(--teal); background:var(--teal-glow); color:var(--teal); }
.decide.sel-escalate { border-color:var(--amber); background:var(--amber-glow); color:var(--amber); }
textarea.reason {
  width:100%; min-height:90px; background:var(--bg); color:var(--ink);
  border:1px solid var(--hair); border-radius:8px; padding:10px 12px;
  font-family:inherit; font-size:13.5px; line-height:1.8; resize:vertical; outline:none;
}
textarea.reason:focus { border-color:var(--teal-dim); box-shadow:0 0 0 3px var(--teal-glow); }

/* modal */
#modal-root {
  position:fixed; inset:0; z-index:80; background:rgba(4,10,17,.7);
  display:flex; align-items:center; justify-content:center; padding:30px;
}
#modal-root[hidden], #tooltip[hidden], #search-results[hidden] { display:none; }
.modal { background:var(--raised); border:1px solid var(--hair); border-radius:12px; max-width:720px; width:100%; max-height:85vh; overflow:auto; padding:20px 24px; }
.modal h2 { font-size:16px; margin-block-end:10px; }

/* filter bar */
.filterbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-block-end:14px; }
.filterbar select, .filterbar input[type=search] {
  background:var(--panel); color:var(--ink); border:1px solid var(--hair);
  border-radius:7px; padding:5px 10px; font-family:inherit; font-size:12.5px; outline:none;
}
.seg { display:inline-flex; border:1px solid var(--hair); border-radius:7px; overflow:hidden; }
.seg button { background:var(--panel); border:none; color:var(--ink-3); padding:5px 12px; font-size:12.5px; cursor:pointer; font-family:inherit; }
.seg button.active { background:var(--teal-glow); color:var(--teal); }
.seg button:not(:last-child) { border-inline-end:1px solid var(--hair-soft); }

/* case elements & analyzer */
.el-wrap { position:relative; }
.el-wrap.el-off .finding { opacity:.45; }
.el-x {
  position:absolute; top:8px; inset-inline-end:10px; z-index:3;
  background:var(--raised); border:1px solid var(--hair); color:var(--ink-3);
  border-radius:6px; padding:2px 10px; font-size:11.5px; cursor:pointer; font-family:inherit;
}
.el-x:hover { color:var(--ink); border-color:var(--ink-3); }
.el-offtag { position:absolute; bottom:10px; inset-inline-end:10px; }
.finding.k-reviewer::before { background:var(--ink-3); box-shadow:none; }
.hypo {
  background:var(--raised); border:1px solid var(--hair); border-radius:9px; padding:11px 14px;
}
.hypo .f-title { font-weight:600; font-size:13px; }
.hypo-n { font-family:var(--mono); font-size:11px; color:var(--ink-4); flex:0 0 auto; }
.hypo-refs { margin-block-start:7px; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.el-chip {
  background:var(--panel); border:1px solid var(--hair); color:var(--teal);
  border-radius:5px; padding:0 7px; font-size:11px; font-family:var(--mono);
  cursor:pointer; direction:ltr;
}
.el-chip:hover { border-color:var(--teal-dim); }
@keyframes elflash { 0% { background:var(--teal-glow); } 100% { background:transparent; } }
.el-wrap.flash .finding { animation:elflash 1.6s ease-out; }

/* trace popover content */
.trace-row { display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-block-end:1px solid var(--hair-soft); font-size:12.5px; }
.trace-chain { font-size:11.5px; color:var(--ink-4); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.trace-chain b { color:var(--ink-3); font-weight:500; }

/* loading & empty */
.loading { color:var(--ink-4); padding:40px; text-align:center; font-size:13px; }
.empty { color:var(--ink-4); padding:26px; text-align:center; font-size:13px; border:1px dashed var(--hair); border-radius:10px; }

/* transitions: only user-caused state change */
.finding, .btn, .tile, .q-row, .decide, #nav a, .tabs button { transition:background .14s ease, border-color .14s ease, color .14s ease; }

@media (max-width: 1100px) {
  .layers { grid-template-columns:1fr; }
  :root { --rail-w:64px; }
  .nav-label, .rail-brand img { display:none; }
  .rail-brand::after { content:'⍟'; color:var(--teal); font-size:20px; }
}

/* ---------------- login (the only screen before a session) ---------------- */
#login { position:fixed; inset:0; z-index:90; background:var(--bg); display:flex; align-items:center; justify-content:center; }
#login[hidden] { display:none; }
#app[hidden] { display:none; }
.login-card { width:400px; background:var(--panel); border:1px solid var(--hair); border-radius:14px; padding:34px 36px 26px; }
.login-logo { height:44px; display:block; margin-block-end:22px; }
.login-name { font-size:30px; font-weight:700; line-height:1.2; }
.login-sub { font-size:12.5px; color:var(--ink-3); margin-block:4px 22px; }
#login-form label { display:block; font-size:12.5px; color:var(--ink-3); margin-block-end:12px; }
#login-form input {
  display:block; width:100%; margin-block-start:5px; background:var(--bg); color:var(--ink);
  border:1px solid var(--hair); border-radius:7px; padding:9px 12px; font-family:var(--mono); font-size:13.5px; outline:none;
}
#login-form input:focus { border-color:var(--teal-dim); box-shadow:0 0 0 3px var(--teal-glow); }
#login-form .btn { width:100%; justify-content:center; margin-block-start:6px; padding:9px; font-size:14px; }
.login-msg { color:var(--amber); font-size:12.5px; margin-block-end:10px; padding:8px 10px; border:1px solid rgba(227,163,76,.35); border-radius:7px; background:var(--amber-glow); }
.login-msg[hidden] { display:none; }
.login-foot { font-size:11px; color:var(--ink-4); margin-block-start:18px; text-align:center; }

/* user chip in the top bar */
.user-chip { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-2); white-space:nowrap; }
.user-chip .exp { color:var(--ink-4); font-size:11px; }
.user-chip button { background:none; border:1px solid var(--hair); color:var(--ink-3); border-radius:6px; padding:2px 10px; font-size:11.5px; cursor:pointer; font-family:inherit; }
.user-chip button:hover { color:var(--ink); border-color:var(--ink-3); }

/* admin: one-time password reveal */
.pw-reveal { font-family:var(--mono); font-size:15px; letter-spacing:.5px; color:var(--teal); direction:ltr; unicode-bidi:isolate; background:var(--bg); border:1px dashed var(--teal-dim); border-radius:7px; padding:8px 14px; display:inline-block; user-select:all; }
.ad-in { background:var(--bg); color:var(--ink); border:1px solid var(--hair); border-radius:7px; padding:6px 10px; font-family:inherit; font-size:13px; outline:none; }
.ad-in:focus { border-color:var(--teal-dim); }

#period-chip:empty { display:none; }