/* ============================================================
   Nexus UI — shared theme + Apple-clean design layer
   Loaded LAST on every landing page. Light default, dark, system.
   ============================================================ */

/* ---------- 1. Uniform Apple font ---------- */
:root{
  --nx-sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
  --nx-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
html,body,button,input,textarea,select,optgroup,
h1,h2,h3,h4,h5,h6,p,a,span,div,li,ul,ol,td,th,label,small,em,strong,b,figcaption,blockquote{
  font-family:var(--nx-sans)!important;
}
code,pre,kbd,samp,tt,.foot code,[style*="ui-monospace"],[style*="monospace"]{
  font-family:var(--nx-mono)!important;
}

/* ---------- 2. Theme tokens ---------- */
:root{
  --nx-bg:#ffffff; --nx-bg-2:#f5f5f7;
  --nx-surface:#ffffff; --nx-surface-2:#f5f5f7;
  --nx-ink:#1d1d1f; --nx-ink-2:#6e6e73; --nx-ink-3:#86868b;
  --nx-line:#d2d2d7; --nx-line-2:#e8e8ed;
  --nx-accent:#2f6bff;
  color-scheme:light;
}
html[data-theme="dark"]{
  --nx-bg:#000000; --nx-bg-2:#0a0a0a;
  --nx-surface:#1c1c1e; --nx-surface-2:#141416;
  --nx-ink:#f5f5f7; --nx-ink-2:#a1a1a6; --nx-ink-3:#8e8e93;
  --nx-line:#2c2c2e; --nx-line-2:#242426;
  --nx-accent:#0a84ff;
  color-scheme:dark;
}

/* ---------- 3. Unified SOFT level palette (SPBE + PDVEA) ---------- */
/* One accent per level; card = soft tint of that accent. */
/* Per-level colour driven by settings vars --nx-lv1..10 (default soft blue #2f6bff) */
.pz.lv1{--pzc:var(--nx-lv1,#2f6bff)!important;--pz-ink:var(--nx-lv1-ink,#fff)!important}
.pz.lv2{--pzc:var(--nx-lv2,#2f6bff)!important;--pz-ink:var(--nx-lv2-ink,#fff)!important}
.pz.lv3{--pzc:var(--nx-lv3,#2f6bff)!important;--pz-ink:var(--nx-lv3-ink,#fff)!important}
.pz.lv4{--pzc:var(--nx-lv4,#2f6bff)!important;--pz-ink:var(--nx-lv4-ink,#fff)!important}
.pz.lv5{--pzc:var(--nx-lv5,#2f6bff)!important;--pz-ink:var(--nx-lv5-ink,#fff)!important}
.pz.lv6{--pzc:var(--nx-lv6,#2f6bff)!important;--pz-ink:var(--nx-lv6-ink,#fff)!important}
.pz.lv7{--pzc:var(--nx-lv7,#2f6bff)!important;--pz-ink:var(--nx-lv7-ink,#fff)!important}
.pz.lv8{--pzc:var(--nx-lv8,#2f6bff)!important;--pz-ink:var(--nx-lv8-ink,#fff)!important}
.pz.lv9{--pzc:var(--nx-lv9,#2f6bff)!important;--pz-ink:var(--nx-lv9-ink,#fff)!important}
.pz.lv10{--pzc:var(--nx-lv10,#2f6bff)!important;--pz-ink:var(--nx-lv10-ink,#fff)!important}

.pz{
  --pzc:var(--nx-lv1,#2f6bff)!important;
  --pz-ink:var(--nx-lv1-ink,#fff)!important;
  background:color-mix(in oklab,var(--pzc) 13%,var(--nx-surface))!important;
  color:var(--nx-ink)!important;
  border:1px solid color-mix(in oklab,var(--pzc) 26%,var(--nx-line))!important;
  border-radius:18px!important;
  box-shadow:0 1px 2px rgba(0,0,0,.04)!important;
  text-shadow:none!important;
  transform:none!important;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,border-color .22s!important;
}
html[data-theme="dark"] .pz{
  background:color-mix(in oklab,var(--pzc) 22%,var(--nx-surface))!important;
}
.pz::before,.pz::after{display:none!important}
.pz:hover{
  transform:translateY(-4px)!important;
  border-color:var(--pzc)!important;
  box-shadow:0 14px 30px -14px color-mix(in oklab,var(--pzc) 55%,transparent)!important;
}
.pz .num{
  background:var(--pzc)!important;
  color:var(--pz-ink,#fff)!important;opacity:1!important;font-weight:700!important;
}
.pz .code{color:var(--nx-ink-2)!important;opacity:1!important}
.pz .name{color:var(--nx-ink)!important}
.pz .meta{color:var(--nx-ink-2)!important;opacity:1!important}
.pz .meta svg{stroke:var(--pzc)!important}

/* ---------- 4. Theme toggle (segmented control) ---------- */
.nx-theme{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;
  background:var(--nx-surface-2);border:1px solid var(--nx-line);}
.nx-seg{display:inline-grid;place-items:center;width:32px;height:30px;border:none;background:transparent;
  border-radius:999px;color:var(--nx-ink-2);cursor:pointer;transition:background .2s,color .2s;padding:0;}
.nx-seg:hover{color:var(--nx-ink)}
.nx-seg svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nx-seg.active{background:var(--nx-surface);color:var(--nx-accent);box-shadow:0 1px 2px rgba(0,0,0,.12)}
html[data-theme="dark"] .nx-seg.active{background:#3a3a3c;color:#fff}

/* ============================================================
   5. INDEX (homepage) — theme-aware, clean solid background
   ============================================================ */
html[data-theme="light"] body{background:var(--nx-bg)!important;color:var(--nx-ink)!important}
html[data-theme="light"] .bg{
  background:radial-gradient(ellipse at 22% 8%,#eef2ff 0%,#f6f7fb 46%,#ffffff 100%)!important}
html[data-theme="light"] .orb{opacity:.20!important;mix-blend-mode:normal!important;filter:blur(96px)!important}
html[data-theme="light"] .grid-lines{background-image:linear-gradient(to right,rgba(0,0,0,.035) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.035) 1px,transparent 1px)!important}
html[data-theme="light"] .grain{opacity:.04!important}
html[data-theme="light"] .cursor{background:#1d1d1f!important;mix-blend-mode:normal!important}

/* topbar controls */
html[data-theme="light"] .settings-btn,
html[data-theme="light"] .status{background:var(--nx-surface)!important;border-color:var(--nx-line)!important;color:var(--nx-ink)!important;backdrop-filter:none!important}
html[data-theme="light"] .status{color:var(--nx-ink-2)!important}
html[data-theme="light"] .settings-btn:hover{background:var(--nx-surface-2)!important;border-color:var(--nx-ink-3)!important}

/* hero */
html[data-theme="light"] .eyebrow{color:var(--nx-ink-2)!important}
html[data-theme="light"] .title{color:var(--nx-ink)!important;font-weight:700!important}
html[data-theme="light"] .title em{color:var(--nx-accent)!important;font-style:normal!important;font-weight:700!important}
html[data-theme="dark"] .title{font-weight:600!important}
html[data-theme="dark"] .title em{font-style:normal!important;font-weight:700!important;color:#eab866!important;font-variation-settings:normal!important}
.title em{font-variation-settings:normal!important}
html[data-theme="light"] .subtitle{color:var(--nx-ink-2)!important}
html[data-theme="light"] .subtitle b{color:var(--nx-ink)!important}
html[data-theme="light"] .subtitle em{color:var(--nx-accent)!important}

/* app cards */
html[data-theme="light"] .card{background:var(--nx-surface)!important;border-color:var(--nx-line)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  box-shadow:0 1px 3px rgba(0,0,0,.06)!important}
html[data-theme="light"] .card:hover{box-shadow:0 24px 60px -28px color-mix(in oklab,var(--c) 45%,rgba(0,0,0,.35))!important}
html[data-theme="light"] .card h2{color:var(--nx-ink)!important}
html[data-theme="light"] .card p{color:var(--nx-ink-2)!important}
html[data-theme="light"] .card--arch p{color:var(--nx-ink-2)!important}
html[data-theme="light"] .card--arch em{color:var(--nx-accent)!important;font-style:normal!important;font-weight:600!important}
html[data-theme="light"] .card--arch .hint{color:var(--nx-ink-3)!important}
html[data-theme="light"] .icon-wrap{background:var(--nx-surface-2)!important;border-color:var(--nx-line)!important}
html[data-theme="light"] .arrow{color:var(--nx-ink-2)!important;border-color:var(--nx-line)!important}

/* footer */
html[data-theme="light"] .foot{color:var(--nx-ink-2)!important}
html[data-theme="light"] .foot code{background:var(--nx-surface-2)!important;color:var(--nx-ink)!important}

/* ---------- 6. SPBE house diagram — soft, flat, rounded ---------- */
.blk{
  background:color-mix(in oklab,var(--c,#5b6472) 20%,var(--nx-surface))!important;
  color:var(--nx-ink)!important;text-shadow:none!important;font-weight:700!important;
  border:1px solid color-mix(in oklab,var(--c,#5b6472) 42%,var(--nx-line))!important;
  border-radius:12px!important;
  box-shadow:0 1px 3px rgba(0,0,0,.08)!important;
}
.blk:hover{
  transform:translateY(-4px)!important;filter:none!important;
  box-shadow:0 14px 28px -14px color-mix(in oklab,var(--c,#5b6472) 55%,transparent)!important;
  border-color:var(--c,#5b6472)!important;
}
.blk:active{transform:translateY(-1px)!important}
.hs-visi{--c:#7c5ce6!important}
.hs-tujuan{--c:#5b6472!important}
.hs-layanan{--c:#c07f16!important}
.hs-aplikasi{--c:#2f6bff!important}
.hs-probis{--c:#e0754a!important}
.hs-data{--c:#0f9b8a!important}
.hs-infra{--c:#3e77c9!important}
.hs-aman{--c:#5b6472!important}
.hs-manaj,.hs-pillar-l,.hs-pillar-r,.hs-tata{--c:#1e9e57!important}
.hs-pillar-l,.hs-pillar-r{color:transparent!important}
.hs-arch-frame{background:var(--nx-surface-2)!important;border:1px solid var(--nx-line)!important;box-shadow:none!important}
.hs-arch-frame::before{color:var(--nx-ink-2)!important}

/* ---------- 7. PDVEA puzzle — rounded soft cards (no jigsaw knobs) ---------- */
.pvp{
  background:color-mix(in oklab,var(--c1) 13%,var(--nx-surface))!important;
  color:var(--nx-ink)!important;
  border:1px solid color-mix(in oklab,var(--c1) 28%,var(--nx-line))!important;
  border-radius:18px!important;
  box-shadow:0 1px 2px rgba(0,0,0,.06)!important;
}
html[data-theme="dark"] .pvp{background:color-mix(in oklab,var(--c1) 22%,var(--nx-surface))!important}
.pvp::before,.pvp::after{display:none!important}
.pvp:hover{transform:translateY(-4px)!important;filter:none!important;
  border-color:var(--c1)!important;
  box-shadow:0 16px 34px -16px color-mix(in oklab,var(--c1) 55%,transparent)!important}
.pvp-no{color:var(--c1)!important;opacity:1!important;font-weight:700!important}
.pvp-name{text-shadow:none!important;color:var(--nx-ink)!important}
.pvp-focus{color:var(--nx-ink-2)!important;opacity:1!important}
.pvp-sub{color:var(--c1)!important;opacity:.9!important}

/* overlays: cleaner scrim that respects theme */
html[data-theme="light"] .spbe-overlay{
  background:rgba(245,245,247,.86)!important;backdrop-filter:blur(20px) saturate(120%)!important}
html[data-theme="light"] .spbe-overlay::before{background-image:linear-gradient(to right,rgba(0,0,0,.04) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.04) 1px,transparent 1px)!important}
html[data-theme="light"] .spbe-title{color:var(--nx-ink)!important}
html[data-theme="light"] .spbe-title em{color:var(--nx-accent)!important;font-style:normal!important}
html[data-theme="light"] .spbe-sub{color:var(--nx-ink-2)!important}
html[data-theme="light"] .spbe-sub b{color:var(--nx-ink)!important}
html[data-theme="light"] .spbe-eyebrow{color:var(--nx-accent)!important;border-color:color-mix(in oklab,var(--nx-accent) 35%,var(--nx-line))!important}
html[data-theme="light"] .spbe-hint{color:var(--nx-ink-3)!important}
html[data-theme="light"] .spbe-close{background:var(--nx-surface)!important;border-color:var(--nx-line)!important;color:var(--nx-ink)!important}
html[data-theme="light"] .spbe-close:hover{background:var(--nx-accent)!important;color:#fff!important}

/* ============================================================
   8. DOMAIN + PDVEA inner pages — dark-mode overrides
   (built light; map their surfaces to tokens under dark)
   ============================================================ */
html[data-theme="dark"]{--ink:#f5f5f7;--muted:#a1a1a6;--line:#2c2c2e;--panel:#1c1c1e}
html[data-theme="dark"] html,
html[data-theme="dark"] body{background:var(--nx-bg)!important;color:var(--nx-ink)!important}
html[data-theme="dark"] .nav{background:rgba(10,10,10,.8)!important;border-bottom-color:var(--nx-line)!important}
html[data-theme="dark"] .brand{color:var(--nx-ink)!important}
html[data-theme="dark"] .back{background:var(--nx-surface)!important;color:var(--nx-ink)!important;border-color:var(--nx-line)!important}
html[data-theme="dark"] .back:hover{background:var(--nx-ink)!important;color:var(--nx-bg)!important}
html[data-theme="dark"] .side-item{color:var(--nx-ink-2)!important}
html[data-theme="dark"] .side-item:hover{background:var(--nx-surface)!important;color:var(--nx-ink)!important}
html[data-theme="dark"] .topsearch,
html[data-theme="dark"] .pu-search{background:var(--nx-surface)!important;border-color:var(--nx-line)!important}
html[data-theme="dark"] .topsearch input,
html[data-theme="dark"] .pu-search input{color:var(--nx-ink)!important}
html[data-theme="dark"] .topsearch .soon{background:var(--nx-surface-2)!important;color:var(--nx-ink-3)!important}
html[data-theme="dark"] .panel p,
html[data-theme="dark"] .panel ol li,
html[data-theme="dark"] .panel ul li,
html[data-theme="dark"] .kf .kf-v,
html[data-theme="dark"] .callout{color:#c7c7cc!important}
html[data-theme="dark"] .kf{background:var(--nx-surface)!important;border-color:var(--nx-line)!important}
html[data-theme="dark"] .callout{background:var(--nx-surface)!important;border-color:var(--nx-line)!important}
html[data-theme="dark"] .soonbox,
html[data-theme="dark"] .placeholder,
html[data-theme="dark"] .pu-empty{background:var(--nx-surface)!important;color:var(--nx-ink-2)!important}
html[data-theme="dark"] .pu-crumb{background:var(--nx-surface)!important;color:var(--nx-ink-2)!important}
html[data-theme="dark"] .pu-crumb:hover{background:var(--nx-surface-2)!important}
html[data-theme="dark"] .mp-box{background:var(--nx-surface)!important}
html[data-theme="dark"] .mp-head{background:var(--nx-surface)!important}
html[data-theme="dark"] .mp-x{background:var(--nx-surface-2)!important;color:var(--nx-ink)!important;border-color:var(--nx-line)!important}
html[data-theme="dark"] .mp-field .fv{color:#c7c7cc!important}
html[data-theme="dark"] .mp-rel,
html[data-theme="dark"] .pu-suggest,
html[data-theme="dark"] #map-ctx{background:var(--nx-surface)!important;border-color:var(--nx-line)!important}
html[data-theme="dark"] .pu-sg{border-bottom-color:var(--nx-line-2)!important}
html[data-theme="dark"] .pu-sg:hover,
html[data-theme="dark"] #map-ctx button:hover{background:var(--nx-surface-2)!important}
html[data-theme="dark"] .pu-detail{background:var(--nx-surface)!important;border-color:var(--nx-line)!important}

/* topbar pills — consistent surface in dark */
html[data-theme="dark"] .settings-btn,
html[data-theme="dark"] .status{background:var(--nx-surface)!important;border-color:var(--nx-line)!important;color:var(--nx-ink)!important;backdrop-filter:none!important}
html[data-theme="dark"] .status{color:var(--nx-ink-2)!important}
html[data-theme="dark"] .settings-btn:hover{background:#2a2a2c!important}

/* ---------- 11. Hero title — smaller, single flowing line (Apple style) ---------- */
.hero{max-width:940px!important}
.title{
  font-size:clamp(30px,4vw,54px)!important;
  line-height:1.08!important;
  letter-spacing:-.025em!important;
  font-weight:700!important;
  margin:0 0 20px!important;
}
.title em{font-style:normal!important;font-weight:700!important}
.eyebrow{margin-bottom:16px!important}

/* ---------- 12. Domain + PDVEA: right-aligned Back+Theme; wider CONTENT only ---------- */
.nav{gap:12px!important}
.nav .brand{margin-right:auto!important}      /* pushes Back + theme toggle to the right */
/* keep sidebar hugging the left (original full-width layout) — do NOT centre .layout */
main{max-width:1400px!important}               /* widen standalone PDVEA pages (was 980) */
.layout main,.layout .content{max-width:none!important;margin:0!important;padding-left:0!important;padding-right:0!important}

/* ---------- 13. Contrast polish (from QA) ---------- */
html[data-theme="light"] .status code{color:var(--nx-ink)!important}
html[data-theme="light"] .status{color:var(--nx-ink-2)!important}
html[data-theme="light"] .center-msg p,
html[data-theme="light"] .center-msg .sub,
html[data-theme="light"] .center-msg small{color:#6e6e73!important}

/* reduce-motion already handled per page */

/* ---------- 9. Hero legibility hard-lock (light) ---------- */
html[data-theme="light"] body .hero .title,
html[data-theme="light"] body .hero .subtitle{
  opacity:1!important;mix-blend-mode:normal!important;
  color:var(--nx-ink)!important;-webkit-text-fill-color:var(--nx-ink)!important;
}
html[data-theme="light"] body .hero .title em,
html[data-theme="light"] body .hero .subtitle em{
  color:var(--nx-accent)!important;-webkit-text-fill-color:var(--nx-accent)!important;
}
html[data-theme="light"] body .hero .subtitle b{color:var(--nx-ink)!important;-webkit-text-fill-color:var(--nx-ink)!important}
/* keep orbs subtle so hero stays clean */
html[data-theme="light"] .orb{opacity:.14!important}
html[data-theme="light"] .grid-lines{opacity:.5!important}

/* ---------- 10. Remove colourful background orbs (both themes) ---------- */
.orb{display:none!important}
html[data-theme="light"] .bg{background:var(--nx-bg)!important}
html[data-theme="dark"] .bg{background:#000!important}
/* neutral (no coloured) scrim on overlays */
.spbe-overlay{background:rgba(6,8,12,.9)!important}
html[data-theme="light"] .spbe-overlay{background:rgba(245,245,247,.94)!important}