/* ============================================================
   KOREVRA CRM+ — INTERACTIVE PLATFORM
   Aesthetic: Editorial enterprise · Cartographic detail
   Palette: Deep navy canvas · Gold annotation · Teal data
   ============================================================ */
:root{
  --navy:        #0D2B4E;
  --navy-deep:   #081B33;
  --navy-mid:    #112F55;
  --navy-soft:   #1A3D6B;
  --navy-line:   #1E466F;
  --teal:        #1B8A8A;
  --teal-light:  #2BB1B1;
  --teal-deep:   #0F6E6E;
  --gold:        #D4A843;
  --gold-bright: #E5BC4F;
  --gold-soft:   #F1D896;
  --cream:       #F4EDDF;
  --cream-warm:  #EDE3CC;
  --paper:       #FAF6EE;
  --ink:         #0A1220;
  --ink-soft:    #2A3445;
  --good:        #5BC178;
  --warn:        #E5A14A;
  --bad:         #E5594F;
  --info:        #6FA6E0;
  /* a11y — the tone tokens above are FILL weights. Used as INK on their own
     12-25% tint over navy they measured: teal-light 4.01, good 4.00,
     info 4.29. These lifted variants are the text-role versions. */
  --teal-ink:    #5FD6D6;   /* 4.76 on the .15 teal tint over --navy      */
  --good-ink:    #8FEBA9;   /* 5.53 on the .15 good tint over --navy      */
  --info-ink:    #A0C8F2;   /* 5.19 on the .12 info tint over --navy      */
  --gold-ink:    #E8C46A;   /* 5.43 on the .18 gold tint over --navy      */

  /* --- AA text/fill variants (accessibility pass) -------------------------
     --bad-ink   : --bad as TEXT on the navy surfaces measured only 3.76
                   (#E5594F on #112F55). Same coral family, lifted: 5.20 on
                   #112F55, 4.87 on the lightest navy card #1D354D.
                   --bad stays the FILL token (cream/white sits on it).
     --teal-fill : cream on --teal avatar fills measured 3.57. Deepened one
                   step inside the teal family -> cream 4.78 (and 5.19 at the
                   --teal-deep end of the same gradient).                     */
  --bad-ink:     #F0817A;
  --teal-fill:   #117474;
  /* --cream-mute: the colour `--cream at opacity .68` already composites to on
     the navy surfaces, frozen as an opaque ink. Used where the muted block also
     contains a hue override (gold/bad/good) or a filled chip — group opacity
     dragged those down with it (gold read 3.36–3.49, teal avatars 2.66).      */
  --cream-mute:  #ABB0B3;

  --rule:        rgba(212,168,67,.32);
  --rule-strong: rgba(212,168,67,.6);
  --rule-cream:  rgba(244,237,223,.14);
  --rule-cream-2:rgba(244,237,223,.08);
  --grid:        rgba(244,237,223,.05);

  --shadow-1:    0 1px 0 rgba(255,255,255,.06) inset, 0 24px 60px -20px rgba(0,0,0,.55);
  --shadow-soft: 0 1px 0 rgba(255,255,255,.04) inset, 0 14px 40px -16px rgba(0,0,0,.45);
  --shadow-pop:  0 30px 80px -20px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.04) inset;

  --topbar-h:    62px;
  --sidebar-w:   228px;
  --ai-rail-w:   380px;

  --ff-serif:    "Fraunces", Georgia, serif;
  --ff-sans:     "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-mono:     "JetBrains Mono", ui-monospace, monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
html, body{height:100%;}
body{
  background: var(--navy-deep);
  color: var(--cream);
  font-family: var(--ff-sans);
  font-feature-settings:"ss01","ss02","cv11";
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.serif{font-family: var(--ff-serif); letter-spacing:-.01em;}
.serif-italic{font-family: var(--ff-serif); font-style: italic; font-variation-settings:"opsz" 144,"SOFT" 80,"WONK" 1;}
.mono{font-family: var(--ff-mono);}

::selection{ background: var(--gold); color: var(--navy-deep); }
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: var(--navy-line); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover{ background: var(--gold); }

/* ============================================================
   BOOT SCREEN
============================================================ */
.boot{
  position: fixed; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 30%, var(--navy), var(--navy-deep) 70%);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  transition: opacity .6s ease;
}
.boot::before{
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(244,237,223,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,237,223,.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000, transparent 80%);
}
.boot.fade{ opacity: 0; pointer-events: none; }
.boot-inner{
  text-align: center; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.boot-mark{
  width: 84px; height: 84px;
  background: linear-gradient(135deg, var(--gold), var(--gold-bright));
  display: flex; align-items: center; justify-content: center;
  color: var(--navy-deep);
  font-family: var(--ff-serif); font-weight: 800;
  font-size: 48px;
  box-shadow: 0 0 0 1px rgba(212,168,67,.7), 0 8px 40px -8px rgba(212,168,67,.5);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%, 100%{ box-shadow: 0 0 0 1px rgba(212,168,67,.7), 0 8px 40px -8px rgba(212,168,67,.5); }
  50%{ box-shadow: 0 0 0 1px rgba(212,168,67,.9), 0 8px 60px -8px rgba(212,168,67,.8); }
}
.boot-text{ display: flex; flex-direction: column; gap: 4px; }
.boot-brand{
  font-family: var(--ff-serif);
  font-size: 32px; font-weight: 400;
  color: var(--cream);
  letter-spacing: -0.02em;
}
.boot-brand em{ font-style: italic; color: var(--gold); font-variation-settings:"WONK" 1; }
.boot-brand span{ color: var(--gold); font-weight: 500; }
.boot-tag{
  font-family: var(--ff-mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-soft); opacity: .7;
}
.boot-bar{
  width: 280px; height: 2px; margin-top: 8px;
  background: rgba(244,237,223,.1);
  position: relative; overflow: hidden;
}
.boot-fill{
  position: absolute; left: -30%; top: 0; height: 100%; width: 30%;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: bootbar 1.8s ease-in-out infinite;
}
@keyframes bootbar{
  0%{ left: -30%; } 100%{ left: 100%; }
}
.boot-status{
  font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--cream); opacity: .7;
}
.boot-meta{
  display: flex; gap: 28px; margin-top: 6px;
  font-family: var(--ff-mono); font-size: 9px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-soft); opacity: .55;
}

/* ============================================================
   APP SHELL
============================================================ */
.app{
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  height: 100vh;
  background: var(--navy-deep);
}

/* ============================================================
   TOP BAR
============================================================ */
.topbar{
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: 408px 1fr 460px;
  align-items: center;
  background: rgba(8,27,51,.82);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--rule-cream);
  padding: 0 20px 0 0;
  position: relative; z-index: 30;
}
.topbar-l, .topbar-r{
  display: flex; align-items: center; gap: 14px;
}
.topbar-c{ display: flex; justify-content: center; }
.topbar-r{ justify-content: flex-end; }

.brand{
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px;
  width: var(--sidebar-w);
  height: var(--topbar-h);
  border-right: 1px solid var(--rule-cream);
}
.brand-mark{
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--gold), var(--gold-bright));
  color: var(--navy-deep);
  font-family: var(--ff-serif); font-weight: 800; font-size: 18px;
  letter-spacing: -0.01em;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(212,168,67,.5), 0 4px 18px -6px rgba(212,168,67,.5);
}
.brand-text{
  display: flex; flex-direction: column; line-height: 1;
}
.brand-name{
  font-family: var(--ff-serif);
  font-size: 18px; font-weight: 600;
  letter-spacing: -.01em;
  color: var(--cream);
}
.brand-plus{
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--gold);
  text-transform: uppercase;
  margin-top: 2px;
}
.brand-plus sup{ font-size: 11px; vertical-align: top; margin-left: 1px; }

.tenant-switch{
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 14px;
  background: rgba(244,237,223,.04);
  border: 1px solid var(--rule-cream);
  border-radius: 4px;
  cursor: pointer;
  transition: all .2s;
  height: 38px;
}
.tenant-switch:hover{ border-color: var(--gold); background: rgba(212,168,67,.08); }
.tenant-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 3px rgba(91,193,120,.18);
}
.tenant-name{ display: flex; flex-direction: column; line-height: 1.1; }
.tenant-label{
  font-family: var(--ff-mono); font-size: 8.5px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-soft); opacity: .7;
}
.tenant-current{
  font-family: var(--ff-serif); font-size: 13px;
  font-weight: 500; color: var(--cream);
  letter-spacing: -.005em;
}
.caret{ color: var(--gold-soft); opacity: .6; font-size: 10px; }

.search{
  display: flex; align-items: center; gap: 10px;
  width: 100%; max-width: 540px;
  background: rgba(244,237,223,.04);
  border: 1px solid var(--rule-cream);
  border-radius: 4px;
  padding: 0 12px;
  height: 38px;
  transition: all .2s;
}
.search:focus-within{ border-color: var(--gold); background: rgba(212,168,67,.06); }
.search-ic{ color: var(--gold); font-size: 16px; }
.search input{
  flex: 1; background: transparent; border: 0; outline: 0;
  color: var(--cream);
  font-family: var(--ff-sans);
  font-size: 13px;
}
.search input::placeholder{ color: rgba(244,237,223,.45); }
.kbd{
  font-family: var(--ff-mono);
  font-size: 9.5px;
  background: rgba(244,237,223,.08);
  border: 1px solid var(--rule-cream);
  padding: 3px 7px;
  border-radius: 3px;
  color: var(--cream); opacity: .65;
  letter-spacing: .04em;
}

.chip{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px;
  border: 1px solid var(--rule-cream);
  border-radius: 3px;
  background: rgba(244,237,223,.03);
  font-family: var(--ff-mono);
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cream); opacity: .9;
}
.chip-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 3px rgba(91,193,120,.2);
  animation: blink 2s ease-in-out infinite;
}
@keyframes blink{
  0%, 100%{ opacity: 1; }
  50%{ opacity: .55; }
}
.chip-ok .chip-dot{ background: var(--good); box-shadow: 0 0 0 3px rgba(91,193,120,.2); }
.chip-warn .chip-dot{ background: var(--warn); box-shadow: 0 0 0 3px rgba(229,161,74,.2); }
.chip-bad .chip-dot{ background: var(--bad); box-shadow: 0 0 0 3px rgba(229,89,79,.2); }

.icon-btn{
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--rule-cream);
  border-radius: 3px;
  color: var(--cream);
  cursor: pointer;
  transition: all .2s;
}
.icon-btn:hover{ border-color: var(--gold); color: var(--gold); }
.icon-badge{
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--gold);
  color: var(--navy-deep);
  font-family: var(--ff-mono);
  font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
}

