/* ═══════════════════════════════════════════════════════════════════════════
   Desktop workspace
   The application stays touch-first below 1024px.  Above that breakpoint the
   same views become a keyboard/mouse-friendly workspace with a persistent
   rail, broad content panels and denser data layouts.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  :root {
    --desktop-rail-width: 244px;
    --desktop-content-width: 1520px;
  }

  body {
    background-image:
      radial-gradient(ellipse at 8% 15%, rgba(141, 124, 255, 0.19), transparent 31%),
      radial-gradient(ellipse at 92% 90%, rgba(0, 225, 255, 0.13), transparent 32%),
      linear-gradient(135deg, var(--bg) 0%, var(--bg-2) 100%);
  }

  .app-shell {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    margin: 0;
    padding: 28px 44px 56px calc(var(--desktop-rail-width) + 68px);
  }

  .app-shell::before {
    content: "";
    position: fixed;
    z-index: 90;
    top: 18px;
    bottom: 18px;
    left: 18px;
    width: calc(var(--desktop-rail-width) + 18px);
    border: 1px solid var(--line);
    border-radius: 24px;
    background:
      linear-gradient(180deg, rgba(15, 25, 60, 0.9), rgba(8, 13, 34, 0.78)),
      var(--surface);
    box-shadow: 0 18px 70px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    pointer-events: none;
  }

  .topbar,
  .hero-card,
  .sync-bar,
  .email-banner,
  main {
    width: min(100%, var(--desktop-content-width));
    margin-right: auto;
    margin-left: auto;
  }

  .topbar {
    min-height: 66px;
    margin-bottom: 24px;
    padding: 0 0 18px;
  }

  .topbar-logo {
    height: 48px;
  }

  .topbar-actions {
    gap: 12px;
  }

  .hero-card {
    min-height: 148px;
    margin-bottom: 28px;
    padding: 28px 32px;
    border-radius: 24px;
  }

  .progress-line strong {
    font-size: clamp(3.8rem, 5vw, 5.8rem);
  }

  .ring {
    width: 112px;
    height: 112px;
  }

  /* Persistent desktop navigation.  The actual mobile tabs remain the source
     of truth, so all current JavaScript navigation continues to work. */
  .tabs {
    position: fixed;
    z-index: 100;
    top: 104px;
    bottom: 38px;
    left: 32px;
    width: 216px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 54px 10px 12px;
  }

  .tabs::before {
    content: "NAVIGATION";
    position: absolute;
    top: 18px;
    left: 18px;
    color: var(--muted);
    font-family: var(--font-heading);
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.18em;
  }

  .tab {
    width: 100%;
    min-height: 48px;
    padding: 13px 16px;
    justify-content: flex-start;
    border-color: transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--muted);
    text-align: left;
    letter-spacing: 0.08em;
    box-shadow: none;
  }

  .tab:hover {
    transform: none;
    border-color: var(--line);
    background: rgba(255, 255, 255, 0.045);
    box-shadow: none;
  }

  .tab.active,
  .tab.active:hover {
    transform: none;
    border-color: rgba(0, 225, 255, 0.26);
    background: linear-gradient(90deg, rgba(0, 225, 255, 0.18), rgba(141, 124, 255, 0.15));
    box-shadow: inset 3px 0 0 var(--accent-2), 0 0 18px rgba(0, 225, 255, 0.08);
  }

  main {
    min-width: 0;
  }

  .view.active {
    animation: desktop-view-enter 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @keyframes desktop-view-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* A desktop swipe view becomes a two-column work area: card on the left,
     deliberate mouse/keyboard actions on the right. */
  #view-swipe.active {
    display: grid;
    grid-template-columns: minmax(400px, 610px) minmax(250px, 360px);
    grid-template-areas:
      "toolbar actions"
      "session actions"
      "deck actions"
      "hint hint";
    align-items: center;
    justify-content: center;
    gap: 18px 48px;
    min-height: 650px;
  }

  #view-swipe .deck-toolbar { grid-area: toolbar; margin: 0; }
  #view-swipe .swipe-session { grid-area: session; margin: 0; }
  #view-swipe .swipe-session-summary { grid-area: session; margin: 0; }
  #view-swipe .swipe-shortcut-guide { grid-area: session; align-self: end; margin: 0; transform: translateY(calc(100% + 10px)); }
  #view-swipe .deck-zone { grid-area: deck; min-height: 560px; }
  #view-swipe .swipe-actions {
    grid-area: actions;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-self: stretch;
    align-content: center;
    gap: 14px;
  }
  #view-swipe .hint { grid-area: hint; margin: 0; text-align: center; }

  .sprite-card {
    width: min(440px, 100%);
    min-height: 530px;
  }

  .swipe-actions .action {
    min-height: 112px;
    flex-direction: column;
    gap: 10px;
    font-size: 0.8rem;
  }

  .swipe-actions .action-icon {
    width: 30px;
    height: 30px;
  }

  /* Filters and data density are useful with a pointer and a wide viewport. */
  .checklist-toolbar {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) auto;
    align-items: center;
    gap: 14px 18px;
    margin-bottom: 18px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
  }

  .checklist-toolbar .search-box { grid-column: 1; grid-row: 1; }
  .checklist-toolbar .sort-bar { grid-column: 2; grid-row: 1; }
  .checklist-toolbar .filter-chips-bar {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    overflow: visible;
    padding: 0;
  }

  .bulk-actions {
    justify-content: flex-end;
    margin-bottom: 18px;
  }

  .cl-sprite__header {
    padding: 16px 20px;
  }

  /* Stats use the horizontal space as a dashboard rather than a stacked
     mobile feed. */
  .stats-page {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(330px, 0.8fr);
    align-items: start;
    gap: 20px;
  }

  .stats-page > .stats-hero { grid-column: 1; margin: 0; min-height: 172px; }
  .stats-page > .stats-kpis {
    grid-column: 2;
    margin: 0;
    height: 100%;
    align-content: stretch;
  }
  .stats-page > .stats-module { margin: 0; }
  .stats-page > .stats-insights,
  .stats-page > #communityStats { grid-column: 1 / -1; }

  .stats-kpi {
    display: grid;
    align-content: center;
    min-height: 100%;
  }

  /* Social, squad and comparison areas become panel-oriented rather than
     full-width phone lists. */
  .social-tabs {
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 24px;
  }

  .social-tab {
    flex: 0 0 auto;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: 10px 10px 0 0;
  }

  .social-tab.active {
    border-color: var(--line);
    border-bottom-color: var(--accent);
    background: var(--surface);
  }

  .friends-toolbar {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto auto;
    margin-bottom: 18px;
  }

  #friendsList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 12px;
  }

  .friend-item {
    min-height: 82px;
    padding: 14px;
  }

  .squad-cards {
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  }

  .squad-table-wrap,
  .compare-table__wrap {
    max-height: min(68vh, 760px);
  }

  .compare-summary-grid {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 14px;
  }
}

@media (min-width: 1440px) {
  .app-shell {
    padding-right: 64px;
    padding-left: calc(var(--desktop-rail-width) + 88px);
  }

  .hero-card {
    min-height: 164px;
  }

  #view-swipe.active {
    grid-template-columns: minmax(460px, 650px) minmax(280px, 390px);
    gap: 24px 72px;
  }

  .stats-page {
    grid-template-columns: minmax(0, 1.35fr) minmax(370px, 0.8fr);
  }
}

