/**
 * BASE: /Users/christianbentley/Desktop/card-menu-desktop-optionC.html
 * (desktop card-chrome blocks derive from Christian's approved Option C
 * sample; phone blocks derive from the approved card-menu phone sample.)
 *
 * Player Dashboard — Mobile Shell
 *
 * Drawer + dynamic-tabs chrome that swaps in at <=768px. Tokens copied
 * directly from public-profile-mobile.css so the dashboard and the public
 * profile share one visual language. All selectors are scoped under
 * .lr-dm-shell or under html.lr-dm-active so existing dashboard CSS is
 * untouched at desktop widths.
 *
 * Pattern:
 *   - At >768px: .lr-dm-shell is display:none. Existing desktop dashboard
 *     renders normally.
 *   - At <=768px: .lr-dm-shell renders. Body gets .lr-dm-active which hides
 *     the legacy mobile chrome (.lr-dash-header / .lr-dash-sidebar /
 *     .lr-sidebar-overlay) and reflows .lr-dash-main to sit beneath the
 *     new sticky topbar + tab strip.
 */

/* === Stat steppers (v2.72.313) — desktop-neutral base ============= */
/* stat-steppers.js wraps the existing number inputs; at desktop widths
   the wrapper is transparent and the buttons/hint don't render, so the
   desktop forms are pixel-identical to before. Mobile rules live in the
   768px block below. */
.lr-stepper-wrap { display: contents; }
.lr-stepper-btn, .lr-stepper-hint { display: none; }

/* === Hide mobile chrome on desktop, keep shell as invisible wrapper === */
/* (.lr-dm-drawer* kept in this list for the recruiting/trainer/school
   shells that still render drawers on these classes — see the legacy
   drawer block below.) */
.lr-dm-shell { display: contents; }
.lr-dm-topbar, .lr-dm-tabs-wrap, .lr-dm-demo-hint,
.lr-dm-drawer-overlay, .lr-dm-drawer,
.lr-dm-menu { display: none; }
.lr-dm-mobile-only { display: none; }