.user{
  display: flex; align-items: center; gap: 10px;
  padding-left: 14px;
  border-left: 1px solid var(--rule-cream);
  height: 38px;
}
.avatar{
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-fill), var(--teal-deep));
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-serif); font-weight: 600;
  font-size: 12px;
  letter-spacing: .02em;
  border: 1px solid rgba(244,237,223,.18);
}
.user-text{ display: flex; flex-direction: column; line-height: 1.15; }
.user-name{
  font-family: var(--ff-serif); font-size: 13px;
  font-weight: 500; color: var(--cream);
}
.user-role{
  font-family: var(--ff-mono); font-size: 9px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-soft); opacity: .7;
}

/* ============================================================
   SIDEBAR
============================================================ */
.sidebar{
  grid-row: 2; grid-column: 1;
  background: var(--navy-deep);
  border-right: 1px solid var(--rule-cream);
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
}
.sidebar::before{
  content: ""; position: absolute; right: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  opacity: .25;
}
.nav{
  flex: 1; overflow-y: auto;
  padding: 18px 0 14px;
}
.nav-section{
  margin-bottom: 18px;
  padding: 0 12px;
}
.nav-section-label{
  display: block;
  font-family: var(--ff-mono);
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-soft); opacity: .75; /* .6 washed the gold "HR" chip's navy ink to 3.46 on gold; .75 -> 4.91 */
  padding: 0 8px 6px;
  margin-bottom: 4px;
  border-bottom: 1px dashed var(--rule);
}
.nav-item{
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px;
  cursor: pointer;
  border-radius: 3px;
  color: var(--cream);
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
  position: relative;
  transition: background .15s, color .15s;
  letter-spacing: -.005em;
  margin-bottom: 1px;
}
.nav-item:hover{ background: rgba(244,237,223,.04); color: var(--gold); }
.nav-item.active{
  background: linear-gradient(90deg, rgba(212,168,67,.14), rgba(212,168,67,.02));
  color: var(--gold);
}
.nav-item.active::before{
  content: ""; position: absolute; left: -2px; top: 6px; bottom: 6px;
  width: 2px; background: var(--gold);
  border-radius: 2px;
}
.nav-ic{
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  font-size: 14px;
  color: var(--gold-soft);
  opacity: .85;
}
.nav-item.active .nav-ic{ color: var(--gold); opacity: 1; }
.nav-text{ flex: 1; }
.nav-badge{
  font-family: var(--ff-mono);
  font-size: 9px; padding: 2px 6px;
  background: rgba(244,237,223,.06);
  border: 1px solid var(--rule-cream);
  border-radius: 3px;
  color: var(--gold-soft);
  letter-spacing: .04em;
}
.nav-badge.dot-live{
  background: var(--good); color: var(--navy-deep);
  font-weight: 700;
  border-color: var(--good);
}
.nav-tag{
  font-family: var(--ff-mono);
  font-size: 8.5px;
  background: var(--gold); color: var(--navy-deep);
  font-weight: 700;
  padding: 1px 5px;
  letter-spacing: .08em;
  border-radius: 2px;
}

.sidebar-foot{
  padding: 14px 16px 16px;
  border-top: 1px solid var(--rule-cream);
  background: var(--navy-deep);
}
.status-block{
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--rule);
}
.status-row{
  display: flex; justify-content: space-between;
  padding: 3px 0;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .04em;
}
.status-label{ color: var(--cream); opacity: .68; text-transform: uppercase; letter-spacing: .14em; }
.status-val{ color: var(--cream); opacity: .85; display: flex; align-items: center; gap: 6px; }
.dot{ width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.dot-ok{ background: var(--good); box-shadow: 0 0 0 2px rgba(91,193,120,.18); }
.dot-warn{ background: var(--warn); box-shadow: 0 0 0 2px rgba(229,161,74,.18); }
.dot-bad{ background: var(--bad); box-shadow: 0 0 0 2px rgba(229,89,79,.18); }

.lang-toggle{ display: flex; flex-direction: column; gap: 8px; }
.lang-label{
  font-family: var(--ff-mono); font-size: 9px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-soft); opacity: .6;
}
.lang-pills{ display: flex; gap: 4px; }
.lang-pill{
  flex: 1;
  background: transparent;
  border: 1px solid var(--rule-cream);
  color: var(--cream);
  font-family: var(--ff-mono);
  font-size: 10px; padding: 5px 0;
  letter-spacing: .08em;
  cursor: pointer;
  border-radius: 2px;
  transition: all .15s;
}
.lang-pill:hover{ border-color: var(--gold); color: var(--gold); }
.lang-pill.active{
  background: var(--gold); border-color: var(--gold);
  color: var(--navy-deep); font-weight: 700;
}

/* ============================================================
   CANVAS / VIEWS
============================================================ */
.canvas{
  grid-row: 2; grid-column: 2;
  background: var(--navy);
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
.canvas::before{
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle 700px at 90% -10%, rgba(27,138,138,.10), transparent 60%),
    radial-gradient(circle 600px at -5% 110%, rgba(212,168,67,.06), transparent 60%);
  pointer-events: none; z-index: 0;
}
.view{
  position: relative; z-index: 1;
  padding: 28px 32px 80px;
  max-width: 1640px;
  margin: 0 auto;
}
.view-head{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 30px;
  padding-bottom: 22px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--rule-cream);
}
.view-eyebrow{
  font-family: var(--ff-mono);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.view-eyebrow::before{
  content: ""; width: 24px; height: 1px; background: var(--gold);
}
.view-title{
  font-family: var(--ff-serif);
  font-weight: 300;
  font-size: 42px;
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--cream);
  margin-bottom: 8px;
}
.view-title em{
  font-style: italic;
  color: var(--gold);
  font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1;
}
.view-lede{
  font-family: var(--ff-serif);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.45;
  color: var(--cream); opacity: .82;
  max-width: 76ch;
  margin-top: 8px;
}
.view-actions{ display: flex; gap: 10px; flex-shrink: 0; align-items: center; }

/* Common components */
.btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  font-family: var(--ff-sans);
  font-size: 12px; font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  transition: all .15s ease;
}
.btn:hover{ border-color: var(--gold); color: var(--gold); }
.btn-primary{
  background: var(--gold);
  color: var(--navy-deep);
  border-color: var(--gold);
}
.btn-primary:hover{ background: var(--gold-bright); border-color: var(--gold-bright); color: var(--navy-deep); }
.btn-ghost{
  background: transparent; color: var(--cream);
  border-color: var(--rule-cream);
}
.btn-ghost:hover{ border-color: var(--gold); color: var(--gold); }
.btn-sm{ padding: 6px 12px; font-size: 10.5px; }
.btn-icon{
  padding: 8px;
  display: inline-flex; align-items: center; justify-content: center;
}

.card{
  background: linear-gradient(180deg, var(--navy-mid), var(--navy));
  border: 1px solid var(--rule-cream);
  border-radius: 4px;
  box-shadow: var(--shadow-soft);
}
.card-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px dashed var(--rule);
}
.card-title{
  font-family: var(--ff-mono);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
}
.card-meta{
  font-family: var(--ff-mono);
  font-size: 9.5px; color: var(--cream-mute);
  letter-spacing: .12em; text-transform: uppercase;
}
.card-body{ padding: 18px; }

.stat{
  display: flex; flex-direction: column; gap: 4px;
}
.stat-label{
  font-family: var(--ff-mono);
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cream); opacity: .65;
}
.stat-value{
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: 28px;
  color: var(--gold);
  letter-spacing: -.025em;
  line-height: 1;
}
.stat-value small{
  font-size: .55em;
  color: var(--gold-soft);
  font-weight: 300;
  margin-left: 4px;
}
.stat-delta{
  font-family: var(--ff-mono);
  font-size: 10px; letter-spacing: .04em;
  color: var(--cream); opacity: .7;
  margin-top: 4px;
}
/* the .7 above composited --good down to 3.87; the hue variants carry meaning,
   so they opt out of the wash: --good 5.98, --bad-ink 5.20 on #112F55 */
.stat-delta.up{ color: var(--good); opacity: 1; }
.stat-delta.down{ color: var(--bad-ink); opacity: 1; }

/* ============================================================
   COMMAND CENTRE (Home)
============================================================ */
.home-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 1400px){
  .home-grid{ grid-template-columns: 1fr; }
}

.greeting{
  background: linear-gradient(180deg, rgba(212,168,67,.08), rgba(212,168,67,.01));
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 24px 28px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}
.greeting::before{
  content: ""; position: absolute; top: 0; right: 0;
  width: 200px; height: 200px;
  background: radial-gradient(circle at 80% 20%, rgba(212,168,67,.18), transparent 70%);
  pointer-events: none;
}
.greeting-text{
  font-family: var(--ff-serif);
  font-weight: 300;
  font-size: 26px;
  line-height: 1.25;
  color: var(--cream);
  letter-spacing: -.015em;
  position: relative;
}
.greeting-text em{ color: var(--gold); font-style: italic; font-variation-settings:"WONK" 1; }
.greeting-meta{
  display: flex; gap: 24px; margin-top: 14px;
  font-family: var(--ff-mono);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cream); opacity: .9; /* .7 washed the gold <b> values to 3.39 on the #1D354D card; .9 -> 4.84 */
}
.greeting-meta span{ display: inline-flex; align-items: center; gap: 8px; }
.greeting-meta b{ color: var(--gold); font-weight: 500; }

/* NBA list */
.nba{ display: flex; flex-direction: column; gap: 1px; background: var(--rule-cream); }
.nba-row{
  background: var(--navy-deep);
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: center;
  cursor: pointer;
  transition: background .15s;
}
.nba-row:hover{ background: var(--navy-mid); }
.nba-idx{
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: rgba(212,168,67,.1);
  border: 1px solid var(--rule);
  color: var(--gold);
  font-family: var(--ff-mono);
  font-size: 12px; font-weight: 600;
  border-radius: 50%;
}
.nba-main{ display: flex; flex-direction: column; gap: 4px; }
.nba-action{
  font-family: var(--ff-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--cream);
  letter-spacing: -.005em;
}
.nba-context{
  font-family: var(--ff-sans);
  font-size: 11.5px;
  color: var(--cream); opacity: .7;
  display: flex; gap: 14px; flex-wrap: wrap;
}
.nba-context b{ color: var(--gold-soft); font-weight: 500; }
.nba-score{
  font-family: var(--ff-serif);
  font-size: 22px;
  color: var(--gold);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1;
}
.nba-score small{ font-size: .5em; color: var(--gold-soft); }

/* Pipeline */
.pipeline{
  display: flex; flex-direction: column; gap: 12px;
}
.pipe-stage{
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  background: var(--navy-deep);
  border-radius: 3px;
  border: 1px solid var(--rule-cream);
  transition: all .15s;
  cursor: pointer;
}
.pipe-stage:hover{ border-color: var(--gold); transform: translateX(2px); }
.pipe-stage-name{
  font-family: var(--ff-serif);
  font-size: 15px;
  color: var(--cream);
}
.pipe-bar{
  position: relative;
  height: 6px;
  background: rgba(244,237,223,.08);
  border-radius: 3px;
  overflow: hidden;
}
.pipe-fill{
  position: absolute; left: 0; top: 0; height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  border-radius: 3px;
  transition: width 1s ease;
}
.pipe-stats{
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--ff-mono);
}
.pipe-amt{
  font-family: var(--ff-serif);
  font-size: 17px;
  color: var(--gold);
  font-weight: 400;
}
.pipe-count{ font-size: 10px; color: var(--cream); opacity: .6; }

