/* ═══════════════════════════════════════════════════════════════════
   MAISON V2 — The Storey Portal 2.0 · one cohesive style · v188
   ─────────────────────────────────────────────────────────────────
   THE LAW: "Paper rooms, espresso statements."
   · Every page is warm paper, structured by ink hairlines.
   · Eyebrow (gold small-caps) → serif heading (gold italic em) → muted lead.
   · At most one espresso set-piece per page; it is always radius-24,
     gold-eyebrowed, generously padded.
   · Buttons: ink pill = act · hairline ghost = secondary · gold = celebrate.
   · Numbers are typography: 200-weight serif, small-caps labels, no boxes.
   · Boards & tables are hairlined rows, never zebra boxes.
   Loaded after styles.css/styles-late.css — tokens below re-skin the
   833 var() references in the legacy sheet, then components are sworn in.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 0 · TOKENS — the single source of the style ─────────────────── */
:root{
  /* maison palette */
  --mz-hairline:#D9D1BE;
  --mz-hairline-soft:#E5DEC9;
  --mz-gold:#C9A961;
  --mz-gold-bright:#E8C886;
  --mz-gold-deep:#8A6642;
  --mz-espresso-1:#191813;
  --mz-espresso-2:#2A2418;
  --mz-ocean:#1F4E5F;     /* Durban */
  --mz-sage:#3E5A3F;      /* Southern Suburbs */
  --mz-cover:url("https://d21tw07c6rnmp0.cloudfront.net/media/uploads/148/pages/2023/9/148_4ff7bb49e893446c9e2854934797d485_t_w_1440_h_900.avif");
  --mz-r:18px;

  /* legacy token overrides — these cascade through the whole portal */
  --radius:10px;
  --radius-sm:8px;
  --radius-lg:24px;
  --shadow:0 1px 0 rgba(14,14,12,.04);
  --shadow-lift:0 14px 40px -18px rgba(14,14,12,.18);
  --card-rim:#EDE5D0;
  --line:#D9D1BE;
  --line-soft:#E5DEC9;
}

/* ── 1 · TYPE & RHYTHM ───────────────────────────────────────────── */
h1, h2, h3{ letter-spacing:.005em; }
h1 em, h2 em{ color:var(--mz-gold-deep); }
.eyebrow{ letter-spacing:.3em !important; color:var(--mz-gold-deep) !important; }
::selection{ background:rgba(201,169,97,.3); }

/* every view opens like a chapter — generous, serif, calm */
#main > div[id$="View"] > .section-title h1,
#main > div[id$="View"] > section:first-of-type h1{
  font-size:clamp(40px,4.6vw,64px); line-height:1.06; font-weight:200;
}
#main > div[id$="View"]{ animation:mzFade .35s ease; }
@keyframes mzFade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

/* ── 2 · TOPBAR — the quiet masthead bar ─────────────────────────── */
header.topbar{
  background:var(--bg) !important;
  border-bottom:1px solid var(--mz-hairline);
  box-shadow:none !important;
}
nav.main > a,
nav.main .nav-branch-trigger{
  font-size:10.5px !important; letter-spacing:.26em !important;
  text-transform:uppercase !important; font-weight:600 !important;
  background:transparent !important; border:none !important; border-radius:0 !important;
  color:var(--muted) !important; padding:10px 12px !important; position:relative;
}
nav.main > a:hover, nav.main .nav-branch-trigger:hover{ color:var(--ink) !important; background:transparent !important; }
nav.main > a.active, nav.main .nav-branch-trigger.active{ color:var(--ink) !important; background:transparent !important; box-shadow:none !important; }
nav.main > a.active::after, nav.main .nav-branch-trigger.active::after{
  content:''; position:absolute; left:12px; right:12px; bottom:2px; height:2px;
  background:var(--mz-gold); border-radius:2px;
}
nav.main .nav-branch-menu{
  background:var(--card) !important; border:1px solid var(--mz-hairline) !important;
  border-radius:14px !important; box-shadow:0 18px 50px rgba(20,15,5,.12) !important;
}
nav.main .nav-branch-menu a{ letter-spacing:.04em !important; }
body:not(.show-ct):not(.show-ss):not(.show-durban) #branchDropdown{ display:none !important; }
#switchBtn{
  background:transparent !important; border:none !important; box-shadow:none !important;
  color:var(--muted) !important; font-size:10px !important;
  letter-spacing:.22em !important; text-transform:uppercase !important;
}
#switchBtn:hover{ color:var(--ink) !important; }