/* ── Checklist desktop: a dense collection directory with direct actions. ── */
@media (min-width: 1024px) {
  #view-checklist.active { animation: desktop-view-enter 260ms cubic-bezier(0.22, 1, 0.36, 1) both; }

  #view-checklist .checklist-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "search bulk"
      "sort bulk"
      "filters filters";
    gap: 14px 22px;
    margin-bottom: 22px;
    padding: 24px;
    border: 1px solid rgba(79, 111, 213, 0.25);
    border-radius: 22px;
    background:
      radial-gradient(circle at 16% 0%, rgba(73, 65, 221, 0.12), transparent 34%),
      rgba(11, 22, 55, 0.76);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 12px 34px rgba(0, 0, 0, 0.16);
  }

  #view-checklist .checklist-toolbar { display: contents; }
  #view-checklist .search-box { grid-area: search; max-width: 580px; }
  #view-checklist .sort-bar { grid-area: sort; }
  #view-checklist .filter-chips-bar {
    grid-area: filters;
    flex-wrap: wrap;
    gap: 10px;
    overflow: visible;
    padding: 4px 0 0;
  }
  #view-checklist .bulk-actions {
    grid-area: bulk;
    align-self: start;
    justify-content: flex-end;
    flex-wrap: nowrap;
    margin: 0;
  }

  #view-checklist .search-box input {
    height: 56px;
    padding-left: 48px;
    border-color: rgba(87, 113, 207, 0.27);
    border-radius: 15px;
    background: rgba(9, 18, 46, 0.8);
    font-family: var(--font-body);
    font-size: 0.88rem;
  }
  #view-checklist .search-box__icon { left: 17px; width: 20px; height: 20px; }
  #view-checklist .sort-bar__label { color: #93a0c8; font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0; text-transform: none; }
  #view-checklist .sort-bar__select {
    min-width: 196px;
    height: 46px;
    border-color: rgba(87, 113, 207, 0.25);
    border-radius: 13px;
    background-color: rgba(19, 32, 76, 0.76);
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0;
  }
  #view-checklist .filter-chip {
    padding: 9px 18px;
    border-color: rgba(91, 115, 200, 0.2);
    border-radius: 13px;
    color: #a9b4d9;
    background: rgba(22, 33, 75, 0.66);
    font-family: var(--font-body);
    font-size: 0.76rem;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
  }
  #view-checklist .filter-chip.active {
    border-color: rgba(167, 71, 255, 0.92);
    color: #f2eaff;
    background: linear-gradient(120deg, rgba(105, 49, 217, 0.94), rgba(171, 49, 228, 0.84));
    box-shadow: 0 0 16px rgba(168, 61, 244, 0.38);
  }
  #view-checklist .bulk-actions .ghost-button {
    min-height: 48px;
    padding: 0 15px;
    border-color: rgba(100, 80, 240, 0.45);
    border-radius: 13px;
    color: #b5a5ff;
    background: rgba(17, 22, 68, 0.64);
    font-family: var(--font-body);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
  }
  #view-checklist .bulk-actions .file-label { color: #4bc8ff; border-color: rgba(0, 171, 255, 0.43); }
  #view-checklist .bulk-actions .danger-text { color: #ff5278; border-color: rgba(255, 58, 110, 0.42); }

  #view-checklist .checklist-list { gap: 8px; }
  #view-checklist .cl-sprite {
    border-color: rgba(65, 111, 211, 0.26);
    border-radius: 20px;
    background:
      radial-gradient(circle at 3% 50%, color-mix(in srgb, var(--card-color) 15%, transparent), transparent 20%),
      linear-gradient(105deg, rgba(17, 35, 83, 0.78), rgba(9, 20, 53, 0.86));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), 0 8px 22px rgba(0, 0, 0, 0.13);
  }
  #view-checklist .cl-sprite:hover { border-color: rgba(48, 183, 255, 0.7); box-shadow: 0 0 22px rgba(0, 184, 255, 0.11); }
  #view-checklist .cl-sprite--open { border-color: rgba(33, 218, 255, 0.72); }
  #view-checklist .cl-sprite__header {
    display: grid;
    grid-template-columns: 82px minmax(160px, 1fr) minmax(115px, 160px) auto;
    gap: 18px;
    min-height: 116px;
    padding: 16px 24px;
  }
  #view-checklist .cl-sprite__avatar {
    width: 78px;
    height: 78px;
    border-color: color-mix(in srgb, var(--card-color) 42%, rgba(116, 141, 234, 0.24));
    border-radius: 16px;
    background: radial-gradient(circle, color-mix(in srgb, var(--card-color) 18%, transparent), rgba(13, 23, 61, 0.62));
    box-shadow: 0 0 18px color-mix(in srgb, var(--card-color) 20%, transparent);
  }
  #view-checklist .cl-sprite__name { color: #f5f6ff; font-size: 1.28rem; letter-spacing: 0.02em; }
  #view-checklist .cl-sprite__meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
  #view-checklist .cl-sprite__rarity {
    padding: 5px 11px;
    border: 1px solid color-mix(in srgb, var(--card-color) 58%, transparent);
    border-radius: 999px;
    color: color-mix(in srgb, var(--card-color) 72%, white);
    background: color-mix(in srgb, var(--card-color) 22%, transparent);
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  #view-checklist .cl-sprite__priority { color: #ffcc3d; font-family: var(--font-body); font-size: 0.76rem; font-weight: 700; }
  #view-checklist .cl-sprite__master { color: #ffdc73; font-family: var(--font-body); font-size: 0.76rem; font-weight: 800; }
  #view-checklist .cl-sprite__effect {
    display: block;
    max-width: 590px;
    margin-top: 9px;
    overflow: hidden;
    color: #aab6dd;
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #view-checklist .cl-sprite__progress {
    align-items: center;
    justify-content: center;
    gap: 13px;
  }
  #view-checklist .cl-sprite__progress > span {
    display: block;
    width: 46px;
    color: #96a5d0;
    font-size: 0.7rem;
    line-height: 1.25;
    text-align: center;
  }
  #view-checklist .cl-sprite__progress > span strong { display: block; color: #e3e8ff; font-size: 0.92rem; }
  #view-checklist .cl-sprite__bar { width: 116px; height: 9px; background: rgba(110, 129, 196, 0.19); }
  #view-checklist .cl-sprite__bar-fill { background: linear-gradient(90deg, #00cde8, #764dff); box-shadow: 0 0 9px rgba(53, 183, 255, 0.45); }
  #view-checklist .cl-sprite__inline-actions { gap: 14px; }
  #view-checklist .cl-sprite__detail,
  #view-checklist .cl-sprite__quick {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border-color: rgba(80, 112, 205, 0.28);
    color: #9badde;
    background: rgba(11, 25, 64, 0.78);
  }
  #view-checklist .cl-sprite__detail:hover { color: #42d8ff; border-color: rgba(42, 208, 255, 0.68); background: rgba(10, 84, 148, 0.17); }
  #view-checklist .cl-sprite__detail svg,
  #view-checklist .cl-sprite__quick svg { width: 24px; height: 24px; }
  #view-checklist .cl-sprite__quick--priority:hover,
  #view-checklist .cl-sprite__quick--priority.is-active { color: #ffcb38; border-color: rgba(255, 195, 41, 0.52); box-shadow: 0 0 16px rgba(255, 191, 32, 0.14); }
  #view-checklist .cl-sprite__quick--owned:hover,
  #view-checklist .cl-sprite__quick--owned.is-active { color: #17e998; border-color: rgba(20, 224, 151, 0.5); box-shadow: 0 0 16px rgba(0, 255, 135, 0.13); }
  #view-checklist .cl-sprite__chevron { width: 22px; height: 22px; margin-left: 4px; color: #98a8d2; }
  #view-checklist .cl-sprite__body { padding: 10px 24px 18px 122px; border-top-color: rgba(101, 125, 204, 0.16); }
  #view-checklist .cl-variant { min-height: 60px; }
  #view-checklist .cl-variant__mastery { min-width: 174px; padding: 7px 9px; border: 1px solid rgba(81, 113, 204, 0.2); border-radius: 10px; background: rgba(6, 17, 46, 0.33); }
  #view-checklist .cl-variant__mastery-label { min-width: 58px; font-size: 0.67rem; }
  #view-checklist .cl-mastery-btn { width: 24px; height: 24px; border-radius: 7px; font-size: 0.61rem; }
}