/* Forecast */
.forecast-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule-cream);
  margin: 0 -18px -18px;
}
.fc-cell{
  background: var(--navy-deep);
  padding: 18px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.fc-cell-label{
  font-family: var(--ff-mono);
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cream); opacity: .65;
}
.fc-cell-value{
  font-family: var(--ff-serif);
  font-size: 26px;
  color: var(--gold);
  font-weight: 400;
  letter-spacing: -.02em;
}

/* AI insight inline card */
.insight{
  background: linear-gradient(180deg, rgba(27,138,138,.12), rgba(27,138,138,.02));
  border: 1px solid rgba(27,138,138,.4);
  border-radius: 3px;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}
.insight::before{
  content: "✦";
  position: absolute; top: 12px; right: 16px;
  color: var(--teal-light);
  font-size: 18px;
  opacity: .7;
}
.insight-label{
  font-family: var(--ff-mono);
  font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--teal-light);
  margin-bottom: 8px;
}
.insight-body{
  font-family: var(--ff-serif);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--cream);
  letter-spacing: -.005em;
}
.insight-body b{ color: var(--gold-bright); font-weight: 500; }
.insight-actions{
  display: flex; gap: 8px; margin-top: 12px;
}

/* Inbox preview */
.inbox{ display: flex; flex-direction: column; }
.inbox-row{
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--rule-cream);
  cursor: pointer;
  transition: background .15s;
}
.inbox-row:hover{ background: var(--navy-mid); }
.inbox-row:last-child{ border-bottom: 0; }
.inbox-channel{
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(212,168,67,.08);
  border: 1px solid var(--rule);
  color: var(--gold);
  font-size: 13px;
}
.inbox-ch-wa{ background: rgba(91,193,120,.12); border-color: rgba(91,193,120,.4); color: var(--good); }
.inbox-ch-em{ background: rgba(111,166,224,.12); border-color: rgba(111,166,224,.4); color: var(--info); }
.inbox-ch-vc{ background: rgba(229,161,74,.12); border-color: rgba(229,161,74,.4); color: var(--warn); }
.inbox-ch-ss{ background: rgba(43,177,177,.12); border-color: rgba(43,177,177,.4); color: var(--teal-light); }
.inbox-body{ display: flex; flex-direction: column; gap: 2px; }
.inbox-from{
  font-family: var(--ff-serif);
  font-size: 13.5px;
  color: var(--cream);
  font-weight: 500;
}
.inbox-msg{
  font-family: var(--ff-sans);
  font-size: 11.5px;
  color: var(--cream); opacity: .65;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 360px;
}
.inbox-time{
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  color: var(--cream); opacity: .68;
  text-transform: uppercase;
}

/* ============================================================
   KPI STRIP
============================================================ */
.kpi-strip{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--rule-cream);
  border: 1px solid var(--rule-cream);
  border-radius: 4px;
  margin-bottom: 22px;
  overflow: hidden;
}
.kpi-strip .kpi{
  background: var(--navy-deep);
  padding: 16px 18px;
  position: relative;
}
.kpi-strip .kpi::before{
  content: ""; position: absolute; top: 0; left: 0; width: 36px; height: 2px;
  background: var(--gold);
}
.kpi-name{
  font-family: var(--ff-mono);
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cream); opacity: .6;
  margin-bottom: 6px;
}
.kpi-num{
  font-family: var(--ff-serif);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--gold);
  line-height: 1;
}
.kpi-num small{ font-size: .55em; color: var(--gold-soft); }
.kpi-delta{
  font-family: var(--ff-mono);
  font-size: 10px;
  margin-top: 6px;
  letter-spacing: .04em;
}
.kpi-delta.up{ color: var(--good); }
.kpi-delta.down{ color: var(--bad-ink); }
.kpi-spark{
  margin-top: 8px;
  height: 22px;
}

/* ============================================================
   SALES PIPELINE (Kanban)
============================================================ */
.kanban{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  align-items: start;
}
.k-col{
  background: var(--navy-deep);
  border: 1px solid var(--rule-cream);
  border-radius: 4px;
  min-height: 600px;
}
.k-col-head{
  padding: 14px 14px 12px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--rule-cream);
}
.k-col-name{
  font-family: var(--ff-serif);
  font-size: 15px;
  color: var(--cream);
}
.k-col-meta{
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--gold);
  letter-spacing: .04em;
}
.k-col-amt{
  padding: 0 14px 12px;
  font-family: var(--ff-serif);
  font-size: 18px;
  color: var(--gold);
  letter-spacing: -.02em;
  border-bottom: 1px dashed var(--rule);
}
.k-cards{ padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.deal{
  background: var(--navy-mid);
  border: 1px solid var(--rule-cream);
  border-radius: 3px;
  padding: 12px;
  cursor: pointer;
  transition: all .15s;
}
.deal:hover{ border-color: var(--gold); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.deal-co{
  font-family: var(--ff-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--cream);
  letter-spacing: -.005em;
  margin-bottom: 4px;
}
.deal-meta{
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--cream); opacity: .68;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.deal-amt{
  font-family: var(--ff-serif);
  font-size: 17px;
  color: var(--gold);
  letter-spacing: -.02em;
  font-weight: 400;
}
.deal-footer{
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--rule);
}
.deal-rep{
  font-family: var(--ff-mono);
  font-size: 9px; letter-spacing: .04em;
  color: var(--cream); opacity: .65;
  display: flex; align-items: center; gap: 6px;
}
.deal-rep .deal-av{
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-fill), var(--teal-deep));
  color: var(--cream);
  font-family: var(--ff-sans);
  font-size: 8px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.deal-conf{
  font-family: var(--ff-mono);
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 2px;
  letter-spacing: .04em;
  background: rgba(91,193,120,.15);
  color: var(--good);
  border: 1px solid rgba(91,193,120,.4);
}
.deal-conf.warm{ background: rgba(229,161,74,.15); color: var(--warn); border-color: rgba(229,161,74,.4); }
.deal-conf.cold{ background: rgba(229,89,79,.15); color: var(--bad-ink); border-color: rgba(229,89,79,.4); }
.deal-tags{
  display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px;
}
.deal-tag{
  font-family: var(--ff-mono);
  font-size: 8.5px;
  padding: 2px 6px;
  background: rgba(244,237,223,.06);
  border: 1px solid var(--rule-cream);
  color: var(--gold-soft);
  border-radius: 2px;
  letter-spacing: .04em;
}