/* ⌘K concierge */
.mz-k-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.14em; font-weight:600; text-transform:uppercase;
  color:var(--muted); background:var(--card);
  border:1px solid var(--mz-hairline); border-radius:999px;
  padding:7px 14px; cursor:pointer; white-space:nowrap;
  transition:color .15s ease, border-color .15s ease;
}
.mz-k-btn:hover{ color:var(--ink); border-color:var(--mz-gold); }
.mz-k-btn .mz-k-key{
  font-size:10px; font-weight:700; border:1px solid var(--mz-hairline);
  border-radius:6px; padding:1px 6px; color:var(--mz-gold-deep); background:rgba(201,169,97,.08);
}
@media (max-width:880px){ .mz-k-btn .mz-k-label{ display:none; } }

/* ── 3 · THE MASTHEAD HOME (validated live, v188) ────────────────── */
.cover-head{
  display:block !important; background:transparent !important;
  padding:30px 0 0 !important; border-radius:0 !important;
  min-height:0 !important; overflow:visible !important; box-shadow:none !important;
}
.cover-head::before, .cover-head::after{ display:none !important; }
.cover-head .ch-main{ max-width:none !important; text-align:center; padding:0 !important; }
.cover-head .ch-main .eyebrow{ display:block; text-align:center; font-size:10.5px !important; letter-spacing:.34em !important; }
.cover-head .ch-main h1{
  font-size:clamp(56px,7.5vw,98px) !important; line-height:1.04 !important;
  margin:16px 0 6px !important; color:var(--ink) !important; text-shadow:none !important;
}
.cover-head .ch-main h1 em{ color:var(--mz-gold-deep) !important; text-shadow:none !important; }
.cover-head .tagline{
  display:block !important; text-align:center; font-style:italic;
  color:var(--muted) !important; font-size:15px !important; margin:2px 0 0 !important; text-shadow:none !important;
}
.cover-head .ch-main::after{
  content:''; display:block; width:130px; height:2px; margin:24px auto 0;
  background:linear-gradient(90deg, var(--mz-gold-bright), var(--mz-gold));
}
#heroCongrats{ display:none !important; } /* the story band + feed tell it */

/* the story — the page's one espresso statement, cinematic */
.cover-head .ch-aside{ margin-top:34px; }
#mzHeroStory{
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center; text-align:center;
  min-height:320px; border-radius:var(--radius-lg) !important; overflow:hidden;
  color:#F2EDE2; padding:34px 38px !important; position:relative;
  background-image:linear-gradient(100deg, rgba(10,10,9,.84) 0%, rgba(10,10,9,.5) 52%, rgba(10,10,9,.16) 100%), var(--mz-cover);
  background-size:cover; background-position:center 70%;
}
#mzHeroStory.mz-empty{ display:none; }
#mzHeroStory .mzh-eyebrow{
  font-size:10.5px; letter-spacing:.34em; text-transform:uppercase; font-weight:700;
  color:var(--mz-gold) !important; margin-bottom:10px;
}
#mzHeroStory .mzh-prop{
  font-family:var(--font-display); font-weight:200;
  font-size:clamp(30px,3.6vw,48px); line-height:1.1; margin-bottom:12px;
  max-width:760px; margin-left:auto; margin-right:auto; text-shadow:0 2px 18px rgba(0,0,0,.35);
}
#mzHeroStory .mzh-row{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
#mzHeroStory .mzh-avatar{
  width:44px; height:44px; border-radius:50%; overflow:hidden; flex:none;
  background:#3a362c; display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; color:#EAE3D2; border:1px solid rgba(232,200,134,.4);
}
#mzHeroStory .mzh-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
#mzHeroStory .mzh-agent{ font-size:14px; letter-spacing:.04em; color:#EAE3D2; }
#mzHeroStory .mzh-badge{
  font-size:9.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid rgba(232,200,134,.55); color:var(--mz-gold-bright); border-radius:999px; padding:3px 10px;
}
#mzHeroStory .mzh-cta{
  margin-left:6px; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  color:var(--mz-gold-bright); background:transparent; border:none; cursor:pointer; padding:6px 0;
}
#mzHeroStory .mzh-cta:hover{ color:#fff; }