@media (min-width: 1320px) {
  #view-checklist .checklist-controls {
    grid-template-columns: minmax(340px, 1fr) 260px auto;
    grid-template-areas:
      "search sort bulk"
      "filters filters filters";
  }
  #view-checklist .sort-bar { justify-content: flex-end; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Desktop collector workspace — visual hierarchy and controls tailored to a
   wide screen. Mobile keeps its compact, touch-first interface untouched.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  :root {
    --desktop-rail-width: 244px;
    --desktop-content-width: 1360px;
  }

  body {
    background-image:
      radial-gradient(ellipse at 56% 9%, rgba(25, 69, 156, 0.2), transparent 30%),
      radial-gradient(ellipse at 88% 38%, rgba(72, 38, 173, 0.13), transparent 28%),
      linear-gradient(135deg, #040815 0%, #070d20 52%, #080d21 100%);
  }

  .app-shell {
    padding: 30px 44px 50px calc(var(--desktop-rail-width) + 62px);
  }

  .app-shell::before {
    top: 8px;
    bottom: 20px;
    left: 8px;
    width: calc(var(--desktop-rail-width) + 4px);
    border-color: rgba(100, 140, 255, 0.28);
    border-radius: 22px;
    background:
      radial-gradient(circle at 50% 8%, rgba(61, 68, 178, 0.24), transparent 23%),
      linear-gradient(180deg, rgba(10, 19, 48, 0.93), rgba(6, 13, 34, 0.91));
  }

  .desktop-rail {
    position: fixed;
    z-index: 98;
    top: 30px;
    bottom: 38px;
    left: 28px;
    width: 202px;
    pointer-events: none;
  }

  .desktop-rail__brand {
    display: flex;
    align-items: center;
    min-height: 78px;
  }

  .desktop-rail__logo {
    display: block;
    width: 100%;
    height: auto;
    max-height: 72px;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 0 14px rgba(0, 225, 255, 0.28));
  }

  .desktop-rail__logo-frame {
    display: none;
  }

  .desktop-rail__brand-copy {
    display: none;
  }

  .desktop-rail__section-label {
    position: absolute;
    top: 150px;
    left: 14px;
    color: rgba(151, 167, 219, 0.55);
    font-family: var(--font-heading);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .desktop-rail__collection {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 18px;
    border: 1px solid rgba(109, 135, 230, 0.2);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(21, 35, 78, 0.77), rgba(9, 17, 42, 0.7));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  }

  .desktop-rail__collection > span {
    margin-bottom: 9px;
    color: rgba(211, 220, 255, 0.8);
    font-size: 0.76rem;
  }

  .desktop-rail__collection strong {
    color: var(--text);
    font-family: var(--font-heading);
    font-size: 1.85rem;
    letter-spacing: 0.02em;
  }

  .desktop-rail__collection strong b:last-child,
  .desktop-rail__collection strong i {
    color: #8793c8;
    font-style: normal;
    font-size: 1.14rem;
  }

  .desktop-rail__collection small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.67rem;
  }

  .desktop-rail__collection > div {
    height: 6px;
    margin-top: 16px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(128, 149, 224, 0.17);
  }

  .desktop-rail__collection > div > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-2), #7088ff);
    box-shadow: 0 0 12px rgba(0, 225, 255, 0.55);
    transition: width 400ms ease;
  }

  .tabs {
    top: 190px;
    bottom: 172px;
    left: 28px;
    width: 202px;
    justify-content: flex-start;
    gap: 8px;
    padding: 20px 0 0;
  }

  .tabs::before { display: none; }

  .tab {
    min-height: 46px;
    padding: 11px 15px;
    color: #aab6e3;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0;
  }

  .tab__icon {
    width: 20px;
    height: 20px;
    color: #8e9dcd;
  }

  .tab.active,
  .tab.active:hover {
    color: #f5f7ff;
    border-color: rgba(108, 117, 255, 0.85);
    background: linear-gradient(105deg, rgba(0, 189, 255, 0.3), rgba(112, 65, 232, 0.46));
    box-shadow: inset 2px 0 0 #16d8ff, 0 0 18px rgba(133, 72, 255, 0.36);
  }

  .tab.active .tab__icon { color: #fff; }

  .topbar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(275px, 0.72fr) auto;
    align-items: center;
    gap: 26px;
    min-height: 62px;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border: 0;
  }

  .topbar-brand { display: none; }

  .desktop-page-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
  }

  .desktop-page-heading__icon {
    display: grid;
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(113, 135, 237, 0.35);
    border-radius: 15px;
    color: #c2d3ff;
    background: linear-gradient(145deg, rgba(20, 36, 85, 0.8), rgba(11, 20, 52, 0.75));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  .desktop-page-heading__icon svg { width: 27px; height: 27px; }

  .desktop-page-heading h1 {
    color: #f6f7ff;
    font-family: var(--font-body);
    font-size: clamp(1.5rem, 2vw, 1.9rem);
    font-weight: 750;
    letter-spacing: -0.04em;
    line-height: 1;
    text-transform: none;
  }

  .desktop-page-heading p {
    margin-top: 7px;
    overflow: hidden;
    color: #98a6d0;
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .desktop-command-search {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    height: 48px;
    padding: 0 12px 0 16px;
    border: 1px solid rgba(95, 123, 220, 0.26);
    border-radius: 15px;
    color: #9dabd5;
    background: rgba(8, 16, 42, 0.78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  }

  .desktop-command-search:focus-within {
    border-color: rgba(0, 225, 255, 0.7);
    box-shadow: 0 0 0 3px rgba(0, 225, 255, 0.08);
  }

  .desktop-command-search svg { width: 19px; height: 19px; flex: 0 0 auto; }
  .desktop-command-search input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    color: var(--text);
    background: transparent;
    font-size: 0.8rem;
  }
  .desktop-command-search input::placeholder { color: #9ba8ce; }
  .desktop-command-search kbd {
    padding: 4px 7px;
    border: 1px solid rgba(143, 163, 229, 0.19);
    border-radius: 6px;
    color: #9eadd6;
    background: rgba(255, 255, 255, 0.035);
    font-family: var(--font-body);
    font-size: 0.66rem;
  }

  .topbar-actions { gap: 12px; }
  .notif-bell, .icon-button, .topbar-avatar {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    border-color: rgba(105, 129, 224, 0.28);
    background: rgba(10, 19, 48, 0.7);
  }

  .hero-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(170px, 0.42fr);
    align-items: center;
    min-height: 172px;
    margin-bottom: 20px;
    padding: 22px 38px;
    border-color: rgba(92, 137, 255, 0.52);
    border-radius: 23px;
    background:
      radial-gradient(circle at 17% 48%, rgba(0, 195, 255, 0.23), transparent 23%),
      radial-gradient(circle at 82% 0%, rgba(103, 65, 225, 0.24), transparent 34%),
      linear-gradient(102deg, rgba(10, 39, 89, 0.88), rgba(12, 24, 70, 0.91) 60%, rgba(13, 16, 55, 0.9));
    box-shadow: 0 14px 48px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }

  .hero-card::after {
    content: "";
    position: absolute;
    right: -8%;
    bottom: -75%;
    width: 82%;
    height: 130%;
    border-radius: 50%;
    border-top: 1px solid rgba(78, 208, 255, 0.3);
    border-bottom: 1px solid rgba(135, 74, 255, 0.35);
    transform: rotate(-10deg);
    pointer-events: none;
  }

  .hero-card__overview {
    display: flex;
    align-items: center;
    gap: 26px;
    min-width: 0;
  }

  .hero-card__icon {
    display: grid;
    width: 86px;
    height: 86px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(20, 204, 255, 0.65);
    border-radius: 50%;
    color: #20d9ff;
    background: radial-gradient(circle, rgba(21, 101, 197, 0.62), rgba(8, 24, 72, 0.78));
    box-shadow: 0 0 0 9px rgba(0, 203, 255, 0.07), 0 0 25px rgba(0, 203, 255, 0.33);
  }

  .hero-card__icon svg { width: 43px; height: 43px; }
  .hero-card .muted {
    color: #20c8f6;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .hero-card .progress-line { margin-top: 9px; }
  .hero-card .progress-line strong {
    color: #fff;
    font-size: clamp(3.1rem, 4.4vw, 4.2rem);
    background: none;
    -webkit-text-fill-color: currentColor;
  }
  .hero-card__caption { margin-top: 6px; color: #c0c9ea; font-size: 0.84rem; }

  .hero-card .ring {
    position: relative;
    z-index: 1;
    width: 122px;
    height: 122px;
    border-color: rgba(111, 150, 255, 0.57);
    box-shadow: 0 0 0 10px rgba(73, 113, 236, 0.1), 0 0 26px rgba(0, 218, 255, 0.22);
  }
  .hero-card .ring span { font-size: 1.45rem; }
  .hero-card__remaining {
    position: relative;
    z-index: 1;
    margin-left: 22px;
    color: #c5ccea;
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.55;
  }
  .hero-card__remaining strong { color: #f4f6ff; }

  #view-swipe.active {
    grid-template-columns: minmax(360px, 500px) minmax(300px, 420px);
    grid-template-areas:
      "toolbar toolbar"
      "session actions"
      "deck actions"
      "hint hint";
    align-items: start;
    justify-content: center;
    gap: 10px 38px;
    min-height: 0;
    padding-top: 0;
  }

  #view-swipe .deck-toolbar {
    width: 100%;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 0 0 2px;
  }

  #view-swipe .deck-toolbar select,
  #view-swipe .deck-toolbar .ghost-button {
    min-width: 205px;
    height: 52px;
    padding: 0 18px;
    border-color: rgba(91, 119, 214, 0.38);
    border-radius: 14px;
    color: #e0e6ff;
    background-color: rgba(13, 25, 62, 0.78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  }

  #view-swipe .deck-toolbar .ghost-button {
    min-width: 160px;
    color: #c0cbe9;
    font-size: 0.76rem;
  }

  #view-swipe .deck-zone { min-height: 0; height: clamp(390px, calc(100dvh - 340px), 520px); }
  #view-swipe .sprite-card {
    width: min(100%, 460px);
    min-height: 0;
    height: 100%;
    padding: clamp(15px, 2.2vh, 24px) 30px 18px;
    border-color: rgba(38, 205, 255, 0.72);
    border-radius: 22px;
    background:
      radial-gradient(ellipse at 50% 25%, rgba(34, 100, 215, 0.55), transparent 49%),
      linear-gradient(165deg, rgba(10, 31, 83, 0.95), rgba(8, 14, 42, 0.96));
    box-shadow: 0 0 0 1px rgba(110, 65, 255, 0.36), 0 18px 60px rgba(0, 0, 0, 0.45), 0 0 28px rgba(0, 208, 255, 0.2);
  }
  #view-swipe .sprite-avatar { width: clamp(118px, 19vh, 180px); height: clamp(118px, 19vh, 180px); margin-bottom: 6px; }
  #view-swipe .sprite-card h2 { font-size: clamp(1.55rem, 3vw, 2.65rem); }
  #view-swipe .effect { max-width: 350px; }
  #view-swipe .swipe-actions {
    gap: 14px;
    padding-top: 0;
    grid-auto-rows: 1fr;
  }
  #view-swipe .swipe-actions .action {
    min-height: 0;
    padding: clamp(12px, 2.5vh, 24px) 16px;
    border-radius: 21px;
    background: linear-gradient(150deg, rgba(21, 32, 77, 0.78), rgba(8, 15, 39, 0.9));
  }
  #view-swipe .swipe-actions .action-icon { width: 43px; height: 43px; }
  #view-swipe .swipe-actions .action span { color: #f2f4ff; font-family: var(--font-body); font-size: 1rem; font-weight: 750; letter-spacing: -0.02em; text-transform: none; }
  #view-swipe .swipe-actions .action__hint { display: block; color: #aeb9df; font-size: 0.78rem; }
  #view-swipe .swipe-actions .action__key { display: block; }
  #view-swipe .swipe-actions .action.danger { border-color: rgba(255, 70, 118, 0.62); }
  #view-swipe .swipe-actions .action.neutral { border-color: rgba(154, 102, 255, 0.58); }
  #view-swipe .swipe-actions .action.star { border-color: rgba(255, 196, 49, 0.58); }
  #view-swipe .swipe-actions .action.success { border-color: rgba(26, 225, 164, 0.5); }

  #view-swipe .hint {
    width: min(100%, 930px);
    min-height: 48px;
    margin-top: 8px;
    padding: 12px 20px;
    border: 1px solid rgba(84, 108, 197, 0.14);
    border-radius: 14px;
    color: #8390bd;
    background: rgba(12, 22, 52, 0.68);
    font-size: 0.72rem;
    text-align: left;
  }

  @media (max-height: 760px) {
    #view-swipe.active { gap: 8px 30px; }
    #view-swipe .deck-toolbar select, #view-swipe .deck-toolbar .ghost-button { height: 44px; }
    #view-swipe .deck-zone { height: clamp(340px, calc(100dvh - 300px), 430px); }
    #view-swipe .sprite-card { padding: 13px 22px; }
    #view-swipe .sprite-avatar { width: clamp(100px, 16vh, 138px); height: clamp(100px, 16vh, 138px); }
    #view-swipe .swipe-actions .action { padding: 10px; }
    #view-swipe .swipe-actions .action-icon { width: 32px; height: 32px; }
    #view-swipe .swipe-actions .action__hint, #view-swipe .hint { display: none; }
  }

}

