/*!
 * Orbiscale · Network Ops Console
 * Copyright (C) 2026 Ernesto Athaualpa Rojas (Neto). All rights reserved except as granted below.
 * SPDX-License-Identifier: AGPL-3.0-or-later
 * Commercial licence (no AGPL obligations, enterprise modules, support): see COMMERCIAL.md
 */
/* ==========================================================================
   Contoso Ops Suite — shared design system (KNOC + Infra Backlog)
   Loaded after each app's own CSS; overrides tokens and adds the portal shell.
   Light + dark parity · product accents · responsive · reduced-motion aware.
   ======================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---------- 1. Tokens ---------- */
:root[data-product]{
  --pf-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --pf-mono:'JetBrains Mono','SF Mono',Consolas,monospace;
  --display:var(--pf-font);--body:var(--pf-font);--mono:var(--pf-mono);
  --ground:#F4F6FA;--surface:#FFFFFF;--surface-2:#F0F3F8;--surface-3:#E5EAF2;
  --ink:#0F172A;--ink-2:#475569;--ink-3:#64748B;--line:#E2E8F0;--line-soft:#EDF1F6;
  --ok:#15803D;--ok-bg:#E7F6EC;--warn:#B45309;--warn-bg:#FEF3E2;--crit:#DC2626;--crit-bg:#FDECEC;
  --unk:#64748B;--unk-bg:#EEF2F7;--stale:#6D5BD0;--stale-bg:#F0EDFC;
  --r:12px;--shadow:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.06);--raise:var(--shadow);
  --pf-shadow-md:0 4px 10px rgba(15,23,42,.06),0 12px 28px rgba(15,23,42,.08);
  --pf-shadow-lg:0 24px 60px rgba(15,23,42,.18);
  --pf-glass:rgba(255,255,255,.72);--pf-scrim:rgba(15,23,42,.38);
  --pf-ease:cubic-bezier(.2,.7,.2,1);
  --sea:#E9EFF7;--land:#D6DFEA;--land-k:#C3D4EE;--land-line:#FFFFFF;
}
@media (prefers-color-scheme:dark){:root[data-product]:not([data-theme="light"]){
  --ground:#090D14;--surface:#101622;--surface-2:#161E2D;--surface-3:#1E293B;
  --ink:#E7ECF4;--ink-2:#A8B3C4;--ink-3:#7D8A9C;--line:#212B3B;--line-soft:#192232;
  --ok:#4ADE80;--ok-bg:#0F2A1B;--warn:#FBBF24;--warn-bg:#2E2410;--crit:#F87171;--crit-bg:#341618;
  --unk:#94A3B8;--unk-bg:#1A2233;--stale:#A99BF5;--stale-bg:#221E3A;
  --shadow:0 1px 2px rgba(0,0,0,.4);--pf-shadow-md:0 8px 24px rgba(0,0,0,.45);--pf-shadow-lg:0 30px 80px rgba(0,0,0,.6);
  --pf-glass:rgba(13,18,28,.72);--pf-scrim:rgba(2,6,12,.6);
  --sea:#0B111B;--land:#1A2333;--land-k:#203759;--land-line:#090D14;
}}
:root[data-product][data-theme="dark"]{
  --ground:#090D14;--surface:#101622;--surface-2:#161E2D;--surface-3:#1E293B;
  --ink:#E7ECF4;--ink-2:#A8B3C4;--ink-3:#7D8A9C;--line:#212B3B;--line-soft:#192232;
  --ok:#4ADE80;--ok-bg:#0F2A1B;--warn:#FBBF24;--warn-bg:#2E2410;--crit:#F87171;--crit-bg:#341618;
  --unk:#94A3B8;--unk-bg:#1A2233;--stale:#A99BF5;--stale-bg:#221E3A;
  --shadow:0 1px 2px rgba(0,0,0,.4);--pf-shadow-md:0 8px 24px rgba(0,0,0,.45);--pf-shadow-lg:0 30px 80px rgba(0,0,0,.6);
  --pf-glass:rgba(13,18,28,.72);--pf-scrim:rgba(2,6,12,.6);
  --sea:#0B111B;--land:#1A2333;--land-k:#203759;--land-line:#090D14;
}
/* product accents — KNOC = network cobalt, Backlog = ops teal */
:root[data-product="knoc"]{--accent:#2459E8;--accent-ink:#FFFFFF;--accent-soft:#E9EFFE;--pf-accent-2:#06B6D4;--pf-grad:linear-gradient(135deg,#2459E8 0%,#06B6D4 100%)}
:root[data-product="backlog"]{--accent:#0F8F7E;--accent-ink:#FFFFFF;--accent-soft:#E3F5F1;--pf-accent-2:#6366F1;--pf-grad:linear-gradient(135deg,#0F8F7E 0%,#6366F1 100%)}
@media (prefers-color-scheme:dark){
  :root[data-product="knoc"]:not([data-theme="light"]){--accent:#6E9BFF;--accent-ink:#06101F;--accent-soft:#16264A}
  :root[data-product="backlog"]:not([data-theme="light"]){--accent:#3CCFB8;--accent-ink:#04201B;--accent-soft:#0E2E2A}}
:root[data-product="knoc"][data-theme="dark"]{--accent:#6E9BFF;--accent-ink:#06101F;--accent-soft:#16264A}
:root[data-product="backlog"][data-theme="dark"]{--accent:#3CCFB8;--accent-ink:#04201B;--accent-soft:#0E2E2A}

/* ---------- 2. Base ---------- */
html[data-product] body{font-family:var(--pf-font);background:var(--ground);color:var(--ink);-webkit-font-smoothing:antialiased;letter-spacing:-.003em;transition:background-color .35s var(--pf-ease),color .35s var(--pf-ease)}
html[data-product] h1,html[data-product] h2,html[data-product] h3{letter-spacing:-.02em}
html[data-product] ::selection{background:color-mix(in srgb,var(--accent) 25%,transparent)}
html[data-product] *{scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent}
html[data-product] :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
html[data-product].pf-compact body{font-size:13.5px}
html[data-product].pf-nomotion *{animation:none!important;transition:none!important}

/* ---------- 3. Glass header (both apps) ---------- */
html[data-product] header.top{background:var(--pf-glass);-webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);border-bottom:1px solid var(--line)}
html[data-product="backlog"] header.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--pf-grad);opacity:.7}
html[data-product="knoc"] header.top{margin-inline:-24px;padding-inline:24px}

/* ---------- 4. Buttons, chips, inputs ---------- */
html[data-product] .btn,html[data-product] .shbtn,html[data-product] .menu>button,html[data-product] .tb{border-radius:9px;transition:transform .15s var(--pf-ease),box-shadow .2s,border-color .2s,background-color .2s,color .2s;position:relative;overflow:hidden}
html[data-product] .btn:hover,html[data-product] .shbtn:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
html[data-product] .btn:active,html[data-product] .shbtn:active,html[data-product] .chip:active,html[data-product] .kpi:active,html[data-product] .pf-ib:active{transform:scale(.97)}
html[data-product] .btn.pri{background:var(--pf-grad);border-color:transparent;color:#fff}
html[data-product] .seg{border-radius:9px;overflow:hidden}
html[data-product] .chip,html[data-product] .pill,html[data-product] .tag{transition:all .18s var(--pf-ease)}
html[data-product] .chip:hover{border-color:var(--accent);color:var(--accent)}
html[data-product] input[type=search],html[data-product] input[type=text],html[data-product] select,html[data-product] textarea{border-radius:9px;transition:border-color .2s,box-shadow .2s}
html[data-product] input:focus,html[data-product] select:focus,html[data-product] textarea:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
.pf-ripple{position:absolute;border-radius:50%;transform:scale(0);background:currentColor;opacity:.18;pointer-events:none;animation:pf-ripple .55s var(--pf-ease) forwards}
@keyframes pf-ripple{to{transform:scale(2.6);opacity:0}}

/* ---------- 5. Cards & surfaces ---------- */
html[data-product] .panel,html[data-product] .kpi,html[data-product] .card,html[data-product] .box,html[data-product] .viz,html[data-product] .tile,html[data-product] .ccard,html[data-product] .lnk,html[data-product] .fcard,html[data-product] .tscroll,html[data-product] .doc,html[data-product] .person,html[data-product] .rctl{border-radius:var(--r);border-color:var(--line);box-shadow:var(--shadow)}
html[data-product] .kpi,html[data-product] .ccard,html[data-product] .lnk,html[data-product] .card,html[data-product] .tile{transition:transform .22s var(--pf-ease),box-shadow .22s var(--pf-ease),border-color .22s}
html[data-product] .kpi:hover,html[data-product] .ccard:hover,html[data-product] .lnk:hover,html[data-product] .tile:hover{transform:translateY(-3px);box-shadow:var(--pf-shadow-md);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
html[data-product] .card:hover{box-shadow:var(--pf-shadow-md)}
html[data-product] .kpi{position:relative;overflow:hidden}
html[data-product] .kpi::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--pf-grad);opacity:0;transition:opacity .2s}
html[data-product] .kpi:hover::before,html[data-product] .kpi[aria-pressed="true"]::before{opacity:1}
html[data-product] .kpi .n,html[data-product] .tile .n{font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
html[data-product] table.t th,html[data-product] .tbl th{background:var(--surface-2)}
html[data-product] table.t tbody tr,html[data-product] .tbl tr{transition:background-color .15s}
html[data-product] .infobox{border-radius:var(--r);background:color-mix(in srgb,var(--accent) 8%,var(--surface));border-color:color-mix(in srgb,var(--accent) 25%,var(--line))}

/* ---------- 6. View transitions ---------- */
.pf-enter>*{animation:pf-in .42s var(--pf-ease) both}
.pf-enter>*:nth-child(2){animation-delay:.04s}.pf-enter>*:nth-child(3){animation-delay:.08s}.pf-enter>*:nth-child(4){animation-delay:.12s}
.pf-enter>*:nth-child(5){animation-delay:.16s}.pf-enter>*:nth-child(n+6){animation-delay:.2s}
@keyframes pf-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- 7. KNOC shell ---------- */
html[data-product="knoc"] .app{grid-template-columns:248px minmax(0,1fr)}
html[data-product="knoc"] aside.side{background:var(--surface);border-right:1px solid var(--line);padding:16px 12px 20px}
html[data-product="knoc"] .brand .logo{background:var(--pf-grad);border-radius:10px;width:34px;height:34px;box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 35%,transparent)}
html[data-product="knoc"] .brand .logo svg{stroke:#fff}
html[data-product="knoc"] nav.main button{border-radius:9px;padding:8px 11px;position:relative;transition:background-color .15s,color .15s,padding .2s}
html[data-product="knoc"] nav.main button:hover{padding-left:14px}
html[data-product="knoc"] nav.main button[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}
html[data-product="knoc"] nav.main button[aria-current="page"]::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--pf-grad)}
html[data-product="knoc"] main.content{padding-inline:28px}
html[data-product="knoc"] .vhead h1{font-size:30px;font-weight:800}
html[data-product="knoc"] .gsearch input{height:40px;border-radius:10px;background:var(--surface-2);border-color:transparent}
html[data-product="knoc"] .gsearch input:focus{background:var(--surface);border-color:var(--accent)}
/* map — fill the viewport */
html[data-product="knoc"] .mapwrap{grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:16px}
html[data-product="knoc"] .map{border-radius:var(--r);box-shadow:var(--shadow)}
html[data-product="knoc"] .map svg,html[data-product="knoc"] #msvg{height:clamp(460px,calc(100vh - 300px),1000px)!important;max-height:none!important;width:100%}
html[data-product="knoc"] #mapside{max-height:clamp(460px,calc(100vh - 300px),1000px)!important}
/* topology — fill the viewport */
html[data-product="knoc"] .topo{height:clamp(500px,calc(100vh - 250px),1100px)!important;border-radius:var(--r);border-color:var(--line)}
html[data-product="knoc"] .toolbar .tb{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* ---------- 8. Backlog shell ---------- */
html[data-product="backlog"] .wrap,html[data-product="backlog"] .bar,html[data-product="backlog"] .fbox{max-width:1360px}
html[data-product="backlog"] .brand{font-weight:800;letter-spacing:-.02em}
html[data-product="backlog"] nav.main button{border-radius:9px;transition:background-color .15s,color .15s}
html[data-product="backlog"] nav.main button[aria-current="page"]{background:var(--pf-grad);color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 30%,transparent)}
html[data-product="backlog"] .card{border-left-width:4px}
html[data-product="backlog"] .card .chead{transition:background-color .15s}
html[data-product="backlog"] .kpis{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
html[data-product="backlog"] .fab{background:var(--pf-grad);box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 40%,transparent)}

/* ---------- 9. Portal utilities (header cluster) ---------- */
.pf-utils{display:flex;align-items:center;gap:4px;margin-right:4px}
.pf-ib{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;position:relative;transition:all .18s var(--pf-ease);flex:0 0 auto}
.pf-ib svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pf-ib:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));transform:translateY(-1px);box-shadow:var(--shadow)}
.pf-ib[data-tip]:hover::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--ink);color:var(--ground);font:500 11.5px var(--pf-font);padding:5px 9px;border-radius:7px;z-index:200;pointer-events:none;animation:pf-in .18s both}
.pf-kbd{font:500 10.5px var(--pf-mono);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 5px;color:var(--ink-3);background:var(--surface)}
.pf-avatar{height:36px;border-radius:20px;border:1px solid var(--line);background:var(--surface);display:flex;align-items:center;gap:8px;padding:0 10px 0 4px;cursor:pointer;color:var(--ink);font:600 12.5px var(--pf-font);transition:all .18s}
.pf-avatar:hover{border-color:var(--accent)}
.pf-avatar i{width:28px;height:28px;border-radius:50%;background:var(--pf-grad);color:#fff;display:grid;place-items:center;font-style:normal;font-size:11.5px;font-weight:700}
.pf-burger{display:none}

/* ---------- 10. Overlays: scrim, sheet, modal, palette ---------- */
.pf-scrim{position:fixed;inset:0;background:var(--pf-scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:1000;animation:pf-fade .25s both}
@keyframes pf-fade{from{opacity:0}to{opacity:1}}
.pf-sheet{position:fixed;top:0;right:0;bottom:0;width:min(980px,100vw);background:var(--surface);z-index:1001;box-shadow:var(--pf-shadow-lg);display:grid;grid-template-columns:230px minmax(0,1fr);animation:pf-slide .38s var(--pf-ease) both;color:var(--ink);font-family:var(--pf-font)}
@keyframes pf-slide{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.pf-sheet nav{background:var(--surface-2);border-right:1px solid var(--line);padding:20px 12px;overflow-y:auto}
.pf-sheet nav h2{font-size:17px;font-weight:800;margin:0 8px 4px}
.pf-sheet nav p{font-size:12px;color:var(--ink-3);margin:0 8px 16px}
.pf-sheet nav button{display:flex;gap:10px;align-items:center;width:100%;border:0;background:none;color:var(--ink-2);font:500 13.5px var(--pf-font);padding:9px 10px;border-radius:9px;cursor:pointer;text-align:left;transition:all .15s}
.pf-sheet nav button svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8}
.pf-sheet nav button:hover{background:var(--surface);color:var(--ink)}
.pf-sheet nav button[aria-current="true"]{background:var(--surface);color:var(--accent);font-weight:600;box-shadow:var(--shadow)}
.pf-sheet .pf-body{overflow-y:auto;padding:26px 30px 60px;position:relative}
.pf-x{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;font-size:18px;display:grid;place-items:center;z-index:2}
.pf-x:hover{color:var(--ink);transform:rotate(90deg);transition:transform .25s}
.pf-h{font-size:22px;font-weight:800;margin:0 0 4px;letter-spacing:-.02em}
.pf-sub{color:var(--ink-3);font-size:13.5px;margin:0 0 20px;max-width:70ch}
.pf-sec{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:14px;background:var(--surface)}
.pf-sec h3{font-size:14px;font-weight:700;margin:0 0 12px}
.pf-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--line-soft)}
.pf-row:first-of-type{border-top:0;padding-top:0}
.pf-row b{font-weight:600;font-size:13.5px;display:block}
.pf-row small{color:var(--ink-3);font-size:12px;display:block;margin-top:2px}
.pf-field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.pf-field label{font:600 11px var(--pf-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.pf-field input,.pf-field select{height:38px;border:1px solid var(--line);border-radius:9px;padding:0 11px;background:var(--surface-2);color:var(--ink);font:400 13.5px var(--pf-font)}
.pf-field input[readonly]{color:var(--ink-3)}
.pf-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 14px}
.pf-seg{display:inline-flex;background:var(--surface-2);border-radius:10px;padding:3px;gap:2px}
.pf-seg button{border:0;background:none;color:var(--ink-2);font:600 12.5px var(--pf-font);padding:6px 12px;border-radius:8px;cursor:pointer;transition:all .18s}
.pf-seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.pf-switch{width:40px;height:23px;border-radius:12px;background:var(--surface-3);border:0;position:relative;cursor:pointer;transition:background-color .2s;flex:0 0 auto}
.pf-switch::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .22s var(--pf-ease)}
.pf-switch[aria-checked="true"]{background:var(--accent)}
.pf-switch[aria-checked="true"]::after{transform:translateX(17px)}
.pf-b{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 13px var(--pf-font);cursor:pointer;transition:all .18s;position:relative;overflow:hidden}
.pf-b:hover{border-color:var(--accent);color:var(--accent)}
.pf-b.pri{background:var(--pf-grad);color:#fff;border-color:transparent}
.pf-b.pri:hover{filter:brightness(1.06);color:#fff;box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 35%,transparent)}
.pf-b:disabled{opacity:.5;cursor:not-allowed}
.pf-chip{display:inline-flex;align-items:center;gap:5px;font:600 11px var(--pf-font);padding:3px 9px;border-radius:20px;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.pf-chip.ok{background:var(--ok-bg);color:var(--ok)}.pf-chip.warn{background:var(--warn-bg);color:var(--warn)}.pf-chip.acc{background:var(--accent-soft);color:var(--accent)}
.pf-chip i{width:6px;height:6px;border-radius:50%;background:currentColor}
.pf-note{font-size:12.5px;color:var(--ink-3);background:var(--surface-2);border-radius:10px;padding:10px 12px;margin:10px 0}

/* integrations */
.pf-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.pf-filters button{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font:500 12.5px var(--pf-font);padding:6px 12px;border-radius:20px;cursor:pointer;transition:all .15s}
.pf-filters button[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.pf-ints{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.pf-int{border:1px solid var(--line);border-radius:var(--r);padding:14px;background:var(--surface);cursor:pointer;text-align:left;font-family:var(--pf-font);color:var(--ink);display:flex;flex-direction:column;gap:8px;transition:all .22s var(--pf-ease)}
.pf-int:hover{transform:translateY(-3px);box-shadow:var(--pf-shadow-md);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.pf-int header{display:flex;align-items:center;gap:10px}
.pf-int .lg{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font:800 13px var(--pf-font);color:#fff;flex:0 0 auto}
.pf-int b{font-size:14px;font-weight:700;display:block}
.pf-int small{font-size:11.5px;color:var(--ink-3)}
.pf-int p{font-size:12.5px;color:var(--ink-2);margin:0;line-height:1.45}
.pf-int footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto}
.pf-log{font:12px/1.6 var(--pf-mono);background:#0B1020;color:#BFD4FF;border-radius:10px;padding:12px 14px;margin-top:10px;max-height:200px;overflow:auto}
.pf-log .ok{color:#7EE2A8}.pf-log .wa{color:#FFD27A}

/* matrix */
.pf-mx{width:100%;border-collapse:collapse;font-size:13px}
.pf-mx th,.pf-mx td{padding:9px 10px;border-bottom:1px solid var(--line-soft);text-align:center}
.pf-mx th:first-child,.pf-mx td:first-child{text-align:left}
.pf-mx th{font:600 11px var(--pf-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}

/* modal (FAQ, changelog) */
.pf-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(860px,calc(100vw - 32px));max-height:min(86vh,900px);background:var(--surface);border-radius:18px;z-index:1001;box-shadow:var(--pf-shadow-lg);display:flex;flex-direction:column;overflow:hidden;animation:pf-pop .32s var(--pf-ease) both;color:var(--ink);font-family:var(--pf-font)}
@keyframes pf-pop{from{opacity:0;transform:translate(-50%,-47%) scale(.98)}to{opacity:1;transform:translate(-50%,-50%)}}
.pf-modal>header{padding:22px 26px 14px;border-bottom:1px solid var(--line);position:relative}
.pf-modal>header .pf-h{padding-right:40px}
.pf-modal>.pf-mb{overflow-y:auto;padding:18px 26px 28px}
.pf-acc{border:1px solid var(--line);border-radius:12px;margin-bottom:8px;overflow:hidden;transition:box-shadow .2s}
.pf-acc[open]{box-shadow:var(--shadow)}
.pf-acc summary{list-style:none;cursor:pointer;padding:14px 16px;font-weight:600;font-size:14px;display:flex;justify-content:space-between;gap:12px;align-items:center}
.pf-acc summary::-webkit-details-marker{display:none}
.pf-acc summary::after{content:"+";font-size:20px;color:var(--ink-3);transition:transform .25s}
.pf-acc[open] summary::after{transform:rotate(45deg);color:var(--accent)}
.pf-acc div{padding:0 16px 16px;color:var(--ink-2);font-size:13.5px;line-height:1.6}
.pf-search{width:100%;height:42px;border:1px solid var(--line);border-radius:11px;padding:0 14px;background:var(--surface-2);color:var(--ink);font:400 14px var(--pf-font);margin-top:10px}
.pf-tl{position:relative;padding-left:26px}
.pf-tl::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--accent),var(--pf-accent-2),transparent)}
.pf-tl article{position:relative;margin-bottom:18px;animation:pf-in .4s var(--pf-ease) both}
.pf-tl article::before{content:"";position:absolute;left:-23px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:3px solid var(--accent)}
.pf-tl article.big::before{background:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 20%,transparent)}
.pf-tl .meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font:500 12px var(--pf-mono);color:var(--ink-3);margin-bottom:4px}
.pf-tl h4{margin:0 0 6px;font-size:15px;font-weight:700}
.pf-tl ul{margin:0;padding-left:18px;color:var(--ink-2);font-size:13.5px;line-height:1.55}

/* command palette */
.pf-pal{position:fixed;left:50%;top:14vh;transform:translateX(-50%);width:min(620px,calc(100vw - 24px));background:var(--surface);border-radius:16px;z-index:1001;box-shadow:var(--pf-shadow-lg);overflow:hidden;animation:pf-palin .25s var(--pf-ease) both;font-family:var(--pf-font);border:1px solid var(--line)}
@keyframes pf-palin{from{opacity:0;transform:translate(-50%,-8px) scale(.98)}to{opacity:1;transform:translateX(-50%)}}
.pf-pal input{width:100%;height:56px;border:0;border-bottom:1px solid var(--line);padding:0 20px;font:500 16px var(--pf-font);background:transparent;color:var(--ink);outline:none}
.pf-pal ul{list-style:none;margin:0;padding:6px;max-height:50vh;overflow-y:auto}
.pf-pal li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer;font-size:14px;color:var(--ink)}
.pf-pal li small{margin-left:auto;color:var(--ink-3);font:500 11px var(--pf-mono)}
.pf-pal li svg{width:18px;height:18px;stroke:var(--ink-3);fill:none;stroke-width:1.8}
.pf-pal li.on{background:var(--accent-soft);color:var(--accent)}
.pf-pal li.on svg{stroke:var(--accent)}
.pf-pal .grp{font:600 10.5px var(--pf-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:10px 12px 4px}

/* ---------- 11. Login ---------- */
.pf-login{position:fixed;inset:0;z-index:2000;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(380px,.9fr);background:var(--ground);font-family:var(--pf-font);color:var(--ink);animation:pf-fade .3s both}
.pf-login.out{animation:pf-out .45s var(--pf-ease) forwards}
@keyframes pf-out{to{opacity:0;transform:scale(1.02);filter:blur(6px)}}
.pf-hero{position:relative;overflow:hidden;background:#070B14;color:#fff;padding:56px;display:flex;flex-direction:column;justify-content:space-between}
.pf-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:pf-orb 14s ease-in-out infinite alternate}
.pf-orb.a{width:520px;height:520px;background:var(--accent);top:-140px;left:-120px}
.pf-orb.b{width:440px;height:440px;background:var(--pf-accent-2);bottom:-160px;right:-80px;animation-delay:-5s}
@keyframes pf-orb{to{transform:translate(60px,40px) scale(1.12)}}
.pf-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 40% 40%,#000 30%,transparent 75%)}
.pf-hero>*{position:relative}
.pf-hero .lg{display:flex;align-items:center;gap:12px;font-weight:800;font-size:18px}
.pf-hero .lg span{width:40px;height:40px;border-radius:12px;background:var(--pf-grad);display:grid;place-items:center}
.pf-hero h1{font-size:clamp(34px,4vw,56px);line-height:1.04;font-weight:800;letter-spacing:-.035em;margin:0 0 16px;max-width:15ch}
.pf-hero p{font-size:17px;color:#C7D2E4;max-width:46ch;line-height:1.55;margin:0}
.pf-feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:34px;max-width:640px}
.pf-feat div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pf-feat b{display:block;font-size:22px;font-weight:800}
.pf-feat small{color:#AFC0D8;font-size:12.5px}
.pf-hero footer{font:500 12px var(--pf-mono);color:#7F90AA}
.pf-auth{display:flex;align-items:center;justify-content:center;padding:40px}
.pf-card{width:min(400px,100%)}
.pf-card h2{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0 0 6px}
.pf-card>p{color:var(--ink-3);margin:0 0 24px;font-size:14px}
.pf-prov{width:100%;height:46px;border-radius:11px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 14px var(--pf-font);display:flex;align-items:center;gap:12px;padding:0 16px;cursor:pointer;margin-bottom:10px;transition:all .18s var(--pf-ease);position:relative;overflow:hidden}
.pf-prov:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow)}
.pf-prov .ic{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff}
.pf-prov small{margin-left:auto;color:var(--ink-3);font-weight:500;font-size:11.5px}
.pf-or{display:flex;align-items:center;gap:12px;color:var(--ink-3);font-size:12px;margin:16px 0}
.pf-or::before,.pf-or::after{content:"";flex:1;height:1px;background:var(--line)}
.pf-guest{width:100%;height:46px;border-radius:11px;border:0;background:var(--pf-grad);color:#fff;font:700 14.5px var(--pf-font);cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.pf-guest:hover{box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 40%,transparent);transform:translateY(-1px)}
.pf-disc{font-size:12px;color:var(--ink-3);margin-top:18px;line-height:1.5;display:flex;gap:8px}
.pf-spin{width:18px;height:18px;border-radius:50%;border:2.5px solid color-mix(in srgb,var(--accent) 25%,transparent);border-top-color:var(--accent);animation:pf-rot .7s linear infinite;margin-left:auto}
@keyframes pf-rot{to{transform:rotate(360deg)}}
.pf-sso{display:none;margin-top:4px}
.pf-sso.on{display:block;animation:pf-in .3s both}

/* ---------- 12. Tour ---------- */
.pf-tour-hl{position:fixed;z-index:1500;border-radius:12px;box-shadow:0 0 0 9999px var(--pf-scrim);outline:2px solid var(--accent);pointer-events:none;transition:all .35s var(--pf-ease)}
.pf-tour{position:fixed;z-index:1501;width:min(360px,calc(100vw - 24px));background:var(--surface);color:var(--ink);border-radius:16px;padding:18px;box-shadow:var(--pf-shadow-lg);font-family:var(--pf-font);transition:top .35s var(--pf-ease),left .35s var(--pf-ease);border:1px solid var(--line)}
.pf-tour .st{font:600 11px var(--pf-mono);letter-spacing:.08em;color:var(--accent);text-transform:uppercase}
.pf-tour h3{font-size:17px;font-weight:800;margin:6px 0}
.pf-tour p{font-size:14px;color:var(--ink-2);line-height:1.5;margin:0}
.pf-tour .bar{height:4px;background:var(--surface-2);border-radius:4px;margin:14px 0 12px;overflow:hidden}
.pf-tour .bar i{display:block;height:100%;background:var(--pf-grad);border-radius:4px;transition:width .35s var(--pf-ease)}
.pf-tour .act{display:flex;gap:8px;align-items:center}
.pf-tour .act .sp{flex:1}
.pf-tour .skip{border:0;background:none;color:var(--ink-3);font:500 13px var(--pf-font);cursor:pointer;padding:0}
.pf-invite{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:900;background:var(--ink);color:var(--ground);border-radius:30px;padding:8px 8px 8px 18px;display:flex;align-items:center;gap:10px;font:500 13.5px var(--pf-font);box-shadow:var(--pf-shadow-lg);animation:pf-up .4s var(--pf-ease) both;max-width:calc(100vw - 24px)}
@keyframes pf-up{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translateX(-50%)}}
.pf-invite button{border:0;border-radius:20px;padding:7px 14px;font:600 13px var(--pf-font);cursor:pointer;background:transparent;color:inherit}
.pf-invite button.go{background:var(--pf-grad);color:#fff}

/* toast */
.pf-toast{position:fixed;bottom:22px;right:22px;z-index:2100;background:var(--ink);color:var(--ground);border-radius:12px;padding:12px 16px;font:500 13.5px var(--pf-font);box-shadow:var(--pf-shadow-lg);display:flex;gap:10px;align-items:center;animation:pf-up2 .3s var(--pf-ease) both;max-width:calc(100vw - 44px)}
@keyframes pf-up2{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.pf-toast i{width:8px;height:8px;border-radius:50%;background:var(--ok)}

/* suite switcher */
.pf-menu{position:fixed;z-index:1001;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--pf-shadow-lg);padding:8px;width:300px;animation:pf-palin .2s both;font-family:var(--pf-font);color:var(--ink)}
.pf-menu a,.pf-menu button{display:flex;gap:12px;align-items:center;padding:10px;border-radius:10px;text-decoration:none;color:var(--ink);border:0;background:none;width:100%;text-align:left;font:500 13.5px var(--pf-font);cursor:pointer}
.pf-menu a:hover,.pf-menu button:hover{background:var(--surface-2)}
.pf-menu .lg{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:12px;flex:0 0 auto}
.pf-menu small{display:block;color:var(--ink-3);font-size:12px}
.pf-menu hr{border:0;border-top:1px solid var(--line);margin:6px 0}

/* ---------- 13. Responsive ---------- */
@media (max-width:1180px){
  html[data-product="knoc"] .mapwrap{grid-template-columns:minmax(0,1fr)}
  html[data-product="knoc"] #mapside{max-height:none!important}
  .pf-login{grid-template-columns:minmax(0,1fr)}
  .pf-hero{display:none}
}
@media (max-width:900px){
  html[data-product="knoc"] .app{grid-template-columns:minmax(0,1fr)}
  html[data-product="knoc"] aside.side{display:block!important;position:fixed;left:0;top:0;bottom:0;width:280px;z-index:1100;transform:translateX(-105%);transition:transform .35s var(--pf-ease);box-shadow:var(--pf-shadow-lg)}
  html[data-product="knoc"].pf-nav-open aside.side{transform:none}
  html[data-product="knoc"].pf-nav-open::after{content:"";position:fixed;inset:0;background:var(--pf-scrim);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:1099}
  html[data-product="knoc"] .mnav{display:none!important}
  html[data-product="knoc"] header.top{margin-inline:-16px;padding-inline:16px}
  html[data-product="knoc"] main.content{padding-inline:16px}
  .pf-burger{display:grid}
  .pf-sheet{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .pf-sheet nav{display:flex;gap:4px;overflow-x:auto;padding:12px;border-right:0;border-bottom:1px solid var(--line)}
  .pf-sheet nav h2,.pf-sheet nav p{display:none}
  .pf-sheet nav button{white-space:nowrap;width:auto}
  .pf-sheet .pf-body{padding:20px 16px 60px}
  html[data-product="knoc"] .map svg,html[data-product="knoc"] #msvg{height:62vh!important}
  html[data-product="knoc"] .topo{height:70vh!important}
  html[data-product="knoc"] .toolbar{overflow-x:auto;flex-wrap:nowrap}
}
@media (max-width:640px){
  .pf-utils .pf-hide-sm{display:none}
  .pf-avatar span{display:none}
  .pf-avatar{padding:0 4px}
  html[data-product] .vhead h1{font-size:24px}
  html[data-product="backlog"] nav.main{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px;order:3;width:calc(100% + 32px)}
  html[data-product="backlog"] nav.main::-webkit-scrollbar{display:none}
  html[data-product="backlog"] .bar{row-gap:8px}
  html[data-product="backlog"] .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-modal{top:auto;bottom:0;left:0;right:0;transform:none;width:100%;max-height:92vh;border-radius:20px 20px 0 0;animation:pf-sheetup .35s var(--pf-ease) both}
  @keyframes pf-sheetup{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
  .pf-auth{padding:24px 18px}
  .pf-toast{left:12px;right:12px;bottom:12px}
}
@media (prefers-reduced-motion:reduce){
  html[data-product] *,.pf-login,.pf-orb{animation:none!important;transition:none!important}
}

/* v2 polish */
[data-product=knoc] .brand small{font-size:8.5px;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;display:block}
@media (max-width:640px){.pf-invite{left:12px!important;right:12px!important;transform:none!important;flex-wrap:wrap;justify-content:center;text-align:center;border-radius:18px!important}.pf-invite span{flex:1 1 100%}}
/* v2.0.1: no sideways scroll on phones */
html,body{overflow-x:clip}
@media (max-width:640px){[data-product=backlog] .tools{flex-wrap:wrap!important;justify-content:flex-start!important;row-gap:8px;max-width:100%}}
/* v3: demo scenario switch + countries outside your footprint fade */
.pf-scn{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;margin-left:8px;vertical-align:middle}
.pf-scn b{font-weight:600;margin-right:2px}
.pf-scn button{font:600 12px var(--pf-font,inherit);border:1px solid var(--line,#d0d7e2);background:var(--surface,#fff);color:inherit;border-radius:20px;padding:3px 11px;cursor:pointer;transition:background .15s,border-color .15s}
.pf-scn button:hover{border-color:var(--accent)}
.pf-scn button[aria-pressed=true]{background:var(--pf-grad,var(--accent));color:#fff;border-color:transparent}
html[data-product=knoc] #mland path.k:not(.u):not(.sel){opacity:.45}
@media (max-width:640px){.pf-scn{display:flex;margin:8px 0 0}}

/* ==========================================================================
   v5 default — "Executive": navy ink, confident blue, teal support.
   Orbiscale leads with blue, Infra Backlog with teal. Other palettes: Settings › Look and colours.
   ======================================================================== */
:root[data-product]{--ground:#F5F7FB;--surface:#FFFFFF;--surface-2:#F1F4F9;--surface-3:#E6EBF3;--line:#E2E8F0;--line-soft:#EDF1F6;--ink:#0F172A;--ink-2:#475569;--ink-3:#64748B;--ok:#16A34A;--ok-bg:#E8F7EE;--warn:#B45309;--warn-bg:#FEF3E2;--crit:#DC2626;--crit-bg:#FDECEC;--unk:#64748B;--unk-bg:#EEF2F7;--accent:#2563EB;--accent-ink:#FFFFFF;--accent-soft:#E8EFFD;--pf-accent-2:#0EA5A4;--pf-grad:linear-gradient(135deg,#2563EB 0%,#0EA5A4 120%);--pf-gold:#F59E0B;--pf-red:#2563EB;--pf-blue:#2563EB;--sea:#EAF1FB;--land:#DCE5F0;--land-k:#C5D5EC;--land-line:#FFFFFF;--pf-glass:rgba(255,255,255,.82);--pf-scrim:rgba(15,23,42,.38);--tp-bg:#F3F6FA;--tp-dot:#D6DEE8;--tp-node:#FFFFFF;--tp-line:#AEBBCB;--tp-ink:#172231;--tp-ink2:#5B6878;--tp-zone:rgba(37,99,235,.035);--tp-zst:#C3CEDB;--tp-zl:#5F7187;--tp-halo:#FFFFFF;--tp-land:#E4EAF1;--tp-landk:#D7E1EC;--tp-landl:#C3CEDB;--tp-bar:rgba(255,255,255,.94);--tp-barl:#D2DAE4;--tp-tb:#FFFFFF;--tp-tbl:#C9D3DF;--tp-tbi:#1F2B3A;--tp-gcl:rgba(40,60,90,.16);}
:root[data-product="backlog"]{--accent:#0D9488;--accent-soft:#E0F5F2;--pf-accent-2:#2563EB;--pf-grad:linear-gradient(135deg,#0D9488 0%,#2563EB 120%);}
html[data-product] body{background-image:radial-gradient(1100px 420px at 90% -10%,rgba(37,99,235,.07),transparent 60%)}
@media (prefers-color-scheme:dark){:root[data-product]:not([data-theme="light"]){--ground:#0B1220;--surface:#111A2E;--surface-2:#16213A;--surface-3:#1D2A47;--line:#23314F;--line-soft:#1A2540;--ink:#E6ECF5;--ink-2:#A9B6CB;--ink-3:#7E8BA3;--ok:#4ADE80;--ok-bg:#0F2A1B;--warn:#FBBF24;--warn-bg:#2E2410;--crit:#F87171;--crit-bg:#341618;--unk:#94A3B8;--unk-bg:#1A2233;--accent:#60A5FA;--accent-ink:#06101F;--accent-soft:#15284A;--pf-accent-2:#2DD4BF;--pf-grad:linear-gradient(135deg,#3B82F6 0%,#2DD4BF 120%);--pf-gold:#FBBF24;--pf-red:#60A5FA;--pf-blue:#60A5FA;--sea:#0A1424;--land:#17223A;--land-k:#1F3560;--land-line:#0B1220;--pf-glass:rgba(17,26,46,.82);--pf-scrim:rgba(2,6,12,.6);--shadow:0 1px 2px rgba(0,0,0,.4);--pf-shadow-md:0 8px 24px rgba(0,0,0,.45);--pf-shadow-lg:0 30px 80px rgba(0,0,0,.6);--tp-bg:#0B1220;--tp-dot:#1A2540;--tp-node:#111A2E;--tp-line:#33456B;--tp-ink:#E6ECF5;--tp-ink2:#8A97AE;--tp-zone:rgba(96,165,250,.05);--tp-zst:#23314F;--tp-zl:#7E8BA3;--tp-halo:#0B1220;--tp-land:#121C33;--tp-landk:#17243F;--tp-landl:#23314F;--tp-bar:rgba(11,18,32,.88);--tp-barl:#23314F;--tp-tb:#111A2E;--tp-tbl:#2A3A5C;--tp-tbi:#C9D5E8;--tp-gcl:rgba(160,185,215,.12);}
  :root[data-product="backlog"]:not([data-theme="light"]){--accent:#2DD4BF;--accent-ink:#04201B;--accent-soft:#0E2E2A;--pf-accent-2:#60A5FA;--pf-grad:linear-gradient(135deg,#14B8A6 0%,#3B82F6 120%);}
  :root[data-product]:not([data-theme="light"]) body{background-image:radial-gradient(1100px 480px at 90% -10%,rgba(59,130,246,.12),transparent 60%),radial-gradient(800px 500px at 0% 0%,rgba(45,212,191,.06),transparent 60%)}}
:root[data-product][data-theme="dark"]{--ground:#0B1220;--surface:#111A2E;--surface-2:#16213A;--surface-3:#1D2A47;--line:#23314F;--line-soft:#1A2540;--ink:#E6ECF5;--ink-2:#A9B6CB;--ink-3:#7E8BA3;--ok:#4ADE80;--ok-bg:#0F2A1B;--warn:#FBBF24;--warn-bg:#2E2410;--crit:#F87171;--crit-bg:#341618;--unk:#94A3B8;--unk-bg:#1A2233;--accent:#60A5FA;--accent-ink:#06101F;--accent-soft:#15284A;--pf-accent-2:#2DD4BF;--pf-grad:linear-gradient(135deg,#3B82F6 0%,#2DD4BF 120%);--pf-gold:#FBBF24;--pf-red:#60A5FA;--pf-blue:#60A5FA;--sea:#0A1424;--land:#17223A;--land-k:#1F3560;--land-line:#0B1220;--pf-glass:rgba(17,26,46,.82);--pf-scrim:rgba(2,6,12,.6);--shadow:0 1px 2px rgba(0,0,0,.4);--pf-shadow-md:0 8px 24px rgba(0,0,0,.45);--pf-shadow-lg:0 30px 80px rgba(0,0,0,.6);--tp-bg:#0B1220;--tp-dot:#1A2540;--tp-node:#111A2E;--tp-line:#33456B;--tp-ink:#E6ECF5;--tp-ink2:#8A97AE;--tp-zone:rgba(96,165,250,.05);--tp-zst:#23314F;--tp-zl:#7E8BA3;--tp-halo:#0B1220;--tp-land:#121C33;--tp-landk:#17243F;--tp-landl:#23314F;--tp-bar:rgba(11,18,32,.88);--tp-barl:#23314F;--tp-tb:#111A2E;--tp-tbl:#2A3A5C;--tp-tbi:#C9D5E8;--tp-gcl:rgba(160,185,215,.12);}
:root[data-product="backlog"][data-theme="dark"]{--accent:#2DD4BF;--accent-ink:#04201B;--accent-soft:#0E2E2A;--pf-accent-2:#60A5FA;--pf-grad:linear-gradient(135deg,#14B8A6 0%,#3B82F6 120%);}
:root[data-product][data-theme="dark"] body{background-image:radial-gradient(1100px 480px at 90% -10%,rgba(59,130,246,.12),transparent 60%),radial-gradient(800px 500px at 0% 0%,rgba(45,212,191,.06),transparent 60%)}
:root[data-product] .nav a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--accent)}

/* ==========================================================================
   Ember / Grove palette (optional since v5) — colour only, no symbols, no logos.
   Light "Ember": warm cream page, signal red leads, royal blue and sun yellow support.
   Dark  "Grove": night forest, moss green leads, old gold and stone blue support.
   ======================================================================== */
:root[data-product][data-pbase="ember"]{
  --ground:#FFF8EE;--surface:#FFFFFF;--surface-2:#FFF2E2;--surface-3:#FBE7D0;--line:#F0DCC4;--line-soft:#F7EADB;
  --ink:#1B1410;--ink-2:#5A4A3E;--ink-3:#7D6B5D;
  --ok:#2B8A3A;--ok-bg:#E6F5E3;--warn:#A86F00;--warn-bg:#FFF3C4;--crit:#B4002A;--crit-bg:#FDE4E7;
  --unk:#6E6A80;--unk-bg:#F1EEF4;
  --accent:#E4000F;--accent-ink:#FFFFFF;--accent-soft:#FFE3E1;
  --pf-red:#E4000F;--pf-blue:#0058C9;--pf-gold:#FBD000;--pf-green:#43B047;--pf-brick:#B8461E;
  --pf-accent-2:#0058C9;--pf-grad:linear-gradient(135deg,#E4000F 0%,#FF4B2B 55%,#FBD000 135%);
  --sea:#CFE6FF;--land:#C6E7BC;--land-k:#93D284;--land-line:#FFFFFF;
  --pf-glass:rgba(255,250,243,.78);
  --tp-bg:#FFF8EE;--tp-dot:#F0DCC4;--tp-node:#FFFFFF;--tp-line:#C9B39C;--tp-ink:#1B1410;--tp-ink2:#6A5849;--tp-zone:rgba(228,0,15,.03);--tp-zst:#EBCFB2;--tp-zl:#7D6B5D;--tp-halo:#FFFFFF;--tp-land:#E3F1DD;--tp-landk:#CBE8C2;--tp-landl:#B8D9AE;--tp-bar:rgba(255,250,243,.95);--tp-barl:#EBD7C0;--tp-tb:#FFFFFF;--tp-tbl:#E6CFB6;--tp-tbi:#2A1F18;--tp-gcl:rgba(90,60,30,.16);
}
:root[data-product="backlog"][data-pbase="ember"]{--pf-accent-2:#43B047;--pf-grad:linear-gradient(135deg,#E4000F 0%,#0058C9 120%)}
html[data-product][data-pbase="ember"] body{background-image:linear-gradient(180deg,#DDEEFF 0,rgba(221,238,255,.35) 160px,transparent 380px)}
@media (prefers-color-scheme:dark){:root[data-product][data-pbase="ember"]:not([data-theme="light"]){
  --ground:#0E1A16;--surface:#15251F;--surface-2:#1B2F27;--surface-3:#233A30;--line:#2A4337;--line-soft:#1F342B;
  --ink:#E8E2CF;--ink-2:#BDB59C;--ink-3:#8E8873;
  --ok:#7BD88F;--ok-bg:#16301F;--warn:#D9B44A;--warn-bg:#2E2810;--crit:#E5735F;--crit-bg:#3A1C17;
  --unk:#8E9A90;--unk-bg:#1E2B25;
  --accent:#3FA66B;--accent-ink:#06140D;--accent-soft:#173A28;
  --pf-gold:#D9B44A;--pf-blue:#4F8FBF;--pf-accent-2:#D9B44A;--pf-grad:linear-gradient(135deg,#2E7D52 0%,#3FA66B 55%,#D9B44A 135%);
  --sea:#0A1512;--land:#1A2E25;--land-k:#2B4A39;--land-line:#0E1A16;
  --pf-glass:rgba(14,26,22,.78);--pf-scrim:rgba(3,8,6,.62);
  --shadow:0 1px 2px rgba(0,0,0,.45);--pf-shadow-md:0 8px 24px rgba(0,0,0,.5);--pf-shadow-lg:0 30px 80px rgba(0,0,0,.6);
  --tp-bg:#0B1612;--tp-dot:#1C2E26;--tp-node:#15251F;--tp-line:#3B5A4A;--tp-ink:#E8E2CF;--tp-ink2:#9C967F;--tp-zone:rgba(63,166,107,.05);--tp-zst:#2A4337;--tp-zl:#8E8873;--tp-halo:#0B1612;--tp-land:#13231D;--tp-landk:#1B3329;--tp-landl:#2A4337;--tp-bar:rgba(11,22,18,.88);--tp-barl:#2A4337;--tp-tb:#15251F;--tp-tbl:#2E4A3C;--tp-tbi:#D9D2BC;--tp-gcl:rgba(217,180,74,.14);
}}
:root[data-product][data-pbase="ember"][data-theme="dark"]{
  --ground:#0E1A16;--surface:#15251F;--surface-2:#1B2F27;--surface-3:#233A30;--line:#2A4337;--line-soft:#1F342B;
  --ink:#E8E2CF;--ink-2:#BDB59C;--ink-3:#8E8873;
  --ok:#7BD88F;--ok-bg:#16301F;--warn:#D9B44A;--warn-bg:#2E2810;--crit:#E5735F;--crit-bg:#3A1C17;
  --unk:#8E9A90;--unk-bg:#1E2B25;
  --accent:#3FA66B;--accent-ink:#06140D;--accent-soft:#173A28;
  --pf-gold:#D9B44A;--pf-blue:#4F8FBF;--pf-accent-2:#D9B44A;--pf-grad:linear-gradient(135deg,#2E7D52 0%,#3FA66B 55%,#D9B44A 135%);
  --sea:#0A1512;--land:#1A2E25;--land-k:#2B4A39;--land-line:#0E1A16;
  --pf-glass:rgba(14,26,22,.78);--pf-scrim:rgba(3,8,6,.62);
  --shadow:0 1px 2px rgba(0,0,0,.45);--pf-shadow-md:0 8px 24px rgba(0,0,0,.5);--pf-shadow-lg:0 30px 80px rgba(0,0,0,.6);
  --tp-bg:#0B1612;--tp-dot:#1C2E26;--tp-node:#15251F;--tp-line:#3B5A4A;--tp-ink:#E8E2CF;--tp-ink2:#9C967F;--tp-zone:rgba(63,166,107,.05);--tp-zst:#2A4337;--tp-zl:#8E8873;--tp-halo:#0B1612;--tp-land:#13231D;--tp-landk:#1B3329;--tp-landl:#2A4337;--tp-bar:rgba(11,22,18,.88);--tp-barl:#2A4337;--tp-tb:#15251F;--tp-tbl:#2E4A3C;--tp-tbi:#D9D2BC;--tp-gcl:rgba(217,180,74,.14);
}
@media (prefers-color-scheme:dark){:root[data-product="backlog"][data-pbase="ember"]:not([data-theme="light"]){--accent:#D9B44A;--accent-ink:#1A1405;--accent-soft:#33290F;--pf-accent-2:#3FA66B;--pf-grad:linear-gradient(135deg,#D9B44A 0%,#3FA66B 120%)}}
:root[data-product="backlog"][data-pbase="ember"][data-theme="dark"]{--accent:#D9B44A;--accent-ink:#1A1405;--accent-soft:#33290F;--pf-accent-2:#3FA66B;--pf-grad:linear-gradient(135deg,#D9B44A 0%,#3FA66B 120%)}
@media (prefers-color-scheme:dark){:root[data-product][data-pbase="ember"]:not([data-theme="light"]) body{background-image:radial-gradient(1200px 520px at 85% -10%,rgba(217,180,74,.08),transparent 60%),radial-gradient(900px 500px at 0% 0%,rgba(63,166,107,.12),transparent 60%)}}
:root[data-product][data-pbase="ember"][data-theme="dark"] body{background-image:radial-gradient(1200px 520px at 85% -10%,rgba(217,180,74,.08),transparent 60%),radial-gradient(900px 500px at 0% 0%,rgba(63,166,107,.12),transparent 60%)}
/* selected nav: red bar in light, thin gold rim in dark */
:root[data-product][data-pbase="ember"]:not([data-theme="dark"]) .nav a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--pf-red)}
:root[data-product][data-pbase="ember"][data-theme="dark"] .nav a[aria-current="page"],:root[data-product][data-pbase="ember"][data-theme="dark"] nav.main button[aria-pressed="true"]{box-shadow:inset 0 0 0 1px rgba(217,180,74,.4)}

/* ---------- full-screen working area: map + topology fill the viewport ---------- */
html[data-product="knoc"][data-view="map"] .vhead p,html[data-product="knoc"][data-view="topo"] .vhead p{display:none}
html[data-product="knoc"][data-view="map"] #view>.infobox,html[data-product="knoc"][data-view="topo"] #view>.infobox{font-size:12px;padding:6px 12px}
html[data-product="knoc"] #msvg{height:var(--pf-fill,clamp(460px,calc(100vh - 300px),1000px))!important}
html[data-product="knoc"] .topo{height:var(--pf-fill,clamp(500px,calc(100vh - 250px),1100px))!important}
html[data-product="knoc"] .mapwrap>:last-child{max-height:var(--pf-fill,none);overflow:auto}

/* ---------- secret ---------- */
.pf-secret{position:fixed;inset:0;pointer-events:none;z-index:2000;overflow:hidden}
.pf-secret i{position:absolute;width:10px;height:10px;border-radius:2px;background:var(--pf-gold);top:-12px;animation:pf-fall 2.4s linear forwards;opacity:.9}
@keyframes pf-fall{to{transform:translateY(110vh) rotate(540deg);opacity:.2}}

/* ---------- v4: palettes (Settings › Look and colours) ---------- */
.pf-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pf-swatch{display:flex;flex-direction:column;gap:4px;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:10px;cursor:pointer;color:var(--ink);font:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}
.pf-swatch:hover{transform:translateY(-1px);box-shadow:var(--pf-shadow-md)}
.pf-swatch[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}
.pf-swatch b{font-size:13px}.pf-swatch small{font-size:11.5px;color:var(--ink-3);line-height:1.35}
.pf-swatch-sw{display:flex;flex-direction:column;gap:3px;margin-bottom:4px}
.pf-swatch-sw span{display:flex;gap:3px;padding:4px;border-radius:7px}
.pf-swatch-sw .l{background:#FFFFFF;border:1px solid #E5E7EB}.pf-swatch-sw .d{background:#0F1512;border:1px solid #1F2A24}
.pf-swatch-sw i{width:22px;height:12px;border-radius:4px;display:block}
.pf-sec input[type=color]{width:100%;height:38px;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:3px;cursor:pointer}
.pf-preview{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0 4px;padding:12px;border:1px dashed var(--line);border-radius:12px}
.pf-prev-bar{flex:1;min-width:80px;height:8px;border-radius:5px;background:var(--pf-grad)}
/* contact cards */
.pf-ccards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.pf-ccard{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:12px;text-decoration:none;color:var(--ink);background:var(--surface);transition:border-color .15s,box-shadow .15s}
.pf-ccard:hover{border-color:var(--accent);box-shadow:var(--pf-shadow-md)}
.pf-ccard svg{width:22px;height:22px;flex:none;stroke:var(--accent);fill:none;stroke-width:1.8;margin-top:2px}
.pf-ccard span{display:flex;flex-direction:column;gap:2px;flex:1}.pf-ccard small{color:var(--ink-3);font-size:12px}
.pf-ccard em{font-style:normal;font-size:12px;color:var(--accent);white-space:nowrap;align-self:center}
.pf-sec textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:inherit;background:var(--surface);color:var(--ink);resize:vertical}

/* neutral surfaces for every palette except Signature */
:root[data-product][data-pbase="neutral"]{
  --ground:#F4F6FA;--surface:#FFFFFF;--surface-2:#F0F3F8;--surface-3:#E5EAF2;--line:#E2E8F0;--line-soft:#EDF1F6;
  --ink:#0F172A;--ink-2:#475569;--ink-3:#64748B;--ok:#15803D;--ok-bg:#E7F6EC;--warn:#B45309;--warn-bg:#FEF3E2;--crit:#DC2626;--crit-bg:#FDECEC;--unk:#64748B;--unk-bg:#EEF2F7;
  --sea:#E9EFF7;--land:#D6DFEA;--land-k:#C3D4EE;--land-line:#FFFFFF;--pf-glass:rgba(255,255,255,.78);
  --tp-bg:#F3F6FA;--tp-dot:#D6DEE8;--tp-node:#FFFFFF;--tp-line:#AEBBCB;--tp-ink:#172231;--tp-ink2:#5B6878;--tp-zone:rgba(40,90,160,.035);--tp-zst:#C3CEDB;--tp-zl:#5F7187;--tp-halo:#FFFFFF;--tp-land:#E4EAF1;--tp-landk:#D7E1EC;--tp-landl:#C3CEDB;--tp-bar:rgba(255,255,255,.94);--tp-barl:#D2DAE4;--tp-tb:#FFFFFF;--tp-tbl:#C9D3DF;--tp-tbi:#1F2B3A;--tp-gcl:rgba(40,60,90,.16)}
:root[data-product][data-pbase="neutral"] body{background-image:none}
@media (prefers-color-scheme:dark){:root[data-product][data-pbase="neutral"]:not([data-theme="light"]){
  --ground:#090D14;--surface:#101622;--surface-2:#161E2D;--surface-3:#1E293B;--line:#212B3B;--line-soft:#192232;
  --ink:#E7ECF4;--ink-2:#A8B3C4;--ink-3:#7D8A9C;--ok:#4ADE80;--ok-bg:#0F2A1B;--warn:#FBBF24;--warn-bg:#2E2410;--crit:#F87171;--crit-bg:#341618;--unk:#94A3B8;--unk-bg:#1A2233;
  --sea:#0B111B;--land:#1A2333;--land-k:#203759;--land-line:#090D14;--pf-glass:rgba(13,18,28,.78);
  --tp-bg:#0E141D;--tp-dot:#1E2835;--tp-node:#18212D;--tp-line:#3A4A5E;--tp-ink:#DCE4EE;--tp-ink2:#8795A8;--tp-zone:rgba(90,166,255,.04);--tp-zst:#243246;--tp-zl:#6D7F96;--tp-halo:#0E141C;--tp-land:#131B25;--tp-landk:#172231;--tp-landl:#243246;--tp-bar:rgba(14,20,28,.86);--tp-barl:#243246;--tp-tb:#141C27;--tp-tbl:#2B3848;--tp-tbi:#C9D5E3;--tp-gcl:rgba(160,185,215,.12)}}
:root[data-product][data-pbase="neutral"][data-theme="dark"]{
  --ground:#090D14;--surface:#101622;--surface-2:#161E2D;--surface-3:#1E293B;--line:#212B3B;--line-soft:#192232;
  --ink:#E7ECF4;--ink-2:#A8B3C4;--ink-3:#7D8A9C;--ok:#4ADE80;--ok-bg:#0F2A1B;--warn:#FBBF24;--warn-bg:#2E2410;--crit:#F87171;--crit-bg:#341618;--unk:#94A3B8;--unk-bg:#1A2233;
  --sea:#0B111B;--land:#1A2333;--land-k:#203759;--land-line:#090D14;--pf-glass:rgba(13,18,28,.78);
  --tp-bg:#0E141D;--tp-dot:#1E2835;--tp-node:#18212D;--tp-line:#3A4A5E;--tp-ink:#DCE4EE;--tp-ink2:#8795A8;--tp-zone:rgba(90,166,255,.04);--tp-zst:#243246;--tp-zl:#6D7F96;--tp-halo:#0E141C;--tp-land:#131B25;--tp-landk:#172231;--tp-landl:#243246;--tp-bar:rgba(14,20,28,.86);--tp-barl:#243246;--tp-tb:#141C27;--tp-tbl:#2B3848;--tp-tbi:#C9D5E3;--tp-gcl:rgba(160,185,215,.12)}
/* high contrast */
:root[data-product][data-pbase="contrast"]{--ground:#FFFFFF;--surface:#FFFFFF;--surface-2:#F2F2F2;--surface-3:#E6E6E6;--line:#5A5A5A;--line-soft:#8A8A8A;--ink:#000000;--ink-2:#1A1A1A;--ink-3:#333333;--ok:#006B1F;--warn:#7A4A00;--crit:#B00020;--sea:#DCEBFF;--land:#FFFFFF;--land-k:#E8E8E8;--land-line:#000000;--pf-glass:#FFFFFF}
:root[data-product][data-pbase="contrast"] body{background-image:none}
@media (prefers-color-scheme:dark){:root[data-product][data-pbase="contrast"]:not([data-theme="light"]){--ground:#000000;--surface:#000000;--surface-2:#111111;--surface-3:#1C1C1C;--line:#BDBDBD;--line-soft:#8A8A8A;--ink:#FFFFFF;--ink-2:#F0F0F0;--ink-3:#D6D6D6;--ok:#7CFF8F;--warn:#FFD54F;--crit:#FF6E6E;--sea:#000814;--land:#1A1A1A;--land-k:#333333;--land-line:#FFFFFF;--pf-glass:#000000}}
:root[data-product][data-pbase="contrast"][data-theme="dark"]{--ground:#000000;--surface:#000000;--surface-2:#111111;--surface-3:#1C1C1C;--line:#BDBDBD;--line-soft:#8A8A8A;--ink:#FFFFFF;--ink-2:#F0F0F0;--ink-3:#D6D6D6;--ok:#7CFF8F;--warn:#FFD54F;--crit:#FF6E6E;--sea:#000814;--land:#1A1A1A;--land-k:#333333;--land-line:#FFFFFF;--pf-glass:#000000}
.pf-note:empty{display:none}

/* ---------- access layer: profile, administration, view-as (access.js) ---------- */
.pf-b.sm{padding:4px 10px;font-size:12px}
.ax-hide{display:none !important}
.ax-ro{position:relative}
.ax-ro::after{content:'👁';font-size:10px;margin-left:auto;padding-left:4px;opacity:.6}
.ax-banner{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:950;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;background:var(--ink,#141A1C);color:var(--surface,#fff);border-radius:999px;padding:8px 10px 8px 16px;font-size:13px;box-shadow:0 12px 30px rgba(11,18,32,.28);max-width:calc(100vw - 32px)}
.ax-banner b{font-weight:700}
.ax-banner button{border:0;border-radius:999px;padding:5px 12px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;background:rgba(255,255,255,.14);color:inherit}
.ax-banner button:last-child{background:var(--accent,#2459E8);color:#fff}
.ax-p{font-size:14px;line-height:1.5;color:var(--ink-2)}
.ax-note{font-size:12px;color:var(--ink-3);margin:8px 0 0}
.ax-demo{font-size:12px;color:var(--ink-3)}
.ax-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
.ax-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-3)}
.ax-form .ax-wide{grid-column:1/-1}
.ax-form select,.ax-form input,.ax-form textarea{font:inherit;font-size:13px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 9px}
.ax-id{display:flex;gap:14px;align-items:center}
.ax-id>div{display:flex;flex-direction:column;gap:2px}.ax-id small{color:var(--ink-3);font-size:12px}
.ax-av{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#2459E8,#06B6D4);color:#fff;font-weight:700;font-size:18px;flex:none}
.ax-acts{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.ax-lv{display:inline-block;border-radius:6px;padding:2px 8px;font-size:12px;font-weight:600;border:1px solid transparent}
select.ax-lv{padding:4px 6px;border-color:var(--line);font:inherit;font-size:12px;cursor:pointer}
.ax-lv.l0{background:var(--surface-2,#EEF2F6);color:var(--ink-3)}
.ax-lv.l1{background:color-mix(in srgb,#2563EB 10%,transparent);color:#1D4ED8}
.ax-lv.l2{background:color-mix(in srgb,#0EA5A4 14%,transparent);color:#0F766E}
.ax-lv.l3{background:color-mix(in srgb,#7C3AED 14%,transparent);color:#6D28D9}
.ax-mxw{overflow-x:auto}
.ax-mx td,.ax-mx th{white-space:nowrap}
.ax-t td small{display:block;color:var(--ink-3);font-size:11.5px;margin-top:2px}
.ax-chip{border:1px solid var(--line);background:var(--surface);color:var(--ink-3);border-radius:12px;padding:2px 8px;font-size:11px;margin:2px;cursor:pointer;font-family:var(--pf-mono,monospace)}
.ax-chip.on{background:var(--accent,#2459E8);border-color:var(--accent,#2459E8);color:#fff}
.ax-mini{display:inline-block;background:var(--surface-2,#EEF2F6);border-radius:10px;padding:1px 8px;font-size:11.5px;margin:1px}
.ax-st{font-size:12px;font-weight:600;padding:2px 8px;border-radius:10px}
.ax-st.pending{background:color-mix(in srgb,#D97706 14%,transparent);color:#B45309}
.ax-st.active{background:color-mix(in srgb,#16A34A 14%,transparent);color:#15803D}
.ax-st.denied{background:color-mix(in srgb,#DC2626 12%,transparent);color:#B91C1C}
.ax-st.expired{background:var(--surface-2,#EEF2F6);color:var(--ink-3)}
.ax-tabs{margin-bottom:12px}
@media (max-width:640px){.ax-form{grid-template-columns:1fr}}
.ax-t td,.ax-t th,.ax-mine td,.ax-mine th,.ax-mx td:first-child,.ax-mx th:first-child{text-align:left}
.ax-t td.mono{white-space:nowrap}