/* ── 4 · THE NUMBERS — agent row & management row ────────────────── */
.mz-nums{ display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:24px; margin:42px 0 0; }
@media (max-width:1000px){ .mz-nums{ grid-template-columns:1fr; } }
.mz-nums .card{
  background:transparent !important; border:none !important; box-shadow:none !important;
  border-top:1px solid var(--ink) !important; border-radius:0 !important; padding:18px 2px 8px !important;
}
.mz-nums .card.ytd .figure{ font-size:clamp(44px,4.6vw,60px) !important; }
.mz-nums h3{ font-weight:300 !important; }

#mzAdminNums{ display:grid; grid-template-columns:1fr 1fr 1fr 1.2fr; gap:24px; margin:46px 0 0; }
@media (max-width:1000px){ #mzAdminNums{ grid-template-columns:1fr 1fr; } }
@media (max-width:720px){ #mzAdminNums{ grid-template-columns:1fr; } }
#mzAdminNums .mzn{ border-top:1px solid var(--ink); padding:18px 2px 8px; }
#mzAdminNums .mzn .e{
  font-size:10px; letter-spacing:.28em; text-transform:uppercase; font-weight:700;
  color:var(--mz-gold-deep); display:block; margin-bottom:8px;
}
#mzAdminNums .mzn > b{
  font-family:var(--font-display); font-weight:200;
  font-size:clamp(40px,3.8vw,54px); line-height:1; color:var(--ink);
}
#mzAdminNums .mzn .s{ font-size:12px; color:var(--muted); margin-top:7px; }
#mzAdminNums .t-item{
  display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--mz-hairline-soft);
  font-size:13px; line-height:1.45; color:var(--ink-2, var(--ink));
}
#mzAdminNums .t-item:last-child{ border-bottom:none; }
#mzAdminNums .t-item b{ font-size:inherit; font-family:inherit; font-weight:600; color:var(--ink); }
#mzAdminNums .t-n{ font-family:var(--font-display); color:var(--mz-gold-deep); font-size:15px; flex:none; }
#mzAdminNums .t-act{
  display:inline-block; margin-top:2px; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--mz-gold-deep); cursor:pointer; border:none; background:none; padding:0;
}
#mzAdminNums .t-act:hover{ color:var(--ink); }

/* Today (agent card) */
#mzToday .mz-t-item{ display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--mz-hairline-soft); }
#mzToday .mz-t-item:last-child{ border-bottom:none; }
#mzToday .mz-t-n{ font-family:var(--font-display); font-size:17px; color:var(--mz-gold-deep); width:20px; flex:none; line-height:1.3; }
#mzToday .mz-t-body{ font-size:13.5px; line-height:1.5; color:var(--ink-2, var(--ink)); }
#mzToday .mz-t-body b{ font-weight:600; font-size:inherit; font-family:inherit; }
#mzToday .mz-t-act{
  display:inline-block; margin-top:3px; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--mz-gold-deep); cursor:pointer; border:none; background:none; padding:0;
}
#mzToday .mz-t-act:hover{ color:var(--ink); }

/* ── 5 · THE EDITORIAL BODY (validated live) ─────────────────────── */
/* breathing rhythm between the home page's movements */
#mzAdminNums, .mz-nums{ margin-bottom:6px; }
.feature-row{ display:block !important; margin-top:64px !important; }
.feature-row .feat-card{ margin-bottom:8px; }
.listings-strip{ margin-top:64px !important; }
.storey-feed{ margin-top:64px !important; }
#adminDashboardCards{ margin-top:64px !important; }