@media (max-width: 1023px) {
  .desktop-rail,
  .desktop-page-heading,
  .desktop-command-search,
  .hero-card__icon,
  .hero-card__caption,
  .hero-card__remaining { display: none; }
}

@media (min-width: 1440px) {
  #view-swipe.active {
    grid-template-columns: minmax(440px, 520px) minmax(410px, 500px);
    gap: 16px 58px;
  }
  #view-swipe .deck-zone { min-height: 570px; }
  #view-swipe .swipe-actions .action { min-height: 225px; }
}

/* ── Checklist: desktop interaction polish ────────────────────────────────
   This deliberately stays presentation-only: the existing list, filters and
   direct actions keep their current markup and behaviour. */
@media (min-width: 1024px) {
  #view-checklist .checklist-controls {
    position: sticky;
    top: 12px;
    z-index: 8;
    isolation: isolate;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  #view-checklist .checklist-controls::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(115deg, rgba(24, 42, 102, 0.14), transparent 42%);
    pointer-events: none;
  }

  /* The status / rarity / priority chips can grow with catalogue data.  A
     small label makes this large control group scannable without adding new
     UI or changing any filter logic. */
  #view-checklist .filter-chips-bar {
    align-items: center;
    padding-top: 8px;
  }

  #view-checklist .filter-chips-bar::before {
    content: "Filtres";
    align-self: center;
    margin-right: 2px;
    color: rgba(149, 165, 219, 0.72);
    font-family: var(--font-heading);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  #view-checklist .filter-chip {
    min-height: 36px;
  }

  #view-checklist .filter-chip:hover:not(.active) {
    border-color: rgba(79, 201, 255, 0.54);
    color: #e3edff;
    background: rgba(32, 57, 122, 0.76);
    transform: translateY(-1px);
  }

  #view-checklist .filter-chip:focus-visible,
  #view-checklist .search-box input:focus-visible,
  #view-checklist .sort-bar__select:focus-visible,
  #view-checklist .ghost-button:focus-visible,
  #view-checklist .cl-sprite__header:focus-visible,
  #view-checklist .cl-sprite__detail:focus-visible,
  #view-checklist .cl-sprite__quick:focus-visible,
  #view-checklist .cl-btn:focus-visible,
  #view-checklist .cl-mastery-btn:focus-visible {
    outline: 2px solid #52dbff;
    outline-offset: 3px;
  }

  #view-checklist .checklist-list {
    gap: 12px;
    padding-bottom: 18px;
  }

  #view-checklist .cl-sprite {
    position: relative;
    transform: translateZ(0);
  }

  #view-checklist .cl-sprite::before {
    content: "";
    position: absolute;
    top: 18px;
    bottom: 18px;
    left: 0;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, transparent, var(--card-color), transparent);
    opacity: 0;
    transition: opacity 180ms ease;
  }

  #view-checklist .cl-sprite:hover::before,
  #view-checklist .cl-sprite--open::before { opacity: 0.9; }

  #view-checklist .cl-sprite__header {
    position: relative;
  }

  #view-checklist .cl-sprite__header:hover {
    background: linear-gradient(90deg, rgba(65, 126, 235, 0.07), transparent 48%);
  }

  #view-checklist .cl-sprite__progress {
    min-height: 58px;
    padding-left: 20px;
    border-left: 1px solid rgba(105, 129, 204, 0.18);
  }

  #view-checklist .cl-sprite__inline-actions {
    padding-left: 6px;
    border-left: 1px solid rgba(105, 129, 204, 0.14);
  }

  #view-checklist .cl-sprite__detail,
  #view-checklist .cl-sprite__quick {
    transition: transform 170ms ease, color 170ms ease, border-color 170ms ease, background 170ms ease, box-shadow 170ms ease;
  }

  #view-checklist .cl-sprite__detail:hover,
  #view-checklist .cl-sprite__quick:hover {
    transform: translateY(-2px);
  }

  #view-checklist .cl-sprite__body {
    background: linear-gradient(180deg, rgba(4, 12, 35, 0.18), rgba(4, 12, 35, 0.42));
  }

  #view-checklist .cl-variant {
    min-height: 68px;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: 13px;
  }

  #view-checklist .cl-variant + .cl-variant { margin-top: 4px; }

  #view-checklist .cl-variant:hover {
    border-color: rgba(91, 126, 225, 0.2);
    background: rgba(37, 57, 118, 0.26);
  }

  #view-checklist .cl-variant__thumb {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  #view-checklist .cl-variant__name {
    color: #dfe7ff;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
  }

  #view-checklist .cl-variant__status {
    justify-content: center;
    min-width: 112px;
    padding: 7px 10px;
    border: 1px solid rgba(105, 129, 204, 0.16);
    border-radius: 999px;
    color: #aab8e0;
    background: rgba(7, 17, 48, 0.42);
    font-size: 0.7rem;
    white-space: nowrap;
  }

  #view-checklist .cl-variant__actions { gap: 7px; }
  #view-checklist .cl-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }
  #view-checklist .cl-btn:hover { transform: translateY(-1px); }

  #view-checklist .cl-variant__mastery--master {
    border-color: rgba(255, 204, 82, 0.3);
    background: linear-gradient(100deg, rgba(255, 187, 34, 0.12), rgba(116, 74, 15, 0.08));
  }

  #view-checklist .cl-sprite:has(.cl-sprite__master) {
    border-color: rgba(220, 174, 70, 0.4);
  }
}

/* Keep the directory usable on smaller desktop windows: cards remain dense
   without their action group forcing horizontal overflow. */
@media (min-width: 1024px) and (max-width: 1239px) {
  #view-checklist .checklist-controls { padding: 18px; }
  #view-checklist .bulk-actions .ghost-button { padding: 0 11px; }
  #view-checklist .filter-chips-bar::before { display: none; }
  #view-checklist .cl-sprite__header {
    grid-template-columns: 66px minmax(120px, 1fr) minmax(95px, 124px) auto;
    gap: 12px;
    min-height: 96px;
    padding: 14px 16px;
  }
  #view-checklist .cl-sprite__avatar { width: 64px; height: 64px; border-radius: 14px; }
  #view-checklist .cl-sprite__name { font-size: 1.06rem; }
  #view-checklist .cl-sprite__effect { display: none; }
  #view-checklist .cl-sprite__progress { gap: 8px; padding-left: 12px; }
  #view-checklist .cl-sprite__bar { width: 72px; }
  #view-checklist .cl-sprite__inline-actions { gap: 8px; padding-left: 0; border-left: 0; }
  #view-checklist .cl-sprite__detail,
  #view-checklist .cl-sprite__quick { width: 44px; height: 44px; }
  #view-checklist .cl-sprite__detail svg,
  #view-checklist .cl-sprite__quick svg { width: 20px; height: 20px; }
  #view-checklist .cl-sprite__body { padding-left: 94px; padding-right: 16px; }
  #view-checklist .cl-variant__mastery { min-width: 158px; }
}

