/* IX PLATFORM FRONTEND — THE ESTABLISHED IX K9 NOTES/TRAINING STANDARD, TRANSCRIBED VERBATIM (owner correction, 12 Oct 2026).
   Sources (read-only reference; never modified): domains/k9/frontend/src/styles/design.js (BG, SHARED, BgLayers) and
   domains/k9/frontend/src/pages/Notes.jsx (its page CSS; Training.jsx uses the same rules under the tr- prefix).
   🔒 The three blocks marked VERBATIM are byte-identical to their sources — tests/integration/platformWeb.test.js WP6 fails
   the moment either drifts. Fonts are self-hosted (the K9 app loads the same families). */
@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url(/platform/assets/fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:700;font-display:swap;src:url(/platform/assets/fonts/inter-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:800;font-display:swap;src:url(/platform/assets/fonts/inter-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:900;font-display:swap;src:url(/platform/assets/fonts/inter-latin-900-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-display:swap;src:url(/platform/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:700 900;font-display:swap;src:url(/platform/assets/fonts/ibm-plex-mono-latin-700-normal.woff2) format('woff2')}
:root{--ix-ground:#020611;--ix-ground-deep:#010409;--ix-accent:#00c8ff;--ix-text:#e9f6ff;--ix-font-mono:'IBM Plex Mono',monospace;--ix-font-ui:'Inter',system-ui,sans-serif;}

/* ── VERBATIM: design.js BG ── */
*{margin:0;padding:0;box-sizing:border-box}

html,body,#root{
  width:100%;
  min-height:100%;
  font-family:var(--ix-font-ui);
  background:#03060d;
  color:#e8f7ff;
}

body{
  overflow-x:hidden;
}

/* ── VERBATIM: design.js SHARED ── */
.ix-outer{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1000px;
  margin:0 auto;
  padding:22px 20px 36px;
}

.ix-hero{
  text-align:center;
  padding:10px 20px 22px;
}

.ix-eyebrow{
  font-family:'Courier New',monospace;
  font-size:11px;
  font-weight:800;
  letter-spacing:4px;
  text-transform:uppercase;
  color:#789ab4;
  margin-bottom:16px;
}

.ix-logo-sys{
  position:relative;
  width:80px;
  height:80px;
  margin:0 auto 18px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.ix-r4,.ix-r3,.ix-r2{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(0,229,255,0.10);
}

.ix-r4{ inset:-18px; }
.ix-r3{ inset:-10px; }
.ix-r2{ inset:-3px; }

.ix-r1{
  width:80px;
  height:80px;
  border-radius:22px;
  background:linear-gradient(145deg,rgba(0,229,255,.22),rgba(3,8,16,.96));
  border:1px solid rgba(0,229,255,.38);
  box-shadow:
    0 0 0 6px rgba(0,229,255,.04),
    0 0 28px rgba(0,229,255,.40),
    inset 0 0 16px rgba(0,229,255,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.ix-r1 img{
  width:72%;
  height:72%;
  object-fit:contain;
}

.ix-h1{
  font-size:38px;
  font-weight:900;
  letter-spacing:5px;
  color:#fff;
  line-height:1;
  text-shadow:
    0 0 16px rgba(0,234,255,.70),
    0 0 48px rgba(0,234,255,.24),
    0 0 100px rgba(0,234,255,.12);
  margin-bottom:9px;
}

.ix-sub{
  font-family:'Courier New',monospace;
  font-size:13px;
  font-weight:800;
  letter-spacing:4px;
  text-transform:uppercase;
  color:#00e5ff;
  text-shadow:0 0 12px rgba(0,229,255,.42);
}

.ix-divider{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 auto 20px;
  width:min(700px,90%);
}

.ix-div-line{
  flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,229,255,.44),transparent);
}

.ix-div-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#00e5ff;
  box-shadow:0 0 12px rgba(0,229,255,.95),0 0 24px rgba(184,77,255,.30);
}

.ix-footer{
  text-align:center;
  padding:20px 0 6px;
  font-size:11px;
  color:rgba(255,255,255,.22);
  letter-spacing:.4px;
  font-family:'Courier New',monospace;
}

/* ── VERBATIM: Notes.jsx page CSS ── */

.g {
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(145deg, rgba(8,20,42,.94), rgba(3,7,16,.985)),
    radial-gradient(circle at 78% 0%, rgba(0,229,255,.10), transparent 42%);
  border:1px solid rgba(0,229,255,.22);
  border-radius:22px;
  box-shadow:
    0 0 24px rgba(0,229,255,.12),
    0 0 60px rgba(0,100,255,.045),
    inset 0 1px 0 rgba(255,255,255,.055);
}
.g::before {
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(125deg,rgba(255,255,255,.055),transparent 28%),
    radial-gradient(circle at 50% 0%,rgba(255,210,120,.035),transparent 30%);
}
.g::after {
  content:"";position:absolute;top:0;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,229,255,.68),rgba(184,77,255,.42),rgba(0,229,255,.68),transparent);
  box-shadow:0 0 15px rgba(0,229,255,.34);
}
.g > * { position:relative;z-index:1; }

.ix-outer { max-width:1600px !important; padding-top:0 !important; padding-bottom:0 !important; }

.nt-shell {
  width:min(1560px,100%);
  height:100vh;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:0;
}

.nt-hero-bar {
  display:flex;align-items:center;justify-content:center;gap:18px;
  padding:14px 22px 12px;flex-shrink:0;
  border-bottom:1px solid rgba(0,229,255,.12);
}
.nt-hero-logo {
  width:58px;height:58px;border-radius:16px;
  background:linear-gradient(145deg,rgba(0,229,255,.22),rgba(3,8,16,.96));
  border:1px solid rgba(0,229,255,.38);
  box-shadow:0 0 22px rgba(0,229,255,.42),0 0 50px rgba(0,229,255,.12);
  display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;
}
.nt-hero-logo img { width:82%;height:82%;object-fit:contain; }
.nt-hero-title { font-size:22px;font-weight:900;letter-spacing:3.5px;color:#fff;text-shadow:0 0 18px rgba(0,234,255,.72),0 0 40px rgba(0,234,255,.18);line-height:1; }
.nt-hero-sub { font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:#00c8ff;margin-top:5px; }

.nt-content-area {
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 22px 10px;
}
.nt-content-area::-webkit-scrollbar{width:4px}
.nt-content-area::-webkit-scrollbar-track{background:transparent}
.nt-content-area::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(0,229,255,.45),rgba(0,100,180,.18));border-radius:999px;}

.nt-info-row {
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin-bottom:10px;padding-top:8px;
}
.nt-pill { padding:10px 14px;border-radius:16px; }
.nt-pill-lbl { font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:900;letter-spacing:1.6px;text-transform:uppercase;color:#00c8ff;margin-bottom:4px; }
.nt-pill-val { font-size:15px;font-weight:900;color:#fff; }
.nt-pill-sub { font-size:11px;color:#b8c7d9;margin-top:2px;font-weight:700; }

.nt-body {
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:12px;
  align-items:start;
}

.nt-left { display:flex;flex-direction:column;gap:12px; }
.nt-right { display:flex;flex-direction:column;gap:12px; }

.nt-card { padding:14px 16px;display:flex;flex-direction:column;gap:10px; }

.nt-pt {
  font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:900;
  letter-spacing:1.8px;text-transform:uppercase;color:#00c8ff;
  display:flex;align-items:center;gap:8px;margin-bottom:4px;
}
.nt-pt::before {
  content:"";width:4px;height:14px;border-radius:4px;
  background:linear-gradient(180deg,#00c8ff,#008cff);
  box-shadow:0 0 10px rgba(0,229,255,.62);
}

.nt-lbl {
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:900;
  letter-spacing:1.6px;text-transform:uppercase;color:#b8c7d9;
  display:block;margin-bottom:5px;
}

.nt-info-lbl { color:#00c8ff; }

.nt-info-val {
  font-size:15px;font-weight:800;color:#fff;
  margin-bottom:8px;overflow-wrap:anywhere;
}

.nt-info-sub { font-size:11px;color:#8fa6bd;margin-top:2px; }

/* Character counter */
.nt-char-bar-outer {
  width:100%;height:6px;border-radius:999px;
  background:rgba(38,62,90,.45);overflow:hidden;margin-bottom:8px;
}
.nt-char-bar-inner {
  height:100%;border-radius:999px;
  box-shadow:0 0 8px rgba(0,229,255,.55);
  transition:width .2s ease, background .2s ease;
}
.nt-char-count {
  font-family:'IBM Plex Mono',monospace;font-size:20px;font-weight:900;color:#00c8ff;
}
.nt-char-hint {
  font-family:'IBM Plex Mono',monospace;font-size:10px;color:#4f6f8c;
  margin-top:4px;letter-spacing:.4px;
}

.nt-field { display:flex;flex-direction:column;gap:5px; }

.nt-select, .nt-input, .nt-textarea {
  width:100%;padding:9px 12px;border-radius:12px;
  border:1px solid rgba(0,191,255,.24);background:rgba(4,9,22,.84);
  color:#d9e7f5;font-size:14px;outline:none;font-family:'Inter',sans-serif;
  transition:border-color .15s,box-shadow .15s;
}
.nt-select:focus, .nt-input:focus, .nt-textarea:focus {
  border-color:rgba(0,229,255,.58);box-shadow:0 0 14px rgba(0,229,255,.18);
}
.nt-select { height:38px; }
.nt-textarea {
  min-height:280px;resize:vertical;line-height:1.6;font-size:14px;
}
.nt-textarea::placeholder,.nt-input::placeholder { color:#4f6f8c; }

.nt-btn {
  width:100%;padding:13px;font-size:12px;font-weight:900;letter-spacing:1.8px;
  text-transform:uppercase;border-radius:12px;cursor:pointer;
  font-family:'IBM Plex Mono',monospace;position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(0,229,255,.23),rgba(0,95,185,.13)),linear-gradient(145deg,rgba(255,255,255,.04),transparent);
  color:#fff;border:1px solid rgba(0,229,255,.68);
  box-shadow:0 0 22px rgba(0,229,255,.28),inset 0 0 14px rgba(0,229,255,.07);
  transition:all .18s ease;
}
.nt-btn::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(122deg,rgba(255,255,255,.085),transparent 28%);}
.nt-btn:hover{transform:translateY(-1px);box-shadow:0 0 30px rgba(0,229,255,.52);}
.nt-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;}

.nt-status{padding:10px 13px;border-radius:12px;font-size:12px;font-weight:800;font-family:'IBM Plex Mono',monospace;line-height:1.5;}
.nt-success{background:linear-gradient(145deg,rgba(48,240,106,.08),rgba(4,9,22,.86));border:1px solid rgba(48,240,106,.42);color:#99ffb4;}
.nt-error{background:linear-gradient(145deg,rgba(184,77,255,.10),rgba(4,9,22,.86));border:1px solid rgba(184,77,255,.48);color:#d9c0ff;}

@media(max-width:960px){
  .nt-shell{height:auto;overflow:visible;}
  .nt-content-area{overflow:visible;height:auto;}
  .nt-body{grid-template-columns:1fr;}
  .nt-info-row{grid-template-columns:1fr 1fr;}
}
@media(max-width:700px){
  .nt-content-area{padding:0 14px 16px;}
  .nt-hero-bar{padding:12px 14px 10px;}
  .nt-hero-logo{width:46px;height:46px;}
  .nt-hero-title{font-size:18px;letter-spacing:2.5px;}
  .nt-info-row{grid-template-columns:1fr;}
  .nt-card{padding:12px;}
  .nt-textarea{min-height:200px;}
  /* readability: bigger, bolder text + taller tap targets (no layout change) */
  .nt-pill-lbl{font-size:13px;font-weight:900;}
  .nt-pill-val{font-size:19px;font-weight:900;}
  .nt-pill-sub{font-size:14px;font-weight:800;}
  .nt-info-lbl{font-size:13px;font-weight:900;}
  .nt-info-val{font-size:17px;font-weight:900;}
  .nt-info-sub{font-size:14px;font-weight:800;}
  .nt-pt{font-size:15px;font-weight:900;}
  .nt-lbl{font-size:14px;font-weight:900;color:#bfe3f5;}
  .nt-input,.nt-select{font-size:17px;padding:13px 14px;}
  select.nt-select{height:48px;}
  .nt-textarea{font-size:16px;}
  .nt-btn{font-size:16px;font-weight:900;padding:16px;}
  .nt-status{font-size:15px;font-weight:800;}
  .nt-char-count{font-size:13px;font-weight:800;}
  .nt-char-hint{font-size:13px;font-weight:700;}
}

/* ── BgLayers (domains/k9/frontend/src/styles/design.js, BgLayers()) — the same fixed background layer, as a class ── */
.ix-bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:
      radial-gradient(circle at 18% 18%, rgba(0,229,255,0.14), transparent 34%),
      radial-gradient(circle at 82% 74%, rgba(160,75,255,0.11), transparent 38%),
      radial-gradient(circle at 50% 100%, rgba(0,90,180,0.14), transparent 46%),
      linear-gradient(145deg, #02040a 0%, #061120 48%, #02040a 100%);}

/* ── PLATFORM COMPOSITION — ONLY what the Notes/Training standard has no rule for, built from values ALREADY in it
      (no new size, colour, radius or spacing): list rows (= .nt-pill geometry inside a .nt-card), a link-row nav, hidden. ── */
.px-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:16px;
  border:1px solid rgba(0,191,255,.24);background:rgba(4,9,22,.84);}
.px-row .px-l{display:flex;flex-direction:column;min-width:0}
.px-row .nt-info-val{margin-bottom:0}
.px-btn-sm{width:auto;padding:9px 12px;white-space:nowrap;flex-shrink:0}
.px-ghost{background:rgba(4,9,22,.84);box-shadow:none;border-color:rgba(0,191,255,.24)}
.px-danger{border-color:rgba(184,77,255,.48);background:linear-gradient(145deg,rgba(184,77,255,.10),rgba(4,9,22,.86));box-shadow:none}
.px-tag{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:900;letter-spacing:1.6px;text-transform:uppercase;color:#00c8ff;white-space:nowrap}
.px-tag.ok{color:#99ffb4}.px-tag.dim{color:#8fa6bd}
a.nt-btn{display:block;text-align:center;text-decoration:none}
a.nt-btn.px-btn-sm{display:inline-block}
.px-nav{display:flex;justify-content:center;gap:10px;padding:8px 0 4px}
.px-nav a,.px-nav button{width:auto;padding:9px 14px}
.px-stack{display:flex;flex-direction:column;gap:10px}
.px-narrow{max-width:520px;width:100%;margin:0 auto}
.nt-status{display:none}.nt-status.on{display:block}
.hidden{display:none !important}

/* ── R25 ADMINISTRATION SHELL — the IX MANAGER KPI DASHBOARD LAYOUT ONLY (owner, 13 Oct 2026): header · sidebar · main · responsive.
      The rules between the VERBATIM markers are copied byte-for-byte from domains/k9/frontend/src/pages/ManagerKpi.jsx (layout
      selectors only — no KPI card, ring, chart or analytics rule is carried). WP9 fails if they drift. Variables scoped to the shell. */
body.mgr{--br:rgba(0,180,255,0.16);--c:#00c8ff;--soft:#8fa6bd;--gc:0 0 16px rgba(0,229,255,0.30),0 0 40px rgba(0,229,255,0.09);--mu:#4f6f8c;margin:0}
/* ── VERBATIM: ManagerKpi.jsx layout rules ── */
.root{
  display:flex;
  width:100vw;
  height:100vh;
  min-height:640px;
  position:relative;
  z-index:1;
  overflow:hidden;
}
.sb{
  width:210px;
  min-width:210px;
  height:100%;
  min-height:640px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:linear-gradient(180deg,rgba(4,7,16,0.15),rgba(4,7,16,0.97) 35%);
  border-right:1px solid var(--br);
  padding:16px 13px 14px;
  flex-shrink:0;
  overflow:hidden;
}
.logo-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}
.logo-row img{
  width:46px;
  height:46px;
  border-radius:9px;
  object-fit:contain;
  border:1px solid rgba(0,229,255,0.18);
  box-shadow:0 0 12px rgba(0,229,255,0.16);
  flex-shrink:0;
}
.logo-title{
  font-size:13px;
  font-weight:800;
  letter-spacing:.8px;
  color:var(--c);
  line-height:1.2;
}
.logo-sub{
  font-size:10px;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:var(--mu);
  margin-top:3px;
  font-family:'IBM Plex Mono',monospace;
}
.sdiv{
  height:1px;
  margin:12px 0;
  background:linear-gradient(90deg,rgba(0,180,255,0.22),transparent);
}
.menu{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.mi{
  padding:12px 14px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  transition:all .17s;
  font-size:14px;
  font-weight:600;
  color:var(--mu);
  text-align:left;
  display:flex;
  align-items:center;
  gap:9px;
  line-height:1.2;
}
.mi:hover{
  border-color:rgba(0,191,255,0.26);
  background:rgba(0,191,255,0.07);
  color:var(--c);
}
.mi.act{
  background:linear-gradient(135deg,rgba(0,220,255,0.15),rgba(0,100,200,0.08));
  border-color:rgba(0,229,255,0.58);
  color:var(--c);
  font-weight:700;
  box-shadow:var(--gc),inset 0 0 14px rgba(0,229,255,0.06);
}
.av-card{
  padding:13px;
  border-radius:12px;
  border:1px solid var(--br);
  background:linear-gradient(145deg,rgba(0,229,255,0.05),rgba(3,7,16,0.88));
  position:relative;
  overflow:hidden;
  flex-shrink:0;
}
.av-card::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,229,255,0.38),transparent);
}
.av{
  width:36px;
  height:36px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,229,255,0.20),rgba(3,7,16,.97));
  border:1px solid rgba(0,229,255,0.32);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:800;
  color:var(--c);
  margin-bottom:7px;
}
.av-name{
  font-size:16px;
  font-weight:800;
  color:#fff;
  margin-bottom:4px;
}
.av-role{
  font-size:13px;
  color:var(--soft);
  font-family:'IBM Plex Mono',monospace;
  letter-spacing:.6px;
  margin-bottom:12px;
}
.admin-btn{
  width:100%;
  padding:10px 12px;
  border-radius:9px;
  border:1px solid rgba(0,229,255,0.58);
  background:linear-gradient(135deg,rgba(0,220,255,0.15),rgba(0,100,200,0.08));
  color:#00c8ff;
  cursor:pointer;
  font-size:13px;
  font-weight:700;
  letter-spacing:1px;
  font-family:'IBM Plex Mono',monospace;
  box-shadow:0 0 16px rgba(0,229,255,0.30),inset 0 0 14px rgba(0,229,255,0.06);
  transition:.17s ease;
}
.admin-btn:hover{
  color:#fff;
  border-color:rgba(0,229,255,0.85);
  box-shadow:0 0 24px rgba(0,229,255,0.45),inset 0 0 14px rgba(0,229,255,0.08);
}
.main{
  flex:1;
  min-width:0;
  height:100%;
  min-height:640px;
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  padding:14px 16px;
  gap:12px;
}
.mobile-header{
  display:none;
}
.mh-wrap{
  background:linear-gradient(180deg,rgba(4,7,16,0.65),rgba(4,7,16,0.99));
  border-bottom:1px solid rgba(0,180,255,0.16);
  position:relative;
  z-index:20;
}
.mh-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 16px;
  border-bottom:1px solid rgba(0,180,255,0.10);
  gap:10px;
}
.mh-logo{
  display:flex;
  align-items:center;
  gap:10px;
}
.mh-logo img{
  width:40px;
  height:40px;
  border-radius:9px;
  object-fit:contain;
  border:1px solid rgba(0,229,255,0.20);
}
.mh-title{
  font-size:14px;
  font-weight:800;
  color:#00c8ff;
  letter-spacing:.8px;
  line-height:1.1;
}
.mh-sub{
  font-size:9.5px;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:#4f6f8c;
  font-family:'IBM Plex Mono',monospace;
  margin-top:3px;
}
.mh-av-card{
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid rgba(0,180,255,0.16);
  background:rgba(0,229,255,0.04);
}
.mh-av{
  width:32px;
  height:32px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,229,255,0.22),rgba(3,7,16,.97));
  border:1px solid rgba(0,229,255,0.35);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:800;
  color:#00c8ff;
  flex-shrink:0;
}
.mh-name{
  font-size:16px;
  font-weight:800;
  color:#fff;
  line-height:1;
}
.mh-role{
  font-size:13px;
  color:#8fa6bd;
  font-family:'IBM Plex Mono',monospace;
  margin-top:2px;
}
.mh-nav{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  padding:11px 14px 12px;
}
.mh-item{
  padding:9px 10px;
  border-radius:9px;
  cursor:pointer;
  font-size:12px;
  font-weight:700;
  border:1px solid rgba(0,180,255,0.22);
  background:rgba(0,180,255,0.05);
  color:#8fa6bd;
  font-family:'Inter',system-ui,sans-serif;
  line-height:1.2;
  text-align:center;
}
.mh-item.act{
  border-color:rgba(0,229,255,0.60);
  background:linear-gradient(135deg,rgba(0,220,255,0.16),rgba(0,100,200,0.10));
  color:#00c8ff;
  box-shadow:0 0 14px rgba(0,229,255,0.28);
}
@media(max-height:760px){
  .root{min-height:620px}
  .main{min-height:620px;padding:9px 11px;gap:7px}
  .sb{min-height:620px;padding:12px 10px 10px}}
@media(max-width:1100px){

  .root{
    flex-direction:column;
    height:auto;
    min-height:100vh;
    overflow:visible;
  }

  .sb{
    display:none!important;
  }

  .mobile-header{
    display:block;
  }

  .main{
    height:auto;
    min-height:auto;
    overflow:visible;
    padding:10px 12px 28px;
    gap:12px;
  }}
@media(max-width:560px){
  .mh-top{
    flex-direction:column;
    align-items:stretch;
  }

  .mh-av-card{
    justify-content:flex-start;
  }

  .mh-nav{
    grid-template-columns:1fr;
  }}
/* ── VERBATIM: ManagerKpi.jsx page heading (.topbar · .hd · .ck clock) ── */
.topbar{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.hd{
  flex:1;
  text-align:center;
}
.hd h1{
  font-size:26px;
  font-weight:800;
  letter-spacing:3.5px;
  line-height:1;
  color:#fff;
  text-shadow:0 0 22px rgba(0,234,255,0.52),0 0 60px rgba(0,234,255,0.18);
}
.hd p{
  color:#00c8ff;
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:3.5px;
  text-transform:uppercase;
  margin-top:6px;
  text-shadow:0 0 14px rgba(0,229,255,0.45);
}
.ck{
  padding:12px 16px;
  flex-shrink:0;
  min-width:158px;
  text-align:right;
}
.ck .time{
  font-family:'IBM Plex Mono',monospace;
  font-size:23px;
  font-weight:700;
  color:#fff;
  text-shadow:0 0 12px rgba(0,229,255,0.48);
  letter-spacing:.4px;
  line-height:1;
}
.ck .dt{
  color:var(--c);
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  letter-spacing:.5px;
  margin-top:5px;
  white-space:nowrap;
  font-weight:500;
}
@media(max-height:760px){
  .hd h1{font-size:22px;letter-spacing:2.6px}
  .hd p{font-size:10px;margin-top:4px}
  .ck{padding:9px 12px}
  .ck .time{font-size:20px}
  .ck .dt{font-size:11px}}
@media(max-width:1100px){

  .topbar{
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:2px 0;
  }

  .hd{
    width:100%;
    text-align:center;
  }

  .hd h1{
    font-size:18px;
    letter-spacing:2px;
    text-align:center;
  }

  .hd p{
    font-size:12px;
    letter-spacing:2.5px;
    text-align:center;
    margin-top:5px;
  }

  .ck{
    width:100%;
    text-align:center;
    padding:11px 14px;
    min-width:unset;
  }

  .ck .time{
    font-size:26px;
    text-align:center;
  }

  .ck .dt{
    font-size:14px;
    text-align:center;
    font-weight:500;
    white-space:normal;
  }}
@media(max-width:560px){

  .hd h1{
    font-size:15px;
    letter-spacing:1.5px;
  }

  .hd p{
    font-size:10px;
    letter-spacing:1.6px;
  }

  .ck .time{
    font-size:22px;
  }}
/* the heading's clock box glass — ManagerKpi.jsx .g rules, SCOPED to .topbar so the Notes content cards keep their own .g */
.topbar .g{
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(7,17,36,0.92),rgba(3,6,14,0.97));
  border:1px solid var(--br);
  border-radius:16px;
  box-shadow:
    0 3px 22px rgba(0,0,0,0.40),
    inset 0 0 0 0.5px rgba(0,229,255,0.05),
    inset 0 1px 0 rgba(255,255,255,0.03);
}
.topbar .g::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(122deg,rgba(255,255,255,0.055) 0%,transparent 28%),
    radial-gradient(ellipse 70% 50% at 85% 0%,rgba(0,210,255,0.10),transparent 52%);
}
.topbar .g>*{
  position:relative;
  z-index:1;
}
/* ── shell composition (platform): section labels, context switcher, content flow ── */
.mgr .sb-sec{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--mu);margin:10px 4px 2px}
.mgr .menu a.mi,.mgr .mh-nav a.mh-item{text-decoration:none}
.mgr .ctx{width:100%;margin-top:8px}
.mgr .sb{overflow-y:auto}
.mgr .main .nt-content-area{height:auto;overflow:visible}

/* ── SYSTEMS COMMAND BOARD (owner-locked 13 Oct 2026): the IX SYSTEMS heading and the approved icons ONLY — the icon is the entry.
      Rows fill from the LEFT (IX Cards first, top-left); a short last row stays left; phones use standard app-icon sizes. ── */
.sys-grid{display:grid;grid-template-columns:repeat(auto-fill,90px);justify-content:start;gap:22px;padding:12px 4px;width:100%}
.sys-tile{width:100%;display:block;padding:0;border:0;background:none;cursor:pointer;border-radius:22%;transition:transform .15s ease,filter .15s ease}
.sys-tile:hover,.sys-tile:focus-visible{transform:translateY(-2px);filter:drop-shadow(0 0 14px rgba(0,200,255,0.45));outline:none}
.sys-tile img{width:100%;aspect-ratio:1/1;border-radius:22%;display:block}
@media(max-width:1100px){.sys-grid{grid-template-columns:repeat(auto-fill,72px);gap:18px}}
@media(max-width:560px){.sys-grid{grid-template-columns:repeat(auto-fill,52px);gap:16px 18px;padding:8px 4px}}

/* ── Command Board: SYSTEMS | HARDWARE | PRODUCTS under the page heading, spanning the page ── */
.board-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;margin-bottom:6px}
.board-tab{width:100%}
.board-tab.act{border-color:rgba(0,200,255,0.65);box-shadow:0 0 14px rgba(0,229,255,0.25)}
@media(max-width:560px){.board-tabs{gap:8px}}
/* R50 rendered-screen findings (My IX Contacts): links in lists take the IX accent, not the browser default; a short enquiry box */
.px-link{color:#7fd8ff;text-decoration:none;font-weight:600}.px-link:hover,.px-link:focus-visible{text-decoration:underline}
.nt-textarea.px-short{min-height:110px}

/* ── R53 (owner 14 Oct 2026) — existing IX tokens and classes only; no new colours or type sizes ── */
/* R53-03 the IX Token / card QR at a practical, scannable size */
.px-qr{width:100%;max-width:200px;height:auto;display:block;margin:6px auto;background:#fff;border-radius:12px;padding:8px}
@media(max-width:560px){.px-qr{max-width:180px}}
/* an icon whose artwork is not yet owner-approved: the name only (internal preview), same tile geometry */
.sys-tile.txt{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;text-align:center;padding:6px;border:1px solid rgba(0,200,255,.35);background:rgba(4,9,22,.84);
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:900;letter-spacing:1px;color:#00c8ff;text-transform:uppercase;line-height:1.3}
/* R53-21 a system's dashboard: its management icons */
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;width:100%}
.doc-tile{display:flex;flex-direction:column;gap:6px;text-decoration:none;cursor:pointer;transition:transform .15s ease,filter .15s ease}
.doc-tile:hover,.doc-tile:focus-visible{transform:translateY(-2px);filter:drop-shadow(0 0 12px rgba(0,200,255,0.35));outline:none}
@media(max-width:560px){.doc-grid{grid-template-columns:1fr}}
/* R53-16 one row per shared item, the switch on the right */
.px-tog{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:16px;border:1px solid rgba(0,191,255,.16);background:rgba(4,9,22,.6)}
.px-tog .px-l{display:flex;flex-direction:column;min-width:0;overflow:hidden}.px-tog .nt-info-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.px-tog input[type=checkbox]{width:44px;height:24px;flex-shrink:0;accent-color:#00c8ff;cursor:pointer}
/* R53-11 photograph: drop, browse, preview */
.px-drop{display:flex;align-items:center;gap:14px;padding:14px;border:1px dashed rgba(0,200,255,.45);border-radius:16px;background:rgba(4,9,22,.6);cursor:pointer}
.px-drop.over{border-style:solid;box-shadow:0 0 14px rgba(0,229,255,0.25)}
.px-photo{width:96px;height:96px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1px solid rgba(0,200,255,.35);background:rgba(4,9,22,.84)}
/* R53-14 the completed card (the holder's own view) */
.px-cardview{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
/* commercial documents: line editor and tables scroll inside their card, never the page */
.px-scroll{overflow-x:auto;width:100%}
.px-table{width:100%;border-collapse:collapse;font-size:13px;color:#e9f6ff}
.px-table th,.px-table td{padding:8px 6px;border-bottom:1px solid rgba(0,191,255,.16);text-align:left;vertical-align:top}
.px-table .n{text-align:right;white-space:nowrap}
.px-table input,.px-table select{min-width:70px}
.px-row.wrap{flex-wrap:wrap}
.doc-tile .px-tag{white-space:normal;line-height:1.5}
/* R53 owner review: on a phone the section menu is COLLAPSED behind one button (the full sidebar stays on desktop) — native <details>, no script */
.mh-menu{width:100%}
.mh-menu>summary{list-style:none;display:block;text-align:center;cursor:pointer}
.mh-menu>summary::-webkit-details-marker{display:none}
.mh-menu>summary::after{content:" ▾"}
.mh-menu[open]>summary::after{content:" ▴"}
.mh-menu[open]>.mh-nav{margin-top:8px}
.mh-menu:not([open])>.mh-nav{display:none!important}
/* IX INTELLIGENT SIDEBAR (owner lock 14 Oct 2026) — additive rules after the verbatim Manager KPI blocks */
.sb-loc{font-size:11px;letter-spacing:.08em;color:var(--txt-dim,#8fa3bf);margin:6px 4px 10px;text-transform:uppercase}
.sb-fold>summary{cursor:pointer;list-style:none}
.sb-fold>summary::-webkit-details-marker{display:none}
.sb-fold>summary::after{content:" ▸"}
.sb-fold[open]>summary::after{content:" ▾"}
.sb-list a.mi{font-size:13px}
.sb-pin,.sb-collapse,.sb-expand{background:none;border:1px solid rgba(80,160,255,.25);color:inherit;border-radius:10px;padding:6px 10px;margin:6px 4px;cursor:pointer;font:inherit;font-size:12px}
.sb-pin[aria-pressed="true"]{border-color:rgba(80,200,255,.7)}
.sb-next a.mi{border:1px solid rgba(80,200,255,.6)}
.sb-expand{position:fixed;top:14px;left:10px;z-index:1000;font-size:18px;padding:6px 12px;background:rgba(4,9,22,.92)}
body.sb-off .sb{display:none}
body.sb-off .main{margin-left:0}
.sb-pin:focus-visible,.sb-collapse:focus-visible,.sb-expand:focus-visible,.sb a.mi:focus-visible{outline:2px solid #4fc3ff;outline-offset:2px}
/* phones/tablets (≤1100 px) use the mobile menu: no collapse there, and a stored collapse never hides anything */
@media (max-width:1100px){.sb-collapse,.sb-expand{display:none!important}body.sb-off .sb{display:none}}
.tk-steps{margin:6px 0 10px 18px;padding:0;color:inherit;font-size:14px;line-height:1.6}
/* FE (15 Oct) Command Board spacing: icons sized and spaced by width — desktop 112 px with generous gaps; tablet 96 px; phones a designed
   3-column grid (never shrunken desktop rows); tab labels fit on phones; icon-less hardware/product tiles show the approved IX mark + name */
.sys-grid{grid-template-columns:repeat(auto-fill,112px);gap:30px 34px;padding:20px 8px}
@media(max-width:1100px){.sys-grid{grid-template-columns:repeat(auto-fill,96px);gap:24px 28px;padding:16px 6px}}
@media(max-width:560px){.sys-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 16px;padding:14px 6px}.sys-grid>.sys-tile,.sys-grid>.sys-item{justify-self:center;max-width:104px}
  .board-tabs .board-tab{font-size:11px;letter-spacing:.08em;padding-left:6px;padding-right:6px;min-width:0}}
.sys-item{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.sys-cap{font-size:12px;line-height:1.25;text-align:center;color:var(--txt,#dfe8f5);letter-spacing:.02em}
/* ═══ IX-FE-FLOW-01 (15 Oct 2026) — icon + name + description tiles; premium phone composition (additive; Manager KPI blocks untouched) ═══ */
.sys-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:22px 20px;padding:18px 4px;justify-content:stretch}
button.sys-item{appearance:none;background:rgba(6,14,30,.35);border:1px solid rgba(0,200,255,.12);border-radius:20px;padding:18px 12px 16px;color:inherit;font:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;max-width:none}
button.sys-item:hover,button.sys-item:focus-visible{transform:translateY(-2px);border-color:rgba(0,200,255,.55);box-shadow:0 0 22px rgba(0,180,255,.18);outline:none}
button.sys-item .sys-tile{width:104px;cursor:inherit}
button.sys-item .sys-tile:hover{transform:none;filter:none}
.sys-cap{display:flex;flex-direction:column;gap:4px;align-items:center}
.sys-cap b{font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--txt,#e8f0fb)}
.sys-tag{font-size:12px;line-height:1.35;color:var(--txt-dim,#93a7c2);max-width:220px}
.doc-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.doc-tile{min-height:118px;transition:transform .15s ease,border-color .15s ease}
.doc-tile:hover,.doc-tile:focus-visible{transform:translateY(-2px)}
@media(max-width:1100px){.sys-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:18px 16px}button.sys-item .sys-tile{width:92px}}
@media(max-width:560px){
  .sys-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;padding:12px 2px}
  button.sys-item{padding:16px 8px 14px;border-radius:18px;gap:10px;max-width:none;justify-self:stretch}
  button.sys-item .sys-tile{width:78px}
  .sys-cap b{font-size:13px}.sys-tag{font-size:11.5px}
  .doc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .doc-tile{min-height:112px;padding:14px 12px}
  .doc-tile .nt-pt{font-size:12px;letter-spacing:.06em}
  .doc-tile .nt-info-sub{font-size:12px;line-height:1.35}
  .nt-card{border-radius:18px}
  .px-row.wrap{gap:8px}
  .px-table{font-size:12.5px}
}
@media(max-width:360px){.sys-grid,.doc-grid{grid-template-columns:1fr}}
/* ═══ IX-FE-DOCS-001 (15 Oct 2026) — THE IX ICON TILE: icon · name · description underneath · whole tile clickable (every dashboard level) ═══ */
.ix-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:18px;margin:4px 0 22px}
.ix-icon{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:20px 12px 18px;border-radius:20px;text-decoration:none;color:inherit;
  background:linear-gradient(180deg,rgba(10,24,48,.72),rgba(4,10,24,.86));border:1px solid rgba(0,200,255,.16);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.ix-icon:hover,.ix-icon:focus-visible{transform:translateY(-3px);border-color:rgba(0,210,255,.6);box-shadow:0 0 26px rgba(0,170,255,.22);outline:none}
.ix-glyph{width:72px;height:72px;border-radius:22%;display:flex;align-items:center;justify-content:center;color:#7fe3ff;
  background:radial-gradient(120% 120% at 30% 20%,rgba(40,140,255,.35),rgba(6,16,36,.95) 60%);border:1px solid rgba(90,200,255,.45);box-shadow:inset 0 0 18px rgba(0,160,255,.25),0 0 14px rgba(0,140,255,.18)}
.ix-glyph svg{width:38px;height:38px;filter:drop-shadow(0 0 6px rgba(0,200,255,.55))}
.ix-name{font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--txt,#e8f0fb)}
.ix-desc{font-size:12px;line-height:1.4;color:var(--txt-dim,#93a7c2)}
.ix-icon.na{opacity:.62}.ix-icon.na .ix-glyph{color:#8aa0bb;border-color:rgba(140,160,190,.3)}
.sb-next-link{border:1px solid rgba(80,200,255,.55)}
@media(max-width:1100px){.ix-icons{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}.ix-glyph{width:64px;height:64px}.ix-glyph svg{width:34px;height:34px}}
@media(max-width:560px){.ix-icons{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}.ix-icon{padding:16px 8px 14px;border-radius:18px;gap:8px}
  .ix-glyph{width:58px;height:58px}.ix-glyph svg{width:30px;height:30px}.ix-name{font-size:13px}.ix-desc{font-size:11.5px}}
/* ═══ IX-FE-UI-001 (15 Oct 2026) — THE IX SIDEBAR: top (IX Systems + collapse) · section (heading over a divider, icon+label rows) · quick actions
   One 8-px spacing scale; one row grid (20 px icon column + label); one active treatment; quick actions visually distinct. Additive rules only. ═══ */
.sb{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
.sb .menu{display:flex;flex-direction:column;gap:16px;padding:0 2px}
.sb .sb-top{display:flex;align-items:center;gap:8px;padding:0 0 14px;border-bottom:1px solid rgba(120,170,255,.14)}
.sb .sb-top .mi{flex:1;min-width:0}
.sb .sb-collapse{flex:0 0 34px;width:34px;height:34px;margin:0;padding:0;display:flex;align-items:center;justify-content:center;font-size:12px;border-radius:10px;
  background:rgba(8,18,38,.7);border:1px solid rgba(90,170,255,.28);color:#9fcfff;cursor:pointer}
.sb .sb-collapse:hover{border-color:rgba(0,210,255,.6);color:#fff}
.sb .sb-group{display:flex;flex-direction:column;gap:2px}
.sb .sb-sec{margin:0 0 8px;padding:0 10px 8px;border-bottom:1px solid rgba(120,170,255,.12);font-size:10.5px;font-weight:700;letter-spacing:.16em;color:#6f88aa;text-transform:uppercase}
.sb a.mi{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;column-gap:12px;min-height:38px;padding:8px 10px;margin:0;border-radius:10px;
  border:1px solid transparent;background:none;font-size:13.5px;font-weight:500;line-height:1.25;letter-spacing:.005em;color:#b9c8de;text-align:left;text-decoration:none;box-shadow:none;transition:background .12s ease,color .12s ease,border-color .12s ease}
.sb a.mi .mi-ic{display:flex;width:20px;height:20px;color:#6fb6ff}
.sb a.mi .mi-ic svg{width:20px;height:20px}
.sb a.mi .mi-tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb a.mi:hover{background:rgba(40,120,255,.08);color:#eaf2ff}
.sb a.mi.act{background:linear-gradient(90deg,rgba(0,170,255,.20),rgba(0,170,255,.05));border-color:rgba(0,205,255,.38);color:#fff;box-shadow:inset 3px 0 0 #2fd0ff}
.sb a.mi.act .mi-ic{color:#7fe3ff}
.sb .sb-quick{padding:12px 8px 10px;border-radius:14px;background:rgba(0,160,255,.05);border:1px solid rgba(0,190,255,.16)}
.sb .sb-quick .sb-sec{padding-left:2px;padding-right:2px}
.sb .sb-quick a.mi{color:#9fe4ff;font-weight:600}
.sb .sb-quick a.mi .mi-ic{color:#4fd2ff}
.sb .sb-quick a.mi:hover{background:rgba(0,190,255,.12)}
.sb .sb-next a.mi{margin-top:6px;border-color:rgba(80,200,255,.5)}
/* mobile drawer rows share the same grid language */
.mh-nav a.mh-item{display:flex;align-items:center;min-height:44px;padding:10px 14px;border-radius:12px;font-size:14px}
.mh-nav a.mh-item.act{background:linear-gradient(90deg,rgba(0,170,255,.22),rgba(0,170,255,.05));box-shadow:inset 3px 0 0 #2fd0ff;color:#fff}
.sb a.mi .mi-tx{white-space:normal;overflow:visible;text-overflow:clip}
/* OWNER LOCK (15 Oct): the tile icon is the approved IX icon with the function's word — shown at the system-icon size */
.ix-img{display:block;width:104px;height:104px;border-radius:22%;overflow:hidden;filter:drop-shadow(0 6px 14px rgba(0,120,255,.25))}
.ix-img img{display:block;width:100%;height:100%;border-radius:22%}
.ix-icon.na .ix-img{opacity:.55;filter:grayscale(.4)}
@media(max-width:1100px){.ix-img{width:92px;height:92px}}
@media(max-width:560px){.ix-img{width:84px;height:84px}}

/* 🔒 OWNER 20 Oct: every icon grid on every page uses the locked IX Systems icon size (--tile, set by the page); desktop and tablet only */
/* the WHOLE tile is the IX Systems tile: same grid, column width, gap, padding and text as the IX Systems page (not only the image) */
@media(min-width:761px){.ix-icons{grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:10px}
  .ix-icons .ix-icon{padding:10px 8px;gap:6px}
  .ix-icons .ix-img{width:var(--tile,104px);height:var(--tile,104px)}
  .ix-icons .ix-name{font-size:12.5px;line-height:1.25}
  .ix-icons .ix-desc{font-size:11px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}
@media(min-width:761px) and (max-width:1100px){.ix-icons{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}.ix-icons .ix-icon{padding:8px 6px;gap:4px}}
/* ── R3 SHARED SIDEBAR BACK CONTROL (owner, 20 Oct 2026 — position LOCKED: bottom-left, immediately above the signed-in panel).
   The control is an ordinary sidebar row (.sb a.mi — existing glass row, glyph and type); this rule only stacks it on the panel. ── */
.mgr .sb-foot{display:flex;flex-direction:column;gap:8px;flex-shrink:0}
/* Package A (owner, 20 Oct 2026): the Back control is a premium glass panel — the signed-in panel's glass material (.av-card), the IX
   glass hover glow (.g) and the active-row arrow colour; one size on every page; dims only when there is nowhere to go back to */
.mgr .sb-foot a.mi.sb-back{border:1px solid var(--br);border-radius:12px;padding:10px 12px;min-height:42px;
  background:linear-gradient(145deg,rgba(0,229,255,0.05),rgba(3,7,16,0.88));color:#e9f6ff;font-weight:700;letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);transition:border-color .12s ease,box-shadow .12s ease,transform .06s ease}
.mgr .sb-foot a.mi.sb-back .mi-ic{color:#7fe3ff}
.mgr .sb-foot a.mi.sb-back:hover{border-color:rgba(0,229,255,.38);box-shadow:0 0 24px rgba(0,229,255,.12),inset 0 1px 0 rgba(255,255,255,.055)}
.mgr .sb-foot a.mi.sb-back:active{transform:translateY(1px)}
.mgr .sb-foot a.mi[aria-disabled="true"]{opacity:.45;pointer-events:none}
/* FE-A1 (owner-approved 23 Oct 2026). V-01: a module's child page shows its content in ONE column — the personal-card column of .nt-body is empty there
   (same declaration as the narrow-width rule above). V-04: a "Not available yet" tile gives no hover/focus lift, so it never looks operational. */
body[data-page="cards"][data-child]:not([data-child=""]) .nt-body{grid-template-columns:minmax(0,1fr)}
body[data-page="cards"][data-child]:not([data-child=""]) .nt-body>.nt-left{display:none}
.ix-icon.na:hover,.ix-icon.na:focus-visible{transform:none;box-shadow:none;border-color:var(--br)}
/* ── IX-FE-SHOWROOM-01 R2 (owner, 20 Oct 2026) — the premium showroom surface for the 19 IX Business Systems. COMPOSITION ONLY:
   every font, size, weight, colour, glass material, radius, border and glow used on a showroom is an existing rule above
   (.g · .nt-hero-title · .nt-info-val/-sub · .nt-pt · .ix-logo-sys · .ix-glyph · .px-tag · .nt-btn). Scoped to
   body[data-showroom]; nothing outside the 19 showroom pages is affected. R2: compact hero with pricing, compact capability
   cards, one three-card row (audience · applications · benefits) — the key sales information on the first desktop screen. ── */
body[data-showroom] .sr{display:flex;flex-direction:column;gap:12px;padding-bottom:4px}
body[data-showroom] .sr-hero{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(220px,280px);gap:22px;align-items:center;padding:12px 20px}
body[data-showroom] .sr-hero .ix-logo-sys{margin:0 8px}
body[data-showroom] .sr-id{display:flex;flex-direction:column;gap:8px;min-width:0}
body[data-showroom] .sr-tags{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
body[data-showroom] .sr-pricebox{padding:14px 16px;display:flex;flex-direction:column;gap:4px;align-self:stretch;justify-content:center}
body[data-showroom] .sr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch}
body[data-showroom] .sr-grid.sr-auto{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
body[data-showroom] .sr-card{padding:12px 14px 10px;display:flex;flex-direction:column;gap:4px}
body[data-showroom] .sr-card-hd{display:flex;align-items:center;gap:10px;padding-bottom:4px}
body[data-showroom] .sr-hd-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
body[data-showroom] .sr-card-hd .ix-glyph{width:40px;height:40px;flex-shrink:0}
body[data-showroom] .sr-card-hd .ix-glyph svg{width:22px;height:22px}
body[data-showroom] .sr-cap,body[data-showroom] .sr-row{padding:5px 0 3px;border-top:1px solid rgba(0,229,255,.12)}
body[data-showroom] .sr-chips{display:flex;flex-wrap:wrap;gap:8px;padding-top:4px}
body[data-showroom] .sr-chip{padding:7px 12px;border-radius:999px}
body[data-showroom] .sr-pkg{align-items:flex-start}
body[data-showroom] .sr-note{padding:0 4px}
body[data-showroom] .sr-cap .nt-info-val,body[data-showroom] .sr-row .nt-info-val{margin-bottom:0}
body[data-showroom] .sr-id .nt-info-sub,body[data-showroom] .sr-pricebox .nt-info-val{margin-bottom:0}
body[data-showroom] .sr-card .nt-pt,body[data-showroom] .sr-pricebox .nt-pt{margin-bottom:0}
@media(max-width:1100px){body[data-showroom] .sr-hero{grid-template-columns:auto minmax(0,1fr)}body[data-showroom] .sr-pricebox{grid-column:1/-1}}
@media(max-width:960px){body[data-showroom] .sr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){body[data-showroom] .sr-hero{grid-template-columns:1fr;justify-items:center;text-align:center;padding:16px 14px}
  body[data-showroom] .sr-grid,body[data-showroom] .sr-grid.sr-auto{grid-template-columns:1fr}body[data-showroom] .sr-id{align-items:center}body[data-showroom] .sr-tags{justify-content:center}}
/* ===== OWNER PAGE 01 LAYOUT CORRECTION (19 Oct 2026, FE-P01 — Concept A, owner corrections A-01…A-12) — IX Systems page ONLY
   (body[data-page="portal"]). Existing IX tokens, glass and approved artwork only; no new font or image. ===== */
.mh-sec{display:none}
/* A-01/A-02 desktop: all visible sections share one row; every section is visible IX glass with blue edging; the selected one is lit */
body[data-page="portal"] .board-tabs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;margin-bottom:10px}
body[data-page="portal"] .board-tabs .board-tab{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px;min-height:50px;border-radius:14px;font-size:12px;font-weight:600;letter-spacing:.14em;color:rgba(226,240,253,.9);
  /* owner 19 Oct: every master panel is backlit IX glass with a visible electric-blue edge glow — inactive ones included */
  background:radial-gradient(120% 90% at 50% 0%,rgba(0,170,255,.20),rgba(0,90,160,.06) 55%,transparent 75%),linear-gradient(180deg,rgba(16,48,78,.62),rgba(5,16,30,.80));
  border:1px solid rgba(40,210,255,.78);
  box-shadow:0 0 0 1px rgba(0,190,255,.16),0 0 14px rgba(0,190,255,.45),0 0 32px rgba(0,150,255,.22),inset 0 0 18px rgba(0,170,255,.16),inset 0 1px 0 rgba(255,255,255,.12);
  transition:border-color .18s ease,box-shadow .18s ease,color .18s ease}
body[data-page="portal"] .board-tabs .board-tab:hover{border-color:rgba(70,220,255,.85);color:#fff;
  box-shadow:0 0 0 1px rgba(0,200,255,.18),0 0 16px rgba(0,190,255,.42),0 0 34px rgba(0,150,255,.20),inset 0 0 18px rgba(0,170,255,.16),inset 0 1px 0 rgba(255,255,255,.12)}
body[data-page="portal"] .board-tabs .board-tab.act{color:#fff;border-color:#4fe0ff;
  background:radial-gradient(120% 100% at 50% 0%,rgba(40,200,255,.42),rgba(0,120,200,.16) 55%,transparent 80%),linear-gradient(180deg,rgba(0,110,180,.48),rgba(4,26,48,.88));
  box-shadow:0 0 0 1px rgba(79,224,255,.55),0 0 18px rgba(0,200,255,.62),0 0 44px rgba(0,160,255,.38),0 0 80px rgba(0,120,255,.18),inset 0 0 22px rgba(0,200,255,.22),inset 0 -2px 0 #4fe0ff,inset 0 1px 0 rgba(255,255,255,.16)}
@media(max-width:1100px){body[data-page="portal"] .board-tabs .board-tab{letter-spacing:.04em;font-size:10.5px}}
/* R20 fit (owner 20 Oct): the 20 IX Systems entries fit the screen on desktop and tablet — compact glass cards, icon scaled to screen height,
   description held to two lines; same artwork, colours and glass. Phones keep the approved two-column cards (≤560px rules below). */
@media(min-width:761px){
  body[data-page="portal"] .sys-grid,.ix-measure .sys-grid{grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:10px;padding:8px 0;justify-content:stretch}
  body[data-page="portal"] .sys-grid>.sys-item,body[data-page="portal"] button.sys-item,.ix-measure button.sys-item{max-width:none;justify-self:stretch;padding:10px 8px;gap:6px}
  body[data-page="portal"] button.sys-item .sys-tile,.ix-measure button.sys-item .sys-tile{width:var(--tile,clamp(46px,7.2vh,96px))}
  body[data-page="portal"] #board.fit-compact .sys-item .sys-tag,.ix-measure .sys-grid.fit-compact .sys-item .sys-tag{display:none}   /* --tile: the fit-to-page size set by the page (owner 20 Oct: two sizes bigger) */
  body[data-page="portal"] .sys-cap b,.ix-measure .sys-cap b{font-size:12.5px;line-height:1.25}
  body[data-page="portal"] .sys-item .sys-tag,.ix-measure .sys-item .sys-tag{font-size:11px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
@media(min-width:761px) and (max-width:1100px){body[data-page="portal"] .sys-grid,.ix-measure .sys-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
  body[data-page="portal"] .sys-grid>.sys-item,body[data-page="portal"] button.sys-item,.ix-measure button.sys-item{padding:8px 6px;gap:4px}body[data-page="portal"] .sys-item .sys-tag,.ix-measure .sys-item .sys-tag{display:none}}
@media(prefers-reduced-motion:reduce){body[data-page="portal"] .board-tabs .board-tab,body[data-page="portal"] button.sys-item{transition:none}}
@media(max-width:760px){
  /* A-07: six sections as a 2 × 3 set of glass controls (five for non-staff), labels never clipped, no horizontal scrolling */
  body[data-page="portal"] .board-tabs{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-columns:auto;gap:8px;margin-bottom:4px}
  body[data-page="portal"] .board-tabs .board-tab{min-height:44px;border-radius:12px;font-size:11px;letter-spacing:.08em;padding:0 8px}
}
@media(max-width:560px){
  /* A-04/A-05/A-06: one compact header row — brand left; the account avatar and a compact menu control right. Company context moves into the
     drawer (the same control, moved by the page script), the page heading and clock give their space to the applications */
  body[data-page="portal"] .mh-wrap{display:flex;align-items:center;gap:10px}
  body[data-page="portal"] .mh-top{flex:1 1 auto;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;min-width:0}
  body[data-page="portal"] .mh-logo img{width:32px;height:32px}
  body[data-page="portal"] .mh-av-card{padding:0;margin:0;border:0;background:none;box-shadow:none;flex:0 0 auto}
  body[data-page="portal"] .mh-av-card>div:not(.mh-av){display:none}
  body[data-page="portal"] .mh-av{width:34px;height:34px;font-size:12px}
  body[data-page="portal"] .mh-wrap>#ctx-m{display:none}
  body[data-page="portal"] .mh-menu{width:auto;flex:0 0 auto}
  body[data-page="portal"] .mh-menu>summary{width:44px;height:44px;min-height:0;padding:0;display:flex;align-items:center;justify-content:center;font-size:0;border-radius:12px}
  body[data-page="portal"] .mh-menu>summary::after{content:"\2630";font-size:20px;letter-spacing:0}
  body[data-page="portal"] .mh-menu[open]>summary::after{content:"\2715";font-size:18px}
  body[data-page="portal"] .topbar{display:none}
  /* A-08/A-09: two-column glass application cards — the approved square artwork, the name beneath (descriptions stay on desktop) */
  body[data-page="portal"] .sys-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px 0 8px;justify-content:stretch;align-items:stretch}
  body[data-page="portal"] .sys-grid>.sys-item,body[data-page="portal"] button.sys-item{max-width:none;justify-self:stretch;padding:16px 8px 14px;gap:10px;border-radius:16px;
    background:linear-gradient(180deg,rgba(18,52,82,.42),rgba(6,16,30,.7));border:1px solid rgba(0,200,255,.32);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 6px 18px rgba(0,0,0,.3)}
  body[data-page="portal"] button.sys-item:active{border-color:#2fd0ff;box-shadow:0 0 18px rgba(0,170,255,.3)}
  body[data-page="portal"] button.sys-item .sys-tile{width:88px}
  body[data-page="portal"] .sys-item .sys-tag{display:none}
  body[data-page="portal"] .sys-cap b{font-size:13px;line-height:1.25;font-weight:600}
  /* A-10: a compact overlay drawer — light rows, the company context at its top; closes on outside tap, the menu control or Escape */
  body[data-page="portal"] .mh-menu[open]>summary::before{content:"";position:fixed;inset:0;background:rgba(1,4,10,.6);z-index:70;cursor:default}
  body[data-page="portal"] .mh-menu[open]>.mh-nav{position:fixed;top:0;left:0;bottom:0;width:min(72vw,264px);z-index:71;margin:0;overflow-y:auto;
    padding:calc(env(safe-area-inset-top,0px) + 12px) 8px calc(env(safe-area-inset-bottom,0px) + 12px);display:flex;flex-direction:column;gap:1px;
    background:rgba(4,10,20,.95);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-right:1px solid rgba(0,200,255,.3);box-shadow:12px 0 40px rgba(0,0,0,.55)}
  body[data-page="portal"] .mh-menu[open] .mh-nav>#ctx-m{display:block;margin:0 4px 8px;min-height:38px;height:38px;font-size:13px}
  body[data-page="portal"] .mh-menu[open] .mh-nav a.mh-item{min-height:38px;padding:7px 12px;border:0;background:none;box-shadow:none;border-radius:10px;font-size:14px}
  body[data-page="portal"] .mh-menu[open] .mh-nav a.mh-item.act{background:linear-gradient(90deg,rgba(0,170,255,.22),rgba(0,170,255,.05));box-shadow:inset 3px 0 0 #2fd0ff}
  body[data-page="portal"] .mh-menu[open] .mh-sec{display:block;margin:10px 12px 3px;font-size:10px;letter-spacing:.18em;color:var(--txt-dim,#93a7c2)}
}
@media(max-width:340px){body[data-page="portal"] button.sys-item .sys-tile{width:76px}body[data-page="portal"] .board-tabs .board-tab{font-size:10px;letter-spacing:.04em}}