/* prospecting promo: paper band, ink CTA */
.feat-prospecting{
  background:transparent !important; border:none !important;
  border-top:1px solid var(--ink) !important; border-radius:0 !important;
  box-shadow:none !important; padding:24px 2px 14px !important; min-height:0 !important;
}
.feat-prospecting h2{ color:var(--ink) !important; }
.feat-prospecting h2 em{ color:var(--mz-gold-deep) !important; }
.feat-prospecting p{ color:var(--ink-2, var(--ink)) !important; max-width:600px; }
.feat-prospecting .hc-cta{ background:var(--ink) !important; color:var(--bg) !important; border:none !important; box-shadow:none !important; }

/* Top Agent Track — the working page's espresso statement */
#topAgentTrack{ border-radius:var(--radius-lg) !important; padding:34px 38px !important; }

/* listings: hairlined gallery */
.listings-strip{
  background:transparent !important; border:none !important;
  border-top:1px solid var(--ink) !important; border-radius:0 !important;
  padding:24px 0 10px !important;
}
.listings-strip .strip-head h2{ text-align:left !important; font-size:34px !important; }
.listings-grid > *{
  border:1px solid var(--mz-hairline-soft) !important; box-shadow:none !important;
  border-radius:18px !important; transition:transform .25s ease !important;
}
.listings-grid > *:hover{ transform:translateY(-4px); }

/* feed: editorial rows; featured card is the espresso voice */
.storey-feed{
  border-top:1px solid var(--ink); border-radius:0 !important;
  background:transparent !important; padding:24px 0 10px !important;
}
.storey-feed .sf-head h2{ font-weight:300; }
.sf-card:not(.featured){
  background:transparent !important; border:none !important;
  border-bottom:1px solid var(--mz-hairline-soft) !important;
  border-radius:0 !important; box-shadow:none !important;
}
.sf-card.featured{ padding:26px 28px !important; border-radius:20px !important; }
.sf-card.featured .sf-prop{ font-family:var(--font-display); font-size:26px !important; font-weight:300 !important; }
.rx-chip{ transform:scale(.88); opacity:.8; }

/* admin branch pipeline: hairline numbers */
#adminDashboardCards .card{
  background:transparent !important; border:none !important;
  border-top:1px solid var(--ink) !important; border-radius:0 !important; box-shadow:none !important;
}
.pipeline-accent{ display:none !important; }

/* ── 6 · CARDS, BOARDS & TABLES — one quiet system everywhere ────── */
.card{ box-shadow:var(--shadow) !important; border-color:var(--mz-hairline-soft) !important; }
.lux-panel{ box-shadow:var(--shadow) !important; }
/* hairlined rows for every ranked list the legacy sheet draws as boxes */
.lb .lb-row, .lbf-row, .admin-table-row{ box-shadow:none !important; }