/* ============================================================
   CUSTOMER 360
============================================================ */
.c360-grid{
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 1400px){
  .c360-grid{ grid-template-columns: 1fr; }
}
.c360-profile{
  background: linear-gradient(180deg, var(--navy-mid), var(--navy));
  border: 1px solid var(--rule-cream);
  border-radius: 4px;
  padding: 24px;
}
.c360-avatar{
  width: 90px; height: 90px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-fill), var(--teal-deep));
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-serif);
  font-size: 36px;
  font-weight: 500;
  border: 2px solid var(--gold);
  margin-bottom: 18px;
  position: relative;
}
.c360-avatar::after{
  content: "✓";
  position: absolute; bottom: -2px; right: -2px;
  width: 24px; height: 24px;
  background: var(--good);
  border: 2px solid var(--navy);
  color: var(--navy-deep);
  font-size: 12px; font-weight: 700;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.c360-name{
  font-family: var(--ff-serif);
  font-size: 24px;
  font-weight: 400;
  color: var(--cream);
  letter-spacing: -.015em;
  margin-bottom: 6px;
}
.c360-sub{
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--gold-soft);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.c360-meta-list{ display: flex; flex-direction: column; gap: 1px; }
.c360-meta-row{
  display: grid;
  grid-template-columns: 90px 1fr;
  padding: 8px 0;
  border-bottom: 1px dashed var(--rule);
  font-family: var(--ff-mono);
  font-size: 11px;
}
.c360-meta-row:last-child{ border: 0; }
.c360-meta-k{
  color: var(--cream); opacity: .68;
  letter-spacing: .12em; text-transform: uppercase;
  font-size: 9px;
  padding-top: 2px;
}
.c360-meta-v{
  font-family: var(--ff-sans);
  color: var(--cream);
  font-size: 12.5px;
}
.c360-meta-v.gold{ color: var(--gold); font-family: var(--ff-serif); font-size: 14px; font-weight: 500; }

.c360-tabs{
  display: flex; gap: 2px;
  background: var(--rule-cream);
  padding: 1px;
  margin-bottom: 18px;
  border-radius: 3px;
  overflow-x: auto;
}
.c360-tab{
  padding: 10px 16px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream); opacity: .7;
  cursor: pointer;
  background: var(--navy-deep);
  border: 0;
  transition: all .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.c360-tab:hover{ color: var(--gold); opacity: 1; }
.c360-tab.active{
  color: var(--gold);
  background: var(--navy-mid);
  opacity: 1;
  border-bottom: 2px solid var(--gold);
}

.holdings{
  display: flex; flex-direction: column; gap: 1px;
  background: var(--rule-cream);
  border-radius: 3px;
  overflow: hidden;
}
.holding-row{
  display: grid;
  grid-template-columns: 50px 1.4fr 1fr 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: var(--navy-deep);
  transition: background .15s;
  cursor: pointer;
}
.holding-row:hover{ background: var(--navy-mid); }
.holding-icon{
  width: 36px; height: 36px;
  border-radius: 4px;
  background: rgba(212,168,67,.12);
  border: 1px solid var(--rule);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.holding-name{
  font-family: var(--ff-serif);
  font-size: 15px;
  color: var(--cream);
  font-weight: 500;
}
.holding-sub{
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  color: var(--cream); opacity: .6;
  text-transform: uppercase;
  margin-top: 2px;
}
.holding-amt{
  font-family: var(--ff-serif);
  font-size: 17px;
  color: var(--gold);
  font-weight: 400;
  letter-spacing: -.015em;
}
.holding-date{
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--cream); opacity: .7;
  letter-spacing: .04em;
}

/* Timeline */
.timeline{
  position: relative;
  padding-left: 26px;
}
.timeline::before{
  content: "";
  position: absolute; left: 9px; top: 4px; bottom: 4px;
  width: 1px;
  background: var(--rule);
}
.tl-event{
  position: relative;
  padding: 4px 0 18px;
}
.tl-event::before{
  content: "";
  position: absolute; left: -22px; top: 8px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--navy);
  border: 2px solid var(--gold);
}
.tl-event.tl-success::before{ border-color: var(--good); }
.tl-event.tl-warn::before{ border-color: var(--warn); }
.tl-time{
  font-family: var(--ff-mono);
  font-size: 9.5px; letter-spacing: .14em;
  color: var(--cream); opacity: .68;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.tl-desc{
  font-family: var(--ff-sans);
  font-size: 13px;
  color: var(--cream);
}
.tl-desc b{ color: var(--gold-soft); font-weight: 500; }

/* ============================================================
   WHATSAPP INBOX
============================================================ */
.wa-shell{
  display: grid;
  grid-template-columns: 320px 1fr 320px;
  gap: 0;
  background: var(--navy-deep);
  border: 1px solid var(--rule-cream);
  border-radius: 4px;
  height: calc(100vh - 220px);
  min-height: 600px;
  overflow: hidden;
}
.wa-list{
  border-right: 1px solid var(--rule-cream);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.wa-list-head{
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule-cream);
  display: flex; justify-content: space-between; align-items: center;
}
.wa-list-title{
  font-family: var(--ff-mono);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
}
.wa-search{
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule-cream);
}
.wa-search input{
  width: 100%;
  background: rgba(244,237,223,.05);
  border: 1px solid var(--rule-cream);
  border-radius: 3px;
  color: var(--cream);
  font-family: var(--ff-sans);
  font-size: 12px;
  padding: 8px 10px;
}
.wa-conversations{ flex: 1; overflow-y: auto; }
.wa-conv{
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule-cream);
  cursor: pointer;
  transition: background .15s;
}
.wa-conv:hover{ background: var(--navy-mid); }
.wa-conv.active{ background: rgba(212,168,67,.08); border-left: 2px solid var(--gold); padding-left: 14px; }
.wa-conv-av{
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-fill), var(--teal-deep));
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-serif);
  font-size: 13px; font-weight: 500;
}
.wa-conv-main{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wa-conv-name{
  font-family: var(--ff-serif);
  font-size: 13.5px;
  color: var(--cream);
  font-weight: 500;
}
.wa-conv-preview{
  font-family: var(--ff-sans);
  font-size: 11.5px;
  color: var(--cream); opacity: .65;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wa-conv-right{
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  flex-shrink: 0;
}
.wa-conv-time{
  font-family: var(--ff-mono);
  font-size: 9.5px;
  color: var(--cream); opacity: .68;
}
.wa-conv-unread{
  background: var(--good); color: var(--navy-deep);
  font-family: var(--ff-mono); font-size: 9px;
  padding: 2px 6px; border-radius: 8px;
  min-width: 18px; text-align: center;
  font-weight: 700;
}

/* Conversation thread */
.wa-thread{
  display: flex; flex-direction: column;
  background: var(--navy);
  position: relative;
}
.wa-thread::before{
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle 2px at 30% 40%, rgba(244,237,223,.03) 0, transparent 50%),
    radial-gradient(circle 2px at 70% 60%, rgba(212,168,67,.03) 0, transparent 50%);
  background-size: 80px 80px;
  pointer-events: none;
}
.wa-thread-head{
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule-cream);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--navy-deep);
  position: relative; z-index: 1;
}
.wa-thread-cust{
  display: flex; align-items: center; gap: 12px;
}
.wa-thread-name{
  font-family: var(--ff-serif);
  font-size: 16px;
  color: var(--cream);
  font-weight: 500;
}
.wa-thread-meta{
  font-family: var(--ff-mono);
  font-size: 10px; letter-spacing: .14em;
  color: var(--gold-soft); opacity: .8;
  text-transform: uppercase;
  margin-top: 2px;
}
.wa-thread-tools{
  display: flex; gap: 8px;
}
.wa-msgs{
  flex: 1;
  padding: 20px 24px;
  overflow-y: auto;
  display: flex; flex-direction: column;
  gap: 14px;
  position: relative; z-index: 1;
}
.wa-msg{
  max-width: 70%;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: var(--ff-sans);
  font-size: 13px;
  line-height: 1.45;
  position: relative;
}
.wa-msg .wa-time{
  font-family: var(--ff-mono);
  font-size: 9.5px;
  color: var(--cream); opacity: .68;
  margin-top: 4px;
}
.wa-msg-in{
  background: var(--navy-mid);
  border: 1px solid var(--rule-cream);
  align-self: flex-start;
  border-bottom-left-radius: 2px;
}
.wa-msg-out{
  background: linear-gradient(180deg, rgba(212,168,67,.18), rgba(212,168,67,.08));
  border: 1px solid var(--rule);
  align-self: flex-end;
  border-bottom-right-radius: 2px;
}
.wa-msg-pidgin{
  font-family: var(--ff-serif); font-style: italic;
  color: var(--gold-soft);
  font-size: 11.5px;
  padding-top: 6px; margin-top: 6px;
  border-top: 1px dashed var(--rule);
}
.wa-msg-pidgin::before{
  content: "→ "; color: var(--gold);
}
.wa-input{
  padding: 14px 18px;
  border-top: 1px solid var(--rule-cream);
  background: var(--navy-deep);
  display: flex; flex-direction: column; gap: 10px;
  position: relative; z-index: 1;
}
.wa-suggest{
  background: linear-gradient(180deg, rgba(27,138,138,.15), rgba(27,138,138,.04));
  border: 1px solid rgba(27,138,138,.4);
  border-radius: 3px;
  padding: 10px 14px;
  font-family: var(--ff-serif);
  font-size: 13px;
  color: var(--cream);
  line-height: 1.45;
  position: relative;
}
.wa-suggest::before{
  content: "AI · Suggested reply";
  position: absolute; top: -8px; left: 12px;
  background: var(--navy-deep);
  padding: 0 6px;
  font-family: var(--ff-mono);
  font-size: 8.5px; letter-spacing: .22em;
  color: var(--teal-light);
  text-transform: uppercase;
}
.wa-suggest-actions{
  display: flex; gap: 6px; margin-top: 10px;
}
.wa-input-row{
  display: flex; gap: 8px;
  background: var(--navy-mid);
  border: 1px solid var(--rule-cream);
  border-radius: 4px;
  padding: 8px 10px;
  align-items: center;
}
.wa-input-row input{
  flex: 1;
  background: transparent; border: 0; outline: 0;
  color: var(--cream);
  font-family: var(--ff-sans);
  font-size: 13px;
}
.wa-send{
  background: var(--gold);
  color: var(--navy-deep);
  border: 0;
  padding: 6px 10px;
  border-radius: 2px;
  font-family: var(--ff-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
}

/* AI sidebar of WhatsApp */
.wa-ai{
  border-left: 1px solid var(--rule-cream);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.wa-ai-section{
  padding: 18px;
  border-bottom: 1px solid var(--rule-cream);
}
.wa-ai-label{
  font-family: var(--ff-mono);
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.wa-ai-info{
  font-family: var(--ff-sans);
  font-size: 12px;
  color: var(--cream); opacity: .85;
  line-height: 1.5;
}
.wa-ai-info b{ color: var(--gold-soft); font-weight: 500; }
.wa-cost-meter{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule-cream);
  margin: 12px -18px -18px;
}
.wa-cost-cell{
  background: var(--navy-deep);
  padding: 12px 18px;
}
.wa-cost-label{
  font-family: var(--ff-mono);
  font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cream); opacity: .6;
}
.wa-cost-val{
  font-family: var(--ff-serif);
  font-size: 17px;
  color: var(--gold);
  letter-spacing: -.01em;
  margin-top: 4px;
}

/* ============================================================
   CONTACT CENTRE
============================================================ */
.cc-shell{
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 22px;
  align-items: start;
}
.cc-call{
  background: linear-gradient(180deg, var(--navy-mid), var(--navy));
  border: 1px solid var(--rule-cream);
  border-radius: 4px;
  padding: 24px;
}
.cc-call-head{
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule-cream);
  margin-bottom: 18px;
}
.cc-call-info{
  display: flex; align-items: center; gap: 16px;
}
.cc-call-pulse{
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bad);
  position: relative;
  animation: pulse-red 1.5s ease-in-out infinite;
}
@keyframes pulse-red{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(229,89,79,.6); }
  50%{ box-shadow: 0 0 0 8px rgba(229,89,79,0); }
}
.cc-caller{
  font-family: var(--ff-serif);
  font-size: 20px;
  color: var(--cream);
  font-weight: 500;
}
.cc-meta{
  font-family: var(--ff-mono);
  font-size: 10px; letter-spacing: .14em;
  color: var(--gold-soft);
  text-transform: uppercase;
  margin-top: 4px;
}
.cc-timer{
  font-family: var(--ff-mono);
  font-size: 22px;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: .04em;
}
.cc-meters{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}
.cc-meter{
  background: var(--navy-deep);
  padding: 12px 14px;
  border: 1px solid var(--rule-cream);
  border-radius: 3px;
}
.cc-meter-label{
  font-family: var(--ff-mono);
  font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cream); opacity: .65;
  margin-bottom: 6px;
}
.cc-meter-track{
  height: 28px;
  background: rgba(244,237,223,.04);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.cc-speech{
  position: absolute; inset: 0;
  display: flex; align-items: center; gap: 2px; padding: 0 6px;
}
.cc-speech-bar{
  width: 3px;
  background: var(--teal-light);
  border-radius: 1px;
  animation: speak 0.5s ease-in-out infinite;
}
@keyframes speak{
  0%, 100%{ height: 20%; }
  50%{ height: 80%; }
}
.cc-sentiment-bar{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  height: 3px; width: 80%;
  background: linear-gradient(90deg,
    var(--bad) 0%,
    var(--warn) 33%,
    rgba(244,237,223,.3) 50%,
    var(--good) 67%,
    var(--good) 100%);
  border-radius: 2px;
}
.cc-sent-marker{
  position: absolute; top: -3px;
  width: 8px; height: 8px;
  background: var(--gold);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 0 3px rgba(212,168,67,.3);
  transition: left 1s ease;
}
.cc-transcript{
  background: var(--navy-deep);
  border: 1px solid var(--rule-cream);
  border-radius: 3px;
  padding: 14px;
  max-height: 340px;
  overflow-y: auto;
  font-family: var(--ff-sans);
  font-size: 13px;
  line-height: 1.6;
}
.cc-trans-row{
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 14px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--rule);
}
.cc-trans-row:last-child{ border: 0; }
.cc-speaker{
  font-family: var(--ff-mono);
  font-size: 10px; letter-spacing: .14em;
  color: var(--gold-soft);
  text-transform: uppercase;
  padding-top: 3px;
}
.cc-speaker.cust{ color: var(--teal-light); }
.cc-line{ color: var(--cream); }
.cc-line-trans{
  font-style: italic;
  color: var(--cream); opacity: .68;
  font-size: 11.5px;
  margin-top: 2px;
}
.cc-controls{
  display: flex; gap: 8px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-cream);
}