@media (prefers-reduced-motion: reduce) {
  #view-checklist .filter-chip,
  #view-checklist .cl-sprite::before,
  #view-checklist .cl-sprite__detail,
  #view-checklist .cl-sprite__quick,
  #view-checklist .cl-btn { transition: none; }
}

/* ── Missing: desktop farm board ──────────────────────────────────────────
   The mobile list intentionally remains a simple vertical feed.  Desktop has
   enough room to make priorities and variant families scannable as a work
   board, while retaining the existing server/client filtering and quick-own
   button markup. */
@media (min-width: 1024px) {
  #view-missing {
    width: min(100%, 1400px);
    margin-inline: auto;
  }

  #view-missing > .section-heading {
    min-height: 74px;
    margin-bottom: 18px;
    padding: 4px 0 17px;
    border-bottom: 1px solid rgba(109, 137, 228, 0.17);
  }

  #view-missing > .section-heading h2 {
    font-size: clamp(1.85rem, 2.3vw, 2.55rem);
    letter-spacing: 0.035em;
  }

  #view-missing > .section-heading .ghost-button {
    min-height: 42px;
    padding-inline: 17px;
    border-color: rgba(76, 190, 255, 0.38);
    color: #c9eaff;
    background: linear-gradient(135deg, rgba(24, 75, 152, 0.36), rgba(23, 29, 86, 0.34));
  }

  #view-missing > .section-heading .ghost-button:hover {
    border-color: rgba(90, 224, 255, 0.78);
    color: #fff;
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.16);
  }

  #view-missing .missing-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
    padding-bottom: 28px;
  }

  /* The filter notice and collection readout are navigation landmarks, not
     cards competing with an individual priority group. */
  #view-missing .farm-event-filter,
  #view-missing .farm-summary,
  #view-missing .empty-state {
    grid-column: 1 / -1;
  }

  #view-missing .farm-event-filter {
    min-height: 56px;
    margin: 0;
    padding: 10px 12px 10px 18px;
    border-color: rgba(83, 213, 255, 0.3);
    background:
      linear-gradient(90deg, rgba(0, 201, 255, 0.13), rgba(87, 82, 230, 0.06) 54%, transparent),
      rgba(8, 19, 53, 0.72);
    box-shadow: inset 3px 0 0 var(--accent-2);
  }

  #view-missing .farm-event-filter__text {
    font-size: 0.86rem;
    letter-spacing: 0.055em;
  }

  #view-missing .farm-summary {
    display: grid;
    grid-template-columns: minmax(210px, 0.9fr) minmax(260px, 1.45fr) minmax(130px, 0.45fr);
    align-items: center;
    gap: 22px;
    min-height: 116px;
    margin: 0;
    padding: 20px 26px;
    overflow: hidden;
    text-align: left;
    border-color: rgba(65, 155, 255, 0.32);
    background:
      radial-gradient(circle at 83% 50%, rgba(111, 81, 255, 0.19), transparent 26%),
      linear-gradient(110deg, rgba(7, 41, 95, 0.92), rgba(14, 20, 64, 0.86) 62%, rgba(27, 17, 76, 0.82));
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18), inset 0 1px rgba(186, 223, 255, 0.08);
  }

  #view-missing .farm-summary::before {
    content: "Objectif collection";
    position: absolute;
    top: 15px;
    left: 26px;
    color: rgba(108, 215, 255, 0.84);
    font-family: var(--font-heading);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  #view-missing .farm-summary__count {
    padding-top: 13px;
    color: #b9c6ec;
    font-size: 0.86rem;
  }

  #view-missing .farm-summary__count strong {
    display: inline;
    margin-right: 7px;
    color: #f3f7ff;
    font-size: clamp(2.15rem, 3vw, 3rem);
    line-height: 0.8;
  }

  #view-missing .farm-summary__bar {
    width: 100%;
    max-width: none;
    height: 12px;
    margin: 0;
    border-color: rgba(114, 157, 236, 0.24);
    background: rgba(0, 6, 27, 0.58);
    box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.28);
  }

  #view-missing .farm-summary__fill {
    background: linear-gradient(90deg, #28b8ff, #27dffc 54%, #34f1a8);
    box-shadow: 0 0 14px rgba(31, 220, 255, 0.48);
  }

  #view-missing .farm-summary__pct {
    margin: 0;
    color: #d6e0fd;
    font-size: 0.75rem;
    line-height: 1.35;
    text-align: right;
  }

  #view-missing .farm-section {
    --farm-accent: #52cfff;
    position: relative;
    margin: 0;
    padding: 15px;
    overflow: hidden;
    border: 1px solid rgba(88, 119, 207, 0.24);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(19, 38, 91, 0.68), rgba(9, 17, 47, 0.72));
    box-shadow: inset 0 1px rgba(182, 207, 255, 0.045);
    transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
  }

  #view-missing .farm-section::before {
    content: "";
    position: absolute;
    top: 0;
    right: 18px;
    left: 18px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--farm-accent), transparent);
    opacity: 0.78;
  }

  #view-missing .farm-section:hover {
    border-color: color-mix(in srgb, var(--farm-accent) 44%, rgba(103, 128, 215, 0.34));
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14), 0 0 20px color-mix(in srgb, var(--farm-accent) 9%, transparent);
    transform: translateY(-2px);
  }

  #view-missing .farm-section--urgent { --farm-accent: #ff627c; }
  #view-missing .farm-section--important { --farm-accent: #ffd15c; }
  #view-missing .farm-section--medium { --farm-accent: #f6a44a; }
  #view-missing .farm-section--low { --farm-accent: #8797c8; }
  #view-missing .farm-section--spotted { --farm-accent: #eb82ff; }
  #view-missing .farm-section--gold { --farm-accent: #ffd85a; }
  #view-missing .farm-section--galaxy { --farm-accent: #86eaff; }
  #view-missing .farm-section--gem { --farm-accent: #e37aff; }
  #view-missing .farm-section--holofoil { --farm-accent: #b1baff; }
  #view-missing .farm-section--rift { --farm-accent: #ff81b2; }

  #view-missing .farm-section__title {
    min-height: 34px;
    margin: 0 0 10px;
    padding: 0 0 9px;
    border-bottom: 1px solid color-mix(in srgb, var(--farm-accent) 18%, transparent);
    color: var(--farm-accent);
    font-size: 0.82rem;
    letter-spacing: 0.085em;
  }

  #view-missing .farm-section__count {
    min-width: 26px;
    margin-left: auto;
    padding: 3px 8px;
    border-color: color-mix(in srgb, var(--farm-accent) 30%, transparent);
    color: var(--farm-accent);
    background: color-mix(in srgb, var(--farm-accent) 9%, transparent);
    text-align: center;
  }

  #view-missing .farm-section__list { gap: 7px; }

  #view-missing .farm-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto 20px 36px;
    gap: 11px;
    min-height: 62px;
    padding: 9px 10px;
    border-color: rgba(104, 132, 218, 0.13);
    border-radius: 13px;
    background: rgba(6, 14, 43, 0.36);
  }

  #view-missing .farm-item:hover,
  #view-missing .farm-item:focus-within {
    border-color: color-mix(in srgb, var(--farm-accent) 34%, rgba(108, 139, 228, 0.26));
    background: linear-gradient(90deg, color-mix(in srgb, var(--farm-accent) 8%, rgba(16, 30, 78, 0.72)), rgba(9, 18, 50, 0.62));
  }

  #view-missing .farm-item__avatar {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border-color: color-mix(in srgb, var(--farm-accent) 24%, rgba(255, 255, 255, 0.08));
    background: radial-gradient(circle at 42% 30%, color-mix(in srgb, var(--farm-accent) 15%, transparent), rgba(5, 11, 38, 0.52));
  }

  #view-missing .farm-item__info { gap: 3px; }
  #view-missing .farm-item__name { color: #e7edff; font-size: 0.82rem; }
  #view-missing .farm-item__variant { color: #9fcfff; font-size: 0.66rem; }

  #view-missing .farm-item__rarity {
    align-self: center;
    padding: 4px 7px;
    border: 1px solid rgba(128, 150, 225, 0.18);
    border-radius: 999px;
    color: #aebbe5;
    background: rgba(24, 36, 84, 0.38);
    font-size: 0.6rem;
    text-align: center;
  }

  #view-missing .farm-item__status {
    display: grid;
    align-self: center;
    place-items: center;
  }

  #view-missing .farm-item__mark {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    border-color: rgba(25, 231, 169, 0.3);
    background: rgba(5, 72, 63, 0.24);
  }

  #view-missing .farm-item__mark:hover {
    transform: translateY(-1px);
    border-color: rgba(29, 245, 177, 0.86);
    background: rgba(0, 255, 161, 0.16);
    box-shadow: 0 0 16px rgba(0, 255, 161, 0.18);
  }

  #view-missing .farm-item__mark:focus-visible,
  #view-missing > .section-heading .ghost-button:focus-visible,
  #view-missing .farm-event-filter .ghost-button:focus-visible {
    outline: 2px solid #60e4ff;
    outline-offset: 3px;
  }

  #view-missing .empty-state {
    margin: 0;
    padding: 56px 30px;
    border-color: rgba(86, 144, 232, 0.24);
    background: radial-gradient(circle at 50% 0, rgba(42, 127, 237, 0.15), transparent 42%), var(--surface);
  }
}