/* ── 7 · AGENT PROFILE ───────────────────────────────────────────── */
#profileView .mz-p-head{
  display:flex; gap:26px; align-items:flex-end; flex-wrap:wrap;
  padding:30px 0 26px; border-bottom:1px solid var(--ink); margin-bottom:26px;
}
#profileView .mz-p-avatar{
  width:108px; height:108px; border-radius:50%; overflow:hidden; flex:none;
  background:var(--card); border:1px solid var(--mz-hairline);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:34px; color:var(--mz-gold-deep);
}
#profileView .mz-p-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
#profileView .mz-p-name{ font-family:var(--font-display); font-weight:200; font-size:clamp(34px,4.4vw,54px); line-height:1.02; }
#profileView .mz-p-sub{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:8px; }
#profileView .mz-p-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.mz-chip{
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--mz-hairline); border-radius:999px; padding:4px 12px;
  color:var(--muted); background:var(--card);
}
.mz-chip.gold{ border-color:var(--mz-gold); color:var(--mz-gold-deep); background:rgba(201,169,97,.1); }
.mz-chip.ink{ background:var(--ink); border-color:var(--ink); color:var(--bg); }
.mz-chip.ocean{ border-color:var(--mz-ocean); color:var(--mz-ocean); }
.mz-chip.sage{ border-color:var(--mz-sage); color:var(--mz-sage); }
#profileView .mz-p-bio{ max-width:680px; font-size:15px; line-height:1.7; color:var(--ink-2, var(--ink)); margin-bottom:30px; }
#profileView .mz-p-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:34px; }
@media (max-width:880px){ #profileView .mz-p-stats{ grid-template-columns:repeat(2,1fr); } }
#profileView .mz-p-stat{ border-top:1px solid var(--mz-hairline); padding-top:12px; }
#profileView .mz-p-stat b{ display:block; font-family:var(--font-display); font-weight:200; font-size:34px; color:var(--ink); }
#profileView .mz-p-stat span{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:700; }
#profileView .mz-p-sec{ font-size:11px; letter-spacing:.26em; text-transform:uppercase; font-weight:700; color:var(--mz-gold-deep); margin:34px 0 14px; }
#profileView .mz-p-miles{ position:relative; padding-left:22px; }
#profileView .mz-p-miles::before{ content:''; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--mz-hairline); }
#profileView .mz-p-mile{ position:relative; padding:9px 0; }
#profileView .mz-p-mile::before{
  content:''; position:absolute; left:-21px; top:16px; width:9px; height:9px; border-radius:50%;
  background:var(--bg); border:2px solid var(--mz-gold);
}
#profileView .mz-p-mile .d{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700; }
#profileView .mz-p-mile .t{ font-size:14.5px; color:var(--ink); margin-top:1px; }
#profileView .mz-p-deals{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
#profileView .mz-p-deal{ border:1px solid var(--mz-hairline-soft); border-radius:14px; background:var(--card); padding:14px 16px; }
#profileView .mz-p-deal .p{ font-size:14px; font-weight:600; color:var(--ink); line-height:1.35; }
#profileView .mz-p-deal .m{ font-size:11px; color:var(--muted); margin-top:5px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
#profileView .mz-p-deal .amt{ font-size:12px; color:var(--mz-gold-deep); font-weight:600; margin-top:4px; }
#profileView .mz-p-private{
  margin-top:30px; border:1px dashed var(--mz-hairline); border-radius:14px; padding:14px 18px;
  font-size:12px; color:var(--muted); background:rgba(201,169,97,.04);
}
#profileView .mz-p-back{
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  color:var(--muted); background:none; border:none; cursor:pointer; padding:0; margin-bottom:18px;
}
#profileView .mz-p-back:hover{ color:var(--ink); }
#teamDirectoryList > *{ cursor:pointer; transition:transform .15s ease; }
#teamDirectoryList > *:hover{ transform:translateY(-2px); }

/* ── 8 · CONCIERGE PALETTE ───────────────────────────────────────── */
#mzPalette{ position:fixed; inset:0; z-index:4000; display:none; }
#mzPalette.open{ display:block; }
#mzPalette .mz-k-back{ position:absolute; inset:0; background:rgba(14,14,12,.42); backdrop-filter:blur(3px); }
#mzPalette .mz-k-panel{
  position:relative; max-width:620px; margin:11vh auto 0; background:var(--card);
  border:1px solid var(--mz-hairline); border-radius:20px; overflow:hidden;
  box-shadow:0 40px 110px rgba(14,14,12,.4);
}
#mzPalette input{
  width:100%; border:none; outline:none; background:transparent;
  font-size:17px; font-family:inherit; color:var(--ink);
  padding:19px 22px; border-bottom:1px solid var(--mz-hairline-soft);
}
#mzPalette input::placeholder{ color:var(--muted); }
#mzPalette .mz-k-list{ max-height:46vh; overflow-y:auto; padding:8px; }
#mzPalette .mz-k-item{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  border:none; background:transparent; cursor:pointer; border-radius:12px;
  padding:11px 14px; font-size:14px; color:var(--ink); font-family:inherit;
}
#mzPalette .mz-k-item .k-ico{
  width:26px; height:26px; border-radius:8px; flex:none; display:flex; align-items:center; justify-content:center;
  font-size:12px; color:var(--mz-gold-deep); background:rgba(201,169,97,.12); font-weight:700;
}
#mzPalette .mz-k-item .k-sub{ margin-left:auto; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700; }
#mzPalette .mz-k-item.sel, #mzPalette .mz-k-item:hover{ background:rgba(201,169,97,.1); }
#mzPalette .mz-k-foot{
  display:flex; gap:16px; padding:9px 18px; border-top:1px solid var(--mz-hairline-soft);
  font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600;
}