/* CC sidebar */
.cc-side{
  display: flex; flex-direction: column; gap: 16px;
}
.cc-customer{
  background: var(--navy-deep);
  border: 1px solid var(--rule-cream);
  border-radius: 4px;
  padding: 18px;
}
.cc-side-label{
  font-family: var(--ff-mono);
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.cc-customer-name{
  font-family: var(--ff-serif);
  font-size: 18px;
  color: var(--cream);
  font-weight: 500;
  margin-bottom: 4px;
}
.cc-customer-meta{
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--gold-soft); opacity: .8;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.cc-tags{ display: flex; gap: 6px; flex-wrap: wrap; }
.cc-tag{
  font-family: var(--ff-mono);
  font-size: 9px;
  padding: 3px 8px;
  background: rgba(212,168,67,.1);
  border: 1px solid var(--rule);
  color: var(--gold);
  border-radius: 2px;
  letter-spacing: .04em;
}
.cc-incident{
  background: var(--navy-deep);
  border: 1px solid var(--rule-cream);
  border-radius: 4px;
  padding: 18px;
}
.cc-incident-row{
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--rule);
  font-size: 12.5px;
}
.cc-incident-row:last-child{ border: 0; }
.cc-incident-row::before{
  content: "•";
  color: var(--gold);
  font-size: 16px;
  line-height: 1;
}
.cc-action{
  background: linear-gradient(180deg, rgba(27,138,138,.12), rgba(27,138,138,.02));
  border: 1px solid rgba(27,138,138,.4);
  border-radius: 4px;
  padding: 18px;
}
.cc-action-list{
  list-style: none;
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 8px;
}
.cc-action-list li{
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12.5px;
  color: var(--cream);
  line-height: 1.5;
}
.cc-action-list li::before{
  content: counter(item);
  counter-increment: item;
  flex-shrink: 0;
  width: 20px; height: 20px;
  background: var(--teal-light);
  color: var(--navy-deep);
  font-family: var(--ff-mono);
  font-size: 10px; font-weight: 700;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.cc-action-list{ counter-reset: item; }
.cc-nudge{
  background: linear-gradient(180deg, rgba(229,161,74,.12), rgba(229,161,74,.02));
  border: 1px solid rgba(229,161,74,.4);
  border-radius: 4px;
  padding: 16px;
  font-size: 12.5px;
  color: var(--cream);
}
.cc-nudge::before{
  content: "⚠ COMPLIANCE NUDGE";
  display: block;
  font-family: var(--ff-mono);
  font-size: 9px; letter-spacing: .22em;
  color: var(--warn);
  margin-bottom: 8px;
}

/* ============================================================
   USSD TWIN
============================================================ */
.ussd-shell{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
.ussd-phones{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.ussd-phone{
  background: #0E0E12;
  border: 2px solid #1E1E26;
  border-radius: 22px;
  padding: 12px;
  box-shadow: var(--shadow-1);
  position: relative;
  max-width: 280px;
  margin: 0 auto;
}
.ussd-phone::before{
  content: "";
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 50px; height: 6px;
  background: #0A0A0E;
  border-radius: 4px;
}
.ussd-screen{
  background: #2B3E2D;
  font-family: 'Courier New', var(--ff-mono);
  border-radius: 14px;
  padding: 36px 18px 22px;
  color: #C8E6C8;
  font-size: 12px;
  line-height: 1.5;
  min-height: 380px;
  display: flex; flex-direction: column;
  position: relative;
}
.ussd-screen::before{
  content: "";
  position: absolute; top: 14px; left: 14px;
  width: 6px; height: 6px;
  background: #5BC178;
  border-radius: 50%;
  box-shadow: 0 0 4px #5BC178;
}
.ussd-title{
  text-align: center;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(200,230,200,.3);
  font-weight: 700;
  letter-spacing: .04em;
}
.ussd-menu{
  flex: 1;
  font-size: 11.5px;
  line-height: 1.85;
}
.ussd-menu-row{
  display: flex; gap: 8px;
}
.ussd-menu-row .num{ color: #88E088; font-weight: 700; min-width: 12px; }
.ussd-prompt{
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed rgba(200,230,200,.3);
}
.ussd-input{
  display: flex; align-items: center; gap: 6px;
  background: rgba(200,230,200,.1);
  border-radius: 3px;
  padding: 6px 10px;
  font-size: 12px;
  margin-top: 6px;
}
.ussd-cursor{
  width: 7px; height: 12px;
  background: #C8E6C8;
  animation: cursor 1s steps(2) infinite;
}
@keyframes cursor{
  50%{ opacity: 0; }
}
.ussd-keypad{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 18px;
}
.ussd-key{
  background: #1A1A22;
  color: #C8C8D2;
  font-family: var(--ff-mono);
  font-size: 14px;
  padding: 8px 0;
  border-radius: 4px;
  border: 1px solid #2A2A36;
  text-align: center;
  cursor: pointer;
  transition: all .15s;
}
.ussd-key:hover{ background: #2A2A36; color: var(--gold); }
.ussd-key sub{
  display: block;
  font-size: 8px;
  color: #888;
  margin-top: -2px;
}

.ussd-foot{
  text-align: center;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(200,230,200,.3);
  font-size: 9.5px;
  opacity: .7;
  letter-spacing: .04em;
}

.ussd-info{
  background: linear-gradient(180deg, var(--navy-mid), var(--navy));
  border: 1px solid var(--rule-cream);
  border-radius: 4px;
  padding: 24px;
}

/* ============================================================
   FIELD FORCE
============================================================ */
.field-shell{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  align-items: start;
}
.field-phone{
  background: #050A14;
  border: 1.5px solid rgba(244,237,223,.18);
  border-radius: 36px;
  padding: 8px;
  box-shadow: var(--shadow-1), 0 0 0 6px rgba(244,237,223,.03);
  position: relative;
  max-width: 320px;
  margin: 0 auto;
}
.field-phone::before{
  content: "";
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 22px;
  background: #050A14;
  border-radius: 20px;
  z-index: 2;
}
.field-screen{
  background: linear-gradient(180deg, var(--navy-deep), var(--navy));
  border-radius: 30px;
  padding: 50px 16px 24px;
  min-height: 580px;
  position: relative;
}
.field-app-head{
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--rule);
}
.field-app-name{
  font-family: var(--ff-serif);
  font-size: 14px;
  color: var(--cream);
  font-weight: 500;
}
.field-app-name em{ color: var(--gold); font-style: italic; }
.field-rep{
  font-family: var(--ff-mono);
  font-size: 9px; letter-spacing: .12em;
  color: var(--gold-soft);
  text-transform: uppercase;
}
.field-card{
  background: rgba(244,237,223,.05);
  border: 1px solid var(--rule-cream);
  border-radius: 6px;
  padding: 14px;
  margin-bottom: 12px;
}
.field-card-label{
  font-family: var(--ff-mono);
  font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.field-progress{
  height: 6px;
  background: rgba(244,237,223,.08);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  margin-top: 8px;
}
.field-progress-fill{
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
}
.field-outlet{
  font-family: var(--ff-serif);
  font-size: 14px;
  color: var(--cream);
  font-weight: 500;
  margin-bottom: 4px;
}
.field-outlet-meta{
  font-family: var(--ff-mono);
  font-size: 9px; letter-spacing: .04em;
  color: var(--cream); opacity: .65;
  margin-bottom: 10px;
}
.field-checkin{
  background: var(--gold);
  color: var(--navy-deep);
  font-family: var(--ff-mono);
  font-size: 10px; font-weight: 700;
  text-align: center;
  padding: 10px;
  border-radius: 4px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.field-actions-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.field-action-btn{
  background: rgba(244,237,223,.06);
  border: 1px solid var(--rule-cream);
  color: var(--cream);
  font-family: var(--ff-mono);
  font-size: 10px;
  padding: 10px;
  text-align: center;
  border-radius: 3px;
  letter-spacing: .04em;
}
.field-nudge{
  background: linear-gradient(180deg, rgba(27,138,138,.18), rgba(27,138,138,.04));
  border: 1px solid rgba(27,138,138,.5);
  padding: 12px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--cream);
}
.field-nudge::before{
  content: "✦ AI NUDGE";
  display: block;
  font-family: var(--ff-mono);
  font-size: 8.5px; letter-spacing: .18em;
  color: var(--teal-light);
  margin-bottom: 6px;
}

.field-tabbar{
  position: absolute; bottom: 14px; left: 16px; right: 16px;
  background: var(--navy-deep);
  border: 1px solid var(--rule-cream);
  border-radius: 14px;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  font-family: var(--ff-mono);
  font-size: 9px;
  text-align: center;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.field-tabbar > span{
  color: var(--cream); opacity: .6;
  padding: 4px 0;
}
.field-tabbar > span.active{
  color: var(--gold);
  opacity: 1;
}

.field-map-panel{
  background: linear-gradient(180deg, var(--navy-mid), var(--navy));
  border: 1px solid var(--rule-cream);
  border-radius: 4px;
  padding: 22px;
}

/* ============================================================
   GENERIC GRID UTILITIES
============================================================ */
.grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.grid-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-4{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.grid-5{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }

/* ============================================================
   SECTORS GRID
============================================================ */
.sector-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1300px){ .sector-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1000px){ .sector-grid{ grid-template-columns: repeat(2, 1fr); } }
.sector{
  background: linear-gradient(180deg, rgba(244,237,223,.04), rgba(244,237,223,.01));
  border: 1px solid var(--rule-cream);
  border-radius: 4px;
  padding: 20px;
  position: relative;
  transition: all .2s;
  cursor: pointer;
  overflow: hidden;
  min-height: 200px;
  display: flex; flex-direction: column;
}
.sector:hover{
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(212,168,67,.08), rgba(244,237,223,.01));
  transform: translateY(-2px);
}
.sector::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
}
.sector-head{
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 14px;
}
.sector-idx{
  font-family: var(--ff-mono);
  font-size: 9px; letter-spacing: .14em;
  color: var(--gold-soft);
  text-transform: uppercase;
}
.sector-ic{
  width: 36px; height: 36px;
  border-radius: 4px;
  background: rgba(212,168,67,.1);
  border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  font-size: 16px;
}
.sector-name{
  font-family: var(--ff-serif);
  font-size: 18px;
  color: var(--cream);
  font-weight: 400;
  letter-spacing: -.01em;
  margin-bottom: 6px;
}
.sector-name em{ font-style: italic; color: var(--gold); }
.sector-desc{
  font-family: var(--ff-sans);
  font-size: 12px;
  color: var(--cream); opacity: .72;
  line-height: 1.5;
  margin-bottom: 14px;
}
.sector-foot{
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--rule);
  display: flex; justify-content: space-between; align-items: baseline;
}
.sector-kpi{
  font-family: var(--ff-serif);
  font-size: 22px;
  color: var(--gold);
  font-weight: 500;
  letter-spacing: -.02em;
}
.sector-kpi small{
  font-family: var(--ff-mono);
  font-size: 9px;
  color: var(--cream); opacity: .6;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-left: 4px;
}
.sector-tag{
  font-family: var(--ff-mono);
  font-size: 9px;
  padding: 2px 6px;
  border: 1px solid var(--rule-cream);
  border-radius: 2px;
  color: var(--gold-soft);
  letter-spacing: .04em;
}

/* ============================================================
   COMPLIANCE / GAID
============================================================ */
.gaid-grid{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 1400px){ .gaid-grid{ grid-template-columns: 1fr; } }

.dsr-inbox{
  display: flex; flex-direction: column;
}
.dsr-row{
  display: grid;
  grid-template-columns: 80px 100px 1fr 80px auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule-cream);
  transition: background .15s;
  cursor: pointer;
}
.dsr-row:hover{ background: var(--navy-mid); }
.dsr-row:last-child{ border: 0; }
.dsr-id{
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--gold);
  letter-spacing: .04em;
  font-weight: 500;
}
.dsr-type{
  font-family: var(--ff-mono);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 2px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
}
.dsr-type-access{ background: rgba(91,193,120,.12); color: var(--good); border: 1px solid rgba(91,193,120,.4); }
.dsr-type-erasure{ background: rgba(229,89,79,.12); color: var(--bad-ink); border: 1px solid rgba(229,89,79,.4); }
.dsr-type-portability{ background: rgba(111,166,224,.12); color: var(--info-ink); border: 1px solid rgba(111,166,224,.4); }
.dsr-type-restriction{ background: rgba(229,161,74,.12); color: var(--warn); border: 1px solid rgba(229,161,74,.4); }
.dsr-type-rectify{ background: rgba(43,177,177,.12); color: var(--teal-ink); border: 1px solid rgba(43,177,177,.4); }   /* --teal-light was 4.22 */
.dsr-type-object{ background: rgba(244,237,223,.08); color: var(--cream); border: 1px solid var(--rule-cream); }
.dsr-subject{
  font-family: var(--ff-serif);
  font-size: 14px;
  color: var(--cream);
  font-weight: 500;
}
.dsr-subject-meta{
  font-family: var(--ff-mono);
  font-size: 9.5px; color: var(--cream); opacity: .68;
  letter-spacing: .04em;
  margin-top: 2px;
}
.dsr-timer{
  display: flex; flex-direction: column; gap: 4px;
  align-items: flex-end;
}
.dsr-timer-bar{
  width: 60px; height: 4px;
  background: rgba(244,237,223,.08);
  border-radius: 2px;
  position: relative;
}
.dsr-timer-fill{
  position: absolute; left: 0; top: 0; height: 100%;
  background: var(--good);
  border-radius: 2px;
}
.dsr-timer-fill.warn{ background: var(--warn); }
.dsr-timer-fill.bad{ background: var(--bad); }
.dsr-timer-label{
  font-family: var(--ff-mono);
  font-size: 9.5px;
  color: var(--cream); opacity: .7;
}

.ropa-table{
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ff-sans);
  font-size: 12.5px;
}
.ropa-table thead{
  background: var(--navy-mid);
}
.ropa-table th{
  font-family: var(--ff-mono);
  font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--rule);
}
.ropa-table td{
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule-cream);
  color: var(--cream);
}
.ropa-table tr:last-child td{ border: 0; }
.ropa-table tr:hover td{ background: var(--navy-mid); }
.ropa-basis{
  font-family: var(--ff-mono);
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 2px;
  letter-spacing: .04em;
  display: inline-block;
}
.ropa-basis-contract{ background: rgba(91,193,120,.12); color: var(--good); }
.ropa-basis-consent{ background: rgba(212,168,67,.12); color: var(--gold); }
.ropa-basis-legal{ background: rgba(111,166,224,.12); color: var(--info-ink); }

