/* Legal Register Portal - modern "bento" dashboard: floating glass navigation, gradient status card, soft rounded cards.
   Light theme by default, dark optional (Light / Dark switch in the top bar). */
:root {
  --bg: #f3f5fa; --bg-glow-1: rgba(99, 102, 241, .10); --bg-glow-2: rgba(20, 184, 166, .10);
  --panel: #ffffff; --panel-2: #f6f8fc; --glass: rgba(255, 255, 255, .72); --glass-line: rgba(255, 255, 255, .9);
  --ink: #0f172a; --ink-2: #334155; --muted: #64748b; --line: #e6eaf2; --line-2: #eef1f6;
  --brand: #4f46e5; --brand-2: #4338ca; --brand-ink: #ffffff; --brand-soft: #eef0ff; --teal: #0d9488;
  --grad: linear-gradient(135deg, #4f46e5 0%, #0d9488 100%);
  --ok: #059669; --ok-soft: #e7f8f1; --warn: #d97706; --warn-soft: #fff5e3; --bad: #e11d48; --bad-soft: #fff0f3;
  --na: #64748b; --na-soft: #f1f5f9; --missing: #7c3aed; --missing-soft: #f3edff; --info: #2563eb; --info-soft: #eaf1ff;
  --console: #0b1020; --console-ink: #c9d6f0;
  --r-lg: 24px; --r: 18px; --r-sm: 12px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -8px rgba(15, 23, 42, .08);
  --shadow-hover: 0 2px 4px rgba(15, 23, 42, .05), 0 18px 40px -12px rgba(15, 23, 42, .18);
  --shadow-lg: 0 30px 70px -20px rgba(15, 23, 42, .35);
  --font: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
}
:root[data-theme="dark"] {
  --bg: #070a12; --bg-glow-1: rgba(99, 102, 241, .16); --bg-glow-2: rgba(20, 184, 166, .12);
  --panel: #0f1420; --panel-2: #141a28; --glass: rgba(15, 20, 32, .72); --glass-line: rgba(255, 255, 255, .08);
  --ink: #e8edf7; --ink-2: #c3cde0; --muted: #8b97ad; --line: #1f2738; --line-2: #182031;
  --brand: #818cf8; --brand-2: #6366f1; --brand-ink: #0b0f1a; --brand-soft: #1b1f3d; --teal: #2dd4bf;
  --grad: linear-gradient(135deg, #6366f1 0%, #14b8a6 100%);
  --ok: #34d399; --ok-soft: #0e2a22; --warn: #fbbf24; --warn-soft: #2d230c; --bad: #fb7185; --bad-soft: #33121b;
  --na: #94a3b8; --na-soft: #1a2232; --missing: #c4b5fd; --missing-soft: #231c3d; --info: #60a5fa; --info-soft: #13213a;
  --console: #05070d;
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 8px 24px -10px rgba(0, 0, 0, .6);
  --shadow-hover: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 20px 40px -14px rgba(0, 0, 0, .8);
  --shadow-lg: 0 30px 80px -20px rgba(0, 0, 0, .8);
  color-scheme: dark;
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  color: var(--ink); font: 15px/1.55 var(--font); -webkit-font-smoothing: antialiased; min-height: 100vh;
  background: radial-gradient(900px 500px at 0% -10%, var(--bg-glow-1), transparent 70%),
              radial-gradient(800px 500px at 100% 0%, var(--bg-glow-2), transparent 70%), var(--bg);
  background-attachment: fixed;
}
a { color: var(--brand); }
.muted { color: var(--muted); } .small { font-size: 13px; } .right { text-align: right; }
button, input, select, textarea, .btn, .kpi, .qa, .panel { transition: border-color .18s, background-color .18s, box-shadow .2s, color .18s, transform .2s; }
h1, h2, h3 { font-family: var(--font-display); }
h1 { margin: 0; font-size: 28px; line-height: 1.2; letter-spacing: -.02em; font-weight: 700; }
::selection { background: color-mix(in srgb, var(--brand) 25%, transparent); }

/* ---------- floating glass navigation ---------- */
.topbar { position: sticky; top: 0; z-index: 20; padding: 12px 20px 0; }
.topbar-in { max-width: 1400px; margin: 0 auto; padding: 8px 10px 8px 12px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--glass); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
  border: 1px solid var(--glass-line); border-radius: 22px; box-shadow: 0 10px 30px -12px rgba(15, 23, 42, .18); }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-logo { height: 42px; min-width: 42px; max-width: 140px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 4px 8px; }
.brand-logo img { max-height: 32px; max-width: 124px; object-fit: contain; display: block; }
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.brand-text b { font-family: var(--font-display); font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px; }
.brand-text small { font-size: 12px; color: var(--muted); }
.logo-fallback { width: 32px; height: 32px; border-radius: 10px; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.tabs { display: flex; gap: 2px; padding: 4px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 16px; }
.tabs button { font: inherit; font-weight: 600; font-size: 14px; border: 0; background: none; color: var(--muted); padding: 8px 15px; border-radius: 12px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.tabs button svg { width: 16px; height: 16px; fill: currentColor; }
.tabs button:hover { color: var(--ink); }
.tabs button.active { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 4px 12px -4px rgba(15, 23, 42, .15); }
.tabs button.active svg { fill: var(--brand); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.fac-switch { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.fac-switch > span { display: none; }
.fac-switch select { width: auto; max-width: 210px; padding: 8px 12px; font-weight: 600; border-radius: 12px; background: var(--panel-2); }
.theme-switch { display: inline-flex; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.theme-switch button { font: inherit; font-size: 12.5px; font-weight: 600; border: 0; background: none; color: var(--muted); padding: 5px 11px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.theme-switch button svg { width: 14px; height: 14px; fill: currentColor; }
.theme-switch button.active { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .15); }

/* drop-down menus */
details.menu { position: relative; }
details.menu > summary { list-style: none; cursor: pointer; }
details.menu > summary::-webkit-details-marker { display: none; }
.menu-pop { position: absolute; top: calc(100% + 8px); z-index: 30; min-width: 220px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 6px; display: grid; animation: pop .15s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.menu-pop.right { right: 0; }
.menu-pop > a, .menu-pop > button { font: inherit; font-size: 14px; text-align: left; padding: 9px 12px; border-radius: 10px; border: 0; background: none; color: var(--ink); cursor: pointer; text-decoration: none; }
.menu-pop > a:hover, .menu-pop > button:hover { background: var(--brand-soft); color: var(--brand); }
.danger-txt { color: var(--bad) !important; }
.user-menu > summary { display: flex; align-items: center; gap: 9px; padding: 3px 12px 3px 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); }
.user-menu > summary:hover { border-color: var(--brand); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 800; text-transform: uppercase; flex: none; }
.who { display: flex; flex-direction: column; line-height: 1.15; } .who b { font-size: 13.5px; } .who small { font-size: 11px; color: var(--muted); }

/* ---------- page ---------- */
.page { max-width: 1400px; margin: 0 auto; padding: 22px 20px 70px; }
.tab { display: none; animation: rise .35s cubic-bezier(.2, .7, .2, 1); } .tab.active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.page-title { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-end; justify-content: space-between; margin: 6px 0 18px; }
.page-title p { margin: 4px 0 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sec-head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-start; justify-content: space-between; }
.sec-sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; }

/* ---------- Home: bento top (status + facility) ---------- */
.top-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; margin-bottom: 16px; }
.hero { --g1: #4f46e5; --g2: #2563eb; position: relative; overflow: hidden; border-radius: var(--r-lg); padding: 28px 30px; color: #fff;
  background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: 0 24px 50px -24px color-mix(in srgb, var(--g1) 70%, transparent);
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ring body" "actions actions"; gap: 18px 24px; align-items: center; }
.hero::before { content: ""; position: absolute; width: 420px; height: 420px; right: -140px; top: -180px; border-radius: 50%; background: rgba(255, 255, 255, .10); }
.hero::after { content: ""; position: absolute; width: 260px; height: 260px; right: 80px; bottom: -170px; border-radius: 50%; background: rgba(255, 255, 255, .07); }
.hero > * { position: relative; z-index: 1; }
.hero.ok { --g1: #059669; --g2: #0d9488; }
.hero.warn { --g1: #d97706; --g2: #ea580c; }
.hero.bad { --g1: #e11d48; --g2: #be123c; }
.hero.info { --g1: #4f46e5; --g2: #2563eb; }
.hero .ring { grid-area: ring; }
.hero-body { grid-area: body; min-width: 0; }
.hero-actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 10px; }
.hero-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, .18); }
.hero h2 { font-size: 30px; line-height: 1.15; margin: 10px 0 6px; letter-spacing: -.02em; font-weight: 700; }
.hero p { margin: 0; color: rgba(255, 255, 255, .88); font-size: 15px; max-width: 640px; }
.hero .btn { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .35); box-shadow: none; }
.hero .btn:hover { background: rgba(255, 255, 255, .26); color: #fff; }
.hero .btn.primary { background: #fff; color: var(--g1); border-color: #fff; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .35); }
.hero .btn.primary:hover { transform: translateY(-1px); color: var(--g1); }
.ring { --p: 0; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; position: relative; flex: none;
  background: conic-gradient(var(--brand) calc(var(--p) * 1%), var(--line-2) 0); }
.ring span { width: 80%; height: 80%; border-radius: 50%; background: var(--panel); display: grid; place-items: center; font-weight: 800; font-size: 15px; padding-bottom: 12px; font-family: var(--font-display); }
.ring small { position: absolute; bottom: 29%; font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.hero .ring { background: conic-gradient(#fff calc(var(--p) * 1%), rgba(255, 255, 255, .22) 0); }
.hero .ring span { background: color-mix(in srgb, var(--g1) 80%, #000 6%); color: #fff; }
.hero .ring small { color: rgba(255, 255, 255, .8); }
.ring.big { width: 118px; height: 118px; } .ring.big span { font-size: 28px; letter-spacing: -.02em; }

.fac-band { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow);
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "logo class" "main main"; gap: 14px; align-content: start; }
.band-logo { grid-area: logo; width: 140px; height: 64px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 6px 10px; }
.band-logo img { max-width: 100%; max-height: 52px; object-fit: contain; }
.band-logo .logo-fallback { width: 46px; height: 46px; font-size: 16px; border-radius: 13px; }
.band-class { grid-area: class; justify-self: end; align-self: start; border: 1.5px solid var(--bad); color: var(--bad); background: var(--bad-soft); border-radius: 999px; padding: 3px 12px; font-weight: 800; font-size: 12px; white-space: nowrap; }
.band-class:empty { display: none; }
.band-main { grid-area: main; min-width: 0; }
.band-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.band-main h1 { font-size: 20px; margin: 2px 0 12px; }
.band-doc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.band-doc div { background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 7px 12px; min-width: 0; }
.band-doc div:first-child { grid-column: 1 / -1; }
.band-doc dt { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.band-doc dd { margin: 0; font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- key numbers ---------- */
.kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 16px; }
.kpi { font: inherit; text-align: left; cursor: pointer; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: grid; gap: 12px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.kpi::before { content: ""; position: absolute; width: 120px; height: 120px; right: -50px; top: -50px; border-radius: 50%; background: color-mix(in srgb, var(--c) 10%, transparent); }
.kpi i { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, transparent); position: relative; }
.kpi i svg { width: 21px; height: 21px; fill: var(--c); }
.kpi div { display: grid; min-width: 0; }
.kpi b { font-family: var(--font-display); font-size: 32px; line-height: 1; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.kpi span { font-weight: 650; font-size: 14px; margin-top: 6px; } .kpi small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: color-mix(in srgb, var(--c) 45%, var(--line)); }
.kpi.all { --c: var(--brand); } .kpi.ok { --c: var(--ok); } .kpi.warn { --c: var(--warn); } .kpi.bad { --c: var(--bad); } .kpi.missing { --c: var(--missing); } .kpi.circ { --c: var(--info); }
.kpi.warn:not(.zero) b, .kpi.bad:not(.zero) b { color: var(--c); }
.kpi.bad:not(.zero) { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.kpi.zero b { color: var(--muted); }

.row-2-1 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }
.row-3 { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 16px; align-items: stretch; }
.row-3 .panel { align-content: start; }

/* attention list */
.att-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.att { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--panel-2); }
.att:hover { border-color: color-mix(in srgb, var(--c) 40%, var(--line)); background: color-mix(in srgb, var(--c) 5%, var(--panel)); }
.att i { width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--c) 14%, transparent); display: grid; place-items: center; }
.att i::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); }
.att b { display: block; font-size: 14.5px; font-weight: 650; } .att small { color: var(--c); font-size: 12.5px; font-weight: 600; }
.att.bad { --c: var(--bad); } .att.warn { --c: var(--warn); } .att.missing { --c: var(--missing); }
.att-empty { display: flex; align-items: center; gap: 12px; padding: 18px; border-radius: 14px; background: var(--ok-soft); color: var(--ok); font-weight: 600; }
.att-empty span { width: 32px; height: 32px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; flex: none; }
.att-more { text-align: center; padding-top: 4px; }

/* quick actions */
.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qa { font: inherit; text-align: left; cursor: pointer; text-decoration: none; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 16px; padding: 16px; display: grid; gap: 10px; position: relative; }
.qa i { width: 40px; height: 40px; border-radius: 13px; background: var(--grad); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 18px; font-weight: 700; box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--brand) 70%, transparent); }
.qa b { font-size: 14.5px; font-weight: 650; display: block; } .qa small { color: var(--muted); font-size: 12px; margin-top: -8px; }
.qa:hover { background: var(--panel); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.qa:disabled { opacity: .7; cursor: progress; }
.qa.fresh { border-color: var(--brand); background: var(--brand-soft); animation: dlpulse 1.8s ease-in-out infinite; }
.qa .new-dot { position: absolute; top: 12px; right: 12px; }
.new-dot { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; background: var(--grad); color: #fff; border-radius: 99px; padding: 2px 8px; }
@keyframes dlpulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 40%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand) 0%, transparent); } }

/* entries overview */
.legend { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--muted); }
.lg { padding: 3px 10px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line-2); font-weight: 600; }
.lg::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--c); }
.lg.ok { --c: var(--ok); } .lg.warn { --c: var(--warn); } .lg.bad { --c: var(--bad); } .lg.missing { --c: var(--missing); }
.overview-tbl td.name { font-weight: 650; min-width: 220px; }
.days { display: grid; gap: 5px; min-width: 170px; }
.days-bar { height: 6px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.days-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 60%, transparent), var(--c)); }
.days span { font-size: 12.5px; font-weight: 650; color: var(--c); }
.days.ok { --c: var(--ok); } .days.warn { --c: var(--warn); } .days.bad { --c: var(--bad); }

/* DoH monitoring */
.doh-head { display: flex; align-items: center; gap: 10px; }
.sys-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; background: var(--na); }
.sys-dot.ok { background: var(--ok); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ok) 18%, transparent); }
.sys-dot.warn { background: var(--warn); box-shadow: 0 0 0 5px color-mix(in srgb, var(--warn) 22%, transparent); }
.sys-dot.bad { background: var(--bad); box-shadow: 0 0 0 5px color-mix(in srgb, var(--bad) 22%, transparent); }
.sys-dot.run { background: var(--info); animation: blink 1.1s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .3; } }
.warn-txt { color: var(--warn); font-weight: 700; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.facts li { display: grid; grid-template-columns: 104px 1fr; gap: 10px; padding: 10px 12px; font-size: 13.5px; background: var(--panel-2); border-radius: 12px; }
.facts span { color: var(--muted); font-weight: 600; } .facts b { font-weight: 600; }
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mini-stats div { background: var(--panel-2); border-radius: 14px; padding: 12px; display: grid; }
.mini-stats b { font-family: var(--font-display); font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mini-stats span { font-size: 12px; font-weight: 600; color: var(--muted); } .mini-stats small { font-size: 11px; color: var(--muted); }

/* ---------- building blocks ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; min-width: 0; box-shadow: var(--shadow); margin-bottom: 16px; display: grid; gap: 14px; }
.panel h2 { font-size: 17px; margin: 0; letter-spacing: -.01em; font-weight: 700; }
.panel.danger { border-color: color-mix(in srgb, var(--bad) 30%, var(--line)); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0; }
.panel .actions, .actions.tight { margin: 2px 0 0; }

.btn, button.btn { font: inherit; font-weight: 600; font-size: 14px; padding: 9px 17px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; line-height: 1.2; }
.btn:hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--line)); color: var(--brand); }
.btn.primary { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--brand) 80%, transparent); }
.btn.primary:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 14px 26px -10px color-mix(in srgb, var(--brand) 90%, transparent); }
.btn.big { padding: 12px 22px; font-size: 15px; }
.btn.small { padding: 7px 13px; font-size: 13px; }
.btn.full { width: 100%; justify-content: center; }
.btn svg { width: 18px; height: 18px; fill: currentColor; }
.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.btn.danger:hover { background: var(--bad-soft); color: var(--bad); }
.btn:disabled { opacity: .5; cursor: progress; transform: none; }
.link-btn { background: none; border: 0; color: var(--brand); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.link-btn:hover { text-decoration: underline; }
.icon-btn { border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); border-radius: 999px; padding: 5px 13px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; }
.icon-btn:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.icon-btn.del:hover { color: var(--bad); border-color: var(--bad); background: var(--bad-soft); }
.icon-btn:disabled { opacity: .45; cursor: not-allowed; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.chips button { font: inherit; font-weight: 600; font-size: 13.5px; padding: 7px 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer; }
.chips button:hover { color: var(--ink); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.chips button.active { background: var(--ink); border-color: var(--ink); color: var(--panel); }

input, select, textarea { font: inherit; padding: 10px 13px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); width: 100%; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent); }
input[readonly] { background: var(--panel-2); color: var(--muted); }
#search { max-width: 340px; border-radius: 999px; padding-left: 16px; }
label { display: grid; gap: 6px; color: var(--ink-2); font-size: 13px; font-weight: 600; }
label.check { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 400; font-size: 14px; }
label.check > input[type=checkbox], label.check > input[type=radio] { width: auto; accent-color: var(--brand); }
label.check > select, label.check > input:not([type=checkbox]):not([type=radio]) { width: auto; flex: 1; min-width: 160px; }
.row3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; align-items: end; }
.affix { display: flex; align-items: center; gap: 6px; } .affix input { flex: 1; } .suffix { color: var(--ink); font-weight: 600; white-space: nowrap; }
.lock { font-size: 10px; background: var(--na-soft); color: var(--na); border-radius: 999px; padding: 1px 8px; margin-left: 4px; font-weight: 700; }
.settings { display: grid; gap: 0; max-width: 1040px; }
.sub { display: none; } .sub.active { display: grid; }

/* ---------- Legal Register ---------- */
.doc-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 18px; margin-bottom: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.doc-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
#doc-strip { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; flex: 1; }
#doc-strip div { display: flex; gap: 6px; align-items: baseline; }
#doc-strip dt { font-size: 12px; color: var(--muted); } #doc-strip dt::after { content: ":"; }
#doc-strip dd { margin: 0; font-weight: 600; font-size: 13px; }
.classification { display: inline-block; border: 1.5px solid var(--bad); color: var(--bad); background: var(--bad-soft); border-radius: 999px; padding: 2px 12px; font-weight: 800; font-size: 12px; }
.classification:empty { display: none; }
.status-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.status-bar:empty { display: none; }
.stat { font: inherit; cursor: pointer; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px 5px 6px; display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; font-size: 13.5px; box-shadow: var(--shadow); }
.stat b { min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; font-size: 13px; background: var(--na-soft); color: var(--na); }
.stat.ok b { background: var(--ok-soft); color: var(--ok); } .stat.warn b { background: var(--warn-soft); color: var(--warn); }
.stat.bad b { background: var(--bad-soft); color: var(--bad); } .stat.missing b { background: var(--missing-soft); color: var(--missing); }
.stat.all b { background: var(--brand-soft); color: var(--brand); }
.stat:hover { border-color: var(--brand); }
.stat.active { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.pill-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.pill-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill-status.ok { background: var(--ok-soft); color: var(--ok); } .pill-status.warn { background: var(--warn-soft); color: var(--warn); }
.pill-status.bad { background: var(--bad-soft); color: var(--bad); } .pill-status.na { background: var(--na-soft); color: var(--na); }
.pill-status.missing { background: var(--missing-soft); color: var(--missing); }
.hbar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--line-2); min-width: 150px; max-width: 220px; gap: 2px; }
.hbar i { display: block; } .hbar .ok { background: var(--ok); } .hbar .warn { background: var(--warn); } .hbar .bad { background: var(--bad); } .hbar .missing { background: color-mix(in srgb, var(--missing) 55%, transparent); }
.hcount { font-size: 12px; margin-top: 4px; white-space: nowrap; } .hcount .ok { color: var(--ok); } .hcount .warn { color: var(--warn); } .hcount .bad { color: var(--bad); }
.filter-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; font-size: 14px; color: var(--muted); }

/* tables */
.table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); margin-bottom: 14px; }
.table-wrap.flat { border: 0; box-shadow: none; background: transparent; margin-bottom: 0; border-radius: 0; }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14px; }
th { text-align: left; background: var(--panel-2); color: var(--muted); padding: 12px 14px; position: sticky; top: 0; white-space: nowrap; font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; }
th:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; } th:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
.table-wrap:not(.flat) th { border-radius: 0; border-bottom: 1px solid var(--line); }
td { padding: 13px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--brand-soft) 50%, transparent); }
#tbl tbody tr { cursor: pointer; }
td.name { min-width: 280px; } td.num { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.register td.name { font-weight: 650; }
.register tr td:first-child, .overview-tbl tr td:first-child { box-shadow: inset 4px 0 0 transparent; }
.register tr.st-expired td:first-child, .overview-tbl tr.st-expired td:first-child { box-shadow: inset 4px 0 0 var(--bad); }
.register tr.st-expiring td:first-child, .overview-tbl tr.st-expiring td:first-child { box-shadow: inset 4px 0 0 var(--warn); }
.register tr.st-valid td:first-child, .overview-tbl tr.st-valid td:first-child { box-shadow: inset 4px 0 0 var(--ok); }
.register tr.st-missing td:first-child, .register tr.st-no-expiry td:first-child,
.overview-tbl tr.st-missing td:first-child, .overview-tbl tr.st-no-expiry td:first-child { box-shadow: inset 4px 0 0 var(--missing); }
.register tr.fixed td { color: var(--muted); background: color-mix(in srgb, var(--panel-2) 70%, transparent); }
.register tr.fixed td.name { font-weight: 500; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.date.expired { color: var(--bad); font-weight: 700; } .date.expiring { color: var(--warn); font-weight: 700; }
.date.empty { color: color-mix(in srgb, var(--muted) 70%, transparent); }

.tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.tag.ok { background: var(--ok-soft); color: var(--ok); } .tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.bad { background: var(--bad-soft); color: var(--bad); } .tag.na { background: var(--na-soft); color: var(--na); }
.tag.it { background: var(--brand-soft); color: var(--brand); }

.alert { padding: 13px 18px; border-radius: 16px; margin-bottom: 12px; border: 1px solid transparent; font-weight: 500; }
.alert.warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 20%, transparent); }
.alert.bad { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 20%, transparent); }
.alert.ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 20%, transparent); }
.console { background: var(--console); color: var(--console-ink); border-radius: 16px; padding: 16px; font: 12px/1.6 "Cascadia Code", Consolas, monospace; max-height: 320px; overflow: auto; white-space: pre-wrap; margin: 0; }
.console.tall { max-height: 72vh; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 13.5px; } .kv dt { color: var(--muted); } .kv dd { margin: 0; }
.fac-mini { width: 80px; height: 36px; object-fit: contain; background: #fff; border-radius: 10px; border: 1px solid var(--line); padding: 2px; }

/* drop zones */
.drop { border: 2px dashed color-mix(in srgb, var(--brand) 30%, var(--line)); border-radius: var(--r); padding: 26px; text-align: center; cursor: pointer; display: block; color: var(--ink); background: color-mix(in srgb, var(--brand-soft) 45%, var(--panel)); font-size: 14.5px; }
.drop:hover, .drop.over { border-color: var(--brand); background: var(--brand-soft); }
.drop input { display: none; }
.drop.slim { display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px 18px; margin-bottom: 12px; font-size: 14px; color: var(--muted); }
.drop.slim b { color: var(--ink); }
.drop-icon { flex: none; width: 40px; height: 40px; border-radius: 13px; background: var(--grad); color: #fff; display: grid; place-items: center; font-size: 18px; font-weight: 700; }

/* dialogs */
dialog { border: 1px solid var(--line); border-radius: 26px; background: var(--panel); color: var(--ink); width: min(920px, calc(100vw - 32px)); padding: 28px; box-shadow: var(--shadow-lg); }
dialog[open] { animation: pop .2s ease; }
dialog::backdrop { background: rgba(8, 12, 24, .45); backdrop-filter: blur(6px); }
dialog form { display: grid; gap: 14px; }
dialog h2 { margin: 0; font-size: 21px; letter-spacing: -.015em; }
dialog.wide { width: min(1200px, calc(100vw - 32px)); }
.reason { background: var(--brand-soft); border-radius: 14px; padding: 12px 14px; font-size: 13.5px; }
.steps { display: grid; gap: 16px; }
.step { display: grid; grid-template-columns: 32px 1fr; gap: 12px; }
.step > div { display: grid; gap: 8px; min-width: 0; }
.step > .num { width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 700; }
.extracted { display: grid; grid-template-columns: 200px 1fr; gap: 14px; align-items: start; }
.logo-box { border: 1px dashed var(--line); border-radius: 14px; min-height: 90px; display: grid; place-items: center; background: #fff; padding: 8px; }
.logo-box img { max-width: 100%; max-height: 110px; object-fit: contain; }
.extracted-fields { display: grid; gap: 10px; }
.policy-logo { max-height: 40px; vertical-align: middle; background: #fff; border-radius: 8px; padding: 2px 4px; margin-right: 8px; }
details.more summary { cursor: pointer; color: var(--muted); margin: 6px 0; }
.imp-table td, .imp-table th { padding: 7px 9px; font-size: 13px; }
.imp-table .new { color: var(--ok); font-weight: 600; } .imp-table .same { color: var(--muted); }
.docs-table td { vertical-align: top; } .docs-table input[type=date] { min-width: 136px; padding: 6px 8px; } .docs-table select { min-width: 200px; padding: 6px 8px; }
.docs-table .file { max-width: 220px; word-break: break-word; font-weight: 600; }
.docs-table .notes { font-size: 12px; color: var(--warn); max-width: 260px; } .docs-table .ev { font-size: 11.5px; color: var(--muted); max-width: 260px; word-break: break-word; }
.conf { font-size: 11px; font-weight: 700; } .conf.high { color: var(--ok); } .conf.medium { color: var(--warn); } .conf.low, .conf.none { color: var(--bad); }
.doc-link { display: inline-block; font-size: 12px; font-weight: 600; margin-left: 8px; padding: 1px 9px; border-radius: 999px; background: var(--brand-soft); text-decoration: none; }
.doc-link:hover { background: var(--brand); color: #fff; }
.spin { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: sp .8s linear infinite; vertical-align: -2px; } @keyframes sp { to { transform: rotate(360deg); } }

/* export window */
.export-box { display: grid; gap: 14px; }
.export-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.export-card { font: inherit; text-align: left; cursor: pointer; text-decoration: none; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.export-card:hover { border-color: var(--brand); background: var(--brand-soft); transform: translateY(-2px); }
.export-card b { font-size: 16px; } .export-card > span:not(.ex-icon) { font-size: 13px; color: var(--muted); }
.export-card em { font-style: normal; font-weight: 700; color: var(--brand); margin-top: 6px; }
.export-card:disabled { opacity: .7; cursor: progress; }
.ex-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 11px; font-weight: 900; color: #fff; margin-bottom: 4px; }
.ex-icon.xlsx { background: linear-gradient(135deg, #16a34a, #0d9488); } .ex-icon.pdf { background: linear-gradient(135deg, #f43f5e, #be123c); }

/* roles */
body.ro [data-write] { display: none !important; }
body.not-admin [data-admin] { display: none !important; }
.fac-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; }

/* ---------- sign-in ---------- */
.eyebrow { font-size: 12px; color: var(--muted); letter-spacing: .03em; } .eyebrow b { color: var(--brand); letter-spacing: .08em; }
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-wrap { width: min(440px, 100%); display: grid; gap: 18px; }
.auth-brand { display: flex; align-items: center; gap: 14px; }
.auth-brand h1 { font-size: 24px; margin: 2px 0; }
.logo-fallback.big { width: 56px; height: 56px; border-radius: 18px; font-size: 18px; flex: none; }
.auth-card { background: var(--glass); backdrop-filter: blur(18px); border: 1px solid var(--glass-line); border-radius: 26px; padding: 28px; box-shadow: var(--shadow-lg); }
.auth-step { display: grid; gap: 12px; }
.auth-step h2 { margin: 0; font-size: 19px; }
.auth-step .hint { margin: -4px 0 0; font-size: 12px; color: var(--muted); }
.otp { font-size: 24px !important; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; }
.qr-box { display: grid; place-items: center; background: #fff; border-radius: 18px; padding: 12px; width: 244px; margin: 0 auto; }
.qr-box img { width: 220px; height: 220px; image-rendering: pixelated; }
.enrol-steps { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; display: grid; gap: 4px; }
.center { text-align: center; } code { font-family: "Cascadia Code", Consolas, monospace; background: var(--panel-2); padding: 2px 6px; border-radius: 6px; color: var(--ink); word-break: break-all; }
.auth-step .link-btn { justify-self: center; font-weight: 500; }
.auth-msg { margin-top: 12px; font-size: 13px; min-height: 18px; } .auth-msg.bad { color: var(--bad); } .auth-msg.ok { color: var(--ok); }
.auth-foot { text-align: center; }

/* ---------- smaller screens ---------- */
@media (max-width: 1250px) {
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .row-3 { grid-template-columns: 1fr 1fr; } .row-3 > .panel:first-child { grid-column: 1 / -1; }
  .tabs { order: 3; width: 100%; overflow-x: auto; }
}
@media (max-width: 980px) {
  .top-grid, .row-2-1, .row-3 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .topbar { padding: 8px 8px 0; }
  .page { padding-left: 12px; padding-right: 12px; }
  .top-right { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .fac-switch select { max-width: 100%; }
  .user-menu .who { display: none; }
  .hero { grid-template-columns: 1fr; grid-template-areas: "ring" "body" "actions"; padding: 22px; }
  .hero h2 { font-size: 24px; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .qa-grid, .grid2, .extracted, .export-options, .mini-stats, .band-doc { grid-template-columns: 1fr; }
  .brand-text b { max-width: 180px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Malaffi: lifetime certificate */
.lifetime-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; background: var(--ok-soft); color: var(--ok); }
input:disabled { background: var(--panel-2); color: var(--muted); cursor: not-allowed; }

/* ---------- Policy Document Preparation ---------- */
.pp-badge { padding: 6px 14px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: 13px; }
.pp-steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pp-steps li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); font-weight: 600; font-size: 14px; }
.pp-steps li b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); flex: none; }
.pp-steps li.done b { background: var(--grad); color: #fff; border-color: transparent; font-size: 0; }
.pp-steps li.done b::after { content: "✓"; font-size: 15px; }
.pp-table td { vertical-align: middle; } .pp-table select { width: auto; padding: 6px 10px; } .pp-table input { min-width: 220px; padding: 7px 10px; }
.pp-assets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pp-asset { display: grid; gap: 4px; padding: 12px; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--line-2); }
.pp-asset b { font-size: 14px; } .pp-asset small { color: var(--muted); font-size: 12px; margin-top: -4px; }
.pp-asset.muted-box { opacity: .5; }
.pp-pic { height: 84px; border-radius: 12px; background: #fff; border: 1px dashed var(--line); display: grid; place-items: center; padding: 6px; margin-bottom: 4px; }
.pp-pic img { max-width: 100%; max-height: 72px; object-fit: contain; }
.pp-pic span { color: #94a3b8; font-size: 12.5px; }
.pp-progress { display: grid; gap: 6px; } .pp-progress .days-bar { height: 10px; --c: var(--brand); } .pp-progress span { font-size: 13px; color: var(--muted); }
.pp-out { display: grid; gap: 10px; border-top: 1px solid var(--line-2); padding-top: 14px; }
.pp-link { background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 8%, var(--panel)), var(--panel)); }
@media (max-width: 980px) { .pp-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .pp-assets { grid-template-columns: 1fr; } }
.pp-for { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: -4px 0 14px; padding: 12px 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 14px; }
.pp-for b { font-family: var(--font-display); font-size: 17px; }
.pp-code { padding: 2px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: 12.5px; }
.pp-lockbar { padding: 11px 14px; border-radius: 14px; font-size: 13.5px; }
.pp-lockbar.on { background: var(--ok-soft); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent); }
.pp-lockbar.off { background: var(--warn-soft); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent); }

/* ---------- New facility policy pack (one form) ---------- */
.np { gap: 18px; }
.np-head { display: flex; flex-wrap: wrap; gap: 14px 24px; justify-content: space-between; align-items: flex-start; }
.np-head p { margin: 6px 0 0; max-width: 640px; }
.np-preview { display: grid; padding: 12px 16px; border-radius: 16px; background: var(--grad); color: #fff; min-width: 240px; box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--brand) 80%, transparent); }
.np-preview span { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; opacity: .85; font-weight: 700; }
.np-preview b { font-family: var(--font-display); font-size: 20px; letter-spacing: -.01em; }
.np-preview small { opacity: .85; font-size: 12px; }
.np-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.np fieldset { border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px 16px; margin: 0; display: grid; gap: 12px; background: var(--panel-2); min-width: 0; }
.np fieldset:disabled { opacity: .65; }
.np legend { padding: 0 6px; font-weight: 700; font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.np legend i { width: 24px; height: 24px; border-radius: 50%; background: var(--grad); color: #fff; font-style: normal; font-size: 12.5px; display: grid; place-items: center; }
.np-pics { grid-column: 1 / -1; }
.np-pics p { margin: -4px 0 0; }
.np-pic-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.np-pic { display: grid; gap: 6px; cursor: pointer; color: var(--ink); font-weight: 600; }
.np-box { height: 104px; border-radius: 14px; border: 2px dashed color-mix(in srgb, var(--brand) 30%, var(--line)); background: #fff; display: grid; place-items: center; padding: 8px; overflow: hidden; }
.np-box img { max-width: 100%; max-height: 86px; object-fit: contain; }
.np-box em { font-style: normal; color: #64748b; font-size: 13px; text-align: center; word-break: break-all; }
.np-pic:hover .np-box { border-color: var(--brand); }
.np-pic.set .np-box { border-style: solid; border-color: var(--ok); }
.np-pic small { color: var(--muted); font-size: 12px; font-weight: 500; }
.np-run { display: grid; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--panel-2); border: 1px solid var(--line); }
.np-run ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.np-run li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.np-run li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex: none; box-sizing: border-box; }
.np-run li.active { color: var(--ink); font-weight: 600; } .np-run li.active::before { border-color: var(--brand); border-top-color: transparent; animation: sp .8s linear infinite; }
.np-run li.done { color: var(--ok); } .np-run li.done::before { content: "✓"; border: 0; background: var(--ok); color: #fff; font-size: 11px; display: grid; place-items: center; }
.np-run li.warn { color: var(--warn); } .np-run li.warn::before { content: "!"; border: 0; background: var(--warn); color: #fff; font-size: 11px; display: grid; place-items: center; }
.np-run li.bad { color: var(--bad); } .np-run li.bad::before { content: "×"; border: 0; background: var(--bad); color: #fff; font-size: 12px; display: grid; place-items: center; }
.np-run .days-bar { --c: var(--brand); height: 8px; }
.np-spacer { flex: 1; }
.pp-for .btn { margin-left: auto; }
@media (max-width: 860px) { .np-grid, .np-pic-row { grid-template-columns: 1fr 1fr; } .np-grid fieldset { grid-column: 1 / -1; } }

/* live preview in the policy pack form */
.np-live { grid-column: 1 / -1; }
.np-live-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; align-items: start; }
.np-doc { background: #fff; color: #1f2937; border-radius: 12px; padding: 16px 18px; border: 1px solid var(--line); font-family: Calibri, "Segoe UI", sans-serif; box-shadow: var(--shadow); }
.np-doc-logo { height: 52px; display: grid; place-items: center; margin-bottom: 10px; }
.np-doc-logo img { max-height: 52px; max-width: 220px; object-fit: contain; }
.np-doc-logo span { color: #94a3b8; font-size: 12px; border: 1px dashed #cbd5e1; padding: 10px 18px; border-radius: 8px; }
.np-doc table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.np-doc th { background: #fff; color: #1d3c78; font-family: Cambria, Georgia, serif; font-size: 13px; text-transform: none; letter-spacing: 0; text-align: center; padding: 8px; border: 1px solid #3b5ba9; position: static; border-radius: 0 !important; }
.np-doc td { border: 1px solid #3b5ba9; padding: 4px 8px; text-align: center; }
.np-doc tbody tr:hover td { background: transparent; }
.np-doc td:first-child { width: 46%; }
.np-badge { color: #1a9ad6; font-weight: 700; font-size: 11.5px; }
.np-doc-text { font-size: 12.5px; margin: 10px 0 0; }
.np-pdf { display: grid; gap: 8px; }
.np-pdf select { width: auto; flex: 1; min-width: 0; padding: 8px 10px; }
.np-pdf iframe { width: 100%; height: 520px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
@media (max-width: 860px) { .np-live-grid { grid-template-columns: 1fr; } }

/* policy pack form: fixes */
#pp-new-dlg { overflow-x: hidden; }
.np-pdf .btn-row { flex-wrap: nowrap; min-width: 0; }
.np-pdf select { flex: 1 1 auto; width: 100%; min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.np-pdf .btn { flex: none; }
.np-live-grid > * { min-width: 0; }
.np-foot { position: sticky; bottom: -28px; margin: 0 -28px -28px; padding: 14px 28px; background: var(--panel); border-top: 1px solid var(--line); z-index: 2; }
.np input.invalid, .np .np-pic.invalid .np-box { border-color: var(--bad) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 15%, transparent); }
.np-check .alert { margin: 0; }
.spin.light { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; }
.vchip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-weight: 700; font-size: 11.5px; background: var(--na-soft); color: var(--na); border: 1px solid transparent; }
.vchip.used { background: var(--brand-soft); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, transparent); }

/* ---------- master viewer / editor ---------- */
.vtoggle { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); }
.vtoggle button { font: inherit; font-size: 12.5px; font-weight: 700; border: 0; background: none; color: var(--muted); padding: 4px 11px; border-radius: 999px; cursor: pointer; }
.vtoggle button.on { background: var(--grad); color: #fff; }
.pm { display: grid; gap: 12px; }
.pm-head { display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: space-between; align-items: center; }
.pm-head h2 { margin: 2px 0 0; }
.pm-vers { display: inline-flex; padding: 4px; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--line); }
.pm-vers button { font: inherit; font-weight: 700; border: 0; background: none; color: var(--muted); padding: 8px 16px; border-radius: 12px; cursor: pointer; }
.pm-vers button.on { background: var(--grad); color: #fff; box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--brand) 80%, transparent); }
.pm-vers small { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; opacity: .85; margin-left: 4px; }
.pm-tabs { margin: 0; }
#pm-info { margin: -4px 0 0; }
#pm-frame { width: 100%; height: 66vh; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.pm-paras { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 58vh; overflow: auto; padding-right: 4px; }
.pm-p { display: grid; grid-template-columns: 74px 1fr auto; gap: 10px; align-items: start; padding: 8px 10px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line-2); }
.pm-p textarea { resize: none; overflow: hidden; min-height: 38px; font-size: 13.5px; line-height: 1.5; padding: 8px 10px; }
.pm-p.k-heading textarea { font-weight: 700; color: var(--brand); }
.pm-p.k-list textarea { padding-left: 22px; background-image: radial-gradient(circle at 10px 18px, var(--muted) 2.5px, transparent 3px); }
.pm-p.changed { border-color: var(--warn); background: var(--warn-soft); }
.pm-p.deleted { opacity: .55; } .pm-p.deleted textarea { text-decoration: line-through; }
.pm-p.k-new { border-color: var(--ok); background: var(--ok-soft); }
.pm-n { font-weight: 800; color: var(--muted); font-size: 13px; display: grid; } .pm-n small { font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; }
.pm-acts { display: grid; gap: 4px; }
.pm-pic { padding: 8px 10px; color: var(--muted); font-size: 13px; font-style: italic; }
.ok-txt { color: var(--ok); font-weight: 700; }

/* =====================================================================================================
   Side menu app (Notion / Microsoft 365 style): white left sidebar, calm light content area
   ===================================================================================================== */
:root { --sb-w: 264px; --bg: #f5f6f8; --bg-glow-1: transparent; --bg-glow-2: transparent; --line: #e7e9ee; --line-2: #eff1f4; --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 10px -4px rgba(15, 23, 42, .06); }
:root[data-theme="dark"] { --bg: #0b0f17; --bg-glow-1: transparent; --bg-glow-2: transparent; }
body { background: var(--bg); }

.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sb-w); z-index: 30; display: flex; flex-direction: column; gap: 10px;
  padding: 18px 14px 14px; background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; }
.sb-brand { display: flex; align-items: center; gap: 12px; padding: 4px 6px 10px; }
.sb-brand .brand-logo { height: 46px; min-width: 46px; max-width: 120px; border-radius: 12px; }
.sb-brand .brand-text b { font-size: 14.5px; max-width: 150px; white-space: normal; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sb-fac { display: grid; gap: 4px; padding: 0 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.sb-fac select { width: 100%; max-width: none; font-size: 13.5px; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 9px 10px; border-radius: 10px; background: var(--panel-2); color: var(--ink); }
.sb-add { font: inherit; font-size: 13px; font-weight: 600; margin: 0 4px; padding: 7px 10px; border-radius: 10px; border: 1px dashed var(--line); background: none; color: var(--muted); cursor: pointer; text-align: left; }
.sb-add:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.sb-label { margin: 10px 10px 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.sb-nav { display: grid; gap: 2px; }
.sb-nav button { font: inherit; font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px;
  background: none; color: var(--ink-2); cursor: pointer; text-align: left; position: relative; }
.sb-nav button svg { width: 19px; height: 19px; fill: var(--muted); flex: none; }
.sb-nav button:hover { background: var(--panel-2); color: var(--ink); }
.sb-nav button.active { background: var(--brand-soft); color: var(--brand); }
.sb-nav button.active svg { fill: var(--brand); }
.sb-nav button.active::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--brand); }
.sb-foot { margin-top: auto; display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.sb-foot .theme-switch { justify-self: start; background: var(--panel-2); border-color: var(--line); }
.sb-foot .theme-switch button { color: var(--muted); }
.sb-foot .theme-switch button.active { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .15); }
.sb-foot .user-menu > summary { border-radius: 12px; padding: 6px 10px 6px 6px; background: var(--panel-2); border: 1px solid var(--line); }
.sb-foot .who b { color: var(--ink); } .sb-foot .who small { color: var(--muted); }
.menu-pop.up { top: auto; bottom: calc(100% + 8px); left: 0; right: 0; }

.page { margin-left: var(--sb-w); max-width: none; padding: 30px 36px 70px; }
.page > .tab { max-width: 1320px; margin: 0 auto; }
.page-title h1 { font-size: 26px; letter-spacing: -.02em; }
.page-title p { font-size: 14.5px; }

/* calmer surfaces */
.panel, .kpi, .fac-band, .table-wrap, .doc-line, .pp-steps li, .pp-for { border-radius: 16px; }
.btn.primary { background: var(--brand); box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--brand) 70%, transparent); }
.btn.primary:hover { background: var(--brand-2); }
.chips button.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.stat.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.kpi::before { display: none; }
.kpi i { border-radius: 12px; }
th { background: var(--panel-2); }

/* phone / small screens: the side menu slides in over the page */
.mobilebar, .sb-scrim { display: none; }
@media (max-width: 980px) {
  .mobilebar { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 25; padding: 10px 14px; background: var(--panel); border-bottom: 1px solid var(--line); }
  .mobilebar b { font-family: var(--font-display); font-size: 16px; }
  .sb-burger { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); display: grid; place-items: center; cursor: pointer; }
  .sb-burger svg { width: 20px; height: 20px; fill: var(--ink); }
  .sidebar { transform: translateX(-105%); transition: transform .22s ease; box-shadow: var(--shadow-lg); }
  body.menu-open .sidebar { transform: none; }
  body.menu-open .sb-scrim { display: block; position: fixed; inset: 0; z-index: 29; background: rgba(8, 12, 24, .4); }
  .page { margin-left: 0; padding: 18px 14px 60px; }
}
.sb-foot .user-menu .who { display: flex !important; }

/* =====================================================================================================
   Fresh Home: health bar, deadline timeline, entry mosaic, activity feed · hover cards · register cards
   ===================================================================================================== */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 20px; box-shadow: var(--shadow); min-width: 0; }
.hx-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 14px; }
.hx-card-head h2 { margin: 0; font-size: 16.5px; }

.hx-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 20px; }
.hx-date { margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--brand); text-transform: uppercase; letter-spacing: .06em; }
.hx-hello h1 { font-size: 28px; }
.hx-hello p { margin: 4px 0 0; }
.hx-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.hx-actions .btn { position: relative; }
.hx-actions .new-dot { position: absolute; top: -8px; right: -6px; }
.btn.fresh { border-color: var(--brand); color: var(--brand); animation: dlpulse 1.8s ease-in-out infinite; }

.hx-grid { display: grid; gap: 18px; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas:
  "health health health health health health health next next next next next"
  "tiles tiles tiles tiles tiles tiles tiles tiles tiles tiles tiles tiles"
  "doh doh doh doh pol pol pol pol act act act act"; }
.hx-health { grid-area: health; } .hx-next { grid-area: next; } .hx-entries { grid-area: tiles; }
.hx-doh { grid-area: doh; } .hx-pol { grid-area: pol; } .hx-activity { grid-area: act; }

/* health */
.hx-health { --tone: var(--info); --tone-soft: var(--info-soft); display: grid; gap: 18px; align-content: start; position: relative; overflow: hidden; }
.hx-health::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--tone); }
.hx-health.tone-ok { --tone: var(--ok); --tone-soft: var(--ok-soft); } .hx-health.tone-warn { --tone: var(--warn); --tone-soft: var(--warn-soft); } .hx-health.tone-bad { --tone: var(--bad); --tone-soft: var(--bad-soft); }
.hx-health-top { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
.hx-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.hx-score { display: flex; align-items: baseline; gap: 2px; color: var(--tone); font-family: var(--font-display); }
.hx-score b { font-size: 64px; line-height: 1; font-weight: 700; letter-spacing: -.04em; }
.hx-score span { font-size: 28px; font-weight: 700; } .hx-score small { margin-left: 8px; color: var(--muted); font-size: 14px; font-weight: 600; font-family: var(--font); }
.hx-verdict { flex: 1; min-width: 220px; padding: 12px 16px; border-radius: 14px; background: var(--tone-soft); }
.hx-verdict b { display: block; font-size: 17px; color: var(--tone); } .hx-verdict p { margin: 2px 0 0; color: var(--ink-2); font-size: 14px; }
.hx-bar { display: flex; gap: 4px; height: 38px; }
.seg { font: inherit; border: 0; border-radius: 10px; cursor: pointer; color: #fff; font-weight: 800; min-width: 34px; display: grid; place-items: center; transition: transform .15s, filter .15s; }
.seg:hover { transform: translateY(-2px); filter: brightness(1.08); }
.seg.ok { background: var(--ok); } .seg.warn { background: var(--warn); } .seg.bad { background: var(--bad); } .seg.missing { background: var(--missing); } .seg.empty { flex: 1; background: var(--line-2); cursor: default; }
.hx-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.lg-chip { font: inherit; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); cursor: pointer; }
.lg-chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); } .lg-chip b { color: var(--ink); }
.lg-chip.ok { --c: var(--ok); } .lg-chip.warn { --c: var(--warn); } .lg-chip.bad { --c: var(--bad); } .lg-chip.missing { --c: var(--missing); }
.lg-chip:hover { border-color: var(--c); background: color-mix(in srgb, var(--c) 8%, var(--panel)); }
.lg-chip.zero { opacity: .55; }

/* deadlines timeline */
.hx-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tl { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px 8px 8px; border-radius: 14px; border: 1px solid var(--line-2); cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.tl:hover, .tl:focus-visible { background: color-mix(in srgb, var(--c) 7%, var(--panel)); border-color: color-mix(in srgb, var(--c) 45%, var(--line)); transform: translateX(2px); outline: none; }
.tl.ok { --c: var(--ok); } .tl.warn { --c: var(--warn); } .tl.bad { --c: var(--bad); } .tl.missing { --c: var(--missing); }
.tl-date { display: grid; place-items: center; height: 50px; border-radius: 12px; background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--c); line-height: 1.05; }
.tl-date b { font-size: 19px; font-family: var(--font-display); } .tl-date small { font-size: 10.5px; font-weight: 700; text-transform: uppercase; }
.tl-body { min-width: 0; } .tl-body b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tl-body small { color: var(--c); font-weight: 600; font-size: 12.5px; }
.tl-go { color: var(--muted); font-size: 20px; }
.hx-clear { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; background: var(--ok-soft); color: var(--ok); }
.hx-clear span { width: 34px; height: 34px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; flex: none; }
.hx-clear small { display: block; color: var(--ink-2); }

/* entry mosaic */
.hx-mosaic { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.tile { font: inherit; text-align: left; color: var(--ink); cursor: pointer; display: grid; gap: 6px; align-content: start; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); position: relative; overflow: hidden; transition: transform .18s, box-shadow .18s, border-color .18s; min-width: 0; }
.tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c); }
.tile:hover, .tile:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--c) 55%, transparent); border-color: color-mix(in srgb, var(--c) 50%, var(--line)); outline: none; }
.tile.ok { --c: var(--ok); } .tile.warn { --c: var(--warn); } .tile.bad { --c: var(--bad); } .tile.missing { --c: var(--missing); }
.tile-top { display: flex; align-items: center; gap: 6px; } .tile-top i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); } .tile-top small { font-size: 11px; font-weight: 700; color: var(--c); text-transform: uppercase; letter-spacing: .05em; }
.tile > b { font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.tile-meta { font-size: 12px; color: var(--muted); }
.tile-bar { height: 6px; border-radius: 99px; background: var(--line-2); overflow: hidden; } .tile-bar i { display: block; height: 100%; border-radius: 99px; background: var(--c); }
.tile-days { font-size: 12.5px; font-weight: 700; color: var(--c); }

/* doh / policies / activity */
.hx-doh, .hx-pol, .hx-activity { display: grid; gap: 12px; align-content: start; }
.hx-doh .hx-card-head { margin-bottom: 0; }
.hx-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hx-mini > div { padding: 10px; border-radius: 12px; background: var(--panel-2); display: grid; min-width: 0; }
.hx-mini b { font-family: var(--font-display); font-size: 22px; } .hx-mini span { font-size: 11.5px; font-weight: 600; color: var(--muted); } .hx-mini small { font-size: 10.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facts li { grid-template-columns: 90px minmax(0, 1fr); } .facts b { overflow-wrap: anywhere; }
.hx-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hx-steps li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--panel-2); font-weight: 600; font-size: 14px; color: var(--muted); }
.hx-steps li i { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-style: normal; font-size: 12px; flex: none; }
.hx-steps li.done { color: var(--ink); } .hx-steps li.done i { background: var(--ok); border-color: var(--ok); color: #fff; }
.hx-pol-body p { margin: 8px 0 0; }
.hx-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hx-feed li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 10px; padding: 8px; border-radius: 12px; }
.hx-feed li:hover { background: var(--panel-2); }
.hx-feed i { grid-row: span 2; width: 30px; height: 30px; border-radius: 10px; background: var(--brand-soft); display: grid; place-items: center; font-style: normal; font-size: 14px; }
.hx-feed span { font-size: 13.5px; overflow-wrap: anywhere; } .hx-feed small { font-size: 11.5px; color: var(--muted); }
.hx-more { margin-top: 20px; }
.hx-more-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }

/* hover card */
.hovercard { position: fixed; z-index: 100; max-width: 300px; padding: 9px 12px; border-radius: 12px; background: #0f172a; color: #e2e8f0; font-size: 13px; line-height: 1.45;
  box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .5); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; left: -999px; top: -999px; }
.hovercard.on { opacity: 1; transform: none; }
.hovercard.wide { max-width: 340px; padding: 14px 16px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); }
:root[data-theme="dark"] .hovercard:not(.wide) { background: #e2e8f0; color: #0f172a; }
.hc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .hc-head b { font-size: 14.5px; }
.hc-title { margin: -4px 0 10px; font-size: 13px; color: var(--ink-2); }
.hc-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 0; }
.hc-kv dt { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .hc-kv dd { margin: 0; font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.hc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .hc-list li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; } .hc-list small { color: var(--muted); white-space: nowrap; }
.hc-why { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-2); }
.hc-foot { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--line-2); font-size: 12px; color: var(--brand); font-weight: 600; }
.hc-foot:empty { display: none; }
.register tbody tr[data-hc]:hover td, #tbl tbody tr:hover td { background: color-mix(in srgb, var(--brand-soft) 70%, transparent); }

/* Legal Register: view switch + cards */
.viewswitch { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.viewswitch button { font: inherit; font-size: 13px; font-weight: 600; border: 0; background: none; color: var(--muted); padding: 6px 12px; border-radius: 9px; cursor: pointer; }
.viewswitch button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .15); }
.ecards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); margin-bottom: 16px; }
.ecard { --c: var(--na); display: grid; gap: 10px; align-content: start; padding: 16px 16px 14px 20px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); position: relative; overflow: hidden; transition: transform .18s, box-shadow .18s, border-color .18s; min-width: 0; }
.ecard::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--c); }
.ecard:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 45%, var(--line)); box-shadow: 0 16px 30px -16px color-mix(in srgb, var(--c) 60%, transparent); }
.ecard.ok { --c: var(--ok); } .ecard.warn { --c: var(--warn); } .ecard.bad { --c: var(--bad); } .ecard.missing { --c: var(--missing); }
.ecard.fixed { opacity: .8; }
.ecard header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ecard-sl { font-weight: 800; color: var(--muted); font-size: 13px; }
.ecard h3 { margin: 0; font-size: 15.5px; line-height: 1.3; overflow-wrap: anywhere; }
.ecard-dates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
.ecard-dates div { padding: 6px 8px; border-radius: 10px; background: var(--panel-2); min-width: 0; }
.ecard-dates dt { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .ecard-dates dd { margin: 0; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ecard .tile-bar i { background: var(--c); }
.ecard-days { margin: -4px 0 0; font-size: 13px; font-weight: 700; color: var(--c); }
.ecard footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line-2); flex-wrap: wrap; }
.ecard-who { font-size: 12.5px; color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

/* ---------- overflow fixes (every page, every width) ---------- */
html, body { overflow-x: hidden; }
.page, .page > .tab, .panel, .card, .row-2-1 > *, .row-3 > *, .top-grid > *, .hx-grid > *, .pp-assets > *, .np-grid > *, fieldset { min-width: 0; }
.table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.page-title, .sec-head, .btn-row, .actions, .doc-line { min-width: 0; }
.page-title > div:first-child { min-width: 0; flex: 1 1 320px; }
.page-title h1 { overflow-wrap: anywhere; }
#doc-strip { min-width: 0; } #doc-strip dd { overflow-wrap: anywhere; }
.pp-table td.name, .register td.name { min-width: 180px; }
.pp-table input { min-width: 140px; width: 100%; }
dialog, dialog.wide { max-width: calc(100vw - 24px); }
.fac-band { min-width: 0; } .band-doc dd { white-space: normal; overflow-wrap: anywhere; }
.facts li > * { min-width: 0; }
img, svg, iframe { max-width: 100%; }

@media (max-width: 1280px) {
  .hx-grid { grid-template-areas: "health health health health health health health next next next next next" "tiles tiles tiles tiles tiles tiles tiles tiles tiles tiles tiles tiles" "doh doh doh doh doh doh pol pol pol pol pol pol" "act act act act act act act act act act act act"; }
}
@media (max-width: 1080px) {
  .hx-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "health" "next" "tiles" "doh" "pol" "act"; }
  .hx-more-grid, .row-2-1, .row-3, .top-grid { grid-template-columns: minmax(0, 1fr); }
  .pp-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .hx-score b { font-size: 52px; }
  .hx-head { align-items: stretch; } .hx-actions { width: 100%; } .hx-actions .btn { flex: 1 1 calc(50% - 8px); justify-content: center; }
  .hx-mosaic { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .ecards { grid-template-columns: minmax(0, 1fr); }
  .pp-steps { grid-template-columns: minmax(0, 1fr); }
  .page-title .btn-row { width: 100%; }
  .hovercard, .hovercard.wide { max-width: calc(100vw - 20px); }
  .np-pic-row { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================================================
   Compact dashboard: slim summary strip on top, entries left, side column right · short hover cards
   ===================================================================================================== */
.hx-grid { gap: 16px; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; grid-template-areas:
  "health health health health health health health health health health health health"
  "tiles tiles tiles tiles tiles tiles tiles tiles next next next next"
  "tiles tiles tiles tiles tiles tiles tiles tiles doh doh doh doh"
  "tiles tiles tiles tiles tiles tiles tiles tiles pol pol pol pol"
  "tiles tiles tiles tiles tiles tiles tiles tiles act act act act"; }
.hx-strip { grid-area: health; }
.hx-entries { align-self: stretch; }

/* the strip: ring · verdict · counters, with a thin bar along the bottom */
.hx-strip { --tone: var(--info); --tone-soft: var(--info-soft); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 22px; padding: 16px 20px 0; overflow: hidden; }
.hx-strip.tone-ok { --tone: var(--ok); --tone-soft: var(--ok-soft); } .hx-strip.tone-warn { --tone: var(--warn); --tone-soft: var(--warn-soft); } .hx-strip.tone-bad { --tone: var(--bad); --tone-soft: var(--bad-soft); }
.hx-ring { --p: 0; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--tone) calc(var(--p) * 1%), var(--line-2) 0); flex: none; }
.hx-ring > span { width: 50px; height: 50px; border-radius: 50%; background: var(--panel); display: grid; place-items: center; grid-auto-flow: column; align-content: center; gap: 1px; }
.hx-ring b { font-family: var(--font-display); font-size: 18px; color: var(--ink); } .hx-ring small { font-size: 11px; font-weight: 700; color: var(--muted); align-self: end; padding-bottom: 3px; }
.hx-strip .hx-verdict { padding: 0; background: none; min-width: 0; }
.hx-strip .hx-verdict b { font-size: 17px; color: var(--tone); }
.hx-strip .hx-verdict p { margin: 1px 0 0; font-size: 13.5px; color: var(--muted); }
.hx-strip .hx-legend { justify-content: flex-end; }
.hx-strip .hx-bar { grid-column: 1 / -1; height: 6px; gap: 3px; margin: 2px -20px 0; }
.hx-strip .seg { border-radius: 0; min-width: 6px; } .hx-strip .seg span { display: none; } .hx-strip .seg:hover { transform: none; filter: brightness(1.15); }
.hx-strip .lg-chip { padding: 5px 11px; }

/* side column cards: tighter */
.hx-next, .hx-doh, .hx-pol, .hx-activity { padding: 16px; }
.hx-next .hx-card-head .muted { display: none; }
.tl { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; padding: 6px 8px 6px 6px; border-radius: 12px; }
.tl-date { height: 42px; border-radius: 10px; } .tl-date b { font-size: 16px; } .tl-date small { font-size: 9.5px; }
.tl-body b { font-size: 13px; } .tl-body small { font-size: 12px; }
.hx-mini b { font-size: 19px; }
.facts li { padding: 8px 10px; font-size: 13px; grid-template-columns: 74px minmax(0, 1fr); }
.hx-steps li { padding: 7px 10px; font-size: 13px; }
.hx-feed li { padding: 6px; } .hx-feed span { font-size: 13px; }

/* entry tiles: compact */
.hx-entries { padding: 16px; }
.hx-mosaic { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
.tile { padding: 12px; gap: 5px; border-radius: 14px; }
.tile > b { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-meta { font-size: 11.5px; } .tile-days { font-size: 12px; } .tile-bar { height: 4px; }

/* short hover cards */
.hovercard.wide { max-width: 280px; padding: 12px 14px; }
.hc-head { margin-bottom: 6px; } .hc-head b { font-size: 13.5px; line-height: 1.3; }
.hc-big { margin: 0; font-size: 15px; font-weight: 700; }
.hc-line { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-2); }
.hc-thumb { display: block; margin-top: 8px; width: 100%; max-height: 120px; object-fit: cover; object-position: top; border-radius: 8px; border: 1px solid var(--line); }
.hc-why { margin: 6px 0 0; font-size: 12.5px; }
.hc-list li { font-size: 12.5px; }

/* sidebar: logo above the name (no overlap, any logo shape) */
.sb-brand { flex-direction: column; align-items: flex-start; gap: 8px; padding: 2px 4px 8px; }
.sb-brand .brand-logo { width: 100%; max-width: 100%; height: 56px; justify-content: center; padding: 6px 10px; }
.sb-brand .brand-logo img { max-width: 100%; max-height: 44px; }
.sb-brand .brand-text b { max-width: 100%; }

/* entry dialog: its document / photo */
.entry-doc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 1px dashed var(--line); }
.ecard footer .icon-btn { padding: 4px 9px; }

@media (max-width: 1180px) {
  .hx-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: "health health health health health health health health health health health health"
    "tiles tiles tiles tiles tiles tiles tiles tiles tiles tiles tiles tiles"
    "next next next next next next doh doh doh doh doh doh"
    "pol pol pol pol pol pol act act act act act act"; }
}
@media (max-width: 860px) {
  .hx-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "health" "next" "tiles" "doh" "pol" "act"; }
  .hx-strip { grid-template-columns: auto minmax(0, 1fr); }
  .hx-strip .hx-legend { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 1180px) {
  .hx-strip { grid-template-columns: auto minmax(0, 1fr); }
  .hx-strip .hx-legend { grid-column: 1 / -1; justify-content: flex-start; }
}

/* =====================================================================================================
   Workflow Home: 1 Policies -> 2 Legal Register -> 3 DoH monitoring · Admin console
   ===================================================================================================== */
.jr-track { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; counter-reset: jr; }
.jr-track li { --c: var(--muted); --cs: var(--panel-2); position: relative; min-width: 0; }
.jr-track li.done { --c: var(--ok); --cs: var(--ok-soft); }
.jr-track li.warn { --c: var(--warn); --cs: var(--warn-soft); }
.jr-track li.bad { --c: var(--bad); --cs: var(--bad-soft); }
.jr-track li.todo.current { --c: var(--brand); --cs: var(--brand-soft); }
.jr-track button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); color: var(--ink); text-align: left; cursor: pointer; font: inherit; transition: transform .15s, box-shadow .15s, border-color .15s; }
.jr-track button:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--c); }
.jr-track li.current button { border-color: var(--c); box-shadow: 0 0 0 3px var(--cs), var(--shadow); }
.jr-track i { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 15px; background: var(--cs); color: var(--c); border: 2px solid var(--c); }
.jr-track li.done i { background: var(--c); color: #fff; }
.jr-track span { display: grid; min-width: 0; }
.jr-track b { font-size: 14.5px; }
.jr-track small { font-size: 12.5px; color: var(--c); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jr-track li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -9px; width: 8px; height: 2px; background: var(--line); }

.jr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; margin-bottom: 16px; }
.jr-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; min-width: 0; border-top: 3px solid transparent; }
.jr-card.current { border-top-color: var(--brand); }
.jr-card > .btn-row { margin-top: auto; }
.jr-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.jr-head > div { flex: 1; min-width: 0; }
.jr-head h2 { margin: 0; font-size: 16px; }
.jr-num { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; background: var(--brand-soft); color: var(--brand); }
.jr-state { flex: none; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--panel-2); color: var(--muted); white-space: nowrap; }
.jr-state:empty { display: none; }
.jr-state.done { background: var(--ok-soft); color: var(--ok); }
.jr-state.warn { background: var(--warn-soft); color: var(--warn); }
.jr-state.bad { background: var(--bad-soft); color: var(--bad); }
.jr-card.current .jr-state.todo { background: var(--brand-soft); color: var(--brand); }
.jr-sub { margin: 2px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.jr-card .hx-strip { grid-area: auto; grid-template-columns: auto minmax(0, 1fr); padding: 12px 14px 0; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); box-shadow: none; }
.jr-card .hx-strip .hx-legend { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
.jr-card .hx-strip .hx-bar { margin: 2px -14px 0; }
.jr-card .hx-timeline { margin: 0; }
.jr-card .hx-mini { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jr-card .btn-row { flex-wrap: wrap; }

.jr-lower { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }

/* side menu: step badges + admin group */
.sb-step { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--brand-soft); color: var(--brand); margin-right: 2px; }
.sb-nav button.active .sb-step { background: var(--brand); color: var(--brand-ink); }
.sb-admin-label { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
body.not-admin [data-admin] { display: none !important; }

/* admin console */
.adm-kicker { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); background: var(--brand-soft); padding: 3px 9px; border-radius: 999px; margin-bottom: 6px; }
.adm-h2 { margin: 22px 0 10px; font-size: 16px; }
.adm-h2:first-child { margin-top: 0; }
#admin .sub { display: grid; }
#admin .adm[hidden] { display: none; }

@media (max-width: 1180px) {
  .jr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr-lower { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .jr-track { grid-template-columns: minmax(0, 1fr); }
  .jr-track li::after { display: none; }
  .jr-grid { grid-template-columns: minmax(0, 1fr); }
}
.auth-steps { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 16px; padding: 0; }
.auth-steps li { display: flex; align-items: center; gap: 7px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.auth-steps i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11.5px; font-weight: 800; background: var(--brand-soft); color: var(--brand); }
.jr-grid > .jr-card, .jr-lower > .card { grid-area: auto; }


/* =====================================================================================================
   Vivid sidebar · facility switcher · master template · no-facility start · access requests
   ===================================================================================================== */
:root { --sb-bg: linear-gradient(165deg, #312e81 0%, #4338ca 38%, #6d28d9 70%, #0f766e 120%); --sb-ink: #eef2ff; --sb-ink-2: rgba(238, 242, 255, .78);
  --sb-muted: rgba(224, 231, 255, .58); --sb-hover: rgba(255, 255, 255, .1); --sb-line: rgba(255, 255, 255, .14); --sb-card: rgba(255, 255, 255, .1); }
:root[data-theme="dark"] { --sb-bg: linear-gradient(165deg, #1e1b4b 0%, #26205e 45%, #2e1065 75%, #042f2e 120%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sb-bg: linear-gradient(165deg, #1e1b4b 0%, #26205e 45%, #2e1065 75%, #042f2e 120%); } }

.sidebar { background: var(--sb-bg); border-right: 0; color: var(--sb-ink); box-shadow: 4px 0 24px -12px rgba(30, 27, 75, .5); gap: 12px; }
.sidebar::-webkit-scrollbar { width: 6px; } .sidebar::-webkit-scrollbar-thumb { background: var(--sb-line); border-radius: 6px; }
.sb-app { display: flex; align-items: center; gap: 10px; padding: 0 4px 2px; }
.sb-app-mark { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg, #a5b4fc, #5eead4); box-shadow: 0 6px 16px -6px rgba(94, 234, 212, .7); flex: none; }
.sb-app-mark svg { width: 21px; height: 21px; fill: #1e1b4b; }
.sb-app-name { display: grid; line-height: 1.2; min-width: 0; }
.sb-app-name b { font-size: 15px; letter-spacing: -.01em; color: #fff; }
.sb-app-name small { font-size: 11px; color: var(--sb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sb-label { color: var(--sb-muted); }
.sb-nav button { color: var(--sb-ink-2); }
.sb-nav button svg { fill: var(--sb-muted); }
.sb-nav button:hover { background: var(--sb-hover); color: #fff; }
.sb-nav button:hover svg { fill: #fff; }
.sb-nav button.active { background: #fff; color: #3730a3; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .45); }
.sb-nav button.active svg { fill: #4f46e5; }
.sb-nav button.active::before { display: none; }
.sb-step { background: rgba(255, 255, 255, .16); color: #fff; }
.sb-nav button.active .sb-step { background: linear-gradient(135deg, #6366f1, #14b8a6); color: #fff; }
.sb-admin-label { border-top-color: var(--sb-line); }
.sb-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #f43f5e; color: #fff; font-size: 11px; font-weight: 800; display: inline-grid; place-items: center; }
.sb-foot { border-top-color: var(--sb-line); }
.sb-foot .theme-switch { background: rgba(0, 0, 0, .18); border-color: var(--sb-line); }
.sb-foot .theme-switch button { color: var(--sb-ink-2); }
.sb-foot .theme-switch button.active { background: #fff; color: #3730a3; }
.sb-foot .user-menu > summary { background: var(--sb-card); border-color: var(--sb-line); }
.sb-foot .who b { color: #fff; } .sb-foot .who small { color: var(--sb-muted); }
.sb-foot .avatar { background: linear-gradient(135deg, #a5b4fc, #5eead4); color: #1e1b4b; }

/* facility switcher */
.fs { position: relative; }
.fs-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 9px; border-radius: 16px; cursor: pointer; font: inherit; text-align: left;
  background: var(--sb-card); border: 1px solid var(--sb-line); color: #fff; transition: background .15s, border-color .15s, transform .15s; backdrop-filter: blur(6px); }
.fs-btn:hover, .fs.open .fs-btn { background: rgba(255, 255, 255, .17); border-color: rgba(255, 255, 255, .35); }
.fs-logo { flex: none; width: 46px; height: 46px; border-radius: 12px; background: #fff; display: grid; place-items: center; overflow: hidden; padding: 4px; box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .5); }
.fs-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fs-logo .logo-fallback { width: 100%; height: 100%; border-radius: 9px; font-size: 14px; }
.fs-text { display: grid; min-width: 0; flex: 1; line-height: 1.2; }
.fs-text small { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--sb-muted); }
.fs-text b { font-size: 14px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-text em { font-style: normal; font-size: 11.5px; color: var(--sb-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-chev { width: 18px; height: 18px; fill: var(--sb-muted); flex: none; }
.fs-pop { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-lg); padding: 6px; display: grid; gap: 4px; animation: pop .15s ease; max-height: 70vh; overflow-y: auto; }
.fs-pop[hidden] { display: none; }
.fs-pop input[type=search] { width: 100%; padding: 8px 10px; border-radius: 10px; font-size: 13px; }
.fs-list { display: grid; gap: 2px; }
.fs-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border-radius: 11px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.fs-item:hover { background: var(--panel-2); }
.fs-item.on { background: var(--brand-soft); }
.fs-ilogo { position: relative; flex: none; width: 34px; height: 34px; border-radius: 9px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.fs-ilogo img { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); object-fit: contain; background: #fff; }
.fs-ilogo i { font-style: normal; font-size: 11px; font-weight: 800; color: var(--brand); }
.fs-itext { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
.fs-itext b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-itext small { font-size: 11.5px; color: var(--muted); }
.fs-item.tpl .fs-itext small { color: #b45309; font-weight: 700; }
.fs-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.fs-dot.ok { background: var(--ok); } .fs-dot.warn { background: var(--warn); } .fs-dot.bad { background: var(--bad); } .fs-dot.na { background: var(--line); }
.fs-sep { margin: 6px 8px 2px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.fs-empty { margin: 6px 8px; font-size: 13px; color: var(--muted); }
.fs-actions { display: grid; gap: 4px; border-top: 1px solid var(--line); padding-top: 6px; margin-top: 2px; }
.fs-add { font: inherit; font-size: 13.5px; font-weight: 700; padding: 9px 10px; border-radius: 11px; border: 0; cursor: pointer; text-align: left; color: #fff; background: var(--grad); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.fs-add small { font-weight: 600; opacity: .8; font-size: 11.5px; }
.fs-add.sub { background: none; color: var(--brand); font-weight: 600; font-size: 12.5px; }
.fs-add.sub:hover { background: var(--brand-soft); }

/* master template banner + admin card */
.tpl-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; padding: 12px 16px; border-radius: 16px;
  background: linear-gradient(120deg, #fef3c7, #fde68a); color: #78350f; border: 1px solid #fcd34d; }
.tpl-banner > div { flex: 1; min-width: 200px; display: grid; }
.tpl-banner small { color: #92400e; }
.tpl-banner .btn { margin-left: auto; }
.tpl-star { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #f59e0b; color: #fff; font-size: 17px; flex: none; }
.tpl-star.big { width: 48px; height: 48px; font-size: 24px; border-radius: 14px; }
.tpl-card { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-left: 4px solid #f59e0b; }
.tpl-card .tpl-main { flex: 1; min-width: 240px; }
.tpl-card h2 { margin: 2px 0 4px; }
.tpl-card .adm-kicker { color: #b45309; background: #fef3c7; }
.tpl-card select { max-width: 260px; }

/* no facility yet */
.nofac { max-width: 640px; margin: 6vh auto 0; text-align: center; padding: 32px 24px; border-radius: 24px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.nofac-art { width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 22px; display: grid; place-items: center; background: var(--grad); box-shadow: 0 14px 30px -12px rgba(79, 70, 229, .6); }
.nofac-art svg { width: 40px; height: 40px; fill: #fff; }
.nofac h1 { margin: 0 0 8px; }
.nofac-steps { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0; padding: 0; }
.nofac-steps li { display: flex; align-items: center; gap: 7px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.nofac-steps i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11.5px; font-weight: 800; background: var(--brand-soft); color: var(--brand); }
.btn-row.center { justify-content: center; }

/* access requests */
.pend-panel { border-left: 4px solid #f43f5e; }
.pend-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #f43f5e; color: #fff; font-size: 12px; vertical-align: middle; }
.pend-list { display: grid; gap: 10px; }
.pend { display: grid; grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1.4fr) auto; gap: 14px; align-items: start; padding: 14px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); }
.pend .avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--grad); color: #fff; }
.pend-who { display: grid; gap: 2px; min-width: 0; }
.pend-who small { color: var(--muted); overflow-wrap: anywhere; }
.pend-who p { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); font-style: italic; }
.pend-set { display: grid; gap: 8px; min-width: 0; }
.pend-set label { display: grid; gap: 3px; font-size: 12px; font-weight: 600; color: var(--muted); }
.pend-facs { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.pend-facs > span { width: 100%; font-size: 12px; font-weight: 600; color: var(--muted); }
.pend-act { display: grid; gap: 6px; }
@media (max-width: 900px) { .pend { grid-template-columns: auto minmax(0, 1fr); } .pend-set, .pend-act { grid-column: 1 / -1; } .pend-act { grid-auto-flow: column; justify-content: start; } }

/* sign-in: sign-up form */
.auth-switch { margin: 12px 0 0; text-align: center; font-size: 13.5px; color: var(--muted); }
.auth-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .auth-2col { grid-template-columns: 1fr; } }
.auth-done { text-align: center; margin-bottom: 14px; }
.auth-done > span { width: 56px; height: 56px; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; color: #fff; background: var(--ok); }
.fs-itext b, .fs-text b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
.pend-facs .check { display: inline-flex; align-items: center; gap: 6px; flex-direction: row; font-size: 13px; color: var(--ink); font-weight: 500; }
.pend-facs .check input { width: auto; margin: 0; }
.auth-mark { width: 56px; height: 56px; border-radius: 16px; } .auth-mark svg { width: 32px; height: 32px; }

/* =====================================================================================================
   Policies wizard: one step at a time
   ===================================================================================================== */
#policies { max-width: 1080px; }
.pw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.pw-head > div:first-child { flex: 1; min-width: 260px; }
.pw-head h1 { margin: 4px 0 6px; }
.pw-head p { margin: 0; max-width: 640px; }
.pw-kicker { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); background: var(--brand-soft); padding: 3px 10px; border-radius: 999px; }
.pw-head-side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

#policies .pp-for { flex-wrap: wrap; row-gap: 6px; margin-bottom: 14px; }
#policies .pp-for .muted { flex: 1 1 260px; min-width: 0; }

.pw-steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pw-steps li { --c: var(--muted); --cs: var(--panel-2); min-width: 0; }
.pw-steps li.done { --c: var(--ok); --cs: var(--ok-soft); }
.pw-steps li.on { --c: var(--brand); --cs: var(--brand-soft); }
.pw-steps button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; border: 2px solid var(--line); background: var(--panel); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.pw-steps button:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.pw-steps li.on button { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.pw-steps li.done:not(.on) button { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.pw-steps i { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; background: var(--cs); color: var(--c); }
.pw-steps li.done:not(.on) i { background: var(--ok); color: #fff; }
.pw-steps li.on i { background: var(--grad); color: #fff; }
.pw-steps span { display: grid; min-width: 0; line-height: 1.25; }
.pw-steps b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-steps small { font-size: 12px; color: var(--muted); }

.pw-pane { padding: 22px; animation: pop .18s ease; }
.pw-pane[hidden] { display: none !important; }
.pw-title { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.pw-title h2 { margin: 0; font-size: 19px; }
.pw-title p { margin: 2px 0 0; }
.pw-num { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 17px; color: #fff; background: var(--grad); }

/* read-only facts as a tidy strip instead of grey inputs */
.pw-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 18px; }
.pw-facts > div { background: var(--panel-2); padding: 10px 12px; display: grid; gap: 2px; min-width: 0; }
.pw-facts span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pw-facts input { all: unset; display: block; width: 100%; font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }

.pw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.pw-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
.pw-grid label { display: grid; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); min-width: 0; }
.pw-grid label em { color: var(--bad); font-style: normal; }
.pw-grid input { font-size: 15px; padding: 11px 12px; border-radius: 12px; }
.pw-hint { font-size: 11.5px; font-weight: 500; color: var(--muted); overflow-wrap: anywhere; }
.pw-more { margin-top: 16px; border: 1px dashed var(--line); border-radius: 14px; padding: 10px 14px; }
.pw-more > summary { cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--brand); list-style: none; display: flex; align-items: center; gap: 8px; }
.pw-more > summary::before { content: "▸"; transition: transform .15s; }
.pw-more[open] > summary::before { transform: rotate(90deg); }
.pw-more > summary::-webkit-details-marker { display: none; }

.pw-nav { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.pw-nav > .muted { margin-right: auto; }
.pw-nav > .btn:first-child:not(.primary) { margin-right: auto; }

.pw-assets { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.pw-assets .pp-pic { height: 110px; }

.pw-create { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px; border-radius: 16px; background: var(--brand-soft); margin-bottom: 12px; }
.pw-create .pp-progress { flex: 1; min-width: 220px; margin: 0; }
.pw-download { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px; border-radius: 16px; background: var(--ok-soft); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); }
.pw-download p { margin: 2px 0 0; overflow-wrap: anywhere; }
#policies .pp-out { border: 0; padding: 0; margin-top: 12px; }

@media (max-width: 900px) {
  .pw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pw-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pw-assets { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .pw-grid.three { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .pw-steps small { display: none; }
  .pw-grid { grid-template-columns: minmax(0, 1fr); }
  .pw-pane { padding: 16px; }
  .pw-nav .btn.big { flex: 1; }
}
.pw-grid label { display: block; }
.pw-grid label > input { display: block; width: 100%; margin-top: 6px; }
.pw-grid label > .pw-hint { display: block; margin-top: 4px; }

/* =====================================================================================================
   Legal Register: friendly header, folded document details, Edit always visible
   ===================================================================================================== */
.reg-bar { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.reg-doc { flex: 1 1 420px; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.reg-doc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px 14px; flex-wrap: wrap; min-width: 0; }
.reg-doc > summary::-webkit-details-marker { display: none; }
.reg-doc-k { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.reg-doc #doc-title { font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.reg-doc .classification { margin: 0; }
.reg-doc-more { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--brand); }
.reg-doc[open] .reg-doc-more { visibility: hidden; }
.reg-doc #doc-strip { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 10px 14px 12px; border-top: 1px solid var(--line-2); font-size: 13px; }
.reg-doc #doc-strip > * { margin: 0; }
.reg-bar .viewswitch { flex: none; align-self: center; }

/* table: the Edit button never scrolls out of sight */
#mtbl th:last-child, #mtbl td:last-child { position: sticky; right: 0; background: var(--panel); box-shadow: -8px 0 12px -10px rgba(15, 23, 42, .25); z-index: 1; }
#mtbl td { vertical-align: middle; }
#mtbl td:nth-child(2) { min-width: 160px; }
#mtbl .icon-btn { white-space: nowrap; }

/* new facility pack: one step at a time */
#pp-new-form .np-off { display: none !important; }
.np-wiz { margin: 4px 0 14px; }
.np-wiz small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pp-new-form .np-grid { grid-template-columns: minmax(0, 1fr) !important; }
#pp-new-form fieldset[data-npstep] { max-width: 760px; margin-inline: auto; width: 100%; }
#pp-new-form .np-live[data-npstep] { max-width: none; }
#pp-new-form:has(#np-run:not([hidden])) #np-wiz,
#pp-new-form:has(#np-run:not([hidden])) #np-back,
#pp-new-form:has(#np-run:not([hidden])) #np-next { display: none !important; }
#np-back[hidden], #np-next[hidden], #pp-new-create[hidden] { display: none !important; }

/* export hub */
#exports { max-width: 1080px; }
.ex-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ex-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.ex-card > header { display: flex; gap: 12px; align-items: center; }
.ex-card h2 { margin: 0; font-size: 17px; }
.ex-card p { margin: 2px 0 0; }
.ex-ic { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 22px; background: var(--brand-soft); }
.ex-main { justify-content: center; margin-top: auto; }
.ex-card .btn.disabled { pointer-events: none; opacity: .45; }
.ex-empty { align-self: flex-start; }
@media (max-width: 900px) { .ex-grid { grid-template-columns: minmax(0, 1fr); } }

/* picture boxes: ✕ remove, status line */
.np-box, .pp-pic { position: relative; }
.pic-x { position: absolute; top: 6px; right: 6px; z-index: 2; width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; font-size: 13px; font-weight: 800; line-height: 1; color: #fff; background: rgba(15, 23, 42, .72);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3); transition: background .15s, transform .15s; }
.pic-x:hover { background: var(--bad); transform: scale(1.08); }
.pic-x[hidden] { display: none !important; }
.np-pic .np-box img { object-fit: contain; }
.np-pic.busy .np-box { opacity: .75; }
.np-pic.bad .np-box { border-color: var(--bad) !important; }
.pic-note { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; min-height: 1em; }
.np-pic.set:not(.bad) .pic-note { color: var(--ok); }
.np-pic.bad .pic-note { color: var(--bad); }

/* full-screen document reader */
dialog.doc-viewer { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: #2b2f36; display: none; }
dialog.doc-viewer[open] { display: flex; flex-direction: column; }
dialog.doc-viewer::backdrop { background: rgba(10, 12, 20, .85); }
.dv-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.dv-ic { font-size: 20px; }
.dv-title { flex: 1; min-width: 180px; display: grid; line-height: 1.25; }
.dv-title b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dv-frame { flex: 1; width: 100%; border: 0; background: #525659; }
@media (max-width: 560px) { #dv-tab { display: none; } }

/* sort-for-me drop zone */
.np-sort { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: 14px; cursor: pointer;
  border: 2px dashed color-mix(in srgb, var(--brand) 55%, var(--line)); background: var(--brand-soft); transition: border-color .15s, background .15s; }
.np-sort > span:nth-child(3) { flex: 1; min-width: 220px; font-size: 13.5px; }
.np-sort:hover, .np-sort.over { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, var(--panel)); }
.np-sort.busy { opacity: .7; pointer-events: none; }
.np-sort-ic { font-size: 22px; }
#np-sort-msg { margin: 6px 0 12px; }
.pic-note .link-btn { font-size: 11.5px; padding: 0; }

/* facility switcher: remove button per facility */
.fs-row { position: relative; display: flex; align-items: center; }
.fs-row .fs-item { flex: 1; min-width: 0; padding-right: 40px; }
.fs-del { position: absolute; right: 6px; width: 30px; height: 30px; border-radius: 9px; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center; opacity: 0; transition: opacity .15s, background .15s; }
.fs-del svg { width: 17px; height: 17px; fill: var(--muted); }
.fs-row:hover .fs-del, .fs-del:focus-visible { opacity: 1; }
.fs-del:hover { background: var(--bad-soft); }
.fs-del:hover svg { fill: var(--bad); }
@media (hover: none) { .fs-del { opacity: .7; } }
.fs-row .fs-dot { margin-right: 4px; }

/* recently removed + toast */
.removed-card h2 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rm-list { display: grid; gap: 6px; }
.rm-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 140%); z-index: 1000; display: flex; align-items: center; gap: 12px; max-width: min(560px, calc(100vw - 32px));
  padding: 12px 14px 12px 18px; border-radius: 14px; background: #0f172a; color: #f1f5f9; box-shadow: var(--shadow-lg); transition: transform .25s ease; }
.toast.on { transform: translate(-50%, 0); }
.toast-x { border: 0; background: none; color: #94a3b8; cursor: pointer; font-size: 14px; }

/* =====================================================================================================
   Theme v8 – clean product look: one electric blue, white cards on soft grey, Geist type, pill buttons,
   blue hero on Home and sign-in, white sidebar with a solid blue active item. (Previous look: backups/ui-v7)
   ===================================================================================================== */
:root {
  --bg: #f5f6f8; --bg-glow-1: transparent; --bg-glow-2: transparent;
  --panel: #ffffff; --panel-2: #f5f6f8; --glass: rgba(255, 255, 255, .8); --glass-line: rgba(255, 255, 255, .95);
  --ink: #0a0a0b; --ink-2: #2b2f36; --muted: #6b7280; --line: #e6e8ec; --line-2: #eef0f3;
  --brand: #0454ff; --brand-2: #0340cc; --brand-ink: #ffffff; --brand-soft: #ebf1ff; --teal: #0d9488;
  --grad: linear-gradient(135deg, #0454ff 0%, #2a6bff 55%, #5c95ff 100%);
  --hero: radial-gradient(900px 380px at 15% -20%, rgba(255, 255, 255, .28), transparent 60%), radial-gradient(700px 400px at 100% 120%, rgba(146, 186, 255, .55), transparent 60%), linear-gradient(135deg, #0347e0 0%, #0454ff 45%, #3a7dff 100%);
  --info: #0454ff; --info-soft: #ebf1ff;
  --r-lg: 24px; --r: 20px; --r-sm: 12px;
  --shadow: 0 1px 2px rgba(10, 10, 11, .04), 0 1px 0 rgba(10, 10, 11, .02);
  --shadow-hover: 0 2px 4px rgba(10, 10, 11, .04), 0 16px 36px -14px rgba(4, 84, 255, .28);
  --shadow-lg: 0 30px 70px -24px rgba(10, 10, 11, .3);
  --font: "Geist", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Geist", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --sb-bg: #ffffff; --sb-ink: #0a0a0b; --sb-ink-2: #3f4550; --sb-muted: #8a909a; --sb-hover: #f3f5f8; --sb-line: #eceef1; --sb-card: #f5f6f8;
}
:root[data-theme="dark"] {
  --bg: #0a0b0e; --panel: #111318; --panel-2: #171a21; --glass: rgba(17, 19, 24, .8); --glass-line: rgba(255, 255, 255, .06);
  --ink: #f2f4f7; --ink-2: #c9ced8; --muted: #8b93a1; --line: #232730; --line-2: #1b1e25;
  --brand: #3d7bff; --brand-2: #2563eb; --brand-ink: #ffffff; --brand-soft: #132042;
  --grad: linear-gradient(135deg, #0454ff 0%, #2a6bff 55%, #5c95ff 100%);
  --hero: radial-gradient(900px 380px at 15% -20%, rgba(255, 255, 255, .16), transparent 60%), radial-gradient(700px 400px at 100% 120%, rgba(92, 149, 255, .35), transparent 60%), linear-gradient(135deg, #0234a8 0%, #0447d6 50%, #2a6bff 100%);
  --info: #6b9dff; --info-soft: #132042;
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-hover: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 18px 40px -16px rgba(61, 123, 255, .35);
  --sb-bg: #0e1015; --sb-ink: #f2f4f7; --sb-ink-2: #c9ced8; --sb-muted: #7c8492; --sb-hover: #171a21; --sb-line: #1f232b; --sb-card: #171a21;
}
body { background: var(--bg); letter-spacing: -.005em; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.02em; }
h1 { letter-spacing: -.035em; }

/* ---------- buttons: pills ---------- */
.btn { border-radius: 999px; font-weight: 500; letter-spacing: -.01em; border: 1px solid var(--line); background: var(--panel); color: var(--ink); box-shadow: none; transition: background .15s, border-color .15s, transform .15s, box-shadow .15s; }
.btn:hover { border-color: color-mix(in srgb, var(--ink) 25%, var(--line)); transform: translateY(-1px); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 8px 18px -10px rgba(4, 84, 255, .8); }
.btn.primary:hover { background: var(--brand-2); border-color: var(--brand-2); }
.btn.primary.big::after, .pw-nav .btn.primary::after { content: none; }
.btn.dark { background: #0a0a0b; border-color: #0a0a0b; color: #fff; }
:root[data-theme="dark"] .btn.dark { background: #fff; border-color: #fff; color: #0a0a0b; }
.icon-btn { border-radius: 999px; }

/* ---------- cards & panels ---------- */
.card, .panel { border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--panel); }
.card:hover { box-shadow: var(--shadow); }
.jr-card:hover, .ex-card:hover, .tile:hover { box-shadow: var(--shadow-hover); }
input, select, textarea { border-radius: 12px; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); outline: none; }

/* ---------- kickers: ✱ SMALL CAPS ---------- */
.pw-kicker, .adm-kicker, .hx-eyebrow { background: none; padding: 0; border-radius: 0; color: var(--brand); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.pw-kicker::before, .adm-kicker::before, .hx-eyebrow::before { content: "✱"; margin-right: 6px; font-size: 12px; }
.tpl-card .adm-kicker { background: none; }

/* ---------- sidebar: white, solid blue active item ---------- */
.sidebar { background: var(--sb-bg); border-right: 1px solid var(--sb-line); box-shadow: none; }
.sb-app-mark { background: var(--brand); box-shadow: 0 8px 18px -10px rgba(4, 84, 255, .9); border-radius: 10px; }
.sb-app-mark svg { fill: #fff; }
.sb-app-name b { color: var(--sb-ink); font-weight: 600; letter-spacing: -.02em; }
.sb-label { color: var(--sb-muted); letter-spacing: .1em; font-weight: 600; }
.sb-nav button { color: var(--sb-ink-2); font-weight: 500; border-radius: 12px; }
.sb-nav button svg { fill: var(--sb-muted); }
.sb-nav button:hover { background: var(--sb-hover); color: var(--sb-ink); }
.sb-nav button:hover svg { fill: var(--sb-ink); }
.sb-nav button.active { background: var(--brand); color: #fff; box-shadow: 0 10px 20px -12px rgba(4, 84, 255, .9); }
.sb-nav button.active svg { fill: #fff; }
.sb-step { background: var(--sb-hover); color: var(--sb-ink-2); border: 1px solid var(--sb-line); }
.sb-nav button.active .sb-step { background: #fff; color: var(--brand); border-color: #fff; }
.sb-foot .theme-switch { background: var(--sb-card); border-color: var(--sb-line); }
.sb-foot .theme-switch button { color: var(--sb-ink-2); }
.sb-foot .theme-switch button.active { background: var(--panel); color: var(--sb-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.sb-foot .user-menu > summary { background: var(--sb-card); border-color: var(--sb-line); }
.sb-foot .who b { color: var(--sb-ink); } .sb-foot .who small { color: var(--sb-muted); }
.sb-foot .avatar { background: var(--brand); color: #fff; }

/* facility switcher: the blue card (like a featured stat card) */
.fs-btn { background: var(--hero); border: 0; color: #fff; box-shadow: 0 14px 28px -16px rgba(4, 84, 255, .95); backdrop-filter: none; }
.fs-btn:hover, .fs.open .fs-btn { background: var(--hero); filter: brightness(1.06); }
.fs-text small { color: rgba(255, 255, 255, .75); }
.fs-text b { color: #fff; }
.fs-text em { color: rgba(255, 255, 255, .82); }
.fs-chev { fill: rgba(255, 255, 255, .8); }
.fs-logo { border-radius: 12px; box-shadow: none; }
.fs-pop { border-radius: 18px; }
.fs-item.on { background: var(--brand-soft); }
.fs-add { background: var(--brand); border-radius: 999px; }
.fs-add.sub { background: none; border-radius: 10px; }

/* ---------- Home: blue hero ---------- */
.hx-head { position: relative; overflow: hidden; padding: 28px 28px 24px; margin-bottom: 18px; border-radius: var(--r-lg); background: var(--hero); color: #fff; align-items: flex-end; }
.hx-head::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: linear-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .10) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(600px 220px at 70% 0%, #000, transparent 75%); -webkit-mask-image: radial-gradient(600px 220px at 70% 0%, #000, transparent 75%); }
.hx-head > * { position: relative; z-index: 1; }
.hx-head h1, #home-hello { color: #fff; font-weight: 500; letter-spacing: -.035em; }
.hx-head .hx-date { color: rgba(255, 255, 255, .8); letter-spacing: .12em; }
.hx-head .hx-date::before { content: "✱ "; }
.hx-head .muted, #home-sub { color: rgba(255, 255, 255, .82); }
.hx-head .btn { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .32); color: #fff; backdrop-filter: blur(6px); }
.hx-head .btn svg { fill: #fff; }
.hx-head .btn:hover { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .6); }
.hx-head #qa-upload { background: #0a0a0b; border-color: #0a0a0b; }
.hx-head #qa-upload::after { content: "↗"; margin-left: 4px; }
.hx-head .new-dot { background: #fff; color: var(--brand); }

/* journey: blue for the step to do now */
.jr-track button { border-radius: 18px; }
.jr-track li.todo.current { --c: var(--brand); --cs: var(--brand-soft); }
.jr-card.current { border-top-color: var(--brand); }
.jr-num, .pw-num { background: var(--brand-soft); color: var(--brand); }
.pw-num { background: var(--brand); color: #fff; }
.pw-steps li.on i { background: var(--brand); }
.pw-steps button, .jr-track button { border-width: 1px; }
.pw-steps li.on button { box-shadow: 0 0 0 4px var(--brand-soft); }

/* featured cards get the soft blue glow */
.ex-card:first-child, .jr-card.current { background: radial-gradient(420px 180px at 100% 0%, var(--brand-soft), transparent 70%), var(--panel); }

/* page headers: plain, large, tight */
.pw-head h1, .page-title h1 { font-size: clamp(26px, 3vw, 34px); font-weight: 600; }

/* tables */
th { font-weight: 600; letter-spacing: .06em; }

/* ---------- sign-in: blue hero behind the card ---------- */
body.auth-page { background: var(--hero) top / 100% 58vh no-repeat, var(--bg); }
.auth-page .auth-brand, .auth-page .auth-brand h1 { color: #fff; }
.auth-page .auth-brand .muted, .auth-page .auth-brand .eyebrow { color: rgba(255, 255, 255, .85); }
.auth-page .auth-brand .eyebrow b { color: #fff; }
.auth-page .auth-mark { background: #fff; }
.auth-page .auth-mark svg { fill: var(--brand); }
.auth-page .auth-steps li { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: #fff; backdrop-filter: blur(6px); }
.auth-page .auth-steps i { background: #fff; color: var(--brand); }
.auth-page .auth-card { border-radius: 24px; border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(10, 10, 11, .35); }
.auth-page .auth-foot { color: var(--muted); }
.auth-page .auth-card { background: var(--panel); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* =====================================================================================================
   Theme v9 – "secure console" look: deep navy, glowing cyan, JetBrains Mono, square hairline frames,
   faint grid, hatch dividers, bracket labels. Dark by default; a matching light version on the switch.
   (Previous look: backups/ui-v8)
   ===================================================================================================== */
:root, :root[data-theme="light"] {
  --bg: #f2f5fb; --panel: #ffffff; --panel-2: #eef3fa; --glass: rgba(255, 255, 255, .9); --glass-line: rgba(2, 7, 26, .08);
  --ink: #02071a; --ink-2: #1d2a44; --muted: #5b6a85; --line: rgba(2, 7, 26, .13); --line-2: rgba(2, 7, 26, .07);
  --brand: #0b8fe0; --brand-2: #0773b8; --brand-ink: #ffffff; --brand-soft: rgba(11, 143, 224, .1);
  --grad: linear-gradient(135deg, #22acfc 0%, #0b5fd6 100%);
  --hero: radial-gradient(520px 260px at 85% 40%, rgba(34, 172, 252, .35), transparent 70%), linear-gradient(180deg, #02071a 0%, #0a1430 100%);
  --ok: #059669; --ok-soft: rgba(5, 150, 105, .1); --warn: #c26a00; --warn-soft: rgba(217, 119, 6, .1); --bad: #d4183f; --bad-soft: rgba(225, 29, 72, .09);
  --info: #0b8fe0; --info-soft: rgba(11, 143, 224, .1);
  --r-lg: 6px; --r: 4px; --r-sm: 3px;
  --shadow: none; --shadow-hover: 0 0 0 1px var(--brand), 0 10px 30px -12px rgba(11, 143, 224, .35); --shadow-lg: 0 30px 70px -24px rgba(2, 7, 26, .4);
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --font: "Mona Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-display: var(--mono);
  --grid-line: rgba(2, 7, 26, .045);
  --sb-bg: #ffffff; --sb-ink: #02071a; --sb-ink-2: #2a3a5c; --sb-muted: #6b7a96; --sb-hover: rgba(11, 143, 224, .07); --sb-line: rgba(2, 7, 26, .1); --sb-card: #f2f5fb;
}
:root[data-theme="dark"] {
  --bg: #02071a; --panel: #0b1226; --panel-2: #0f1730; --glass: rgba(11, 18, 38, .85); --glass-line: rgba(184, 211, 250, .1);
  --ink: #d7e6ff; --ink-2: rgba(192, 218, 255, .86); --muted: rgba(192, 218, 255, .56); --line: rgba(184, 211, 250, .16); --line-2: rgba(255, 255, 255, .06);
  --brand: #22acfc; --brand-2: #48bdff; --brand-ink: #02071a; --brand-soft: rgba(34, 172, 252, .12);
  --grad: linear-gradient(135deg, #22acfc 0%, #0b5fd6 100%);
  --hero: radial-gradient(520px 260px at 85% 40%, rgba(34, 172, 252, .28), transparent 70%), linear-gradient(180deg, #050c24 0%, #02071a 100%);
  --ok: #2fe0a2; --ok-soft: rgba(47, 224, 162, .1); --warn: #ffb547; --warn-soft: rgba(255, 181, 71, .1); --bad: #ff5d7a; --bad-soft: rgba(255, 93, 122, .1);
  --na: #8ea3c4; --na-soft: rgba(142, 163, 196, .1); --missing: #b79bff; --missing-soft: rgba(183, 155, 255, .1); --info: #22acfc; --info-soft: rgba(34, 172, 252, .12);
  --shadow: none; --shadow-hover: 0 0 0 1px var(--brand), 0 0 26px -6px rgba(34, 172, 252, .45); --shadow-lg: 0 30px 80px -20px rgba(0, 0, 0, .85);
  --grid-line: rgba(184, 211, 250, .045);
  --sb-bg: #030920; --sb-ink: #d7e6ff; --sb-ink-2: rgba(192, 218, 255, .8); --sb-muted: rgba(192, 218, 255, .5); --sb-hover: rgba(34, 172, 252, .08); --sb-line: rgba(184, 211, 250, .12); --sb-card: #0b1226;
  color-scheme: dark;
}

/* page: faint blueprint grid */
body { background-color: var(--bg); background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 48px 48px; background-attachment: fixed; letter-spacing: .005em; }

/* type: mono, uppercase headings */
h1, h2, h3, .pw-head h1, .page-title h1 { font-family: var(--mono); font-weight: 500; text-transform: uppercase; letter-spacing: .01em; }
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3 { color: #b8d3fa; }
h1 { letter-spacing: -.005em; }
.pw-head h1, .page-title h1 { font-size: clamp(22px, 2.6vw, 30px); }
h2 { font-size: 15px; letter-spacing: .04em; }
th, .sb-label, .jr-sub, .pw-facts span, .hx-date, .fs-text small, .fs-sep, .sb-app-name small, label, .muted.small { letter-spacing: .04em; }
th { font-family: var(--mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.kpi b, .hx-mini b, .tl-date b, .hx-ring b, #hx-pct { font-family: var(--mono); }

/* bracket labels instead of ✱ kickers */
.pw-kicker, .adm-kicker, .hx-eyebrow { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--brand);
  background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); padding: 3px 9px; border-radius: 2px; position: relative; }
.pw-kicker::before, .adm-kicker::before, .hx-eyebrow::before { content: none; }
.pw-kicker::after, .adm-kicker::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 1px; background: linear-gradient(90deg, var(--brand) 0 3px, transparent 3px calc(100% - 3px), var(--brand) calc(100% - 3px)); }

/* buttons: square, mono, uppercase; cyan glow */
.btn { font-family: var(--mono); font-size: 12.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; border-radius: var(--r-sm); border: 1px solid var(--line); background: transparent; color: var(--ink); }
.btn:hover { border-color: var(--brand); color: var(--brand); transform: none; box-shadow: 0 0 18px -6px rgba(34, 172, 252, .55); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); box-shadow: 0 0 22px -8px rgba(34, 172, 252, .8); }
.btn.primary:hover { background: var(--brand-2); border-color: var(--brand-2); color: var(--brand-ink); }
.btn.big { font-size: 13px; }
.btn.small { font-size: 11px; }
.icon-btn { border-radius: var(--r-sm); font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.link-btn { font-family: var(--mono); letter-spacing: .03em; }

/* cards & panels: hairline frames, square, corner ticks */
.card, .panel, .pw-pane { border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); box-shadow: none; position: relative; }
:root[data-theme="dark"] .card, :root[data-theme="dark"] .panel, :root[data-theme="dark"] .pw-pane { background: linear-gradient(180deg, rgba(212, 232, 255, .025), rgba(212, 232, 255, .005)), var(--panel); }
.jr-card::before, .ex-card::before, .pw-pane::before { content: ""; position: absolute; inset: -1px; pointer-events: none; border-radius: inherit;
  background: linear-gradient(var(--brand), var(--brand)) top left / 14px 1px no-repeat, linear-gradient(var(--brand), var(--brand)) top left / 1px 14px no-repeat,
              linear-gradient(var(--brand), var(--brand)) bottom right / 14px 1px no-repeat, linear-gradient(var(--brand), var(--brand)) bottom right / 1px 14px no-repeat; opacity: .8; }
.jr-card:hover, .ex-card:hover, .tile:hover { box-shadow: var(--shadow-hover); }
.ex-card:first-child, .jr-card.current { background: radial-gradient(380px 160px at 100% 0%, var(--brand-soft), transparent 70%), var(--panel); }
.jr-card.current { border-top-color: var(--brand); }
input, select, textarea { border-radius: var(--r-sm); background: var(--panel-2); border-color: var(--line); color: var(--ink); }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft), 0 0 16px -6px rgba(34, 172, 252, .6); }
.tag, .jr-state, .pend-count, .sb-badge, .pp-badge { border-radius: 2px; font-family: var(--mono); letter-spacing: .04em; }
.alert { border-radius: var(--r); }
.tile, .tl, .hx-mini > div, .facts li, .rm-row, .pend, .pw-create, .pw-download, .np-sort, .pw-more, .entry-doc, .pw-facts { border-radius: var(--r-sm); }
.pw-facts { background: var(--line); }

/* sidebar: console rail */
.sidebar { background: var(--sb-bg); border-right: 1px solid var(--sb-line); }
.sb-app-mark { background: transparent; border: 1px solid var(--brand); border-radius: 2px; box-shadow: 0 0 18px -6px rgba(34, 172, 252, .8); }
.sb-app-mark svg { fill: var(--brand); }
.sb-app-name b { font-family: var(--mono); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 13.5px; }
.sb-app-name small { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.sb-label { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; }
.sb-nav button { font-family: var(--mono); font-size: 12.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; border-radius: 2px; position: relative; }
.sb-nav button.active { background: var(--brand-soft); color: var(--brand); box-shadow: none; }
.sb-nav button.active svg { fill: var(--brand); }
.sb-nav button.active::before { content: ""; display: block; position: absolute; left: -14px; top: 6px; bottom: 6px; width: 3px; border-radius: 0; background: var(--brand); box-shadow: 0 0 12px var(--brand); }
.sb-step { border-radius: 2px; font-family: var(--mono); background: transparent; border: 1px solid var(--sb-line); color: var(--sb-ink-2); }
.sb-nav button.active .sb-step { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.sb-foot .theme-switch, .sb-foot .theme-switch button, .sb-foot .user-menu > summary { border-radius: 2px; }
.sb-foot .theme-switch button { font-family: var(--mono); text-transform: uppercase; font-size: 11px; letter-spacing: .06em; }
.sb-foot .avatar { background: transparent; border: 1px solid var(--brand); color: var(--brand); border-radius: 2px; font-family: var(--mono); }

/* facility switcher: framed panel with a cyan edge */
.fs-btn { background: var(--panel); border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--line)); border-radius: var(--r); color: var(--ink); box-shadow: 0 0 22px -12px rgba(34, 172, 252, .9); }
.fs-btn:hover, .fs.open .fs-btn { background: var(--panel); border-color: var(--brand); filter: none; }
.fs-text small { color: var(--brand); font-family: var(--mono); letter-spacing: .14em; }
.fs-text b { color: var(--ink); font-family: var(--mono); font-weight: 600; text-transform: uppercase; font-size: 12.5px; letter-spacing: .03em; }
.fs-text em { color: var(--muted); font-family: var(--mono); font-size: 10.5px; }
.fs-chev { fill: var(--brand); }
.fs-logo { border-radius: 2px; }
.fs-pop { border-radius: var(--r); border-color: var(--line); background: var(--panel); }
.fs-item { border-radius: 2px; }
.fs-add { border-radius: 2px; background: var(--brand); color: var(--brand-ink); font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.fs-add.sub { color: var(--brand); text-transform: none; letter-spacing: 0; }

/* Home: console hero with glow, circuit grid and hatch base */
.hx-head { border-radius: var(--r); background: var(--hero); border: 1px solid rgba(184, 211, 250, .18); color: #d7e6ff; padding: 30px 30px 34px; }
.hx-head::after { opacity: .6; background-image: linear-gradient(rgba(34, 172, 252, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 172, 252, .09) 1px, transparent 1px); background-size: 32px 32px;
  mask-image: radial-gradient(520px 240px at 85% 40%, #000, transparent 75%); -webkit-mask-image: radial-gradient(520px 240px at 85% 40%, #000, transparent 75%); }
.hx-head::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; z-index: 1; opacity: .5;
  background: repeating-linear-gradient(135deg, rgba(184, 211, 250, .35) 0 1px, transparent 1px 7px); border-top: 1px solid rgba(184, 211, 250, .18); }
.hx-head h1, #home-hello { color: #b8d3fa; font-family: var(--mono); font-weight: 500; text-transform: uppercase; letter-spacing: 0; font-size: clamp(24px, 3.2vw, 40px); }
.hx-head .hx-date { color: #22acfc; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; }
.hx-head .hx-date::before { content: "[ "; } .hx-head .hx-date::after { content: " ]"; }
.hx-head .muted, #home-sub { color: rgba(192, 218, 255, .72); font-family: var(--mono); font-size: 13.5px; }
.hx-head .btn { background: transparent; border-color: rgba(184, 211, 250, .32); color: #d7e6ff; backdrop-filter: none; }
.hx-head .btn svg { fill: currentColor; }
.hx-head .btn:hover { border-color: #22acfc; color: #22acfc; background: rgba(34, 172, 252, .08); }
.hx-head #qa-upload { background: #22acfc; border-color: #22acfc; color: #02071a; box-shadow: 0 0 24px -6px rgba(34, 172, 252, .9); }
.hx-head #qa-upload::after { content: " →"; }
.hx-head .new-dot { background: #22acfc; color: #02071a; border-radius: 2px; }

/* journey + wizard steps: framed, mono */
.jr-track button, .pw-steps button { border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); }
.jr-track b, .pw-steps b { font-family: var(--mono); text-transform: uppercase; font-size: 12.5px; letter-spacing: .05em; font-weight: 600; }
.jr-track small, .pw-steps small { font-family: var(--mono); font-size: 11px; }
.jr-track i, .pw-steps i, .jr-num, .pw-num { border-radius: 2px; font-family: var(--mono); }
.jr-track li.current button, .pw-steps li.on button { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), 0 0 24px -8px rgba(34, 172, 252, .7); }
.pw-steps li.on i, .pw-num { background: var(--brand); color: var(--brand-ink); }
.jr-num { background: transparent; border: 1px solid var(--brand); color: var(--brand); }
.jr-head h2, .pw-title h2 { font-size: 14px; letter-spacing: .06em; }

/* hatch divider between Home blocks */
.jr-lower { position: relative; padding-top: 22px; }
.jr-lower::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; opacity: .5; background: repeating-linear-gradient(135deg, var(--line) 0 1px, transparent 1px 7px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* dialogs */
dialog { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel); }
.toast { border-radius: var(--r); background: #02071a; border: 1px solid rgba(34, 172, 252, .5); font-family: var(--mono); font-size: 13px; }

/* sign-in: console hero */
body.auth-page { background: radial-gradient(520px 300px at 50% 18%, rgba(34, 172, 252, .25), transparent 70%), linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px), #02071a; background-size: auto, 48px 48px, 48px 48px, auto; }
:root[data-theme="light"] body.auth-page { background: radial-gradient(520px 300px at 50% 18%, rgba(34, 172, 252, .3), transparent 70%), linear-gradient(rgba(184, 211, 250, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(184, 211, 250, .06) 1px, transparent 1px), #02071a; background-size: auto, 48px 48px, 48px 48px, auto; }
.auth-page .auth-brand h1 { color: #b8d3fa; font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.auth-page .auth-brand .muted, .auth-page .auth-brand .eyebrow { color: rgba(192, 218, 255, .7); font-family: var(--mono); }
.auth-page .auth-brand .eyebrow b { color: #22acfc; }
.auth-page .auth-mark { background: transparent; border: 1px solid #22acfc; border-radius: 2px; box-shadow: 0 0 24px -6px rgba(34, 172, 252, .9); }
.auth-page .auth-mark svg { fill: #22acfc; }
.auth-page .auth-steps li { background: transparent; border: 1px solid rgba(184, 211, 250, .25); border-radius: 2px; color: #d7e6ff; font-family: var(--mono); text-transform: uppercase; font-size: 11.5px; letter-spacing: .06em; }
.auth-page .auth-steps i { background: #22acfc; color: #02071a; border-radius: 2px; }
.auth-page .auth-card { border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); box-shadow: 0 0 0 1px rgba(34, 172, 252, .15), 0 30px 70px -30px rgba(0, 0, 0, .8); }
.auth-page .auth-card h2 { font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.auth-page .auth-foot { color: rgba(192, 218, 255, .55); font-family: var(--mono); font-size: 11.5px; }
/* v9: square corners everywhere (older rules used pills) */
.btn, .lg-chip, .hx-steps li, .hx-pol-body li, .status-bar > *, .status-bar button, .viewswitch, .viewswitch button, .theme-switch, .theme-switch button,
.vtoggle, .vtoggle button, .tag, .chip, .filter-note, .menu-pop, .menu-pop > a, .menu-pop > button, .hovercard, .np-box, .pp-pic, .ecard, .fac-band, .more-box { border-radius: var(--r-sm) !important; }
.lg-chip, .status-bar button { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; }

/* =====================================================================================================
   Theme v10 – "liquid glass": pearl-silver background with a soft rainbow sheen, frosted translucent cards
   with large rounded corners, light airy type, monochrome slate with charcoal pill actions and an
   iridescent "orb" accent. Light (pearl) by default, dark (slate glass) on the switch. (Previous: ui-v9)
   ===================================================================================================== */
:root, :root[data-theme="light"] {
  --bg: #e8ebf2;
  --panel: rgba(255, 255, 255, .58); --panel-solid: #f7f8fb; --panel-2: rgba(255, 255, 255, .42);
  --glass: rgba(255, 255, 255, .55); --glass-line: rgba(255, 255, 255, .75);
  --ink: #1d2230; --ink-2: #3a4152; --muted: #737a8c; --line: rgba(29, 34, 48, .09); --line-2: rgba(29, 34, 48, .05);
  --brand: #1d2230; --brand-2: #0f121a; --brand-ink: #ffffff; --brand-soft: rgba(29, 34, 48, .06);
  --orb: radial-gradient(circle at 30% 30%, #ffffff 0 8%, #b9c8ff 22%, #7d8cff 45%, #c08cff 68%, #ffb7d5 88%);
  --grad: linear-gradient(135deg, #8f9bff 0%, #b98cff 50%, #ff9fc6 100%);
  --silk: radial-gradient(120% 90% at 85% 10%, rgba(255, 255, 255, .55), transparent 45%), radial-gradient(90% 120% at 20% 110%, rgba(44, 53, 78, .95), transparent 60%),
          radial-gradient(70% 90% at 60% 40%, rgba(148, 160, 190, .9), transparent 70%), linear-gradient(150deg, #c7cedd 0%, #8e99b4 35%, #4a5571 65%, #2a3248 100%);
  --ok: #138a66; --ok-soft: rgba(19, 138, 102, .1); --warn: #b46a07; --warn-soft: rgba(212, 128, 18, .12); --bad: #c62c4f; --bad-soft: rgba(198, 44, 79, .1);
  --info: #4c5bd4; --info-soft: rgba(76, 91, 212, .1);
  --r-lg: 30px; --r: 24px; --r-sm: 14px;
  --shadow: 0 1px 0 rgba(255, 255, 255, .85) inset, 0 18px 40px -26px rgba(38, 46, 70, .45);
  --shadow-hover: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 26px 50px -26px rgba(38, 46, 70, .55);
  --shadow-lg: 0 40px 80px -30px rgba(30, 36, 56, .5);
  --font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --mono: var(--font);
  --blur: blur(22px) saturate(160%);
  --sheen: linear-gradient(115deg, transparent 28%, rgba(255, 210, 180, .35) 36%, rgba(190, 230, 255, .45) 43%, rgba(212, 196, 255, .4) 50%, transparent 60%);
  --page-bg: radial-gradient(1100px 600px at 0% -10%, #fbfcfe, transparent 60%), linear-gradient(180deg, #eef0f5 0%, #dfe3ec 100%);
  --sb-bg: rgba(255, 255, 255, .5); --sb-ink: #1d2230; --sb-ink-2: #3a4152; --sb-muted: #848b9c; --sb-hover: rgba(255, 255, 255, .6); --sb-line: rgba(255, 255, 255, .7); --sb-card: rgba(255, 255, 255, .5);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #1b2030;
  --panel: rgba(255, 255, 255, .07); --panel-solid: #262c3d; --panel-2: rgba(255, 255, 255, .05);
  --glass: rgba(255, 255, 255, .07); --glass-line: rgba(255, 255, 255, .14);
  --ink: #eef1f7; --ink-2: #c8cedb; --muted: #9098ab; --line: rgba(255, 255, 255, .1); --line-2: rgba(255, 255, 255, .06);
  --brand: #eef1f7; --brand-2: #ffffff; --brand-ink: #161a24; --brand-soft: rgba(255, 255, 255, .08);
  --ok: #4fd8a8; --ok-soft: rgba(79, 216, 168, .12); --warn: #f6bf63; --warn-soft: rgba(246, 191, 99, .12); --bad: #ff7f9a; --bad-soft: rgba(255, 127, 154, .12);
  --na: #a2abbf; --na-soft: rgba(162, 171, 191, .12); --missing: #c3a8ff; --missing-soft: rgba(195, 168, 255, .12); --info: #a8b4ff; --info-soft: rgba(168, 180, 255, .12);
  --shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 20px 40px -26px rgba(0, 0, 0, .7);
  --shadow-hover: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 26px 50px -24px rgba(0, 0, 0, .8);
  --sheen: linear-gradient(115deg, transparent 30%, rgba(255, 200, 170, .08) 38%, rgba(170, 215, 255, .1) 45%, rgba(200, 180, 255, .09) 52%, transparent 62%);
  --page-bg: radial-gradient(900px 600px at 85% -10%, rgba(140, 155, 200, .35), transparent 60%), radial-gradient(800px 600px at 0% 110%, rgba(70, 82, 120, .5), transparent 60%), linear-gradient(160deg, #262d40 0%, #1b2030 55%, #141824 100%);
  --sb-bg: rgba(255, 255, 255, .06); --sb-ink: #eef1f7; --sb-ink-2: #c8cedb; --sb-muted: #8890a3; --sb-hover: rgba(255, 255, 255, .08); --sb-line: rgba(255, 255, 255, .1); --sb-card: rgba(255, 255, 255, .06);
  color-scheme: dark;
}

/* page: pearl with a rainbow sheen (no grid) */
body { background: var(--sheen), var(--page-bg); background-attachment: fixed; background-color: var(--bg); background-size: auto; letter-spacing: -.005em; }

/* type: light and airy, no uppercase */
h1, h2, h3, .pw-head h1, .page-title h1, .hx-head h1, #home-hello, .auth-page .auth-brand h1, .auth-page .auth-card h2 { font-family: var(--font-display); text-transform: none; color: var(--ink); }
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3 { color: var(--ink); }
h1, .pw-head h1, .page-title h1 { font-weight: 300; letter-spacing: -.03em; }
h2 { font-weight: 500; font-size: 16px; letter-spacing: -.01em; }
th { font-family: var(--font); font-size: 11.5px; font-weight: 500; text-transform: none; letter-spacing: .01em; color: var(--muted); background: transparent; }
.btn, .icon-btn, .link-btn, .sb-nav button, .sb-label, .sb-app-name b, .sb-app-name small, .fs-text small, .fs-text b, .fs-text em, .fs-add, .jr-track b, .jr-track small, .pw-steps b, .pw-steps small,
.sb-foot .theme-switch button, .lg-chip, .status-bar button, .tag, .jr-state, .pp-badge, .sb-step, .sb-foot .avatar, .toast, .hx-head .hx-date, .hx-head .muted, #home-sub, .auth-page .auth-steps li, .auth-page .auth-foot, .auth-page .auth-brand .muted, .auth-page .auth-brand .eyebrow, .kpi b, .hx-mini b, .tl-date b, .hx-ring b, #hx-pct {
  font-family: var(--font); text-transform: none; letter-spacing: -.005em; }
.pw-kicker, .adm-kicker, .hx-eyebrow { font-family: var(--font); text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; color: var(--muted); background: none; border: 0; padding: 0; }
.pw-kicker::before, .adm-kicker::before, .hx-eyebrow::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; background: var(--orb); vertical-align: 0; box-shadow: 0 0 10px rgba(140, 150, 255, .7); }
.pw-kicker::after, .adm-kicker::after { content: none; }

/* glass surfaces */
.card, .panel, .pw-pane, .jr-track button, .pw-steps button, .fs-pop, dialog, .tile, .hovercard, .menu-pop, .np-sort {
  background: var(--panel); border: 1px solid var(--glass-line); border-radius: var(--r); box-shadow: var(--shadow); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
:root[data-theme="dark"] .card, :root[data-theme="dark"] .panel, :root[data-theme="dark"] .pw-pane { background: var(--panel); }
.jr-card::before, .ex-card::before, .pw-pane::before { content: none; }
.card:hover, .jr-card:hover, .ex-card:hover, .tile:hover { box-shadow: var(--shadow-hover); }
.ex-card:first-child, .jr-card.current { background: var(--panel); }
.jr-card.current { border-top-color: var(--glass-line); outline: 1px solid rgba(160, 150, 255, .35); outline-offset: -1px; }
dialog { background: var(--panel-solid); }
.fs-pop, .menu-pop, .hovercard { background: color-mix(in srgb, var(--panel-solid) 88%, transparent); }
.tile, .tl, .hx-mini > div, .facts li, .rm-row, .pend, .pw-create, .pw-download, .np-sort, .pw-more, .entry-doc, .pw-facts, .lg-chip, .status-bar button, .viewswitch, .viewswitch button,
.theme-switch, .theme-switch button, .vtoggle, .vtoggle button, .chip, .filter-note, .menu-pop > a, .menu-pop > button, .np-box, .pp-pic, .ecard, .fac-band, .more-box, .hx-steps li, .hx-pol-body li { border-radius: var(--r-sm) !important; }
.tl, .hx-mini > div, .facts li, .rm-row, .pend, .pw-facts > div { background: var(--panel-2); border-color: var(--glass-line); }
.pw-facts { background: transparent; gap: 6px; border: 0; }
.pw-facts > div { border: 1px solid var(--glass-line); border-radius: var(--r-sm); }
input, select, textarea { border-radius: var(--r-sm); background: rgba(255, 255, 255, .55); border: 1px solid var(--glass-line); color: var(--ink); }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: rgba(255, 255, 255, .06); }
input:focus, select:focus, textarea:focus { border-color: rgba(140, 150, 255, .7); box-shadow: 0 0 0 4px rgba(140, 150, 255, .18); }

/* buttons: pills; primary = charcoal (white in dark) */
.btn { font-size: 13.5px; font-weight: 500; border-radius: 999px !important; border: 1px solid var(--glass-line); background: var(--panel); color: var(--ink); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset; }
.btn:hover { color: var(--ink); border-color: var(--glass-line); background: color-mix(in srgb, var(--panel-solid) 80%, transparent); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); box-shadow: 0 12px 24px -14px rgba(20, 24, 36, .8); }
.btn.primary:hover { background: var(--brand-2); color: var(--brand-ink); border-color: var(--brand-2); }
.btn.small { font-size: 12.5px; } .btn.big { font-size: 14.5px; }
.icon-btn { border-radius: 999px; font-size: 12.5px; }
.tag, .jr-state, .pp-badge, .sb-badge, .pend-count { border-radius: 999px; }

/* sidebar: a floating glass panel */
@media (min-width: 981px) {
  .sidebar { inset: 12px auto 12px 12px; height: auto; border-radius: var(--r-lg); border: 1px solid var(--sb-line); }
  .page { margin-left: calc(var(--sb-w) + 12px); }
}
.sidebar { background: var(--sb-bg); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow); border-right: 1px solid var(--sb-line); }
.sb-app-mark { background: var(--orb); border: 0; border-radius: 50%; box-shadow: 0 6px 20px -6px rgba(130, 120, 255, .8); }
.sb-app-mark svg { fill: rgba(255, 255, 255, .95); }
.sb-app-name b { font-weight: 600; font-size: 15px; letter-spacing: -.02em; }
.sb-app-name small { font-size: 11px; }
.sb-label { font-size: 11px; font-weight: 500; letter-spacing: .02em; }
.sb-nav button { font-size: 14px; font-weight: 450; border-radius: 999px; }
.sb-nav button::before { content: none !important; }
.sb-nav button.active { background: var(--brand); color: var(--brand-ink); box-shadow: 0 12px 22px -14px rgba(20, 24, 36, .9); }
.sb-nav button.active svg { fill: var(--brand-ink); }
.sb-step { border-radius: 50%; background: var(--sb-hover); border: 1px solid var(--sb-line); color: var(--sb-ink-2); }
.sb-nav button.active .sb-step { background: var(--brand-ink); color: var(--brand); border-color: transparent; }
.sb-foot .theme-switch button, .sb-foot .user-menu > summary { border-radius: 999px; }
.sb-foot .theme-switch { border-radius: 999px; }
.sb-foot .avatar { background: var(--orb); border: 0; color: #fff; border-radius: 50%; }

/* facility switcher: glass with an orb */
.fs-btn { background: var(--sb-card); border: 1px solid var(--sb-line); border-radius: var(--r); color: var(--ink); box-shadow: var(--shadow); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.fs-btn:hover, .fs.open .fs-btn { background: var(--sb-hover); border-color: var(--sb-line); }
.fs-text small { color: var(--muted); letter-spacing: .02em; }
.fs-text b { color: var(--ink); font-weight: 600; font-size: 14px; }
.fs-text em { color: var(--muted); font-size: 11.5px; }
.fs-chev { fill: var(--muted); }
.fs-logo { border-radius: 14px; }
.fs-item { border-radius: var(--r-sm); }
.fs-add { border-radius: 999px; background: var(--brand); color: var(--brand-ink); font-size: 13px; }
.fs-add.sub { background: none; color: var(--ink-2); }

/* Home: the dark silky "wallpaper" card with light type */
.hx-head { border-radius: var(--r-lg); background: var(--silk); border: 1px solid rgba(255, 255, 255, .35); color: #fff; padding: 34px 32px 28px; box-shadow: var(--shadow-lg); }
.hx-head::after { content: ""; opacity: 1; background: var(--sheen); mask-image: none; -webkit-mask-image: none; background-size: auto; }
.hx-head::before { content: none; }
.hx-head h1, #home-hello { color: #fff; font-weight: 300; font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -.035em; text-transform: none; }
.hx-head .hx-date { color: rgba(255, 255, 255, .78); font-size: 13px; letter-spacing: 0; }
.hx-head .hx-date::before, .hx-head .hx-date::after { content: none; }
.hx-head .muted, #home-sub { color: rgba(255, 255, 255, .78); font-size: 14.5px; }
.hx-head .btn { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); color: #fff; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: none; }
.hx-head .btn:hover { background: rgba(255, 255, 255, .28); color: #fff; }
.hx-head .btn svg { fill: currentColor; }
.hx-head #qa-upload { background: #fff; border-color: #fff; color: #1d2230; box-shadow: 0 14px 28px -16px rgba(0, 0, 0, .7); }
.hx-head #qa-upload::after { content: " →"; }
.hx-head .new-dot { background: #fff; color: #1d2230; border-radius: 999px; }

/* journey + wizard steps: glass suggestion rows with a chevron */
.jr-track button, .pw-steps button { border-radius: var(--r) !important; position: relative; padding-right: 34px; }
.jr-track button::after, .pw-steps button::after { content: "›"; position: absolute; right: 16px; top: 50%; transform: translateY(-52%); font-size: 20px; color: var(--muted); }
.jr-track li::after { display: none; }
.jr-track b, .pw-steps b { font-weight: 500; font-size: 14px; }
.jr-track small, .pw-steps small { font-size: 12px; }
.jr-track i, .pw-steps i, .jr-num, .pw-num { border-radius: 50%; }
.jr-track li.current button, .pw-steps li.on button { border-color: rgba(160, 150, 255, .55); box-shadow: 0 0 0 4px rgba(150, 150, 255, .14), var(--shadow); }
.jr-track li.todo.current, .pw-steps li.on { --c: #6c6cf0; --cs: rgba(120, 120, 255, .14); }
.pw-steps li.on i, .pw-num { background: var(--orb); color: #fff; border: 0; }
.jr-num { background: var(--brand-soft); border: 0; color: var(--ink); }
.jr-head h2, .pw-title h2 { font-size: 16px; letter-spacing: -.01em; font-weight: 500; }
.jr-lower::before { content: none; }
.jr-lower { padding-top: 0; }

/* chips & toast */
.toast { border-radius: 999px; background: rgba(29, 34, 48, .88); border: 1px solid rgba(255, 255, 255, .15); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-size: 13.5px; }

/* sign-in: pearl with a silky card header */
body.auth-page, :root[data-theme="light"] body.auth-page { background: var(--sheen), var(--page-bg); background-attachment: fixed; }
:root[data-theme="dark"] body.auth-page { background: var(--sheen), var(--page-bg); }
.auth-page .auth-brand h1 { color: var(--ink); font-weight: 300; letter-spacing: -.03em; }
.auth-page .auth-brand .muted, .auth-page .auth-brand .eyebrow { color: var(--muted); }
.auth-page .auth-brand .eyebrow b { color: var(--ink); }
.auth-page .auth-mark { background: var(--orb); border: 0; border-radius: 50%; box-shadow: 0 10px 30px -8px rgba(130, 120, 255, .8); }
.auth-page .auth-mark svg { fill: #fff; }
.auth-page .auth-steps li { background: var(--panel); border: 1px solid var(--glass-line); border-radius: 999px; color: var(--ink-2); font-size: 13px; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.auth-page .auth-steps i { background: var(--brand); color: var(--brand-ink); border-radius: 50%; }
.auth-page .auth-card { border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--glass-line); box-shadow: var(--shadow-lg); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.auth-page .auth-card h2 { font-weight: 400; letter-spacing: -.02em; }
.auth-page .auth-foot { color: var(--muted); font-size: 12px; }

/* =====================================================================================================
   Theme v11 – clean SaaS dashboard: white cards on light grey, one bright blue (#0067ff), Inter, outline icons,
   round icon badges, blue active menu item with an indicator bar, and a start-to-finish process guide on every
   work page. Light by default, dark on the switch. (Previous look: backups/ui-v10)
   ===================================================================================================== */
:root, :root[data-theme="light"] {
  --bg: #f6f7f9; --panel: #ffffff; --panel-solid: #ffffff; --panel-2: #f8f9fb; --glass: #ffffff; --glass-line: #e9edf3;
  --ink: #0f172a; --ink-2: #334155; --muted: #64748b; --line: #e9edf3; --line-2: #f1f4f8;
  --brand: #0067ff; --brand-2: #0052cc; --brand-ink: #ffffff; --brand-soft: #eaf2ff;
  --grad: linear-gradient(135deg, #0067ff 0%, #3d8bff 100%);
  --ok: #16a34a; --ok-soft: #eaf8ef; --warn: #d97706; --warn-soft: #fff6e6; --bad: #e5484d; --bad-soft: #fdeeee;
  --info: #0067ff; --info-soft: #eaf2ff; --na: #64748b; --na-soft: #f1f5f9; --missing: #7c3aed; --missing-soft: #f3edff;
  --r-lg: 18px; --r: 14px; --r-sm: 10px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .04); --shadow-hover: 0 8px 24px -12px rgba(15, 23, 42, .18); --shadow-lg: 0 24px 60px -20px rgba(15, 23, 42, .25);
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --font-display: var(--font); --mono: var(--font);
  --blur: none; --sheen: none; --page-bg: none;
  --sb-bg: #ffffff; --sb-ink: #0f172a; --sb-ink-2: #475569; --sb-muted: #94a3b8; --sb-hover: #f4f7fb; --sb-line: #e9edf3; --sb-card: #f8f9fb;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0b1120; --panel: #111827; --panel-solid: #111827; --panel-2: #0f172a; --glass: #111827; --glass-line: #1f2937;
  --ink: #f1f5f9; --ink-2: #cbd5e1; --muted: #94a3b8; --line: #1f2937; --line-2: #172033;
  --brand: #3b82f6; --brand-2: #60a5fa; --brand-ink: #ffffff; --brand-soft: rgba(59, 130, 246, .14);
  --ok: #4ade80; --ok-soft: rgba(74, 222, 128, .12); --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, .12); --bad: #f87171; --bad-soft: rgba(248, 113, 113, .12);
  --info: #60a5fa; --info-soft: rgba(96, 165, 250, .12);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4); --shadow-hover: 0 10px 28px -12px rgba(0, 0, 0, .7);
  --sb-bg: #0f1626; --sb-ink: #f1f5f9; --sb-ink-2: #cbd5e1; --sb-muted: #64748b; --sb-hover: #172033; --sb-line: #1f2937; --sb-card: #111827;
  color-scheme: dark;
}
body { background: var(--bg); background-image: none; letter-spacing: 0; }

/* undo the earlier glass / mono / uppercase looks */
.card, .panel, .pw-pane, .jr-track button, .pw-steps button, .fs-pop, dialog, .tile, .hovercard, .menu-pop, .np-sort, .btn, .sidebar, .fs-btn, .toast, .auth-page .auth-card, .auth-page .auth-steps li, .hx-head .btn {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
h1, h2, h3, .pw-head h1, .page-title h1 { font-family: var(--font); text-transform: none; color: var(--ink); }
h1, .pw-head h1, .page-title h1 { font-weight: 600; letter-spacing: -.025em; }
h2 { font-weight: 600; font-size: 16px; letter-spacing: -.01em; }
.pw-kicker, .adm-kicker, .hx-eyebrow { color: var(--brand); font-weight: 600; font-size: 12px; background: var(--brand-soft); border: 0; padding: 3px 10px; border-radius: 999px; }
.pw-kicker::before, .adm-kicker::before, .hx-eyebrow::before { content: none; }

/* cards: flat white, thin border */
.card, .panel, .pw-pane, .tile, dialog, .fs-pop, .menu-pop, .hovercard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.card:hover, .jr-card:hover, .ex-card:hover, .tile:hover { box-shadow: var(--shadow-hover); }
.jr-card.current { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.ex-card:first-child, .jr-card.current { background: var(--panel); }
.tl, .hx-mini > div, .facts li, .rm-row, .pend, .pw-facts > div { background: var(--panel-2); border-color: var(--line); }
input, select, textarea { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
th { color: var(--muted); font-weight: 500; }

/* buttons: rounded rectangles, blue primary */
.btn { border-radius: 10px !important; font-weight: 500; font-size: 13.5px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); box-shadow: none; }
.btn:hover { background: var(--panel-2); border-color: color-mix(in srgb, var(--ink) 18%, var(--line)); color: var(--ink); transform: none; box-shadow: none; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 6px 14px -8px rgba(0, 103, 255, .8); }
.btn.primary:hover { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }
.icon-btn { border-radius: 8px; }

/* sidebar: white, outline icons, blue active item + indicator bar */
@media (min-width: 981px) { .sidebar { inset: 0 auto 0 0; border-radius: 0; border: 0; border-right: 1px solid var(--sb-line); } .page { margin-left: var(--sb-w); } }
.sidebar { background: var(--sb-bg); box-shadow: none; }
.sb-app-mark { background: var(--brand); border-radius: 10px; box-shadow: none; }
.sb-app-mark svg { fill: #fff; }
.sb-app-name b { font-weight: 700; font-size: 16px; letter-spacing: -.02em; color: var(--sb-ink); }
.sb-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sb-muted); }
.sb-nav button { font-size: 14px; font-weight: 500; border-radius: 10px; color: var(--sb-ink-2); position: relative; }
.sb-nav button svg.ico { fill: none !important; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; width: 19px; height: 19px; }
.sb-nav button:hover { background: var(--sb-hover); color: var(--sb-ink); }
.sb-nav button.active { background: var(--brand-soft); color: var(--brand); box-shadow: none; }
.sb-nav button.active svg.ico { stroke: var(--brand); }
.sb-nav button.active::before { content: "" !important; display: block; position: absolute; left: auto; right: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px 0 0 3px; background: var(--brand); box-shadow: none; }
.sb-step { order: 9; margin-left: auto; width: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--sb-hover); border: 1px solid var(--sb-line); color: var(--sb-muted); }
.sb-nav button.active .sb-step { background: var(--brand); color: #fff; border-color: var(--brand); }
.sb-foot .theme-switch, .sb-foot .theme-switch button, .sb-foot .user-menu > summary { border-radius: 10px; }
.sb-foot .avatar { background: var(--brand); border-radius: 50%; color: #fff; }

/* facility switcher: plain card */
.fs-btn { background: var(--sb-card); border: 1px solid var(--sb-line); border-radius: 12px; color: var(--sb-ink); box-shadow: none; }
.fs-btn:hover, .fs.open .fs-btn { background: var(--sb-hover); border-color: var(--sb-line); }
.fs-text small { color: var(--sb-muted); } .fs-text b { color: var(--sb-ink); font-weight: 600; } .fs-text em { color: var(--sb-muted); }
.fs-chev { fill: var(--sb-muted); }
.fs-add { background: var(--brand); border-radius: 10px; color: #fff; }

/* Home header: "Welcome back" on the page, KPI-style actions */
.hx-head { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink); padding: 22px 24px; box-shadow: var(--shadow); }
.hx-head::before, .hx-head::after { content: none !important; }
.hx-head h1, #home-hello { color: var(--ink); font-weight: 600; font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -.025em; }
.hx-head .hx-date { color: var(--muted); font-size: 12.5px; letter-spacing: 0; text-transform: none; }
.hx-head .muted, #home-sub { color: var(--muted); font-size: 14px; }
.hx-head .btn { background: var(--panel); border: 1px solid var(--line); color: var(--ink); }
.hx-head .btn:hover { background: var(--panel-2); color: var(--ink); }
.hx-head #qa-upload { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 6px 14px -8px rgba(0, 103, 255, .8); }
.hx-head #qa-upload::after { content: " →"; }
.hx-head .new-dot { background: var(--brand); color: #fff; border-radius: 999px; }

/* figures: round icon badges like KPI tiles */
.hx-mini > div { position: relative; }
.jr-num { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); border: 0; }
.pw-num { border-radius: 50%; background: var(--brand); color: #fff; }

/* the old journey strip on Home is replaced by the process guide */
#jr-track { display: none !important; }
.jr-track button::after, .pw-steps button::after { content: none; }
.pw-steps button { border-radius: 12px !important; padding-right: 12px; }
.pw-steps li.on button { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.pw-steps li.on i { background: var(--brand); color: #fff; }

/* ---------------- process guide: Start → 1 → 2 → 3 → Finished ---------------- */
.flow { margin: 0 0 18px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.flow-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: .8fr 1.2fr 1.2fr 1.2fr .9fr; gap: 0; position: relative; }
.flow-steps > li { --c: #94a3b8; --cs: var(--panel-2); position: relative; min-width: 0; display: flex; }
.flow-steps > li > button, .flow-steps > li > .fl-dot { flex: none; }
.flow-steps > li > button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px 8px 0; cursor: pointer; border-radius: 12px; min-width: 0; }
.flow-steps > li:not(:has(button)) { align-items: center; gap: 10px; padding: 8px 10px 8px 0; }
.flow-steps > li > button:hover .fl-txt b { color: var(--brand); }
/* connector line to the next step */
.flow-steps > li:not(:last-child)::after { content: ""; position: absolute; left: 44px; right: 8px; top: 50%; height: 2px; margin-top: -1px; background: var(--line); z-index: 0; display: none; }
.fl-dot { position: relative; z-index: 1; flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: var(--c); background: var(--cs); border: 2px solid var(--c); }
.fl-dot svg { width: 15px; height: 15px; fill: currentColor; }
.fl-txt { display: grid; min-width: 0; line-height: 1.25; }
.fl-txt b { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-txt small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-steps > li.done { --c: var(--ok); --cs: var(--ok-soft); }
.flow-steps > li.done .fl-dot { background: var(--ok); color: #fff; }
.flow-steps > li.warn { --c: var(--warn); --cs: var(--warn-soft); }
.flow-steps > li.bad { --c: var(--bad); --cs: var(--bad-soft); }
/* the step to do now: blue, big ring, pulsing */
.flow-steps > li.now:not(.done) { --c: var(--brand); --cs: var(--brand-soft); }
.flow-steps > li.now:not(.done) .fl-dot { background: var(--brand); color: #fff; box-shadow: 0 0 0 5px var(--brand-soft); animation: flowPulse 2s ease-in-out infinite; }
.flow-steps > li.now:not(.done) .fl-txt small { color: var(--brand); font-weight: 600; }
@keyframes flowPulse { 0%, 100% { box-shadow: 0 0 0 4px var(--brand-soft); } 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--brand) 10%, transparent); } }
@media (prefers-reduced-motion: reduce) { .flow-steps > li.now .fl-dot { animation: none; } }
/* the page you are on */
.flow-steps > li.here > button { background: var(--panel-2); box-shadow: inset 0 -3px 0 var(--brand); }
.flow-steps > li.here .fl-txt b::after { content: "You are here"; margin-left: 8px; font-size: 10.5px; font-weight: 600; color: var(--brand); background: var(--brand-soft); padding: 2px 7px; border-radius: 999px; vertical-align: 1px; }
/* arrows between steps */
.flow-steps > li:not(:last-child) { padding-right: 18px; }
.flow-steps > li:not(:last-child)::before { content: ""; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-top: 2px solid var(--line); border-right: 2px solid var(--line); transform: rotate(45deg); }
.flow-steps > li.done:not(:last-child)::before { border-color: var(--ok); }
/* next step box */
.flow-next { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); }
.flow-next.done { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.fn-badge { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--brand); padding: 4px 10px; border-radius: 999px; }
.flow-next.done .fn-badge { background: var(--ok); }
.fn-body { flex: 1; min-width: 220px; display: grid; gap: 2px; }
.fn-body b { font-size: 15px; color: var(--ink); }
.fn-body small { font-size: 12.5px; color: var(--ink-2); }
@media (max-width: 1100px) {
  .flow-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .fl-txt small { display: none; }
  .flow-steps > li.here .fl-txt b::after { content: none; }
}
@media (max-width: 760px) {
  .flow { padding: 12px; }
  .flow-steps { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .flow-steps > li { padding-right: 0 !important; }
  .flow-steps > li::before { display: none; }
  .fl-txt small { display: block; }
}

/* toast, chips */
.toast { background: #0f172a; border: 0; border-radius: 12px; }
.tag, .jr-state, .pp-badge, .sb-badge { border-radius: 999px; }

/* sign-in: clean, blue accent */
body.auth-page, :root[data-theme="light"] body.auth-page, :root[data-theme="dark"] body.auth-page { background: radial-gradient(900px 420px at 50% -10%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%), var(--bg); }
.auth-page .auth-brand h1 { color: var(--ink); font-weight: 700; letter-spacing: -.025em; }
.auth-page .auth-brand .muted, .auth-page .auth-brand .eyebrow { color: var(--muted); }
.auth-page .auth-brand .eyebrow b { color: var(--brand); }
.auth-page .auth-mark { background: var(--brand); border-radius: 14px; border: 0; box-shadow: 0 10px 24px -12px rgba(0, 103, 255, .9); }
.auth-page .auth-mark svg { fill: #fff; }
.auth-page .auth-steps li { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); }
.auth-page .auth-steps i { background: var(--brand); color: #fff; border-radius: 50%; }
.auth-page .auth-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.auth-page .auth-card h2 { font-weight: 600; }
/* "You are here": a small tag above the step, not inside its name */
.flow { padding-top: 22px; }
.flow-steps > li.here .fl-txt b::after { content: none !important; }
.flow-steps > li > button { position: relative; }
.flow-steps > li.here > button::before { content: "You are here"; position: absolute; top: -16px; left: 0; font-size: 10.5px; font-weight: 600; line-height: 1; color: #fff; background: var(--brand); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
@media (max-width: 760px) { .flow { padding-top: 12px; } .flow-steps > li.here > button::before { position: static; margin-right: 6px; order: 9; } }

/* =====================================================================================================
   Theme v12 – editorial: white pages, black type, bold colour blocks (red, yellow, orange, black, grey),
   Poppins headlines + Open Sans text, small UPPERCASE category labels, square corners, no shadows.
   Plus the AI assistant chat. (Previous look: backups/ui-v11)
   ===================================================================================================== */
:root, :root[data-theme="light"] {
  --bg: #ffffff; --panel: #ffffff; --panel-solid: #ffffff; --panel-2: #f4f4f4; --glass: #ffffff; --glass-line: #e6e6e6;
  --ink: #0a0a0a; --ink-2: #2b2b2b; --muted: #6b6b6b; --line: #e6e6e6; --line-2: #f0f0f0;
  --brand: #0a0a0a; --brand-2: #cd0000; --brand-ink: #ffffff; --brand-soft: #f4f4f4;
  --red: #cd0000; --yellow: #ffd900; --orange: #f46036; --grey: #ececec; --black: #0a0a0a;
  --ok: #128a4a; --ok-soft: #e9f6ee; --warn: #c26100; --warn-soft: #fff4e0; --bad: #cd0000; --bad-soft: #fdeaea;
  --info: #0a0a0a; --info-soft: #f4f4f4; --na: #6b6b6b; --na-soft: #f4f4f4; --missing: #6b3fd1; --missing-soft: #f1ecfc;
  --r-lg: 2px; --r: 2px; --r-sm: 2px;
  --shadow: none; --shadow-hover: 0 0 0 1px var(--ink); --shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, .35);
  --font: "Open Sans", "Segoe UI", system-ui, sans-serif; --font-display: "Poppins", "Segoe UI", system-ui, sans-serif; --mono: var(--font);
  --sb-bg: #ffffff; --sb-ink: #0a0a0a; --sb-ink-2: #2b2b2b; --sb-muted: #8a8a8a; --sb-hover: #f4f4f4; --sb-line: #e6e6e6; --sb-card: #ececec;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0b0b0b; --panel: #141414; --panel-solid: #141414; --panel-2: #1c1c1c; --glass: #141414; --glass-line: #2a2a2a;
  --ink: #f5f5f5; --ink-2: #d4d4d4; --muted: #9a9a9a; --line: #2a2a2a; --line-2: #1f1f1f;
  --brand: #f5f5f5; --brand-2: #ff3b30; --brand-ink: #0b0b0b; --brand-soft: #1c1c1c;
  --red: #e0201a; --grey: #1c1c1c; --black: #000000;
  --ok: #3ccf7f; --ok-soft: rgba(60, 207, 127, .12); --warn: #ffb547; --warn-soft: rgba(255, 181, 71, .12); --bad: #ff5a52; --bad-soft: rgba(255, 90, 82, .12);
  --info: #f5f5f5; --info-soft: #1c1c1c;
  --sb-bg: #0b0b0b; --sb-ink: #f5f5f5; --sb-ink-2: #d4d4d4; --sb-muted: #7a7a7a; --sb-hover: #1c1c1c; --sb-line: #2a2a2a; --sb-card: #1c1c1c;
  color-scheme: dark;
}
body { background: var(--bg); font-size: 14.5px; }
h1, h2, h3, .pw-head h1, .page-title h1, .hx-head h1, #home-hello { font-family: var(--font-display); font-weight: 500; letter-spacing: -.02em; color: var(--ink); text-transform: none; }
h1, .pw-head h1, .page-title h1 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; }
h2 { font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
/* small category labels (like "SPACE", "URBANISM") */
.pw-kicker, .adm-kicker, .hx-eyebrow, .sb-label, .fs-text small, .jr-sub, th, .fn-badge, .reg-doc-k {
  font-family: var(--font-display) !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .1em !important; text-transform: uppercase !important; }
.pw-kicker, .adm-kicker, .hx-eyebrow { background: none !important; border: 0 !important; padding: 0 !important; color: var(--ink) !important; border-radius: 0 !important; }
.pw-kicker::before, .adm-kicker::before, .hx-eyebrow::before { content: "" !important; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--red); vertical-align: 0; border-radius: 0; box-shadow: none; }
.link-btn { font-family: var(--font-display); font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 1px solid currentColor; }

/* square, flat surfaces */
.card, .panel, .pw-pane, .tile, dialog, .fs-pop, .menu-pop, .hovercard, .jr-track button, .pw-steps button, .np-sort, .flow {
  border-radius: 2px !important; box-shadow: none !important; border: 1px solid var(--line); background: var(--panel); -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.card:hover, .jr-card:hover, .ex-card:hover, .tile:hover { box-shadow: 0 0 0 1px var(--ink) !important; }
.tl, .hx-mini > div, .facts li, .rm-row, .pend, .pw-facts > div, .pw-create, .pw-download, .pw-more, .lg-chip, .status-bar button, .viewswitch, .viewswitch button, .theme-switch, .theme-switch button, .vtoggle, .vtoggle button, .chip, .menu-pop > a, .menu-pop > button, .np-box, .pp-pic, .ecard, .fac-band, .more-box, .hx-steps li, .hx-pol-body li, .tag, .jr-state, .pp-badge, .sb-badge, .pend-count, input, select, textarea { border-radius: 2px !important; }
.tl, .hx-mini > div, .facts li, .rm-row, .pend, .pw-facts > div { background: var(--panel-2); border-color: var(--line); }
input, select, textarea { background: var(--panel); border: 1px solid var(--line); }
input:focus, select:focus, textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 2px var(--grey); }

/* buttons: black blocks, red on hover */
.btn { border-radius: 0 !important; font-family: var(--font-display); font-weight: 500; font-size: 13px; letter-spacing: .01em; background: var(--panel); border: 1px solid var(--ink); color: var(--ink); box-shadow: none !important; }
.btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); transform: none; }
.btn.primary { background: var(--black); border-color: var(--black); color: #fff; }
:root[data-theme="dark"] .btn.primary { background: #f5f5f5; border-color: #f5f5f5; color: #0b0b0b; }
.btn.primary:hover { background: var(--red); border-color: var(--red); color: #fff; }
.icon-btn { border-radius: 0; font-family: var(--font-display); }

/* sidebar: editorial masthead */
@media (min-width: 981px) { .sidebar { inset: 0 auto 0 0; border-radius: 0; border: 0; border-right: 1px solid var(--sb-line); } .page { margin-left: var(--sb-w); } }
.sidebar { background: var(--sb-bg); box-shadow: none; }
.sb-app-mark { background: var(--red); border-radius: 0; box-shadow: none; }
.sb-app-mark svg { fill: #fff; }
.sb-app-name b { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 15px; color: var(--sb-ink); }
.sb-app-name small { font-family: var(--font-display); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.sb-nav button { font-family: var(--font-display); font-size: 14px; font-weight: 500; border-radius: 0; color: var(--sb-ink-2); }
.sb-nav button svg.ico { stroke: currentColor; fill: none !important; }
.sb-nav button:hover { background: var(--sb-hover); color: var(--sb-ink); }
.sb-nav button.active { background: var(--black); color: #fff; }
:root[data-theme="dark"] .sb-nav button.active { background: #f5f5f5; color: #0b0b0b; }
.sb-nav button.active svg.ico { stroke: currentColor; }
.sb-nav button.active::before { content: "" !important; display: block; position: absolute; left: 0; right: auto; top: 0; bottom: 0; width: 4px; border-radius: 0; background: var(--red); }
.sb-step { border-radius: 0; background: transparent; border: 1px solid var(--sb-line); color: var(--sb-muted); font-family: var(--font-display); }
.sb-nav button.active .sb-step { background: var(--red); border-color: var(--red); color: #fff; }
.sb-foot .theme-switch, .sb-foot .theme-switch button, .sb-foot .user-menu > summary { border-radius: 0; }
.sb-foot .avatar { background: var(--red); border-radius: 0; color: #fff; }
.fs-btn { background: var(--sb-card); border: 0; border-radius: 0; color: var(--sb-ink); box-shadow: none; }
.fs-btn:hover, .fs.open .fs-btn { background: var(--sb-hover); }
.fs-text b { font-family: var(--font-display); font-weight: 600; color: var(--sb-ink); } .fs-text small { color: var(--red) !important; } .fs-text em { color: var(--sb-muted); }
.fs-logo { border-radius: 0; }
.fs-add { background: var(--black); border-radius: 0; color: #fff; font-family: var(--font-display); }

/* Home: split editorial header – grey text block + black action block */
.hx-head { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0; padding: 0; border: 0; border-radius: 0; background: var(--grey); overflow: hidden; color: var(--ink); }
.hx-head::before, .hx-head::after { content: none !important; }
.hx-hello { padding: 34px 32px 30px; }
.hx-head .hx-date { font-family: var(--font-display); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.hx-head .hx-date::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--red); }
.hx-head h1, #home-hello { font-size: clamp(30px, 3.6vw, 46px); font-weight: 500; color: var(--ink); margin: 10px 0 10px; }
.hx-head .muted, #home-sub { color: var(--ink-2); font-size: 14.5px; max-width: 560px; }
.hx-actions { background: var(--black); padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; align-content: end; }
.hx-actions .btn { width: 100%; justify-content: flex-start; background: transparent; border: 1px solid rgba(255, 255, 255, .35); color: #fff; }
.hx-actions .btn svg { fill: currentColor; }
.hx-actions .btn:hover { background: #fff; color: #000; }
.hx-head #qa-upload { background: var(--red); border-color: var(--red); color: #fff; }
.hx-head #qa-upload:hover { background: #fff; color: var(--red); border-color: #fff; }
.hx-head #qa-upload::after { content: " →"; margin-left: auto; }
.hx-head .new-dot { background: var(--yellow); color: #000; border-radius: 0; }
@media (max-width: 860px) { .hx-head { grid-template-columns: minmax(0, 1fr); } }

/* the three step cards: colour blocks on top (red, yellow, orange) */
.jr-card { border-top: 6px solid var(--red) !important; }
#jr-c2 { border-top-color: var(--yellow) !important; }
#jr-c3 { border-top-color: var(--orange) !important; }
.jr-card.current { outline: none; box-shadow: 0 0 0 1px var(--ink) !important; background: var(--panel); }
.jr-num { border-radius: 0; background: var(--black); color: #fff; width: 32px; height: 32px; }
#jr-c1 .jr-num { background: var(--red); } #jr-c2 .jr-num { background: var(--yellow); color: #000; } #jr-c3 .jr-num { background: var(--orange); }
.pw-num { border-radius: 0; background: var(--red); color: #fff; }
.pw-steps li.on button { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) !important; }
.pw-steps li.on i { background: var(--red); color: #fff; border-radius: 0; }
.pw-steps i { border-radius: 0 !important; }

/* process guide: numbered editorial steps; the step to do now in red; next step = red block */
.flow { padding: 20px 22px 18px !important; }
.fl-dot { border-radius: 0 !important; font-family: var(--font-display); }
.fl-txt b { font-family: var(--font-display); font-weight: 500; }
.flow-steps > li.done { --c: var(--ink); --cs: var(--panel-2); }
.flow-steps > li.done .fl-dot { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.flow-steps > li.now:not(.done) { --c: var(--red); --cs: var(--bad-soft); }
.flow-steps > li.now:not(.done) .fl-dot { background: var(--red); border-color: var(--red); color: #fff; animation: none; box-shadow: 0 0 0 4px var(--bad-soft); }
.flow-steps > li.now:not(.done) .fl-txt small { color: var(--red); }
.flow-steps > li.here > button { background: var(--panel-2); box-shadow: inset 0 -3px 0 var(--ink); border-radius: 0; }
.flow-steps > li.here > button::before { background: var(--ink); color: var(--bg); border-radius: 0; font-family: var(--font-display); letter-spacing: .06em; text-transform: uppercase; font-size: 9.5px; }
.flow-steps > li.done:not(:last-child)::before { border-color: var(--ink); }
.flow-next { background: var(--red); border: 0; border-radius: 0; color: #fff; padding: 18px 20px; }
.flow-next .fn-body b { color: #fff; font-family: var(--font-display); font-weight: 500; font-size: 19px; letter-spacing: -.01em; }
.flow-next .fn-body small { color: rgba(255, 255, 255, .88); }
.fn-badge { background: #fff; color: var(--red); border-radius: 0; }
.flow-next .btn.primary { background: #fff; border-color: #fff; color: #000; }
.flow-next .btn.primary:hover { background: #000; border-color: #000; color: #fff; }
.flow-next.done { background: var(--black); }
.flow-next.done .fn-badge { color: #000; background: var(--yellow); }

/* toast */
.toast { border-radius: 0; background: #0a0a0a; font-family: var(--font-display); }

/* ---------------- AI assistant chat ---------------- */
.ai-fab { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border: 0; cursor: pointer;
  background: var(--black); color: #fff; font: 600 14px var(--font-display); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .55); transition: transform .15s, background .15s; }
.ai-fab:hover { transform: translateY(-2px); background: var(--red); }
.ai-fab-ic { width: 36px; height: 36px; display: grid; place-items: center; background: var(--red); }
.ai-fab:hover .ai-fab-ic { background: #000; }
.ai-fab-ic svg { width: 22px; height: 22px; fill: #fff; }
.ai-fab-ic svg circle { fill: var(--red); }
.ai-fab:hover .ai-fab-ic svg circle { fill: #000; }
.ai-fab.open { display: none; }
.ai-panel { position: fixed; right: 22px; bottom: 22px; z-index: 61; width: min(400px, calc(100vw - 24px)); height: min(620px, calc(100vh - 44px)); display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--ink); box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .45); }
.ai-panel[hidden] { display: none; }
.ai-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; background: var(--black); color: #fff; }
.ai-head > div { flex: 1; display: grid; line-height: 1.25; min-width: 0; }
.ai-head b { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.ai-head small { font-size: 11.5px; color: rgba(255, 255, 255, .72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-panel.offline .ai-head small::before { content: "●"; color: var(--yellow); margin-right: 5px; }
.ai-panel:not(.offline) .ai-head small::before { content: "●"; color: #3ccf7f; margin-right: 5px; }
.ai-avatar { flex: none; width: 34px; height: 34px; display: grid; place-items: center; background: var(--red); color: #fff; font: 700 12.5px var(--font-display); letter-spacing: .04em; }
.ai-avatar.sm { width: 26px; height: 26px; font-size: 10px; }
.ai-x { flex: none; width: 32px; height: 32px; border: 0; background: transparent; color: #fff; cursor: pointer; font-size: 15px; }
.ai-x:hover { background: rgba(255, 255, 255, .14); }
.ai-log { flex: 1; overflow-y: auto; padding: 14px; display: grid; gap: 10px; align-content: start; background: var(--panel); }
.ai-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 100%; }
.ai-msg.user { justify-content: flex-end; }
.ai-bubble { max-width: 85%; padding: 10px 12px; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.ai-msg.bot .ai-bubble { background: var(--grey); color: var(--ink); }
.ai-msg.user .ai-bubble { background: var(--black); color: #fff; }
:root[data-theme="dark"] .ai-msg.user .ai-bubble { background: #f5f5f5; color: #0b0b0b; }
.ai-li { display: block; padding-left: 14px; position: relative; }
.ai-li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; background: var(--red); }
.ai-typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.ai-typing i { width: 6px; height: 6px; background: var(--muted); animation: aiDot 1s infinite ease-in-out; }
.ai-typing i:nth-child(2) { animation-delay: .15s; } .ai-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes aiDot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ai-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.ai-chips[hidden] { display: none; }
.ai-chips button { border: 1px solid var(--ink); background: var(--panel); color: var(--ink); padding: 6px 10px; font: 500 12px var(--font-display); cursor: pointer; }
.ai-chips button:hover { background: var(--ink); color: var(--bg); }
.ai-form { display: flex; border-top: 1px solid var(--line); }
.ai-form input { flex: 1; border: 0 !important; padding: 14px; font-size: 14px; background: var(--panel); box-shadow: none !important; }
.ai-send { width: 54px; border: 0; background: var(--red); color: #fff; font-size: 20px; cursor: pointer; }
.ai-send:hover { background: #000; }
.ai-foot { margin: 0; padding: 6px 14px 8px; font-size: 10.5px; color: var(--muted); border-top: 1px solid var(--line-2); }
.ai-settings .ai-key-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-settings .ai-key-row input { flex: 1; min-width: 220px; }
@media (max-width: 560px) { .ai-panel { right: 8px; bottom: 8px; height: calc(100vh - 16px); } .ai-fab { right: 12px; bottom: 12px; } .ai-fab-txt { display: none; } .ai-fab { padding: 8px; } }

/* ---------------- sign-in: split editorial screen ---------------- */
body.auth-page, :root[data-theme="light"] body.auth-page, :root[data-theme="dark"] body.auth-page { background: var(--bg); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100vh; padding: 0; }
.auth-art { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; padding: 48px 52px; background: var(--red); color: #fff; overflow: hidden; }
.auth-art .aa-top { position: absolute; top: 32px; left: 52px; right: 52px; display: flex; align-items: center; justify-content: space-between; }
.auth-art .aa-logo { font: 700 16px var(--font-display); letter-spacing: .02em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.auth-art .aa-logo i { width: 26px; height: 26px; background: #fff; display: grid; place-items: center; }
.auth-art .aa-logo i svg { width: 16px; height: 16px; fill: var(--red); }
.auth-art .aa-blocks { position: absolute; right: -40px; top: 90px; display: grid; grid-template-columns: repeat(2, 120px); gap: 0; opacity: .95; }
.auth-art .aa-blocks span { height: 120px; } .auth-art .aa-blocks span:nth-child(1) { background: var(--yellow); } .auth-art .aa-blocks span:nth-child(2) { background: #000; }
.auth-art .aa-blocks span:nth-child(3) { background: var(--orange); } .auth-art .aa-blocks span:nth-child(4) { background: rgba(255, 255, 255, .18); }
.auth-art .aa-label { font: 600 11px var(--font-display); letter-spacing: .12em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.auth-art .aa-label::before { content: ""; width: 8px; height: 8px; background: #fff; }
.auth-art h2 { font: 500 clamp(34px, 4.4vw, 60px)/1.05 var(--font-display); letter-spacing: -.03em; margin: 0; color: #fff; max-width: 560px; }
.auth-art p { margin: 0; max-width: 460px; font-size: 15px; color: rgba(255, 255, 255, .9); }
.auth-art .aa-steps { display: flex; flex-wrap: wrap; gap: 0; margin-top: 8px; }
.auth-art .aa-steps span { padding: 10px 14px; font: 600 12.5px var(--font-display); background: rgba(0, 0, 0, .22); border-right: 1px solid rgba(255, 255, 255, .25); }
.auth-art .aa-steps span b { color: var(--yellow); margin-right: 6px; }
.auth-page .auth-wrap { align-self: center; justify-self: center; width: min(440px, 100% - 48px); margin: 48px auto; }
.auth-page .auth-brand, .auth-page .auth-steps { display: none !important; }
.auth-page .auth-card { background: var(--panel); border: 0; border-top: 6px solid var(--ink); border-radius: 0; box-shadow: none; padding: 30px 0 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.auth-page .auth-card h2 { font: 500 30px var(--font-display); letter-spacing: -.02em; }
.auth-page .auth-card .btn.primary { background: var(--black); border-color: var(--black); }
.auth-page .auth-card .btn.primary:hover { background: var(--red); border-color: var(--red); }
.auth-page .auth-foot { text-align: left; color: var(--muted); }
@media (max-width: 880px) {
  body.auth-page, :root[data-theme="light"] body.auth-page, :root[data-theme="dark"] body.auth-page { grid-template-columns: minmax(0, 1fr); }
  .auth-art { min-height: 300px; padding: 90px 22px 26px; } .auth-art .aa-top { left: 22px; right: 22px; top: 22px; }
  .auth-art .aa-blocks { grid-template-columns: repeat(2, 70px); top: 70px; right: -20px; } .auth-art .aa-blocks span { height: 70px; }
  .auth-page .auth-wrap { margin: 24px auto 40px; }
}
/* sign-in: the red panel fills the screen height; colour blocks sit in the top corner, never over the text */
.auth-art { min-height: 100vh; align-self: stretch; }
.auth-art .aa-blocks { top: 0; right: 0; grid-template-columns: repeat(2, 96px); z-index: 0; }
.auth-art .aa-blocks span { height: 96px; }
.auth-art > :not(.aa-blocks) { position: relative; z-index: 1; }
.auth-art .aa-top { position: absolute; }
.auth-art h2 { max-width: min(560px, calc(100% - 20px)); }
@media (max-width: 880px) {
  .auth-art { min-height: 0; padding-top: 128px; }
  .auth-art .aa-blocks { grid-template-columns: repeat(2, 48px); right: 0; top: 0; }
  .auth-art .aa-blocks span { height: 48px; }
}

/* =====================================================================================================
   Theme v13 – dark, airy SaaS: near-black, a vivid purple→pink→blue gradient glow, DM Sans headlines that fade
   white→grey, soft rounded cards, pill buttons, generous space. Home shows only the essentials (the rest behind
   "Show more details"). Dark by default; light on the switch. (Previous look: backups/ui-v12)
   ===================================================================================================== */
:root, :root[data-theme="dark"] {
  --bg: #060608; --panel: #121216; --panel-solid: #121216; --panel-2: #1a1a20; --glass: #121216; --glass-line: rgba(255, 255, 255, .08);
  --ink: #ffffff; --ink-2: #d4d4e2; --muted: #8c8c9e; --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .05);
  --brand: #9b2cff; --brand-2: #b45cff; --brand-ink: #ffffff; --brand-soft: rgba(155, 44, 255, .16);
  --grad: linear-gradient(120deg, #5b2bff 0%, #a21fd8 40%, #ff4fa3 72%, #ff9a3d 100%);
  --mesh: radial-gradient(60% 90% at 15% 10%, rgba(91, 43, 255, .95), transparent 60%), radial-gradient(55% 80% at 85% 20%, rgba(255, 79, 163, .85), transparent 60%),
          radial-gradient(70% 90% at 60% 110%, rgba(59, 91, 255, .9), transparent 60%), radial-gradient(40% 60% at 95% 95%, rgba(255, 154, 61, .7), transparent 60%), #1a0b2e;
  --ok: #4ade80; --ok-soft: rgba(74, 222, 128, .12); --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, .12); --bad: #ff5c8a; --bad-soft: rgba(255, 92, 138, .12);
  --info: #a78bfa; --info-soft: rgba(167, 139, 250, .12); --na: #9a9aad; --na-soft: rgba(154, 154, 173, .12); --missing: #c4b5fd; --missing-soft: rgba(196, 181, 253, .12);
  --red: #ff5c8a; --yellow: #fbbf24; --orange: #ff9a3d; --grey: #1a1a20; --black: #000;
  --r-lg: 28px; --r: 20px; --r-sm: 12px;
  --shadow: none; --shadow-hover: 0 0 0 1px rgba(155, 44, 255, .45), 0 20px 50px -24px rgba(155, 44, 255, .55); --shadow-lg: 0 40px 90px -30px rgba(0, 0, 0, .9);
  --font: "Inter", "Segoe UI", system-ui, sans-serif; --font-display: "DM Sans", "Segoe UI", system-ui, sans-serif; --mono: var(--font);
  --head-fade: linear-gradient(180deg, #ffffff 30%, #9a9aad 100%);
  --sb-bg: #0b0b0e; --sb-ink: #ffffff; --sb-ink-2: #c9c9d6; --sb-muted: #6f6f80; --sb-hover: #17171c; --sb-line: rgba(255, 255, 255, .07); --sb-card: #141418;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f6f5fb; --panel: #ffffff; --panel-solid: #ffffff; --panel-2: #f4f2fa; --glass: #ffffff; --glass-line: #ebe8f3;
  --ink: #120e1f; --ink-2: #3c3650; --muted: #77708c; --line: #ebe8f3; --line-2: #f3f1f8;
  --brand: #840da7; --brand-2: #6a0a87; --brand-ink: #ffffff; --brand-soft: #f3e6fb;
  --ok: #138a4b; --ok-soft: #e8f7ee; --warn: #b86a00; --warn-soft: #fff4e0; --bad: #d1235b; --bad-soft: #fde9ef; --info: #6d28d9; --info-soft: #f1ebfe;
  --red: #d1235b; --grey: #f4f2fa;
  --shadow: 0 1px 2px rgba(18, 14, 31, .05); --shadow-hover: 0 0 0 1px rgba(132, 13, 167, .35), 0 18px 40px -22px rgba(132, 13, 167, .45);
  --head-fade: linear-gradient(180deg, #120e1f 30%, #6c6585 100%);
  --sb-bg: #ffffff; --sb-ink: #120e1f; --sb-ink-2: #3c3650; --sb-muted: #9a94ac; --sb-hover: #f4f2fa; --sb-line: #ebe8f3; --sb-card: #f4f2fa;
  color-scheme: light;
}
body { background: var(--bg); font-size: 15px; letter-spacing: 0; }
:root[data-theme="dark"] body, :root:not([data-theme="light"]) body { background: radial-gradient(900px 500px at 70% -10%, rgba(155, 44, 255, .16), transparent 60%), var(--bg); background-attachment: fixed; }

/* headlines: DM Sans, fading white → grey */
h1, h2, h3, .pw-head h1, .page-title h1 { font-family: var(--font-display) !important; font-weight: 500 !important; letter-spacing: -.02em !important; text-transform: none !important; color: var(--ink); }
h1, .pw-head h1, .page-title h1 { font-size: clamp(30px, 3.4vw, 44px) !important; line-height: 1.1; background: var(--head-fade); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
h2 { font-size: 18px !important; }
.pw-kicker, .adm-kicker, .hx-eyebrow { font-family: var(--font) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important;
  color: var(--ink-2) !important; background: var(--panel-2) !important; border: 1px solid var(--line) !important; padding: 4px 12px !important; border-radius: 999px !important; }
.pw-kicker::before, .adm-kicker::before, .hx-eyebrow::before { content: "" !important; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; background: var(--grad); vertical-align: 1px; }
.sb-label, .fs-text small, .jr-sub, th, .reg-doc-k { font-family: var(--font) !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: .04em !important; text-transform: uppercase !important; }
.link-btn { border-bottom: 0; color: var(--brand-2); font-family: var(--font); }

/* soft rounded cards with a faint glow at the top */
.card, .panel, .pw-pane, .tile, dialog, .fs-pop, .menu-pop, .hovercard, .np-sort, .flow {
  border-radius: var(--r) !important; border: 1px solid var(--line) !important; background: var(--panel); box-shadow: var(--shadow) !important; }
:root:not([data-theme="light"]) .card, :root:not([data-theme="light"]) .panel, :root:not([data-theme="light"]) .pw-pane {
  background: radial-gradient(120% 60% at 50% -10%, rgba(155, 44, 255, .10), transparent 55%), var(--panel); }
.card:hover, .jr-card:hover, .ex-card:hover, .tile:hover { box-shadow: var(--shadow-hover) !important; }
.jr-track button, .pw-steps button { border-radius: 16px !important; }
.tl, .hx-mini > div, .facts li, .rm-row, .pend, .pw-facts > div, .pw-create, .pw-download, .pw-more, .lg-chip, .status-bar button, .viewswitch, .viewswitch button, .theme-switch, .theme-switch button,
.vtoggle, .vtoggle button, .chip, .menu-pop > a, .menu-pop > button, .np-box, .pp-pic, .ecard, .fac-band, .more-box, .hx-steps li, .hx-pol-body li, input, select, textarea { border-radius: var(--r-sm) !important; }
.tag, .jr-state, .pp-badge, .sb-badge, .pend-count, .lg-chip, .status-bar button { border-radius: 999px !important; }
.tl, .hx-mini > div, .facts li, .rm-row, .pend, .pw-facts > div { background: var(--panel-2); border-color: var(--line); }
input, select, textarea { background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* pill buttons: purple main, quiet outline others */
.btn { border-radius: 999px !important; font-family: var(--font); font-weight: 500; font-size: 14px; letter-spacing: 0; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); box-shadow: none !important; transition: background .15s, border-color .15s, transform .15s; }
.btn:hover { background: var(--panel-2); border-color: color-mix(in srgb, var(--ink) 30%, transparent); color: var(--ink); transform: translateY(-1px); }
.btn.primary, :root[data-theme="dark"] .btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 10px 26px -12px rgba(155, 44, 255, .9) !important; }
.btn.primary:hover { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }
.icon-btn { border-radius: 999px; font-family: var(--font); }

/* sidebar */
@media (min-width: 981px) { .sidebar { inset: 0 auto 0 0; border-radius: 0; border: 0; border-right: 1px solid var(--sb-line); } .page { margin-left: var(--sb-w); } }
.sidebar { background: var(--sb-bg); box-shadow: none; }
.sb-app-mark { background: var(--grad); border-radius: 12px; }
.sb-app-mark svg { fill: #fff; }
.sb-app-name b { font-family: var(--font-display); font-weight: 600; text-transform: none; letter-spacing: -.01em; font-size: 16px; }
.sb-app-name small { font-family: var(--font); text-transform: none; letter-spacing: 0; font-size: 11px; }
.sb-nav button { font-family: var(--font); font-size: 14px; font-weight: 500; border-radius: 12px; color: var(--sb-ink-2); }
.sb-nav button:hover { background: var(--sb-hover); color: var(--sb-ink); }
.sb-nav button.active, :root[data-theme="dark"] .sb-nav button.active { background: var(--brand-soft); color: var(--sb-ink); box-shadow: inset 0 0 0 1px rgba(155, 44, 255, .35); }
.sb-nav button.active svg.ico { stroke: var(--brand-2); }
.sb-nav button.active::before { content: "" !important; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--grad); }
.sb-step { border-radius: 999px; border: 1px solid var(--sb-line); background: transparent; color: var(--sb-muted); font-family: var(--font); }
.sb-nav button.active .sb-step { background: var(--brand); border-color: var(--brand); color: #fff; }
.sb-foot .theme-switch, .sb-foot .theme-switch button, .sb-foot .user-menu > summary { border-radius: 999px; }
.sb-foot .avatar { background: var(--grad); border-radius: 50%; }
.fs-btn { background: var(--sb-card); border: 1px solid var(--sb-line); border-radius: 16px; }
.fs-text small { color: var(--brand-2) !important; }
.fs-text b { font-family: var(--font-display); }
.fs-logo { border-radius: 10px; }
.fs-add { background: var(--brand); border-radius: 999px; font-family: var(--font); }

/* Home: one gradient hero – headline + one main action; the other actions small underneath */
.hx-head { display: block; position: relative; overflow: hidden; padding: 40px 36px 32px; border-radius: var(--r-lg); border: 1px solid rgba(255, 255, 255, .1); background: var(--mesh); color: #fff; }
.hx-head::before, .hx-head::after { content: none !important; }
.hx-hello { padding: 0; }
.hx-head .hx-date { font-family: var(--font); font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, .8); }
.hx-head .hx-date::before { content: none; }
.hx-head h1, #home-hello { font-size: clamp(32px, 4vw, 54px) !important; font-weight: 500 !important; margin: 8px 0 10px; background: linear-gradient(180deg, #fff 35%, rgba(255, 255, 255, .7)); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.hx-head .muted, #home-sub { color: rgba(255, 255, 255, .82); font-size: 15px; max-width: 620px; }
.hx-actions { background: none; padding: 0; margin-top: 22px; display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; justify-content: flex-start; }
.hx-actions .btn { width: auto; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); color: #fff; }
.hx-actions .btn:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.hx-head #qa-upload { background: #fff; border-color: #fff; color: #120e1f; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6) !important; }
.hx-head #qa-upload:hover { background: #f1e9ff; color: #120e1f; }
.hx-head #qa-upload::after { content: " →"; margin-left: 4px; }
.hx-head .new-dot { background: #fff; color: var(--brand); border-radius: 999px; }

/* step cards: quiet, one colour dot each */
.jr-card { border-top: 1px solid var(--line) !important; }
.jr-card.current { box-shadow: 0 0 0 1px rgba(155, 44, 255, .55), 0 24px 60px -30px rgba(155, 44, 255, .7) !important; }
.jr-num, #jr-c1 .jr-num, #jr-c2 .jr-num, #jr-c3 .jr-num { border-radius: 12px; background: var(--brand-soft); color: var(--brand-2); width: 34px; height: 34px; }
.jr-card.current .jr-num { background: var(--grad); color: #fff; }
.pw-num, .pw-steps li.on i { border-radius: 12px; background: var(--grad); color: #fff; }
.pw-steps li.on button { border-color: rgba(155, 44, 255, .55) !important; box-shadow: 0 0 0 3px var(--brand-soft) !important; }
.pw-steps i { border-radius: 10px !important; }

/* process guide */
.flow { padding: 22px 22px 18px !important; }
.fl-dot { border-radius: 12px !important; font-family: var(--font-display); }
.fl-txt b { font-family: var(--font-display); font-weight: 500; }
.flow-steps > li.done { --c: var(--ok); --cs: var(--ok-soft); }
.flow-steps > li.done .fl-dot { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.flow-steps > li.now:not(.done) { --c: var(--brand-2); --cs: var(--brand-soft); }
.flow-steps > li.now:not(.done) .fl-dot { background: var(--grad); border: 0; color: #fff; box-shadow: 0 0 0 5px var(--brand-soft); animation: flowPulse 2.4s ease-in-out infinite; }
.flow-steps > li.now:not(.done) .fl-txt small { color: var(--brand-2); }
.flow-steps > li.here > button { background: var(--panel-2); box-shadow: none; border-radius: 14px; }
.flow-steps > li.here > button::before { background: var(--grad); color: #fff; border-radius: 999px; font-family: var(--font); letter-spacing: 0; text-transform: none; font-size: 10.5px; }
.flow-steps > li.done:not(:last-child)::before { border-color: var(--ok); }
.flow-next { background: var(--mesh); border: 0; border-radius: 16px; color: #fff; padding: 18px 20px; }
.flow-next .fn-body b { color: #fff; font-family: var(--font-display); font-weight: 500; font-size: 19px; }
.flow-next .fn-body small { color: rgba(255, 255, 255, .85); }
.fn-badge { background: rgba(255, 255, 255, .18); color: #fff; border-radius: 999px; font-family: var(--font) !important; }
.flow-next .btn.primary { background: #fff; border-color: #fff; color: #120e1f; box-shadow: none !important; }
.flow-next .btn.primary:hover { background: #f1e9ff; color: #120e1f; }
.flow-next.done { background: linear-gradient(120deg, #0f5132, #138a4b); }
.flow-next.done .fn-badge { background: rgba(255, 255, 255, .2); color: #fff; }

/* ---------------- less on screen: Home essentials ---------------- */
.more-toggle { display: flex; justify-content: center; margin: 4px 0 18px; }
.more-toggle .btn { background: transparent; }
#overview:not(.more) .jr-lower,
#overview:not(.more) .hx-more,
#overview:not(.more) .jr-card .hx-legend,
#overview:not(.more) .jr-card .hx-bar,
#overview:not(.more) .jr-card .facts,
#overview:not(.more) .jr-card .hx-mini small,
#overview:not(.more) #hx-timeline li:nth-child(n+3),
#overview:not(.more) #btn-check, #overview:not(.more) #btn-run-all,
#overview:not(.more) .jr-card #run-state:empty { display: none !important; }
.jr-grid { gap: 20px; }
.jr-card { padding: 22px; gap: 16px; }

/* toast + chat in the gradient style */
.toast { border-radius: 999px; background: #1a1a20; border: 1px solid rgba(255, 255, 255, .1); font-family: var(--font); }
.ai-fab { border-radius: 999px; background: var(--grad); font-family: var(--font-display); box-shadow: 0 16px 34px -14px rgba(155, 44, 255, .9); }
.ai-fab:hover { background: var(--grad); filter: brightness(1.1); }
.ai-fab-ic { border-radius: 50%; background: rgba(255, 255, 255, .2); }
.ai-fab:hover .ai-fab-ic { background: rgba(255, 255, 255, .3); }
.ai-fab-ic svg circle, .ai-fab:hover .ai-fab-ic svg circle { fill: #9b2cff; }
.ai-panel { border-radius: 24px; border: 1px solid var(--line); overflow: hidden; background: var(--panel-solid); }
.ai-head { background: var(--mesh); }
.ai-avatar { border-radius: 50%; background: var(--grad); }
.ai-x { border-radius: 50%; }
.ai-bubble { border-radius: 16px; }
.ai-msg.bot .ai-bubble { background: var(--panel-2); color: var(--ink); }
.ai-msg.user .ai-bubble, :root[data-theme="dark"] .ai-msg.user .ai-bubble { background: var(--brand); color: #fff; }
.ai-li::before { background: var(--brand-2); border-radius: 50%; }
.ai-chips button { border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); font-family: var(--font); }
.ai-chips button:hover { background: var(--brand-soft); color: var(--ink); border-color: rgba(155, 44, 255, .5); }
.ai-form input { background: var(--panel-solid); }
.ai-send { background: var(--grad); }
.ai-send:hover { background: var(--grad); filter: brightness(1.1); }

/* ---------------- sign-in: gradient panel + clean form ---------------- */
body.auth-page, :root[data-theme="light"] body.auth-page, :root[data-theme="dark"] body.auth-page { background: var(--bg); }
.auth-art { background: var(--mesh); border-radius: 0 32px 32px 0; }
.auth-art .aa-logo i { background: #fff; border-radius: 8px; } .auth-art .aa-logo i svg { fill: #9b2cff; }
.auth-art .aa-logo { text-transform: none; font-family: var(--font-display); font-weight: 600; letter-spacing: 0; }
.auth-art .aa-label { font-family: var(--font); text-transform: none; letter-spacing: 0; font-size: 12.5px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); padding: 5px 12px; border-radius: 999px; align-self: flex-start; }
.auth-art .aa-label::before { border-radius: 50%; }
.auth-art h2 { font-family: var(--font-display); background: linear-gradient(180deg, #fff 40%, rgba(255, 255, 255, .65)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-art .aa-blocks { top: 40px; right: 40px; grid-template-columns: 150px; gap: 12px; }
.auth-art .aa-blocks span { height: 64px; border-radius: 16px; background: rgba(255, 255, 255, .14) !important; border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(10px); }
.auth-art .aa-blocks span:nth-child(n+3) { display: none; }
.auth-art .aa-steps { gap: 8px; }
.auth-art .aa-steps span { border-radius: 999px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .2); font-family: var(--font); }
.auth-art .aa-steps span b { color: #fff; }
.auth-page .auth-card { border-top: 0; border-radius: 24px; background: transparent; }
.auth-page .auth-card h2 { font-family: var(--font-display) !important; font-size: 32px !important; background: var(--head-fade); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.auth-page .auth-card .btn.primary { background: var(--brand); border-color: var(--brand); border-radius: 999px !important; }
.auth-page .auth-card .btn.primary:hover { background: var(--brand-2); border-color: var(--brand-2); }
@media (max-width: 880px) { .auth-art { border-radius: 0 0 28px 28px; } .auth-art .aa-blocks { top: 20px; right: 20px; grid-template-columns: 90px; } .auth-art .aa-blocks span { height: 40px; } }
.flow-next .btn.primary, :root[data-theme="dark"] .flow-next .btn.primary, :root[data-theme="light"] .flow-next .btn.primary { background: #fff; border-color: #fff; color: #120e1f; box-shadow: none !important; }
.flow-next .btn.primary:hover, :root[data-theme="dark"] .flow-next .btn.primary:hover { background: #f1e9ff; color: #120e1f; }

/* =====================================================================================================
   "How it works" – isometric animated scene on the dashboard
   ===================================================================================================== */
.iso-card { padding: 20px 22px 0 !important; margin-bottom: 18px; overflow: hidden; }
.iso-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.iso-top h2 { margin: 8px 0 0; }
.iso-ctrl { display: flex; gap: 8px; }
.iso-stage { margin: 4px -10px 0; }
.iso-stage svg { display: block; width: 100%; height: auto; max-height: 360px; }
.iso-show { margin: -6px 0 16px; }

/* colours (dark theme by default; light below) */
.iso-stage { --s-top: #23232c; --s-l: #17171d; --s-r: #1d1d25; --line-c: rgba(255, 255, 255, .14);
  --paper-t: #f4f2fa; --paper-l: #c9c4da; --paper-r: #ddd8ea; --c-t: #34344a; --c-l: #22222f; --c-r: #2b2b3b;
  --b-t: #3a3654; --b-l: #24223a; --b-r: #2e2b47; --badge: rgba(18, 18, 22, .92); --badge-ink: #fff; }
:root[data-theme="light"] .iso-stage { --s-top: #ffffff; --s-l: #e4e0f0; --s-r: #efecf7; --line-c: rgba(18, 14, 31, .14);
  --paper-t: #ffffff; --paper-l: #d9d4e8; --paper-r: #e9e5f3; --c-t: #ece8f6; --c-l: #cfc8e2; --c-r: #ddd7ec;
  --b-t: #f1edf9; --b-l: #d3cbe6; --b-r: #e2dbef; --badge: #ffffff; --badge-ink: #120e1f; }

.iso-world polygon { stroke: var(--line-c); stroke-width: .8; stroke-linejoin: round; transition: fill .45s ease; }
.slab .f-t { fill: var(--s-top); } .slab .f-l { fill: var(--s-l); } .slab .f-r { fill: var(--s-r); }
.paper .f-t { fill: var(--paper-t); } .paper .f-l { fill: var(--paper-l); } .paper .f-r { fill: var(--paper-r); }
.top-sheet .f-t { fill: #fff; }
.stamp .f-t, .stamp-h .f-t { fill: #ff4fa3; } .stamp .f-l, .stamp-h .f-l { fill: #b8256f; } .stamp .f-r, .stamp-h .f-r { fill: #d93886; }
.cabinet .f-t, .hall .f-t, .plinth .f-t, .eave .f-t { fill: var(--c-t); } .cabinet .f-l, .hall .f-l, .plinth .f-l, .eave .f-l { fill: var(--c-l); } .cabinet .f-r, .hall .f-r, .plinth .f-r, .eave .f-r { fill: var(--c-r); }
.drawer .f-r, .drawer .f-t, .drawer .f-l { fill: #8b7bff; }
.calendar .f-t { fill: var(--paper-t); } .calendar .f-l { fill: var(--paper-l); } .calendar .f-r { fill: var(--paper-r); }
.calendar-top .f-t { fill: #ff5c8a; } .calendar-top .f-l { fill: #c2385f; } .calendar-top .f-r { fill: #e04a75; }
.column .f-t, .column .f-l, .column .f-r { fill: var(--b-t); } .column .f-l { fill: var(--b-l); }
.roof-l { fill: #5b2bff; } .roof-r { fill: #7d4dff; }
.pole .f-t, .pole .f-l, .pole .f-r { fill: var(--paper-l); }
.flag { fill: url(#isoGlow); stroke: none !important; transform-box: fill-box; transform-origin: left center; animation: isoFlag 1.6s ease-in-out infinite; }
@keyframes isoFlag { 0%, 100% { transform: skewY(0); } 50% { transform: skewY(-6deg); } }
.iso-path { fill: none; stroke: var(--line-c); stroke-width: 3; stroke-dasharray: 2 10; stroke-linecap: round; animation: isoDash 1.2s linear infinite; }
@keyframes isoDash { to { stroke-dashoffset: -24; } }

/* signals from the DoH building */
.signal circle { fill: none; stroke: #ff4fa3; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: isoPing 1.8s ease-out infinite; }
@keyframes isoPing { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(3.2); } }

/* the active island lights up */
.iso-isle { transition: opacity .4s ease, transform .4s ease; }
.iso-isle.on .slab .f-t { fill: url(#isoGlow); }
.iso-isle.on .slab .f-l { fill: #3b1a8f; } .iso-isle.on .slab .f-r { fill: #5a1f9e; }
:root[data-theme="light"] .iso-isle.on .slab .f-l { fill: #b9a3f0; } :root[data-theme="light"] .iso-isle.on .slab .f-r { fill: #d0bff5; }
.iso-stage .iso-isle:not(.on) { opacity: .62; }

/* the travelling package */
.pkg .f-t { fill: #ffd36b; } .pkg .f-l { fill: #e0a52c; } .pkg .f-r { fill: #f2bd45; }
.iso-pkg { filter: drop-shadow(0 0 10px rgba(255, 190, 80, .85)); }

/* badges: real progress */
.iso-badge rect { fill: var(--badge); stroke: var(--line-c); }
.iso-badge text { font: 600 13px var(--font-display, sans-serif); fill: var(--badge-ink); }
.iso-badge .b-num { font-weight: 700; fill: #a78bfa; }
.iso-isle.done .iso-badge rect { stroke: var(--ok); } .iso-isle.done .iso-badge .b-num { fill: var(--ok); }
.iso-isle.warn .iso-badge rect { stroke: var(--warn); }
.iso-isle.now .iso-badge rect { fill: #9b2cff; stroke: #c792ff; } .iso-isle.now .iso-badge text { fill: #fff; }
.iso-isle.now .iso-badge { animation: isoBob 1.6s ease-in-out infinite; }
@keyframes isoBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }

/* caption + controls */
.iso-caption { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 6px 0 16px; border-top: 1px solid var(--line); }
.iso-dots { display: flex; gap: 6px; }
.iso-dots button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2); font: 600 13px var(--font-display, sans-serif); cursor: pointer; }
.iso-dots button.on { background: var(--grad); color: #fff; border-color: transparent; }
.iso-text { flex: 1; min-width: 220px; display: grid; gap: 2px; }
.iso-text b { font-family: var(--font-display); font-weight: 500; font-size: 17px; color: var(--ink); }
.iso-text span { font-size: 13.5px; color: var(--muted); }
.iso-bar { height: 3px; margin: 0 -22px; background: var(--line); }
.iso-bar i { display: block; height: 100%; width: 0; background: var(--grad); }

@media (prefers-reduced-motion: reduce) { .iso-path, .signal circle, .flag, .iso-isle.now .iso-badge { animation: none; } }
@media (max-width: 640px) { .iso-card { padding: 16px 14px 0 !important; } .iso-bar { margin: 0 -14px; } .iso-ctrl .btn { padding: 6px 10px; } }
.iso-ctrl .btn { background: var(--panel-2) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; -webkit-text-fill-color: currentColor; }
.iso-ctrl .btn:hover { border-color: rgba(155, 44, 255, .55) !important; }

/* dashboard: live policy-creation status */
.hx-live { display: grid; gap: 6px; padding: 12px 14px; margin-bottom: 10px; border-radius: var(--r-sm); background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent); }
.hx-live-top { display: flex; align-items: center; gap: 8px; }
.hx-live-top b { flex: 1; font-size: 13.5px; }
.hx-live-top span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }
.hx-live small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-live .days-bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.hx-live .days-bar i { display: block; height: 100%; background: var(--grad); border-radius: 999px; transition: width .6s ease; }
.hx-live.ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.hx-live.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.hx-live.ok b, .hx-live.warn b { font-size: 13px; }

/* =====================================================================================================
   HR & checklist: facility-branded forms, ADHICS document checklist
   ===================================================================================================== */
.hr-brand { display: flex; align-items: center; gap: 18px; }
.hr-brand img { max-height: 64px; max-width: 170px; object-fit: contain; background: #fff; border-radius: 12px; padding: 8px 10px; border: 1px solid var(--line); flex: none; }
.hr-brand h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hr-sum { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; align-items: center; padding: 18px 22px !important; margin-bottom: 18px; }
.hr-sum-main { display: flex; align-items: baseline; gap: 8px; grid-row: span 2; }
.hr-sum-main b { font-size: 38px; line-height: 1; font-family: var(--font-display, inherit); }
.hr-sum-main span { color: var(--muted); }
.hr-bar { display: flex; height: 10px; border-radius: 99px; background: var(--warn-soft); overflow: hidden; }
.hr-bar i { display: block; height: 100%; } .hr-bar .ok { background: var(--ok); } .hr-bar .na { background: var(--muted); opacity: .45; }
.hr-sum-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.hr-sum-legend .ok { color: var(--ok); } .hr-sum-legend .warn { color: var(--warn); } .hr-sum-legend .na { color: var(--muted); }
.hr-forms, .hr-check, .hr-admin { margin-bottom: 18px; }
.hr-sec-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.hr-sec-head h2 { margin: 0 0 2px; }
.hr-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.hr-form { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-sm, 12px); background: var(--panel-2); }
.hr-form.off { opacity: .8; border-style: dashed; }
.hr-form b { font-size: 14.5px; line-height: 1.3; }
.hr-form small { font-size: 12.5px; } .hr-form small.ok { color: var(--ok); } .hr-form small.warn { color: var(--warn); }
.hr-form .btn-row { margin-top: auto; padding-top: 6px; gap: 6px; }
.hr-form-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.hr-no { font: 700 11.5px/1 var(--font-display, inherit); letter-spacing: .04em; color: var(--brand); background: var(--brand-soft); padding: 4px 8px; border-radius: 99px; }
.hr-sync { display: grid; grid-template-columns: 1fr minmax(260px, 380px); gap: 16px; margin-top: 16px; padding: 14px 16px; border-radius: var(--r-sm, 12px); background: var(--info-soft); border: 1px solid var(--line); }
.hr-sync-txt { display: grid; gap: 4px; align-content: start; } .hr-sync-txt small { color: var(--ink-2); line-height: 1.5; }
.hr-sync-tbl { border-collapse: collapse; font-size: 13px; width: 100%; }
.hr-sync-tbl th { text-align: left; font-weight: 500; color: var(--muted); padding: 3px 10px 3px 0; white-space: nowrap; } .hr-sync-tbl td { padding: 3px 0; font-weight: 600; }
.hr-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.hr-tabs button { font: inherit; font-weight: 600; font-size: 13.5px; display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2); cursor: pointer; }
.hr-tabs button small { font-weight: 600; color: var(--muted); }
.hr-tabs button.on { background: var(--grad, var(--brand)); color: #fff; border-color: transparent; } .hr-tabs button.on small { color: rgba(255, 255, 255, .85); }
.hr-filter { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.hr-filter input { flex: 1; min-width: 200px; }
.hr-tbl { width: 100%; border-collapse: collapse; }
.hr-tbl th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.hr-tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.hr-tbl td.num { width: 44px; color: var(--muted); text-align: center; }
.hr-name { font-weight: 600; font-size: 13.5px; }
.hr-link { margin-top: 3px; } .hr-link .link-btn { font-size: 12.5px; }
.hr-status { font: inherit; font-weight: 700; font-size: 13px; padding: 6px 10px; border-radius: 9px; border: 1px solid transparent; cursor: pointer; min-width: 140px; }
.hr-status.ok { background: var(--ok-soft); color: var(--ok); } .hr-status.warn { background: var(--warn-soft); color: var(--warn); } .hr-status.na { background: var(--panel-2); color: var(--muted); border-color: var(--line); }
.hr-status option { background: var(--panel-solid, #fff); color: var(--ink); }
.hr-remarks { width: 100%; min-width: 180px; font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line); background: transparent; color: var(--ink); }
.hr-remarks:focus { background: var(--panel); outline: 2px solid var(--brand-soft); }
.hr-add { display: flex; gap: 8px; margin-top: 12px; } .hr-add input { flex: 1; }
.hr-cross-note { font-size: 13.5px; line-height: 1.55; margin-bottom: 12px; padding: 12px 14px; border-radius: var(--r-sm, 12px); background: var(--panel-2); }
.hr-cross-note .warn { color: var(--warn); }
body.ro #hr-add, body.ro #hr-reset { display: none; }
@media (max-width: 760px) {
  .hr-sync { grid-template-columns: 1fr; } .hr-sum { grid-template-columns: 1fr; } .hr-sum-main { grid-row: auto; }
  .hr-tbl thead { display: none; } .hr-tbl tr { display: grid; grid-template-columns: 34px 1fr; gap: 4px 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .hr-tbl td { border: 0; padding: 2px 0; } .hr-tbl td:nth-child(n+3) { grid-column: 2; } .hr-brand { align-items: flex-start; } .hr-brand img { max-height: 48px; }
}
.hr-tbl th:nth-child(4), .hr-check .hr-tbl td:nth-child(4) { width: 34%; }
.hr-check .hr-tbl td:nth-child(3) { width: 160px; } .hr-check .hr-tbl td:nth-child(5) { width: 76px; }

/* sequence: 1 policies, 2 HR documents, 3 Legal Register (final), DoH monitoring always on */
#jr-c4 .jr-num { background: var(--brand-soft) !important; color: var(--brand-2) !important; }
.sb-step.sb-live { background: transparent !important; border: 1px dashed currentColor; opacity: .75; }
#hx-hr-checklist { margin: 8px 0 0; }

.hr-pdf { display: flex; align-items: center; gap: 6px; font-size: 12px !important; } .hr-pdf.ok { color: var(--ok); } .hr-pdf .spin { width: 11px; height: 11px; }

/* training / 3rd-party documents: dates panel */
.hr-training { margin-bottom: 18px; }
.doc-dates { display: grid; gap: 10px; margin-top: 16px; padding: 14px 16px; border-radius: var(--r-sm, 12px); background: var(--panel-2); border: 1px solid var(--line); }
.dd-global { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dd-global label { display: flex; align-items: center; gap: 10px; }
.dd-global small { flex: 1; min-width: 220px; }
.dd-doc { border-top: 1px solid var(--line); padding-top: 8px; }
.dd-doc summary { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; cursor: pointer; list-style: none; }
.dd-doc summary::before { content: '▸'; color: var(--muted); } .dd-doc[open] summary::before { content: '▾'; }
.dd-mode { margin: 8px 0; font-size: 13px; }
.dd-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px 14px; max-height: 360px; overflow: auto; padding-right: 4px; }
.dd-slots label { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; font-size: 12.5px; }
.dd-slots label span { grid-column: 1 / -1; color: var(--ink-2); }
.dd-details { margin-top: 10px; display: grid; gap: 6px; }
.dd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.dd-grid label { display: grid; gap: 3px; font-size: 12.5px; color: var(--ink-2); }

.dd-list { display: grid; gap: 2px; }
.dd-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); }
.dd-what { flex: 1; min-width: 240px; display: grid; gap: 2px; }
.dd-own { display: flex; align-items: center; gap: 10px; }

/* =====================================================================================================
   Theme v14 – "Agentory": near-black (#0a0a0a), warm charcoal cards, one bright orange (#ff5101) with a glow,
   a dotted orange globe with orbit rings on the dashboard, Inter 500 headlines with a grey second line, orange
   pill buttons, quiet outline buttons, dot-matrix accents, and a soft rise-in when a page opens.
   Dark by default; light (warm off-white) on the switch. (Previous look: backups/ui-v16)
   ===================================================================================================== */
:root, :root[data-theme="dark"] {
  --bg: #0a0a0a; --panel: #141414; --panel-solid: #141414; --panel-2: #1b1a19; --glass: #141414; --glass-line: rgba(255, 245, 235, .08);
  --ink: #ffffff; --ink-2: #d9d5d1; --muted: #9b958f; --line: rgba(255, 240, 225, .08); --line-2: rgba(255, 240, 225, .05);
  --brand: #ff5101; --brand-2: #ff7a3a; --brand-ink: #ffffff; --brand-soft: rgba(255, 81, 1, .13);
  --grad: linear-gradient(135deg, #ff5101 0%, #ff7a3a 60%, #ffae6b 100%);
  --mesh: radial-gradient(70% 120% at 50% 130%, rgba(255, 81, 1, .55), transparent 62%), radial-gradient(40% 60% at 50% 120%, rgba(255, 140, 60, .5), transparent 70%), #0d0b0a;
  --ok: #4ade80; --ok-soft: rgba(74, 222, 128, .11); --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, .11); --bad: #ff5a5f; --bad-soft: rgba(255, 90, 95, .12);
  --info: #ff9a5c; --info-soft: rgba(255, 122, 58, .10); --na: #9b958f; --na-soft: rgba(155, 149, 143, .12); --missing: #ffb37a; --missing-soft: rgba(255, 179, 122, .11);
  --red: #ff5a5f; --yellow: #fbbf24; --orange: #ff5101; --grey: #1b1a19;
  --r-lg: 24px; --r: 18px; --r-sm: 12px;
  --shadow: none; --shadow-hover: 0 0 0 1px rgba(255, 81, 1, .45), 0 22px 50px -26px rgba(255, 81, 1, .55); --shadow-lg: 0 40px 90px -30px rgba(0, 0, 0, .9);
  --font: "Inter", "Segoe UI", system-ui, sans-serif; --font-display: "Inter", "Segoe UI", system-ui, sans-serif;
  --head-fade: linear-gradient(180deg, #ffffff 45%, #8f8a85 100%);
  --dots: radial-gradient(circle, rgba(255, 255, 255, .07) 1px, transparent 1.3px);
  --sb-bg: #0a0a0a; --sb-ink: #ffffff; --sb-ink-2: #c9c4bf; --sb-muted: #75706b; --sb-hover: #161514; --sb-line: rgba(255, 240, 225, .07); --sb-card: #141414;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #faf8f6; --panel: #ffffff; --panel-solid: #ffffff; --panel-2: #f5f1ed; --glass: #ffffff; --glass-line: #ece6e0;
  --ink: #141210; --ink-2: #3f3a35; --muted: #7d766f; --line: #ece6e0; --line-2: #f4efea;
  --brand: #e64900; --brand-2: #c43d00; --brand-ink: #ffffff; --brand-soft: #fff0e6;
  --grad: linear-gradient(135deg, #e64900 0%, #ff7a3a 100%);
  --ok: #138a4b; --ok-soft: #e8f7ee; --warn: #b86a00; --warn-soft: #fff4e0; --bad: #d12a2f; --bad-soft: #fdecec; --info: #c43d00; --info-soft: #fff0e6;
  --shadow: 0 1px 2px rgba(20, 18, 16, .05); --shadow-hover: 0 0 0 1px rgba(230, 73, 0, .35), 0 18px 40px -24px rgba(230, 73, 0, .45);
  --head-fade: linear-gradient(180deg, #141210 45%, #7d766f 100%);
  --dots: radial-gradient(circle, rgba(20, 18, 16, .06) 1px, transparent 1.3px);
  --sb-bg: #ffffff; --sb-ink: #141210; --sb-ink-2: #3f3a35; --sb-muted: #a39b93; --sb-hover: #f5f1ed; --sb-line: #ece6e0; --sb-card: #f5f1ed;
  color-scheme: light;
}
:root[data-theme="dark"] body, :root:not([data-theme="light"]) body {
  background: radial-gradient(900px 420px at 60% -12%, rgba(255, 81, 1, .13), transparent 62%), var(--bg); background-attachment: fixed; }
body { font-feature-settings: "cv11", "ss01"; }

/* headlines: Inter 500, tight; second line grey (Agentory style) */
h1, h2, h3, .pw-head h1, .page-title h1 { font-family: var(--font-display) !important; font-weight: 500 !important; letter-spacing: -.025em !important; }
h1 .h-dim, #home-hello .h-dim { display: block; color: #8f8a85; -webkit-text-fill-color: #8f8a85; }
:root[data-theme="light"] h1 .h-dim, :root[data-theme="light"] #home-hello .h-dim { color: #8a837c; -webkit-text-fill-color: #8a837c; }
.pw-kicker::before, .adm-kicker::before, .hx-eyebrow::before { background: var(--brand); box-shadow: 0 0 10px var(--brand); }
.link-btn { color: var(--brand-2); }
a.link-btn::after, button.link-btn:not(.small)::after { content: " →"; }

/* cards: charcoal, thin warm border, orange edge on hover; faint dot texture at the top */
:root:not([data-theme="light"]) .card, :root:not([data-theme="light"]) .panel, :root:not([data-theme="light"]) .pw-pane {
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 120px), var(--panel); }
.card, .panel, .pw-pane, .tile { transition: box-shadow .2s, border-color .2s, transform .2s; }
.card:hover, .jr-card:hover, .ex-card:hover, .tile:hover, .hr-form:hover { box-shadow: var(--shadow-hover) !important; }
.hr-form { transition: box-shadow .2s, transform .2s; }
.hr-form:hover { transform: translateY(-2px); }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* buttons: orange pill with a glow; others quiet outline pills */
.btn { background: transparent; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.btn:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); border-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.btn.primary, :root[data-theme="dark"] .btn.primary, :root[data-theme="light"] .btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 0 0 1px rgba(255, 81, 1, .2), 0 10px 28px -10px rgba(255, 81, 1, .85) !important; }
.btn.primary:hover { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }

/* sidebar: black, orange marker on the active page */
.sb-app-mark { background: var(--grad); box-shadow: 0 0 18px -4px rgba(255, 81, 1, .8); }
.sb-nav button.active, :root[data-theme="dark"] .sb-nav button.active { background: var(--brand-soft); color: var(--sb-ink); box-shadow: inset 0 0 0 1px rgba(255, 81, 1, .3); }
.sb-nav button.active svg.ico { stroke: var(--brand); }
.sb-nav button.active::before { background: var(--brand); box-shadow: 0 0 10px var(--brand); }
.sb-nav button.active .sb-step { background: var(--brand); border-color: var(--brand); }
.sb-foot .avatar, .fs-add { background: var(--brand); }
.fs-text small { color: var(--brand-2) !important; }

/* Dashboard hero: black stage with a dotted orange globe rising from the bottom and two orbit rings */
.hx-head { background: radial-gradient(60% 90% at 50% 125%, rgba(255, 81, 1, .42), transparent 65%), #0c0b0a; border: 1px solid rgba(255, 240, 225, .08); padding: 44px 36px 120px; text-align: center; isolation: isolate; }
.hx-head > * { position: relative; z-index: 2; }
.hx-head::before { content: "" !important; position: absolute; z-index: 0; left: 50%; bottom: -330px; width: 760px; height: 420px; transform: translateX(-50%); border-radius: 50%;
  border: 1px solid rgba(255, 110, 40, .35); box-shadow: 0 0 0 46px rgba(255, 81, 1, .03), 0 0 0 47px rgba(255, 110, 40, .18), 0 0 0 110px rgba(255, 81, 1, .02), 0 0 0 111px rgba(255, 110, 40, .1); pointer-events: none; }
.hx-head::after { content: "" !important; position: absolute; z-index: 1; left: 50%; bottom: -250px; width: 520px; height: 360px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 130, 50, .95) 1.3px, transparent 1.9px) 0 0 / 9px 9px;
  -webkit-mask: radial-gradient(closest-side, #000 55%, transparent 100%); mask: radial-gradient(closest-side, #000 55%, transparent 100%);
  filter: drop-shadow(0 0 14px rgba(255, 81, 1, .7)); opacity: .9; animation: globeDrift 40s linear infinite; pointer-events: none; }
@keyframes globeDrift { from { background-position: 0 0; } to { background-position: 360px 0; } }
.hx-head h1, #home-hello { background: none; -webkit-text-fill-color: #fff; color: #fff !important; font-size: clamp(32px, 4vw, 52px) !important; }
.hx-head .muted, #home-sub { color: rgba(255, 255, 255, .72); margin-left: auto; margin-right: auto; }
.hx-head .hx-date { color: rgba(255, 255, 255, .6); }
.hx-actions { justify-content: center; }
.hx-actions .btn { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .22); color: #fff; }
.hx-actions .btn:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.hx-head #qa-upload { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 0 30px -6px rgba(255, 81, 1, .9) !important; }
.hx-head #qa-upload:hover { background: var(--brand-2); color: #fff; }
.hx-head .new-dot { background: #fff; color: var(--brand); }

/* process guide + next step: dark with an orange glow; the current step glows */
.flow-next { background: radial-gradient(70% 140% at 0% 50%, rgba(255, 81, 1, .38), transparent 60%), #120f0d; border: 1px solid rgba(255, 110, 40, .25); }
.fn-badge { background: rgba(255, 81, 1, .18); color: #ffb08a; }
.flow-next .btn.primary, :root[data-theme="dark"] .flow-next .btn.primary, :root[data-theme="light"] .flow-next .btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 0 24px -6px rgba(255, 81, 1, .9) !important; }
.flow-next .btn.primary:hover, :root[data-theme="dark"] .flow-next .btn.primary:hover { background: var(--brand-2); color: #fff; }
.flow-steps > li.now:not(.done) .fl-dot { background: var(--brand); box-shadow: 0 0 0 5px var(--brand-soft), 0 0 18px rgba(255, 81, 1, .7); }
.flow-steps > li.now:not(.done) .fl-txt small { color: var(--brand-2); }
.flow-steps > li.here > button::before { background: var(--brand); }
.jr-card.current { box-shadow: 0 0 0 1px rgba(255, 81, 1, .55), 0 24px 60px -30px rgba(255, 81, 1, .7) !important; }
.jr-card.current .jr-num, .pw-num, .pw-steps li.on i { background: var(--brand); color: #fff; }
.pw-steps li.on button { border-color: rgba(255, 81, 1, .55) !important; }
.jr-num, #jr-c1 .jr-num, #jr-c2 .jr-num, #jr-c3 .jr-num { background: var(--brand-soft); color: var(--brand-2); }

/* big numbers in orange tiles (Agentory "-85%" stat) */
.hr-sum-main b, .hx-ring b, #hx-pct { color: var(--brand); }
.hr-bar .ok { background: var(--brand); }
.hr-sum { background: radial-gradient(60% 140% at 0% 50%, rgba(255, 81, 1, .16), transparent 60%), var(--panel) !important; }
.hr-no { color: #ffb08a; background: var(--brand-soft); }
:root[data-theme="light"] .hr-no { color: var(--brand-2); }
.hr-tabs button.on { background: var(--brand); box-shadow: 0 8px 22px -10px rgba(255, 81, 1, .9); }

/* dot-matrix feature icons (export hub, HR cards) */
.ex-ic { background: var(--brand-soft); border-radius: 14px; filter: saturate(.2) brightness(1.4); }

/* AI assistant */
.ai-fab { background: var(--brand); box-shadow: 0 0 34px -8px rgba(255, 81, 1, .95); }
.ai-fab:hover { background: var(--brand-2); filter: none; }
.ai-fab-ic svg circle, .ai-fab:hover .ai-fab-ic svg circle { fill: var(--brand); }
.ai-head { background: radial-gradient(80% 160% at 50% 140%, rgba(255, 81, 1, .6), transparent 65%), #0f0d0c; }
.ai-avatar, .ai-send { background: var(--brand); }
.ai-msg.user .ai-bubble, :root[data-theme="dark"] .ai-msg.user .ai-bubble { background: var(--brand); }
.ai-chips button:hover { border-color: rgba(255, 81, 1, .5); }

/* isometric scene in orange */
.roof-l { fill: #ff5101; } .roof-r { fill: #ff7a3a; }
.drawer .f-r, .drawer .f-t, .drawer .f-l { fill: #ff7a3a; }
.iso-isle.on .slab .f-l { fill: #7a2a05; } .iso-isle.on .slab .f-r { fill: #a33a08; }
:root[data-theme="light"] .iso-isle.on .slab .f-l { fill: #ffb48a; } :root[data-theme="light"] .iso-isle.on .slab .f-r { fill: #ffcfb0; }
.iso-badge .b-num { fill: #ff7a3a; }
.iso-isle.now .iso-badge rect { fill: #ff5101; stroke: #ff9a5c; }
.signal circle { stroke: #ff5101; }
.iso-dots button.on { background: var(--brand); }

/* sign-in: black with the orange globe */
.auth-art { background: radial-gradient(70% 70% at 50% 115%, rgba(255, 81, 1, .55), transparent 65%), #0c0b0a; position: relative; overflow: hidden; }
.auth-art::after { content: ""; position: absolute; left: 50%; bottom: -200px; width: 480px; height: 360px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 130, 50, .95) 1.3px, transparent 1.9px) 0 0 / 9px 9px;
  -webkit-mask: radial-gradient(closest-side, #000 55%, transparent 100%); mask: radial-gradient(closest-side, #000 55%, transparent 100%); filter: drop-shadow(0 0 14px rgba(255, 81, 1, .7)); pointer-events: none; }
.auth-art .aa-logo i svg { fill: var(--brand); }
.auth-page .auth-card .btn.primary { background: var(--brand); border-color: var(--brand); }
.auth-page .auth-card .btn.primary:hover { background: var(--brand-2); border-color: var(--brand-2); }

/* a soft rise-in when a page opens (like the template's scroll reveals) */
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.tab.active > * { animation: riseIn .5s cubic-bezier(.2, .7, .2, 1) both; }
.tab.active > *:nth-child(2) { animation-delay: .05s; } .tab.active > *:nth-child(3) { animation-delay: .1s; }
.tab.active > *:nth-child(4) { animation-delay: .15s; } .tab.active > *:nth-child(n+5) { animation-delay: .2s; }
@media (prefers-reduced-motion: reduce) { .tab.active > *, .hx-head::after { animation: none !important; } }
@media (max-width: 640px) { .hx-head { padding: 32px 18px 96px; } .hx-head::before { width: 520px; bottom: -300px; } .hx-head::after { width: 360px; bottom: -230px; } }
/* v14 fix: the globe stays in the bottom band (text always on plain black) */
.hx-head { padding-bottom: 150px; }
.hx-head::after { bottom: -275px; height: 380px; -webkit-mask: radial-gradient(closest-side, #000 50%, transparent 92%), linear-gradient(to top, #000 55%, transparent 75%); -webkit-mask-composite: source-in; mask: radial-gradient(closest-side, #000 50%, transparent 92%) intersect, linear-gradient(to top, #000 55%, transparent 75%); }
.hx-head::before { bottom: -360px; }
#home-sub { text-shadow: 0 1px 10px #0c0b0a; }
@media (max-width: 640px) { .hx-head { padding-bottom: 110px; } .hx-head::after { bottom: -260px; } }
.hx-head::before { background: none !important; }
.hx-head::after, .hx-head::before { top: auto !important; right: auto !important; inset-block-start: auto !important; }
.hx-head::after { -webkit-mask: radial-gradient(closest-side, #000 62%, transparent 100%) !important; mask: radial-gradient(closest-side, #000 62%, transparent 100%) !important; -webkit-mask-composite: initial; bottom: -250px !important; }

/* users: facility access at a glance */
.scope-list { display: flex; flex-wrap: wrap; gap: 4px; }
.scope { display: inline-block; padding: 3px 9px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font-size: 12px; white-space: nowrap; }
.scope.all { background: var(--brand-soft); color: var(--brand-2); border-color: transparent; }
.scope.none { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.scope-edit { display: block; margin-top: 6px; }
.access-dlg { max-width: 520px; width: calc(100% - 32px); padding: 22px; }
.access-dlg h2 { margin: 0 0 6px; }
.access-list { display: grid; gap: 6px; max-height: 50vh; overflow: auto; margin: 10px 0 16px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
.access-dlg .btn-row { justify-content: flex-end; }

/* =====================================================================================================
   Theme v15 – "Fluid" (Adobe Stock 210590661 style): light and airy – white cards on a soft lavender page, navy
   headlines and navy pill buttons, vivid violet→pink gradients, orange/yellow diagonal stripes and fluid blob
   shapes as artwork, lilac→sky gradient panels, round navy icon badges. Light by default; dark (deep navy) on the
   switch. (Previous look: backups/ui-v17)
   ===================================================================================================== */
:root, :root[data-theme="light"] {
  --bg: #f5f4fb; --panel: #ffffff; --panel-solid: #ffffff; --panel-2: #f3f1fb; --glass: #ffffff; --glass-line: #e9e6f5;
  --ink: #1c2a4a; --ink-2: #3d4a6b; --muted: #7c84a0; --line: #e9e6f5; --line-2: #f1eff9;
  --brand: #1f2d55; --brand-2: #6a4cf0; --brand-ink: #ffffff; --brand-soft: #efeafe;
  --navy: #1f2d55; --violet: #6a4cf0; --pink: #ff5fb8; --orange: #ff8a1f; --yellow: #ffc83d; --sky: #a9dcf5; --lilac: #d6cbfb;
  --grad: linear-gradient(120deg, #6a4cf0 0%, #a64ff0 45%, #ff5fb8 100%);
  --grad-warm: linear-gradient(120deg, #ff8a1f 0%, #ffc83d 100%);
  --panel-grad: linear-gradient(120deg, #ddd2fd 0%, #cfe0fb 55%, #bfe7f5 100%);
  --stripes: repeating-linear-gradient(-55deg, #ff8a1f 0 14px, #ffb02e 14px 22px, #ffc83d 22px 34px, #ff9a3c 34px 40px);
  --mesh: var(--panel-grad);
  --ok: #12a06b; --ok-soft: #e4f7ef; --warn: #d9850b; --warn-soft: #fff3df; --bad: #e1416b; --bad-soft: #fde8ee;
  --info: #6a4cf0; --info-soft: #efeafe; --na: #8a90a8; --na-soft: #f0f1f6; --missing: #a64ff0; --missing-soft: #f4ecfe;
  --red: #e1416b; --grey: #f3f1fb;
  --r-lg: 22px; --r: 16px; --r-sm: 10px;
  --shadow: 0 1px 2px rgba(31, 45, 85, .04), 0 8px 24px -18px rgba(31, 45, 85, .25);
  --shadow-hover: 0 2px 4px rgba(31, 45, 85, .05), 0 22px 44px -22px rgba(106, 76, 240, .45); --shadow-lg: 0 30px 70px -30px rgba(31, 45, 85, .35);
  --font: "Poppins", "Segoe UI", system-ui, sans-serif; --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --head-fade: none;
  --sb-bg: #ffffff; --sb-ink: #1c2a4a; --sb-ink-2: #45526f; --sb-muted: #9aa0b8; --sb-hover: #f5f3fc; --sb-line: #ece9f6; --sb-card: #f6f4fd;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0e1430; --panel: #161e40; --panel-solid: #161e40; --panel-2: #1d2650; --glass: #161e40; --glass-line: rgba(255, 255, 255, .08);
  --ink: #f2f3fb; --ink-2: #c9cde4; --muted: #8f96b8; --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .05);
  --brand: #8b74ff; --brand-2: #a993ff; --brand-ink: #ffffff; --brand-soft: rgba(139, 116, 255, .16);
  --panel-grad: linear-gradient(120deg, #3b2f86 0%, #2b3f86 55%, #1f5a7a 100%); --mesh: var(--panel-grad);
  --ok: #34d399; --ok-soft: rgba(52, 211, 153, .12); --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, .12); --bad: #fb7185; --bad-soft: rgba(251, 113, 133, .12);
  --info: #a993ff; --info-soft: rgba(169, 147, 255, .12); --na: #9aa0b8; --na-soft: rgba(154, 160, 184, .12);
  --shadow: none; --shadow-hover: 0 0 0 1px rgba(139, 116, 255, .4), 0 22px 44px -22px rgba(139, 116, 255, .5);
  --sb-bg: #111836; --sb-ink: #f2f3fb; --sb-ink-2: #c3c8e2; --sb-muted: #737a9e; --sb-hover: #1a2248; --sb-line: rgba(255, 255, 255, .07); --sb-card: #18204a;
  color-scheme: dark;
}
body, :root[data-theme="dark"] body, :root:not([data-theme="light"]) body, :root[data-theme="light"] body {
  background: radial-gradient(520px 340px at 100% 0%, rgba(166, 79, 240, .10), transparent 70%), radial-gradient(480px 320px at 0% 100%, rgba(169, 220, 245, .18), transparent 70%), var(--bg);
  background-attachment: fixed; font-family: var(--font); font-size: 14.5px; }

/* headlines: navy Poppins, a soft violet second line */
h1, h2, h3, .pw-head h1, .page-title h1 { font-family: var(--font-display) !important; font-weight: 600 !important; letter-spacing: -.02em !important; color: var(--ink) !important;
  background: none !important; -webkit-text-fill-color: currentColor !important; }
h1 .h-dim, #home-hello .h-dim { display: block; font-weight: 400; color: var(--muted) !important; -webkit-text-fill-color: var(--muted) !important; }
.pw-kicker, .adm-kicker, .hx-eyebrow { background: var(--brand-soft) !important; color: var(--brand-2) !important; border: 0 !important; font-weight: 500 !important; }
.pw-kicker::before, .adm-kicker::before, .hx-eyebrow::before { background: var(--grad) !important; box-shadow: none !important; }
.link-btn { color: var(--brand-2); }

/* cards: white, rounded, soft shadow */
.card, .panel, .pw-pane, .tile, :root:not([data-theme="light"]) .card, :root:not([data-theme="light"]) .panel, :root:not([data-theme="light"]) .pw-pane {
  background: var(--panel) !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow) !important; }
.card:hover, .jr-card:hover, .ex-card:hover, .tile:hover, .hr-form:hover { box-shadow: var(--shadow-hover) !important; transform: translateY(-2px); }
.hr-form { background: var(--panel) !important; border: 1px solid var(--line) !important; }
input, select, textarea { background: var(--panel) !important; border: 1px solid var(--line) !important; color: var(--ink) !important; }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: var(--panel-2) !important; }
input:focus, select:focus, textarea:focus { border-color: var(--brand-2) !important; box-shadow: 0 0 0 3px var(--brand-soft) !important; }

/* buttons: navy pill main action, quiet outline others */
.btn { font-family: var(--font); font-weight: 500; background: var(--panel); border: 1px solid var(--line); color: var(--ink); }
.btn:hover { background: var(--panel-2); border-color: color-mix(in srgb, var(--brand-2) 40%, var(--line)); color: var(--ink); }
.btn.primary, :root[data-theme="dark"] .btn.primary, :root[data-theme="light"] .btn.primary { background: var(--navy, #1f2d55); border-color: var(--navy, #1f2d55); color: #fff; box-shadow: 0 10px 22px -12px rgba(31, 45, 85, .7) !important; }
:root[data-theme="dark"] .btn.primary { background: var(--brand); border-color: var(--brand); }
.btn.primary:hover { background: #2c3d70; border-color: #2c3d70; color: #fff; }
:root[data-theme="dark"] .btn.primary:hover { background: var(--brand-2); border-color: var(--brand-2); }

/* sidebar: white, lavender active pill with a gradient marker */
.sidebar { background: var(--sb-bg) !important; border-right: 1px solid var(--sb-line) !important; }
.sb-app-mark { background: var(--grad); box-shadow: 0 8px 18px -8px rgba(106, 76, 240, .7); }
.sb-nav button { color: var(--sb-ink-2); }
.sb-nav button.active, :root[data-theme="dark"] .sb-nav button.active { background: var(--brand-soft); color: var(--ink); box-shadow: none; font-weight: 600; }
.sb-nav button.active svg.ico { stroke: var(--brand-2); }
.sb-nav button.active::before { background: var(--grad) !important; box-shadow: none !important; }
.sb-nav button.active .sb-step { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }
.sb-foot .avatar, .fs-add { background: var(--grad); }
.fs-btn { background: var(--sb-card); border: 1px solid var(--sb-line); }
.fs-text small { color: var(--brand-2) !important; }

/* Dashboard hero: white header block with fluid gradient artwork on the right (blobs + orange stripes) */
.hx-head { background: var(--panel) !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow) !important; color: var(--ink) !important; text-align: left !important;
  padding: 40px 40% 40px 40px !important; min-height: 280px; overflow: hidden; isolation: isolate; }
.hx-head::before { content: "" !important; position: absolute; z-index: 0; top: -60px !important; right: -40px !important; left: auto !important; bottom: auto !important; width: 46%; height: 140%;
  transform: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 0 0 46% / 0 0 0 40%;
  background: radial-gradient(60% 55% at 70% 35%, #ff5fb8 0%, transparent 60%), radial-gradient(70% 60% at 30% 70%, #6a4cf0 0%, transparent 65%), radial-gradient(60% 60% at 80% 85%, #4fc3f7 0%, transparent 60%), linear-gradient(140deg, #8a5cf6, #5b3fe0) !important; }
.hx-head::after { content: "" !important; position: absolute; z-index: 1; right: 30% !important; bottom: -30px !important; left: auto !important; top: auto !important; width: 160px; height: 160px; transform: rotate(-12deg) !important;
  border-radius: 28px; background: var(--stripes) !important; -webkit-mask: none !important; mask: none !important; filter: none !important; opacity: .95; animation: none !important;
  box-shadow: 0 18px 40px -18px rgba(255, 138, 31, .7); }
.hx-head > * { position: relative; z-index: 2; }
.hx-head h1, #home-hello { color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; font-size: clamp(28px, 3.4vw, 44px) !important; }
.hx-head .muted, #home-sub { color: var(--ink-2) !important; text-shadow: none !important; margin-left: 0 !important; max-width: 520px; }
.hx-head .hx-date { color: var(--brand-2) !important; font-weight: 500; }
.hx-actions { justify-content: flex-start !important; }
.hx-actions .btn { background: var(--panel) !important; border: 1px solid var(--line) !important; color: var(--ink) !important; }
.hx-actions .btn:hover { background: var(--panel-2) !important; }
.hx-head #qa-upload { background: var(--navy, #1f2d55) !important; border-color: var(--navy, #1f2d55) !important; color: #fff !important; box-shadow: 0 12px 26px -12px rgba(31, 45, 85, .7) !important; }
:root[data-theme="dark"] .hx-head #qa-upload { background: var(--brand) !important; border-color: var(--brand) !important; }
.hx-head .new-dot { background: var(--grad); color: #fff; }
@media (max-width: 760px) { .hx-head { padding: 28px 20px 150px !important; } .hx-head::before { top: auto !important; bottom: -80px !important; right: -20px !important; width: 70%; height: 200px; } .hx-head::after { right: 46% !important; bottom: -50px !important; width: 110px; height: 110px; } }

/* process guide: lilac→sky gradient panel with navy text (the template's soft banners) */
.flow { background: var(--panel) !important; }
.flow-next, .flow-next.done { background: var(--panel-grad) !important; border: 0 !important; color: var(--ink) !important; }
.flow-next .fn-body b { color: var(--ink) !important; font-weight: 600; }
.flow-next .fn-body small { color: var(--ink-2) !important; }
.fn-badge { background: rgba(255, 255, 255, .7) !important; color: var(--brand-2) !important; }
.flow-next .btn.primary, :root[data-theme="dark"] .flow-next .btn.primary, :root[data-theme="light"] .flow-next .btn.primary { background: var(--navy, #1f2d55) !important; border-color: var(--navy, #1f2d55) !important; color: #fff !important; box-shadow: none !important; }
:root[data-theme="dark"] .flow-next .btn.primary { background: #fff !important; border-color: #fff !important; color: #1f2d55 !important; }
:root[data-theme="dark"] .flow-next .fn-body b, :root[data-theme="dark"] .flow-next .fn-body small { color: #fff !important; }
.flow-steps > li.now:not(.done) .fl-dot { background: var(--grad) !important; box-shadow: 0 0 0 5px var(--brand-soft) !important; }
.flow-steps > li.now:not(.done) .fl-txt small { color: var(--brand-2); }
.flow-steps > li.here > button::before { background: var(--grad) !important; }
.jr-card.current { box-shadow: 0 0 0 2px rgba(106, 76, 240, .45), var(--shadow-hover) !important; }
.jr-num, #jr-c1 .jr-num, #jr-c2 .jr-num, #jr-c3 .jr-num, #jr-c4 .jr-num { background: var(--navy, #1f2d55) !important; color: #fff !important; border-radius: 50% !important; }
.jr-card.current .jr-num, .pw-num, .pw-steps li.on i { background: var(--grad) !important; color: #fff; }
.pw-steps li.on button { border-color: rgba(106, 76, 240, .5) !important; }

/* numbers and progress */
.hr-sum-main b, .hx-ring b, #hx-pct { color: var(--brand-2) !important; }
.hr-bar .ok { background: var(--grad) !important; }
.hr-sum { background: var(--panel-grad) !important; border: 0 !important; }
.hr-sum-main span, .hr-sum-legend { color: var(--ink-2) !important; }
.hr-no { background: var(--brand-soft) !important; color: var(--brand-2) !important; }
.hr-tabs button.on { background: var(--navy, #1f2d55) !important; color: #fff; box-shadow: none !important; }
:root[data-theme="dark"] .hr-tabs button.on { background: var(--brand) !important; }
.ex-ic { background: var(--grad) !important; filter: none !important; color: #fff; border-radius: 50% !important; }

/* AI assistant */
.ai-fab { background: var(--navy, #1f2d55) !important; box-shadow: 0 16px 34px -14px rgba(31, 45, 85, .75) !important; }
.ai-fab:hover { background: #2c3d70 !important; }
.ai-fab-ic { background: var(--grad) !important; }
.ai-fab-ic svg circle, .ai-fab:hover .ai-fab-ic svg circle { fill: #fff !important; }
.ai-head { background: var(--panel-grad) !important; color: var(--ink) !important; }
.ai-avatar, .ai-send { background: var(--grad) !important; }
.ai-msg.user .ai-bubble, :root[data-theme="dark"] .ai-msg.user .ai-bubble { background: var(--navy, #1f2d55) !important; color: #fff; }

/* isometric scene: violet / pink / orange */
.roof-l { fill: #6a4cf0; } .roof-r { fill: #a64ff0; }
.drawer .f-r, .drawer .f-t, .drawer .f-l { fill: #ff8a1f; }
.iso-isle.on .slab .f-l { fill: #b9a6f8; } .iso-isle.on .slab .f-r { fill: #d6cbfb; }
:root[data-theme="dark"] .iso-isle.on .slab .f-l { fill: #3b2f86; } :root[data-theme="dark"] .iso-isle.on .slab .f-r { fill: #4b3fa0; }
.iso-badge .b-num { fill: #6a4cf0; }
.iso-isle.now .iso-badge rect { fill: #1f2d55; stroke: #6a4cf0; }
.signal circle { stroke: #ff5fb8; }
.iso-dots button.on { background: var(--grad) !important; }

/* sign-in: the artwork panel – violet blobs and orange stripes */
.auth-art { background: radial-gradient(55% 45% at 75% 25%, #ff5fb8, transparent 65%), radial-gradient(65% 55% at 25% 75%, #6a4cf0, transparent 70%), radial-gradient(45% 45% at 85% 90%, #4fc3f7, transparent 65%), linear-gradient(140deg, #8a5cf6, #4b33c9) !important; }
.auth-art::after { content: "" !important; left: auto !important; right: 12% !important; bottom: 10% !important; width: 150px !important; height: 150px !important; transform: rotate(-12deg) !important; border-radius: 26px !important;
  background: var(--stripes) !important; -webkit-mask: none !important; mask: none !important; filter: none !important; }
.auth-art .aa-logo i svg { fill: #6a4cf0; }
.auth-page .auth-card .btn.primary { background: var(--navy, #1f2d55) !important; border-color: var(--navy, #1f2d55) !important; }
.auth-page .auth-card h2 { background: none !important; -webkit-text-fill-color: var(--ink) !important; color: var(--ink) !important; }

/* softer motion */
.tab.active > * { animation-duration: .4s; }

/* v15: the same gradients in dark mode (the previous layer set orange ones specifically for dark) */
:root[data-theme="dark"] {
  --navy: #1f2d55; --violet: #8b74ff; --pink: #ff5fb8; --orange: #ff8a1f; --yellow: #ffc83d;
  --grad: linear-gradient(120deg, #6a4cf0 0%, #a64ff0 45%, #ff5fb8 100%);
  --grad-warm: linear-gradient(120deg, #ff8a1f 0%, #ffc83d 100%);
  --stripes: repeating-linear-gradient(-55deg, #ff8a1f 0 14px, #ffb02e 14px 22px, #ffc83d 22px 34px, #ff9a3c 34px 40px);
  --head-fade: none; --dots: none;
}

/* =====================================================================================================
   Process guide v15: a connected stepper – badge on top, name + status centred underneath (never cut off),
   one progress line through the badges that fills with the gradient up to the current step.
   ===================================================================================================== */
.flow { padding: 22px 18px 14px !important; }
.flow-steps { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 0 !important; align-items: start; }
.flow-steps > li { position: relative; display: flex !important; flex-direction: column; align-items: center; text-align: center; padding: 0 4px !important; min-width: 0; }
.flow-steps > li > button, .flow-steps > li:not(:has(button)) { all: unset; box-sizing: border-box; display: flex !important; flex-direction: column; align-items: center; gap: 10px;
  width: 100%; padding: 12px 8px 12px !important; border-radius: 18px; text-align: center; position: relative; z-index: 1; }
.flow-steps > li > button { cursor: pointer; transition: background .15s; }
.flow-steps > li > button:hover { background: var(--panel-2); }
.flow-steps > li > button:hover .fl-txt b { color: var(--brand-2); }
/* the line between badges (from this badge to the next) */
.flow-steps > li::before { display: none !important; }
.flow-steps > li:not(:last-child)::after { content: "" !important; display: block !important; position: absolute; z-index: 0; top: 33px; left: calc(50% + 28px); right: calc(-50% + 28px);
  height: 4px; margin: 0; border-radius: 99px; background: var(--line); }
.flow-steps > li.done:not(:last-child)::after { background: var(--grad); }
/* badges */
.fl-dot { width: 44px !important; height: 44px !important; border-radius: 50% !important; border: 2px solid var(--line) !important; background: var(--panel) !important; color: var(--muted) !important;
  font: 600 15px/1 var(--font-display) !important; display: grid; place-items: center; box-shadow: 0 4px 12px -8px rgba(31, 45, 85, .4); }
.fl-dot svg { width: 16px; height: 16px; }
.flow-steps > li.done .fl-dot { background: var(--grad) !important; border-color: transparent !important; color: #fff !important; }
.flow-steps > li.now:not(.done) .fl-dot { background: var(--panel) !important; border: 3px solid var(--brand-2) !important; color: var(--brand-2) !important;
  box-shadow: 0 0 0 6px var(--brand-soft) !important; animation: flowPulse 2.4s ease-in-out infinite; }
.flow-steps > li.warn .fl-dot { border-color: var(--warn) !important; color: var(--warn) !important; background: var(--warn-soft) !important; }
.flow-steps > li.bad .fl-dot { border-color: var(--bad) !important; color: var(--bad) !important; background: var(--bad-soft) !important; }
/* text: full, centred, up to two lines */
.fl-txt { display: grid !important; justify-items: center; gap: 2px; min-width: 0; }
.fl-txt b { font: 600 14px/1.25 var(--font-display) !important; color: var(--ink) !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
.fl-txt small { font-size: 12px !important; line-height: 1.35; color: var(--muted) !important; white-space: normal !important; overflow: hidden !important; text-overflow: clip !important;
  display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 210px; }
.flow-steps > li.done .fl-txt small { color: var(--ok) !important; }
.flow-steps > li.now:not(.done) .fl-txt small { color: var(--brand-2) !important; font-weight: 500; }
.flow-steps > li.bad .fl-txt small { color: var(--bad) !important; }
.flow-steps > li.warn .fl-txt small { color: var(--warn) !important; }
/* the page you are on: a soft card with a centred tag */
.flow-steps > li.here > button { background: var(--brand-soft) !important; box-shadow: none !important; }
.flow-steps > li.here > button::before { content: "You are here" !important; position: absolute !important; top: -9px !important; left: 50% !important; transform: translateX(-50%);
  background: var(--grad) !important; color: #fff !important; font: 600 10.5px/1 var(--font) !important; letter-spacing: 0 !important; text-transform: none !important;
  padding: 4px 9px !important; border-radius: 999px !important; white-space: nowrap; order: 0 !important; margin: 0 !important; }
/* phones: a vertical list – badge left, text right, the line runs down */
@media (max-width: 760px) {
  .flow-steps { grid-template-columns: minmax(0, 1fr) !important; }
  .flow-steps > li { align-items: stretch; padding: 0 !important; }
  .flow-steps > li > button, .flow-steps > li:not(:has(button)) { flex-direction: row; text-align: left; gap: 14px; padding: 10px !important; }
  .fl-txt { justify-items: start; }
  .fl-txt small { display: -webkit-box !important; max-width: none; }
  .flow-steps > li:not(:last-child)::after { top: 56px; bottom: -8px; left: 30px; right: auto; width: 4px; height: auto; }
  .flow-steps > li.here > button::before { position: static !important; transform: none; margin-left: auto !important; order: 9 !important; }
}


/* =====================================================================================================
   Theme v17 – "Clinical Teal": a calm, professional healthcare look. Deep teal for actions and progress, coral
   for problems, amber for warnings, on a soft off-white page; dark-teal sidebar; clean white cards with soft
   shadows; Manrope. Top progress bar = segmented track with a completion percentage.
   Light by default; dark = deep green-black with the same teal. (Previous looks: backups/ui-v18, ui-v19)
   ===================================================================================================== */
:root, :root[data-theme="light"] {
  --bg: #f4f7f6; --panel: #ffffff; --panel-solid: #ffffff; --panel-2: #eff4f3; --glass: #ffffff; --glass-line: #e1e8e6;
  --ink: #0f2a2a; --ink-2: #34504e; --muted: #667b79; --line: #e1e8e6; --line-2: #edf2f1;
  --brand: #0f766e; --brand-2: #0d9488; --brand-ink: #ffffff; --brand-soft: #e0f3ef; --teal-dark: #0b3b3a;
  --coral: #e5533d; --amber: #d98a06;
  --grad: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%); --panel-grad: #e0f3ef; --mesh: #e0f3ef;
  --ok: #0f8a5f; --ok-soft: #e1f5ec; --warn: #b9740a; --warn-soft: #fdf1dc; --bad: #d4432f; --bad-soft: #fde9e5;
  --info: #0f766e; --info-soft: #e0f3ef; --na: #7b8b89; --na-soft: #eef2f1; --missing: #5b6f6d; --missing-soft: #eef2f1;
  --red: #d4432f; --yellow: #d98a06; --orange: #e5533d; --grey: #eff4f3;
  --r-lg: 20px; --r: 16px; --r-sm: 10px;
  --shadow: 0 1px 2px rgba(15, 42, 42, .05), 0 10px 26px -18px rgba(15, 42, 42, .22);
  --shadow-hover: 0 2px 4px rgba(15, 42, 42, .06), 0 18px 38px -20px rgba(15, 118, 110, .35); --shadow-lg: 0 30px 70px -30px rgba(15, 42, 42, .35);
  --font: "Manrope", "Segoe UI", system-ui, sans-serif; --font-display: "Manrope", "Segoe UI", system-ui, sans-serif;
  --head-fade: none; --dots: none; --stripes: none;
  --sb-bg: #0b3b3a; --sb-ink: #ffffff; --sb-ink-2: #cfe3e0; --sb-muted: #8fb3ae; --sb-hover: rgba(255, 255, 255, .08); --sb-line: rgba(255, 255, 255, .1); --sb-card: rgba(255, 255, 255, .08);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0a1514; --panel: #10201f; --panel-solid: #10201f; --panel-2: #152a28; --glass: #10201f; --glass-line: rgba(255, 255, 255, .08);
  --ink: #eef6f4; --ink-2: #c3d6d3; --muted: #8aa29f; --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .05);
  --brand: #14b8a6; --brand-2: #2dd4bf; --brand-ink: #062320; --brand-soft: rgba(20, 184, 166, .14); --teal-dark: #072624;
  --coral: #f47a66; --amber: #f2b33d;
  --grad: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%); --panel-grad: rgba(20, 184, 166, .12); --mesh: rgba(20, 184, 166, .12);
  --ok: #34d399; --ok-soft: rgba(52, 211, 153, .12); --warn: #f2b33d; --warn-soft: rgba(242, 179, 61, .12); --bad: #f47a66; --bad-soft: rgba(244, 122, 102, .13);
  --info: #2dd4bf; --info-soft: rgba(45, 212, 191, .12); --na: #8aa29f; --na-soft: rgba(138, 162, 159, .12);
  --red: #f47a66; --yellow: #f2b33d; --orange: #f47a66; --grey: #152a28;
  --navy: #14b8a6; --violet: #14b8a6; --pink: #f47a66;
  --head-fade: none; --dots: none; --stripes: none;
  --shadow: 0 1px 0 rgba(255, 255, 255, .03), 0 12px 30px -20px rgba(0, 0, 0, .8); --shadow-hover: 0 0 0 1px rgba(45, 212, 191, .35), 0 18px 38px -22px rgba(20, 184, 166, .45);
  --sb-bg: #072624; --sb-ink: #ffffff; --sb-ink-2: #c3d6d3; --sb-muted: #7f9e9a; --sb-hover: rgba(255, 255, 255, .06); --sb-line: rgba(255, 255, 255, .08); --sb-card: rgba(255, 255, 255, .06);
  color-scheme: dark;
}
:root[data-theme="light"] .sidebar, :root:not([data-theme="dark"]) .sidebar { --sb-bg: #0b3b3a; --sb-ink: #ffffff; --sb-ink-2: #cfe3e0; --sb-muted: #8fb3ae; --sb-hover: rgba(255, 255, 255, .08); --sb-line: rgba(255, 255, 255, .1); --sb-card: rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .sidebar { --sb-bg: #072624; --sb-ink: #ffffff; --sb-ink-2: #c3d6d3; --sb-muted: #7f9e9a; --sb-hover: rgba(255, 255, 255, .06); --sb-line: rgba(255, 255, 255, .08); --sb-card: rgba(255, 255, 255, .06); }
body, :root[data-theme="dark"] body, :root:not([data-theme="light"]) body, :root[data-theme="light"] body { background: var(--bg) !important; font-family: var(--font) !important; font-size: 15px; color: var(--ink); }
body, input, select, textarea, button { font-family: var(--font) !important; }

/* typography: Manrope, ink; the second headline line in teal */
h1, h2, h3, .pw-head h1, .page-title h1 { font-family: var(--font-display) !important; font-weight: 700 !important; letter-spacing: -.02em !important; color: var(--ink) !important;
  background: none !important; -webkit-text-fill-color: currentColor !important; }
h2 { font-size: 18px !important; }
h1 .h-dim, #home-hello .h-dim { display: block !important; font-weight: 600 !important; color: var(--brand) !important; -webkit-text-fill-color: var(--brand) !important; background: none !important; padding: 0 !important; }
h1 .h-dim mark, #home-hello .h-dim mark { background: none !important; color: inherit !important; -webkit-text-fill-color: inherit !important; padding: 0 !important; }
.pw-kicker, .adm-kicker, .hx-eyebrow { background: var(--brand-soft) !important; color: var(--brand) !important; border: 0 !important; border-radius: 999px !important; padding: 4px 11px !important;
  font: 700 11.5px/1.2 var(--font) !important; letter-spacing: .04em !important; text-transform: uppercase !important; }
.pw-kicker::before, .adm-kicker::before, .hx-eyebrow::before { content: "" !important; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--brand) !important; margin-right: 7px; vertical-align: 1px; box-shadow: none !important; }
.link-btn { color: var(--brand) !important; font-weight: 600; text-decoration: none; }
.link-btn:hover { text-decoration: underline; }
.muted { color: var(--muted); }

/* surfaces: white cards, soft shadow, thin border */
.card, .panel, .pw-pane, .tile, .hr-form, .ex-card, dialog, .fs-pop, .menu-pop,
:root:not([data-theme="light"]) .card, :root:not([data-theme="light"]) .panel, :root:not([data-theme="light"]) .pw-pane {
  background: var(--panel) !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow) !important; border-radius: var(--r) !important; }
.card, .tile, .hr-form, .ex-card { transition: box-shadow .18s, transform .18s !important; }
.card:hover, .jr-card:hover, .ex-card:hover, .tile:hover, .hr-form:hover { box-shadow: var(--shadow-hover) !important; transform: translateY(-2px) !important; }
.tl, .hx-mini > div, .facts li, .rm-row, .pend, .pw-facts > div, .doc-dates, .hr-sync, .hr-cross-note { background: var(--panel-2) !important; border: 1px solid var(--line) !important; border-radius: 12px !important; }
input, select, textarea, :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea {
  background: var(--panel) !important; border: 1px solid var(--line) !important; border-radius: 10px !important; color: var(--ink) !important; }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: var(--panel-2) !important; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand) !important; box-shadow: 0 0 0 3px var(--brand-soft) !important; }
table th { background: var(--panel-2); color: var(--muted) !important; }
.tag, .jr-state, .pp-badge, .sb-badge, .scope { border-radius: 999px !important; font-weight: 600; }

/* buttons: teal main action, white secondary */
.btn, .hx-actions .btn { font: 600 14px/1 var(--font) !important; border-radius: 10px !important; background: var(--panel) !important; border: 1px solid var(--line) !important; color: var(--ink) !important;
  padding: 10px 16px; box-shadow: 0 1px 2px rgba(15, 42, 42, .05) !important; }
.btn:hover, .hx-actions .btn:hover { background: var(--panel-2) !important; border-color: color-mix(in srgb, var(--brand) 35%, var(--line)) !important; transform: none !important; }
.btn.primary, :root[data-theme="dark"] .btn.primary, :root[data-theme="light"] .btn.primary, .flow-next .btn.primary,
:root[data-theme="dark"] .flow-next .btn.primary, :root[data-theme="light"] .flow-next .btn.primary {
  background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; box-shadow: 0 6px 16px -8px rgba(15, 118, 110, .7) !important; }
:root[data-theme="dark"] .btn.primary, :root[data-theme="dark"] .flow-next .btn.primary { color: #062320 !important; }
.btn.primary:hover, .flow-next .btn.primary:hover { background: #0b5f58 !important; border-color: #0b5f58 !important; color: #fff !important; }
:root[data-theme="dark"] .btn.primary:hover { background: var(--brand-2) !important; color: #062320 !important; }
.btn.small { padding: 7px 12px; border-radius: 9px !important; font-size: 13px !important; }
.icon-btn { border-radius: 9px !important; }

/* sidebar: dark teal panel, white text, the current page as a white pill */
.sidebar { background: var(--sb-bg) !important; border-right: 0 !important; }
.sb-app-mark { background: #14b8a6 !important; box-shadow: none !important; border-radius: 10px !important; }
.sb-app-mark svg { fill: #ffffff !important; }
.sb-app-name b { font: 800 16px/1.15 var(--font) !important; color: #fff !important; }
.sb-app-name small, .sb-label { color: var(--sb-muted) !important; }
.sb-nav button, :root[data-theme="dark"] .sb-nav button:not(.active) { border-radius: 10px !important; color: var(--sb-ink-2) !important; border: 0 !important; font-weight: 600 !important; }
.sb-nav button svg.ico { stroke: currentColor; }
.sb-nav button:hover { background: var(--sb-hover) !important; color: #fff !important; }
.sb-nav button.active, :root[data-theme="dark"] .sb-nav button.active { background: #ffffff !important; color: #0b3b3a !important; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .6) !important; border: 0 !important; }
:root[data-theme="dark"] .sb-nav button.active { background: #14b8a6 !important; color: #062320 !important; }
.sb-nav button.active svg.ico { stroke: currentColor !important; }
.sb-nav button.active::before { content: none !important; }
.sb-step { border-radius: 999px !important; border: 1px solid var(--sb-line) !important; color: var(--sb-muted) !important; background: transparent !important; }
.sb-nav button.active .sb-step { background: #0f766e !important; border-color: #0f766e !important; color: #fff !important; }
:root[data-theme="dark"] .sb-nav button.active .sb-step { background: #062320 !important; border-color: #062320 !important; color: #2dd4bf !important; }
.fs-btn { background: var(--sb-card) !important; border: 1px solid var(--sb-line) !important; border-radius: 14px !important; box-shadow: none !important; }
.fs-text b, #side-fac-name { color: #fff !important; }
.fs-text small, #side-fac-code { color: #8fe0d4 !important; }
.fs-logo, .sb-foot .avatar, .fs-add { background: #14b8a6 !important; color: #062320 !important; }
.logo-fallback, #logo-fallback { color: #062320 !important; -webkit-text-fill-color: #062320 !important; }
.theme-switch { background: var(--sb-card) !important; border-color: var(--sb-line) !important; }
.theme-switch button { color: var(--sb-ink-2) !important; }
.theme-switch button.active, :root[data-theme="dark"] .theme-switch button.active { background: #ffffff !important; color: #0b3b3a !important; }
.user-menu > summary, .who b { color: #fff !important; }
.who small { color: var(--sb-muted) !important; }

/* Dashboard hero: teal gradient with a soft medical-cross pattern, white text */
.hx-head { background: radial-gradient(120% 140% at 100% 0%, rgba(20, 184, 166, .55), transparent 55%), linear-gradient(135deg, #0b3b3a 0%, #0f766e 100%) !important;
  border: 0 !important; box-shadow: var(--shadow-lg) !important; border-radius: var(--r-lg) !important; color: #fff !important; text-align: left !important;
  padding: 40px 38% 40px 40px !important; min-height: 270px; overflow: hidden; isolation: isolate; }
.hx-head::before { content: "" !important; position: absolute; z-index: 0; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: 46% !important; height: auto !important;
  transform: none !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M24 18h8v6h6v8h-6v6h-8v-6h-6v-8h6z' fill='%23ffffff' fill-opacity='.14'/%3E%3C/svg%3E") 0 0 / 56px 56px !important;
  -webkit-mask: linear-gradient(90deg, transparent, #000 40%) !important; mask: linear-gradient(90deg, transparent, #000 40%) !important; }
.hx-head::after { content: "" !important; position: absolute; z-index: 1; top: 50% !important; right: 9% !important; left: auto !important; bottom: auto !important; width: 150px !important; height: 150px !important;
  margin-top: -75px; transform: none !important; border-radius: 36px !important; opacity: 1 !important; animation: none !important; filter: none !important;
  -webkit-mask: none !important; mask: none !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5z' fill='%23ffffff'/%3E%3Cpath d='m8.5 12 2.4 2.4 4.6-4.8' fill='none' stroke='%230f766e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 64px no-repeat, rgba(255, 255, 255, .14) !important;
  box-shadow: 0 0 0 14px rgba(255, 255, 255, .06), 0 0 0 30px rgba(255, 255, 255, .04) !important; }
.hx-head > * { position: relative; z-index: 2; }
.hx-head h1, #home-hello { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-size: clamp(28px, 3.4vw, 44px) !important; line-height: 1.12 !important; }
.hx-head #home-hello .h-dim { color: #99f6e4 !important; -webkit-text-fill-color: #99f6e4 !important; }
.hx-head .muted, #home-sub { color: rgba(255, 255, 255, .85) !important; text-shadow: none !important; max-width: 520px; margin: 12px 0 0 !important; }
.hx-head .hx-date { color: #99f6e4 !important; font-weight: 700; letter-spacing: .02em; }
.hx-actions { justify-content: flex-start !important; gap: 10px !important; margin-top: 24px !important; }
.hx-actions .btn { background: rgba(255, 255, 255, .12) !important; border: 1px solid rgba(255, 255, 255, .28) !important; color: #fff !important; box-shadow: none !important; }
.hx-actions .btn:hover { background: rgba(255, 255, 255, .2) !important; }
.hx-head #qa-upload, :root[data-theme="dark"] .hx-head #qa-upload { background: #ffffff !important; border-color: #ffffff !important; color: #0b3b3a !important; }
.hx-head #qa-upload:hover { background: #e6fffa !important; }
.hx-head .new-dot { background: #fbbf24 !important; color: #3b2600 !important; border: 0 !important; }
@media (max-width: 860px) { .hx-head { padding: 28px 22px 28px !important; } .hx-head::after { display: none !important; } .hx-head::before { width: 100% !important; } }

/* step cards: white, one coloured accent strip on top each */
.jr-card, #jr-c1, #jr-c2, #jr-c3, #jr-c4 { background: var(--panel) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-top: 4px solid var(--brand) !important; border-radius: var(--r) !important; padding: 22px !important; }
#jr-c2 { border-top-color: #14b8a6 !important; } #jr-c3 { border-top-color: #0b3b3a !important; } #jr-c4 { border-top-color: #94a3b8 !important; }
:root[data-theme="dark"] #jr-c3 { border-top-color: #2dd4bf !important; }
.jr-num, #jr-c1 .jr-num, #jr-c2 .jr-num, #jr-c3 .jr-num, #jr-c4 .jr-num { background: var(--brand-soft) !important; color: var(--brand) !important; border-radius: 12px !important; border: 0 !important; }
.jr-card.current { box-shadow: 0 0 0 2px var(--brand), var(--shadow-hover) !important; }
.jr-card.current .jr-num { background: var(--brand) !important; color: #fff !important; }
.jr-head h2, .card > h2, .hr-sec-head h2 { background: none !important; padding: 0 !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; display: block !important; }
.jr-state.done, .tag.ok { background: var(--ok-soft) !important; color: var(--ok) !important; }
.jr-track button { border: 1px solid var(--line) !important; border-radius: 14px !important; background: var(--panel) !important; box-shadow: var(--shadow) !important; }
.jr-track li.current button { border-color: var(--brand) !important; box-shadow: 0 0 0 2px var(--brand-soft) !important; }
.hx-strip { background: var(--panel-2) !important; border: 1px solid var(--line) !important; border-radius: 14px !important; }
.hx-ring b, #hx-pct { color: var(--brand) !important; }
.tone-bad #hx-verdict { color: var(--bad) !important; } .tone-warn #hx-verdict { color: var(--warn) !important; }

/* HR / documents */
.hr-form { background: var(--panel) !important; border-radius: 14px !important; }
.hr-no { background: var(--brand-soft) !important; color: var(--brand) !important; border: 0 !important; border-radius: 999px !important; }
.hr-sum { background: linear-gradient(135deg, #0b3b3a, #0f766e) !important; color: #fff !important; border: 0 !important; }
.hr-sum-main b { color: #ffffff !important; }
.hr-sum-main span, .hr-sum-legend, .hr-sum .ok, .hr-sum .warn, .hr-sum .na { color: #cfe3e0 !important; }
.hr-bar { background: rgba(255, 255, 255, .18) !important; } .hr-bar .ok { background: #5eead4 !important; }
.hr-tabs button { border: 1px solid var(--line) !important; border-radius: 999px !important; background: var(--panel) !important; color: var(--ink-2) !important; }
.hr-tabs button.on, :root[data-theme="dark"] .hr-tabs button.on { background: var(--brand) !important; color: #fff !important; border-color: var(--brand) !important; box-shadow: none !important; }
:root[data-theme="dark"] .hr-tabs button.on { color: #062320 !important; }
.hr-tabs button.on small { color: inherit !important; opacity: .85; }
.hr-status.ok { background: var(--ok-soft) !important; color: var(--ok) !important; }
.ex-ic { background: var(--brand-soft) !important; border: 0 !important; border-radius: 14px !important; filter: none !important; }
.pp-code { background: var(--brand-soft) !important; color: var(--brand) !important; border-radius: 999px !important; }
.status-bar button.active, .status-bar button.active * { background: var(--brand) !important; color: #fff !important; border-color: var(--brand) !important; }
:root[data-theme="dark"] .status-bar button.active, :root[data-theme="dark"] .status-bar button.active * { color: #062320 !important; }
#subtabs button.active, :root[data-theme="dark"] #subtabs button.active, .viewswitch button.on, :root[data-theme="dark"] .viewswitch button.on { background: var(--brand) !important; color: #fff !important; }
:root[data-theme="dark"] #subtabs button.active, :root[data-theme="dark"] .viewswitch button.on { color: #062320 !important; }
.pp-pic span, .np-pic span { color: #4b5d5b !important; }
.pw-num, .pw-steps li.on i { background: var(--brand) !important; color: #fff !important; border: 0 !important; }
.pw-steps li.on button { border-color: var(--brand) !important; box-shadow: 0 0 0 3px var(--brand-soft) !important; background: var(--panel) !important; }
.pw-steps li.done i { background: var(--ok-soft) !important; color: var(--ok) !important; }

/* AI assistant */
.ai-fab { background: #0b3b3a !important; color: #fff !important; border-radius: 999px !important; box-shadow: 0 14px 30px -12px rgba(11, 59, 58, .7) !important; }
.ai-fab:hover { background: #0f766e !important; }
.ai-fab-ic { background: #14b8a6 !important; }
.ai-fab-ic svg circle, .ai-fab:hover .ai-fab-ic svg circle { fill: #ffffff !important; }
.ai-panel { border: 1px solid var(--line) !important; box-shadow: var(--shadow-lg) !important; border-radius: 20px !important; }
.ai-head { background: linear-gradient(135deg, #0b3b3a, #0f766e) !important; color: #fff !important; }
.ai-head * { color: #fff; }
.ai-avatar, .ai-send { background: #14b8a6 !important; color: #062320 !important; }
.ai-msg.user .ai-bubble, :root[data-theme="dark"] .ai-msg.user .ai-bubble { background: var(--brand) !important; color: #fff !important; }
:root[data-theme="dark"] .ai-msg.user .ai-bubble { color: #062320 !important; }
.ai-msg.bot .ai-bubble { background: var(--panel-2) !important; border: 1px solid var(--line); }
.toast { background: #0b3b3a !important; color: #fff !important; border: 0 !important; border-radius: 12px !important; }

/* isometric scene in teal */
.roof-l { fill: #0f766e; } .roof-r { fill: #14b8a6; }
.drawer .f-r, .drawer .f-t, .drawer .f-l { fill: #f2b33d; }
.iso-isle.on .slab .f-t { fill: #5eead4 !important; } .iso-isle.on .slab .f-l { fill: #0f766e !important; } .iso-isle.on .slab .f-r { fill: #14b8a6 !important; }
.iso-badge .b-num { fill: #0f766e; }
.iso-isle.now .iso-badge rect { fill: #0f766e; stroke: #5eead4; } .iso-isle.now .iso-badge text { fill: #fff; }
.signal circle { stroke: #14b8a6; }
.iso-dots button.on { background: var(--brand) !important; color: #fff !important; }

/* sign-in */
.auth-art { background: radial-gradient(120% 120% at 100% 0%, rgba(20, 184, 166, .55), transparent 55%), linear-gradient(135deg, #0b3b3a, #0f766e) !important; color: #fff !important; }
.auth-art * { color: #fff; }
.auth-art::after { content: "" !important; left: auto !important; right: 12% !important; bottom: 12% !important; top: auto !important; width: 130px !important; height: 130px !important; border-radius: 34px !important;
  transform: none !important; -webkit-mask: none !important; mask: none !important; filter: none !important; box-shadow: 0 0 0 14px rgba(255, 255, 255, .06) !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5z' fill='%23ffffff'/%3E%3Cpath d='m8.5 12 2.4 2.4 4.6-4.8' fill='none' stroke='%230f766e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 56px no-repeat, rgba(255, 255, 255, .14) !important; }
.auth-art h2 { background: none !important; -webkit-text-fill-color: #fff !important; }
.auth-art .aa-label, .auth-art .aa-steps span { background: rgba(255, 255, 255, .12) !important; border: 1px solid rgba(255, 255, 255, .25) !important; }
.auth-art .aa-blocks span { background: rgba(255, 255, 255, .12) !important; border: 1px solid rgba(255, 255, 255, .25) !important; box-shadow: none !important; }
.auth-page .auth-card .btn.primary { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; }
.auth-page .auth-card h2 { -webkit-text-fill-color: var(--ink) !important; color: var(--ink) !important; background: none !important; }

/* =====================================================================================================
   Top progress bar: a segmented track – one bar per step (teal = done, moving stripes = now, coral = problem),
   the step underneath, and the overall completion on the left.
   ===================================================================================================== */
.flow, :root[data-theme="dark"] .flow { background: var(--panel) !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow) !important; border-radius: var(--r) !important;
  padding: 16px 18px 14px !important; color: var(--ink) !important; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 22px; align-items: center; }
.flow-head { display: flex; align-items: center; gap: 12px; padding-right: 22px; border-right: 1px solid var(--line); }
.flow-ring { --p: 0; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(var(--brand) calc(var(--p) * 1%), var(--panel-2) 0); }
.flow-ring b { width: 42px; height: 42px; border-radius: 50%; background: var(--panel); display: grid; place-items: center; font: 800 13px/1 var(--font); color: var(--ink); }
.flow-head-txt { display: grid; gap: 2px; }
.flow-head-txt b { font: 800 14px/1.2 var(--font); color: var(--ink); }
.flow-head-txt small { font-size: 12px; color: var(--muted); }
.flow-steps { grid-column: 2; display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 8px !important; align-items: start; margin: 0 !important; }
.flow-steps > li { display: block !important; padding: 0 !important; text-align: left !important; min-width: 0; position: relative; }
.flow-steps > li::after { display: none !important; }
.flow-steps > li::before { content: "" !important; display: block !important; position: static !important; width: auto !important; height: 7px !important; margin: 0 0 9px !important;
  border: 0 !important; border-radius: 99px !important; transform: none !important; background: var(--panel-2) !important; }
.flow-steps > li.done::before { background: var(--brand) !important; }
.flow-steps > li.now:not(.done)::before { background: repeating-linear-gradient(-45deg, var(--brand) 0 8px, #14b8a6 8px 16px) !important; background-size: 23px 23px !important; animation: segMove 1.2s linear infinite; }
.flow-steps > li.warn::before { background: var(--amber) !important; }
.flow-steps > li.bad::before { background: var(--coral) !important; }
@keyframes segMove { to { background-position: 23px 0; } }
.flow-steps > li > button, .flow-steps > li:not(:has(button)) { all: unset; box-sizing: border-box; display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 9px;
  width: 100%; padding: 6px 6px !important; border-radius: 10px; text-align: left; cursor: default; }
.flow-steps > li > button { cursor: pointer; }
.flow-steps > li > button:hover { background: var(--panel-2) !important; }
.flow-steps > li > button:hover .fl-txt b { color: var(--brand) !important; }
.fl-dot { flex: none; width: 26px !important; height: 26px !important; border-radius: 8px !important; border: 0 !important; display: grid; place-items: center;
  background: var(--panel-2) !important; color: var(--muted) !important; font: 800 12px/1 var(--font) !important; box-shadow: none !important; animation: none !important; }
.fl-dot svg { width: 12px; height: 12px; }
.flow-steps > li.done .fl-dot { background: var(--brand) !important; color: #fff !important; }
.flow-steps > li.now:not(.done) .fl-dot { background: var(--brand-soft) !important; color: var(--brand) !important; box-shadow: inset 0 0 0 2px var(--brand) !important; border: 0 !important; }
.flow-steps > li.bad .fl-dot { background: var(--bad-soft) !important; color: var(--bad) !important; }
.flow-steps > li.warn .fl-dot { background: var(--warn-soft) !important; color: var(--warn) !important; }
.fl-txt { display: grid !important; justify-items: start !important; gap: 1px; min-width: 0; }
.fl-txt b { font: 700 13.5px/1.25 var(--font) !important; color: var(--ink) !important; white-space: normal !important; overflow: visible !important; }
.fl-txt small { font-size: 12px !important; line-height: 1.35; color: var(--muted) !important; white-space: normal !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important; max-width: none !important; }
.flow-steps > li.done .fl-txt small { color: var(--ok) !important; }
.flow-steps > li.now:not(.done) .fl-txt small { color: var(--brand) !important; font-weight: 600; }
.flow-steps > li.bad .fl-txt small { color: var(--bad) !important; font-weight: 600; }
.flow-steps > li.warn .fl-txt small { color: var(--warn) !important; }
.flow-steps > li.here > button { background: var(--brand-soft) !important; box-shadow: none !important; }
.flow-steps > li.here > button::before { content: none !important; display: none !important; }
.flow-steps > li.here .fl-txt b::after { content: "· you are here" !important; margin-left: 6px; font: 700 11px/1 var(--font); color: var(--brand); background: none !important; padding: 0 !important; }
/* the next step: a slim banner under the track */
.flow-next, .flow-next.done, :root[data-theme="dark"] .flow-next { grid-column: 1 / -1; background: var(--panel-2) !important; border: 1px solid var(--line) !important; border-left: 4px solid var(--brand) !important;
  border-radius: 12px !important; color: var(--ink) !important; padding: 12px 14px !important; }
.flow-next .fn-body b, :root[data-theme="dark"] .flow-next .fn-body b { color: var(--ink) !important; font: 800 15.5px/1.3 var(--font) !important; }
.flow-next .fn-body small, :root[data-theme="dark"] .flow-next .fn-body small { color: var(--ink-2) !important; }
.fn-badge { background: var(--brand) !important; color: #fff !important; border-radius: 999px !important; font: 800 10.5px/1 var(--font) !important; letter-spacing: .05em; text-transform: uppercase; padding: 5px 9px !important; }
:root[data-theme="dark"] .fn-badge { color: #062320 !important; }
@media (max-width: 900px) {
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow-head { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
  .flow-steps { grid-column: 1; grid-template-columns: minmax(0, 1fr) !important; gap: 4px !important; }
  .flow-steps > li { display: grid !important; grid-template-columns: 7px minmax(0, 1fr); gap: 10px; }
  .flow-steps > li::before { height: auto !important; min-height: 38px; margin: 0 !important; }
}
@media (prefers-reduced-motion: reduce) { .flow-steps > li.now:not(.done)::before { animation: none; } }
/* v17 progress bar fixes: no connector lines from the old stepper; Start / Finished (no button) laid out like the others */
.flow-steps > li:not(:last-child)::after, .flow-steps > li::after { display: none !important; content: none !important; }
.flow-steps > li:not(:has(button)) { display: grid !important; grid-template-columns: 26px minmax(0, 1fr); column-gap: 9px; align-items: start; padding: 0 !important; border-radius: 0; }
.flow-steps > li:not(:has(button))::before { grid-column: 1 / -1; }
.flow-steps > li:not(:has(button)) > .fl-dot { margin: 6px 0 0 6px; }
.flow-steps > li:not(:has(button)) > .fl-txt { padding: 6px 6px 6px 3px; }
@media (max-width: 900px) {
  .flow-steps > li:not(:has(button)) { grid-template-columns: 7px 26px minmax(0, 1fr); }
  .flow-steps > li:not(:has(button))::before { grid-column: 1; grid-row: 1; }
}

/* =====================================================================================================
   Dashboard panels v17b: DoH brief, LEGAL REGISTER health (status donut + stat tiles + calendar deadlines),
   certificate cards with a days-left ring.
   ===================================================================================================== */
/* --- DoH card: brief + latest circulars --- */
.doh-brief { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 4px 0 2px; }
.doh-brief:empty { display: none; }
.db-stat { --c: var(--brand); display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); border-top: 3px solid var(--c); }
.db-stat b { font: 800 20px/1 var(--font); color: var(--ink); }
.db-stat span { font-size: 11.5px; color: var(--muted); line-height: 1.25; }
.db-stat.ok { --c: var(--ok); } .db-stat.na { --c: var(--na); } .db-stat.warn { --c: var(--warn); }
.doh-latest { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dl-item { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.dl-date { display: grid; place-items: center; height: 48px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; }
.dl-date b { font: 800 17px/1 var(--font); color: var(--ink); margin-top: 4px; }
.dl-date small { width: 100%; text-align: center; font: 800 9.5px/1.6 var(--font); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--brand); }
:root[data-theme="dark"] .dl-date small { color: #062320; }
.dl-body { display: grid; gap: 3px; min-width: 0; }
.dl-no { font: 700 11px/1 var(--font); color: var(--brand); letter-spacing: .02em; }
.dl-body b { font: 700 13px/1.3 var(--font); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dl-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; color: var(--muted); align-items: center; }
.dl-chip { padding: 2px 8px; border-radius: 999px; font-weight: 700; font-size: 11px; }
.dl-chip.ok { background: var(--ok-soft); color: var(--ok); } .dl-chip.na { background: var(--na-soft); color: var(--na); }
.dl-open { font: 700 12px/1 var(--font); color: var(--brand); text-decoration: none; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); white-space: nowrap; }
.dl-open:hover { border-color: var(--brand); }
@media (max-width: 640px) { .doh-brief { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dl-item { grid-template-columns: 46px minmax(0, 1fr); } .dl-open { grid-column: 2; justify-self: start; } }

/* --- LEGAL REGISTER health: status donut, verdict, four stat tiles --- */
.hx-strip { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; grid-template-areas: "ring verdict" "legend legend" !important; gap: 16px 20px !important;
  padding: 18px !important; align-items: center; background: var(--panel-2) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; }
.hx-ring { grid-area: ring; width: 112px !important; height: 112px !important; border-radius: 50% !important; background: var(--donut, var(--panel-2)) !important; position: relative; display: grid !important; place-items: center;
  box-shadow: none !important; -webkit-mask: none !important; mask: none !important; }
.hx-ring::before, .hx-ring::after { content: none !important; }
.hx-ring > span { width: 80px; height: 80px; border-radius: 50%; background: var(--panel); display: grid !important; place-content: center; text-align: center; gap: 0; box-shadow: inset 0 0 0 1px var(--line); }
.hx-ring b, #hx-pct { font: 800 24px/1 var(--font) !important; color: var(--ink) !important; }
.hx-ring small { font: 700 10px/1.2 var(--font) !important; color: var(--muted) !important; text-transform: uppercase; letter-spacing: .05em; }
.hx-ring small::after { content: " valid"; }
.hx-verdict { grid-area: verdict; display: grid; gap: 6px; }
.hx-verdict b, #hx-verdict { font: 800 19px/1.25 var(--font) !important; }
.hx-verdict p, #hx-hint { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.hx-legend { grid-area: legend; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hx-legend .lg-chip { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 8px;
  padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); transition: border-color .15s, transform .15s; font: 600 12px/1.3 var(--font); color: var(--muted); --c: var(--muted); }
.hx-legend .lg-chip:hover { border-color: var(--brand); transform: translateY(-1px); }
.hx-legend .lg-chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.hx-legend .lg-chip b { grid-column: 1 / -1; order: -1; font: 800 22px/1 var(--font); color: var(--ink); }
.hx-legend .lg-chip.ok { --c: var(--ok); } .hx-legend .lg-chip.warn { --c: var(--warn); } .hx-legend .lg-chip.bad { --c: var(--bad); }
.hx-legend .lg-chip.bad:not(.zero) { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); background: var(--bad-soft); }
.hx-legend .lg-chip.bad:not(.zero) b { color: var(--bad); }
.hx-legend .lg-chip.warn:not(.zero) { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.hx-legend .lg-chip.zero { opacity: .6; }
.hx-bar { display: none !important; }
#overview:not(.more) .jr-card .hx-legend { display: grid !important; }
@media (max-width: 640px) { .hx-strip { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "ring" "verdict" "legend" !important; justify-items: center; text-align: center; } .hx-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } }

/* --- Next deadlines: calendar date + status pill --- */
.hx-timeline { gap: 8px !important; }
.hx-timeline .tl { display: grid !important; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px !important; border-radius: 12px !important;
  background: var(--panel) !important; border: 1px solid var(--line) !important; border-left: 4px solid var(--c, var(--line)) !important; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.hx-timeline .tl:hover { transform: translateX(2px); box-shadow: var(--shadow-hover); }
.hx-timeline .tl.bad { --c: var(--bad); } .hx-timeline .tl.warn { --c: var(--warn); } .hx-timeline .tl.ok { --c: var(--ok); } .hx-timeline .tl.missing { --c: var(--muted); }
.tl .tl-date { display: grid !important; place-items: center; height: 50px; border-radius: 10px; background: var(--panel-2) !important; border: 1px solid var(--line); overflow: hidden; padding: 0 !important; }
.tl .tl-date b { font: 800 18px/1 var(--font) !important; color: var(--ink) !important; margin-top: 5px; }
.tl .tl-date small { width: 100%; text-align: center; font: 800 9.5px/1.7 var(--font) !important; letter-spacing: .05em; text-transform: uppercase; color: #fff !important; background: var(--c, var(--muted)); }
:root[data-theme="dark"] .tl .tl-date small { color: #0a1514 !important; }
.tl .tl-body { display: grid; gap: 4px; min-width: 0; }
.tl .tl-body b { font: 700 13.5px/1.3 var(--font) !important; color: var(--ink) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl .tl-body small { justify-self: start; padding: 2px 9px; border-radius: 999px; font: 700 11.5px/1.5 var(--font) !important; color: var(--c) !important; background: color-mix(in srgb, var(--c) 13%, transparent); }
.tl .tl-go { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--panel-2); color: var(--muted); font-size: 18px; }

/* --- Certificate cards: status chip, days ring, name, date, responsible + action --- */
.hx-mosaic { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; gap: 12px !important; }
.tile.t2 { all: unset; box-sizing: border-box; cursor: pointer; display: flex !important; flex-direction: column; gap: 8px; padding: 14px !important; border-radius: 16px !important;
  background: var(--panel) !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow) !important; position: relative; overflow: hidden; min-height: 168px;
  transition: transform .18s, box-shadow .18s, border-color .18s; --c: var(--muted); }
.tile.t2::before, .tile.t2::after { content: none !important; display: none !important; }
.tile.t2:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover) !important; border-color: color-mix(in srgb, var(--c) 50%, var(--line)) !important; }
.tile.t2.ok { --c: var(--ok); } .tile.t2.warn { --c: var(--warn); } .tile.t2.bad { --c: var(--bad); } .tile.t2.missing { --c: var(--muted); }
.tile.t2.bad { background: linear-gradient(180deg, var(--bad-soft), var(--panel) 60%) !important; }
.tile.t2.warn { background: linear-gradient(180deg, var(--warn-soft), var(--panel) 60%) !important; }
.t2-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.t2-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; font: 800 10.5px/1 var(--font); letter-spacing: .05em; text-transform: uppercase;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.t2-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.t2-ring { --f: 0; flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(closest-side, var(--panel) 76%, transparent 78% 100%), conic-gradient(var(--c) calc(var(--f) * 1%), var(--panel-2) 0); }
.t2-ring b { font: 800 15px/1 var(--font); color: var(--c); }
.t2-ring small { font: 700 7.5px/1.2 var(--font); color: var(--muted); text-transform: uppercase; letter-spacing: .03em; max-width: 46px; }
.t2-name { font: 800 14px/1.3 var(--font) !important; color: var(--ink) !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t2-date { font-size: 12.5px; color: var(--ink-2); }
.t2-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 11.5px; color: var(--muted); min-width: 0; }
.t2-foot > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t2-go { flex: none; font: 800 12px/1 var(--font); color: #fff; background: var(--brand); padding: 7px 11px; border-radius: 9px; }
:root[data-theme="dark"] .t2-go { color: #062320; }
.tile.t2.bad .t2-go { background: var(--bad); color: #fff; }

/* v17b fixes: donut centre stacked (number over "% valid"); count tiles as rounded squares */
.hx-ring > span { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; }
.hx-ring > span b { display: block !important; }
.hx-ring > span small { display: block !important; }
.hx-legend .lg-chip { border-radius: 12px !important; min-height: 64px; }

.hx-ring > span { width: 84px !important; height: 84px !important; }
.hx-ring > span small { font-size: 9px !important; letter-spacing: .02em !important; white-space: nowrap; }

:root[data-theme="dark"] .tile.t2.bad .t2-go { color: #2a0b05 !important; }

/* =====================================================================================================
   Sign-in v17: a product story on the left – headline, an animated isometric "video" of the four steps with a
   caption per step and an AI-assistant bubble, and four key facts. The form stays on the right.
   ===================================================================================================== */
.auth-art.la { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; gap: 20px !important; padding: 30px 34px 28px !important; overflow: hidden;
  background: radial-gradient(90% 70% at 100% 0%, rgba(45, 212, 191, .35), transparent 60%), radial-gradient(70% 60% at 0% 100%, rgba(13, 148, 136, .45), transparent 65%), linear-gradient(150deg, #072624 0%, #0b3b3a 45%, #0f766e 100%) !important; }
.auth-art.la::before, .auth-art.la::after { content: none !important; display: none !important; }
.la-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.la .aa-logo { display: flex; align-items: center; gap: 10px; font: 800 17px/1 var(--font) !important; color: #fff !important; text-transform: none !important; letter-spacing: 0 !important; }
.la .aa-logo i { width: 32px; height: 32px; border-radius: 10px; background: #14b8a6 !important; display: grid; place-items: center; }
.la .aa-logo i svg { width: 18px; height: 18px; fill: #fff !important; }
.la-pill { font: 700 11.5px/1 var(--font); color: #ccfbf1 !important; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); }
.la-hero h2 { margin: 0; font: 800 clamp(28px, 3vw, 42px)/1.08 var(--font) !important; letter-spacing: -.025em !important; color: #fff !important; -webkit-text-fill-color: #fff !important; background: none !important; }
.la-hero h2 span { display: block; color: #5eead4 !important; -webkit-text-fill-color: #5eead4 !important; }
.la-hero p { margin: 12px 0 0; max-width: 560px; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .82) !important; }
/* the "video" */
.la-video { margin: 0; padding: 14px; border-radius: 22px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); backdrop-filter: blur(6px); }
.la-screen { position: relative; border-radius: 16px; background: radial-gradient(80% 90% at 50% 100%, rgba(20, 184, 166, .22), transparent 70%), rgba(2, 20, 19, .35); overflow: hidden; }
.la-stage { padding: 6px 4px 0; }
.la-stage svg { display: block; width: 100%; height: auto; max-height: 250px; }
.la .iso-stage { --s-top: #134e4a; --s-l: #072624; --s-r: #0b3b3a; --line-c: rgba(255, 255, 255, .14);
  --paper-t: #f0fdfa; --paper-l: #99c9c1; --paper-r: #c4e6e0; --c-t: #1f5f59; --c-l: #0b3b3a; --c-r: #134e4a; --b-t: #1f5f59; --b-l: #0b3b3a; --b-r: #134e4a;
  --badge: rgba(4, 30, 28, .88); --badge-ink: #ffffff; }
.la .iso-stage .iso-isle:not(.on) { opacity: .72; }
.la .iso-isle.on .slab .f-l { fill: #0b5f58 !important; } .la .iso-isle.on .slab .f-r { fill: #0f766e !important; }
.la .iso-badge text { fill: #ffffff !important; } .la .iso-badge .b-num { fill: #5eead4 !important; }
.la .iso-isle.now .iso-badge rect { fill: #14b8a6 !important; stroke: #5eead4 !important; } .la .iso-isle.now .iso-badge text, .la .iso-isle.now .iso-badge .b-num { fill: #042f2c !important; }
.la .pkg .f-t { fill: #fde68a; } .la .pkg .f-l { fill: #d97706; } .la .pkg .f-r { fill: #f59e0b; }
.la .iso-pkg { filter: drop-shadow(0 0 10px rgba(251, 191, 36, .9)); }
/* AI assistant bubble */
.la-ai { position: absolute; top: 12px; right: 12px; max-width: 250px; display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; border-radius: 14px 14px 4px 14px;
  background: #ffffff; color: #0f2a2a !important; box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .7); opacity: 0; transform: translateY(-8px) scale(.96); transition: opacity .4s, transform .4s; pointer-events: none; }
.la-ai.show { opacity: 1; transform: none; }
.la-ai i { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #0f766e; color: #fff !important; font-style: normal; font-size: 13px; }
.la-ai span { font-size: 12px; line-height: 1.4; color: #34504e !important; }
.la-ai b { display: block; font: 800 11.5px/1.2 var(--font); color: #0f766e !important; margin-bottom: 2px; }
/* caption */
.la-caption { display: grid; gap: 4px; padding: 14px 4px 6px; }
.la-caption.in { animation: laIn .55s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes laIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.la-tag { justify-self: start; font: 800 10.5px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: #042f2c !important; background: #5eead4; padding: 5px 9px; border-radius: 999px; }
.la-caption b { font: 800 18px/1.3 var(--font); color: #fff !important; }
.la-caption small { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .78) !important; min-height: 3em; }
.la-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 4px 10px; }
.la-dots { display: flex; gap: 6px; }
.la-dots button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: #fff; font: 800 12px/1 var(--font); cursor: pointer; transition: background .2s; }
.la-dots button:hover { background: rgba(255, 255, 255, .12); }
.la-dots button.on { background: #ffffff; color: #0b3b3a; border-color: #fff; }
.la-play { border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: #fff; border-radius: 999px; padding: 7px 12px; font: 700 12px/1 var(--font); cursor: pointer; }
.la-play:hover { background: rgba(255, 255, 255, .12); }
.la-bar { height: 3px; border-radius: 99px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.la-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #14b8a6, #5eead4); }
/* key facts */
.la-facts { list-style: none; margin: auto 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.la-facts li { padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13); display: grid; gap: 4px; }
.la-facts b { font: 800 20px/1 var(--font); color: #fff !important; }
.la-facts span { font-size: 11.5px; line-height: 1.35; color: rgba(255, 255, 255, .75) !important; }
@media (max-width: 1100px) { .la-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 880px) { .auth-art.la { padding: 22px 18px !important; gap: 16px !important; } .la-ai { display: none; } .la-caption small { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .la-caption.in { animation: none; } }

/* the sign-in scene keeps its own dark-teal colours in light and dark mode */
:root[data-theme] .la .iso-stage, :root .la .iso-stage { --s-top: #134e4a; --s-l: #072624; --s-r: #0b3b3a; --line-c: rgba(255, 255, 255, .14);
  --paper-t: #f0fdfa; --paper-l: #99c9c1; --paper-r: #c4e6e0; --c-t: #1f5f59; --c-l: #0b3b3a; --c-r: #134e4a; --b-t: #1f5f59; --b-l: #0b3b3a; --b-r: #134e4a;
  --badge: rgba(4, 30, 28, .88); --badge-ink: #ffffff; }

/* =====================================================================================================
   v20 · Isometric "compliance factory" (public/iso-factory.js) – shared by the dashboard and the sign-in page.
   Teal pads on a soft glow, a moving conveyor belt, working machines; colours from tokens (light + dark).
   ===================================================================================================== */
.iso-stage { --s-top: #ffffff; --s-l: #cfe7e3; --s-r: #e3f2ef; --s-in: #f2faf8; --line-c: rgba(15, 60, 56, .16);
  --m-t: #e6f4f1; --m-l: #9cc9c2; --m-r: #bfdeda; --belt: #1f2f2e; --belt-s: #0f1a19; --belt-run: rgba(255, 255, 255, .55);
  --paper-t: #ffffff; --paper-l: #d6e4e2; --paper-r: #e9f2f0; --badge: #ffffff; --badge-ink: #0f2a2a; --glow: rgba(20, 184, 166, .28);
  --accent-t: #fb7185; --accent-l: #be3455; --accent-r: #e0506e; --amber-t: #fde68a; --amber-l: #d97706; --amber-r: #f59e0b; }
:root[data-theme="dark"] .iso-stage, .la .iso-stage { --s-top: #134e4a; --s-l: #072624; --s-r: #0b3b3a; --s-in: #175a55; --line-c: rgba(255, 255, 255, .12);
  --m-t: #2a6a64; --m-l: #0e3f3c; --m-r: #155450; --belt: #041816; --belt-s: #020d0c; --belt-run: rgba(94, 234, 212, .7);
  --paper-t: #f0fdfa; --paper-l: #99c9c1; --paper-r: #c4e6e0; --badge: rgba(4, 30, 28, .9); --badge-ink: #ffffff; --glow: rgba(45, 212, 191, .3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .iso-stage { --s-top: #134e4a; --s-l: #072624; --s-r: #0b3b3a; --s-in: #175a55; --line-c: rgba(255, 255, 255, .12);
  --m-t: #2a6a64; --m-l: #0e3f3c; --m-r: #155450; --belt: #041816; --belt-s: #020d0c; --belt-run: rgba(94, 234, 212, .7);
  --paper-t: #f0fdfa; --paper-l: #99c9c1; --paper-r: #c4e6e0; --badge: rgba(4, 30, 28, .9); --badge-ink: #ffffff; --glow: rgba(45, 212, 191, .3); } }

.iso-stage { margin: 4px 0 0 !important; }
.iso-stage svg { display: block; width: 100%; height: auto; max-height: min(360px, 46vh) !important; }
.iso-factory polygon { stroke: var(--line-c); stroke-width: .7; stroke-linejoin: round; transition: fill .45s ease; }
.iso-factory .pad-glow { fill: var(--glow); opacity: .6; }
.iso-factory .slab .f-t { fill: var(--s-top) !important; } .iso-factory .slab .f-l { fill: var(--s-l) !important; } .iso-factory .slab .f-r { fill: var(--s-r) !important; }
.iso-factory .slab-inset .f-t { fill: var(--s-in); }
.iso-factory .mach .f-t, .iso-factory .desk .f-t, .iso-factory .cabinet .f-t, .iso-factory .hall .f-t, .iso-factory .plinth .f-t, .iso-factory .eave .f-t, .iso-factory .calendar .f-t, .iso-factory .tray .f-t { fill: var(--m-t) !important; }
.iso-factory .mach .f-l, .iso-factory .desk .f-l, .iso-factory .cabinet .f-l, .iso-factory .hall .f-l, .iso-factory .plinth .f-l, .iso-factory .eave .f-l, .iso-factory .calendar .f-l, .iso-factory .tray .f-l { fill: var(--m-l) !important; }
.iso-factory .mach .f-r, .iso-factory .desk .f-r, .iso-factory .cabinet .f-r, .iso-factory .hall .f-r, .iso-factory .plinth .f-r, .iso-factory .eave .f-r, .iso-factory .calendar .f-r, .iso-factory .tray .f-r { fill: var(--m-r) !important; }
.iso-factory .mach-top .f-t { fill: #0f766e; } .iso-factory .mach-top .f-l { fill: #0b5f58; } .iso-factory .mach-top .f-r { fill: #0d6b64; }
.iso-factory .sheet .f-t { fill: var(--paper-t); } .iso-factory .sheet .f-l { fill: var(--paper-l); } .iso-factory .sheet .f-r { fill: var(--paper-r); }
.iso-factory .stamp .f-t, .iso-factory .stamp-h .f-t, .iso-factory .calendar-top .f-t { fill: var(--accent-t) !important; }
.iso-factory .stamp .f-l, .iso-factory .stamp-h .f-l, .iso-factory .calendar-top .f-l { fill: var(--accent-l) !important; }
.iso-factory .stamp .f-r, .iso-factory .stamp-h .f-r, .iso-factory .calendar-top .f-r { fill: var(--accent-r) !important; }
.iso-factory .screen .f-l { fill: #0f766e; } .iso-factory .screen .f-r, .iso-factory .screen .f-t { fill: #0b5f58; }
.iso-factory .screen .f-l { animation: isoScreen 2.4s ease-in-out infinite; }
@keyframes isoScreen { 50% { fill: #14b8a6; } }
.iso-factory .person .f-t { fill: #fbbf24; } .iso-factory .person .f-l { fill: #d97706; } .iso-factory .person .f-r { fill: #f59e0b; }
.iso-factory .person-head { fill: #fcd9b6; stroke: var(--line-c); }
.iso-factory .idcard .f-l { fill: #ffffff; } .iso-factory .idcard .f-r, .iso-factory .idcard .f-t { fill: #cbd5e1; }
.iso-factory .idcard.alt .f-l { fill: #ccfbf1; }
.iso-factory .drawer .f-l, .iso-factory .drawer .f-r, .iso-factory .drawer .f-t { fill: #14b8a6 !important; }
.iso-factory .drawer.open .f-t { fill: #5eead4 !important; }
.iso-factory .cal-tick { fill: none; stroke: #0f766e; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.iso-factory .column .f-t, .iso-factory .column .f-l, .iso-factory .column .f-r { fill: var(--paper-r) !important; } .iso-factory .column .f-l { fill: var(--paper-l) !important; }
.iso-factory .roof-l { fill: #0f766e !important; } .iso-factory .roof-r { fill: #14b8a6 !important; }
.iso-factory .mast { stroke: var(--m-l); stroke-width: 3; stroke-linecap: round; }
.iso-factory .signal circle { stroke: #14b8a6 !important; }
/* the belt */
.iso-factory .belt-top { fill: var(--belt); } .iso-factory .belt-side { fill: var(--belt-s); }
.iso-factory .belt-run { stroke: var(--belt-run); stroke-width: 2.4; stroke-dasharray: 3 9; stroke-linecap: round; animation: isoBelt .7s linear infinite; }
@keyframes isoBelt { to { stroke-dashoffset: -12; } }
.iso-factory .route { fill: none; stroke: none; }
.iso-factory .rider { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); }
/* working machines */
.iso-factory .print-sheet { animation: isoPrint 2.8s ease-in-out infinite; }
@keyframes isoPrint { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 60% { transform: translate(-10px, 6px); opacity: 1; } 100% { transform: translate(-14px, 9px); opacity: 0; } }
.iso-factory .stamp-press { animation: isoStamp 1.8s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes isoStamp { 0%, 55%, 100% { transform: translateY(0); } 70% { transform: translateY(14px); } 80% { transform: translateY(12px); } }
.iso-factory .drawer-slide { animation: isoDrawer 3.2s ease-in-out infinite; }
@keyframes isoDrawer { 0%, 30%, 100% { transform: translate(0, 0); } 50%, 75% { transform: translate(11px, 6px); } }
.iso-factory .cal-tick { stroke-dasharray: 30; stroke-dashoffset: 30; animation: isoTick 3.2s ease-in-out infinite; }
@keyframes isoTick { 0%, 40% { stroke-dashoffset: 30; } 60%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 30; } }
/* the active station */
.iso-factory .iso-isle { transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.iso-stage .iso-factory .iso-isle:not(.on) { opacity: .78; }
.iso-factory .iso-isle.on { transform: translateY(-6px); }
.iso-factory .iso-isle.on .slab .f-t { fill: url(#isoGlow) !important; }
.la .iso-factory .iso-isle.on .slab .f-t { fill: url(#laGlow) !important; }
.iso-factory .iso-isle.on .slab .f-l { fill: #0b5f58 !important; } .iso-factory .iso-isle.on .slab .f-r { fill: #0f766e !important; }
/* package */
.iso-factory .pkg .f-t { fill: var(--amber-t, #fde68a) !important; } .iso-factory .pkg .f-l { fill: var(--amber-l, #d97706) !important; } .iso-factory .pkg .f-r { fill: var(--amber-r, #f59e0b) !important; }
.iso-factory .iso-pkg { filter: drop-shadow(0 0 10px rgba(251, 191, 36, .85)); }
/* badges */
.iso-factory .iso-badge rect { fill: var(--badge) !important; stroke: var(--line-c) !important; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .14)); }
.iso-factory .iso-badge text { font: 700 13px var(--font, sans-serif) !important; fill: var(--badge-ink) !important; }
.iso-factory .iso-badge .b-num { fill: #0f766e !important; }
:root[data-theme="dark"] .iso-factory .iso-badge .b-num, .la .iso-factory .iso-badge .b-num { fill: #5eead4 !important; }
.iso-factory .iso-isle.done .iso-badge rect { stroke: #16a34a !important; } .iso-factory .iso-isle.done .iso-badge .b-num { fill: #16a34a !important; }
.iso-factory .iso-isle.warn .iso-badge rect { stroke: #f59e0b !important; }
.iso-factory .iso-isle.now .iso-badge rect { fill: #0f766e !important; stroke: #5eead4 !important; }
.iso-factory .iso-isle.now .iso-badge text, .iso-factory .iso-isle.now .iso-badge .b-num { fill: #ffffff !important; }
.la .iso-factory .iso-isle.now .iso-badge rect { fill: #14b8a6 !important; } .la .iso-factory .iso-isle.now .iso-badge text, .la .iso-factory .iso-isle.now .iso-badge .b-num { fill: #042f2c !important; }
/* paused / less motion: everything still */
.iso-stage.paused .iso-factory *, .iso-stage.paused .iso-factory { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .iso-factory *, .iso-factory { animation: none !important; } .iso-factory .rider { display: none; } .iso-factory .cal-tick { stroke-dashoffset: 0; } }

/* sign-in: the video sits in the middle of the spare height */
.auth-art.la .la-video { margin-block: auto !important; }
.auth-art.la .la-facts { margin-top: 0 !important; }
.la-stage svg { max-height: min(300px, 32vh) !important; }

/* =====================================================================================================
   v20 · Screen fit – every page fits the screen from a 320 px phone to a 2560 px monitor
   ===================================================================================================== */
html, body { max-width: 100%; overflow-x: clip; }
img, svg, video, canvas { max-width: 100%; }
.page { min-width: 0; max-width: 100%; }
.page > *, .tab > *, .panel, .card { min-width: 0; }
.tab { max-width: 1600px; margin-inline: auto; }
pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
h1, h2, h3, .card p, td { overflow-wrap: break-word; } /* break long words only when needed – never squeeze columns to one letter */
.table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
dialog { max-width: calc(100vw - 24px) !important; max-height: calc(100dvh - 24px) !important; overflow: auto; }
dialog[open] { margin: auto; }
input, select, textarea, button { max-width: 100%; }
.menu-pop { max-width: calc(100vw - 16px); }

/* tablet */
@media (max-width: 1024px) {
  .hx-mosaic, .jr-grid, .hr-form-grid, .tiles, .grid-2, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* phone */
@media (max-width: 640px) {
  .page { padding-inline: 12px !important; }
  .hx-mosaic, .jr-grid, .hr-form-grid, .tiles, .grid-2, .grid-3, .la-facts { grid-template-columns: minmax(0, 1fr) !important; }
  .card, .panel { padding-inline: 14px !important; border-radius: 18px !important; }
  h1 { font-size: clamp(24px, 7vw, 32px) !important; }
  h2 { font-size: clamp(18px, 5.4vw, 22px) !important; }
  .btn, button.btn { min-height: 40px; }
  .actions, .row-actions, .btn-row, .toolbar { flex-wrap: wrap !important; }
  dialog { width: calc(100vw - 16px) !important; max-width: none !important; border-radius: 18px !important; }
}
/* data tables become cards whenever the space they have is narrow (phone, tablet, or a laptop with the side menu) */
.table-wrap { container: tbl / inline-size; }
@container tbl (max-width: 760px) {
  /* data tables → cards */
  table.rt { min-width: 0 !important; width: 100% !important; border: 0 !important; background: none !important; }
  table.rt thead { display: none; }
  table.rt, table.rt tbody, table.rt tr, table.rt td { display: block; width: 100% !important; }
  table.rt tr { margin: 0 0 10px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: 0 6px 18px -14px rgba(0, 0, 0, .35); }
  table.rt td { display: block; padding: 7px 0 !important; border: 0 !important; border-bottom: 1px dashed var(--line) !important; text-align: left !important; white-space: normal !important; position: static !important; min-width: 0 !important; max-width: none !important; background: none !important; }
  table.rt td:last-child { border-bottom: 0 !important; }
  table.rt td::before { content: attr(data-label); display: block; margin-bottom: 3px; font: 700 11.5px/1.35 var(--font); letter-spacing: .02em; color: var(--muted); text-transform: none; }
  table.rt td[data-label=""] { padding: 2px 0 !important; border-bottom: 0 !important; }
  table.rt td .hbar { width: 100%; }
  table.rt td .row-actions { justify-content: flex-start !important; flex-wrap: wrap; } table.rt td[data-label=""]::before { content: none; }
  table.rt td > * { min-width: 0; max-width: 100%; }
  table.rt td:empty { display: none; }
}
@media (max-width: 760px) { .table-wrap:has(table.rt) { border: 0 !important; background: none !important; box-shadow: none !important; } }
/* big screens: keep lines readable */
@media (min-width: 1800px) {
  .tab { max-width: 1680px; }
}

/* =====================================================================================================
   v21 · Plans (free trial / premium), upgrade gateway, facility pack on the Downloads page
   ===================================================================================================== */
/* only administrators delete: the delete buttons are hidden for everyone else */
body.not-admin [data-del-row], body.not-admin [data-remove], body.not-admin .icon-btn.del { display: none !important; }
.row4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; align-items: end; }

/* plan chip (sidebar) */
.plan-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin: 0 0 8px; padding: 9px 12px; border-radius: 14px; cursor: pointer;
  border: 1px solid rgba(251, 191, 36, .55); background: linear-gradient(135deg, rgba(251, 191, 36, .22), rgba(251, 113, 133, .16)); color: #fff; font: 600 12.5px/1.2 var(--font); text-align: left; }
.plan-chip b { padding: 5px 9px; border-radius: 999px; background: #fbbf24; color: #3b2300; font-weight: 800; font-size: 11.5px; white-space: nowrap; }
.plan-chip:hover b { background: #fcd34d; }
.plan-chip:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; }

/* upgrade gateway */
.upgrade-dlg { width: min(520px, calc(100vw - 24px)); padding: 0 !important; border: 0 !important; border-radius: 24px !important; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6) !important; }
.upgrade-dlg::backdrop { background: rgba(4, 24, 22, .55); backdrop-filter: blur(3px); }
.upgrade-dlg form { padding: 26px 26px 20px; display: grid; gap: 12px; background: radial-gradient(120% 60% at 100% 0%, rgba(251, 191, 36, .18), transparent 60%), var(--panel); }
.up-badge { justify-self: start; font: 800 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: #fbbf24; color: #3b2300; }
.upgrade-dlg h2 { margin: 0; font: 800 clamp(20px, 4.4vw, 24px)/1.2 var(--font) !important; color: var(--ink) !important; }
.up-why { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.up-meters { display: grid; gap: 8px; }
.up-meter { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 13px; color: var(--ink); }
.up-meter b { font-weight: 800; }
.up-meter i { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: var(--line); position: relative; overflow: hidden; }
.up-meter i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #14b8a6, #f59e0b); }
.up-meter.up-locked i::after { background: repeating-linear-gradient(45deg, #94a3b8 0 6px, #cbd5e1 6px 12px); }
.up-list { margin: 2px 0 4px; padding: 0; list-style: none; display: grid; gap: 6px; }
.up-list li { position: relative; padding-left: 26px; font-size: 14px; color: var(--ink); }
.up-list li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #ccfbf1; color: #0f766e; font-weight: 800; font-size: 11px; }
.upgrade-dlg .btn-row { justify-content: flex-end; flex-wrap: wrap; }

/* LEGAL REGISTER: locked preview */
.trial-lock { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 16px; padding: 14px 16px; border-radius: 16px; border: 1px dashed #f59e0b; background: linear-gradient(135deg, rgba(251, 191, 36, .14), rgba(20, 184, 166, .08)); }
.trial-lock .tl-ic { font-size: 22px; }
.trial-lock div { flex: 1 1 260px; display: grid; gap: 2px; }
.trial-lock b { color: var(--ink); }
.trial-lock span { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
body.trial #master .register, body.trial #master table { filter: saturate(.75); }

/* Downloads: the facility pack */
.pack { padding: 20px 22px !important; margin-bottom: 22px; display: grid; gap: 16px; }
.pack-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px 20px; flex-wrap: wrap; }
.pack-head h2 { margin: 6px 0 4px; }
.pack-head p { margin: 0; max-width: 560px; }
.pack-kicker { font: 800 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: #0f766e; background: #ccfbf1; padding: 6px 10px; border-radius: 999px; }
.pack-root { font-family: var(--font); color: var(--ink); }
.pack-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pack-type { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--line); }
.pack-type button { border: 0; background: none; padding: 8px 12px; border-radius: 9px; font: 700 12.5px/1 var(--font); color: var(--muted); cursor: pointer; }
.pack-type button.on { background: var(--panel); color: var(--ink); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.pack-tree { display: grid; gap: 8px; }
.pk-root { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); padding: 2px 4px; }
.pk-folder { margin-left: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); position: relative; }
.pk-folder::before { content: ''; position: absolute; left: -14px; top: -10px; width: 12px; height: 34px; border-left: 2px solid var(--line); border-bottom: 2px solid var(--line); border-bottom-left-radius: 8px; }
.pk-folder summary { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.pk-folder summary::-webkit-details-marker { display: none; }
.pk-folder summary::after { content: '▾'; color: var(--muted); transition: transform .2s; order: 9; }
.pk-folder[open] summary::after { transform: rotate(180deg); }
.pk-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: #f0fdfa; font-size: 18px; flex: none; }
.pk-name { flex: 1 1 180px; display: grid; gap: 2px; min-width: 0; }
.pk-name b { color: var(--ink); } .pk-name small { color: var(--muted); font-size: 12px; }
.pk-folder.locked { border-style: dashed; }
.pk-folder.locked .pk-ic { background: #fef3c7; }
.pk-files { list-style: none; margin: 0; padding: 4px 12px 10px 60px; display: grid; gap: 2px; max-height: 340px; overflow: auto; }
.pk-files li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px dashed var(--line); font-size: 13px; color: var(--ink); }
.pk-files li.locked { color: var(--muted); }
.pk-sub { font: 700 10.5px/1 var(--font); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pk-file { overflow-wrap: anywhere; }
.pk-dl { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; text-decoration: none; border: 1px solid var(--line); color: var(--ink); }
.pk-dl:hover { background: #ccfbf1; color: #0f766e; }
.ex-sub { margin: 4px 0 12px; font-size: 16px !important; color: var(--muted) !important; }
:root[data-theme="dark"] .pk-ic { background: rgba(20, 184, 166, .18); } :root[data-theme="dark"] .pack-kicker { background: rgba(20, 184, 166, .2); color: #5eead4; }
:root[data-theme="dark"] .up-list li::before { background: rgba(20, 184, 166, .25); color: #5eead4; }
@media (max-width: 640px) {
  .pack { padding: 16px 14px !important; }
  .pk-folder { margin-left: 0; } .pk-folder::before { display: none; }
  .pk-files { padding-left: 12px; }
  .pk-files li { grid-template-columns: minmax(0, 1fr) auto; } .pk-sub { grid-column: 1 / -1; }
  .pack-actions, .pack-actions .btn { width: 100%; } .pack-type { width: 100%; } .pack-type button { flex: 1; }
}

/* Users & security: a readable table – columns sized to their content, actions in a Manage menu */
#users-tbl th, #users-tbl td { vertical-align: middle; }
#users-tbl td:nth-child(1) { min-width: 170px; }
#users-tbl td:nth-child(1) b { display: flex; align-items: center; gap: 6px; font-size: 14.5px; }
#users-tbl td:nth-child(1) .muted.small { display: block; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#users-tbl select { min-width: 128px; width: 100%; max-width: 170px; }
#users-tbl td:nth-child(3) .muted.small { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.35; max-width: 170px; }
#users-tbl td:nth-child(3) .tag { margin-top: 4px; }
#users-tbl td:nth-child(4) { min-width: 150px; }
#users-tbl td:nth-child(6) { min-width: 104px; }
#users-tbl td:last-child { text-align: right; }
#users-tbl .user-manage { display: inline-block; text-align: left; }
#users-tbl .user-manage summary { list-style: none; white-space: nowrap; }
#users-tbl .user-manage summary::-webkit-details-marker { display: none; }
#users-tbl .user-manage .menu-pop { min-width: 190px; }
#users-tbl .user-manage .menu-pop .icon-btn { width: 100%; justify-content: flex-start; text-align: left; border: 0; background: none; padding: 9px 12px; border-radius: 10px; }
#users-tbl .user-manage .menu-pop .icon-btn:hover { background: var(--brand-soft, #ccfbf1); }
#users-tbl .user-manage .menu-pop .icon-btn.del { color: #dc2626; }
.users-me { display: inline-block; padding: 2px 7px; border-radius: 999px; font: 700 10.5px/1.4 var(--font); background: var(--brand-soft, #ccfbf1); color: var(--brand, #0f766e); }
@container tbl (max-width: 760px) { #users-tbl select { max-width: none; } #users-tbl td:nth-child(1) .muted.small { white-space: normal; max-width: none; } #users-tbl td:nth-child(3) .muted.small { max-width: none; } #users-tbl td:last-child { text-align: left; } }
#users-tbl th, #users-tbl td { padding-left: 10px !important; padding-right: 10px !important; }
#users-tbl .tag, #users-tbl .scope { white-space: normal; line-height: 1.3; }
#users-tbl td:nth-child(6) { white-space: normal !important; min-width: 96px; }
#users-tbl td:nth-child(1) .muted.small { max-width: 180px; }
#users-tbl td:nth-child(4) { min-width: 140px; }
#users-tbl select { min-width: 116px; max-width: 150px; }
#users-tbl td:nth-child(2) select { min-width: 134px; }

/* Get Premium: the call to action in the upgrade gateway */
.premium-btn { background: linear-gradient(135deg, #fbbf24, #f59e0b) !important; color: #3b2300 !important; border: 0 !important; font-weight: 800 !important; box-shadow: 0 10px 22px -10px rgba(245, 158, 11, .8) !important; }
.premium-btn:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); }
.premium-btn:disabled { opacity: .75; cursor: default; }
.up-meter.full b { color: #d97706; }
.up-meter.full i::after { background: linear-gradient(90deg, #f59e0b, #ef4444) !important; }
#limits-form > label { display: grid; gap: 6px; margin-top: 12px; }

/* =====================================================================================================
   v22 · Welcome / compliance information after sign-in – blurred backdrop fades in, the card scales and
   slides up, its parts follow one after another; a short fade on close. Calm (no motion) when asked.
   ===================================================================================================== */
.welcome-dlg { width: min(560px, calc(100vw - 24px)); padding: 0 !important; border: 1px solid rgba(94, 234, 212, .22) !important; border-radius: 26px !important;
  overflow: hidden; color: #eef6f4; background: #071f1d !important; box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .03) inset !important; }
.welcome-dlg::backdrop { background: rgba(2, 14, 13, .55); backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); }
.welcome-dlg form { position: relative; display: grid; gap: 14px; padding: 30px 30px 22px;
  background: radial-gradient(120% 70% at 100% 0%, rgba(20, 184, 166, .28), transparent 60%), radial-gradient(90% 60% at 0% 100%, rgba(15, 118, 110, .35), transparent 65%), linear-gradient(160deg, #0b2f2c, #061a18); }
.wl-glow { position: absolute; inset: -40% -20% auto auto; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(94, 234, 212, .35), transparent 65%); filter: blur(10px); pointer-events: none; }
.wl-badge { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, #14b8a6, #0f766e); box-shadow: 0 14px 30px -12px rgba(20, 184, 166, .9); }
.wl-badge svg { width: 30px; height: 30px; fill: #fff; }
.wl-kicker { justify-self: start; font: 800 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: #5eead4; background: rgba(94, 234, 212, .12); border: 1px solid rgba(94, 234, 212, .25); padding: 6px 10px; border-radius: 999px; }
.welcome-dlg h2 { margin: 0; font: 800 clamp(22px, 4.6vw, 28px)/1.15 var(--font) !important; letter-spacing: -.02em; color: #fff !important; -webkit-text-fill-color: #fff !important; background: none !important; }
.wl-text { margin: 0; font-size: 15.5px; line-height: 1.6; color: rgba(238, 246, 244, .88); }
.wl-points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wl-points li { display: grid; gap: 3px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.wl-points b { font: 800 13.5px/1.2 var(--font); color: #fff; }
.wl-points span { font-size: 12px; line-height: 1.35; color: rgba(238, 246, 244, .7); }
.wl-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 6px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); }
.wl-check { display: flex; align-items: center; gap: 9px; font-size: 14px; color: rgba(238, 246, 244, .85) !important; cursor: pointer; }
.wl-check input { width: 18px; height: 18px; accent-color: #14b8a6; }
.welcome-dlg .btn.primary { background: #14b8a6 !important; color: #042f2c !important; border: 0 !important; font-weight: 800; padding-inline: 18px; }
.welcome-dlg .btn.primary:hover { background: #2dd4bf !important; }
.welcome-dlg :focus-visible { outline: 3px solid #5eead4; outline-offset: 2px; }

/* entry: backdrop blur fades in, the card scales + slides up, its parts follow */
.welcome-dlg[open] { animation: wlIn .55s cubic-bezier(.16, 1, .3, 1) both; }
.welcome-dlg[open]::backdrop { animation: wlFade .45s ease both; }
.welcome-dlg[open] form > :not(.wl-glow) { animation: wlRise .55s cubic-bezier(.16, 1, .3, 1) both; }
.welcome-dlg[open] .wl-badge { animation-delay: .08s; } .welcome-dlg[open] .wl-kicker { animation-delay: .12s; }
.welcome-dlg[open] h2 { animation-delay: .16s; } .welcome-dlg[open] .wl-text { animation-delay: .2s; }
.welcome-dlg[open] .wl-points { animation-delay: .26s; } .welcome-dlg[open] .wl-foot { animation-delay: .32s; }
.welcome-dlg[open] .wl-glow { animation: wlGlow 6s ease-in-out infinite alternate; }
@keyframes wlIn { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes wlFade { from { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); } to { opacity: 1; } }
@keyframes wlRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes wlGlow { from { transform: translate(0, 0); opacity: .8; } to { transform: translate(-30px, 20px); opacity: 1; } }
/* exit */
.welcome-dlg.closing { animation: wlOut .22s ease both !important; }
.welcome-dlg.closing::backdrop { animation: wlFadeOut .22s ease both !important; }
@keyframes wlOut { to { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes wlFadeOut { to { opacity: 0; } }
@media (max-width: 520px) {
  .welcome-dlg form { padding: 24px 18px 18px; }
  .wl-points { grid-template-columns: minmax(0, 1fr); }
  .wl-foot .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-dlg[open], .welcome-dlg[open]::backdrop, .welcome-dlg[open] form > *, .welcome-dlg.closing, .welcome-dlg.closing::backdrop { animation: none !important; }
}
/* admin form */
#welcome-form > label:not(.check) { display: grid; gap: 6px; margin-top: 10px; }
#welcome-form textarea { width: 100%; resize: vertical; }
#welcome-form .actions { margin-top: 12px; }

.np-trial { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; font-weight: 700; }

/* v22b · welcome: paragraphs + "Need assistance?" box with a call button; scrolls inside on short screens */
.welcome-dlg { width: min(600px, calc(100vw - 24px)); max-height: calc(100dvh - 24px) !important; overflow: auto !important; }
.wl-text { display: grid; gap: 10px; }
.wl-text p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(238, 246, 244, .88); }
.wl-support { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(20, 184, 166, .16), rgba(251, 191, 36, .08)); border: 1px solid rgba(94, 234, 212, .28); }
.wl-sup-ic { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: rgba(94, 234, 212, .16); }
.wl-sup-ic svg { width: 22px; height: 22px; fill: #5eead4; }
.wl-sup-body { display: grid; gap: 6px; min-width: 0; }
.wl-support h3 { margin: 0; font: 800 16px/1.3 var(--font) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; background: none !important; }
.wl-support p { margin: 0; font-size: 13.5px; line-height: 1.55; color: rgba(238, 246, 244, .8); }
.wl-call { justify-self: start; display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; padding: 10px 14px; border-radius: 12px; text-decoration: none;
  background: #fff; color: #063a36 !important; font-size: 14px; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .6); transition: transform .15s, box-shadow .15s; }
.wl-call b { font-weight: 800; letter-spacing: .01em; white-space: nowrap; }
.wl-call small { color: #4b6b68; font-size: 12px; }
.wl-call:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .7); }
.wl-call:focus-visible { outline: 3px solid #5eead4; outline-offset: 2px; }
.welcome-dlg[open] .wl-support { animation-delay: .26s; }
@media (max-width: 520px) {
  .wl-support { flex-direction: column; padding: 14px; }
  .wl-call { justify-self: stretch; justify-content: center; flex-wrap: wrap; text-align: center; }
}
#welcome-form .row3 { margin-top: 10px; }
.welcome-dlg { overflow-x: hidden !important; overflow-y: auto !important; }
.welcome-dlg form { overflow: hidden; }

/* Free trial: locked items (beyond the first ones of each module) */
tr.trial-locked td { color: var(--muted); }
tr.trial-locked .name { opacity: .8; }
.lock-ic { margin-right: 6px; }
.icon-btn.premium-mini { background: rgba(251, 191, 36, .16) !important; border-color: rgba(245, 158, 11, .5) !important; color: #b45309 !important; font-weight: 800; white-space: nowrap; }
:root[data-theme="dark"] .icon-btn.premium-mini { color: #fcd34d !important; }
.hr-form.trial-locked { position: relative; border-style: dashed !important; background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(148, 163, 184, .06) 14px 28px), var(--panel) !important; }
.hr-form.trial-locked b { opacity: .75; }
.hr-form.trial-locked .lock-tag { background: rgba(251, 191, 36, .18) !important; color: #b45309 !important; border: 1px solid rgba(245, 158, 11, .45); }
:root[data-theme="dark"] .hr-form.trial-locked .lock-tag { color: #fcd34d !important; }

/* Free trial: the LEGAL REGISTER is a preview – its update / download actions carry a lock (clicking opens Get Premium) */
body:not(.trial) [data-trial-only] { display: none !important; }
.trial-note { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; border: 1px dashed rgba(245, 158, 11, .6); background: rgba(251, 191, 36, .1); }
body.trial :is(#btn-check, #btn-run, #btn-run-all, #qa-entry, #qa-excel, #qa-pdf, #btn-import, #lnk-download, #lnk-export, #pp-link, #ex-reg-xlsx, #ex-reg-pdf, #ex-reg-print, #ex-doh-xlsx, #ex-doh-report)::after {
  content: ''; display: inline-block; width: .9em; height: .9em; margin-left: .45em; vertical-align: -.1em; background: #f59e0b; -webkit-mask: var(--ic-lock) center / contain no-repeat; mask: var(--ic-lock) center / contain no-repeat; }
body.trial :is(#btn-check, #btn-run, #btn-run-all, #qa-entry, #qa-excel, #qa-pdf, #btn-import, #pp-link, #ex-reg-xlsx, #ex-reg-pdf, #ex-reg-print, #ex-doh-xlsx) { opacity: .85; }
/* upload dialog: the notes column keeps a readable width */
.docs-table .notes { min-width: 200px; word-break: normal; overflow-wrap: break-word; }
.docs-table .ev { min-width: 200px; }

/* v23 · Facility details lock: warning in the New facility wizard, banner on locked pages, the lock window */
.lock-warn { display: flex; gap: 12px; align-items: flex-start; margin: 12px 0 0; padding: 12px 14px; border-radius: 14px;
  border: 1px solid rgba(245, 158, 11, .6); background: rgba(251, 191, 36, .12); color: var(--ink); }
.lock-warn > span { font-size: 20px; line-height: 1; }
.lock-warn b { display: block; font-size: 13.5px; line-height: 1.45; }
.lock-warn .check { margin-top: 8px; font-size: 13px; }
body:not(.not-admin) .lock-warn .check { display: none; } /* administrators can always change details */
.lock-warn.shake { animation: lkShake .5s ease; }
@keyframes lkShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.fac-lock { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 16px; padding: 14px 16px; border-radius: 16px;
  border: 1px solid rgba(245, 158, 11, .55); background: linear-gradient(135deg, rgba(251, 191, 36, .14), rgba(20, 184, 166, .06)); }
.fac-lock.open { border-color: rgba(20, 184, 166, .55); background: rgba(20, 184, 166, .1); }
.fac-lock .fl-ic { font-size: 22px; }
.fac-lock > div { flex: 1 1 320px; display: grid; gap: 3px; }
.fac-lock b { color: var(--ink); font-size: 14px; line-height: 1.45; }
.fac-lock span { color: var(--muted); font-size: 13px; }
body.fac-locked :is(#pp-form, #pp-assets, #doc-form, #profile-form) { opacity: .6; filter: saturate(.6); }
.chg-req { margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: rgba(251, 191, 36, .14); border: 1px solid rgba(245, 158, 11, .45); font-size: 12px; line-height: 1.4; max-width: 280px; white-space: normal; }
.lock-dlg { width: min(480px, calc(100vw - 24px)); border-radius: 22px !important; padding: 0 !important; }
.lock-dlg form { display: grid; gap: 12px; padding: 24px; }
.lk-badge { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: rgba(251, 191, 36, .18); }
.lock-dlg h2 { margin: 0; }
.lock-dlg p { margin: 0; line-height: 1.5; }
.lock-dlg label { display: grid; gap: 6px; font-weight: 600; }
.lock-dlg textarea { width: 100%; resize: vertical; }
.lock-dlg .btn-row { justify-content: flex-end; }
.lock-dlg[open] { animation: wlIn .4s cubic-bezier(.16, 1, .3, 1) both; }
.lock-dlg::backdrop { background: rgba(2, 14, 13, .5); backdrop-filter: blur(4px); }
@media (prefers-reduced-motion: reduce) { .lock-dlg[open], .lock-warn.shake { animation: none !important; } }
.access-allow { display: grid; gap: 6px; margin-top: 12px; font-weight: 600; }
.access-allow input { max-width: 120px; }

.dd-lock { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; border: 1px dashed rgba(245, 158, 11, .6); background: rgba(251, 191, 36, .1); font-size: 13px; }
.dd-lock > span:nth-child(2) { flex: 1 1 260px; }
.trial-locked-box .dd-global, .trial-locked-box .dd-list, .trial-locked-box .dd-details { opacity: .6; }

/* Free trial: the LEGAL REGISTER is view-only – no download / export options at all (dashboard, register menu,
   Downloads page). Viewing the register and its documents stays. */
body.trial :is(#qa-excel, #qa-pdf, #lnk-download, #btn-export-more, #lnk-export, #ex-reg-xlsx, #ex-reg-pdf, #ex-reg-print, #ex-doh-xlsx, #ex-doh-report) { display: none !important; }
body.trial .ex-card:has(#ex-reg-xlsx), body.trial .ex-card:has(#ex-doh-xlsx) { display: none !important; }

/* upload window: file names on a readable width; the locked-row message beside its button */
.docs-table td.file { min-width: 190px; word-break: normal; overflow-wrap: break-word; }
.docs-table tr.trial-locked td[colspan] { white-space: normal; }
.docs-table tr.trial-locked .lock-msg { margin: 0 10px 0 6px; color: var(--muted); font-size: 13.5px; }
.docs-table tr.trial-locked td:first-child { font-size: 16px; }

/* Free trial: locked policy names are blurred (the lock, the Premium tag and Get Premium stay sharp) */
tr.trial-locked .blur-txt { filter: blur(5px); user-select: none; pointer-events: none; opacity: .9; }
tr.trial-locked .name { opacity: 1 !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media print { tr.trial-locked .blur-txt { visibility: hidden; } }
.hr-form.trial-locked .blur-txt { filter: blur(5px); user-select: none; pointer-events: none; opacity: .9 !important; }
@media print { .hr-form.trial-locked .blur-txt { visibility: hidden; } }

/* Free trial checklist: masked rows */
tr.ck-locked .blur-txt { filter: blur(5px); user-select: none; pointer-events: none; font-weight: 700; letter-spacing: .02em; }
.ck-lock { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ck-lock .icon-btn { margin-left: auto; }
tr.ck-locked td { background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(148, 163, 184, .05) 14px 28px); }
.dl-item.dl-locked { border: 1px dashed rgba(245, 158, 11, .55); background: rgba(251, 191, 36, .08); }
.dl-item.dl-locked .dl-date { font-size: 18px; display: grid; place-items: center; }

/* =====================================================================================================
   v24 · Premium lock UI – one look for every lock: a glowing gold → emerald lock emblem on a frosted tile, a
   glass card with a highlight edge, and a conversion-focused Get Premium button (gold gradient, shine, glow).
   ===================================================================================================== */
:root { --prem-1: #fde68a; --prem-2: #fbbf24; --prem-3: #f59e0b; --prem-4: #d97706; --prem-ink: #2b1700; --prem-em: #10b981; }

/* the lock emblem (replaces the lock emoji in these places – the emoji text is hidden, a vector lock is drawn) */
.lock-emblem, .trial-lock .tl-ic, .dl-item.dl-locked .dl-date, .dd-lock > span:first-child {
  position: relative; flex: none; width: 46px !important; height: 46px; border-radius: 14px; font-size: 0 !important; line-height: 0;
  display: grid !important; place-items: center; color: transparent;
  background: radial-gradient(120% 120% at 28% 18%, rgba(253, 230, 138, .38), transparent 58%), linear-gradient(145deg, rgba(245, 158, 11, .22), rgba(16, 185, 129, .16));
  border: 1px solid rgba(251, 191, 36, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 26px -12px rgba(245, 158, 11, .75), 0 0 20px -6px rgba(251, 191, 36, .5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.lock-emblem::after, .trial-lock .tl-ic::after, .dl-item.dl-locked .dl-date::after, .dd-lock > span:first-child::after {
  content: ''; width: 22px; height: 22px;
  background: linear-gradient(165deg, var(--prem-1) 0%, var(--prem-3) 55%, var(--prem-em) 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 9V7A5 5 0 0 0 7 7v2H5v13h14V9h-2zM9 7a3 3 0 0 1 6 0v2H9V7zm3 6a2 2 0 0 1 1 3.73V19h-2v-2.27A2 2 0 0 1 12 13z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 9V7A5 5 0 0 0 7 7v2H5v13h14V9h-2zM9 7a3 3 0 0 1 6 0v2H9V7zm3 6a2 2 0 0 1 1 3.73V19h-2v-2.27A2 2 0 0 1 12 13z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, .55));
}
.dd-lock > span:first-child { width: 38px !important; height: 38px; border-radius: 12px; }
.dd-lock > span:first-child::after { width: 18px; height: 18px; }

/* the premium card: glass, a highlight edge along the top, clear title, muted secondary line */
.dl-item.dl-locked, .trial-lock, .dd-lock {
  position: relative; overflow: hidden; align-items: center; gap: 14px !important;
  border: 1px solid rgba(251, 191, 36, .3) !important; border-radius: 18px !important;
  background: linear-gradient(120deg, rgba(251, 191, 36, .09), rgba(16, 185, 129, .06) 60%, rgba(255, 255, 255, .02)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 40px -28px rgba(0, 0, 0, .7);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.dl-item.dl-locked::before, .trial-lock::before, .dd-lock::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(253, 230, 138, .75), rgba(16, 185, 129, .55), transparent);
}
.dl-item.dl-locked { padding: 14px 16px !important; }
.dl-item.dl-locked .dl-body b, .trial-lock b { font: 700 15px/1.35 var(--font); letter-spacing: -.005em; color: var(--ink) !important; }
.dl-item.dl-locked .dl-meta, .dl-item.dl-locked .dl-meta span, .trial-lock > div > span { font-size: 13px; line-height: 1.45; color: var(--muted) !important; }
:root[data-theme="dark"] :is(.dl-item.dl-locked .dl-body b, .trial-lock b) { color: #f4fbf9 !important; }
:root[data-theme="dark"] :is(.dl-item.dl-locked .dl-meta, .dl-item.dl-locked .dl-meta span, .trial-lock > div > span) { color: rgba(226, 240, 236, .66) !important; }

/* Get Premium – gold gradient pill, a light sweep, a soft glow; lifts on hover */
.premium-btn, .icon-btn.premium-mini, .plan-chip b {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, var(--prem-1) 0%, var(--prem-2) 38%, var(--prem-3) 72%, var(--prem-4) 100%) !important;
  color: var(--prem-ink) !important; border: 1px solid rgba(255, 255, 255, .35) !important; border-radius: 999px !important;
  font-weight: 800 !important; letter-spacing: .01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 10px 24px -12px rgba(245, 158, 11, .9), 0 0 0 0 rgba(251, 191, 36, .45) !important;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease, filter .2s ease;
  animation: premGlow 2.8s ease-in-out infinite;
}
.premium-btn::after, .icon-btn.premium-mini::after {
  content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: -70%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent); transform: skewX(-20deg);
  animation: premShine 3.8s ease-in-out infinite;
}
.premium-btn:hover:not(:disabled), .icon-btn.premium-mini:hover { transform: translateY(-1px) scale(1.04); filter: saturate(1.1) brightness(1.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 16px 32px -12px rgba(245, 158, 11, 1), 0 0 24px -4px rgba(251, 191, 36, .65) !important; }
.premium-btn:active:not(:disabled), .icon-btn.premium-mini:active { transform: scale(.97); }
.premium-btn:focus-visible, .icon-btn.premium-mini:focus-visible { outline: 3px solid var(--prem-1); outline-offset: 3px; }
.icon-btn.premium-mini { padding: 7px 13px !important; }
@keyframes premShine { 0%, 55% { left: -70%; } 85%, 100% { left: 130%; } }
@keyframes premGlow { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 10px 24px -12px rgba(245, 158, 11, .9), 0 0 0 0 rgba(251, 191, 36, .4); }
  50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 10px 24px -12px rgba(245, 158, 11, .9), 0 0 0 6px rgba(251, 191, 36, 0); } }
@media (prefers-reduced-motion: reduce) {
  .premium-btn, .icon-btn.premium-mini, .plan-chip b, .premium-btn::after, .icon-btn.premium-mini::after { animation: none !important; transition: none !important; }
  .premium-btn::after, .icon-btn.premium-mini::after { display: none; }
}
.btn.premium-btn.premium-btn, button.premium-btn.premium-btn, .icon-btn.premium-mini.premium-mini { border-radius: 999px !important; }

/* Free trial: LEGAL REGISTER entries after the first ones – blurred under a padlock, the whole row opens Get Premium */
tr.reg-locked { cursor: pointer; position: relative; }
tr.reg-locked td { background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(148, 163, 184, .045) 14px 28px); }
tr.reg-locked .blur-txt, .ecard.reg-locked .blur-txt { filter: blur(6px); user-select: none; pointer-events: none; opacity: .85; }
tr.reg-locked:hover td { background-color: rgba(251, 191, 36, .05); }
.reg-lock-pill { display: inline-flex; align-items: center; gap: 10px; padding: 4px 4px 4px 4px; border-radius: 999px;
  border: 1px solid rgba(251, 191, 36, .35); background: linear-gradient(120deg, rgba(251, 191, 36, .1), rgba(16, 185, 129, .07)); white-space: nowrap; }
.reg-lock-pill .lock-emblem { width: 30px !important; height: 30px; border-radius: 50%; }
.reg-lock-pill .lock-emblem::after { width: 15px; height: 15px; }
.reg-lock-pill b { font-size: 13px; color: var(--ink); }
:root[data-theme="dark"] .reg-lock-pill b { color: #f4fbf9; }
.reg-lock-pill .premium-btn { padding: 6px 12px !important; font-size: 12.5px; }
.ecard.reg-locked { cursor: pointer; border-style: dashed !important; display: grid; gap: 10px; align-content: start; }

/* sidebar: the free-trial count next to 3rd-party documents (gold, not a step number) */
.sb-step.sb-free { background: linear-gradient(135deg, var(--prem-1, #fde68a), var(--prem-3, #f59e0b)) !important; color: #2b1700 !important; border: 0 !important; font-weight: 800; }

/* upload window: skeleton rows while a document is read */
.doc-skel .sk { display: block; height: 9px; margin: 5px 0; border-radius: 6px; background: linear-gradient(90deg, rgba(148,163,184,.14) 25%, rgba(148,163,184,.3) 37%, rgba(148,163,184,.14) 63%); background-size: 400% 100%; animation: skShine 1.3s ease infinite; }
.doc-skel .w40 { width: 40%; } .doc-skel .w50 { width: 50%; } .doc-skel .w60 { width: 60%; } .doc-skel .w70 { width: 70%; } .doc-skel .w90 { width: 90%; }
@keyframes skShine { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .doc-skel .sk { animation: none; } }

/* =====================================================================================================
   v25 · Steps 1–5: the same header on every step page, the "for this facility" bar with the logo, and the
   Step 5 Checklist overview (KPIs, HR checklist sections, LEGAL REGISTER checklist).
   ===================================================================================================== */
.step-for { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.step-for img { height: 30px; max-width: 120px; object-fit: contain; border-radius: 8px; background: #fff; padding: 3px 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.step-for b { font-size: 15px; }
#hr .pw-head, #thirdparty .pw-head, #checklist .pw-head { margin-bottom: 14px; }

.ck-kpis { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.ck-kpi { display: grid; gap: 6px; align-content: start; padding: 16px 18px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 10px 28px -22px rgba(0, 0, 0, .5); }
.ck-kpi > b { font: 800 28px/1 var(--font); color: var(--ink); } .ck-kpi > b small { font-size: 15px; color: var(--muted); font-weight: 700; margin-left: 4px; }
.ck-kpi > span { color: var(--muted); font-size: 13px; }
.ck-kpi.warn > b { color: #d97706; } .ck-kpi.ok > b { color: #059669; }
.ck-kpi.main { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; }
.ck-kpi.main b { font-size: 16px; } .ck-kpi.main small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.ck-ring { --p: 0; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(closest-side, var(--panel) 72%, transparent 73% 100%), conic-gradient(#14b8a6 calc(var(--p) * 1%), rgba(148, 163, 184, .2) 0); }
.ck-ring b { font: 800 18px/1 var(--font) !important; color: var(--ink); }
.ck-bar { display: block; height: 6px; border-radius: 99px; background: rgba(148, 163, 184, .2); overflow: hidden; }
.ck-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #14b8a6, #5eead4); }
.ck-sec { margin-bottom: 16px; }
.ck-sec .hr-sec-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ck-group { border: 1px solid var(--line); border-radius: 14px; margin: 10px 0; background: var(--panel); }
.ck-group summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 140px; align-items: center; gap: 14px; padding: 12px 14px; cursor: pointer; list-style: none; }
.ck-group summary::-webkit-details-marker { display: none; }
.ck-group summary::after { content: '▾'; color: var(--muted); transition: transform .2s; }
.ck-group[open] summary::after { transform: rotate(180deg); }
.ck-group summary { grid-template-columns: minmax(0, 1fr) auto 140px 14px; }
.ck-group .table-wrap { margin: 0 12px 12px; }
.ck-table td, .ck-table th { padding: 9px 10px; vertical-align: middle; }
.ck-table tr.reg-locked .blur-txt { filter: blur(5px); }
@media (max-width: 900px) { .ck-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ck-kpi.main { grid-column: 1 / -1; } }
@media (max-width: 520px) { .ck-kpis { grid-template-columns: minmax(0, 1fr); } .ck-group summary { grid-template-columns: minmax(0, 1fr) 14px; } .ck-group summary .ck-bar, .ck-group summary .muted { grid-column: 1 / -1; } }

/* progress bar: Start + 4 steps + Finished = 6 columns (desktop) */
@media (min-width: 901px) { .flow-steps { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } }

/* Free trial: the PO11 sync panel – values blurred, a padlock with Get Premium on top */
#hr-sync.sync-locked { position: relative; }
#hr-sync.sync-locked .blur-txt { filter: blur(6px); user-select: none; pointer-events: none; }
#hr-sync.sync-locked .hr-sync-txt small { filter: blur(3px); user-select: none; }
#hr-sync .sync-pill { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; cursor: pointer; padding: 6px 6px 6px 6px; background: rgba(8, 30, 28, .82); backdrop-filter: blur(6px); box-shadow: 0 16px 34px -16px rgba(0, 0, 0, .8); }
:root[data-theme="light"] #hr-sync .sync-pill { background: rgba(255, 255, 255, .9); }

/* =====================================================================================================
   v26 · Icons instead of emojis: <i class=i-NAME></i> – line icons in the text colour, sized to the text.
   ===================================================================================================== */
[class^="i-"], [class*=" i-"] { display: inline-block; width: 1.05em; height: 1.05em; flex: none; vertical-align: -.16em; background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; font-style: normal; }
.i-lock { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'5'%20y%3D'11'%20width%3D'14'%20height%3D'10'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M8%2011V7a4%204%200%200%201%208%200v4'%2F%3E%3C%2Fsvg%3E"); }
.i-unlock { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'5'%20y%3D'11'%20width%3D'14'%20height%3D'10'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M8%2011V7a4%204%200%200%201%207.5-2'%2F%3E%3C%2Fsvg%3E"); }
.i-alert { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M10.3%203.9%201.8%2018a2%202%200%200%200%201.7%203h17a2%202%200%200%200%201.7-3L13.7%203.9a2%202%200%200%200-3.4%200z'%2F%3E%3Cpath%20d%3D'M12%209v4M12%2017h.01'%2F%3E%3C%2Fsvg%3E"); }
.i-user { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'8'%20r%3D'4'%2F%3E%3Cpath%20d%3D'M4%2021a8%208%200%200%201%2016%200'%2F%3E%3C%2Fsvg%3E"); }
.i-doc { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M14%203H7a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2V8z'%2F%3E%3Cpath%20d%3D'M14%203v5h5M9%2013h6M9%2017h4'%2F%3E%3C%2Fsvg%3E"); }
.i-clock { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'9'%2F%3E%3Cpath%20d%3D'M12%207v5l3%202'%2F%3E%3C%2Fsvg%3E"); }
.i-book { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%2019.5A2.5%202.5%200%200%201%206.5%2017H20V3H6.5A2.5%202.5%200%200%200%204%205.5z'%2F%3E%3Cpath%20d%3D'M4%2019.5A2.5%202.5%200%200%200%206.5%2022H20v-5'%2F%3E%3C%2Fsvg%3E"); }
.i-link { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M10%2013a5%205%200%200%200%207.5.5l3-3a5%205%200%200%200-7-7l-1.7%201.7'%2F%3E%3Cpath%20d%3D'M14%2011a5%205%200%200%200-7.5-.5l-3%203a5%205%200%200%200%207%207l1.7-1.7'%2F%3E%3C%2Fsvg%3E"); }
.i-camera { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M3%208a2%202%200%200%201%202-2h2.5l1.5-2h6l1.5%202H19a2%202%200%200%201%202%202v10a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'13'%20r%3D'3.5'%2F%3E%3C%2Fsvg%3E"); }
.i-target { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'9'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'5'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'1'%2F%3E%3C%2Fsvg%3E"); }
.i-eye { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M2%2012s3.5-7%2010-7%2010%207%2010%207-3.5%207-10%207S2%2012%202%2012z'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'3'%2F%3E%3C%2Fsvg%3E"); }
.i-gear { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'3'%2F%3E%3Cpath%20d%3D'M19.4%2015a1.7%201.7%200%200%200%20.3%201.8l.1.1a2%202%200%201%201-2.8%202.8l-.1-.1a1.7%201.7%200%200%200-1.8-.3%201.7%201.7%200%200%200-1%201.5V21a2%202%200%201%201-4%200v-.1a1.7%201.7%200%200%200-1.1-1.5%201.7%201.7%200%200%200-1.8.3l-.1.1a2%202%200%201%201-2.8-2.8l.1-.1a1.7%201.7%200%200%200%20.3-1.8%201.7%201.7%200%200%200-1.5-1H3a2%202%200%201%201%200-4h.1a1.7%201.7%200%200%200%201.5-1.1%201.7%201.7%200%200%200-.3-1.8l-.1-.1a2%202%200%201%201%202.8-2.8l.1.1a1.7%201.7%200%200%200%201.8.3H9a1.7%201.7%200%200%200%201-1.5V3a2%202%200%201%201%204%200v.1a1.7%201.7%200%200%200%201%201.5%201.7%201.7%200%200%200%201.8-.3l.1-.1a2%202%200%201%201%202.8%202.8l-.1.1a1.7%201.7%200%200%200-.3%201.8V9a1.7%201.7%200%200%200%201.5%201H21a2%202%200%201%201%200%204h-.1a1.7%201.7%200%200%200-1.5%201z'%2F%3E%3C%2Fsvg%3E"); }
.i-download { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%203v12M7%2010l5%205%205-5M4%2021h16'%2F%3E%3C%2Fsvg%3E"); }
.i-upload { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2021V9M7%2014l5-5%205%205M4%203h16'%2F%3E%3C%2Fsvg%3E"); }
.i-save { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M19%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h11l5%205v11a2%202%200%200%201-2%202z'%2F%3E%3Cpath%20d%3D'M17%2021v-8H7v8M7%203v5h8'%2F%3E%3C%2Fsvg%3E"); }
.i-play { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7%204v16l13-8z'%2F%3E%3C%2Fsvg%3E"); }
.i-bolt { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M13%202%204%2014h7l-1%208%209-12h-7z'%2F%3E%3C%2Fsvg%3E"); }
.i-handshake { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M11%2017l2%202a1.4%201.4%200%200%200%202-2'%2F%3E%3Cpath%20d%3D'M14%2014l2.5%202.5a1.4%201.4%200%200%200%202-2L15%2011l-1-1-3%203a1.4%201.4%200%200%201-2-2l3.3-3.3a3%203%200%200%201%203.4-.6L18%208l3-1v8l-2%201'%2F%3E%3Cpath%20d%3D'M3%207l3-1%204%201M3%207v8l5%204a1.4%201.4%200%200%200%202-2'%2F%3E%3C%2Fsvg%3E"); }
.i-chart { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%2020V10M10%2020V4M16%2020v-7M22%2020H2'%2F%3E%3C%2Fsvg%3E"); }
.i-folder { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M3%207a2%202%200%200%201%202-2h4l2%202h8a2%202%200%200%201%202%202v8a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z'%2F%3E%3C%2Fsvg%3E"); }
.i-building { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M3%2021h18M5%2021V10M19%2021V10M9%2021v-6h6v6M2%2010l10-6%2010%206'%2F%3E%3C%2Fsvg%3E"); }
.i-print { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6%209V3h12v6M6%2018H4a2%202%200%200%201-2-2v-5a2%202%200%200%201%202-2h16a2%202%200%200%201%202%202v5a2%202%200%200%201-2%202h-2'%2F%3E%3Crect%20x%3D'6'%20y%3D'14'%20width%3D'12'%20height%3D'7'%2F%3E%3C%2Fsvg%3E"); }
.i-sparkle { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%203l1.8%205.2L19%2010l-5.2%201.8L12%2017l-1.8-5.2L5%2010l5.2-1.8zM19%2016l.8%202.2L22%2019l-2.2.8L19%2022l-.8-2.2L16%2019l2.2-.8z'%2F%3E%3C%2Fsvg%3E"); }
.i-phone { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M22%2016.9v3a2%202%200%200%201-2.2%202%2019.8%2019.8%200%200%201-8.6-3.1%2019.5%2019.5%200%200%201-6-6A19.8%2019.8%200%200%201%202.1%204.2%202%202%200%200%201%204.1%202h3a2%202%200%200%201%202%201.7c.1.9.4%201.8.7%202.7a2%202%200%200%201-.5%202.1L8%209.8a16%2016%200%200%200%206%206l1.3-1.3a2%202%200%200%201%202.1-.4c.9.3%201.8.6%202.7.7a2%202%200%200%201%201.9%202z'%2F%3E%3C%2Fsvg%3E"); }
.premium-btn .i-lock, .premium-mini .i-lock, .lock-tag .i-lock, .lock-ic.i-lock, .tag.lock-tag .i-lock { background: currentColor; }
.btn > [class^="i-"]:first-child, .icon-btn > [class^="i-"]:first-child, a > [class^="i-"]:first-child { margin-right: .4em; }

:root { --ic-lock: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'5'%20y%3D'11'%20width%3D'14'%20height%3D'10'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M8%2011V7a4%204%200%200%201%208%200v4'%2F%3E%3C%2Fsvg%3E"); }

/* =====================================================================================================
   v27 · Production polish: locked dashboard tiles, one premium look for every lock, aligned icons in buttons
   ===================================================================================================== */
.tile.t2.t2-locked { cursor: pointer; border-style: dashed !important; border-color: rgba(251, 191, 36, .35) !important;
  background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(148, 163, 184, .05) 14px 28px), var(--panel) !important; }
.tile.t2.t2-locked .t2-chip { color: #b45309 !important; background: rgba(251, 191, 36, .16) !important; border-color: rgba(245, 158, 11, .4) !important; }
:root[data-theme="dark"] .tile.t2.t2-locked .t2-chip { color: #fcd34d !important; }
.tile.t2.t2-locked .t2-chip i { width: .95em; height: .95em; background: currentColor !important; border-radius: 0; margin-right: 5px; }
.tile.t2.t2-locked .lock-emblem { width: 42px !important; height: 42px; border-radius: 50%; }
.tile.t2.t2-locked .blur-txt { filter: blur(5px); user-select: none; }
.tile.t2.t2-locked .t2-foot { align-items: center; }
.tile.t2.t2-locked:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -24px rgba(245, 158, 11, .6) !important; }

/* icons inside buttons, tags and pills sit on the text line */
.btn, .icon-btn, .tag, .pill-status, .lock-tag, .t2-chip, .pk-dl, .dl-open, .doc-link { gap: .4em; }
.btn > [class^="i-"], .icon-btn > [class^="i-"] { width: 1.05em; height: 1.05em; }
.btn > [class^="i-"]:first-child, .icon-btn > [class^="i-"]:first-child, a > [class^="i-"]:first-child { margin-right: .35em; }
.tag > [class^="i-"], .lock-tag > [class^="i-"] { width: .95em; height: .95em; margin-right: .3em; vertical-align: -.12em; }
.lock-msg > [class^="i-"], .ev > [class^="i-"], small > [class^="i-"] { width: .95em; height: .95em; }

/* every Get Premium – the same size rhythm, centred content, smooth hover */
.premium-btn, .icon-btn.premium-mini { display: inline-flex !important; align-items: center; justify-content: center; gap: .35em; line-height: 1.1 !important; white-space: nowrap; }
.premium-btn > [class^="i-"], .icon-btn.premium-mini > [class^="i-"] { margin: 0 !important; width: 1em; height: 1em; }
.lock-tag { display: inline-flex !important; align-items: center; gap: .3em; white-space: nowrap; }
.reg-lock-pill, .ck-lock { align-items: center; }
.reg-lock-pill:hover .premium-btn, .ck-lock .premium-mini:hover { filter: saturate(1.1) brightness(1.04); }

/* =====================================================================================================
   v28 · Theme contrast: tooltips always dark-on-light / light-on-dark; warnings amber in dark mode and crimson in
   light mode; premium notices readable in both.
   ===================================================================================================== */
/* small hover tips: a dark tip in light mode, a light tip in dark mode – never the page colour */
.hovercard:not(.wide) { background: #0f2a2a !important; color: #f1f7f5 !important; border: 1px solid rgba(255, 255, 255, .08) !important; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .45) !important; }
.hovercard:not(.wide) * { color: inherit !important; }
:root[data-theme="dark"] .hovercard:not(.wide) { background: #eef6f4 !important; color: #0f2a2a !important; border-color: rgba(0, 0, 0, .08) !important; }
/* detail cards: the panel colour with the ink colour */
.hovercard.wide { background: var(--panel) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; }
.hovercard.wide :is(b, p, span, small, li, dt, dd):not(.pill-status):not(.tag) { color: inherit; }
.hovercard.wide .hc-line, .hovercard.wide small { color: var(--muted) !important; }

/* warnings: crimson in light mode (amber reads poorly on white), amber in dark mode */
:root:not([data-theme="dark"]) { --warn: #be123c; --warn-soft: rgba(190, 18, 60, .08); --bad: #9f1239; --bad-soft: rgba(159, 18, 57, .09); }
:root[data-theme="dark"] { --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, .13); }
:root:not([data-theme="dark"]) :is(.tag.warn, .pill-status.warn, .warn-txt, .alert.warn, .conf.medium, .conf.low, .jr-state.warn, .t2.warn .t2-chip, .ck-kpi.warn > b, .t2-chip.warn) { color: var(--warn) !important; }
:root:not([data-theme="dark"]) :is(.tag.warn, .pill-status.warn, .t2.warn .t2-chip) { background: var(--warn-soft) !important; border-color: rgba(190, 18, 60, .25) !important; }
:root:not([data-theme="dark"]) .alert.warn { background: var(--warn-soft) !important; border-color: rgba(190, 18, 60, .3) !important; }
:root:not([data-theme="dark"]) .t2.warn .t2-ring b, :root:not([data-theme="dark"]) .tl.warn .tl-date b { color: var(--warn) !important; }

/* premium notices (gold) – readable on white: deeper gold text, soft gold surface */
:root:not([data-theme="dark"]) :is(.lock-tag, .tag.lock-tag, .t2.t2-locked .t2-chip) { color: #92400e !important; background: #fef3c7 !important; border-color: #fcd34d !important; }
:root:not([data-theme="dark"]) :is(.trial-lock, .dl-item.dl-locked, .dd-lock, .reg-lock-pill) { background: linear-gradient(120deg, #fffbeb, #f0fdfa) !important; border-color: #fcd34d !important; }
:root:not([data-theme="dark"]) :is(.trial-note) { background: #fffbeb; border-color: #f59e0b; color: #78350f; }
:root:not([data-theme="dark"]) .lock-msg { color: #57534e !important; }

/* v28b · contrast: secondary text and labels at least 4.5:1 in light mode; dark-mode teal badges with dark digits */
:root:not([data-theme="dark"]) { --muted: #4b5f5c; --ok: #047857; --ok-soft: rgba(4, 120, 87, .09); }
:root:not([data-theme="dark"]) :is(.muted, .sec-sub, th, .tag.na, .lock, .reg-doc-k, .pw-steps small, .t2-date, small) { color: var(--muted); }
:root:not([data-theme="dark"]) :is(.ok, .tag.ok, .jr-state.done, .hr-pdf.ok, small.ok) { color: var(--ok) !important; }
:root:not([data-theme="dark"]) .jr-state.done { background: var(--ok-soft) !important; }
:root:not([data-theme="dark"]) .pp-lockbar, :root:not([data-theme="dark"]) .pp-lockbar * { color: #3f514e !important; }
:root[data-theme="dark"] :is(#tabs button.active .sb-step, .pw-num, .pw-steps .on i, .pw-steps button.on i, .vtoggle .active, .chips button.active, .seg button.on, .filter-chips .active, .flt.active, button.on > i) { color: #042f2c !important; }
:root[data-theme="dark"] .icon-btn.del, :root[data-theme="dark"] .danger-txt { color: #fda4af !important; }
:root[data-theme="dark"] .pend-count { color: #fff !important; background: #be123c !important; }
:root[data-theme="dark"] .jr-track li.done i { color: #04221b !important; }
:root:not([data-theme="dark"]) :is(.vchip, .scope.all, .pill-status.na) { color: #3f514e !important; }
:root:not([data-theme="dark"]) .pend-count { color: #fff !important; background: #be123c !important; }

/* icons keep their own look inside containers that style every <i> (badges, list bullets) */
i[class^="i-"], i[class*=" i-"] { width: 1.05em !important; height: 1.05em !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; display: inline-block !important; background: currentColor !important; flex: none !important; }
#hx-activity li > i { color: var(--brand, #0f766e); }
:root[data-theme="dark"] #hx-activity li > i { color: #5eead4; }

/* v28c · free trial: the training / 3rd-party dates and details are Premium – values blurred and read-only */
.trial-locked-box :is(.dd-global input, .dd-own, .dd-what small, .dd-global small, .dd-grid input, .link-btn) { filter: blur(4px); user-select: none; pointer-events: none; }
.trial-locked-box .dd-lock { filter: none; opacity: 1; }

/* v28d · active sidebar step number: a clear teal pill in both themes (dark mode had dark digits on a dark disc) */
.sb-nav button.active .sb-step:not(.sb-live) { background: #0f766e !important; border-color: #0f766e !important; color: #fff !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, .18); transition: background-color .2s, color .2s; }
:root[data-theme="dark"] .sb-nav button.active .sb-step:not(.sb-live) { background: #2dd4bf !important; border-color: #2dd4bf !important; color: #042f2c !important; box-shadow: 0 0 0 2px rgba(45, 212, 191, .22); }