/* ── 9 · SEASON BOARD (leaderboard lenses) ───────────────────────── */
#mzSeason{ margin:6px 0 34px; border-top:1px solid var(--ink); padding-top:16px; }
#mzSeason .mz-s-head{ display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; margin-bottom:12px; }
#mzSeason h2{ font-weight:300; margin:0; }
#mzSeason .mz-s-lens{ margin-left:auto; display:flex; gap:6px; }
#mzSeason .mz-s-lens button{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  border:1px solid var(--mz-hairline); background:var(--card); border-radius:999px;
  padding:6px 13px; cursor:pointer; color:var(--muted); font-family:inherit;
}
#mzSeason .mz-s-lens button.on{ background:var(--ink); border-color:var(--ink); color:var(--bg); }
#mzSeason .mz-s-row{ display:flex; align-items:center; gap:13px; padding:10px 4px; border-bottom:1px solid var(--mz-hairline-soft); cursor:pointer; }
#mzSeason .mz-s-row:hover{ background:rgba(201,169,97,.06); }
#mzSeason .mz-s-row.you .mz-s-name{ color:var(--mz-gold-deep); }
#mzSeason .mz-s-rank{ font-family:var(--font-display); font-size:17px; color:var(--mz-gold-deep); width:24px; text-align:center; }
#mzSeason .mz-s-av{
  width:30px; height:30px; border-radius:50%; overflow:hidden; background:var(--card);
  border:1px solid var(--mz-hairline); display:flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:700; color:var(--mz-gold-deep);
}
#mzSeason .mz-s-av img{ width:100%; height:100%; object-fit:cover; }
#mzSeason .mz-s-name{ font-size:14.5px; color:var(--ink); }
#mzSeason .mz-s-name em{ font-style:normal; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
#mzSeason .mz-s-meta{ margin-left:auto; font-size:11.5px; color:var(--muted); letter-spacing:.04em; }

/* ── 10 · BRANCH SALONS — each in its colours ────────────────────── */
#durbanView h1 em, #durbanView h2 em{ color:var(--mz-ocean) !important; -webkit-text-fill-color:var(--mz-ocean); }
#ssView h1 em, #ssView h2 em{ color:var(--mz-sage) !important; -webkit-text-fill-color:var(--mz-sage); }

/* ── 11 · THE FRONT DOOR ─────────────────────────────────────────── */
.login-card{
  background:var(--card) !important; border:1px solid var(--mz-hairline) !important;
  border-radius:24px !important; box-shadow:0 30px 90px rgba(20,15,5,.16) !important;
}
.login-card h2{ font-weight:200; }
.login-card h2 em{ color:var(--mz-gold-deep); }
.login-eyebrow{ letter-spacing:.3em !important; color:var(--mz-gold-deep) !important; }
.login-form input{ border:1px solid var(--mz-hairline) !important; border-radius:12px !important; }
.login-form input:focus{ border-color:var(--mz-gold) !important; box-shadow:0 0 0 3px rgba(201,169,97,.18) !important; outline:none; }