.car-meter{
  background: linear-gradient(180deg, rgba(212,168,67,.1), rgba(212,168,67,.02));
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 20px;
  margin-top: 16px;
}
.car-progress{
  height: 8px;
  background: rgba(244,237,223,.08);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  margin: 10px 0;
}
.car-progress-fill{
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
}

/* ============================================================
   CONNECT (Connectors)
============================================================ */
.connect-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
@media(max-width: 1300px){ .connect-grid{ grid-template-columns: repeat(4, 1fr); } }
@media(max-width: 1000px){ .connect-grid{ grid-template-columns: repeat(3, 1fr); } }
@media(max-width: 700px){ .connect-grid{ grid-template-columns: repeat(2, 1fr); } }

.connector{
  background: var(--navy-deep);
  border: 1px solid var(--rule-cream);
  border-radius: 4px;
  padding: 16px;
  transition: all .2s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-height: 130px;
  display: flex; flex-direction: column;
}
.connector:hover{
  border-color: var(--gold);
  background: var(--navy-mid);
  transform: translateY(-2px);
}
.connector-head{
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.connector-logo{
  width: 32px; height: 32px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--gold), var(--gold-bright));
  color: var(--navy-deep);
  font-family: var(--ff-serif);
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.connector-status{
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--good);
}
.connector-status.warn{ color: var(--warn); }
.connector-status.bad{ color: var(--bad-ink); }
.connector-name{
  font-family: var(--ff-serif);
  font-size: 14px;
  color: var(--cream);
  font-weight: 500;
  margin-bottom: 2px;
  letter-spacing: -.005em;
}
.connector-cat{
  font-family: var(--ff-mono);
  font-size: 9px; letter-spacing: .12em;
  color: var(--gold-soft);
  text-transform: uppercase;
}
.connector-foot{
  margin-top: auto;
  padding-top: 10px;
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px dashed var(--rule);
  font-family: var(--ff-mono);
  font-size: 9.5px;
  color: var(--cream); opacity: .85;   /* .65 measured 3.96 on --navy-deep */
}

.cat-filter{
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--rule);
}
.cat-pill{
  background: transparent;
  border: 1px solid var(--rule-cream);
  color: var(--cream);
  font-family: var(--ff-mono);
  font-size: 10px;
  padding: 6px 12px;
  letter-spacing: .08em;
  cursor: pointer;
  border-radius: 2px;
  transition: all .15s;
  text-transform: uppercase;
}
.cat-pill:hover{ border-color: var(--gold); color: var(--gold); }
.cat-pill.active{
  background: var(--gold); border-color: var(--gold);
  color: var(--navy-deep);
  font-weight: 700;
}

/* ============================================================
   PRICING
============================================================ */
.tier{
  background: var(--navy-deep);
  display: grid;
  grid-template-columns: 220px 1fr 200px 200px;
  align-items: center;
  padding: 22px 28px;
  gap: 24px;
  border-bottom: 1px solid var(--rule-cream);
  transition: background .15s;
  cursor: pointer;
}
.tier:hover{ background: var(--navy-mid); }
.tier:last-child{ border: 0; }
.tier-lvl{
  font-family: var(--ff-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--cream);
  letter-spacing: -.015em;
  display: flex; flex-direction: column; gap: 4px;
}
.tier-lvl small{
  font-family: var(--ff-mono);
  font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.tier-desc{
  color: var(--cream); opacity: .78;
  font-size: 13px;
  line-height: 1.5;
}
.tier-price{
  font-family: var(--ff-serif);
  font-weight: 300;
  font-size: 28px;
  color: var(--gold);
  letter-spacing: -.02em;
  line-height: 1;
}
.tier-price small{
  display: block;
  font-size: 11px;
  color: var(--cream); opacity: .68;
  font-weight: 400;
  font-family: var(--ff-sans);
  letter-spacing: .04em;
  margin-top: 4px;
}
.tier-ceiling{
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--cream); opacity: .65;
  letter-spacing: .04em;
}
.tier.featured{
  background: linear-gradient(180deg, rgba(212,168,67,.10), rgba(212,168,67,.02));
  position: relative;
}
.tier.featured::before{
  content: "⟢ ANCHOR LOGO PROGRAMME";
  position: absolute; top: -1px; right: 20px;
  font-family: var(--ff-mono); font-size: 9px;
  letter-spacing: .2em;
  background: var(--gold); color: var(--navy-deep);
  padding: 3px 9px;
  border-radius: 0 0 3px 3px;
  font-weight: 700;
}

/* KorevraDeploy stages */
.deploy{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 22px;
}
.deploy-stage{
  background: var(--navy-deep);
  border: 1px solid var(--rule-cream);
  border-radius: 4px;
  padding: 20px;
  position: relative;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
}
.deploy-stage:hover{
  border-color: var(--gold);
  background: var(--navy-mid);
  transform: translateY(-2px);
}
.deploy-stage::after{
  content: "→";
  position: absolute; top: 50%; right: -16px;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 18px;
  z-index: 2;
  background: var(--navy);
  padding: 0 4px;
}
.deploy-stage:last-child::after{ display: none; }
.deploy-idx{
  font-family: var(--ff-mono);
  font-size: 20px;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.deploy-name{
  font-family: var(--ff-serif);
  font-size: 16px;
  color: var(--cream);
  font-weight: 500;
  margin-bottom: 4px;
}
.deploy-time{
  font-family: var(--ff-mono);
  font-size: 9px;
  color: var(--gold-soft);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.deploy-desc{
  font-family: var(--ff-sans);
  font-size: 11.5px;
  color: var(--cream); opacity: .8;
  line-height: 1.5;
}

/* ============================================================
   ANALYTICS / EXECUTIVE
============================================================ */
.exec-kpis{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--rule-cream);
  border: 1px solid var(--rule-cream);
  border-radius: 4px;
  margin-bottom: 22px;
  overflow: hidden;
}
.exec-kpi{
  background: var(--navy-deep);
  padding: 20px;
  position: relative;
}
.exec-kpi::before{
  content: ""; position: absolute; top: 0; left: 0;
  height: 3px; width: 50px;
  background: var(--gold);
}
.exec-kpi-name{
  font-family: var(--ff-mono);
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cream); opacity: .65;
  margin-bottom: 8px;
}
.exec-kpi-val{
  font-family: var(--ff-serif);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--gold);
  line-height: 1;
}
.exec-kpi-val small{
  font-size: .45em;
  color: var(--gold-soft);
  margin-left: 4px;
}
.exec-kpi-delta{
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .04em;
  margin-top: 8px;
}
.exec-kpi-delta.up{ color: var(--good); }
.exec-kpi-delta.down{ color: var(--bad-ink); }

.heatmap{
  display: flex; flex-direction: column;
}
.heatmap-row{
  display: grid;
  grid-template-columns: 160px 1fr 100px;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule-cream);
}
.heatmap-row:last-child{ border: 0; }
.heatmap-region{
  font-family: var(--ff-serif);
  font-size: 14px;
  color: var(--cream);
  font-weight: 500;
}
.heatmap-bar{
  height: 10px;
  background: rgba(244,237,223,.06);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.heatmap-fill{
  position: absolute; left: 0; top: 0; height: 100%;
  background: linear-gradient(90deg, var(--gold) 0%, var(--bad) 100%);
  border-radius: 2px;
}
.heatmap-amt{
  font-family: var(--ff-serif);
  font-size: 17px;
  color: var(--gold);
  font-weight: 400;
  letter-spacing: -.015em;
  text-align: right;
}

/* AI insights list */
.exec-insights{
  display: flex; flex-direction: column; gap: 12px;
}
.exec-insight{
  background: var(--navy-deep);
  border-left: 3px solid var(--gold);
  padding: 14px 18px;
  font-family: var(--ff-serif);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--cream);
}
.exec-insight b{ color: var(--gold-bright); font-weight: 500; }
.exec-insight em{ color: var(--gold); font-style: italic; }
.exec-insight .insight-num{
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--gold);
  font-weight: 700;
  margin-right: 8px;
}

