/* CPO-0702 — Desktop layer (≥1024px). Mobile UX unchanged below this breakpoint.
   This file is loaded after style.css so its rules win on specificity ties.
   Every rule is wrapped in @media (min-width: 1024px) — there are no global
   rules. The mobile/PWA build below 1024px never matches anything here. */

@media (min-width: 1024px) {
  /* §2 Shell — bottom-nav hide, app-shell row, sidebar visible, body padding zero.
     The .bottom-nav { display: none } rule lives HERE, outside the locked
     LOCK-START bottom-nav / LOCK-END bottom-nav sentinel block in style.css.
     Per audit §4, this augments behavior at a new breakpoint without modifying
     any property of the locked rule span — no Unlock: bottom-nav directive needed. */
  .bottom-nav { display: none; }
  body { padding-bottom: 0; }

  /* CPO-0705 — Mobile top-nav hide at desktop. window.Nav() outputs
     <nav class="nav">…</nav> inside #app on every authed surface (logo + BETA
     + action icons). At desktop the sidebar carries the brand identity and
     primary navigation, so the mobile top-nav is redundant and creates
     wordmark/BETA duplication on every page. Selector is .app-shell-scoped so
     resizing back to mobile correctly re-shows nav.js (the .app-shell wrapper
     unmounts below 1024px and the rule no longer matches). */
  .app-shell nav.nav { display: none; }

  /* CPO-0714 — Body overflow-x fix at desktop. reset.css sets
     `body { overflow-x: hidden }` which creates a scroll container that
     traps `position: sticky` on every descendant (canonical .page-header-desktop
     included). Override to `clip` at desktop — same horizontal-overflow
     containment without establishing a scroll context. Mobile retains
     `overflow-x: hidden` (rule lives outside this media query). Restores
     CDI-2 (sticky chrome behavior) which CPO-0713 attempted but didn't
     complete because it only addressed #app's overflow-x, not body's. */
  body { overflow-x: clip; }

  /* §2 — Side-nav layout primitives. CPO-0707: position fixed (was sticky) so
     the sidebar is a true fixed rail anchored top-to-bottom of the viewport.
     Content area is offset by .app-shell padding-left rather than flexbox. */
  .side-nav {
    display: flex;
    flex-direction: column;
    width: var(--sidebar-width);
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    background: var(--bg);
    border-right: 1px solid var(--divider-faint);
    flex-shrink: 0;
    z-index: 50;
    overflow-y: auto;
  }
  .side-nav.collapsed { width: var(--sidebar-collapsed); }

  /* §3 SideNav internal layout — slots, user strip, collapse toggle.
     Selectors below match the markup desktop-nav.js renders. */
  .side-nav-logo {
    padding: 24px 16px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .side-nav-logo .brand-wordmark { height: 42px; width: auto; display: block; flex-shrink: 0; }
  .side-nav.collapsed .side-nav-logo {
    padding: 24px 8px 16px;
    justify-content: center;
  }
  .side-nav.collapsed .side-nav-logo .brand-wordmark { display: none; }
  .side-nav.collapsed .side-nav-logo .brand-glyph { display: block; height: 32px; width: auto; }
  .side-nav-logo .brand-glyph { display: none; }
  .side-nav.collapsed .side-nav-logo .nav-beta-badge { display: none; }

  .side-nav-slots {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
    flex: 1;
  }
  .side-nav-slot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
    text-decoration: none;
    font: 500 14px var(--font);
  }
  .side-nav-slot:hover { background: var(--bg-hover); color: var(--text); }
  .side-nav-slot.active {
    background: var(--icon-btn-bg);
    color: var(--accent);
  }
  .side-nav-slot .icon { width: 20px; height: 20px; flex-shrink: 0; }
  .side-nav.collapsed .side-nav-slot .label { display: none; }
  .side-nav.collapsed .side-nav-slot { justify-content: center; padding: 10px; position: relative; }

  /* CPO-0705: Slot badge — pill in expanded mode, 8px corner dot when collapsed. */
  .side-nav-slot .slot-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--coral);
    color: var(--button-text-on-color);
    font: 600 11px var(--font);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .side-nav.collapsed .side-nav-slot .slot-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    min-width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    background: var(--coral);
    font-size: 0; /* hide count text in collapsed mode; just show dot */
  }

  /* CPO-0705: Collapse toggle — ghost row, no card surface. Hover fills via
     --bg-hover. Expanded state shows chevron-left + "Collapse" label;
     collapsed state shows the expand chevron only. */
  .side-nav-collapse-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 12px;
    padding: 8px 12px;
    border-radius: 10px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font: 500 13px var(--font);
    text-align: left;
    transition: background 150ms ease;
  }
  .side-nav-collapse-toggle:hover { background: var(--bg-hover); color: var(--text); }
  .side-nav-collapse-toggle .collapse-label { font: 500 13px var(--font); }
  .side-nav.collapsed .side-nav-collapse-toggle { justify-content: center; padding: 8px; }

  /* §3 User strip */
  .side-nav-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-top: 1px solid var(--divider-faint);
    cursor: pointer;
  }
  .side-nav-user:hover { background: var(--bg-hover); }
  .side-nav-user .avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--button-text-on-color);
    display: flex; align-items: center; justify-content: center;
    font: 600 13px var(--font);
    flex-shrink: 0;
  }
  .side-nav-user .meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  .side-nav-user .name {
    font: 500 13px var(--font);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .side-nav-user .verified { font: 500 11px var(--font); color: var(--green); }
  .side-nav-user .settings-icon {
    width: 18px; height: 18px;
    color: var(--text-fade-mid);
    flex-shrink: 0;
  }
  .side-nav.collapsed .side-nav-user {
    padding: 12px 8px;
    justify-content: center;
  }
  .side-nav.collapsed .side-nav-user .meta,
  .side-nav.collapsed .side-nav-user .settings-icon { display: none; }

  /* §2 App shell layout. CPO-0707: sidebar is position-fixed and overlays the
     viewport; content area is offset via padding-left rather than flexbox so
     the sidebar truly anchors and only the content scrolls. Padding transitions
     when collapse state flips. .collapsed-shell class is toggled by
     desktop-nav.js syncShellPadding() to match the sidebar's collapsed width. */
  .app-shell {
    padding-left: var(--sidebar-width);
    min-height: 100vh;
    transition: padding-left 200ms ease;
  }
  .app-shell.collapsed-shell { padding-left: var(--sidebar-collapsed); }
  .app-shell > #app,
  .app-shell > main {
    min-width: 0;
    /* CPO-0713: clip instead of hidden — prevents horizontal scrollbars
       without creating a scroll container that would trap position:sticky
       on descendants. overflow:clip widely supported (Chrome 90+, FF 81+,
       Safari 16+); this rule is inside @media (min-width: 1024px) so iOS 15
       fallback to overflow:visible is acceptable risk (desktop only). */
    overflow-x: clip;
  }

  /* CPO-0713 — Canonical desktop PageHeader.
     Spec source: HANDOFF-desktop.md §4 ("padding: 36px 32px 24px;
     position: sticky; top: 0; background: var(--bg); z-index: 10;
     flex-shrink: 0").
     DS §2 page title — Outfit 700 / 28px / -0.02em.
     DS §4 — top-level nav pages have NO back button.

     Three slots: __title (left, top-level pages), __center (flex:1,
     surfaces with inline search/toggles like Browse), __right (actions,
     geo+map cluster, period pills).

     Per CPO-0713 cross-surface invariants (CDI-1, CDI-2, CDI-4, CDI-5):
     this is the SOLE canonical desktop PageHeader. Per-surface custom
     headers are forbidden. Page padding horizontal var(--page-pad-desktop)
     is owned here and never compounded by inner content wrappers. */
  /* CPO-0715 — multi-row sticky header. .page-header-desktop becomes
     flex-column; existing slots (__title, __center, __right) wrap inside a
     __row child. Additional rows (chips, tabs) sit as siblings of the
     primary __row inside the same sticky container. CDI-8. */
  .page-header-desktop {
    position: sticky;
    top: 0;
    background: var(--bg);
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 36px var(--page-pad-desktop) 24px;
    margin: 0;
    flex-shrink: 0;
  }
  .page-header-desktop__row {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .page-header-desktop__title {
    font: 700 28px var(--font);
    color: var(--text);
    letter-spacing: -0.02em;
    margin: 0;
    flex: 0 0 auto;
  }
  .page-header-desktop__center {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  /* CPO-0715 — margin-left:auto anchors right slot to far-right edge
     regardless of title slot width. When __center is present, its flex:1
     already takes remaining space (margin-left:auto is a no-op). When
     __center is absent (Sales, Inbox, Analytics), title sits left and
     right slot pushes to far-right. CDI-7. */
  .page-header-desktop__right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    margin-left: auto;
  }
  /* Sub-screen variant — back button left, title centered. */
  .page-header-desktop--sub { justify-content: space-between; }

  /* Legacy CPO-0702 §4 PageHeader baseline (pre-canonical). Retained as
     dead code per CPO-0713 cf — no consumer ever adopted .page-header
     directly; .page-header-desktop is the canonical replacement.
     Future cleanup CPO can drop this block. */
  .page-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg);
    padding: 36px 32px 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .page-header .page-title {
    font: 700 28px var(--font);
    letter-spacing: -0.02em;
    color: var(--text);
    flex: 1;
    margin: 0;
  }
  .page-header .page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }

  /* ────────────────────────────────────────────────────────────────────
     CPO-0706 — Slot 2: Browse desktop page-level layout
     All rules scoped under .desktop-browse for namespace isolation.
     ──────────────────────────────────────────────────────────────────── */
  .desktop-browse {
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  /* CPO-0715: .browse-chips-row external sibling rule dropped. Chips moved
     INTO .page-header-desktop as a second __row (CDI-8). Sticky header
     now contains both the search/geo/map row AND the chips row. */

  /* CPO-0707/0715: search-pill is now a discrete pill (no longer wraps the
     toggle). Sales/Items toggle is a sibling segmented control inside
     .page-header-desktop__center (CPO-0715 Part B). */
  .desktop-browse .browse-search-pill {
    flex: 1;
    max-width: 720px;
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--surface-inset);
    border: 1px solid var(--surface-inset-border);
    border-radius: 10px;
    padding: 4px 4px 4px 13px;
    transition: border-color 150ms ease;
  }
  .desktop-browse .browse-search-pill:focus-within {
    border-color: var(--accent);
  }
  .desktop-browse .browse-search-pill .browse-search__icon {
    color: var(--text-muted);
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  .desktop-browse .browse-search-pill .browse-search__input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 7px 10px;
    color: var(--text);
    font: 400 14px var(--font);
    min-width: 0;
  }
  .desktop-browse .browse-search-pill .browse-search__input::placeholder {
    color: var(--text-muted);
  }
  /* CPO-0715: Sales/Items toggle as standalone segmented control (sibling
     of .browse-search-pill inside .page-header-desktop__center). DS §6
     form-input surface (--surface-inset bg + --surface-inset-border border)
     + DS §3 small-radius (var(--radius) outer, 6px inner buttons).
     DS §5 buttons: active state full-fill --accent per CPO-0709 ratification. */
  .desktop-browse .browse-mode-toggle {
    display: flex;
    gap: 0;
    padding: 4px;
    background: var(--surface-inset);
    border: 1px solid var(--surface-inset-border);
    border-radius: var(--radius);
    flex-shrink: 0;
  }
  .desktop-browse .browse-mode-btn {
    padding: 6px 14px;
    border: none;
    background: transparent;
    color: var(--text);
    font: 600 13px var(--font);
    border-radius: 6px;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
  }
  .desktop-browse .browse-mode-btn--active {
    background: var(--accent);
    color: var(--button-text-on-color);
  }

  /* Geo context — inline, non-interactive */
  .desktop-browse .browse-geo {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font: 400 13px var(--font);
    pointer-events: none;
    flex-shrink: 0;
  }

  /* Map-pin icon button — routes to /map. Reuses .icon-btn from style.css. */
  .desktop-browse .browse-map-pin {
    flex-shrink: 0;
  }

  /* Filter chips row */
  .desktop-browse .browse-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .desktop-browse .browse-chip {
    padding: 8px 16px;
    border-radius: 20px;
    font: 500 13px var(--font);
    cursor: pointer;
    white-space: nowrap;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--surface-inset-border);
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  }
  .desktop-browse .browse-chip:hover {
    background: var(--bg-hover);
  }
  .desktop-browse .browse-chip--active {
    background: var(--accent);
    color: var(--button-text-on-color);
    border-color: var(--accent);
  }

  /* Section header — SALES NEARBY / BROWSE ITEMS / SEARCH RESULTS */
  .desktop-browse .browse-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px 12px;
  }
  .desktop-browse .browse-section-title {
    font: 600 11px var(--font);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .desktop-browse .browse-section-count {
    font: 600 11px var(--font);
    color: var(--text-muted);
    /* CPO-0709: 0.04em → 0.08em to match section-title per DS §2 section-label spec. */
    letter-spacing: 0.08em;
  }

  /* Featured sale card — base rule. Grid template is set per-variant
     (CPO-0707): --five for 5+ photos (hero + 4 thumbs), --three for 3-4
     photos (hero + 2 thumbs stacked right), --one for 1-2 photos (hero only).
     1px gap creates the dark-line separators visible in the CDe target. */
  .desktop-browse .browse-featured {
    margin: 0 32px 14px;
    height: 280px;
    display: grid;
    gap: 1px;
    background: var(--bg);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: box-shadow 150ms ease;
  }
  .desktop-browse .browse-featured--five {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .desktop-browse .browse-featured--five .browse-featured__hero {
    grid-column: 1;
    grid-row: span 2;
  }
  .desktop-browse .browse-featured--three {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .desktop-browse .browse-featured--three .browse-featured__hero {
    grid-column: 1;
    grid-row: span 2;
  }
  /* CPO-0708: 2-photo featured matches standard card --two (hero + 1 thumb). */
  .desktop-browse .browse-featured--two {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
  }
  .desktop-browse .browse-featured--two .browse-featured__hero {
    grid-column: 1;
    grid-row: 1;
  }
  .desktop-browse .browse-featured--one {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  .desktop-browse .browse-featured--one .browse-featured__hero {
    grid-column: 1;
    grid-row: 1;
  }
  .desktop-browse .browse-featured__hero {
    position: relative;
    overflow: hidden;
    background: var(--bg-card-solid);
  }
  .desktop-browse .browse-featured__thumb {
    background: var(--bg-card-solid);
    overflow: hidden;
    position: relative;
  }
  .desktop-browse .browse-featured__hero img,
  .desktop-browse .browse-featured__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .desktop-browse .browse-featured__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* CPO-0708: stronger floor at title baseline (95% at bottom, was 85%) +
       midpoint stop at 50% (40% alpha) avoids hard edge between transparent
       and the wash. Title at bottom:24px in 280px card now sits in ~93% black
       wash instead of ~78%. */
    background: linear-gradient(180deg, transparent 0%, rgba(12,12,16,0.40) 50%, rgba(12,12,16,0.95) 100%);
    border-radius: 12px;
  }
  .desktop-browse .browse-featured__title {
    position: absolute;
    left: 24px;
    bottom: 24px;
    right: 24px;
    z-index: 2;
    pointer-events: none;
  }
  .desktop-browse .browse-featured__title-text {
    font: 700 32px var(--font);
    color: var(--text);
    letter-spacing: -0.02em;
    margin: 0 0 8px;
  }
  .desktop-browse .browse-featured__seller {
    font: 400 14px var(--font);
    color: var(--text);
    margin: 0 0 8px;
  }
  .desktop-browse .browse-featured__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 400 13px var(--font);
    color: var(--text-muted);
    flex-wrap: wrap;
  }
  .desktop-browse .browse-featured__when {
    color: var(--price);
    font-family: var(--font-mono);
  }
  .desktop-browse .browse-featured__heart {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    background: var(--card-2);
    border-radius: 8px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
  }

  /* Standard sale-card 3-col grid */
  .desktop-browse .browse-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 0 32px 32px;
  }
  /* Standard card — base rule. Grid template set per-variant (CPO-0707):
     --three for 3+ photos, --two for 2 photos, --one for 1 photo. */
  .desktop-browse .browse-card {
    height: 220px;
    display: grid;
    gap: 1px;
    background: var(--bg);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: box-shadow 150ms ease;
  }
  .desktop-browse .browse-card--three {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .desktop-browse .browse-card--three .browse-card__hero {
    grid-column: 1;
    grid-row: span 2;
  }
  .desktop-browse .browse-card--two {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
  }
  .desktop-browse .browse-card--two .browse-card__hero {
    grid-column: 1;
    grid-row: 1;
  }
  .desktop-browse .browse-card--one {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  .desktop-browse .browse-card--one .browse-card__hero {
    grid-column: 1;
    grid-row: 1;
  }
  .desktop-browse .browse-card__hero {
    position: relative;
    overflow: hidden;
    background: var(--bg-card-solid);
  }
  .desktop-browse .browse-card__thumb {
    background: var(--bg-card-solid);
    overflow: hidden;
    position: relative;
  }
  .desktop-browse .browse-card__hero img,
  .desktop-browse .browse-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .desktop-browse .browse-card__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* CPO-0708: same gradient strengthening as featured. Mid-stop at 55%
       (vs featured's 50%) because standard card's title cluster is more
       compact and the photo-area-to-text ratio differs. */
    background: linear-gradient(180deg, transparent 0%, rgba(12,12,16,0.40) 55%, rgba(12,12,16,0.95) 100%);
    border-radius: 12px;
  }
  .desktop-browse .browse-card__title {
    position: absolute;
    left: 16px;
    bottom: 16px;
    right: 16px;
    z-index: 2;
    pointer-events: none;
  }
  .desktop-browse .browse-card__title-text {
    font: 700 18px var(--font);
    color: var(--text);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
  }
  .desktop-browse .browse-card__seller {
    font: 400 13px var(--font);
    color: var(--text-muted);
    margin: 0 0 4px;
  }
  .desktop-browse .browse-card__meta {
    font: 400 12px var(--font);
    color: var(--text-muted);
  }
  .desktop-browse .browse-card__heart {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    background: var(--card-2);
    border-radius: 8px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
  }

  /* Items grid — 4-col auto-fill (items mode + search results) */
  .desktop-browse .browse-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    padding: 0 32px 32px;
  }

  /* Hover state — both card variants get an accent-border ring */
  .desktop-browse .browse-featured:hover,
  .desktop-browse .browse-card:hover {
    box-shadow: 0 0 0 1px var(--accent-border);
  }

  /* ────────────────────────────────────────────────────────────────────
     CPO-0710 — Slot 10: Map desktop layout
     All rules scoped under .desktop-map for namespace isolation.

     Sidebar-aware: .app-shell already has padding-left:var(--sidebar-width)
     per CPO-0707, so .desktop-map naturally clears the sidebar without
     position:fixed (which is what made mobile /map's overlays tuck under).
     ──────────────────────────────────────────────────────────────────── */
  .desktop-map {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: var(--bg);
  }
  #desktop-map-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--bg);
  }

  /* Filter chips overlay — top-left.
     Glass treatment per spec §6: rgba(20,20,26,0.92) + backdrop-filter blur.
     No DS token has these exact alphas; per CPO-0707 cf3 precedent, glass
     overlay alphas are gradient-stop-equivalent exceptions. */
  .desktop-map__chips {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: rgba(20,20,26,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(236,230,220,0.10);
    border-radius: var(--radius);
    flex-wrap: wrap;
    max-width: calc(100% - 28px);
  }
  [data-theme="light"] .desktop-map__chips {
    background: rgba(255,255,255,0.96);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.06);
  }

  /* Filter chip button — DS §3 border-radius 20px; DS §5 active full-fill var(--accent)
     per CPO-0709 desktop ratification. Mirrors .desktop-browse .browse-chip. */
  .desktop-map__chip {
    padding: 8px 16px;
    border-radius: 20px;
    font: 500 13px var(--font);
    cursor: pointer;
    white-space: nowrap;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--surface-inset-border);
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  }
  .desktop-map__chip:hover { background: var(--bg-hover); }
  .desktop-map__chip--active {
    background: var(--accent);
    color: var(--button-text-on-color);
    border-color: var(--accent);
  }

  /* Geo context overlay — top-right. Same glass treatment as chips. */
  .desktop-map__geo {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(20,20,26,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(236,230,220,0.10);
    border-radius: var(--radius);
    color: var(--text-muted);
    font: 400 13px var(--font);
    pointer-events: none;
  }
  [data-theme="light"] .desktop-map__geo {
    background: rgba(255,255,255,0.96);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.06);
  }

  /* Sale-detail card overlay — bottom-center.
     DS §7 primary card surface var(--card). 16px radius is spec §6 explicit
     (deviation from DS §7 standard 12px is spec-explicit, not drift). */
  .desktop-map__detail-card {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    width: 100%;
    max-width: 480px;
    background: var(--card);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    display: none;
    cursor: pointer;
  }
  .desktop-map__detail-card.is-visible {
    display: flex;
    gap: 14px;
    align-items: center;
  }
  .desktop-map__detail-card__photo {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
  }
  .desktop-map__detail-card__body {
    flex: 1;
    min-width: 0;
  }
  .desktop-map__detail-card__title {
    font: 700 16px var(--font);
    color: var(--text);
    margin: 0 0 4px;
  }
  .desktop-map__detail-card__meta {
    font: 400 13px var(--font);
    color: var(--text-muted);
  }
  /* DS §5 .btn primary: var(--accent) bg, --button-text-on-color text, 10px radius */
  .desktop-map__detail-card__cta {
    padding: 8px 16px;
    background: var(--accent);
    color: var(--button-text-on-color);
    border: none;
    border-radius: var(--radius);
    font: 600 13px var(--font);
    cursor: pointer;
    flex-shrink: 0;
  }

  /* Sale pin marker — DS §20 sale-pin spec.
     Pill border-radius 20px, min-height 32px, padding 6px 14px,
     13px/700 item count. Three semantic states by slots_remaining:
     ≥2 green (default), ===1 yellow (limited), active accent. */
  .desktop-map__pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 14px;
    border-radius: 20px;
    font: 700 13px var(--font);
    color: var(--bg);
    border: 2px solid var(--bg);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
    transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
  }
  .desktop-map__pin--available { background: var(--green); }
  .desktop-map__pin--limited { background: var(--yellow); }
  .desktop-map__pin--active {
    background: var(--accent);
    color: var(--text);
    box-shadow: 0 4px 16px rgba(59,124,192,0.5);
  }
  .desktop-map__pin .desktop-map__pin__count {
    font: 700 13px var(--font);
  }
  .desktop-map__pin--active .desktop-map__pin__title {
    margin-left: 6px;
    font: 400 13px var(--font);
    color: var(--text);
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
  }

  /* ────────────────────────────────────────────────────────────────────
     CPO-0712 — Slot 5: Sales dashboard desktop layout
     All rules scoped under .desktop-sales for namespace isolation.
     DS sources: §1 (color tokens), §2 (typography), §3 (spacing/radius),
     §7 (card hierarchy — primary --card surface, hero radius 14px).
     ──────────────────────────────────────────────────────────────────── */
  .desktop-sales {
    padding: 0 var(--page-pad-desktop) 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  /* CPO-0713: .desktop-sales__header + .desktop-sales__title rules dropped.
     Behavior moves to canonical .page-header-desktop + .page-header-desktop__title
     (CDI-1). Mount restructure in desktop-sales.js places the header outside
     the .desktop-sales content wrapper to avoid double horizontal padding (CDI-5). */

  /* Add items CTA — DS §5 primary button (var(--accent), --button-text-on-color, --radius). */
  .desktop-sales__add-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--accent);
    color: var(--button-text-on-color);
    border: none;
    border-radius: var(--radius);
    font: 600 14px var(--font);
    cursor: pointer;
    transition: opacity 150ms ease;
  }
  .desktop-sales__add-cta:hover { opacity: 0.92; }

  /* Now strip — 3 signal cards. DS §7 primary card surface var(--card). */
  .desktop-sales__now-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .desktop-sales__now-card {
    background: var(--card);
    border-radius: 12px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .desktop-sales__now-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .desktop-sales__now-icon--yellow { background: var(--yellow-glow); color: var(--yellow); }
  .desktop-sales__now-icon--accent { background: var(--accent-glow); color: var(--accent); }
  .desktop-sales__now-icon--green { background: var(--green-glow); color: var(--green); }
  .desktop-sales__now-value {
    font: 400 22px var(--font-mono);
    color: var(--text);
  }
  .desktop-sales__now-label {
    font: 400 13px var(--font);
    color: var(--text-muted);
  }

  /* Revenue hero card — DS §7 dashboard hero exception (radius 14px). */
  .desktop-sales__hero-card {
    background: var(--card);
    border-radius: 14px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 32px;
  }
  .desktop-sales__hero-left {
    flex: 1;
    min-width: 0;
  }
  .desktop-sales__hero-period {
    font: 600 11px var(--font);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 8px;
  }
  .desktop-sales__hero-money {
    font: 400 56px var(--font-mono);
    color: var(--price);
    margin: 0 0 8px;
    line-height: 1;
  }
  .desktop-sales__hero-deltas {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 400 14px var(--font);
    flex-wrap: wrap;
  }
  .desktop-sales__hero-deltas .delta-up { color: var(--green); }
  .desktop-sales__hero-deltas .delta-down { color: var(--coral); }
  .desktop-sales__hero-deltas .sep { color: var(--text-muted); }
  .desktop-sales__hero-spark {
    flex-shrink: 0;
    width: 240px;
    height: 60px;
    display: block;
  }
  .desktop-sales__hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 12px 32px;
    flex-shrink: 0;
  }
  .desktop-sales__hero-stats .value {
    font: 400 26px var(--font-mono);
    color: var(--text);
    line-height: 1.1;
  }
  .desktop-sales__hero-stats .label {
    font: 400 12px var(--font);
    color: var(--text-muted);
    margin-top: 2px;
  }

  /* Section header — DS §2 section-label (Outfit 600/11px/uppercase, 0.08em letter-spacing). */
  .desktop-sales__section {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .desktop-sales__section-head {
    font: 600 11px var(--font);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
  }

  /* Active sales 3-col grid */
  .desktop-sales__active-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .desktop-sales__sale-card {
    background: var(--card);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: box-shadow 150ms ease;
  }
  .desktop-sales__sale-card:hover {
    box-shadow: 0 0 0 1px var(--accent-border);
  }

  /* Photo composition: 2fr 1fr × 1fr 1fr, hero spans 2 rows. 1px gap creates
     the dark-line separators (matches Browse standard card pattern). */
  .desktop-sales__sale-photos {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1px;
    background: var(--bg);
    height: 200px;
  }
  .desktop-sales__sale-photos .hero {
    grid-column: 1;
    grid-row: span 2;
    background: var(--bg-card-solid);
    overflow: hidden;
    position: relative;
  }
  .desktop-sales__sale-photos .thumb {
    background: var(--bg-card-solid);
    overflow: hidden;
    position: relative;
  }

  /* Status badge — DS §3 small-inline radius 8px. CPO-0712: --bg-inset for
     draft (DS §1 inset/ambient token; replaces raw rgba per Rule 24). */
  .desktop-sales__status-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 6px 12px;
    border-radius: 8px;
    font: 600 11px var(--font);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .desktop-sales__status-badge--live {
    background: var(--green-glow);
    color: var(--green);
    border: 1px solid var(--green-border);
  }
  .desktop-sales__status-badge--scheduled {
    background: var(--yellow-glow);
    color: var(--yellow);
    border: 1px solid var(--yellow-border);
  }
  .desktop-sales__status-badge--draft {
    background: var(--bg-inset);
    color: var(--text-muted);
  }

  .desktop-sales__sale-body {
    padding: 18px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .desktop-sales__sale-title {
    font: 700 16px var(--font);
    color: var(--text);
    margin: 0;
  }
  .desktop-sales__sale-meta {
    font: 400 13px var(--font);
    color: var(--text-muted);
  }
  .desktop-sales__sale-meta--draft { color: var(--coral); }
  .desktop-sales__sale-pickup {
    font: 400 12px var(--font);
    color: var(--text-muted);
    margin-top: 2px;
  }
  .desktop-sales__sale-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
  }
  .desktop-sales__sale-actions .btn { flex: 1; }

  /* Past sales — lightweight rows */
  .desktop-sales__past-list {
    display: flex;
    flex-direction: column;
  }
  .desktop-sales__past-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--divider-faint);
    cursor: pointer;
    transition: background 150ms ease;
  }
  .desktop-sales__past-row:hover { background: var(--bg-hover); }
  .desktop-sales__past-row:last-child { border-bottom: none; }
  .desktop-sales__past-bar {
    width: 4px;
    height: 36px;
    background: var(--surface-inset);
    border-radius: 2px;
    flex-shrink: 0;
  }
  .desktop-sales__past-main {
    flex: 1;
    min-width: 0;
  }
  .desktop-sales__past-title {
    font: 500 14px var(--font);
    color: var(--text);
  }
  .desktop-sales__past-meta {
    font: 400 13px var(--font);
    color: var(--text-muted);
  }
  .desktop-sales__past-revenue {
    font: 400 16px var(--font-mono);
    color: var(--price);
    flex-shrink: 0;
  }
  .desktop-sales__past-chevron {
    color: var(--text-muted);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
  }

  /* Google Maps zoom-control style override.
     Spec §6: rgba(20,20,26,0.92) + backdrop-filter blur + border + 10px radius.
     !important required because Google Maps writes inline styles that take
     specificity precedence over normal CSS. This is the only place Google's
     inline styles can be overridden. */
  .desktop-map .gmnoprint > div[draggable="false"] {
    background: rgba(20,20,26,0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(236,230,220,0.10) !important;
    border-radius: var(--radius) !important;
  }
  [data-theme="light"] .desktop-map .gmnoprint > div[draggable="false"] {
    background: rgba(255,255,255,0.96) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
  }

  /* ────────────────────────────────────────────────────────────────────
     CPO-0716 — QR handoff modal (CDe spec §16, vanilla translation).
     Triggered ONLY by Add items / Start selling buttons on desktop
     surfaces. Vanilla DOM at z-index 2000 (matches existing modal-backdrop
     ladder). Backdrop fades in 200ms; card slides up 8px in 250ms with
     DS §10 toast easing.

     Color tokens cite DS §1 (--card, --border-card, --text, --text-muted,
     --accent), DS §2 (typography 18/700 title, 14/400 sub, 13/400 url).
     Backdrop alpha rgba(0,0,0,0.65) is overlay-spec-explicit (no DS token);
     same gradient-stop-equivalent exception as CPO-0707 cf3 + CPO-0710.
     Card border-radius 20px is spec §16 explicit (deviation from DS §3
     standard 12px is spec-explicit, not drift).
     ──────────────────────────────────────────────────────────────────── */
  .desktop-qr-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 200ms ease;
  }
  .desktop-qr-modal__backdrop--visible { opacity: 1; }
  .desktop-qr-modal__backdrop--visible .desktop-qr-modal__card {
    transform: translateY(0);
  }

  .desktop-qr-modal__card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border-card);
    border-radius: 20px;
    padding: 36px 40px;
    max-width: 360px;
    width: 90vw;
    box-shadow: 0 40px 80px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    transform: translateY(8px);
    transition: transform 250ms cubic-bezier(.2,.9,.2,1);
  }

  .desktop-qr-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 150ms ease, color 150ms ease;
  }
  .desktop-qr-modal__close:hover {
    background: var(--bg-hover);
    color: var(--text);
  }

  .desktop-qr-modal__title {
    font: 700 18px var(--font);
    color: var(--text);
    margin: 0;
    text-align: center;
  }

  .desktop-qr-modal__sub {
    font: 400 14px var(--font);
    color: var(--text-muted);
    margin: 0;
    text-align: center;
    line-height: 1.4;
  }

  .desktop-qr-modal__canvas-wrap {
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
    background: var(--bg-card-solid);
  }

  .desktop-qr-modal__url {
    font: 400 13px var(--font);
    color: var(--text-muted);
    margin: 0;
    text-align: center;
  }
  .desktop-qr-modal__url-link {
    color: var(--accent);
    font-weight: 500;
  }

  .desktop-qr-modal__dismiss {
    width: 100%;
  }

  /* ────────────────────────────────────────────────────────────────────
     CPO-0717 — Slot 7: Desktop Sale Manage page (two-pane).
     Namespace: .desktop-sale-manage* (DS §21.1 page-prefix).
     CDIs preserved: header is canonical .page-header-desktop with --sub
     modifier; padding never compounded (header owns horizontal padding via
     canonical class; .desktop-sale-manage owns content padding only).
     All values cite DS tokens defined in variables.css per Rule 24.
     ──────────────────────────────────────────────────────────────────── */
  .desktop-sale-manage-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  .desktop-sale-manage {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  /* Sub-screen back button — leftmost slot in __row, before title. Inherits
     icon-btn-shaped sizing; no inline overrides. */
  .desktop-sale-manage__back-btn {
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--border-card);
    border-radius: var(--radius);
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: background 150ms ease;
  }
  .desktop-sale-manage__back-btn:hover {
    background: var(--bg-hover);
  }

  /* + Add item header CTA — accent fill, plus icon (NOT camera). */
  .desktop-sale-manage__add-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: var(--button-text-on-color);
    border: none;
    border-radius: var(--radius);
    padding: 10px 16px;
    font: 500 14px var(--font);
    cursor: pointer;
    transition: filter 150ms ease;
  }
  .desktop-sale-manage__add-cta:hover {
    filter: brightness(1.08);
  }

  /* Status bar — full-width row below header, sticky-adjacent. */
  .desktop-sale-manage__status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px var(--page-pad-desktop);
    border-bottom: 1px solid var(--divider-faint);
    background: var(--bg);
  }
  .desktop-sale-manage__status-left {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .desktop-sale-manage__live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    flex: 0 0 auto;
  }
  .desktop-sale-manage__live-dot--live {
    background: var(--green);
    box-shadow: 0 0 0 4px var(--green-glow);
  }
  .desktop-sale-manage__live-dot--scheduled {
    background: var(--yellow);
  }
  .desktop-sale-manage__live-dot--draft {
    background: var(--text-muted);
  }
  .desktop-sale-manage__status-label {
    font: 500 14px var(--font);
    color: var(--text);
  }
  .desktop-sale-manage__status-stats {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .desktop-sale-manage__status-stat {
    font: 500 14px var(--font);
    color: var(--text-muted);
  }

  /* Two-pane content area. */
  .desktop-sale-manage__panes {
    display: flex;
    flex: 1;
    gap: 0;
    align-items: flex-start;
  }
  .desktop-sale-manage__left-pane {
    flex: 1;
    min-width: 0;
    padding: 24px var(--page-pad-desktop) 48px;
  }
  .desktop-sale-manage__right-pane {
    width: 340px;
    flex: 0 0 340px;
    position: sticky;
    top: 0;
    align-self: flex-start;
    max-height: 100vh;
    overflow-y: auto;
    border-left: 1px solid var(--divider-faint);
    background: var(--card);
  }

  /* Item grid — auto-fill minmax 160px squares. */
  .desktop-sale-manage__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--gap);
  }

  /* Tile — square card with overlays. */
  .desktop-sale-manage__tile {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    transition: border-color 150ms ease, transform 150ms ease;
    display: block;
    text-align: left;
  }
  .desktop-sale-manage__tile:hover {
    border-color: var(--accent-border);
    transform: translateY(-1px);
  }
  .desktop-sale-manage__tile--selected {
    border-color: var(--accent);
    border-width: 2px;
  }
  .desktop-sale-manage__tile--sold {
    opacity: 0.4;
  }
  .desktop-sale-manage__tile-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .desktop-sale-manage__tile-photo--placeholder {
    background: var(--bg-card-solid);
  }
  .desktop-sale-manage__tile-offer-count {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--accent-glow);
    color: var(--accent);
    font: 700 12px var(--font);
    padding: 2px 8px;
    border-radius: 999px;
    z-index: 2;
  }
  .desktop-sale-manage__tile-pending-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--card-2);
    color: var(--yellow);
    font: 700 10px var(--font);
    letter-spacing: 0.07em;
    padding: 3px 8px;
    border-radius: 4px;
    z-index: 2;
  }
  .desktop-sale-manage__tile-pending-badge--hold {
    color: var(--text-muted);
  }
  .desktop-sale-manage__tile-sold-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 20, 26, 0.55);
    color: var(--text);
    font: 700 18px var(--font);
    letter-spacing: 0.08em;
    z-index: 2;
  }
  .desktop-sale-manage__tile-price {
    position: absolute;
    bottom: 44px;
    left: 8px;
    background: var(--card-2);
    color: var(--price);
    font: 700 13px var(--font-mono);
    padding: 2px 8px;
    border-radius: 4px;
    z-index: 2;
  }
  .desktop-sale-manage__tile-meta {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 10px;
    background: linear-gradient(180deg, rgba(20,20,26,0) 0%, rgba(20,20,26,0.85) 60%);
    z-index: 1;
  }
  .desktop-sale-manage__tile-title {
    font: 500 14px var(--font);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .desktop-sale-manage__tile-condition {
    font: 400 13px var(--font);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* + Add item dashed tile — same square footprint as item tiles. */
  .desktop-sale-manage__add-tile {
    aspect-ratio: 1 / 1;
    background: transparent;
    border: 2px dashed var(--border-card);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: border-color 150ms ease, color 150ms ease;
  }
  .desktop-sale-manage__add-tile:hover {
    border-color: var(--accent);
    color: var(--accent);
  }
  .desktop-sale-manage__add-tile-label {
    font: 500 13px var(--font);
  }

  /* Right-pane edit panel. */
  .desktop-sale-manage__edit-panel {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .desktop-sale-manage__edit-panel--empty {
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-muted);
    min-height: 360px;
    gap: 12px;
  }
  .desktop-sale-manage__edit-panel-empty-icon {
    color: var(--text-fade-mid);
  }
  .desktop-sale-manage__edit-panel-empty-prompt {
    font: 400 14px var(--font);
    color: var(--text-muted);
    max-width: 240px;
  }
  .desktop-sale-manage__edit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .desktop-sale-manage__edit-close {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms ease, color 150ms ease;
  }
  .desktop-sale-manage__edit-close:hover {
    background: var(--bg-hover);
    color: var(--text);
  }

  /* Photo management strip. */
  .desktop-sale-manage__photo-main {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-card-solid);
  }
  .desktop-sale-manage__photo-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .desktop-sale-manage__photo-strip {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .desktop-sale-manage__photo-thumb {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-card-solid);
    flex: 0 0 auto;
  }
  .desktop-sale-manage__photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* DS exception: 50% radius is permitted on photo-tile delete overlays only
     per CDe spec §8 + Buyer-sale-page handoff §6. */
  .desktop-sale-manage__photo-thumb-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--coral);
    color: var(--button-text-on-color);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .desktop-sale-manage__photo-preview-pill {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--accent-glow);
    color: var(--accent);
    font: 700 9px var(--font);
    letter-spacing: 0.07em;
    padding: 2px 5px;
    border-radius: 4px;
  }
  .desktop-sale-manage__photo-add {
    width: 56px;
    height: 56px;
    border-radius: var(--radius);
    background: transparent;
    border: 2px dashed var(--border-card);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: border-color 150ms ease, color 150ms ease;
  }
  .desktop-sale-manage__photo-add:hover {
    border-color: var(--accent);
    color: var(--accent);
  }
  .desktop-sale-manage__photo-caption {
    font: 400 13px var(--font);
    color: var(--text-muted);
  }

  /* Editable fields. */
  .desktop-sale-manage__field-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .desktop-sale-manage__field-textarea {
    resize: none;
    min-height: 72px;
    font-family: var(--font);
  }
  .desktop-sale-manage__field-price-wrap {
    position: relative;
  }
  .desktop-sale-manage__field-price-prefix {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font: 700 16px var(--font-mono);
    color: var(--text-muted);
    pointer-events: none;
  }
  .desktop-sale-manage__field-price {
    padding-left: 28px;
    font-family: var(--font-mono);
    color: var(--price);
  }

  /* Actions stack. */
  .desktop-sale-manage__action-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
  }
  .desktop-sale-manage__action-save,
  .desktop-sale-manage__action-mark-sold {
    width: 100%;
  }
  /* Coral-ghost destructive button — second site of the deferred CPO-0605
     hybrid (.btn-secondary base + coral text + coral border). Defined inline
     per CPO-0717 cf; CPO-0605 resolution will canonicalize this and
     desktop-sale-manage.js's primary site can be migrated when ready. */
  .desktop-sale-manage__btn-remove {
    width: 100%;
    background: transparent;
    color: var(--coral);
    border: 1px solid var(--coral-border);
    border-radius: var(--radius);
    padding: 10px 14px;
    font: 500 14px var(--font);
    cursor: pointer;
    transition: background 150ms ease;
  }
  .desktop-sale-manage__btn-remove:hover {
    background: var(--coral-glow);
  }

  .desktop-sale-manage-error {
    padding: 48px var(--page-pad-desktop);
    text-align: center;
  }

  /* ────────────────────────────────────────────────────────────────────
     CPO-0719 — Slot 8: Desktop Create Sale page (standalone /seller/new-sale).
     Namespace: .desktop-new-sale* (DS §21.1 page-prefix).
     CDIs preserved: header is canonical .page-header-desktop with --sub
     modifier; padding never compounded (header owns horizontal padding via
     canonical class; .desktop-new-sale owns content padding only).
     All values cite DS tokens defined in variables.css per Rule 24.
     ──────────────────────────────────────────────────────────────────── */
  .desktop-new-sale-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  .desktop-new-sale {
    max-width: 600px;
    margin: 0 auto;
    padding: 32px var(--page-pad-desktop);
    width: 100%;
    box-sizing: border-box;
  }
  .desktop-new-sale__form {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
  }
  /* Sub-screen back button — matches .desktop-sale-manage__back-btn from CPO-0717. */
  .desktop-new-sale__back-btn {
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--border-card);
    border-radius: var(--radius);
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: background 150ms ease;
  }
  .desktop-new-sale__back-btn:hover {
    background: var(--bg-hover);
  }

  .desktop-new-sale__field-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .desktop-new-sale__field-label {
    font: 600 11px var(--font);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
  }
  .desktop-new-sale__field-help {
    font: 400 12px var(--font);
    color: var(--text-muted);
    margin-top: 4px;
  }
  .desktop-new-sale__field-textarea {
    resize: none;
    min-height: 72px;
    font-family: var(--font);
  }

  /* Toggle row — canonical checkbox per seller-profile-section.js precedent.
     Larger 44px hit target via padding; checkbox sits right; label stack left. */
  .desktop-new-sale__toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-top: 1px solid var(--divider-faint);
    cursor: pointer;
    gap: 16px;
  }
  .desktop-new-sale__toggle-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .desktop-new-sale__toggle-label {
    font: 500 14px var(--font);
    color: var(--text);
  }
  .desktop-new-sale__toggle-sub {
    font: 400 12px var(--font);
    color: var(--text-muted);
  }
  .desktop-new-sale__toggle-checkbox {
    width: 20px;
    height: 20px;
    accent-color: var(--accent);
    flex-shrink: 0;
    cursor: pointer;
  }

  /* Action stack — Create + Save-as-draft buttons, full width. */
  .desktop-new-sale__action-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
  }
  .desktop-new-sale__action-row .btn {
    width: 100%;
  }

  .desktop-new-sale__error {
    color: var(--coral);
    font: 400 13px var(--font);
    margin-top: 4px;
  }

  /* Inline notice (e.g. "Saved as draft, set up availability"). */
  .desktop-new-sale__notice {
    background: var(--accent-glow);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    margin-bottom: 16px;
    color: var(--text);
    font: 400 13px var(--font);
  }
  .desktop-new-sale__notice a {
    color: var(--accent);
    text-decoration: underline;
  }

  /* Field input invalid modifier — desktop-only for now per CPO-0719 cf.
     If mobile needs the same modifier later, promote to style.css. */
  .field-input--invalid {
    border-color: var(--coral);
  }

  /* ────────────────────────────────────────────────────────────────────
     CPO-0723 — Desktop Profile rewrite (three-column with peek).
     Replaces the CPO-0721 .desktop-profile* rule block. Per CDe spec §14
     + canonical React reference DesktopProfile.

     Structure:
       .desktop-profile          flex row, three columns
       __left                    360px sticky identity card column
       __list                    flex 1 settings list (when no peek)
       __icon-strip              52px icon column (when peek active)
       __peek                    flex 1 peek panel (when peek active)
       __peek-shell              header + body + (optional) footer
       __id-card / __hero / __stats / __sub-rows / __sell-cta /
       __logout / __footer       identity card subcomponents

     CDIs preserved: padding never compounded — header padding handled by
     each column (24px scroll padding); peek body has its own padding.
     All values cite DS tokens per Rule 24. Two overlay-spec-explicit
     rgba values (CDe canonical: 0.18 active-icon bg, 0.06 dividers,
     0.07/0.14 sell CTA tints) match the React reference exactly. */
  .desktop-profile-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: hidden;
  }
  .desktop-profile {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
  }
  .desktop-profile__loading {
    padding: 48px var(--page-pad-desktop);
    color: var(--text-muted);
  }

  /* LEFT — identity card column (sticky). */
  .desktop-profile__left {
    flex: 0 0 360px;
    align-self: flex-start;
    position: sticky;
    top: 0;
    padding: 24px 0 24px var(--page-pad-desktop);
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
  }
  .desktop-profile__id-card {
    background: var(--card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    padding: 18px 16px;
  }
  .desktop-profile__hero {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;
    width: 100%;
    text-align: left;
  }
  .desktop-profile__hero-avatar {
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
  }
  .desktop-profile__hero-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .desktop-profile__hero-avatar--initial {
    background: linear-gradient(135deg, var(--accent-glow), var(--yellow-glow));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    font-family: var(--font);
    font-weight: 900;
  }
  /* DS exception: 50% radius on selfie-verified check overlay (existing
     sanctioned exception class with photo-tile delete overlays). */
  .desktop-profile__hero-avatar-check {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--green);
    border: 2px solid var(--card);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .desktop-profile__hero-text {
    flex: 1;
    min-width: 0;
  }
  .desktop-profile__hero-name {
    display: flex;
    align-items: center;
    gap: 7px;
    font: 700 16px var(--font);
    color: var(--text);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
  }
  .desktop-profile__hero-name > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .desktop-profile__hero-edit {
    flex-shrink: 0;
    font-size: 12px;
    padding: 5px 10px;
  }

  .desktop-profile__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-bottom: 14px;
  }
  .desktop-profile__stat-tile {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 9px;
    padding: 9px 11px;
  }
  .desktop-profile__stat-value {
    font: 400 18px var(--font-mono);
    color: var(--text);
    line-height: 1;
  }
  .desktop-profile__stat-tile--is-price .desktop-profile__stat-value {
    color: var(--price);
  }
  .desktop-profile__stat-label {
    font: 400 11px var(--font);
    color: var(--text-muted);
    margin-top: 3px;
  }

  .desktop-profile__id-divider {
    height: 1px;
    background: rgba(236, 230, 220, 0.06);
    margin: 0 -16px 12px;
  }
  .desktop-profile__sub-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .desktop-profile__sub-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 400 13px var(--font);
    white-space: nowrap;
  }
  .desktop-profile__sub-row--is-green {
    color: var(--green);
  }
  .desktop-profile__sub-row--is-muted {
    color: var(--text-muted);
  }

  .desktop-profile__sell-cta {
    background: rgba(59, 124, 192, 0.07);
    border: 1px solid rgba(59, 124, 192, 0.14);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .desktop-profile__sell-cta .desktop-profile__row-label {
    font: 600 14px var(--font);
    color: var(--text);
  }
  .desktop-profile__sell-cta .desktop-profile__row-detail {
    font: 400 12px var(--font);
    color: var(--text-muted);
    line-height: 1.4;
  }
  .desktop-profile__sell-cta .btn {
    width: 100%;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    padding: 8px;
  }

  .desktop-profile__logout {
    width: 100%;
    padding: 10px;
    border-radius: 11px;
    background: var(--card);
    border: 1px solid var(--coral-border);
    color: var(--coral);
    font: 500 13px var(--font);
    cursor: pointer;
    transition: background 150ms ease;
  }
  .desktop-profile__logout:hover {
    background: var(--coral-glow);
  }
  .desktop-profile__footer {
    text-align: center;
    font: 400 11px var(--font-mono);
    color: var(--text-fade-mid);
    padding: 8px 0 16px;
  }

  /* MIDDLE — settings list (full width when no peek). */
  .desktop-profile__list {
    flex: 1;
    overflow-y: auto;
    padding: 24px 18px 48px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
  }
  .desktop-profile__group {
    background: var(--card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .desktop-profile__group-title {
    padding: 10px 14px 4px;
    font: 700 10px var(--font);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
  }
  .desktop-profile__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(236, 230, 220, 0.04);
    color: var(--text);
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: var(--font);
    transition: background 150ms ease;
  }
  .desktop-profile__row:last-child {
    border-bottom: none;
  }
  .desktop-profile__row:hover {
    background: rgba(255, 255, 255, 0.04);
  }
  .desktop-profile__row-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--accent-glow);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .desktop-profile__row-icon--admin {
    border: 1px solid var(--accent-border);
  }
  .desktop-profile__row-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .desktop-profile__row-label {
    font: 500 14px var(--font);
    color: var(--text);
  }
  .desktop-profile__row-detail {
    font: 400 13px var(--font);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 320px;
  }
  .desktop-profile__row-chevron {
    flex: 0 0 auto;
    color: var(--text-muted);
    display: flex;
    align-items: center;
  }

  /* MIDDLE (alt) — icon strip when peek active. */
  .desktop-profile__icon-strip {
    flex: 0 0 52px;
    background: var(--card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    margin: 24px 8px 24px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    gap: 2px;
    align-self: flex-start;
    position: sticky;
    top: 24px;
  }
  .desktop-profile__icon-strip-btn {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 150ms ease;
  }
  .desktop-profile__icon-strip-btn:hover {
    background: rgba(255, 255, 255, 0.04);
  }
  .desktop-profile__icon-strip-btn.is-active {
    background: rgba(59, 124, 192, 0.18);
  }

  /* RIGHT — peek panel. */
  .desktop-profile__peek {
    flex: 1;
    border-left: 1px solid rgba(236, 230, 220, 0.05);
    background: var(--card);
    overflow: hidden;
    height: 100%;
    min-width: 320px;
  }
  .desktop-profile__peek-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .desktop-profile__peek-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 16px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(236, 230, 220, 0.06);
  }
  .desktop-profile__peek-title {
    font: 400 11px var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    white-space: nowrap;
  }
  .desktop-profile__peek-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .desktop-profile__peek-footer {
    padding: 16px 24px 24px;
    flex-shrink: 0;
    border-top: 1px solid rgba(236, 230, 220, 0.06);
  }
  .desktop-profile__peek-save {
    width: 100%;
    padding: 13px;
    font-size: 15px;
    white-space: nowrap;
  }

  /* Peek body shared bits. */
  .desktop-profile__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .desktop-profile__peek-label {
    font: 700 11px var(--font);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
  }
  .desktop-profile__peek-note {
    font: 400 12px var(--font);
    color: var(--text-muted);
    line-height: 1.5;
  }
  .desktop-profile__peek-note--coral {
    padding: 12px 14px;
    background: rgba(196, 114, 90, 0.07);
    border: 1px solid rgba(196, 114, 90, 0.2);
    border-radius: 10px;
    color: var(--coral);
  }
  .desktop-profile__peek-empty {
    padding: 16px;
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    color: var(--text-muted);
    font: 400 13px var(--font);
  }
  .desktop-profile__peek-add-btn {
    padding: 10px 14px;
    background: transparent;
    border: 1px dashed var(--border-card);
    border-radius: var(--radius);
    color: var(--text-muted);
    cursor: pointer;
    font: 500 13px var(--font);
    transition: border-color 150ms ease, color 150ms ease;
  }
  .desktop-profile__peek-add-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
  }
  .desktop-profile__peek-slider {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .desktop-profile__peek-slider input[type="range"] {
    flex: 1;
    accent-color: var(--accent);
  }
  .desktop-profile__peek-slider span {
    font: 400 15px var(--font-mono);
    color: var(--text);
    width: 50px;
    text-align: right;
  }

  /* Availability peek. */
  .desktop-profile__avail-mode-row {
    display: flex;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    padding: 4px;
    border-radius: 10px;
  }
  .desktop-profile__avail-mode-btn {
    flex: 1;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 7px;
    color: var(--text-muted);
    cursor: pointer;
    font: 500 13px var(--font);
    transition: background 150ms ease, color 150ms ease;
  }
  .desktop-profile__avail-mode-btn.is-active {
    background: var(--accent);
    color: var(--button-text-on-color);
  }
  .desktop-profile__avail-rule {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .desktop-profile__avail-day {
    width: 88px;
    flex-shrink: 0;
  }
  .desktop-profile__avail-time {
    flex: 1;
    min-width: 100px;
  }
  .desktop-profile__avail-sep {
    color: var(--text-muted);
    font-size: 13px;
    flex: 0 0 auto;
  }
  .desktop-profile__avail-remove {
    flex-shrink: 0;
  }

  /* Social peek. */
  .desktop-profile__social-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(236, 230, 220, 0.06);
  }
  .desktop-profile__social-row:last-child {
    border-bottom: none;
  }
  .desktop-profile__social-label {
    font: 500 14px var(--font);
    color: var(--text);
    width: 100px;
    flex-shrink: 0;
  }
  .desktop-profile__social-row .field-input {
    flex: 1;
  }

  /* Selfie peek. */
  .desktop-profile__selfie-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 32px 16px;
  }
  .desktop-profile__selfie-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .desktop-profile__selfie-icon.is-verified {
    background: rgba(122, 154, 110, 0.14);
  }
  .desktop-profile__selfie-icon.is-required {
    background: rgba(196, 114, 90, 0.14);
  }
  .desktop-profile__selfie-title {
    font: 700 18px var(--font);
    color: var(--text);
  }
  .desktop-profile__selfie-detail {
    font: 400 13px var(--font);
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 320px;
  }
  .desktop-profile__selfie-cta {
    margin-top: 8px;
  }

  /* Notifications peek. */
  .desktop-profile__notif-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0;
  }
  .desktop-profile__notif-label {
    flex: 1;
    min-width: 0;
  }
  .desktop-profile__toggle {
    position: relative;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
    cursor: pointer;
    display: inline-block;
  }
  .desktop-profile__toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }
  .desktop-profile__toggle-slider {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    transition: background 0.2s ease;
  }
  .desktop-profile__toggle-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: left 0.2s ease;
  }
  .desktop-profile__toggle input:checked + .desktop-profile__toggle-slider {
    background: var(--accent);
  }
  .desktop-profile__toggle input:checked + .desktop-profile__toggle-slider::before {
    left: 18px;
  }

  /* Appearance peek. */
  .desktop-profile__theme-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: var(--font);
    transition: background 150ms ease, border-color 150ms ease;
  }
  .desktop-profile__theme-card.is-active {
    background: rgba(59, 124, 192, 0.1);
    border-color: var(--accent-border);
  }
  .desktop-profile__theme-swatch {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(236, 230, 220, 0.12);
    flex-shrink: 0;
  }
  .desktop-profile__theme-swatch--dark {
    background: #0c0c10;
  }
  .desktop-profile__theme-swatch--light {
    background: #f4f3f0;
  }
  .desktop-profile__theme-swatch--device {
    background: linear-gradient(135deg, #0c0c10 50%, #f4f3f0 50%);
  }
  .desktop-profile__theme-text {
    flex: 1;
    min-width: 0;
  }
  .desktop-profile__theme-label {
    font: 500 14px var(--font);
    color: var(--text);
  }
  .desktop-profile__theme-card.is-active .desktop-profile__theme-label {
    color: var(--accent);
  }
  .desktop-profile__theme-desc {
    font: 400 12px var(--font);
    color: var(--text-muted);
    margin-top: 2px;
  }
  .desktop-profile__theme-check {
    flex: 0 0 auto;
    color: var(--accent);
  }

  /* Inline content sub-pages (about, faq, privacy, terms). The inline-content
     classes (.faq-item, .faq-q, .faq-a, .legal-copyright, .tos-list, etc.) are
     defined in style.css and cascade unchanged into this wrapper. */
  .desktop-profile__peek-content {
    max-width: 640px;
  }
}