/* ── 12 · MOBILE — five-room tab bar + every-feature pass ────────── */
@media (max-width:720px){
  .page-nav-mobile{
    display:flex !important; position:fixed; left:0; right:0; bottom:0; z-index:3000;
    background:var(--card); border-top:1px solid var(--mz-hairline);
    padding:6px 8px calc(8px + env(safe-area-inset-bottom));
    justify-content:space-around; box-shadow:0 -10px 30px rgba(20,15,5,.08);
  }
  .page-nav-mobile button{
    display:flex; flex-direction:column; align-items:center; gap:3px;
    background:none; border:none; color:var(--muted); font-family:inherit;
    font-size:9px; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
    padding:4px 10px; border-radius:10px; cursor:pointer;
  }
  .page-nav-mobile button.active{ color:var(--ink); }
  .page-nav-mobile button.active .mn-icon{ color:var(--mz-gold-deep); }
  .page-nav-mobile .mn-icon{ width:21px; height:21px; }
  #main{ padding-bottom:86px !important; }
  .chat-fab{ bottom:92px !important; }

  input, select, textarea{ font-size:16px !important; }
  .nav-branch-menu a, .pd-item, .sb-item{ min-height:42px; display:flex; align-items:center; }
  button{ touch-action:manipulation; }

  .cover-head .ch-main h1{ font-size:clamp(36px,10vw,48px) !important; }
  #mzHeroStory{ min-height:200px; padding:20px !important; margin-top:20px; }
  .mz-nums{ gap:14px; margin-top:26px; }
  .mz-nums .card{ padding:14px 2px 6px !important; }
  .mz-nums .card.ytd .figure{ font-size:clamp(38px,11vw,52px) !important; }
  .feature-row, .listings-strip, .storey-feed, #adminDashboardCards{ margin-top:40px !important; }

  .sf-list{ display:flex !important; flex-direction:column !important; gap:10px !important; }
  .sf-card{ width:100% !important; min-width:0 !important; }
  .listings-grid{ grid-template-columns:1fr !important; }

  #adminInvoicesView table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
  #adminInvoicesView thead th{ position:sticky; top:0; background:var(--card); z-index:2; }
  #adminInvoicesView td, #adminInvoicesView th{ white-space:nowrap; }
  table.hboard{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .hboard td, .hboard th{ white-space:nowrap; }

  #jcLegacyCard div[style*="grid-template-columns"],
  #adminView div[style*="grid-template-columns: repeat(3"],
  #adminView div[style*="grid-template-columns:repeat(3"],
  #adminDashboardCards{ grid-template-columns:1fr !important; display:grid; gap:12px; }
  #jcLegacyCard{ overflow-x:hidden; }
  #jcLegacyCard [style*="font-size:32px"]{ font-size:26px !important; }

  #dashboardView svg[viewBox], #adminView svg[viewBox], #leaderboardView svg[viewBox]{
    width:100% !important; height:auto !important; max-width:100%;
  }
  #kpisView .card{ padding:14px !important; }
  #kpisView h2{ font-size:24px; }
  #mzSeason .mz-s-row{ padding:12px 2px; }
  #profileView .mz-p-head{ flex-direction:column; align-items:flex-start; gap:14px; padding-top:16px; }
  #profileView .mz-p-avatar{ width:84px; height:84px; }
  #profileView .mz-p-deals{ grid-template-columns:1fr; }
  #profileView .mz-p-stat b{ font-size:27px; }
  #mzPalette .mz-k-panel{ margin:3vh 10px 0; border-radius:16px; }
  #mzPalette .mz-k-list{ max-height:56vh; }
  #mzPalette .mz-k-foot span:nth-child(1), #mzPalette .mz-k-foot span:nth-child(2){ display:none; }
  #trainingView article, #rulesView .card{ padding-left:4px; padding-right:4px; }
  #trainingView{ font-size:15.5px; }
  #marketingView iframe{ min-height:calc(100vh - 140px) !important; }
  [class*="modal"] > div, .switch-dropdown, .profile-dropdown{ max-width:calc(100vw - 16px) !important; }
  .sidebar{ padding-bottom:calc(20px + env(safe-area-inset-bottom)); }
}
@media (min-width:721px){ .page-nav-mobile{ display:none !important; } }
@media (max-width:400px){
  .cover-head .ch-main h1{ font-size:32px !important; }
  .mz-nums .card.ytd .figure{ font-size:36px !important; }
  #mzHeroStory .mzh-prop{ font-size:20px; }
}
@media (display-mode:standalone){
  header.topbar{ padding-top:max(6px, env(safe-area-inset-top)); }
  body{ -webkit-tap-highlight-color:transparent; }
}