/* Compact desktop remains a deliberate single-column task list.  This avoids
   turning names, rarity pills and the quick-own control into a cramped row. */
@media (min-width: 1024px) and (max-width: 1239px) {
  #view-missing .missing-list { grid-template-columns: minmax(0, 1fr); }

  #view-missing .farm-summary {
    grid-template-columns: minmax(190px, 0.7fr) minmax(200px, 1.3fr) auto;
    gap: 16px;
    padding-inline: 21px;
  }

  #view-missing .farm-summary::before { left: 21px; }
  #view-missing .farm-item { grid-template-columns: 42px minmax(0, 1fr) auto 20px 36px; }
}

@media (prefers-reduced-motion: reduce) {
  #view-missing .farm-section,
  #view-missing .farm-item,
  #view-missing .farm-item__mark { transition: none; }
}

@media (min-width: 1024px) {
  #view-missing .missing-controls {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto auto;
    grid-template-areas: "search filters sort reset";
    gap: 12px;
    margin-bottom: 20px;
    padding: 14px 16px;
    border-color: rgba(84, 124, 220, 0.26);
    background: linear-gradient(105deg, rgba(16, 37, 92, 0.78), rgba(8, 18, 52, 0.78));
    box-shadow: inset 0 1px rgba(181, 213, 255, 0.05);
  }
  #view-missing .missing-controls__search { grid-area: search; min-width: 0; }
  #view-missing .missing-controls__search input { height: 46px; background-color: rgba(5, 14, 42, 0.55); }
  #view-missing .missing-filter-chips { grid-area: filters; flex: 0 1 auto; overflow: visible; }
  #view-missing .missing-filter-chips .filter-chip { min-height: 40px; padding-inline: 12px; }
  #view-missing .missing-controls__sort { grid-area: sort; margin: 0; }
  #view-missing .missing-controls__sort .sort-bar__select { height: 40px; min-width: 154px; }
  #view-missing .missing-controls__reset { grid-area: reset; min-height: 40px; white-space: nowrap; }

  #view-missing .farm-section__toggle { min-height: 30px; }
  #view-missing .farm-section__toggle:hover { color: #f4f7ff; }
  #view-missing .farm-item { grid-template-columns: 42px minmax(0, 1fr) auto 20px auto; }
  #view-missing .farm-item__actions { gap: 6px; }
  #view-missing .farm-item__detail,
  #view-missing .farm-item__priority { height: 36px; border-color: rgba(104, 132, 218, 0.2); background: rgba(8, 19, 53, 0.5); }
  #view-missing .farm-item__detail { padding-inline: 10px; color: #9fcbff; }
  #view-missing .farm-item__detail:hover,
  #view-missing .farm-item__priority:hover { transform: translateY(-1px); }
  #view-missing .missing-empty { grid-column: 1 / -1; min-height: 268px; background: radial-gradient(circle at 50% 10%, rgba(44, 125, 235, 0.13), transparent 44%), var(--surface); }
}

@media (min-width: 1024px) and (max-width: 1239px) {
  #view-missing .missing-controls {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "search sort" "filters reset";
  }
  #view-missing .missing-filter-chips { flex-wrap: wrap; }
  #view-missing .farm-item__detail { display: none; }
}

/* ── Stats: desktop collection command centre ────────────────────────────
   The Stats markup is intentionally shared with mobile.  These rules only
   reorganise the existing data blocks at desktop widths into a dashboard:
   collection hero, key figures, two analysis panels, then short insights.
   No totals or labels are duplicated in JS, so all figures remain live. */
@media (min-width: 1024px) {
  #view-stats {
    width: min(100%, 1400px);
    margin-inline: auto;
  }

  #view-stats .stats-page {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
  }

  #view-stats .stats-hero {
    position: relative;
    isolation: isolate;
    grid-column: 1 / -1;
    min-height: 188px;
    padding: 30px 38px;
    overflow: hidden;
    border-color: rgba(69, 167, 255, 0.68);
    border-radius: 22px;
    background:
      radial-gradient(circle at 74% 50%, rgba(119, 61, 255, 0.33), transparent 23%),
      radial-gradient(circle at 15% 31%, rgba(0, 185, 255, 0.24), transparent 26%),
      linear-gradient(105deg, rgba(9, 48, 112, 0.96) 0%, rgba(15, 25, 89, 0.93) 54%, rgba(39, 14, 86, 0.94) 100%);
    box-shadow: inset 0 1px 0 rgba(203, 234, 255, 0.18), 0 16px 40px rgba(0, 0, 0, 0.2), 0 0 32px rgba(51, 91, 255, 0.13);
  }

  #view-stats .stats-hero::before {
    content: "✦";
    position: absolute;
    z-index: -1;
    top: 12px;
    right: 28%;
    color: rgba(126, 226, 255, 0.76);
    font-size: 1.3rem;
    text-shadow: 0 0 14px #2ad7ff;
  }

  #view-stats .stats-hero::after {
    content: "COLLECTION ACTIVE";
    position: absolute;
    right: 34px;
    bottom: 26px;
    color: rgba(215, 224, 255, 0.64);
    font-family: var(--font-heading);
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.16em;
  }

  #view-stats .stats-hero__ring {
    order: 2;
    width: 128px;
    height: 128px;
    margin-left: auto;
    filter: drop-shadow(0 0 15px rgba(105, 53, 255, 0.36));
  }

  #view-stats .stats-hero__ring::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -13px;
    border: 1px solid rgba(153, 92, 255, 0.24);
    border-radius: 50%;
    box-shadow: 0 0 0 8px rgba(35, 31, 97, 0.18);
  }

  #view-stats .stats-hero__pct {
    color: #f5f6ff;
    font-family: var(--font-body);
    font-size: 1.56rem;
    text-shadow: 0 0 14px rgba(116, 255, 250, 0.36);
  }

  #view-stats .stats-hero__text {
    position: relative;
    z-index: 1;
    min-width: 310px;
    padding-left: 104px;
  }

  #view-stats .stats-hero__text::before {
    content: "▣";
    position: absolute;
    top: 50%;
    left: 0;
    display: grid;
    width: 76px;
    height: 76px;
    place-items: center;
    border: 1px solid rgba(35, 202, 255, 0.56);
    border-radius: 50%;
    color: #27dcff;
    background: radial-gradient(circle, rgba(0, 187, 255, 0.26), rgba(5, 46, 115, 0.16) 64%, transparent 65%);
    box-shadow: 0 0 0 8px rgba(20, 107, 197, 0.16), 0 0 24px rgba(0, 202, 255, 0.24);
    font-size: 2.1rem;
    line-height: 1;
    transform: translateY(-50%);
  }

  #view-stats .stats-hero__text h2 {
    margin-bottom: 9px;
    color: #2cd9ff;
    font-family: var(--font-heading);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.16em;
  }

  #view-stats .stats-hero__text p {
    color: #f1f4ff;
    font-family: var(--font-body);
    font-size: clamp(1.38rem, 2.15vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -0.04em;
  }

  #view-stats .stats-kpis {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    height: auto;
  }

  #view-stats .stats-kpi {
    position: relative;
    display: grid;
    min-height: 132px;
    padding: 24px 20px 21px 92px;
    align-content: center;
    overflow: hidden;
    border-color: rgba(82, 111, 210, 0.35);
    border-radius: 17px;
    background: linear-gradient(140deg, rgba(20, 37, 91, 0.88), rgba(10, 18, 53, 0.94));
    text-align: left;
    box-shadow: inset 0 1px 0 rgba(214, 227, 255, 0.055), 0 10px 25px rgba(0, 0, 0, 0.12);
  }

  #view-stats .stats-kpi::before {
    position: absolute;
    top: 50%;
    left: 21px;
    display: grid;
    width: 51px;
    height: 51px;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: rgba(0, 225, 255, 0.06);
    box-shadow: 0 0 20px currentColor;
    font-size: 1.35rem;
    transform: translateY(-50%);
  }

  #view-stats .stats-kpi:nth-child(1) { color: #26dfff; }
  #view-stats .stats-kpi:nth-child(1)::before { content: "◇"; }
  #view-stats .stats-kpi:nth-child(2) { color: #c05aff; }
  #view-stats .stats-kpi:nth-child(2)::before { content: "▣"; }
  #view-stats .stats-kpi:nth-child(3) { color: #ff65af; }
  #view-stats .stats-kpi:nth-child(3)::before { content: "◎"; }

  #view-stats .stats-kpi__value {
    color: currentColor;
    font-family: var(--font-body);
    font-size: clamp(1.45rem, 1.85vw, 1.9rem);
    font-weight: 800;
    text-shadow: 0 0 16px color-mix(in srgb, currentColor 42%, transparent);
  }

  #view-stats .stats-kpi__label {
    margin-top: 6px;
    color: #aebadd;
    font-family: var(--font-heading);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
  }

  #view-stats .stats-module {
    grid-column: span 6;
    min-height: 245px;
    padding: 22px 24px 24px;
    border-color: rgba(78, 115, 218, 0.36);
    border-radius: 18px;
    background:
      radial-gradient(circle at 100% 0%, rgba(79, 43, 190, 0.1), transparent 31%),
      linear-gradient(145deg, rgba(16, 31, 75, 0.88), rgba(8, 16, 45, 0.93));
    box-shadow: inset 0 1px 0 rgba(225, 233, 255, 0.045), 0 12px 28px rgba(0, 0, 0, 0.13);
  }

  #view-stats .stats-module__title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 15px;
    border-bottom-color: rgba(122, 146, 227, 0.17);
    color: #f2f4ff;
    font-family: var(--font-body);
    font-size: 0.86rem;
    letter-spacing: 0.03em;
  }

  #view-stats .stats-module__title::before {
    color: #25d9ff;
    font-size: 1.05rem;
    content: "◇";
  }

  #view-stats .stats-module:nth-of-type(4) .stats-module__title::before { content: "▱"; color: #bd78ff; }
  #view-stats .bar-row { margin-top: 15px; }
  #view-stats .bar-meta { margin-bottom: 7px; color: #b9c3e4; font-family: var(--font-body); font-size: 0.79rem; }
  #view-stats .bar-meta span:last-child { color: #a7b7ef; font-family: var(--font-heading); font-size: 0.71rem; text-shadow: none; }
  #view-stats .bar-track { height: 9px; border: 0; background: rgba(72, 92, 160, 0.22); }
  #view-stats .bar-fill { background: linear-gradient(90deg, #16baff 0%, #6c62ff 55%, #d358ff 100%); box-shadow: 0 0 13px rgba(74, 104, 255, 0.44); }

  #view-stats .stats-insights {
    grid-column: 1 / -1;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
  }

  #view-stats .insight-card {
    min-height: 90px;
    padding: 18px 15px 15px 61px;
    border-color: rgba(79, 123, 224, 0.4);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(17, 40, 92, 0.88), rgba(7, 18, 50, 0.94));
    box-shadow: inset 0 1px 0 rgba(213, 226, 255, 0.045), 0 8px 20px rgba(0, 0, 0, 0.11);
  }

  #view-stats .insight-card::before {
    top: 50%;
    left: 15px;
    bottom: auto;
    width: 31px;
    height: 31px;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: rgba(44, 205, 255, 0.08);
    box-shadow: 0 0 14px currentColor;
    transform: translateY(-50%);
  }
  #view-stats .insight-card--best { color: #2cdbff; }
  #view-stats .insight-card--worst { color: #ffc64f; }
  #view-stats .insight-card--variant { color: #df68ff; }
  #view-stats .insight-card--myth { color: #fc67b5; }
  #view-stats .insight-card--full { color: #25dbff; }
  #view-stats .insight-card__label { color: #aab7db; font-family: var(--font-heading); font-size: 0.61rem; font-weight: 800; letter-spacing: 0.07em; }
  #view-stats .insight-card__value { color: #f0f3ff; font-family: var(--font-body); font-size: clamp(0.82rem, 1.08vw, 1rem); letter-spacing: -0.02em; }

  #view-stats #sprite-indexTrends,
  #view-stats #communityStats { grid-column: 1 / -1; }

  #view-stats #sprite-indexTrends .stats-module,
  #view-stats #communityStats .stats-module {
    min-height: 150px;
    margin: 0;
  }

  #view-stats .sg-trends {
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(ellipse at 82% 100%, rgba(117, 44, 245, 0.23), transparent 27%),
      linear-gradient(108deg, rgba(15, 32, 79, 0.92), rgba(8, 16, 46, 0.95));
  }

  #view-stats .sg-trends::after {
    content: "";
    position: absolute;
    right: 5%;
    bottom: -42px;
    width: 230px;
    height: 120px;
    border: 1px solid rgba(130, 95, 255, 0.25);
    border-radius: 50% 50% 0 0;
    box-shadow: 0 -1px 22px rgba(67, 191, 255, 0.25), inset 0 14px 32px rgba(154, 59, 255, 0.15);
    transform: perspective(180px) rotateX(58deg);
  }

  #view-stats .sg-trends > * { position: relative; z-index: 1; }
}