@media (max-width: 768px) {

  /* === Token scope === */
  .lr-dm-shell {
    --dm-bg: #0a0a0f;
    --dm-surface: #12121a;
    --dm-surface2: #1a1a26;
    --dm-surface3: #222232;
    --dm-border: rgba(255,255,255,0.07);
    --dm-border-strong: rgba(255,255,255,0.12);
    --dm-gold: #d4a843;
    --dm-gold-dim: #a07830;
    --dm-gold-glow: rgba(212,168,67,0.15);
    --dm-white: #f4f4f8;
    --dm-dim: #7a7a9a;
    --dm-dimmer: #3a3a55;
    --dm-accent: #4a8fff;
    --dm-radius: 14px;
    --dm-radius-sm: 9px;

    display: block;
    font-family: 'DM Sans', sans-serif;
    color: var(--dm-white);
  }

  .lr-dm-shell *,
  .lr-dm-shell *::before,
  .lr-dm-shell *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
  }

  /* === Hide legacy mobile chrome === */
  .lr-dash-header,
  .lr-dash-sidebar,
  .lr-sidebar,
  .lr-sidebar-overlay,
  .header-f-wrapper { display: none !important; }

  /* === Reflow main content === */
  .lr-dashboard {
    background: var(--dm-bg, #0a0a0f);
  }
  .lr-dashboard-body {
    display: block !important;
    grid-template-columns: none !important;
    /* v2.72.168 — the top reserve for the fixed chrome (topbar + tab strip,
       ~105px) lives HERE, not on .lr-dashboard. recruiting-dashboard.css and
       scout-dashboard-mobile.css both declare `.lr-dashboard{padding-top:0
       !important}`, which loads on multi-role accounts (scout/recruiter) and
       stomped the reserve when it was on .lr-dashboard — content then sat
       behind the fixed bars. No stylesheet touches .lr-dashboard-body padding,
       so this !important reserve can't be overridden. */
    padding: calc(105px + env(safe-area-inset-top, 0px)) 0 0 0 !important;
    background: #0a0a0f !important;
  }
  .lr-dash-main {
    padding: 16px 14px 100px !important;
    max-width: 100% !important;
    margin: 0 !important;
    background: var(--dm-bg, #0a0a0f);
    min-height: calc(100vh - 110px);
  }

  /* === Sticky Topbar === */
  .lr-dm-topbar {
    /* v2.72.45 — switched from sticky to fixed. position: sticky was
       not actually anchoring to the viewport because .lr-dashboard
       (the flex column container) scrolled away with body. Fixed sits
       at the top of the viewport regardless of scroll container. The
       safe-area-inset-top reserve keeps the bar below iOS notches. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 12px;
    background: rgba(10, 10, 15, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--dm-border);
  }
  /* v2.72.168 — the chrome reserve (topbar 62 + tab strip 43 = 105px) is set on
     .lr-dashboard-body above, NOT here. It used to be on .lr-dashboard, but
     recruiting-dashboard.css / scout-dashboard-mobile.css declare
     `.lr-dashboard{padding-top:0 !important}` (they load on scout/recruiter
     accounts) and overrode it, so on multi-role accounts the reserve vanished
     and content hid behind the fixed bars. Keeping it off .lr-dashboard here
     avoids double-spacing on single-role accounts. History: v2.72.163 wrongly
     gated this on the never-set `lr-dm-active` class; v2.72.164 made the tab
     strip fixed; v2.72.165 dropped the dead class; v2.72.168 moved the reserve
     to the un-overridable .lr-dashboard-body. */

  .lr-dm-menu-btn,
  .lr-dm-profile-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--dm-surface2);
    border: 1px solid var(--dm-border);
    border-radius: 10px;
    color: var(--dm-white);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
    text-decoration: none;
  }
  .lr-dm-menu-btn {
    width: 38px;
    height: 38px;
  }
  .lr-dm-profile-btn {
    padding: 0 12px;
    min-height: 38px;
    gap: 6px;
  }
  .lr-dm-profile-btn-label {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.2px;
  }
  .lr-dm-menu-btn:active,
  .lr-dm-profile-btn:active {
    background: var(--dm-surface3);
    border-color: var(--dm-border-strong);
  }

  .lr-dm-title-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.05;
    padding: 0 8px;
    text-align: center;
  }
  /* "DASHBOARD" small eyebrow above the category name */
  .lr-dm-eyebrow {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--dm-dim);
    text-transform: uppercase;
  }
  /* Active category name — big, gold */
  .lr-dm-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 17px;
    letter-spacing: 0.14em;
    color: var(--dm-gold);
    margin: 1px 0 0;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* === Sticky Tab Strip === */
  .lr-dm-tabs-wrap {
    display: block;
    /* v2.72.164 — FIXED, not sticky. position:sticky never anchored here:
       the strip's containing block is .lr-dm-shell, which (with the topbar
       pulled out of flow as position:fixed) is only ~43px tall, so the strip
       had no room to stick and scrolled away under the topbar in iOS Safari,
       letting content ride up beneath it. Fixed pins it permanently at the
       topbar's bottom edge (notch-aware). Content clearance is reserved by
       the .lr-dashboard padding-top (105px) above. */
    position: fixed;
    top: calc(62px + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    z-index: 55;
    background: rgba(10, 10, 15, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--dm-border);
  }
  .lr-dm-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 12px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .lr-dm-tabs::-webkit-scrollbar { display: none; }

  .lr-dm-tab {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 4px 13px;
    margin: 0 8px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dm-dim);
    text-decoration: none;
    white-space: nowrap;
    scroll-snap-align: start;
    transition: color .15s ease;
  }
  .lr-dm-tab::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--dm-gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .2s ease;
  }
  .lr-dm-tab.active {
    color: var(--dm-gold);
  }
  .lr-dm-tab.active::after {
    transform: scaleX(1);
  }
  .lr-dm-tab.locked {
    color: var(--dm-dimmer);
  }
  .lr-dm-tab.locked .lr-dm-tab-label {
    opacity: 0.65;
  }

  /* Tab icon (SVG rendered inline by lr_dm_section_icon) */
  .lr-dm-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .lr-dm-tab-icon svg {
    width: 14px;
    height: 14px;
    display: block;
    opacity: 0.7;
    transition: opacity .15s ease;
  }
  .lr-dm-tab.active .lr-dm-tab-icon svg { opacity: 1; }
  .lr-dm-tab.locked .lr-dm-tab-icon svg { opacity: 0.5; }

  .lr-dm-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--dm-gold);
    color: #0a0a0f;
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
  }
  .lr-dm-tab-lock {
    display: inline-flex;
    color: var(--dm-dimmer);
  }

  /* === LEGACY DRAWER — kept for the OTHER mobile shells ============
     The PLAYER dashboard no longer renders a drawer (v2.72.314 card-menu
     screen below), but recruiting-dashboard-mobile.php, trainer- and
     school-dashboard-mobile.php still build their drawers on these exact
     classes and load THIS stylesheet as their base (see the 2026-07-01
     note in class-plugin-hooks.php's recruiting block). Deleting these
     rules breaks those shells — audit catch, 2026-07-06. Remove only
     after every shell is ported to the card-menu model. */
  .lr-dm-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 200;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
  }
  .lr-dm-drawer-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }
  .lr-dm-drawer-overlay[hidden] { display: none; }
  .lr-dm-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    background: var(--dm-bg);
    border-right: none;
    z-index: 210;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.16,1,.3,1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .lr-dm-drawer.open {
    transform: translateX(0);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
  }
  .lr-dm-drawer-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px;
    border-bottom: 1px solid var(--dm-border);
  }
  .lr-dm-drawer-close {
    margin-left: auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--dm-border);
    background: var(--dm-surface3);
    color: var(--dm-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .lr-dm-drawer-close:hover,
  .lr-dm-drawer-close:focus-visible {
    background: var(--dm-surface2);
    border-color: var(--dm-gold);
    outline: none;
  }
  .lr-dm-drawer-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dm-gold), var(--dm-gold-dim));
    padding: 2px;
    flex-shrink: 0;
  }
  .lr-dm-drawer-avatar-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--dm-surface3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--dm-white);
    text-transform: uppercase;
  }
  .lr-dm-drawer-name {
    flex: 1;
    min-width: 0;
  }
  .lr-dm-drawer-name-line {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px;
    letter-spacing: 0.08em;
    color: var(--dm-white);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .lr-dm-drawer-name-tier {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    color: var(--dm-gold);
    margin-top: 2px;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .lr-dm-drawer-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0 12px;
  }
  body.lr-dm-drawer-open {
    overflow: hidden;
  }
  @media (prefers-reduced-motion: reduce) {
    .lr-dm-drawer { transition: none; }
  }

  /* === Card Menu — the default SCREEN (v2.72.314, sample model) ====
     Sits in normal document flow under the fixed topbar. Not an overlay:
     while html.lr-dm-menu-open is set, the menu shows and the section
     content + tab strip hide (mobile widths only — desktop untouched). */
  .lr-dm-menu { display: none; }
  html.lr-dm-menu-open .lr-dm-menu {
    display: block;
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    /* whole screen materializes — the sample's screen-to-screen feel */
    animation: lrDmViewIn .5s cubic-bezier(.19,1,.22,1);
  }
  @keyframes lrDmViewIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    html.lr-dm-menu-open .lr-dm-menu { animation: none; }
  }
  /* v2.72.316 — EVERY tool's screen materializes on entry, the same
     screen-to-screen feel the menu has (Christian: "all can be given the
     buttery smooth transitions"). Mobile widths only; keyframes above. */
  .lr-dash-main {
    animation: lrDmViewIn .5s cubic-bezier(.19,1,.22,1);
  }
  @media (prefers-reduced-motion: reduce) {
    .lr-dash-main { animation: none; }
  }

  /* Menu open = cards ARE the screen: hide the section content, its tab
     strip, and the hint. The topbar stays — four-square, title, Profile. */
  html.lr-dm-menu-open .lr-dash-main { display: none !important; }
  html.lr-dm-menu-open .lr-dm-tabs-wrap { display: none !important; }
  html.lr-dm-menu-open .lr-dm-demo-hint { display: none !important; }
  /* Only the 62px topbar remains above the menu (tab strip is hidden). */
  html.lr-dm-menu-open .lr-dashboard-body {
    padding-top: calc(62px + env(safe-area-inset-top, 0px)) !important;
  }

  /* === v2.72.317 — tool morph (approved sample: tool-morph-sample.html).
     Tapping a tool card grows the CARD into the tool screen; the tool's
     page is fetched during the growth and its content swapped in — no
     full page load. Four-square reverse-shrinks into the card. The
     overlay is fixed, under the topbar (z 60), above everything else. */
  .lr-dm-morph {
    position: fixed;
    z-index: 55;
    background: var(--dm-surface2, #1a1a26);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    overflow: hidden;
    transition: top .46s cubic-bezier(.19,1,.22,1),
                left .46s cubic-bezier(.19,1,.22,1),
                width .46s cubic-bezier(.19,1,.22,1),
                height .46s cubic-bezier(.19,1,.22,1),
                border-radius .46s cubic-bezier(.19,1,.22,1),
                background-color .46s ease;
  }
  .lr-dm-morph::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--dm-gold, #d4a843), transparent);
    pointer-events: none;
  }
  .lr-dm-morph.grown { background: var(--dm-bg, #0a0a0f); border-color: transparent; }
  .lr-dm-morph.fade { opacity: 0; transition: opacity .22s ease; }
  /* the card's icon+label ride the growth, then hand off to the tool header */
  .lr-dm-morph-seed {
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    transition: opacity .2s ease .22s;
  }
  .lr-dm-morph.grown .lr-dm-morph-seed { opacity: 0; }
  /* reverse: the label stays put and only fades — a transform here reads
     as the label "adjusting" as the box lands (the sample's fixed glitch) */
  .lr-dm-morph.reverse .lr-dm-morph-seed { transition: opacity .25s ease; }
  /* skeleton shown inside the grown box while a slow tool is still loading */
  .lr-dm-morph-skel { display: none; padding: 18px 16px; }
  .lr-dm-morph.grown .lr-dm-morph-skel { display: block; }
  .lr-dm-morph-skel span {
    display: block;
    height: 14px;
    border-radius: 7px;
    margin-bottom: 12px;
    background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.05) 75%);
    background-size: 200% 100%;
    animation: lrDmSkel 1.2s linear infinite;
  }
  .lr-dm-morph-skel span:nth-child(1) { width: 55%; height: 22px; }
  .lr-dm-morph-skel span:nth-child(2) { width: 90%; }
  .lr-dm-morph-skel span:nth-child(3) { width: 80%; }
  .lr-dm-morph-skel span:nth-child(4) { width: 86%; height: 120px; border-radius: 12px; }
  @keyframes lrDmSkel {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .lr-dm-morph { transition: none; }
    .lr-dm-morph-skel span { animation: none; }
  }

  /* === Menu Head (player row: avatar + name block — no close button) === */
  .lr-dm-menu-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 4px;
  }
  .lr-dm-menu-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dm-gold), var(--dm-gold-dim));
    padding: 2px;
    flex-shrink: 0;
  }
  .lr-dm-menu-avatar-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--dm-surface3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--dm-white);
    text-transform: uppercase;
  }
  .lr-dm-menu-name {
    flex: 1;
    min-width: 0;
  }
  .lr-dm-menu-name-line {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px;
    letter-spacing: 0.08em;
    color: var(--dm-white);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .lr-dm-menu-name-tier {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    color: var(--dm-gold);
    margin-top: 2px;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* === Menu Body (page-flow content; page scroll is the menu scroll) === */
  .lr-dm-menu-body {
    padding: 0 0 12px;
  }

  /* === Tools row: label left, search right (2026-07-19) === */
  .lr-dm-tools-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px 8px;
  }
  .lr-dm-tools-row .lr-dm-tools-label { padding: 0; flex-shrink: 0; }
  .lr-dm-tool-search {
    -webkit-appearance: none;
    appearance: none;
    max-width: 55%;
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--dm-border-strong, rgba(255,255,255,0.12));
    border-radius: 999px;
    color: var(--dm-white, #f4f4f8);
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    padding: 7px 14px;
    outline: none;
    transition: border-color .15s ease;
  }
  .lr-dm-tool-search::placeholder { color: var(--dm-dim, #7a7a9a); }
  .lr-dm-tool-search:focus { border-color: rgba(212,168,67,0.55); }

  /* === Cat Row === */
  .lr-dm-drawer-cat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    color: var(--dm-white);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background .15s ease, border-color .15s ease;
  }
  .lr-dm-drawer-cat:active {
    background: rgba(212, 168, 67, 0.05);
  }
  .lr-dm-drawer-cat.active {
    background: rgba(212, 168, 67, 0.08);
    border-left-color: var(--dm-gold);
  }
  .lr-dm-drawer-cat.active .lr-dm-drawer-cat-label {
    color: var(--dm-gold);
  }

  /* Framed 36x36 icon tile (surface3 bg, 10px radius, 18px SVG) */
  .lr-dm-drawer-cat-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--dm-surface3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dm-dim);
    transition: color .15s ease;
  }
  .lr-dm-drawer-cat-icon svg {
    width: 18px;
    height: 18px;
    display: block;
  }
  .lr-dm-drawer-cat.active .lr-dm-drawer-cat-icon {
    color: var(--dm-gold);
  }

  /* Text column: label + "X sections" count */
  .lr-dm-drawer-cat-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .lr-dm-drawer-cat-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px;
    letter-spacing: 0.1em;
    color: var(--dm-white);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .lr-dm-drawer-cat-count {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    color: var(--dm-dim);
    margin-top: 2px;
  }

  .lr-dm-drawer-cat-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--dm-accent);
    color: var(--dm-white);
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
  }

  /* === Card Menu (v2.72.313) ==================================== */
  /* Section labels above the carousel and the tool grid */
  .lr-dm-cat-strip-label,
  .lr-dm-tools-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--dm-dim);
    text-transform: uppercase;
    padding: 14px 16px 8px;
  }

  /* Category cards — horizontal snap carousel */
  .lr-dm-cat-carousel {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 2px 16px 6px;
    /* keeps the first/last card off the screen edge when snapped */
    scroll-padding: 0 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .lr-dm-cat-carousel::-webkit-scrollbar { display: none; }
  .lr-dm-cat-card {
    flex: 0 0 128px;
    scroll-snap-align: start;
    background: var(--dm-surface2);
    border: 1px solid var(--dm-border);
    border-radius: var(--dm-radius);
    padding: 12px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-align: left;
    color: var(--dm-white);
    transition: border-color .2s ease, background .2s ease, transform .15s ease;
  }
  .lr-dm-cat-card:active { transform: scale(0.97); }
  .lr-dm-cat-card.active {
    background: linear-gradient(160deg, var(--dm-gold-glow), rgba(212,168,67,0.05));
    border-color: rgba(212,168,67,0.55);
  }
  .lr-dm-cat-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--dm-surface3);
    color: var(--dm-dim);
    margin-bottom: 10px;
    transition: color .2s ease, background .2s ease;
  }
  .lr-dm-cat-card-icon svg { width: 17px; height: 17px; display: block; }
  .lr-dm-cat-card.active .lr-dm-cat-card-icon {
    background: rgba(212,168,67,0.2);
    color: var(--dm-gold);
  }
  .lr-dm-cat-card-label {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 13px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .lr-dm-cat-card.active .lr-dm-cat-card-label { color: var(--dm-gold); }
  .lr-dm-cat-card-count {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    color: var(--dm-dim);
    margin-top: 2px;
  }
  .lr-dm-cat-card-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--dm-accent);
    color: var(--dm-white);
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
  }

  /* Tool cards — 2-col grid, staggered entrance on every reveal */
  .lr-dm-tool-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px 16px 8px;
  }
  .lr-dm-tool-grid[hidden] { display: none; }
  .lr-dm-tool-card {
    background: var(--dm-surface2);
    border: 1px solid var(--dm-border);
    border-radius: var(--dm-radius);
    padding: 14px;
    min-height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: var(--dm-white);
    will-change: transform, opacity;
    animation: lrDmCardIn .55s cubic-bezier(.19,1,.22,1) backwards;
    animation-delay: calc(var(--dm-i, 0) * 55ms);
    transition: transform .12s ease, border-color .15s ease;
  }
  .lr-dm-tool-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--dm-gold), transparent);
    pointer-events: none;
  }
  .lr-dm-tool-card:active { transform: scale(0.97); border-color: var(--dm-border-strong); }
  .lr-dm-tool-card.current { border-color: rgba(212,168,67,0.45); }
  @keyframes lrDmCardIn {
    from { opacity: 0; transform: translateY(18px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
  }
  .lr-dm-tool-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .lr-dm-tool-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--dm-surface3);
    color: var(--dm-gold);
  }
  .lr-dm-tool-card-icon svg { width: 18px; height: 18px; display: block; }
  .lr-dm-tool-card-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--dm-gold);
    color: #0a0a0f;
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
  }
  .lr-dm-tool-card-lock { display: inline-flex; color: var(--dm-dimmer); }
  .lr-dm-tool-card-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin-top: 10px;
    line-height: 1.15;
  }
  .lr-dm-tool-card.locked .lr-dm-tool-card-label { color: var(--dm-dim); }
  .lr-dm-tool-card.locked .lr-dm-tool-card-icon { color: var(--dm-dimmer); }

  @media (prefers-reduced-motion: reduce) {
    .lr-dm-tool-card { animation: none; }
  }

  .lr-dm-drawer-divider {
    height: 1px;
    background: var(--dm-border);
    margin: 8px 18px;
  }

  /* === Simple/Full — SUBTLE row just above Settings/Log Out (defect 1b) === */
  .lr-dm-mode-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px 10px;
  }
  .lr-dm-mode-row-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--dm-dim);
    text-transform: uppercase;
  }
  .lr-dm-mode-row .lr-mode-toggle--menu { margin-left: auto; padding: 2px; }
  .lr-dm-mode-row .lr-mode-btn {
    padding: 4px 10px;
    font-size: 11px;
  }
  /* "+N in Full" hint — plain small text, not the dashed block button */
  .lr-dm-mode-row .lr-dm-mode-row-more {
    display: inline-block;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 11px;
    font-weight: 600;
    color: var(--dm-dim);
    text-decoration: underline;
    cursor: pointer;
  }

  /* === Sport switcher — same subtle row pattern, sits with the mode row
     above Settings/Log Out (v2.72.315, fix 3). 2+ sports only. === */
  .lr-dm-sport-row { padding: 10px 16px 4px; }
  .lr-dm-sport-row-select {
    margin-left: auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: rgba(255, 255, 255, 0.06);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 20 20' fill='%23d4af37'><path d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: var(--dm-white);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 28px 5px 12px;
    cursor: pointer;
    outline: none;
    max-width: 60%;
  }
  .lr-dm-sport-row-select option { background-color: #0f172a; color: #fff; }

  /* === Foot rows — Settings / Log Out side by side (sample model) === */
  .lr-dm-menu-foot {
    display: flex;
    gap: 10px;
    padding: 4px 16px 12px;
  }
  .lr-dm-foot-row {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: var(--dm-surface);
    border: 1px solid var(--dm-border);
    border-radius: var(--dm-radius-sm);
    color: var(--dm-dim);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease;
  }
  .lr-dm-foot-row svg { width: 15px; height: 15px; flex-shrink: 0; }
  .lr-dm-foot-row:active { border-color: var(--dm-border-strong); color: var(--dm-white); }
  .lr-dm-foot-row.active { color: var(--dm-gold); border-color: rgba(212,168,67,0.4); }

  /* === "How this works" demo-hint callout === */
  .lr-dm-demo-hint {
    display: block;
    position: relative;
    margin: 16px 14px 0;
    padding: 12px 40px 12px 14px;
    background: rgba(74, 143, 255, 0.08);
    border: 1px solid rgba(74, 143, 255, 0.2);
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: var(--dm-accent);
  }
  .lr-dm-demo-hint[hidden] { display: none; }
  .lr-dm-demo-hint b { color: #93c5fd; }
  .lr-dm-demo-hint-body { margin: 0; }
  .lr-dm-demo-hint-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--dm-accent);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
  }
  .lr-dm-demo-hint-close svg {
    width: 14px;
    height: 14px;
    display: block;
  }
  .lr-dm-demo-hint-close:active {
    background: rgba(74, 143, 255, 0.12);
  }
  .lr-dm-demo-hint-forever {
    display: inline-block;
    margin-top: 8px;
    padding: 0;
    border: none;
    background: transparent;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #93c5fd;
    text-decoration: underline;
    cursor: pointer;
  }

  /* === Mobile Overview Hub (tile grid + section-card) === */
  .lr-dm-mobile-only { display: block; }
  .lr-dm-overview-hub { padding: 0; }

  /* Public profile discovery CTA — shown at the very top of the Overview hub */
  .lr-dm-public-profile-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(212,175,55,0.14), rgba(212,175,55,0.05));
    border: 1px solid rgba(212,175,55,0.38);
    border-radius: var(--dm-radius);
    text-decoration: none;
    color: var(--dm-white);
    transition: transform .15s ease, border-color .15s ease;
  }
  .lr-dm-public-profile-cta:active {
    transform: scale(0.98);
    border-color: rgba(212,175,55,0.6);
  }
  .lr-dm-public-profile-cta-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(212,175,55,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d4af37;
  }
  .lr-dm-public-profile-cta-text {
    flex: 1;
    min-width: 0;
  }
  .lr-dm-public-profile-cta-title {
    font-size: 14px;
    font-weight: 700;
    color: #d4af37;
    margin-bottom: 2px;
    line-height: 1.25;
  }
  .lr-dm-public-profile-cta-sub {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    line-height: 1.25;
  }
  .lr-dm-public-profile-cta-chevron {
    flex-shrink: 0;
    color: #d4af37;
  }

  .lr-dm-tile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
  }
  .lr-dm-tile {
    background: var(--dm-surface2);
    border: 1px solid var(--dm-border);
    border-radius: var(--dm-radius);
    padding: 14px;
    position: relative;
    overflow: hidden;
  }
  .lr-dm-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--dm-gold), transparent);
    pointer-events: none;
  }
  .lr-dm-tile-wide { grid-column: span 2; }
  .lr-dm-tile-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--dm-gold);
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .lr-dm-tile-value {
    font-family: 'DM Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--dm-white);
    line-height: 1.2;
  }
  .lr-dm-tile-value-lg {
    font-size: 16px;
    font-weight: 600;
  }
  .lr-dm-tile-sub {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    color: var(--dm-dim);
    margin-top: 4px;
    line-height: 1.4;
  }

  .lr-dm-section-card {
    background: var(--dm-surface2);
    border: 1px solid var(--dm-border);
    border-radius: var(--dm-radius);
    padding: 20px;
    position: relative;
    overflow: hidden;
  }
  .lr-dm-section-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--dm-gold), transparent);
    pointer-events: none;
  }
  .lr-dm-section-eyebrow {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--dm-gold);
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .lr-dm-section-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    letter-spacing: 0.08em;
    color: var(--dm-white);
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .lr-dm-section-desc {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: var(--dm-dim);
    line-height: 1.6;
  }

  /* === v2.72.317 — the approved AC entry's remaining pieces (mobile):
     Game|Season mode pills + the arc gauge hero. Injected by
     stat-steppers.js; same cards, same fields, same saves. === */
  .lr-entry-mode {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 2px 0 12px;
  }
  .lr-entry-mode-pill {
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--dm-surface2, #1a1a26);
    border: 1px solid var(--dm-border, rgba(255,255,255,0.07));
    color: var(--dm-dim, #7a7a9a);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .25s ease, background-color .25s ease, border-color .25s ease;
  }
  .lr-entry-mode-pill.active {
    background: linear-gradient(160deg, rgba(212,168,67,0.2), rgba(212,168,67,0.06));
    border-color: rgba(212,168,67,0.55);
    color: var(--dm-gold, #d4a843);
  }
  .lr-entry-hero {
    position: relative;
    width: 210px;
    margin: 4px auto 0;
    text-align: center;
  }
  .lr-entry-hero svg { width: 210px; height: 118px; display: block; }
  .lr-entry-arc-track { stroke: var(--dm-surface3, #222232); }
  .lr-entry-arc-fill {
    stroke: var(--dm-gold, #d4a843);
    transition: stroke-dashoffset .6s cubic-bezier(.19,1,.22,1);
  }
  .lr-entry-hero-line {
    position: absolute;
    left: 0; right: 0; top: 46px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 34px;
    letter-spacing: 0.06em;
    color: var(--dm-white, #f4f4f8);
  }
  .lr-entry-hero-sub {
    margin-top: -6px;
    font-size: 11px;
    color: var(--dm-dim, #7a7a9a);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  @media (prefers-reduced-motion: reduce) {
    .lr-entry-arc-fill { transition: none; }
  }

  /* === Stat steppers — mobile layout (v2.72.313) ================== */
  /* The wrapped input becomes the big center value between − / +.
     Tapping the input still types (it keeps name/id/min/max — the form
     submit reads the same field as before). */
  .lr-stepper-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .lr-stepper-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--dm-border-strong, rgba(255,255,255,0.12));
    background: var(--dm-surface3, #222232);
    color: #f4f4f8;
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    transition: transform .1s ease, background .15s ease, border-color .15s ease;
  }
  .lr-stepper-btn:active {
    transform: scale(0.88);
    background: rgba(212,168,67,0.18);
    border-color: rgba(212,168,67,0.5);
  }
  .lr-stepper-plus { color: var(--dm-gold, #d4a843); }
  .lr-stepper-wrap input[type="number"] {
    flex: 1;
    min-width: 0;
    width: auto !important;
    text-align: center;
    font-size: 20px !important;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .lr-stepper-wrap input[type="number"].lr-stepper-tick {
    animation: lrStepperTick .28s cubic-bezier(.19,1,.22,1);
  }
  @keyframes lrStepperTick {
    0%   { transform: translateY(-6px) scale(1.12); color: var(--dm-gold, #d4a843); }
    100% { transform: translateY(0)    scale(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .lr-stepper-wrap input[type="number"].lr-stepper-tick { animation: none; }
  }
  /* 2026-07-08 — stat entry was clipping on phones (page did NOT scroll — the
     stepper row + two-column grid rendered wider than their card, cutting off
     the right "+"). Let flex/grid children shrink, cap widths to the card, and
     stack the entry to a single column on phones. */
  .lr-stats-form-grid, .lr-stats-grid { grid-template-columns: 1fr !important; min-width: 0; }
  .lr-stats-form-grid > *, .lr-stats-grid > * { min-width: 0; max-width: 100%; }
  .lr-stepper-wrap { min-width: 0; max-width: 100%; }
  .lr-stepper-wrap > * { min-width: 0; }
  .lr-stepper-wrap input[type="number"] { min-width: 0 !important; flex: 1 1 0 !important; }
  .lr-stepper-hint {
    display: block;
    text-align: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 10.5px;
    color: var(--dm-dimmer, #3a3a55);
    letter-spacing: 0.04em;
    margin: 0 0 10px;
  }

  /* Season-colored accent stripes (Christian, from the approved mockup:
     "the accent stripe, on each container, when in season stat entry,
     to adopt the color of the team selected"). --lr-season-acc is set
     on .lr-season-glow-wrap (server-side + on season switch). */
  .lr-dash-main .lr-season-glow-wrap .lr-card::before,
  .lr-dash-main .lr-season-glow-wrap .lr-stat-card::before {
    background: linear-gradient(90deg, var(--lr-season-acc, var(--dm-gold)), transparent);
  }

  /* (v2.72.314 — no drawer, no scroll lock: the menu lives in normal page
     flow, so the page scroll IS the menu scroll.) */

  /* === Mobile Aesthetic Layer ============================================
     Retag legacy desktop dashboard components inside .lr-dash-main so they
     match the Layout A2 section-card / tile look. Scoped to 768px only so
     desktop styles are unchanged. */

  /* Hide the desktop Overview section on mobile — mobile uses its own hub
     partial rendered by dashboard-mobile-overview.php. */
  .lr-dash-main > .lr-overview-section,
  .lr-dash-main .lr-section.lr-overview-section { display: none !important; }

  /* Generic card retag: section-card look (surface2 + gold gradient stripe) */
  .lr-dash-main .lr-card,
  .lr-dash-main .lr-stat-card {
    background: var(--dm-surface2) !important;
    border: 1px solid var(--dm-border) !important;
    border-radius: var(--dm-radius) !important;
    position: relative;
    overflow: hidden;
  }
  .lr-dash-main .lr-card::before,
  .lr-dash-main .lr-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--dm-gold), transparent);
    pointer-events: none;
  }

  .lr-dash-main .lr-section-header {
    padding: 0;
    margin-bottom: 12px;
    border-bottom: 0;
    transform: none; /* Cancel desktop -130px sidebar offset */
  }
  .lr-dash-main .lr-section-header + * {
    margin-top: 0;
  }
  .lr-dash-main .lr-mp-tabs,
  .lr-dash-main .lr-section-tabs,
  .lr-dash-main .lr-message-tabs,
  .lr-dash-main .lr-rr-tabs {
    margin-bottom: 14px;
  }
  .lr-dash-main .lr-section-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    letter-spacing: 0.08em;
    color: var(--dm-white);
    text-transform: uppercase;
    margin: 0 0 6px;
  }
  .lr-dash-main .lr-section-subtitle,
  .lr-dash-main .lr-section-description {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: var(--dm-dim);
    line-height: 1.5;
  }
  .lr-dash-main .lr-card-header {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--dm-border);
    margin-bottom: 14px;
  }
  .lr-dash-main .lr-card-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px;
    letter-spacing: 0.08em;
    color: var(--dm-white);
    text-transform: uppercase;
  }
  .lr-dash-main .lr-btn,
  .lr-dash-main .lr-btn-primary {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 8px;
  }
}

/* === Very small screens (iPhone SE width) === */
@media (max-width: 380px) {
  .lr-dm-title { font-size: 15px; }
  .lr-dm-tab { font-size: 12px; margin: 0 6px; }
  .lr-dm-demo-hint { margin: 14px 12px 0; padding: 10px 36px 10px 12px; font-size: 11px; }
}

/* ======================================================================
   DESKTOP CARD SHELL — approved sample: card-menu-desktop-optionC.html
   (Christian 2026-07-18, Option C revised: "work area moved up, using
   the bottom 3/4 of the page" · "sidebar able to be scrolled
   independently" · "I also dont need the ugly scroll bar" · "This is a
   MUCH better format" · "Im happy w it.")

   html.lr-dm-desk is set ONLY on the player dashboard at >=1000px (inline
   script in dashboard-mobile.php pre-paint + matchMedia in
   dashboard-mobile.js). The scout/trainer/school shells never get the
   class, so their desktop layouts are untouched. Between 769-999px
   neither shell applies — the legacy desktop layout renders, as before.

   .lr-work / .lr-rail / .lr-pane wrappers are built by dashboard-mobile.js
   (mirrors the sample's appended script); display:contents below 1000px
   keeps them layout-neutral if a window is resized down. ================ */
.lr-work, .lr-rail, .lr-pane { display: contents; }

@media (min-width: 1000px) {

  /* === Token scope (same values as the phone block; custom properties
     inherit through the display:contents shell) === */
  html.lr-dm-desk .lr-dm-shell {
    --dm-bg: #0a0a0f;
    --dm-surface: #12121a;
    --dm-surface2: #1a1a26;
    --dm-surface3: #222232;
    --dm-border: rgba(255,255,255,0.07);
    --dm-border-strong: rgba(255,255,255,0.12);
    --dm-gold: #d4a843;
    --dm-gold-dim: #a07830;
    --dm-gold-glow: rgba(212,168,67,0.15);
    --dm-white: #f4f4f8;
    --dm-dim: #7a7a9a;
    --dm-dimmer: #3a3a55;
    --dm-accent: #4a8fff;
    --dm-radius: 14px;
    --dm-radius-sm: 9px;
    font-family: 'DM Sans', sans-serif;
    color: var(--dm-white);
  }
  html.lr-dm-desk .lr-dm-shell *,
  html.lr-dm-desk .lr-dm-shell *::before,
  html.lr-dm-desk .lr-dm-shell *::after { box-sizing: border-box; }

  /* === Legacy desktop chrome off — the card shell drives the page ===
     #sidebar (the aside's id) is REQUIRED, not belt-and-suspenders:
     dashboard-template.php:235 force-shows .lr-dash-sidebar with
     `body.fsa-dashboard-template .lr-dash-sidebar{display:flex!important}`
     (specificity 0,2,1) to survive theme CSS — a bare class hide loses to
     it and the sidebar then swallows the column and pushes the card menu
     off-screen (staging black-page bug, 2026-07-18). The phone chrome wins
     the same fight via the #sidebar document.write in dashboard.php:1145;
     this is the desktop equivalent. */
  html.lr-dm-desk .header-f-wrapper,
  html.lr-dm-desk .lr-dash-header,
  html.lr-dm-desk #sidebar,
  html.lr-dm-desk .lr-dash-sidebar,
  html.lr-dm-desk .lr-sidebar,
  html.lr-dm-desk .lr-sidebar-overlay,
  html.lr-dm-desk body.fsa-dashboard-template .lr-dash-sidebar { display: none !important; }

  /* === One fixed-height column: identity strip, then the work area ===
     (!important mirrors the phone block — scout/recruiting sheets load on
     multi-role accounts and fight these same properties.) */
  html.lr-dm-desk .lr-dashboard { height: 100vh; overflow: hidden; }
  html.lr-dm-desk .lr-dashboard-body {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh;
    min-height: 0;
    overflow: hidden;
    padding: 0 !important;
    background: #0a0a0f !important;
  }

  /* === Identity strip: topbar in flow (not fixed like the phone) === */
  html.lr-dm-desk .lr-dm-topbar {
    position: static;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    padding: 12px 18px;
    background: rgba(10, 10, 15, 0.94);
    border-bottom: 1px solid var(--dm-border);
  }
  html.lr-dm-desk .lr-dm-menu-btn,
  html.lr-dm-desk .lr-dm-profile-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--dm-surface2);
    border: 1px solid var(--dm-border);
    border-radius: 10px;
    color: var(--dm-white);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
    text-decoration: none;
  }
  html.lr-dm-desk .lr-dm-menu-btn { width: 38px; height: 38px; }
  html.lr-dm-desk .lr-dm-profile-btn { padding: 0 12px; min-height: 38px; gap: 6px; }
  html.lr-dm-desk .lr-dm-profile-btn-label {
    font-size: 12px; font-weight: 600; white-space: nowrap; letter-spacing: 0.2px;
  }
  html.lr-dm-desk .lr-dm-menu-btn:hover,
  html.lr-dm-desk .lr-dm-profile-btn:hover {
    background: var(--dm-surface3);
    border-color: var(--dm-border-strong);
  }
  html.lr-dm-desk .lr-dm-title-wrap {
    flex: 1; min-width: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    line-height: 1.05; padding: 0 8px; text-align: center;
  }
  html.lr-dm-desk .lr-dm-eyebrow {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 11px; letter-spacing: 0.14em;
    color: var(--dm-dim); text-transform: uppercase;
  }
  html.lr-dm-desk .lr-dm-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 17px; letter-spacing: 0.14em;
    color: var(--dm-gold); margin: 1px 0 0; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }

  /* === Menu container is ALWAYS visible on desktop — its head row is the
     identity part of the strip, which "hugs content in EVERY state"
     (sample comment; his no-wasted-band fix). Only the menu BODY (the
     work row) swaps with the tool. Flex `order` puts the identity row
     above the sister tabs regardless of DOM order. === */
  html.lr-dm-desk .lr-dm-topbar { order: 0; }
  html.lr-dm-desk .lr-dm-menu { order: 1; }
  html.lr-dm-desk .lr-dm-tabs-wrap { order: 2; }
  html.lr-dm-desk .lr-dash-main { order: 3; }
  html.lr-dm-desk .lr-dm-menu {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
  }
  /* tool state: identity head only — the work row hides */
  html.lr-dm-desk:not(.lr-dm-menu-open) .lr-dm-menu-body { display: none; }
  /* menu state: the work row IS the screen, filling the bottom ~3/4 */
  html.lr-dm-desk.lr-dm-menu-open .lr-dm-menu {
    flex: 1;
    min-height: 0;
    animation: lrDmViewIn .5s cubic-bezier(.19,1,.22,1);
  }
  html.lr-dm-desk.lr-dm-menu-open .lr-dash-main { display: none !important; }
  html.lr-dm-desk.lr-dm-menu-open .lr-dm-tabs-wrap { display: none !important; }

  /* Compact identity strip — hugs content in EVERY state (his fix:
     no wasted empty band at the top of the default state). */
  html.lr-dm-desk .lr-dm-menu-head {
    display: flex; align-items: center; gap: 12px;
    flex-shrink: 0;
    padding: 8px 18px 10px;
  }
  html.lr-dm-desk .lr-dm-menu-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(135deg, var(--dm-gold), var(--dm-gold-dim));
    padding: 2px; flex-shrink: 0;
  }
  html.lr-dm-desk .lr-dm-menu-avatar-inner {
    width: 100%; height: 100%; border-radius: 50%;
    background: var(--dm-surface3);
    display: flex; align-items: center; justify-content: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px; font-weight: 700;
    color: var(--dm-white); text-transform: uppercase;
  }
  html.lr-dm-desk .lr-dm-menu-name { flex: 1; min-width: 0; }
  html.lr-dm-desk .lr-dm-menu-name-line {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px; letter-spacing: 0.08em;
    color: var(--dm-white); text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.lr-dm-desk .lr-dm-menu-name-tier {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px; color: var(--dm-gold); margin-top: 2px;
    letter-spacing: 0.05em; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }

  /* === Work row fills ALL remaining height (the bottom ~3/4) === */
  html.lr-dm-desk .lr-dm-menu-body {
    flex: 1; min-height: 0;
    display: flex;
    padding: 0;
  }
  html.lr-dm-desk .lr-work {
    display: flex;
    flex: 1; min-height: 0; min-width: 0;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  /* Icon RAIL — independent scroll (his "sidebar able to be scrolled
     independently") */
  html.lr-dm-desk .lr-rail {
    display: block;
    width: 72px; flex-shrink: 0;
    border-right: 1px solid rgba(255,255,255,0.08);
    padding: 10px 0 20px;
    overflow-y: auto;
  }
  html.lr-dm-desk .lr-pane {
    display: block;
    flex: 1; min-width: 0;
    overflow-y: auto;
  }
  /* Invisible scrollbars (his "I also dont need the ugly scroll bar") —
     scrolling still works; the bar never draws. Every independently-
     scrolling container. */
  html.lr-dm-desk .lr-rail,
  html.lr-dm-desk .lr-pane,
  html.lr-dm-desk .lr-dash-main {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  html.lr-dm-desk .lr-rail::-webkit-scrollbar,
  html.lr-dm-desk .lr-pane::-webkit-scrollbar,
  html.lr-dm-desk .lr-dash-main::-webkit-scrollbar { display: none; }

  /* Rail cards: the same category cards, vertical + icon-only (sample:
     names/counts hidden, names appear in the pane title). flex-basis is
     the card height in a column rail — his "a little less tall" = 100px. */
  html.lr-dm-desk .lr-dm-cat-strip-label { display: none; }
  html.lr-dm-desk .lr-dm-cat-carousel {
    display: flex; flex-direction: column;
    overflow: visible; gap: 6px;
    padding: 2px 10px 6px;
  }
  html.lr-dm-desk .lr-dm-cat-card {
    min-width: 0; width: 52px; flex: 0 0 100px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--dm-surface2);
    border: 1px solid var(--dm-border);
    border-radius: var(--dm-radius);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    color: var(--dm-white);
    transition: border-color .2s ease, background .2s ease, transform .15s ease;
  }
  html.lr-dm-desk .lr-dm-cat-card:hover { border-color: var(--dm-border-strong); }
  html.lr-dm-desk .lr-dm-cat-card.active {
    background: linear-gradient(160deg, var(--dm-gold-glow), rgba(212,168,67,0.05));
    border-color: rgba(212,168,67,0.55);
  }
  html.lr-dm-desk .lr-dm-cat-card-label,
  html.lr-dm-desk .lr-dm-cat-card-count { display: none; }
  html.lr-dm-desk .lr-dm-cat-card-icon {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 10px;
    background: var(--dm-surface3);
    color: var(--dm-dim);
    margin: 0;
    transition: color .2s ease, background .2s ease;
  }
  html.lr-dm-desk .lr-dm-cat-card-icon svg { width: 17px; height: 17px; display: block; }
  html.lr-dm-desk .lr-dm-cat-card.active .lr-dm-cat-card-icon {
    background: rgba(212,168,67,0.2);
    color: var(--dm-gold);
  }
  html.lr-dm-desk .lr-dm-cat-card-badge {
    position: absolute; top: 6px; right: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px;
    background: var(--dm-accent);
    color: var(--dm-white);
    font-family: 'DM Sans', sans-serif;
    font-size: 10px; font-weight: 700;
  }

  /* Pane: label + search row + tool cards 4-across (sample diff).
     Label bumped for desktop (Christian 2026-07-19: "The category font
     header (Recruiting Tools — 6 tools) is too small for desktop"). */
  html.lr-dm-desk .lr-dm-tools-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 8px;
  }
  html.lr-dm-desk .lr-dm-tools-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 19px; letter-spacing: 0.12em;
    color: var(--dm-white); text-transform: uppercase;
    padding: 0;
  }
  html.lr-dm-desk .lr-dm-tool-search {
    -webkit-appearance: none;
    appearance: none;
    width: 280px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--dm-border-strong, rgba(255,255,255,0.12));
    border-radius: 999px;
    color: var(--dm-white, #f4f4f8);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    padding: 9px 16px;
    outline: none;
    transition: border-color .15s ease;
  }
  html.lr-dm-desk .lr-dm-tool-search::placeholder { color: var(--dm-dim, #7a7a9a); }
  html.lr-dm-desk .lr-dm-tool-search:focus { border-color: rgba(212,168,67,0.55); }
  html.lr-dm-desk .lr-dm-tool-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 12px 16px 8px;
  }
  html.lr-dm-desk .lr-dm-tool-grid[hidden] { display: none; }
  html.lr-dm-desk .lr-dm-tool-card {
    background: var(--dm-surface2);
    border: 1px solid var(--dm-border);
    border-radius: var(--dm-radius);
    padding: 14px;
    min-height: 96px;
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative; overflow: hidden;
    text-decoration: none;
    color: var(--dm-white);
    will-change: transform, opacity;
    animation: lrDmCardIn .55s cubic-bezier(.19,1,.22,1) backwards;
    animation-delay: calc(var(--dm-i, 0) * 55ms);
    transition: transform .12s ease, border-color .15s ease;
  }
  html.lr-dm-desk .lr-dm-tool-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--dm-gold), transparent);
    pointer-events: none;
  }
  html.lr-dm-desk .lr-dm-tool-card:hover { border-color: var(--dm-border-strong); }
  html.lr-dm-desk .lr-dm-tool-card.current { border-color: rgba(212,168,67,0.45); }
  html.lr-dm-desk .lr-dm-tool-card-top {
    display: flex; align-items: flex-start; justify-content: space-between;
  }
  html.lr-dm-desk .lr-dm-tool-card-icon {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--dm-surface3);
    color: var(--dm-gold);
  }
  html.lr-dm-desk .lr-dm-tool-card-icon svg { width: 18px; height: 18px; display: block; }
  html.lr-dm-desk .lr-dm-tool-card-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px;
    background: var(--dm-gold);
    color: #0a0a0f;
    font-family: 'DM Sans', sans-serif;
    font-size: 10px; font-weight: 700;
  }
  html.lr-dm-desk .lr-dm-tool-card-lock { display: inline-flex; color: var(--dm-dimmer); }
  html.lr-dm-desk .lr-dm-tool-card-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px; letter-spacing: 0.07em; text-transform: uppercase;
    margin-top: 10px; line-height: 1.15;
  }
  html.lr-dm-desk .lr-dm-tool-card.locked .lr-dm-tool-card-label { color: var(--dm-dim); }
  html.lr-dm-desk .lr-dm-tool-card.locked .lr-dm-tool-card-icon { color: var(--dm-dimmer); }

  /* Pane footer pieces (team rows, divider, sport/mode rows, foot rows) */
  html.lr-dm-desk .lr-dm-drawer-cat {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px;
    color: var(--dm-white); text-decoration: none;
    border-left: 3px solid transparent;
    transition: background .15s ease, border-color .15s ease;
  }
  html.lr-dm-desk .lr-dm-drawer-cat-icon {
    width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px;
    background: var(--dm-surface3);
    display: flex; align-items: center; justify-content: center;
    color: var(--dm-dim);
  }
  html.lr-dm-desk .lr-dm-drawer-cat-icon svg { width: 18px; height: 18px; display: block; }
  html.lr-dm-desk .lr-dm-drawer-cat-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  html.lr-dm-desk .lr-dm-drawer-cat-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px; letter-spacing: 0.1em;
    color: var(--dm-white); text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.lr-dm-desk .lr-dm-drawer-divider {
    height: 1px; background: var(--dm-border); margin: 8px 18px;
  }
  html.lr-dm-desk .lr-dm-mode-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 16px 10px;
  }
  html.lr-dm-desk .lr-dm-mode-row-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 11px; letter-spacing: 0.12em;
    color: var(--dm-dim); text-transform: uppercase;
  }
  html.lr-dm-desk .lr-dm-mode-row .lr-mode-toggle--menu { margin-left: auto; padding: 2px; }
  html.lr-dm-desk .lr-dm-mode-row .lr-mode-btn { padding: 4px 10px; font-size: 11px; }
  html.lr-dm-desk .lr-dm-sport-row { padding: 10px 16px 4px; }
  html.lr-dm-desk .lr-dm-sport-row-select {
    margin-left: auto;
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-color: rgba(255, 255, 255, 0.06);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 20 20' fill='%23d4af37'><path d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: var(--dm-white);
    font-size: 12px; font-weight: 600;
    padding: 5px 28px 5px 12px;
    cursor: pointer; outline: none;
  }
  html.lr-dm-desk .lr-dm-menu-foot {
    display: flex; gap: 10px;
    padding: 4px 16px 20px;
  }
  html.lr-dm-desk .lr-dm-foot-row {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px;
    background: var(--dm-surface);
    border: 1px solid var(--dm-border);
    border-radius: var(--dm-radius-sm);
    color: var(--dm-dim);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease;
  }
  html.lr-dm-desk .lr-dm-foot-row svg { width: 15px; height: 15px; flex-shrink: 0; }
  html.lr-dm-desk .lr-dm-foot-row:hover { border-color: var(--dm-border-strong); color: var(--dm-white); }
  html.lr-dm-desk .lr-dm-foot-row.active { color: var(--dm-gold); border-color: rgba(212,168,67,0.4); }

  /* === Tool-open state: sister tabs + the tool fill the work area ===
     (his fix: the opened tool uses the bottom 3/4, not half) */
  html.lr-dm-desk .lr-dm-tabs-wrap {
    display: block;
    position: static;
    flex-shrink: 0;
    background: rgba(10, 10, 15, 0.94);
    /* top seam sits where the menu state's .lr-work border-top sits —
       the strip boundary reads identically in both states */
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid var(--dm-border);
  }
  html.lr-dm-desk .lr-dm-tabs {
    display: flex; gap: 4px;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -ms-overflow-style: none;
    padding: 0 12px;
  }
  html.lr-dm-desk .lr-dm-tabs::-webkit-scrollbar { display: none; }
  html.lr-dm-desk .lr-dm-tab {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 12px 4px 13px;
    margin: 0 8px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--dm-dim);
    text-decoration: none; white-space: nowrap;
    transition: color .15s ease;
  }
  html.lr-dm-desk .lr-dm-tab::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--dm-gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .2s ease;
  }
  html.lr-dm-desk .lr-dm-tab:hover { color: var(--dm-white); }
  html.lr-dm-desk .lr-dm-tab.active { color: var(--dm-gold); }
  html.lr-dm-desk .lr-dm-tab.active::after { transform: scaleX(1); }
  html.lr-dm-desk .lr-dm-tab.locked { color: var(--dm-dimmer); }
  html.lr-dm-desk .lr-dm-tab-icon {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  html.lr-dm-desk .lr-dm-tab-icon svg { width: 14px; height: 14px; display: block; opacity: 0.7; }
  html.lr-dm-desk .lr-dm-tab.active .lr-dm-tab-icon svg { opacity: 1; }
  html.lr-dm-desk .lr-dm-tab-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px;
    background: var(--dm-gold);
    color: #0a0a0f;
    font-family: 'DM Sans', sans-serif;
    font-size: 10px; font-weight: 700; letter-spacing: 0;
  }
  html.lr-dm-desk .lr-dm-tab-lock { display: inline-flex; color: var(--dm-dimmer); }

  html.lr-dm-desk .lr-dash-main {
    flex: 1; min-height: 0;
    overflow-y: auto;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 20px 24px 60px !important;
    background: var(--dm-bg, #0a0a0f);
    animation: lrDmViewIn .5s cubic-bezier(.19,1,.22,1);
  }

  /* Section headers: scout-dashboard.css shifts them 130px left to
     visually center against the old sidebar. No sidebar here — cancel it
     (the phone block already does; this is the desktop equivalent). */
  html.lr-dm-desk .lr-dash-main .lr-section-header { transform: none; }

  /* Coach welcome strip on the desktop menu screen keeps the same slim
     look as the phone (rules below, token-scoped so they work in both). */

  /* === AC-style stat entry on desktop (Christian 2026-07-19: Stats must
     keep "what you showed me in the sample" — the Option C sample's Stats
     screen IS the AC entry). Same rules as the phone block, scoped to the
     desktop shell; stat-steppers.js builds the same markup at both widths. */
  html.lr-dm-desk .lr-entry-mode {
    display: flex; gap: 8px; justify-content: center; padding: 2px 0 12px;
  }
  html.lr-dm-desk .lr-entry-mode-pill {
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--dm-surface2, #1a1a26);
    border: 1px solid var(--dm-border, rgba(255,255,255,0.07));
    color: var(--dm-dim, #7a7a9a);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px; letter-spacing: 0.09em; text-transform: uppercase;
    cursor: pointer;
    transition: color .25s ease, background-color .25s ease, border-color .25s ease;
  }
  html.lr-dm-desk .lr-entry-mode-pill.active {
    background: linear-gradient(160deg, rgba(212,168,67,0.2), rgba(212,168,67,0.06));
    border-color: rgba(212,168,67,0.55);
    color: var(--dm-gold, #d4a843);
  }
  html.lr-dm-desk .lr-entry-hero {
    position: relative; width: 210px; margin: 4px auto 0; text-align: center;
  }
  html.lr-dm-desk .lr-entry-hero svg { width: 210px; height: 118px; display: block; }
  html.lr-dm-desk .lr-entry-arc-track { stroke: var(--dm-surface3, #222232); }
  html.lr-dm-desk .lr-entry-arc-fill {
    stroke: var(--dm-gold, #d4a843);
    transition: stroke-dashoffset .6s cubic-bezier(.19,1,.22,1);
  }
  html.lr-dm-desk .lr-entry-hero-line {
    position: absolute; left: 0; right: 0; top: 46px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 34px; letter-spacing: 0.06em;
    color: var(--dm-white, #f4f4f8);
  }
  html.lr-dm-desk .lr-entry-hero-sub {
    margin-top: -6px; font-size: 11px;
    color: var(--dm-dim, #7a7a9a);
    letter-spacing: 0.08em; text-transform: uppercase;
  }
  html.lr-dm-desk .lr-stepper-wrap { display: flex; align-items: center; gap: 10px; }
  html.lr-dm-desk .lr-stepper-btn {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--dm-border-strong, rgba(255,255,255,0.12));
    background: var(--dm-surface3, #222232);
    color: #f4f4f8;
    font-size: 20px; font-weight: 500; line-height: 1;
    cursor: pointer; padding: 0; user-select: none;
    transition: transform .1s ease, background .15s ease, border-color .15s ease;
  }
  html.lr-dm-desk .lr-stepper-btn:hover {
    background: rgba(212,168,67,0.18);
    border-color: rgba(212,168,67,0.5);
  }
  html.lr-dm-desk .lr-stepper-plus { color: var(--dm-gold, #d4a843); }
  html.lr-dm-desk .lr-stepper-wrap input[type="number"] {
    flex: 1; min-width: 0; width: auto !important;
    text-align: center;
    font-size: 18px !important; font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  html.lr-dm-desk .lr-stepper-hint {
    display: block; text-align: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 10.5px;
    color: var(--dm-dimmer, #3a3a55);
    letter-spacing: 0.04em; margin: 0 0 10px;
  }

  /* Keyframes restated for this block (identical to the phone block's —
     harmless duplicates; guarantees availability at desktop widths). */
  @keyframes lrDmViewIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes lrDmCardIn {
    from { opacity: 0; transform: translateY(18px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    html.lr-dm-desk.lr-dm-menu-open .lr-dm-menu,
    html.lr-dm-desk .lr-dash-main,
    html.lr-dm-desk .lr-dm-tool-card { animation: none; }
  }
}

/* === Coach welcome strip (menu screen) ==============================
   Approved plan 2026-07-20: one slim line under the name, expands to the
   getting-started checklist, X dismisses permanently. Scoped under
   .lr-dm-menu and styled with the --dm-* tokens so the same rules serve
   the phone and desktop shells. */
.lr-dm-menu .lr-dm-welcome-strip {
  margin: 10px 16px 0;
  background: var(--dm-surface, #12121a);
  border: 1px solid var(--dm-border, rgba(255,255,255,0.07));
  border-left: 3px solid var(--dm-gold, #d4a843);
  border-radius: var(--dm-radius-sm, 9px);
  overflow: hidden;
}
.lr-dm-menu .lr-dm-welcome-row { display: flex; align-items: stretch; }
.lr-dm-menu .lr-dm-welcome-toggle {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: none; border: 0; cursor: pointer;
  color: var(--dm-white, #f4f4f8);
  font-size: 13px; text-align: left;
}
.lr-dm-menu .lr-dm-welcome-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lr-dm-menu .lr-dm-welcome-chev {
  flex-shrink: 0; color: var(--dm-dim, #7a7a9a);
  transition: transform 0.25s ease;
}
.lr-dm-menu .lr-dm-welcome-strip.open .lr-dm-welcome-chev { transform: rotate(180deg); }
.lr-dm-menu .lr-dm-welcome-x {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 40px;
  background: none; border: 0; border-left: 1px solid var(--dm-border, rgba(255,255,255,0.07));
  color: var(--dm-dim, #7a7a9a); cursor: pointer;
}
.lr-dm-menu .lr-dm-welcome-x:hover { color: var(--dm-white, #f4f4f8); }
.lr-dm-menu .lr-dm-welcome-body {
  border-top: 1px solid var(--dm-border, rgba(255,255,255,0.07));
  padding: 6px 0;
}
.lr-dm-menu .lr-dm-welcome-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  color: var(--dm-white, #f4f4f8);
  font-size: 13px; text-decoration: none;
}
.lr-dm-menu .lr-dm-welcome-item:hover { background: var(--dm-surface2, #1a1a26); }
.lr-dm-menu .lr-dm-welcome-item.done { color: var(--dm-dim, #7a7a9a); }
.lr-dm-menu .lr-dm-welcome-dot {
  flex-shrink: 0;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--dm-border-strong, rgba(255,255,255,0.12));
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #22c55e;
}
.lr-dm-menu .lr-dm-welcome-item.done .lr-dm-welcome-dot { border-color: #22c55e; }