/* ============================================================
   AI RAIL (right side)
============================================================ */
.ai-rail{
  position: fixed;
  top: var(--topbar-h);
  right: 0;
  bottom: 0;
  width: var(--ai-rail-w);
  background: linear-gradient(180deg, var(--navy-mid), var(--navy-deep));
  border-left: 1px solid var(--rule-cream);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
  z-index: 28;
  box-shadow: -20px 0 60px -20px rgba(0,0,0,.7);
}
.ai-rail.open{ transform: translateX(0); }
.ai-head{
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--rule-cream);
  display: flex; justify-content: space-between; align-items: center;
}
.ai-title{
  font-family: var(--ff-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--cream);
  display: flex; align-items: center; gap: 10px;
}
.ai-icon{
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-fill), var(--teal-deep));
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(244,237,223,.15);
}
.ai-close{
  background: transparent; border: 0;
  color: var(--cream); opacity: .6;
  cursor: pointer;
  font-size: 18px;
  padding: 4px 8px;
}
.ai-close:hover{ opacity: 1; color: var(--gold); }
.ai-sub{
  padding: 0 22px 14px;
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--cream); opacity: .7;
  border-bottom: 1px solid var(--rule-cream);
}
.ai-body{
  flex: 1;
  padding: 20px 22px;
  overflow-y: auto;
  display: flex; flex-direction: column;
  gap: 16px;
}
.ai-msg{
  padding: 14px 16px;
  border-radius: 4px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--cream);
}
.ai-msg p{ margin-bottom: 8px; }
.ai-msg p:last-child{ margin: 0; }
.ai-msg ul{
  margin: 8px 0 0;
  padding-left: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.ai-msg li{ font-size: 12.5px; line-height: 1.55; }
.ai-msg b{ color: var(--gold-soft); font-weight: 500; }
.ai-msg-brain{
  background: linear-gradient(180deg, rgba(27,138,138,.12), rgba(27,138,138,.02));
  border: 1px solid rgba(27,138,138,.4);
}
.ai-msg-user{
  background: rgba(244,237,223,.05);
  border: 1px solid var(--rule-cream);
}
.ai-msg-head{
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.ai-msg-from{
  font-family: var(--ff-mono);
  font-size: 9.5px; letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--teal-light);
}
.ai-msg-user .ai-msg-from{ color: var(--gold-soft); }
.ai-msg-time{
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--cream); opacity: .68;
}
.lang-line{
  padding: 8px 10px;
  background: rgba(8,27,51,.4);
  border-radius: 3px;
  margin-top: 6px !important;
  font-family: var(--ff-serif);
}
.lang-tag{
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 8.5px;
  background: var(--gold);
  color: var(--navy-deep);
  padding: 1px 6px;
  border-radius: 2px;
  letter-spacing: .12em;
  font-weight: 700;
  margin-right: 8px;
  vertical-align: middle;
}
.ai-cite{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--rule);
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: .04em;
  color: var(--cream); opacity: .66;
  font-style: italic;
}
.ai-actions{ display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.ai-btn{
  background: transparent;
  border: 1px solid var(--rule-cream);
  color: var(--cream);
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  padding: 5px 10px;
  border-radius: 2px;
  cursor: pointer;
  text-transform: uppercase;
}
.ai-btn:hover{ border-color: var(--gold); color: var(--gold); }
.ai-btn-primary{
  background: var(--gold); color: var(--navy-deep);
  border-color: var(--gold); font-weight: 700;
}
.ai-btn-primary:hover{ background: var(--gold-bright); color: var(--navy-deep); }

.ai-prompt{
  border-top: 1px solid var(--rule-cream);
  padding: 14px 22px 18px;
  background: var(--navy-deep);
}
.ai-prompt-suggestions{
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.ai-suggest{
  background: rgba(244,237,223,.05);
  border: 1px solid var(--rule-cream);
  color: var(--cream);
  font-family: var(--ff-sans);
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 2px;
  cursor: pointer;
}
.ai-suggest:hover{ border-color: var(--gold); color: var(--gold); }
.ai-input-row{
  display: flex; gap: 6px;
  background: rgba(244,237,223,.04);
  border: 1px solid var(--rule-cream);
  border-radius: 4px;
  padding: 6px 8px;
  align-items: center;
}
.ai-input-row input{
  flex: 1;
  background: transparent; border: 0; outline: 0;
  color: var(--cream);
  font-family: var(--ff-sans); font-size: 12px;
}
.ai-input-row input::placeholder{ color: rgba(244,237,223,.45); }
.ai-send{
  background: var(--gold); color: var(--navy-deep);
  border: 0; padding: 5px 10px;
  font-family: var(--ff-mono); font-size: 14px;
  border-radius: 2px;
  font-weight: 700;
  cursor: pointer;
}
.ai-foot{
  display: flex; justify-content: space-between;
  margin-top: 10px;
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .04em;
  color: var(--cream); opacity: .66;
}
.ai-foot b{ color: var(--gold-soft); font-weight: 500; }

/* ============================================================
   COMMAND PALETTE
============================================================ */
.cmd-palette{
  position: fixed; inset: 0;
  background: rgba(8,27,51,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none; align-items: flex-start; justify-content: center;
  z-index: 100;
  padding-top: 110px;
}
.cmd-palette.open{ display: flex; }
.cmd-shell{
  width: 600px;
  background: var(--navy-mid);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.cmd-row{
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule-cream);
}
.cmd-mark{
  font-family: var(--ff-mono);
  font-size: 11px;
  background: var(--gold);
  color: var(--navy-deep);
  padding: 3px 8px;
  border-radius: 2px;
  font-weight: 700;
  letter-spacing: .04em;
}
.cmd-row input{
  flex: 1;
  background: transparent; border: 0; outline: 0;
  color: var(--cream);
  font-family: var(--ff-sans);
  font-size: 16px;
}
.cmd-row input::placeholder{ color: rgba(244,237,223,.4); }
.cmd-esc{
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--cream); opacity: .68;
  border: 1px solid var(--rule-cream);
  padding: 2px 6px;
  border-radius: 2px;
}
.cmd-body{ max-height: 400px; overflow-y: auto; padding: 14px 18px; }
.cmd-group{ margin-bottom: 18px; }
.cmd-group:last-child{ margin: 0; }
.cmd-group-label{
  font-family: var(--ff-mono);
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--rule);
}
.cmd-item{
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px;
  font-size: 13px;
  color: var(--cream);
  cursor: pointer;
  border-radius: 3px;
}
.cmd-item:hover{ background: rgba(212,168,67,.1); color: var(--gold); }
.cmd-item span{ color: var(--gold); width: 16px; text-align: center; }
.cmd-item b{ color: var(--gold-soft); font-weight: 500; }

/* ============================================================
   MODAL HOST
============================================================ */
.modal-host{ position: fixed; inset: 0; pointer-events: none; z-index: 80; }
.modal-backdrop{
  position: absolute; inset: 0;
  background: rgba(8,27,51,.65);
  backdrop-filter: blur(8px);
  pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
}
.modal{
  background: var(--navy-mid);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: var(--shadow-pop);
  max-width: 900px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
}
.modal-head{
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--rule);
}
.modal-title{
  font-family: var(--ff-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--cream);
  letter-spacing: -.015em;
}
.modal-close{
  background: transparent; border: 0;
  color: var(--cream); opacity: .6;
  font-size: 22px; cursor: pointer;
}
.modal-body{ padding: 24px; }

/* ============================================================
   TOAST
============================================================ */
.toast-host{
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 90;
  display: flex; flex-direction: column;
  gap: 10px;
}
.toast{
  background: var(--navy-mid);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  padding: 14px 18px;
  border-radius: 3px;
  max-width: 360px;
  box-shadow: var(--shadow-pop);
  animation: toast-in .3s ease;
  font-family: var(--ff-sans);
  font-size: 13px;
  color: var(--cream);
}
.toast.toast-good{ border-left-color: var(--good); }
.toast.toast-warn{ border-left-color: var(--warn); }
.toast.toast-bad{ border-left-color: var(--bad-ink); }
.toast b{ color: var(--gold-soft); font-weight: 500; }
@keyframes toast-in{
  from{ transform: translateX(20px); opacity: 0; }
  to{ transform: translateX(0); opacity: 1; }
}

/* ============================================================
   MODULES GRID
============================================================ */
.modules-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
@media(max-width: 1400px){ .modules-grid{ grid-template-columns: repeat(3, 1fr); } }
@media(max-width: 1000px){ .modules-grid{ grid-template-columns: repeat(2, 1fr); } }

.module{
  background: var(--navy-deep);
  border: 1px solid var(--rule-cream);
  border-radius: 4px;
  padding: 22px 20px 20px;
  position: relative;
  cursor: pointer;
  transition: all .2s;
  min-height: 240px;
  display: flex; flex-direction: column;
}
.module:hover{
  border-color: var(--gold);
  background: var(--navy-mid);
  transform: translateY(-2px);
}
.module-num{
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 16px;
  display: flex; justify-content: space-between; align-items: center;
}
.module-num::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
  margin-left: 12px;
  opacity: .4;
}
.module-name{
  font-family: var(--ff-serif);
  font-size: 19px;
  font-weight: 400;
  color: var(--cream);
  letter-spacing: -.01em;
  margin-bottom: 6px;
  line-height: 1.15;
}
.module-yor{
  font-family: var(--ff-serif);
  font-style: italic;
  color: var(--gold-soft);
  font-size: 12.5px;
  margin-bottom: 12px;
}
.module-desc{
  font-family: var(--ff-sans);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--cream); opacity: .78;
  margin-top: auto;
}

