/* MTH UI kit -- shared look for every page.
   Each page links this AFTER its own <style>, so these rules win. Goes with
   /mth_theme.js (app rail, breadcrumbs, count-ups, skeletons, toasts,
   avatars, celebrations, light mode). Screen only, so printing stays plain. */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Barlow:wght@400;500;600;700&display=swap");

:root {
  --mth-red: #EC2029; --mth-red-glow: rgba(236,32,41,.35);
  --mth-good: #28c76f; --mth-warn: #f0a020; --mth-bad: #e0483f; --mth-info: #3d9bff; --mth-gold: #f5c542;
  --mth-bg: #0a0a0b; --mth-panel: #141417; --mth-panel2: #1b1b1f; --mth-line: #26262c; --mth-muted: #8a8a93;
  --mth-cond: "Barlow Condensed", "Arial Narrow", sans-serif; --mth-body: "Barlow", system-ui, sans-serif;
  --mth-ease: cubic-bezier(.2,.8,.2,1);
}

/* page-to-page fade (Chrome/Edge) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }

@media screen {
  html:root { background: none; color-scheme: dark; }  /* body background fills the window; native controls go dark */
  html body {
    background:
      radial-gradient(ellipse 900px 500px at 15% -10%, rgba(236,32,41,.14), transparent 60%),
      radial-gradient(ellipse 700px 500px at 110% 10%, rgba(236,32,41,.08), transparent 55%),
      repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0px, rgba(255,255,255,.015) 1px, transparent 1px, transparent 34px),
      #0a0a0b;
    background-attachment: fixed;
    font-variant-numeric: tabular-nums;           /* digits don't jiggle as numbers update */
    -webkit-font-smoothing: antialiased;
  }
  html body::before {
    content: ""; position: fixed; inset: 0; width: auto; height: auto;
    pointer-events: none; z-index: -1;
    background: linear-gradient(115deg, rgba(255,255,255,.018), transparent 28%),
                radial-gradient(circle at 78% 30%, rgba(236,32,41,.12), transparent 24%);
  }
  ::selection { background: rgba(236,32,41,.45); color: #fff; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: #2a2a30; border-radius: 10px; border: 2px solid #0a0a0b; }
  ::-webkit-scrollbar-thumb:hover { background: #3a3a42; }
  :focus-visible { outline: 2px solid var(--mth-red); outline-offset: 2px; }

  /* ---------- entrance motion ---------- */
  .mth-in { animation: mthRise .5s var(--mth-ease) both; animation-delay: var(--mth-d, 0ms); }
  @keyframes mthRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

  /* ---------- skeleton loaders ---------- */
  .mth-skel { color: transparent !important; position: relative; }
  .mth-skel > * { visibility: hidden; }
  .mth-skel::after {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: min(100%, var(--mth-skw, 140px)); height: max(.9em, 12px); max-height: 70%; border-radius: 6px;
    background: linear-gradient(90deg, #1c1c21 0%, #2a2a31 40%, #1c1c21 80%); background-size: 300% 100%;
    animation: mthShimmer 1.3s linear infinite;
  }
  td.mth-skel::after { left: 10px; width: min(calc(100% - 20px), 320px); }
  :is(.val, .kpi-n, .qa-score, .tl-val, .big, .sval, .value, .pct, .hrs).mth-skel::after { left: 50%; transform: translate(-50%, -50%); --mth-skw: 70px; }
  @keyframes mthShimmer { from { background-position: 100% 0; } to { background-position: -200% 0; } }

  /* ---------- friendly errors ---------- */
  .mth-soft-err { color: #ffd99a !important; }
  .mth-soft-err::before { content: "\26A0\FE0E  "; }

  /* ---------- toasts ---------- */
  .mth-toasts { position: fixed; right: 18px; bottom: 58px; z-index: 10000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
  .mth-toast {
    pointer-events: auto; min-width: 220px; max-width: 360px; padding: 11px 14px 11px 12px; border-radius: 12px;
    background: rgba(24,24,28,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid #2f2f36; box-shadow: 0 12px 30px rgba(0,0,0,.45); color: #fff;
    font: 500 14px var(--mth-body); display: flex; align-items: center; gap: 10px;
    animation: mthToastIn .32s var(--mth-ease) both;
  }
  .mth-toast i { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 12px; background: var(--mth-good); color: #06210f; }
  .mth-toast.warn i { background: var(--mth-warn); color: #2a1a00; }
  .mth-toast.bad i { background: var(--mth-bad); color: #fff; }
  .mth-toast.out { animation: mthToastOut .3s ease both; }
  @keyframes mthToastIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
  @keyframes mthToastOut { to { opacity: 0; transform: translateX(30px); } }

  /* ---------- sparklines ---------- */
  .mth-spark { display: block; width: 100%; height: 26px; margin-top: 6px; overflow: visible; }
  .mth-spark path.l { fill: none; stroke: var(--sc, var(--mth-red)); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mth-spark path.a { fill: var(--sc, var(--mth-red)); opacity: .14; }
  .mth-spark circle { fill: var(--sc, var(--mth-red)); }

  /* ---------- avatars ---------- */
  .mth-av {
    --s: 28px; width: var(--s); height: var(--s); border-radius: 50%; flex: none; display: inline-grid; place-items: center;
    background: linear-gradient(140deg, hsl(var(--h, 355) 55% 34%), hsl(var(--h, 355) 60% 20%));
    color: #fff; font: 700 calc(var(--s) * .38) var(--mth-cond); letter-spacing: .02em; overflow: hidden; vertical-align: middle;
    box-shadow: 0 0 0 1.5px rgba(255,255,255,.12); position: relative;
  }
  .mth-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mth-name { display: inline-flex; align-items: center; gap: 9px; }

  /* ---------- leaderboard rank-up flash ---------- */
  .mth-rankup { animation: mthGold 1.8s ease-out; }
  @keyframes mthGold { 0% { box-shadow: 0 0 0 2px var(--mth-gold), 0 0 34px rgba(245,197,66,.6); } 100% { box-shadow: 0 0 0 0 transparent; } }

  /* ---------- celebration banner ---------- */
  .mth-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 10001; }
  .mth-cheer {
    position: fixed; left: 50%; top: 14vh; transform: translateX(-50%); z-index: 10002; pointer-events: none;
    padding: 18px 34px; border-radius: 18px; background: rgba(12,12,14,.88); border: 1.5px solid var(--mth-gold);
    box-shadow: 0 0 60px rgba(245,197,66,.35); color: #fff; text-align: center; font-family: var(--mth-cond);
    animation: mthCheer 4.2s var(--mth-ease) both;
  }
  .mth-cheer b { display: block; font-size: clamp(28px, 4vw, 64px); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--mth-gold); }
  .mth-cheer span { font-size: clamp(14px, 1.6vw, 24px); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #e8e8ec; }
  @keyframes mthCheer { 0% { opacity: 0; transform: translate(-50%, -20px) scale(.9); } 10%, 82% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -10px) scale(.98); } }

  .mth-soundgate { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 10003; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(245,197,66,.6);
    background: rgba(20,20,24,.9); color: #f5c542; font: 700 13px var(--mth-cond); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
    box-shadow: 0 0 18px rgba(245,197,66,.25); animation: mthPulseGate 2.4s ease-in-out infinite; }
  @keyframes mthPulseGate { 50% { box-shadow: 0 0 2px rgba(245,197,66,.1); } }

  /* ---------- breadcrumb + unified tool-page header ---------- */
  .mth-titlewrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .mth-crumb { font: 700 11px var(--mth-cond); letter-spacing: .24em; text-transform: uppercase; color: #9a9aa3; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .mth-crumb a { color: #9a9aa3; text-decoration: none; transition: color .15s; }
  .mth-crumb a:hover { color: var(--mth-red); }
  .mth-crumb .sep { color: var(--mth-red); opacity: .8; }
  .mth-titlewrap h1 { font-family: var(--mth-cond) !important; font-weight: 800 !important; letter-spacing: .01em; margin: 0; }
  header.mth-hdr { position: relative; border-bottom: 2px solid var(--mth-line); padding-bottom: 14px; margin-bottom: 14px; }
  header.mth-hdr::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 120px; background: linear-gradient(90deg, var(--mth-red), transparent); animation: mthGrow 1.2s ease-out; }
  @keyframes mthGrow { from { width: 0; } }

  /* ---------- app rail (desktop) ---------- */
  .mth-rail { display: none; }
  @media (min-width: 1000px) {
    html.mth-shell body { padding-left: 72px; }
    html.mth-shell #mthBackBtn { display: none !important; }
    .mth-rail {
      display: flex; flex-direction: column; align-items: center; gap: 6px; position: fixed; z-index: 9000; left: 0; top: 0; bottom: 0; width: 72px;
      padding: 14px 0 12px; background: linear-gradient(180deg, rgba(18,18,21,.94), rgba(10,10,12,.96)); border-right: 1px solid #1f1f24;
      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    }
    .mth-rail::after { content: ""; position: absolute; top: 0; right: -1px; width: 1px; height: 160px; background: linear-gradient(180deg, var(--mth-red), transparent); }
    .mth-rail a, .mth-rail button {
      position: relative; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #8d8d96; background: none; border: 0; cursor: pointer;
      text-decoration: none; transition: background .15s, color .15s;
    }
    .mth-rail a:hover, .mth-rail button:hover { background: #1c1c21; color: #fff; }
    .mth-rail a.on { color: #fff; background: rgba(236,32,41,.14); }
    .mth-rail a.on::before { content: ""; position: absolute; left: -13px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--mth-red); box-shadow: 0 0 12px var(--mth-red); }
    .mth-rail svg { width: 21px; height: 21px; }
    .mth-rail .tip {
      position: absolute; left: 58px; top: 50%; transform: translate(-6px, -50%); white-space: nowrap; pointer-events: none; opacity: 0;
      background: #1d1d22; border: 1px solid #2f2f36; color: #fff; padding: 6px 10px; border-radius: 8px; font: 700 12px var(--mth-cond); letter-spacing: .08em; text-transform: uppercase;
      transition: .15s; box-shadow: 0 8px 20px rgba(0,0,0,.4);
    }
    .mth-rail a:hover .tip, .mth-rail button:hover .tip { opacity: 1; transform: translate(0, -50%); }
    .mth-rail .logo { width: 50px; height: 40px; margin-bottom: 6px; }
    .mth-rail .logo img { width: 46px; height: auto; }
    .mth-rail .sep { width: 28px; height: 1px; background: #26262c; margin: 4px 0; }
    .mth-rail .grow { flex: 1; }
    .mth-rail .me { width: 46px; height: 46px; }
    .mth-rail .me .mth-av { --s: 40px; }
    .mth-rail .me .dot { position: absolute; right: 4px; bottom: 4px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #111114; background: var(--dc, #55555c); }
    .mth-rail .me .dot.in { --dc: var(--mth-good); box-shadow: 0 0 8px var(--mth-good); }
    .mth-rail .me .dot.lunch { --dc: var(--mth-warn); } .mth-rail .me .dot.break { --dc: var(--mth-info); } .mth-rail .me .dot.out { --dc: #55555c; }
  }

  /* ---------- TV boards: slow ambient light + night dim ---------- */
  html.mth-tv body::before { animation: mthDrift 28s ease-in-out infinite alternate; }
  @keyframes mthDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-6vw, 4vh) scale(1.15); } }
  .mth-night { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 9999; transition: opacity 4s ease; }
  .mth-night.on { opacity: .45; }

  /* ---------- light mode: a real theme (white / charcoal / MTH red) ---------- */
  html.mth-light { color-scheme: light; }
  html.mth-light, html.mth-light body {
    --mth-bg: #f3f3f5; --mth-panel: #ffffff; --mth-panel2: #f7f7f9; --mth-line: #e1e1e6; --mth-muted: #6b6b75;
    --mth-glass: linear-gradient(160deg, rgba(255,255,255,.92), rgba(250,250,251,.96)); --mth-glass-line: rgba(17,17,20,.09);
    --mth-tile: rgba(17,17,20,.035); --mth-shadow: inset 0 1px 0 #fff, 0 18px 40px -30px rgba(17,17,20,.35);
    --mth-good: #15a056; --mth-warn: #c47d12; --mth-bad: #d43a32; --mth-info: #1f6fd0;
    /* the names most pages use for their own colors */
    --bg: #f3f3f5; --bg2: #ececf0; --panel: #ffffff; --panel-2: #f7f7f9; --panel2: #f7f7f9; --card: #ffffff; --line: #e1e1e6;
    --muted: #6b6b75; --white: #15151a; --ink: #15151a; --text: #15151a; --good: #15a056; --bad: #d43a32; --red-dim: #f3b9bc;
  }
  html.mth-light body {
    color: #15151a;
    background: radial-gradient(ellipse 900px 500px at 15% -10%, rgba(236,32,41,.08), transparent 60%),
                radial-gradient(ellipse 700px 500px at 110% 10%, rgba(236,32,41,.05), transparent 55%), #f3f3f5;
  }
  html.mth-light body::before { background: radial-gradient(circle at 78% 30%, rgba(236,32,41,.06), transparent 24%); }
  html.mth-light ::-webkit-scrollbar-thumb { background: #c9c9d0; border-color: #f3f3f5; }
  html.mth-light ::selection { background: rgba(236,32,41,.22); color: #15151a; }
  /* dark surfaces pages hard-code */
  html.mth-light :is(.panel, .card, a.card, .ws, .mini, .status, .ld-kpi, .tc-strip, .hv, .acard, .stat, .tile, .kpi, .drawer, .modal, .filterBar, .storeCard, .store-card, .stat-card, .hub-tile) {
    background: var(--mth-glass); border-color: var(--mth-glass-line); color: #15151a; box-shadow: var(--mth-shadow);
  }
  html.mth-light :is(.qa-tile, .sw-tile, .ld-item, .ld-person, .tap-tile, .touch-line, .tc-box, .sp-adj, .types-row, .tcrow, .train-item, .ld-tag, .sw-pill, .mth-podium .pl, .hub-att a) { background: var(--mth-tile); border-color: rgba(17,17,20,.1); color: #15151a; }
  html.mth-light :is(input, select, textarea, .rate-field input, .spiff-input, .sp-form input, .sp-form select, .types-row input, .tcin input) { background: #fff; color: #15151a; border-color: #d4d4db; }
  html.mth-light :is(.btn, .icon-btn, button.navBtn, .sw-tab, .sp-del, .addSpiffBtn, .tc-pop) { background: #fff; color: #15151a; border-color: #d4d4db; }
  html.mth-light :is(.btn.primary, .save-btn, .addSpiffBtn:hover, .sw-tab.on, #logoutLink, .qa-alert-bar a, .ld-count) { background: var(--mth-red); color: #fff; border-color: var(--mth-red); }
  html.mth-light :is(h1, h2, h3, .panel-title, .titleblock h1, .hero h2, .ws h3, .mini b, .ld-table td, .ld-person .nm, .agent-name, .name, .ld-kpi .v, .sw-tile .v, .hv b, .qa-score, .tl-val, .mth-rotm .nm, .mth-rotm .stat b, .mth-podium .pl .nm, .hub-tile .v) { color: #15151a; }
  html.mth-light :is(.titleblock h1, .hero h2) { background: none; -webkit-text-fill-color: initial; }
  html.mth-light :is(.muted, .hint, .sub, .eyebrow, .tag, .kicker, .section-label, .ld-kpi .k, .ld-kpi .s, .sw-tile .k, .sw-tile .s, .hv .hk, .hv .hs, .ws p, .mini small, .ws .tag, .ld-table th, .ld-hint, .ld-empty, .save-note, .footerNote, .panel-title .dim, .qa-sub, .tl-parts, .tap-label, .report-note, .mth-rotm .why, .mth-podium .pl .d, .hub-tile .k, .hub-tile .s) { color: #6b6b75; }
  html.mth-light :is(.ws .live, .ws .live b, .mini .mlive, .ld-item span, .ld-item b, .sw-appts td, .ld-pill, .sw-sum span, .ld-table .rep, .mth-delta.flat, .hub-att a) { color: #2a2a31; }
  html.mth-light :is(.headerNav, .whoami, .aaSwitch, .pager, .tools) { background: #fff; border-color: #e1e1e6; }
  html.mth-light :is(.headerNav a, .aaLbl, .practiceBtn, #practiceLink) { color: #2a2a31; }
  html.mth-light #practiceLink { background: rgba(236,32,41,.06); }
  html.mth-light .mth-rail { background: #fff; border-right: 1px solid #e1e1e6; }
  html.mth-light .mth-rail a, html.mth-light .mth-rail button { color: #4a4a54; }
  html.mth-light .mth-rail a.on { color: var(--mth-red); background: rgba(236,32,41,.08); }
  html.mth-light .mth-rail .tip { background: #15151a; color: #fff; border-color: #15151a; }
  html.mth-light .mth-toast { background: #fff; color: #15151a; border: 1px solid #e1e1e6; box-shadow: 0 16px 40px -20px rgba(0,0,0,.35); }
  html.mth-light .mth-skel::after { background: linear-gradient(90deg, #ececf0, #f7f7f9, #ececf0); }
  html.mth-light :is(.ld-table tbody tr:hover, .mth-podium .pl:hover) { background: rgba(236,32,41,.05); }
  html.mth-light :is(.ld-table td, .sw-appts td, .ld-table th, .sw-appts th, .rate-row, .types-row, table.sp-list td, table.sp-list th, table.payout-table td, table.payout-table th) { border-color: #e6e6ea; }
  html.mth-light .ld-dot { background: #c3c3ca; }
  html.mth-light .mth-ringwrap { background: #c3c3ca; } html.mth-light .mth-ringwrap > .mth-av, html.mth-light .mth-rotm .ph > .mth-av, html.mth-light .mth-podium .pl .ph > .mth-av { box-shadow: 0 0 0 2px #fff; }
  html.mth-light .modal-bg { background: rgba(21,21,26,.45); }
  html.mth-light .qa-alert-bar { background: #fff3f3; color: #15151a; border-color: var(--mth-red); }
  html.mth-light .qa-alert-bar .sub, html.mth-light #lmsAlertBar .list a { color: #3a3a42; }
  html.mth-light #lmsAlertBar .list a { background: #fff; border-color: rgba(236,32,41,.5); }
  html.mth-light .back-btn { background: #fff; border-color: #e1e1e6; } html.mth-light .back-btn svg { stroke: #15151a; }
  html.mth-light .mth-crumb { color: #6b6b75; } html.mth-light .mth-crumb a { color: #2a2a31; }
  html.mth-light img.logo-img, html.mth-light img.mark { filter: none; }
  html.mth-light .mth-rotm { border-color: rgba(196,125,18,.4); }
  html.mth-light .tc-box { background: #fff; }
  html.mth-light :is(.tc-box small, .tc-box.on small, .tc-now, .tc-meta, .tc-ticker .lbl, .tap-count, .tap-tile, .all-stores td, tfoot td, tfoot th, .fixedName, .whoami .name, .repName, .team-label, .mini-label, .ld-kpi .v, .kpi-n, .count .num, .stat .n, .exn, td, th) { color: #15151a; }
  html.mth-light :is(.whoami, .fixedNameWrap, #fixedNameWrap) { background: transparent; }
  html.mth-light .tc-box.on small { color: #3a3a42; }
  html.mth-light .tc-box.on { background: color-mix(in srgb, var(--c) 12%, #fff); }

  /* ---------- TV boards: podium rings, bigger type, ticker ---------- */
  html.mth-tv .grid .card { position: relative; }
  html.mth-tv .grid .card.p1, html.mth-tv .grid .card.p2, html.mth-tv .grid .card.p3 { --mc: var(--mth-gold); }
  html.mth-tv .grid .card.p2 { --mc: var(--mth-silver); } html.mth-tv .grid .card.p3 { --mc: var(--mth-bronze); }
  html.mth-tv .grid .card.p1 .rank, html.mth-tv .grid .card.p2 .rank, html.mth-tv .grid .card.p3 .rank { background: var(--mc); color: #111; box-shadow: 0 0 18px color-mix(in srgb, var(--mc) 55%, transparent); }
  html.mth-tv .grid .card.p1 { border-color: rgba(245,197,66,.55); box-shadow: 0 0 0 1px rgba(245,197,66,.35), 0 20px 50px -24px rgba(245,197,66,.45); background-image: linear-gradient(180deg, rgba(245,197,66,.08), transparent 55%); }
  html.mth-tv .grid .card.p1 .mth-av, html.mth-tv .grid .card.p2 .mth-av, html.mth-tv .grid .card.p3 .mth-av { box-shadow: 0 0 0 3px var(--mc), 0 0 16px color-mix(in srgb, var(--mc) 45%, transparent); }
  html.mth-tv .grid .card .crown { position: absolute; top: -14px; left: 14px; font-size: 24px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
  html.mth-tv .grid .card .count .num { font-size: clamp(34px, 3.4vw, 56px); }
  .mth-ticker { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; height: 46px; display: flex; align-items: center; background: linear-gradient(90deg, rgba(10,10,11,.96), rgba(16,16,20,.92)); border-top: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(10px); overflow: hidden; font-family: var(--mth-body); }
  .mth-ticker .tag { flex: none; height: 100%; display: flex; align-items: center; padding: 0 18px 0 20px; background: var(--mth-red); color: #fff; font: 800 14px var(--mth-cond); letter-spacing: .16em; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
  .mth-ticker .track { flex: 1; overflow: hidden; height: 100%; display: flex; align-items: center; }
  .mth-ticker .run { display: inline-flex; gap: 48px; white-space: nowrap; padding-left: 100%; animation: mthTick var(--dur, 60s) linear infinite; will-change: transform; }
  .mth-ticker .run span { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; color: #e8e8ec; }
  .mth-ticker .run span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mth-red); box-shadow: 0 0 10px var(--mth-red); }
  .mth-ticker .run span.sale::before, .mth-ticker .run span.sold::before { background: var(--mth-good); box-shadow: 0 0 10px var(--mth-good); }
  .mth-ticker .run span.milestone::before { background: var(--mth-gold); box-shadow: 0 0 10px var(--mth-gold); }
  .mth-ticker .run span.shown::before { background: var(--mth-info); box-shadow: 0 0 10px var(--mth-info); }
  .mth-ticker .run span i { font-style: normal; color: #8a8a93; font-size: 13px; }
  /* stats crawl (CSC Dashboard): STAT  Name 12.0 · Name 10.4 */
  .mth-ticker .run span.stat { gap: 22px; }
  .mth-ticker .run span.stat::before { background: var(--mth-red); box-shadow: 0 0 10px var(--mth-red); }
  .mth-ticker .run span.stat.sales::before { background: var(--mth-gold); box-shadow: 0 0 10px var(--mth-gold); }
  .mth-ticker .run span.stat b { font: 800 14px var(--mth-cond); letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(236,32,41,.18); border: 1px solid rgba(236,32,41,.5); border-radius: 6px; padding: 3px 10px; margin-right: 4px; }
  .mth-ticker .run span.stat.sales b { background: rgba(240,180,41,.16); border-color: rgba(240,180,41,.5); }
  .mth-ticker .run span.stat u { text-decoration: none; display: inline-flex; align-items: baseline; gap: 7px; color: #d4d4da; }
  .mth-ticker .run span.stat u + u::before { content: "\00b7"; color: #55555e; margin-right: 10px; }
  .mth-ticker .run span.stat em { font: 800 17px var(--mth-cond); font-style: normal; letter-spacing: .02em; }
  .mth-ticker .run span.stat em.good { color: var(--mth-good); } .mth-ticker .run span.stat em.warn { color: var(--mth-warn); } .mth-ticker .run span.stat em.bad { color: var(--mth-bad); }
  .mth-ticker:hover .run { animation-play-state: paused; }
  @keyframes mthTick { to { transform: translateX(-100%); } }
  html.mth-has-ticker body { padding-bottom: 54px !important; }
  html.mth-has-ticker .mth-soundgate { bottom: 62px; }
  html.mth-has-ticker #lastUpload[style*="bottom"] { bottom: 58px !important; }   /* only the bottom-placed pill moves up over the ticker; a top-placed one (Sales Board) stays put */

  /* ---------- hubs: KPI strip + needs attention ---------- */
  .hub-dash { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 18px; margin: 0 0 clamp(26px, 3vw, 40px); }
  .hub-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-content: start; }
  .hub-tile { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border-radius: 14px; text-decoration: none; color: #fff; background: var(--mth-glass); border: 1px solid var(--mth-glass-line); box-shadow: var(--mth-shadow); overflow: hidden; transition: transform .2s var(--mth-ease), border-color .2s; }
  .hub-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--mth-line); }
  .hub-tile.good::before { background: var(--mth-good); } .hub-tile.warn::before { background: var(--mth-warn); } .hub-tile.bad::before { background: var(--mth-bad); } .hub-tile.red::before { background: var(--mth-red); }
  .hub-tile.good .v { color: var(--mth-good); } .hub-tile.warn .v { color: var(--mth-warn); } .hub-tile.bad .v { color: var(--mth-bad); }
  a.hub-tile:hover { transform: translateY(-2px); border-color: rgba(236,32,41,.6); }
  .hub-tile .k { font: 700 11px var(--mth-cond); letter-spacing: .16em; text-transform: uppercase; color: #7f7f88; }
  .hub-tile .v { font: 800 clamp(28px, 2.6vw, 40px)/1.05 var(--mth-cond); letter-spacing: -.01em; }
  .hub-tile .s { color: #8f8f98; font-size: 12px; }
  .hub-att { padding: 16px 18px; border-radius: 16px; background: var(--mth-glass); border: 1px solid var(--mth-glass-line); box-shadow: var(--mth-shadow); display: flex; flex-direction: column; gap: 8px; min-height: 100%; }
  .hub-att .t { display: flex; align-items: center; gap: 8px; font: 700 12px var(--mth-cond); letter-spacing: .2em; text-transform: uppercase; color: #a7a7ae; margin-bottom: 2px; }
  .hub-att .t b { background: var(--mth-red); color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 11px; letter-spacing: 0; }
  .hub-att .t b:empty { display: none; }
  .hub-att a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--mth-tile); border: 1px solid rgba(255,255,255,.06); border-left: 4px solid var(--mth-warn); text-decoration: none; color: #e4e4e8; font-size: 13.5px; }
  .hub-att a.bad { border-left-color: var(--mth-bad); } .hub-att a:hover { border-color: var(--mth-red); }
  .hub-att a i { margin-left: auto; font-style: normal; color: #6a6a72; }
  @media (max-width: 1000px) { .hub-dash { grid-template-columns: 1fr; } .hub-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* ---------- empty states ---------- */
  .mth-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 22px 12px; text-align: center; color: #8f8f98; font-size: 13.5px; }
  .mth-empty .ico { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: rgba(236,32,41,.1); border: 1px solid rgba(236,32,41,.25); color: #ff444c; margin-bottom: 4px; }
  .mth-empty .ico svg { width: 22px; height: 22px; }
  .mth-empty b { color: #d8d8dc; font: 700 15px var(--mth-cond); letter-spacing: .04em; text-transform: uppercase; }

  /* ---------- icons: one treatment everywhere ---------- */
  html.mth-v2 :is(a.card .icon, .card .icon, .acard .icon) { position: absolute; top: 24px; right: 24px; width: 50px; height: 50px; padding: 12px; border-radius: 14px; background: rgba(236,32,41,.1); border: 1px solid rgba(236,32,41,.28); color: #ff444c; opacity: 1; }
  html.mth-v2 :is(a.card .icon svg, .acard .icon svg) { width: 100%; height: 100%; stroke-width: 1.9; }
  html.mth-light :is(a.card .icon, .acard .icon, .ic, .mth-empty .ico) { background: rgba(236,32,41,.08); border-color: rgba(236,32,41,.25); color: var(--mth-red); }
}

@media (prefers-reduced-motion: reduce) {
  .mth-in, .mth-rankup, .mth-cheer, html.mth-tv body::before, header.mth-hdr::after, .mth-ticker .run { animation: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* =====================================================================
   Design system v2 (html.mth-v2): glass panels, bigger headline numbers,
   live-change pulse, animated bars and rings, status rings on photos,
   podium + Rep of the Month. Pages opt in through mth_theme.js (V2_PAGES).
   ===================================================================== */
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
:root {
  --mth-glass: linear-gradient(160deg, rgba(34,34,40,.62), rgba(13,13,16,.72));
  --mth-glass-line: rgba(255,255,255,.075);
  --mth-tile: rgba(255,255,255,.028);
  --mth-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 24px 50px -32px rgba(0,0,0,.95);
  --mth-silver: #c9ced6; --mth-bronze: #cd8a54;
}
@media screen {
  /* surfaces */
  html.mth-v2 :is(.panel, .ld-kpi, .tc-strip, .ws, .mini, .status, .mth-rotm) {
    background: var(--mth-glass); border-color: var(--mth-glass-line); box-shadow: var(--mth-shadow);
    -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15);
  }
  html.mth-v2 :is(.qa-tile, .sw-tile, .ld-item, .ld-person, .tap-tile, .touch-line) {
    background: var(--mth-tile); border-color: rgba(255,255,255,.06);
  }
  html.mth-v2 :is(.qa-tile, .sw-tile, .ld-person, .ld-kpi) { transition: border-color .2s, transform .2s var(--mth-ease), box-shadow .2s; }
  html.mth-v2 :is(a.sw-tile, a.qa-tile, a.ld-kpi, .ld-person):hover { transform: translateY(-2px); box-shadow: 0 14px 30px -20px rgba(236,32,41,.55); }

  /* type: one number leads, the label stays quiet */
  html.mth-v2 .ld-kpi .v { font-size: clamp(32px, 2.9vw, 46px); letter-spacing: -.015em; }
  html.mth-v2 .ld-kpi .k { color: #7f7f88; letter-spacing: .16em; }
  html.mth-v2 .sw-tile .v { font-size: clamp(28px, 2.5vw, 38px); letter-spacing: -.01em; }
  html.mth-v2 .qa-score { font-size: clamp(28px, 2.5vw, 40px); letter-spacing: -.01em; }
  html.mth-v2 .panel-title { letter-spacing: .16em; }

  /* calmer status colors */
  html.mth-v2 { --mth-warn: #e9ab3d; }

  /* live change: a quick red pulse on the number and its tile */
  .mth-bump { animation: mthBump 1.5s var(--mth-ease); }
  @keyframes mthBump { 0% { text-shadow: none; } 18% { text-shadow: 0 0 22px rgba(236,32,41,.95), 0 0 2px #fff; } 100% { text-shadow: none; } }
  .mth-bump-host { animation: mthBumpHost 1.5s var(--mth-ease); }
  @keyframes mthBumpHost { 0% { box-shadow: 0 0 0 0 rgba(236,32,41,0); } 18% { box-shadow: 0 0 0 1.5px rgba(236,32,41,.85), 0 0 28px rgba(236,32,41,.35); } 100% { box-shadow: 0 0 0 0 rgba(236,32,41,0); } }

  /* bars fill in, rings sweep */
  html.mth-v2 :is(.lms-bar > span, .tb > span, .mth-bar > span) { animation: mthFillW 1s var(--mth-ease) both; }
  @keyframes mthFillW { from { width: 0; } }
  html.mth-v2 .sw-ring { transition: --p 1.1s var(--mth-ease); }

  /* goal hit: a quiet gold ring, no fireworks */
  .mth-goal { box-shadow: 0 0 0 2px var(--mth-gold), 0 0 26px rgba(245,197,66,.28) !important; }
  .mth-goal-tag { display: inline-flex; align-items: center; gap: 5px; font: 700 11px var(--mth-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--mth-gold); }

  /* photos with a status ring */
  .mth-ringwrap { position: relative; display: inline-flex; border-radius: 50%; padding: 2px; background: #3a3a42; flex: none; }
  .mth-ringwrap.in { background: var(--mth-good); box-shadow: 0 0 14px rgba(40,199,111,.35); }
  .mth-ringwrap.lunch { background: var(--mth-warn); } .mth-ringwrap.break { background: var(--mth-info); }
  .mth-ringwrap > .mth-av { box-shadow: 0 0 0 2px #111114; }

  /* Rep of the Month */
  .mth-rotm { position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; padding: 16px 20px; border: 1px solid rgba(245,197,66,.35); border-radius: 16px; }
  .mth-rotm::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 0% 50%, rgba(245,197,66,.16), transparent 45%), radial-gradient(circle at 100% 0%, rgba(236,32,41,.14), transparent 40%); }
  .mth-rotm .ph { position: relative; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, #ffe08a, var(--mth-gold) 45%, #a8781f); box-shadow: 0 0 30px rgba(245,197,66,.35); }
  .mth-rotm .ph > .mth-av { box-shadow: 0 0 0 3px #111114; }
  .mth-rotm .crown { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-size: 20px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
  .mth-rotm .t { position: relative; flex: 1; min-width: 0; }
  .mth-rotm .eyebrow { font: 700 11px var(--mth-cond); letter-spacing: .24em; text-transform: uppercase; color: var(--mth-gold); }
  .mth-rotm .nm { font: 800 clamp(24px, 2.4vw, 34px)/1.05 var(--mth-cond); text-transform: uppercase; letter-spacing: .01em; margin-top: 2px; }
  .mth-rotm .why { color: #b9b9c0; font-size: 13px; margin-top: 3px; }
  .mth-rotm .stat { position: relative; text-align: right; }
  .mth-rotm .stat b { display: block; font: 800 clamp(30px, 3vw, 44px)/1 var(--mth-cond); color: #fff; }
  .mth-rotm .stat small { color: #9a9aa3; font: 700 11px var(--mth-cond); letter-spacing: .14em; text-transform: uppercase; }

  /* podium: 2nd, 1st, 3rd */
  .mth-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 12px; }
  .mth-podium .pl { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px 12px; border-radius: 14px; background: var(--mth-tile); border: 1px solid rgba(255,255,255,.06); text-align: center; cursor: pointer; transition: transform .2s var(--mth-ease), border-color .2s; }
  .mth-podium .pl:hover { transform: translateY(-3px); border-color: rgba(236,32,41,.6); }
  .mth-podium .pl .ph { border-radius: 50%; padding: 3px; background: var(--mc); }
  .mth-podium .pl .ph > .mth-av { box-shadow: 0 0 0 2px #111114; }
  .mth-podium .pl.p1 { --mc: linear-gradient(135deg, #ffe08a, var(--mth-gold) 50%, #a8781f); padding-top: 22px; border-color: rgba(245,197,66,.35); background: linear-gradient(180deg, rgba(245,197,66,.10), rgba(255,255,255,.02)); }
  .mth-podium .pl.p2 { --mc: linear-gradient(135deg, #f2f4f7, var(--mth-silver) 50%, #8d939c); }
  .mth-podium .pl.p3 { --mc: linear-gradient(135deg, #f0b98d, var(--mth-bronze) 50%, #8a5631); }
  .mth-podium .pl .rk { position: absolute; top: 8px; left: 10px; font: 800 13px var(--mth-cond); color: #7f7f88; }
  .mth-podium .pl.p1 .rk { color: var(--mth-gold); }
  .mth-podium .pl .crown { position: absolute; top: -13px; font-size: 20px; }
  .mth-podium .pl .nm { font: 700 15px/1.15 var(--mth-body); }
  .mth-podium .pl .v { font: 800 clamp(22px, 2vw, 30px)/1 var(--mth-cond); }
  .mth-podium .pl.p1 .v { color: var(--mth-gold); }
  .mth-podium .pl .d { color: #8f8f98; font-size: 12px; }
  .mth-podium-empty { color: #8f8f98; font-size: 13px; padding: 6px 2px; }

  /* change vs last month */
  .mth-delta { display: inline-flex; align-items: center; gap: 3px; font: 700 11.5px var(--mth-body); letter-spacing: 0; }
  .mth-delta.up { color: var(--mth-good); } .mth-delta.down { color: #ff6b72; } .mth-delta.flat { color: #8f8f98; }

  /* celebration: soft edge glow instead of confetti */
  .mth-edge { position: fixed; inset: 0; pointer-events: none; z-index: 9998; box-shadow: inset 0 0 0 2px rgba(236,32,41,.0), inset 0 0 140px rgba(236,32,41,.0); animation: mthEdge 3.2s var(--mth-ease) both; }
  @keyframes mthEdge { 0% { box-shadow: inset 0 0 0 2px rgba(245,197,66,0), inset 0 0 140px rgba(236,32,41,0); } 15% { box-shadow: inset 0 0 0 2px rgba(245,197,66,.75), inset 0 0 160px rgba(236,32,41,.45); } 100% { box-shadow: inset 0 0 0 2px rgba(245,197,66,0), inset 0 0 140px rgba(236,32,41,0); } }
}
@media (prefers-reduced-motion: reduce) {
  .mth-bump, .mth-bump-host, .mth-edge, html.mth-v2 :is(.lms-bar > span, .tb > span, .mth-bar > span) { animation: none !important; }
  html.mth-v2 .sw-ring { transition: none; }
}