@media (min-width: 1024px) and (max-width: 1239px) {
  #view-stats .stats-hero { min-height: 168px; padding: 26px 30px; }
  #view-stats .stats-hero__text { min-width: 270px; padding-left: 87px; }
  #view-stats .stats-hero__text::before { width: 64px; height: 64px; font-size: 1.75rem; }
  #view-stats .stats-kpi { padding-left: 75px; }
  #view-stats .stats-kpi::before { left: 15px; width: 43px; height: 43px; }
  #view-stats .stats-insights { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  #view-stats .stats-hero__svg circle:last-of-type,
  #view-stats .bar-fill,
  #view-stats .stats-kpi,
  #view-stats .insight-card { transition: none; }
}

@media (min-width: 1024px) {
  /* The semantic dashboard additions keep the visual language of the
     reference while avoiding duplicate decorative icons. */
  #view-stats .stats-kpi__icon,
  #view-stats .insight-card__icon,
  #view-stats .stats-module__title > span { display: none; }

  #view-stats .stats-hero__text #statsHeroDetail {
    color: #f1f4ff;
    font-family: var(--font-body);
    font-size: clamp(1.38rem, 2.15vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -0.04em;
  }

  #view-stats .stats-hero__support {
    margin-top: 8px;
    color: #b7c3e7 !important;
    font-family: var(--font-body) !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
  }

  #view-stats .stats-hero__remaining {
    order: 3;
    display: grid;
    min-width: 150px;
    gap: 3px;
    padding: 12px 20px 12px 0;
    color: #c7d2f7;
  }
  #view-stats .stats-hero__remaining-value { color: #66dcff; font-family: var(--font-body); font-size: clamp(1.55rem, 2.3vw, 2.15rem); font-weight: 800; }
  #view-stats .stats-hero__remaining-label { max-width: 112px; font-size: 0.82rem; line-height: 1.32; }

  #view-stats .stats-kpi__hint {
    margin-top: 5px;
    color: #8796c4;
    font-size: 0.68rem;
    line-height: 1.3;
  }
  #view-stats .stats-module__description {
    margin: -5px 0 13px;
    color: #8e9dc8;
    font-size: 0.74rem;
  }
  #view-stats .insight-card__detail { display: block; margin-top: 4px; color: #8998c5; font-size: 0.68rem; line-height: 1.3; }
}

/* The application-level collection banner sits above every view.  The Stats
   dashboard therefore mirrors the reference by keeping its own progress
   card compact, alongside the three KPIs, rather than repeating a second
   full-width banner. */
@media (min-width: 1024px) {
  #view-stats .stats-hero {
    grid-column: span 6;
    min-height: 138px;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(19, 37, 90, 0.9), rgba(9, 17, 51, 0.94));
  }
  #view-stats .stats-hero::before,
  #view-stats .stats-hero::after { display: none; }
  #view-stats .stats-hero__ring { order: initial; width: 100px; height: 100px; margin: 0; }
  #view-stats .stats-hero__ring::before { inset: -8px; box-shadow: 0 0 0 5px rgba(35, 31, 97, 0.18); }
  #view-stats .stats-hero__text { min-width: 0; padding-left: 0; }
  #view-stats .stats-hero__text::before { display: none; }
  #view-stats .stats-hero__text h2 { margin-bottom: 8px; color: #f3f5ff; font-size: 0.76rem; letter-spacing: 0.06em; }
  #view-stats .stats-hero__text #statsHeroDetail { color: #c8d4ff; font-size: 1.08rem; letter-spacing: -0.02em; }
  #view-stats .stats-hero__support { font-size: 0.73rem !important; }
  #view-stats .stats-hero__remaining { display: none; }

  #view-stats .stats-kpis { grid-column: span 6; align-self: stretch; }
  #view-stats .stats-kpi { min-height: 138px; padding: 18px 12px 16px; place-items: center; text-align: center; }
  #view-stats .stats-kpi::before { position: static; width: 42px; height: 42px; margin-bottom: 8px; transform: none; }
  #view-stats .stats-kpi__label { margin-top: 4px; text-align: center; }
  #view-stats .stats-kpi__hint { text-align: center; }
}

@media (min-width: 1024px) and (max-width: 1239px) {
  #view-stats .stats-hero { grid-column: 1 / -1; }
  #view-stats .stats-kpis { grid-column: 1 / -1; }
}