/* ============================================================
   KOREVRA BRAIN view
============================================================ */
.brain-grid{
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 22px;
  align-items: start;
}
.brain-feature-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
.brain-feat{
  background: var(--navy-deep);
  border: 1px solid var(--rule-cream);
  border-radius: 4px;
  padding: 18px;
  cursor: pointer;
  transition: all .15s;
}
.brain-feat:hover{ border-color: var(--gold); background: var(--navy-mid); }
.brain-feat-name{
  font-family: var(--ff-serif);
  font-size: 15px;
  color: var(--cream);
  font-weight: 500;
  margin-bottom: 4px;
}
.brain-feat-tag{
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal-light);
  margin-bottom: 8px;
}
.brain-feat-desc{
  font-family: var(--ff-sans);
  font-size: 12px;
  color: var(--cream); opacity: .75;
  line-height: 1.5;
}
.brain-langs{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.brain-lang{
  background: linear-gradient(180deg, rgba(212,168,67,.08), rgba(212,168,67,.02));
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 14px 12px;
  text-align: center;
}
.brain-lang-name{
  font-family: var(--ff-serif);
  font-size: 15px;
  color: var(--cream);
  font-weight: 500;
  margin-bottom: 4px;
}
.brain-lang-yor{
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 11.5px;
  color: var(--gold-soft);
  margin-bottom: 8px;
}
.brain-lang-stat{
  font-family: var(--ff-mono);
  font-size: 17px;
  color: var(--gold);
  font-weight: 500;
  letter-spacing: -.01em;
}
.brain-lang-stat small{
  display: block;
  font-size: 9px;
  color: var(--cream); opacity: .6;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: 2px;
}

.coaching-card{
  background: var(--navy-deep);
  border: 1px solid var(--rule-cream);
  border-radius: 4px;
  padding: 20px;
  margin-top: 16px;
}
.coach-score{
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--rule);
}
.coach-score-num{
  font-family: var(--ff-serif);
  font-size: 42px;
  color: var(--gold);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
}
.coach-score-out{
  font-family: var(--ff-mono);
  font-size: 14px;
  color: var(--cream); opacity: .6;
}
.coach-score-avg{
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--good);
  letter-spacing: .04em;
  margin-left: auto;
}
.coach-section-label{
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 14px 0 8px;
}
.coach-points{ list-style: none; }
.coach-points li{
  font-family: var(--ff-sans);
  font-size: 12.5px;
  color: var(--cream); opacity: .85;
  padding: 4px 0;
  padding-left: 22px;
  position: relative;
}
.coach-points li::before{
  content: "+";
  position: absolute; left: 0;
  color: var(--good);
  font-weight: 700;
}
.coach-points.cons li::before{
  content: "−";
  color: var(--warn);
}
.coach-tip{
  background: linear-gradient(180deg, rgba(212,168,67,.1), rgba(212,168,67,.02));
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 14px;
  font-family: var(--ff-serif);
  font-size: 13.5px;
  color: var(--cream);
  font-style: italic;
  line-height: 1.5;
  margin-top: 8px;
}
.coach-tip::before{
  content: "Pidgin Coach tip:";
  display: block;
  font-family: var(--ff-mono); font-style: normal;
  font-size: 9px; letter-spacing: .18em;
  color: var(--gold); text-transform: uppercase;
  margin-bottom: 8px;
}

/* ============================================================
   FLOW (KorevraFlow workflow designer)
============================================================ */
.flow-canvas{
  background: var(--navy-deep);
  border: 1px solid var(--rule-cream);
  border-radius: 4px;
  min-height: 600px;
  padding: 30px;
  position: relative;
  overflow: auto;
  background-image:
    radial-gradient(circle 1.5px at 20px 20px, rgba(244,237,223,.06) 1px, transparent 1px);
  background-size: 40px 40px;
}
.flow-nodes{
  position: relative;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 30px;
  z-index: 1;
}
.flow-node{
  background: var(--navy-mid);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 14px 18px;
  min-width: 240px;
  text-align: center;
  cursor: pointer;
  transition: all .15s;
  position: relative;
  z-index: 2;
}
.flow-node:hover{ border-color: var(--gold); background: var(--navy-soft); }
.flow-node-type{
  font-family: var(--ff-mono);
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.flow-node-title{
  font-family: var(--ff-serif);
  font-size: 14px;
  color: var(--cream);
  font-weight: 500;
}
.flow-node-meta{
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--cream); opacity: .65;
  margin-top: 4px;
}
.flow-node.trigger{ border-color: rgba(91,193,120,.5); background: rgba(91,193,120,.06); }
.flow-node.trigger .flow-node-type{ color: var(--good); }
.flow-node.decision{
  background: linear-gradient(135deg, var(--navy-mid) 0%, var(--navy-mid) 50%, var(--navy-deep) 50%, var(--navy-deep) 100%);
  border-color: rgba(229,161,74,.5);
}
.flow-node.decision .flow-node-type{ color: var(--warn); }
.flow-node.action{ border-color: rgba(212,168,67,.5); }
.flow-node.notify{ border-color: rgba(43,177,177,.5); background: rgba(27,138,138,.06); }
.flow-node.notify .flow-node-type{ color: var(--teal-light); }
.flow-edge{
  width: 2px;
  height: 30px;
  background: var(--rule);
  position: relative;
}
.flow-edge::after{
  content: "▼";
  position: absolute;
  bottom: -8px; left: 50%; transform: translateX(-50%);
  color: var(--gold);
  font-size: 12px;
}
.flow-branch{
  display: flex; gap: 80px;
  position: relative;
  margin-top: 30px;
}
.flow-branch-line{
  position: absolute; top: -30px; left: 50%;
  width: 200px; height: 30px;
  transform: translateX(-50%);
  border-top: 2px solid var(--rule);
  border-left: 2px solid var(--rule);
  border-right: 2px solid var(--rule);
  border-bottom: 0;
}
.flow-label{
  position: absolute; top: -45px;
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold);
  background: var(--navy-deep);
  padding: 2px 6px;
  white-space: nowrap;
}
.flow-branch > div{ position: relative; }
.flow-branch > div:nth-child(1) .flow-label{ left: 50%; transform: translateX(-50%); }
.flow-branch > div:nth-child(2) .flow-label{ left: 50%; transform: translateX(-50%); }

.flow-props{
  background: var(--navy-deep);
  border: 1px solid var(--rule-cream);
  border-radius: 4px;
  padding: 18px;
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.flow-prop-label{
  font-family: var(--ff-mono);
  font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 4px;
}
.flow-prop-val{
  font-family: var(--ff-sans);
  font-size: 12.5px;
  color: var(--cream);
}

/* ============================================================
   KOREVRASIGHT (Shelf audit)
============================================================ */
.sight-shell{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  align-items: start;
}
.sight-mobile{
  background: #050A14;
  border: 1.5px solid rgba(244,237,223,.18);
  border-radius: 36px;
  padding: 8px;
  box-shadow: var(--shadow-1);
  max-width: 320px;
  margin: 0 auto;
}
.sight-screen{
  background: linear-gradient(180deg, var(--navy-deep), var(--navy));
  border-radius: 30px;
  padding: 50px 16px 24px;
  min-height: 580px;
  position: relative;
}
.shelf-image{
  background: linear-gradient(180deg, #1A2A3C, #0F1B2C);
  border: 1px solid var(--rule-cream);
  border-radius: 6px;
  height: 180px;
  position: relative;
  margin-bottom: 16px;
  overflow: hidden;
}
.shelf-row{
  position: absolute;
  left: 8px; right: 8px;
  height: 50px;
  display: flex; gap: 4px;
}
.shelf-row.r1{ top: 14px; }
.shelf-row.r2{ top: 70px; }
.shelf-row.r3{ top: 126px; }
.shelf-item{
  flex: 1;
  background: linear-gradient(180deg, #2A4060, #1A2C44);
  border-radius: 2px;
  position: relative;
  border: 1px solid rgba(244,237,223,.06);
}
.shelf-item.p{ background: linear-gradient(180deg, #C8533F, #8F3A2C); }
.shelf-item.c{ background: linear-gradient(180deg, #5B4C8C, #3F345E); }
.shelf-item.i{ background: linear-gradient(180deg, #C89B3F, #8F6E2C); }
.shelf-item.m{ background: linear-gradient(180deg, #6FA6E0, #4B7CA8); }
.shelf-item.n{ background: linear-gradient(180deg, #5BC178, #3F8C56); }
.shelf-item.empty{
  background: transparent;
  border: 1.5px dashed rgba(229,89,79,.7);
}
.shelf-item.empty::after{
  content: "OOS";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-mono);
  font-size: 9px;
  color: var(--bad-ink);
  letter-spacing: .08em;
}
.shelf-overlay{
  position: absolute; inset: 0;
  border: 2px dashed var(--gold);
  border-radius: 6px;
  animation: scan 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes scan{
  0%, 100%{ opacity: 1; }
  50%{ opacity: .4; }
}

.sight-score{
  background: linear-gradient(180deg, rgba(91,193,120,.15), rgba(91,193,120,.02));
  border: 1px solid rgba(91,193,120,.4);
  border-radius: 4px;
  padding: 14px;
  margin-bottom: 14px;
  text-align: center;
}
.sight-score-val{
  font-family: var(--ff-serif);
  font-size: 36px;
  color: var(--good);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1;
}
.sight-score-label{
  font-family: var(--ff-mono);
  font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cream); opacity: .7;
  margin-top: 4px;
}
.sight-progress{
  height: 6px;
  background: rgba(244,237,223,.08);
  border-radius: 3px;
  margin-top: 10px;
  overflow: hidden;
}
.sight-progress-fill{
  height: 100%;
  background: linear-gradient(90deg, var(--good), var(--teal-light));
  width: 84%;
}
.sight-list{
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 14px;
}
.sight-list-row{
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--cream);
  padding: 4px 0;
}
.sight-list-row .name{ }
.sight-list-row .count{ color: var(--gold-soft); }
.sight-list-row .stat{ font-weight: 500; }
.sight-list-row .stat.ok{ color: var(--good); }
.sight-list-row .stat.bad{ color: var(--bad-ink); }
.sight-list-row .stat.warn{ color: var(--warn); }

.sight-analysis{
  background: var(--navy-deep);
  border: 1px solid var(--rule-cream);
  border-radius: 4px;
  padding: 24px;
}
.analysis-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-top: 18px;
}
.analysis-cell{
  background: var(--navy-mid);
  border: 1px solid var(--rule-cream);
  border-radius: 3px;
  padding: 14px;
}
.analysis-cell-label{
  font-family: var(--ff-mono);
  font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 4px;
}
.analysis-cell-val{
  font-family: var(--ff-serif);
  font-size: 24px;
  color: var(--gold);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1;
}
.analysis-cell-detail{
  font-family: var(--ff-sans);
  font-size: 11px;
  color: var(--cream); opacity: .7;
  margin-top: 4px;
}

/* ============================================================
   FOOTER UTILITIES
============================================================ */
.empty-hint{
  padding: 60px;
  text-align: center;
  font-family: var(--ff-serif);
  color: var(--cream); opacity: .68;
  font-style: italic;
}

/* ============================================================
   RESPONSIVE — graceful degradation
============================================================ */
@media (max-width: 1100px){
  .app{ grid-template-columns: 64px 1fr; }
  .topbar{ grid-template-columns: 64px 1fr auto; }
  .brand{ width: 64px; padding: 0; justify-content: center; }
  .brand-text, .tenant-switch, .search, .user-text, .chip{ display: none; }
  .nav-text, .nav-badge, .nav-tag{ display: none; }
  .sidebar-foot{ display: none; }
  .nav-item{ justify-content: center; padding: 12px 8px; }
  .nav-section-label{ text-align: center; padding: 0 0 6px; }
  .ai-rail{ width: 100%; }
}