/* ── Social workspace ────────────────────────────────────────────────────
   The social features share a single, predictable desktop surface: the
   top-level mode is always visible, then each mode exposes its primary task
   without the narrow, phone-shaped stacked layout. */
@media (min-width: 1024px) {
  #view-social {
    width: min(100%, 1400px);
    margin-inline: auto;
  }

  #view-social .social-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 0 0 18px;
    padding: 6px;
    border: 1px solid rgba(79, 112, 210, 0.34);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(17, 33, 82, 0.9), rgba(7, 15, 42, 0.94));
    box-shadow: inset 0 1px 0 rgba(230, 240, 255, 0.06), 0 14px 32px rgba(0, 0, 0, 0.13);
  }

  #view-social .social-tab {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #9eadd6;
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.84rem;
    font-weight: 750;
    letter-spacing: 0.01em;
    text-transform: none;
  }

  #view-social .social-tab::before {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 8px;
    color: #8ea1d4;
    content: "◌";
    font-size: 1rem;
    line-height: 1;
  }
  #view-social .social-tab[data-social-tab="friends"]::before { content: "♧"; }
  #view-social .social-tab[data-social-tab="compare"]::before { content: "⇄"; }
  #view-social .social-tab[data-social-tab="squad"]::before { content: "✦"; }

  #view-social .social-tab:hover {
    border-color: rgba(93, 140, 241, 0.4);
    color: #e8f2ff;
    background: rgba(65, 93, 180, 0.16);
  }
  #view-social .social-tab.active {
    border-color: rgba(40, 209, 255, 0.65);
    color: #effaff;
    background: linear-gradient(105deg, rgba(0, 182, 255, 0.2), rgba(125, 73, 255, 0.22));
    box-shadow: inset 0 0 20px rgba(58, 136, 255, 0.18), 0 0 20px rgba(70, 104, 255, 0.14);
  }
  #view-social .social-tab.active::before { color: #43deff; box-shadow: 0 0 15px rgba(52, 215, 255, 0.28); }
  #view-social .social-tab:focus-visible,
  #view-social .friends-tab:focus-visible { outline: 2px solid #4cddff; outline-offset: 2px; }

  #view-social .social-panel {
    min-width: 0;
    padding: 20px;
    border: 1px solid rgba(75, 110, 205, 0.35);
    border-radius: 20px;
    background:
      radial-gradient(circle at 100% 0, rgba(111, 61, 235, 0.1), transparent 31%),
      linear-gradient(145deg, rgba(14, 29, 70, 0.93), rgba(6, 14, 41, 0.96));
    box-shadow: inset 0 1px 0 rgba(234, 240, 255, 0.055), 0 18px 38px rgba(0, 0, 0, 0.14);
  }

  /* Friends: fast discovery, dense but readable cards. */
  #view-social .friends-tabs {
    display: flex;
    gap: 6px;
    margin: -4px 0 20px;
    padding: 5px;
    border: 1px solid rgba(90, 116, 199, 0.26);
    border-radius: 12px;
    background: rgba(5, 14, 42, 0.44);
  }
  #view-social .friends-tab {
    min-height: 34px;
    margin: 0;
    padding: 7px 11px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #91a1ce;
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
  }
  #view-social .friends-tab:hover { color: #e4efff; background: rgba(65, 91, 170, 0.16); }
  #view-social .friends-tab.active {
    border-color: rgba(50, 209, 255, 0.45);
    color: #e9fbff;
    background: rgba(0, 163, 235, 0.16);
    box-shadow: inset 0 0 13px rgba(0, 203, 255, 0.1);
  }

  #view-social .friends-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto;
    gap: 10px;
    margin: 0 0 18px;
    padding: 10px;
    border: 1px solid rgba(90, 119, 210, 0.25);
    border-radius: 13px;
    background: rgba(5, 15, 44, 0.42);
  }
  #view-social .friends-search-box input,
  #view-social .friends-toolbar .sort-bar__select {
    min-height: 42px;
    border-color: rgba(88, 119, 208, 0.35);
    border-radius: 9px;
    background-color: rgba(15, 29, 70, 0.86);
  }
  #view-social .friends-search-box input:focus,
  #view-social .friends-toolbar .sort-bar__select:focus { border-color: #36d7ff; box-shadow: 0 0 0 3px rgba(0, 208, 255, 0.1); }

  #view-social .friends-panel .friends-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 12px;
  }
  #view-social .friend-item {
    min-height: 88px;
    padding: 14px;
    border-color: rgba(75, 109, 205, 0.38);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(20, 39, 91, 0.84), rgba(9, 19, 53, 0.88));
    box-shadow: inset 0 1px 0 rgba(232, 238, 255, 0.045);
  }
  #view-social .friend-item:hover { border-color: rgba(43, 217, 255, 0.67); background: linear-gradient(135deg, rgba(22, 54, 117, 0.88), rgba(16, 23, 70, 0.94)); transform: translateY(-1px); }
  #view-social .friend-avatar { width: 50px; height: 50px; border: 1px solid rgba(47, 211, 255, 0.4); box-shadow: 0 0 17px rgba(0, 191, 255, 0.16); }
  #view-social .friend-name { color: #f1f5ff; font-family: var(--font-body); font-size: 0.91rem; }
  #view-social .friend-meta { margin-top: 4px; color: #9cacd5; font-size: 0.7rem; }
  #view-social .friend-actions { gap: 6px; }
  #view-social .friend-actions .ghost-button { min-height: 32px; padding: 6px 9px; border-radius: 7px; font-size: 0.66rem; }
  #view-social .friend-empty,
  #view-social .friends-qr-wrap {
    grid-column: 1 / -1;
    min-height: 190px;
    display: grid;
    place-items: center;
    align-content: center;
    padding: 26px;
    border: 1px dashed rgba(91, 122, 211, 0.42);
    border-radius: 14px;
    background: rgba(7, 18, 50, 0.35);
  }
  #view-social .friends-actions { margin: 0 0 18px; }
  #view-social .friends-actions .ghost-button { min-height: 38px; border-radius: 9px; }
  #view-social .friends-subtitle { margin: 24px 0 10px; color: #8da7e7; }

  /* Comparison becomes a clear single-purpose workspace until results load. */
  #view-social #social-panel-compare .compare-mode-panel { width: min(100%, 920px); margin-inline: auto; }
  #view-social .compare-hero { padding: 4px 4px 20px; }
  #view-social .compare-hero h2 { color: #eff4ff; font-family: var(--font-body); font-size: 1.48rem; }
  #view-social .compare-hero p { max-width: 600px; color: #9facd2; line-height: 1.5; }
  #view-social .compare-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    margin: 0;
    padding: 18px;
    border-color: rgba(78, 122, 224, 0.42);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(19, 43, 103, 0.65), rgba(8, 17, 49, 0.82));
  }
  #view-social .compare-form label { grid-column: 1 / -1; color: #a8b8e1; }
  #view-social .compare-form input { min-height: 44px; border-color: rgba(92, 122, 214, 0.42); background: rgba(6, 15, 43, 0.75); }
  #view-social .compare-form .login-btn,
  #view-social .compare-form .ghost-button { width: auto; min-height: 44px; padding-inline: 16px; border-radius: 9px; }
  #view-social .compare-status { padding: 14px 4px 0; text-align: left; }
  #view-social .compare-results { padding: 22px 0 0; }

  /* Squad lobby and active squad use the same hierarchy as the other modes. */
  #view-social .squad-lobby { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  #view-social .squad-lobby__divider { display: none; }
  #view-social .squad-lobby__card { min-height: 168px; padding: 24px; border-color: rgba(75, 117, 219, 0.42); background: linear-gradient(135deg, rgba(20, 48, 111, 0.72), rgba(8, 18, 54, 0.91)); }
  #view-social .squad-lobby__title { color: #55dcff; font-family: var(--font-body); font-size: 1rem; letter-spacing: 0; text-transform: none; }
  #view-social .squad-lobby__row { align-items: center; }
  #view-social .squad-active__header { padding: 20px 22px; border-color: rgba(46, 214, 255, 0.48); background: linear-gradient(110deg, rgba(0, 165, 235, 0.14), rgba(87, 44, 194, 0.15), rgba(9, 17, 50, 0.85)); }
  #view-social .squad-active__name { color: #f1f5ff; font-family: var(--font-body); font-size: 1.25rem; }
  #view-social .squad-controls { padding: 12px; border: 1px solid rgba(88, 117, 209, 0.28); border-radius: 13px; background: rgba(6, 15, 42, 0.42); }
}

@media (min-width: 1024px) and (max-width: 1239px) {
  #view-social .friends-toolbar { grid-template-columns: minmax(220px, 1fr) auto; }
  #view-social .friends-toolbar .sort-bar__select:last-child { grid-column: 1 / -1; }
  #view-social .compare-form { grid-template-columns: minmax(0, 1fr) auto; }
  #view-social .compare-form .ghost-button { grid-column: 1 / -1; }
}