:root {
      --bg: #121416;
      --surf-low: #1A1C1E;
      --surf: #222426;
      --surf-high: #252829;
      --border: rgba(255, 255, 255, .08);
      --primary: #FFB4AA;
      --green: #10B981;
      --yellow: #F59E0B;
      --red: #EF4444;
      --outline: rgba(91, 64, 63, 0.3);
      --glow-bg: rgba(16, 185, 129, 0.12);
      --glow-sh: 0 0 12px rgba(16, 185, 129, 0.22);
      --text: #E8EAED;
      --text2: #9AA0A6;
      --text3: #555B62;
      --head: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
      --body: 'Manrope', 'Manrope Fallback', sans-serif;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    html,
    html {
      overflow-y: scroll
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--body);
      font-size: 14px;
      line-height: 1.5;
      min-height: 100vh
    }

    a {
      color: inherit;
      text-decoration: none
    }

    /* Font fallback metrics — minimise CLS from font swap */
    @font-face {
      font-family: 'Space Grotesk Fallback';
      src: local('Arial');
      size-adjust: 100%;
      ascent-override: 90%;
      descent-override: 22%;
      line-gap-override: 0%;
    }

    @font-face {
      font-family: 'Manrope Fallback';
      src: local('Arial');
      size-adjust: 99%;
      ascent-override: 90%;
      descent-override: 21%;
      line-gap-override: 0%;
    }

    /* TOP BAR */
    .top-bar {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(18, 20, 22, 0.88);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.04)
    }

    .top-bar-inner {
      max-width: 800px;
      margin: 0 auto;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px
    }

    .logo {
      font-family: var(--head);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--primary)
    }

    .logo span {
      color: var(--text3);
      margin: 0 4px
    }

    .top-actions {
      display: flex;
      align-items: center;
      gap: 6px
    }

    .top-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 4px
    }

    .visitor-count {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      color: var(--text3);
      letter-spacing: .03em;
      background: var(--surf-low);
      padding: 2px 9px 2px 9px;
      border-radius: 200px;
      justify-content: end
    }

    .visitor-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #ef4444;
      flex-shrink: 0;
      transition: background .4s
    }

    .visitor-dot.live {
      background: #22c55e
    }

    .discord-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 2px 8px 2px 6px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 600;
      color: #9da4f0;
      background: rgba(88, 101, 242, .1);
      border: 1px solid rgba(88, 101, 242, .18);
      text-decoration: none;
      transition: background .15s, border-color .15s;
      white-space: nowrap;
      letter-spacing: .02em;
    }

    .discord-link:hover {
      background: rgba(88, 101, 242, .2);
      border-color: rgba(88, 101, 242, .35);
      color: #b9beff;
    }

    .btn-icon {
      width: 34px;
      height: 34px;
      border-radius: 7px;
      background: var(--surf);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text2);
      transition: background .15s, color .15s;
      flex-shrink: 0
    }

    .btn-icon:hover {
      background: var(--surf-high);
      color: var(--text)
    }

    .btn-icon svg {
      width: 15px;
      height: 15px
    }

    .spoiler-btn {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 0 10px;
      height: 34px;
      border-radius: 7px;
      background: var(--surf);
      border: none;
      cursor: pointer;
      font-family: var(--head);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--text3);
      transition: background .15s, color .15s;
      white-space: nowrap
    }

    .spoiler-btn:hover {
      background: var(--surf-high);
      color: var(--text2)
    }

    .spoiler-btn.on {
      background: rgba(239, 68, 68, 0.12);
      color: var(--red)
    }

    .hide-done-btn.on {
      background: rgba(16, 185, 129, 0.12);
      color: var(--green)
    }

    body.hide-completed .card.done {
      display: none
    }

    .spoiler-btn svg {
      width: 13px;
      height: 13px;
      flex-shrink: 0
    }

    /* TOP BAR — narrow screen: icon-only buttons, hide discord text */
    @media (max-width: 640px) {
      .spoiler-btn-label {
        display: none
      }

      .spoiler-btn {
        padding: 0 8px
      }

      .discord-link-label {
        display: none
      }

      .discord-link {
        padding: 4px 7px
      }

    }

    @media (max-width: 640px) {
      .install-pill:not(.install-pill-hidden) {
        display: inline-flex !important
      }
    }

    @media (min-width: 641px) {
      .install-pill {
        display: none !important
      }
    }

    /* INSTALL TOAST */
    .install-toast {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 9999;
      background: var(--surf);
      border-top: 1px solid var(--border);
      padding: 14px 16px 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      box-shadow: 0 -4px 24px rgba(0, 0, 0, .4);
      transform: translateY(100%);
      transition: transform .3s ease;
    }

    .install-toast.visible {
      transform: translateY(0)
    }

    .install-toast-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
    }

    .install-toast-body {
      font-size: 13px;
      color: var(--text2);
      margin: -4px 0 2px;
    }

    .install-toast-actions {
      display: flex;
      gap: 8px;
    }

    .install-toast-close {
      position: absolute;
      top: 10px;
      right: 12px;
      background: none;
      border: none;
      color: var(--text3);
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      padding: 2px 6px;
    }

    .install-btn-yes {
      flex: 1;
      padding: 8px 12px;
      background: var(--primary);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }

    .install-btn-no {
      flex: 1;
      padding: 8px 12px;
      background: none;
      color: var(--text2);
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 13px;
      cursor: pointer;
    }

    .install-manual-toast {
      flex-direction: row !important;
      align-items: flex-end !important;
      gap: 12px !important;
      padding-right: 14px !important;
    }

    .install-manual-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .install-homescreen-hint {
      display: flex;
      align-items: center;
      gap: 0px;
      padding: 6px 0;
      font-size: 13px;
      color: var(--text);
    }

    .install-homescreen-hint img {
      width: 32px;
      height: 32px;
      flex-shrink: 0;
      filter: brightness(0) invert(1);
    }

    .install-standalone-note {
      font-size: 11px;
      color: var(--text2);
    }

    .install-manual-arrow {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-shrink: 0;
    }

    .install-arrow-img {
      width: 48px;
      filter: brightness(0) invert(1);
      opacity: 0.7;
      animation: arrow-bounce-down 0.8s ease-in-out infinite alternate;
    }

    @keyframes arrow-bounce-down {
      from {
        transform: translateY(0);
      }

      to {
        transform: translateY(6px);
      }
    }

    .install-pill {
      display: none;
      align-items: center;
      gap: 5px;
      padding: 4px 9px;
      background: rgba(88, 101, 242, .12);
      border: 1px solid rgba(88, 101, 242, .25);
      border-radius: 20px;
      color: #818cf8;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      margin-left: 6px;
    }

    /* WRAP */
    .wrap {
      max-width: 800px;
      margin: 0 auto;
      padding: 0 16px
    }

    /* REGION HERO */
    .region-hero {
      padding: 32px 0 14px
    }

    .region-label {
      font-family: var(--head);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--primary);
      margin-bottom: 5px
    }

    .region-title {
      font-family: var(--head);
      font-size: 28px;
      font-weight: 700;
      letter-spacing: -.02em;
      color: var(--text);
      line-height: 1.1
    }

    .region-sub {
      font-size: 12px;
      color: var(--text2);
      margin-top: 5px
    }

    .region-prog {
      margin-top: 14px
    }

    .prog-meta {
      display: flex;
      justify-content: space-between;
      font-family: var(--head);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--text3);
      margin-bottom: 5px
    }

    .prog-track {
      height: 2px;
      background: var(--surf);
      border-radius: 1px;
      overflow: hidden
    }

    .prog-fill {
      height: 100%;
      border-radius: 1px;
      transition: width .35s ease, background .35s ease
    }

    /* CARDS */
    .cards {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding-bottom: 40px
    }

    /* CARD */
    .card {
      background: var(--surf-low);
      border-radius: 8px;
      border-left: 4px solid var(--red);
      overflow: hidden;
      transition: border-color .3s ease
    }

    .card.ip {
      border-left-color: var(--yellow)
    }

    .card.done {
      border-left-color: var(--green)
    }

    /* CARD HEADER */
    .card-head {
      padding: 13px 13px 10px;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      cursor: pointer;
      user-select: none
    }

    .card-head-main {
      flex: 1;
      min-width: 0
    }

    .card-name {
      font-family: var(--head);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--text);
      line-height: 1.2
    }

    .card-code {
      font-family: var(--head);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--text3);
      margin-top: 2px
    }

    .card-unlock {
      margin-top: 5px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 3px
    }

    .unlock-lbl {
      font-family: var(--head);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--text3)
    }

    .unlock-a {
      font-family: var(--head);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--yellow);
      display: inline-flex;
      align-items: center;
      gap: 2px;
      transition: opacity .15s
    }

    .unlock-a:hover {
      opacity: .75
    }

    .unlock-a.opt {
      color: var(--text2)
    }

    .unlock-a svg {
      width: 8px;
      height: 8px
    }

    .card-acts {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-shrink: 0
    }

    .card-ign {
      width: 30px;
      height: 30px;
      border-radius: 6px;
      background: var(--surf);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text3);
      transition: background .15s, color .15s
    }

    .card-ign:hover {
      background: var(--surf-high);
      color: var(--text2)
    }

    .card-ign svg {
      width: 13px;
      height: 13px
    }

    .card-toggle {
      width: 30px;
      height: 30px;
      border-radius: 6px;
      background: var(--surf);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text3);
      transition: background .15s, color .15s
    }

    .card-toggle:hover {
      background: var(--surf-high);
      color: var(--text2)
    }

    .card-toggle svg {
      width: 13px;
      height: 13px;
      transition: transform .2s ease
    }

    .card.collapsed .card-toggle svg {
      transform: rotate(-90deg)
    }

    /* CARD PROGRESS */
    .card-prog {
      margin: 0 13px 10px
    }

    .card-prog-track {
      height: 2px;
      background: var(--surf);
      border-radius: 1px;
      overflow: hidden
    }

    .card-prog-fill {
      height: 100%;
      border-radius: 1px;
      transition: width .3s ease, background .3s ease
    }

    /* CARD BODY */
    .card-body {
      overflow: hidden;
      transition: max-height .25s ease
    }

    .card.collapsed .card-body {
      max-height: 0 !important
    }

    /* LEVEL ROW */
    /* ── Location filter bar ────────────────────────────────────── */
    .loc-filter-bar {
      position: sticky;
      top: 0;
      z-index: 80;
      background: rgba(18, 20, 22, .92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(255, 255, 255, .04);
      padding: 8px 0
    }

    .loc-filter-inner {
      max-width: 800px;
      margin: 0 auto;
      padding: 0 16px
    }

    .loc-filter-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap
    }

    .loc-filter-search {
      position: relative;
      flex: 1;
      min-width: 160px
    }

    .loc-filter-search svg {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text3);
      pointer-events: none
    }

    .loc-filter-search input {
      width: 100%;
      padding: 8px 12px 8px 32px;
      background: var(--surf-high);
      border: none;
      border-radius: 4px;
      color: var(--text);
      font-size: 13px;
      font-family: var(--body);
      outline: none;
      min-height: 36px
    }

    .loc-filter-search input:focus {
      box-shadow: 0 0 0 2px rgba(255, 182, 181, .25)
    }

    .loc-filter-search input::placeholder {
      color: var(--text3)
    }

    .loc-rgn-pills {
      display: flex;
      gap: 3px;
      flex-shrink: 0
    }

    .loc-rgn-pill {
      padding: 5px 10px;
      border: none;
      border-radius: 4px;
      background: var(--surf-high);
      color: var(--text3);
      font-family: var(--body);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .04em;
      cursor: pointer;
      transition: background .12s, color .12s;
      white-space: nowrap;
      min-height: 30px
    }

    .loc-rgn-pill:hover {
      background: var(--surf-bright, #393939);
      color: var(--text)
    }

    .loc-rgn-pill.active {
      background: rgba(255, 182, 181, .15);
      color: var(--primary)
    }

    .loc-incomplete-btn {
      padding: 5px 10px;
      border: none;
      border-radius: 4px;
      background: var(--surf-high);
      color: var(--text3);
      font-family: var(--body);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .04em;
      cursor: pointer;
      transition: background .12s, color .12s;
      white-space: nowrap;
      flex-shrink: 0;
      min-height: 30px
    }

    .loc-incomplete-btn:hover {
      background: var(--surf-bright, #393939);
      color: var(--text)
    }

    .loc-incomplete-btn.on {
      background: rgba(108, 221, 172, .15);
      color: var(--green)
    }

    /* ── Lost Cargo ──────────────────────────────────────────────── */
    .lc-filter-bar {
      position: sticky;
      top: 0;
      z-index: 80;
      background: rgba(18, 20, 22, .92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(255, 255, 255, .04);
      padding: 8px 0
    }

    .lc-filter-inner {
      max-width: 800px;
      margin: 0 auto;
      padding: 0 16px
    }

    .lc-filter-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center
    }

    .lc-filter-search {
      position: relative;
      flex: 1 1 180px
    }

    .lc-filter-search svg {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text3);
      pointer-events: none
    }

    .lc-filter-search input {
      width: 100%;
      padding: 7px 12px 7px 32px;
      background: var(--surf-high);
      border: none;
      border-radius: 4px;
      color: var(--text);
      font-size: 13px;
      font-family: var(--body);
      outline: none;
      min-height: 34px
    }

    .lc-filter-search input::placeholder {
      color: var(--text3)
    }

    .lc-filter-search input:focus {
      box-shadow: 0 0 0 2px rgba(255, 182, 181, .2)
    }

    .lc-filter-range {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0
    }

    .lc-range-lbl {
      font-size: 11px;
      color: var(--text3);
      white-space: nowrap
    }

    .lc-range-sep {
      color: var(--text3);
      font-size: 12px
    }

    .lc-filter-range input {
      background: var(--surf-high);
      border: none;
      border-radius: 4px;
      color: var(--text);
      font-size: 12px;
      font-family: var(--body);
      padding: 5px 8px;
      min-height: 34px;
      outline: none;
      -moz-appearance: textfield
    }

    .lc-filter-range input::-webkit-outer-spin-button,
    .lc-filter-range input::-webkit-inner-spin-button {
      -webkit-appearance: none
    }

    .lc-filter-range input:focus {
      box-shadow: 0 0 0 2px rgba(255, 182, 181, .2)
    }

    .lc-cards {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 10px 16px 16px
    }

    .lc-card {
      max-width: 800px
    }

    .lc-head {
      cursor: pointer
    }

    .lc-name {
      font-size: 14px;
      margin: 0 0 2px
    }

    .lc-break-badge {
      margin-left: 8px;
      font-size: 10px;
      font-family: var(--head);
      font-weight: 700;
      letter-spacing: .06em;
      color: var(--red);
      vertical-align: middle
    }

    .lc-meta {
      font-size: 12px;
      color: var(--text3);
      margin: 0
    }

    .lc-body {
      padding: 0 14px 12px
    }

    .lc-dest-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      margin-top: 6px
    }

    .lc-dest-table th {
      text-align: left;
      color: var(--text3);
      font-family: var(--head);
      font-size: 10px;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: 4px 8px 4px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .06)
    }

    .lc-dest-table td {
      padding: 5px 8px 5px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .04);
      color: var(--text2)
    }

    .lc-dest-table tr:last-child td {
      border-bottom: none
    }

    .lc-dest-name {
      color: var(--text2)
    }

    .lc-dest-likes {
      color: var(--primary);
      font-family: var(--head);
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap
    }

    /* ── Level filter states ─────────────────────────────────────── */
    .lrow-filter-hidden {
      display: none !important
    }

    @keyframes lv-pulse-in {
      0% {
        box-shadow: inset 0 0 16px 4px rgba(212, 172, 46, .2), 0 0 14px rgba(212, 172, 46, .22)
      }

      65% {
        box-shadow: inset 0 0 4px 0px rgba(212, 172, 46, 0), 0 0 0px rgba(212, 172, 46, 0)
      }

      100% {
        box-shadow: inset 0 0 4px 0px rgba(212, 172, 46, 0), 0 0 0px rgba(212, 172, 46, 0)
      }
    }

    @keyframes extra-pulse-in {
      0% {
        box-shadow: inset 0 0 16px 4px rgba(108, 221, 172, .2), 0 0 14px rgba(108, 221, 172, .22)
      }

      65% {
        box-shadow: inset 0 0 4px 0px rgba(108, 221, 172, 0), 0 0 0px rgba(108, 221, 172, 0)
      }

      100% {
        box-shadow: inset 0 0 4px 0px rgba(108, 221, 172, 0), 0 0 0px rgba(108, 221, 172, 0)
      }
    }

    .lrow.lrow-search-match {
      box-shadow: inset 0 0 8px 1px rgba(212, 172, 46, .1), 0 0 8px rgba(212, 172, 46, .12);
      transition: background .15s;
      animation: lv-pulse-in 1.8s ease infinite
    }

    .extra-row.extra-search-match {
      box-shadow: inset 0 0 8px 1px rgba(108, 221, 172, .1), 0 0 8px rgba(108, 221, 172, .12);
      border-radius: 6px;
      transition: none;
      animation: extra-pulse-in 1.8s ease infinite
    }

    .card.filter-force-open .card-body {
      max-height: 5000px !important
    }

    .card.filter-force-open.collapsed .card-toggle svg {
      transform: rotate(0deg) !important
    }

    .lrow {
      background: var(--surf);
      margin: 0 8px 5px;
      border-radius: 6px;
      padding: 9px 11px;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      transition: background .15s, box-shadow .15s
    }

    .lrow:last-child {
      margin-bottom: 8px
    }

    .lrow.checked {
      background: var(--glow-bg);
      box-shadow: var(--glow-sh)
    }

    .lrow.empty {
      opacity: .5
    }

    .lrow-info {
      flex: 1;
      min-width: 0
    }

    .lrow-label {
      font-family: var(--head);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--text3);
      margin-bottom: 3px
    }

    .lrow.checked .lrow-label {
      color: var(--green)
    }

    .lrow-items {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 1px
    }

    .lrow-item {
      font-size: 12.5px;
      color: var(--text);
      line-height: 1.4;
      display: flex;
      align-items: baseline;
      gap: 6px;
      flex-wrap: wrap
    }

    .lrow.checked .lrow-item {
      color: var(--text2)
    }

    .item-cat {
      font-family: var(--head);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 1px 5px;
      border-radius: 3px;
      white-space: nowrap;
      flex-shrink: 0
    }

    /* SPOILER */
    .sp-wrap {
      display: inline-flex;
      align-items: center;
      gap: 5px
    }

    .sp-content {
      transition: filter .2s
    }

    body:not(.spoilers-on) .sp-content {
      filter: blur(5px);
      cursor: pointer;
      user-select: none
    }

    body:not(.spoilers-on) .sp-content.sp-revealed {
      filter: none;
      cursor: pointer
    }

    body.spoilers-on .sp-content {
      filter: none;
      cursor: default
    }

    .sp-tag {
      display: inline-block;
      background: rgba(239, 68, 68, 0.14);
      color: var(--red);
      font-family: var(--head);
      font-size: 6px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 1px 5px;
      border-radius: 3px
    }

    body.spoilers-on .sp-tag {
      display: none
    }

    body:not(.spoilers-on) .sp-content.sp-revealed+.sp-tag {
      display: none
    }

    /* CHECKBOX */
    .chk {
      width: 26px;
      height: 26px;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: var(--bg);
      cursor: pointer;
      flex-shrink: 0;
      appearance: none;
      -webkit-appearance: none;
      transition: background .15s, border-color .15s, box-shadow .15s;
      background-position: center;
      background-repeat: no-repeat;
      background-size: 13px
    }

    .chk:hover {
      border-color: var(--green);
      background-color: rgba(16, 185, 129, 0.06)
    }

    .chk:checked {
      background-color: var(--green);
      border-color: var(--green);
      box-shadow: var(--glow-sh);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121416' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    }

    .lrow.empty .chk {
      opacity: .6
    }

    /* STAR BADGE */
    .star-badge {
      margin: 0 8px 8px;
      padding: 6px 11px;
      background: var(--glow-bg);
      border: 1px solid rgba(16, 185, 129, 0.25);
      border-radius: 6px;
      font-family: var(--head);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--green);
      display: flex;
      align-items: center;
      gap: 6px
    }

    .star-badge svg {
      width: 12px;
      height: 12px
    }

    /* EXTRAS / SIDE OBJECTIVES */
    .extras-section {
      margin: 4px 8px 8px
    }

    .extras-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px
    }

    .extras-lbl {
      font-family: var(--head);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--yellow);
      white-space: nowrap;
      opacity: .7
    }

    .extras-div {
      height: 1px;
      background: var(--surf-high);
      flex: 1
    }

    .extra-row {
      background: var(--surf);
      border-radius: 6px;
      padding: 9px 11px;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 5px;
      border: 1px solid rgba(245, 158, 11, 0.1)
    }

    .extra-row.checked {
      background: var(--glow-bg);
      border-color: rgba(16, 185, 129, 0.15)
    }

    .extra-info {
      flex: 1;
      min-width: 0
    }

    .extra-label {
      font-family: var(--head);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--yellow);
      margin-bottom: 3px
    }

    .extra-row.checked .extra-label {
      color: var(--green)
    }

    .extra-name {
      font-size: 12.5px;
      color: var(--text);
      line-height: 1.4
    }

    .extra-row.checked .extra-name {
      color: var(--text2)
    }

    .extra-reward {
      font-size: 11px;
      color: var(--primary);
      opacity: .85;
      margin-top: 4px;
      line-height: 1.4
    }

    .extra-row.checked .extra-reward {
      color: var(--green);
      opacity: .7
    }

    /* POST-GAME BADGE */
    .pg-badge {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      margin-left: 6px;
      background: rgba(245, 158, 11, 0.12);
      color: var(--yellow);
      font-family: var(--head);
      font-size: 7px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: 2px 6px;
      border-radius: 3px;
      vertical-align: middle
    }

    /* STATS BAR */
    :root {
      --bnav-h: 58px
    }

    .stats-bar {
      position: sticky;
      top: 54px;
      /* updated dynamically by JS */
      z-index: 90;
      background: rgba(34, 36, 38, .94);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(255, 255, 255, .04)
    }

    .stats-bar-inner {
      max-width: 800px;
      margin: 0 auto;
      padding: 0 16px
    }

    .stats-summary {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      background: none;
      border: none;
      cursor: pointer;
      padding: 10px 0;
      text-align: left
    }

    .stats-cols {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 1;
      min-width: 0
    }

    .stats-col {
      display: flex;
      align-items: baseline;
      gap: 4px;
      flex-shrink: 0
    }

    .stats-col-val {
      font-family: var(--head);
      font-size: 12px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -.01em
    }

    .stats-col-lbl {
      font-family: var(--head);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--text3)
    }

    .stats-col-sep {
      width: 1px;
      height: 14px;
      background: var(--outline);
      flex-shrink: 0
    }

    .stats-chev {
      width: 15px;
      height: 15px;
      color: var(--text3);
      transition: transform .2s;
      flex-shrink: 0
    }

    .stats-bar.open .stats-chev {
      transform: rotate(180deg)
    }

    .stats-overall-bar {
      height: 2px;
      background: var(--surf-high)
    }

    .stats-overall-fill {
      height: 100%;
      transition: width .35s, background .35s;
      background: var(--green)
    }

    .stats-detail {
      display: none;
      flex-direction: column;
      gap: 9px;
      padding: 12px 0 14px
    }

    .stats-bar.open .stats-detail {
      display: flex
    }

    .stats-detail-row {
      display: flex;
      align-items: center;
      gap: 8px
    }

    .stats-detail-name {
      font-family: var(--head);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--text3);
      width: 108px;
      flex-shrink: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .stats-mini-bar {
      flex: 1;
      height: 3px;
      background: var(--surf-high);
      border-radius: 2px;
      overflow: hidden
    }

    .stats-mini-fill {
      height: 100%;
      border-radius: 2px;
      transition: width .35s, background .35s;
      background: var(--green)
    }

    .stats-detail-ct {
      font-family: var(--head);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .03em;
      color: var(--text3);
      width: 36px;
      text-align: right;
      flex-shrink: 0
    }

    /* BOTTOM NAV */
    .bnav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 100;
      background: rgba(26, 28, 30, .96);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-top: 1px solid rgba(255, 255, 255, .04);
      height: var(--bnav-h);
      overflow: hidden
    }

    .bnav-inner {
      max-width: 800px;
      margin: 0 auto;
      display: flex;
      width: 100%;
      height: 100%
    }

    .bnav-tab {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text3);
      transition: color .15s;
      padding: 0 2px;
      min-height: 44px
    }

    .bnav-tab.active {
      color: var(--primary)
    }

    .bnav-tab svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0
    }

    .bnav-tab span {
      font-family: var(--head);
      font-size: 7px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%
    }

    main {
      padding-bottom: 0
    }

    /* CREDITS FOOTER LINK */
    .site-footer {
      padding: 0 16px calc(var(--bnav-h) + 16px);
      text-align: center
    }

    .credits-link {
      font-size: 11px;
      color: var(--text3);
      text-decoration: none;
      transition: color .15s;
      display: inline-block;
      padding: 10px 0
    }

    .credits-link:hover {
      color: var(--text2)
    }

    /* SECTION SEP */
    .section-sep {
      height: 1px;
      background: var(--surf);
      margin: 6px 0 0
    }

    /* REGION NAV TABS */
    .region-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 0;
      padding: 20px 0 0
    }

    .rtab {
      font-family: var(--head);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--text3);
      background: none;
      border: none;
      cursor: pointer;
      padding: 6px 12px;
      border-radius: 6px;
      transition: background .15s, color .15s
    }

    .rtab:hover {
      background: var(--surf);
      color: var(--text2)
    }

    .rtab.active {
      background: var(--surf);
      color: var(--primary)
    }

    /* ACHIEVEMENTS */
    .achiev-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      padding-bottom: 40px
    }

    @media (min-width: 480px) {
      .achiev-grid {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    .achiev-card {
      background: var(--surf-low);
      border-radius: 8px;
      border-left: 4px solid var(--red);
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      transition: border-color .3s ease, background .3s ease
    }

    .achiev-card.done {
      border-left-color: var(--green);
      background: var(--glow-bg)
    }

    body.hide-completed .achiev-card.done {
      display: none
    }

    .achiev-img {
      width: 52px;
      height: 52px;
      border-radius: 6px;
      flex-shrink: 0;
      object-fit: cover;
      background: var(--surf)
    }

    .achiev-info {
      flex: 1;
      min-width: 0
    }

    .achiev-name {
      font-family: var(--head);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .04em;
      color: var(--text);
      line-height: 1.3
    }

    .achiev-card.done .achiev-name {
      color: var(--text2)
    }

    .achiev-desc {
      font-size: 11px;
      color: var(--text2);
      margin-top: 2px;
      line-height: 1.35
    }

    .achiev-card.done .achiev-desc {
      color: var(--text3)
    }

    .achiev-story {
      font-size: 10px;
      color: var(--text3);
      font-style: italic;
      margin-top: 2px
    }

    .achiev-actions {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-shrink: 0
    }

    .achiev-info-btn {
      width: 26px;
      height: 26px;
      border-radius: 6px;
      background: var(--surf);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text3);
      transition: background .15s, color .15s;
      flex-shrink: 0
    }

    .achiev-info-btn:hover {
      background: var(--surf-high);
      color: var(--primary)
    }

    .achiev-info-btn svg {
      width: 13px;
      height: 13px
    }

    /* ORDERS (admin only) */
    .ord-ep-hero {
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      user-select: none;
      gap: 12px
    }

    .ord-ep-hero:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
      border-radius: 3px
    }

    .ord-ep-hero-text {
      flex: 1;
      min-width: 0
    }

    .ord-ep-chev {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      color: var(--text3);
      transition: transform .2s, color .15s;
      margin-right: 4px
    }

    .ord-ep-chev svg {
      width: 20px;
      height: 20px
    }

    .ord-ep-hero:hover .ord-ep-chev {
      color: var(--text)
    }

    .ord-ep-hero[aria-expanded="false"] .ord-ep-chev {
      transform: rotate(-90deg)
    }

    .ep-body {
      display: block
    }

    .ep-body.ep-hidden {
      display: none
    }

    .ord-wip-banner {
      max-width: 800px;
      width: calc(100% - 32px);
      margin: 16px auto 0;
      padding: 10px 14px;
      display: flex;
      align-items: flex-start;
      gap: 8px;
      background: rgba(99, 102, 241, .08);
      border: 1px solid rgba(99, 102, 241, .2);
      border-radius: 8px;
      font-size: 13px;
      color: var(--text2);
      line-height: 1.5
    }

    .ord-wip-banner svg {
      flex-shrink: 0;
      margin-top: 1px;
      opacity: .7
    }

    .ord-wip-banner a {
      color: #818cf8;
      text-decoration: none
    }

    .ord-wip-banner a:hover {
      text-decoration: underline
    }

    .ord-filter-bar {
      position: sticky;
      top: 0;
      z-index: 80;
      background: rgba(18, 20, 22, .92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(255, 255, 255, .04);
      padding: 8px 0 0
    }

    .ord-filter-inner {
      max-width: 800px;
      margin: 0 auto;
      padding: 0 16px;
      position: relative
    }

    .ord-filter-inner svg {
      position: absolute;
      left: 28px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text3);
      pointer-events: none
    }

    .ord-filter-inner input {
      width: 100%;
      padding: 8px 12px 8px 34px;
      background: var(--surf-high);
      border: none;
      border-radius: 4px;
      color: var(--text);
      font-size: 13px;
      font-family: var(--body);
      outline: none;
      min-height: 36px
    }

    .ord-filter-inner input:focus {
      box-shadow: 0 0 0 2px rgba(255, 182, 181, .25)
    }

    .ord-filter-inner input::placeholder {
      color: var(--text3)
    }

    /* type/area selects row */
    .ord-filter-selects {
      max-width: 800px;
      margin: 0 auto;
      padding: 4px 16px 0;
      display: flex;
      flex-wrap: wrap;
      gap: 6px
    }

    .ord-filter-selects select {
      flex: 1 1 140px;
      max-width: 200px;
      background: var(--surf-high);
      border: none;
      border-radius: 4px;
      color: var(--text2);
      font-size: 12px;
      font-family: var(--body);
      padding: 5px 8px;
      min-height: 30px;
      cursor: pointer;
      outline: none
    }

    .ord-filter-selects select:focus {
      box-shadow: 0 0 0 2px rgba(255, 182, 181, .25)
    }

    /* cargo filters row */
    .ord-cargo-filters {
      max-width: 800px;
      margin: 0 auto;
      padding: 4px 16px 6px;
      border-top: 1px solid rgba(255, 255, 255, .04)
    }

    .ord-cargo-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: flex-end
    }

    .ord-cargo-field {
      display: flex;
      flex-direction: column;
      gap: 4px
    }

    .ord-cargo-lbl {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--text3)
    }

    .ord-cargo-field>input[type=number] {
      width: 110px;
      background: var(--surf-high);
      border: none;
      border-radius: 4px;
      color: var(--text2);
      font-size: 12px;
      font-family: var(--body);
      padding: 5px 8px;
      min-height: 30px;
      outline: none;
      -moz-appearance: textfield
    }

    .ord-cargo-field>input[type=number]:focus {
      box-shadow: 0 0 0 2px rgba(255, 182, 181, .25)
    }

    .ord-cargo-field>input[type=number]::-webkit-inner-spin-button {
      -webkit-appearance: none
    }

    .ord-sz-grid {
      display: flex;
      gap: 6px
    }

    .ord-sz-cell {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px
    }

    .ord-sz-lbl {
      font-size: 10px;
      color: var(--text3);
      font-weight: 600
    }

    .ord-sz-inp {
      width: 42px;
      background: var(--surf-high);
      border: none;
      border-radius: 4px;
      color: var(--text2);
      font-size: 12px;
      font-family: var(--body);
      padding: 5px 4px;
      min-height: 30px;
      text-align: center;
      outline: none;
      -moz-appearance: textfield
    }

    .ord-sz-inp:focus {
      box-shadow: 0 0 0 2px rgba(255, 182, 181, .25)
    }

    .ord-sz-inp::-webkit-inner-spin-button {
      -webkit-appearance: none
    }

    /* rank pills row */
    .ord-rank-pills {
      max-width: 800px;
      margin: 0 auto;
      padding: 7px 16px 8px;
      display: flex;
      flex-wrap: wrap;
      gap: 5px
    }

    .ord-rank-pill {
      padding: 3px 9px;
      border-radius: 3px;
      border: 1px solid transparent;
      background: var(--surf-high);
      color: var(--text3);
      font-family: var(--head);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background .12s, color .12s, box-shadow .12s, border-color .12s
    }

    .ord-rank-pill:hover {
      color: var(--text)
    }

    .ord-rank-pill.active[data-rank="all"] {
      background: rgba(255, 182, 181, .15);
      color: var(--primary);
      border-color: rgba(255, 182, 181, .2)
    }

    .ord-rank-pill.active[data-rank=""] {
      background: rgba(255, 255, 255, .08);
      color: var(--text2);
      border-color: rgba(255, 255, 255, .12)
    }

    .ord-rank-pill.active.ord-rp-ttw {
      color: #F97316;
      background: rgba(249, 115, 22, .13);
      border-color: rgba(249, 115, 22, .3);
      box-shadow: 0 0 8px rgba(249, 115, 22, .25)
    }

    .ord-rank-pill.active.ord-rp-yellow {
      color: var(--yellow);
      background: rgba(245, 158, 11, .13);
      border-color: rgba(245, 158, 11, .3);
      box-shadow: 0 0 8px rgba(245, 158, 11, .25)
    }

    .ord-rank-pill.active.ord-rp-blue {
      color: #E8EAED;
      background: rgba(96, 165, 250, .1);
      border-color: rgba(96, 165, 250, .3);
      box-shadow: 0 0 8px rgba(96, 165, 250, .25)
    }

    .ord-rank-pill.active.ord-rp-red {
      color: var(--red);
      background: rgba(239, 68, 68, .12);
      border-color: rgba(239, 68, 68, .3);
      box-shadow: 0 0 8px rgba(239, 68, 68, .25)
    }

    /* rank badge on card */
    .ord-check-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      flex-shrink: 0
    }

    .ord-rank-btn {
      display: none;
      width: 34px;
      height: 34px;
      border-radius: 5px;
      border: 1px solid rgba(255, 255, 255, .08);
      background: var(--surf-high);
      color: var(--text3);
      font-family: var(--head);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .05em;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      padding: 0;
      transition: background .15s, color .15s, box-shadow .15s, border-color .15s
    }

    .ord-rank-btn.visible {
      display: flex
    }

    .ord-rank-btn:hover {
      border-color: rgba(255, 255, 255, .18);
      color: var(--text2)
    }

    .ord-rank-btn.rank-ttw {
      color: #F97316;
      border-color: rgba(249, 115, 22, .45);
      background: rgba(249, 115, 22, .1);
      box-shadow: 0 0 10px rgba(249, 115, 22, .35)
    }

    .ord-rank-btn.rank-yellow {
      color: var(--yellow);
      border-color: rgba(245, 158, 11, .45);
      background: rgba(245, 158, 11, .1);
      box-shadow: 0 0 10px rgba(245, 158, 11, .35)
    }

    .ord-rank-btn.rank-blue {
      color: #E8EAED;
      border-color: rgba(96, 165, 250, .45);
      background: rgba(96, 165, 250, .1);
      box-shadow: 0 0 10px rgba(96, 165, 250, .35)
    }

    .ord-rank-btn.rank-red {
      color: var(--red);
      border-color: rgba(239, 68, 68, .45);
      background: rgba(239, 68, 68, .1);
      box-shadow: 0 0 10px rgba(239, 68, 68, .35)
    }

    /* rank distribution chart */
    .rank-dist {
      display: flex;
      gap: 4px;
      padding: 12px 0 0
    }

    .rank-dist-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      flex: 1;
      min-width: 0
    }

    .rank-dist-bar-wrap {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: flex-end
    }

    .rank-dist-bar {
      width: 100%;
      height: 2px;
      border-radius: 2px 2px 0 0;
      transition: height .35s ease
    }

    .rank-dist-bar.rank-ttw {
      background: rgba(249, 115, 22, .65)
    }

    .rank-dist-bar.rank-yellow {
      background: rgba(245, 158, 11, .65)
    }

    .rank-dist-bar.rank-blue {
      background: rgba(96, 165, 250, .65)
    }

    .rank-dist-bar.rank-red {
      background: rgba(239, 68, 68, .65)
    }

    .rank-dist-ct {
      font-family: var(--head);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .03em;
      color: var(--text3);
      line-height: 1
    }

    .rank-dist-badge {
      width: 100%;
      height: 24px;
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, .08);
      background: var(--surf-high);
      font-family: var(--head);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .05em;
      color: var(--text3);
      display: flex;
      align-items: center;
      justify-content: center
    }

    .rank-dist-badge.rank-ttw {
      color: #F97316;
      border-color: rgba(249, 115, 22, .45);
      background: rgba(249, 115, 22, .1)
    }

    .rank-dist-badge.rank-yellow {
      color: var(--yellow);
      border-color: rgba(245, 158, 11, .45);
      background: rgba(245, 158, 11, .1)
    }

    .rank-dist-badge.rank-blue {
      color: #E8EAED;
      border-color: rgba(96, 165, 250, .45);
      background: rgba(96, 165, 250, .1)
    }

    .rank-dist-badge.rank-red {
      color: var(--red);
      border-color: rgba(239, 68, 68, .45);
      background: rgba(239, 68, 68, .1)
    }

    /* rank modal */
    .rank-modal {
      position: fixed;
      inset: 0;
      z-index: 300;
      display: flex;
      align-items: flex-end;
      pointer-events: none;
      opacity: 0;
      transition: opacity .2s
    }

    .rank-modal.open {
      pointer-events: all;
      opacity: 1
    }

    .rank-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, .5)
    }

    .rank-modal-sheet {
      position: relative;
      width: 100%;
      max-width: 800px;
      margin: 0 auto;
      background: var(--surf-high);
      border-radius: 14px 14px 0 0;
      padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
      transform: translateY(100%);
      transition: transform .28s cubic-bezier(.32, .72, 0, 1)
    }

    .rank-modal.open .rank-modal-sheet {
      transform: translateY(0)
    }

    .rank-modal-lbl {
      font-family: var(--head);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--text3);
      margin-bottom: 14px
    }

    .rank-modal-order {
      color: var(--text2)
    }

    .rank-modal-pills {
      display: flex;
      gap: 7px;
      flex-wrap: wrap
    }

    .rank-modal-pill {
      flex: 1;
      min-width: 48px;
      padding: 11px 4px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, .1);
      background: var(--surf);
      color: var(--text2);
      font-family: var(--head);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      cursor: pointer;
      text-align: center;
      transition: background .12s, box-shadow .12s, border-color .12s, color .12s
    }

    .rank-modal-pill.ord-rp-ttw {
      color: #F97316;
      border-color: rgba(249, 115, 22, .3);
      background: rgba(249, 115, 22, .08)
    }

    .rank-modal-pill.ord-rp-ttw:hover,
    .rank-modal-pill.ord-rp-ttw.current {
      background: rgba(249, 115, 22, .18);
      box-shadow: 0 0 12px rgba(249, 115, 22, .4);
      border-color: rgba(249, 115, 22, .6)
    }

    .rank-modal-pill.ord-rp-yellow {
      color: var(--yellow);
      border-color: rgba(245, 158, 11, .3);
      background: rgba(245, 158, 11, .08)
    }

    .rank-modal-pill.ord-rp-yellow:hover,
    .rank-modal-pill.ord-rp-yellow.current {
      background: rgba(245, 158, 11, .18);
      box-shadow: 0 0 12px rgba(245, 158, 11, .4);
      border-color: rgba(245, 158, 11, .6)
    }

    .rank-modal-pill.ord-rp-blue {
      color: #E8EAED;
      border-color: rgba(96, 165, 250, .3);
      background: rgba(96, 165, 250, .08)
    }

    .rank-modal-pill.ord-rp-blue:hover,
    .rank-modal-pill.ord-rp-blue.current {
      background: rgba(96, 165, 250, .18);
      box-shadow: 0 0 12px rgba(96, 165, 250, .4);
      border-color: rgba(96, 165, 250, .6)
    }

    .rank-modal-pill.ord-rp-red {
      color: var(--red);
      border-color: rgba(239, 68, 68, .3);
      background: rgba(239, 68, 68, .08)
    }

    .rank-modal-pill.ord-rp-red:hover,
    .rank-modal-pill.ord-rp-red.current {
      background: rgba(239, 68, 68, .18);
      box-shadow: 0 0 12px rgba(239, 68, 68, .4);
      border-color: rgba(239, 68, 68, .6)
    }

    .rank-modal-skip {
      color: var(--text3);
      border-color: transparent;
      background: transparent;
      flex: 0 0 auto;
      min-width: 56px
    }

    .rank-modal-skip:hover {
      color: var(--text2);
      background: var(--surf-high)
    }

    .ord-type-group {
      margin-bottom: 20px
    }

    .ord-type-head {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 18px 0 8px
    }

    .ord-type-lbl {
      font-family: var(--head);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      white-space: nowrap
    }

    .ord-type-div {
      height: 1px;
      background: var(--surf-high);
      flex: 1
    }

    .ord-type-ct {
      font-family: var(--head);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .06em;
      color: var(--text3);
      flex-shrink: 0
    }

    .ord-card {
      cursor: default
    }

    .ord-head {
      cursor: default
    }

    .ord-head[data-ord] {
      cursor: pointer
    }

    .ord-num-badge {
      font-size: inherit;
      font-weight: 600;
      letter-spacing: .03em;
      color: var(--text3);
      white-space: nowrap
    }

    .ord-name {
      font-size: 13px;
      letter-spacing: .03em;
      text-transform: none;
      font-weight: 600
    }

    .ord-prefix {
      font-size: inherit;
      font-weight: 600;
      letter-spacing: .03em;
      margin-right: 2px;
      white-space: nowrap
    }

    .ord-meta {
      font-size: 11px;
      color: var(--text2);
      margin-top: 4px;
      line-height: 1.4;
      display: flex;
      align-items: flex-start;
      gap: 4px
    }

    .ord-meta svg {
      flex-shrink: 0;
      margin-top: 1px;
      opacity: .6
    }

    .ord-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 6px
    }

    .ord-tag {
      font-family: var(--head);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: 2px 6px;
      border-radius: 3px;
      background: var(--surf-high);
      color: var(--text2);
      white-space: nowrap
    }

    .ord-tag-obj {
      color: var(--text);
      background: rgba(255, 255, 255, .07)
    }

    .ord-tag-size {
      color: var(--primary);
      background: rgba(255, 180, 171, .1);
      letter-spacing: .12em
    }

    .ord-tags-pkg {
      margin-top: 2px
    }

    .ord-tag-time {
      color: var(--yellow);
      background: rgba(245, 158, 11, .12);
      letter-spacing: .06em
    }

    .ord-tag-qty {
      color: var(--yellow);
      background: rgba(245, 158, 11, .12)
    }

    .ord-tag-dmg {
      color: var(--red);
      background: rgba(239, 68, 68, .12)
    }

    .ord-tag-dmg img {
      filter: brightness(0) saturate(100%) invert(35%) sepia(90%) saturate(800%) hue-rotate(325deg)
    }

    .ord-tag-likes {
      color: var(--text3);
      background: transparent;
      padding-left: 0
    }

    .ord-body {
      overflow: hidden;
      transition: max-height .25s ease
    }

    .ord-card.ord-open .ord-body {
      max-height: 600px !important
    }

    .ord-card.ord-open .card-toggle svg {
      transform: rotate(180deg)
    }

    .ord-body-inner {
      padding: 0 13px 12px
    }

    .ord-req-block {
      margin-bottom: 8px
    }

    .ord-req-lbl {
      font-family: var(--head);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--text3);
      margin-bottom: 6px
    }

    .ord-req-row {
      display: flex;
      align-items: baseline;
      gap: 6px;
      padding: 4px 0;
      border-top: 1px solid var(--surf-high);
      font-size: 12px
    }

    .ord-req-row:first-of-type {
      border-top: none
    }

    .ord-req-type {
      font-family: var(--head);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--text3);
      white-space: nowrap;
      flex-shrink: 0
    }

    .ord-req-num {
      font-family: var(--head);
      font-size: 11px;
      font-weight: 700;
      color: var(--yellow);
      background: rgba(245, 158, 11, .1);
      padding: 1px 6px;
      border-radius: 3px
    }

    .ord-req-note {
      font-size: 11px;
      color: var(--text2)
    }

    .ord-req-free {
      font-size: 12px;
      color: var(--text2);
      line-height: 1.4
    }

    .ord-likes-block {
      margin-bottom: 8px
    }

    .ord-likes-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      padding: 4px 0;
      border-top: 1px solid var(--surf-high);
      font-size: 12px
    }

    .ord-likes-row:first-of-type {
      border-top: none
    }

    .ord-likes-completion .ord-likes-cat {
      color: var(--text);
      font-weight: 600
    }

    .ord-likes-group-sep {
      height: 8px
    }

    .ord-likes-cat {
      color: var(--text2);
      flex: 1
    }

    .ord-likes-val {
      font-family: var(--head);
      font-size: 11px;
      font-weight: 700;
      color: var(--primary);
      white-space: nowrap
    }

    .ord-notes {
      font-size: 12px;
      color: var(--text2);
      line-height: 1.5;
      padding: 6px 0 2px;
      border-top: 1px solid var(--surf-high)
    }

    /* INVENTORY */
    .inv-wrap {
      padding-top: 12px;
      padding-bottom: 24px
    }

    .inv-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      margin-bottom: 16px
    }

    .inv-pills {
      display: flex;
      gap: 2px;
      background: var(--card);
      border-radius: 8px;
      padding: 3px
    }

    .inv-pill {
      background: none;
      border: none;
      cursor: pointer;
      font-family: var(--head);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--text3);
      padding: 6px 12px;
      border-radius: 6px;
      transition: background .15s, color .15s
    }

    .inv-pill.active {
      background: var(--surf-high);
      color: var(--text)
    }

    .inv-count {
      font-family: var(--head);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .1em;
      color: var(--text3)
    }

    .inv-cat-group {
      margin-bottom: 4px
    }

    .inv-cat-head {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px 6px;
      cursor: pointer;
      user-select: none
    }

    .inv-cat-lbl {
      font-family: var(--head);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      white-space: nowrap
    }

    .inv-cat-div {
      flex: 1;
      height: 1px;
      background: rgba(255, 255, 255, .06)
    }

    .inv-cat-ct {
      font-family: var(--head);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .06em;
      white-space: nowrap
    }

    .inv-cat-chv {
      width: 12px;
      height: 12px;
      flex-shrink: 0;
      color: var(--text3);
      transition: transform .18s ease
    }

    .inv-cat-group.inv-cat-open .inv-cat-chv {
      transform: rotate(180deg)
    }

    .inv-cat-items {
      display: none;
      padding: 0 8px 4px
    }

    .inv-cat-group.inv-cat-open .inv-cat-items {
      display: block
    }

    .inv-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 8px;
      border-radius: 6px;
      cursor: pointer;
      transition: background .12s
    }

    .inv-item:hover {
      background: rgba(255, 255, 255, .05)
    }

    .inv-item-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0
    }

    .inv-item-dot.have {
      background: var(--green)
    }

    .inv-item-dot.missing {
      background: transparent;
      border: 1.5px solid rgba(255, 255, 255, .2)
    }

    .inv-item-info {
      flex: 1;
      min-width: 0
    }

    .inv-item-name {
      display: block;
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .inv-item-loc {
      display: block;
      font-size: 11px;
      color: var(--text3);
      margin-top: 1px
    }

    .inv-empty {
      padding: 32px 16px;
      text-align: center;
      color: var(--text3);
      font-size: 13px
    }

    /* LOCATION MODAL (inventory) */
    .loc-modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 300;
      display: flex;
      align-items: flex-end;
      justify-content: center
    }

    .loc-modal-overlay[hidden] {
      display: none
    }

    .loc-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, .65);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px)
    }

    .loc-modal-wrap {
      position: relative;
      width: 100%;
      max-width: 800px;
      max-height: 88vh;
      background: var(--bg);
      border-radius: 16px 16px 0 0;
      display: flex;
      flex-direction: column;
      box-shadow: 0 -8px 40px rgba(0, 0, 0, .5)
    }

    .loc-modal-close {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 1;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--surf-high);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text2);
      transition: background .15s, color .15s
    }

    .loc-modal-close:hover {
      background: var(--surf);
      color: var(--text)
    }

    .loc-modal-scroll {
      overflow-y: auto;
      flex: 1;
      padding: 16px 16px calc(var(--bnav-h) + 16px)
    }

    .loc-modal-scroll .card {
      margin: 0
    }

    /* MODAL */
    .modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 200;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s ease
    }

    .modal-overlay.open {
      opacity: 1;
      pointer-events: all
    }

    .modal {
      background: var(--surf-low);
      border-radius: 10px;
      width: 100%;
      max-width: 480px;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transform: translateY(8px);
      transition: transform .2s ease
    }

    .modal-overlay.open .modal {
      transform: translateY(0)
    }

    .modal-head {
      padding: 14px 16px 10px;
      border-bottom: 1px solid var(--surf-high);
      display: flex;
      align-items: flex-start;
      gap: 10px
    }

    .modal-title {
      flex: 1;
      min-width: 0
    }

    .modal-label {
      font-family: var(--head);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--primary);
      margin-bottom: 3px
    }

    .modal-name {
      font-family: var(--head);
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      line-height: 1.3
    }

    .modal-close {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: var(--surf);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text3);
      flex-shrink: 0;
      transition: background .15s, color .15s
    }

    .modal-close:hover {
      background: var(--surf-high);
      color: var(--text)
    }

    .modal-close svg {
      width: 14px;
      height: 14px
    }

    .modal-body {
      padding: 14px 16px;
      overflow-y: auto;
      font-size: 13px;
      color: var(--text2);
      line-height: 1.6
    }

    .modal-section-head {
      font-family: var(--head);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--text3);
      margin-bottom: 8px
    }

    .modal-steps {
      margin: 0;
      padding-left: 20px;
      display: flex;
      flex-direction: column;
      gap: 7px
    }

    .modal-steps li {
      padding-left: 4px
    }

    /* RESET MODAL */
    .modal-foot {
      padding: 10px 14px 14px;
      border-top: 1px solid var(--surf-high);
      display: flex;
      gap: 8px;
      flex-shrink: 0
    }

    .rm-desc {
      font-size: 12px;
      color: var(--text2);
      line-height: 1.6;
      margin-bottom: 16px
    }

    .rm-btns {
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .rm-btn {
      width: 100%;
      padding: 13px 16px;
      border-radius: 8px;
      background: var(--surf);
      border: none;
      cursor: pointer;
      font-family: var(--head);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--text);
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: background .15s;
      min-height: 44px
    }

    .rm-btn:hover {
      background: var(--surf-high)
    }

    .rm-btn-danger {
      background: rgba(239, 68, 68, .1);
      color: var(--red)
    }

    .rm-btn-danger:hover {
      background: rgba(239, 68, 68, .18)
    }

    .rm-btn svg {
      width: 12px;
      height: 12px;
      opacity: .55;
      flex-shrink: 0
    }

    .rm-sel-all-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 4px 0 10px;
      cursor: pointer;
      font-family: var(--head);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--text3);
      border-bottom: 1px solid var(--surf-high);
      margin-bottom: 8px
    }

    .rm-sel-all-row input {
      accent-color: var(--primary);
      width: 15px;
      height: 15px;
      cursor: pointer;
      flex-shrink: 0
    }

    .rm-list {
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 2px;
      max-height: 52vh
    }

    .rm-group {
      display: flex;
      flex-direction: column
    }

    .rm-group-head {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 0 5px;
      cursor: pointer;
      font-family: var(--head);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--text3)
    }

    .rm-group-head input {
      accent-color: var(--primary);
      width: 15px;
      height: 15px;
      cursor: pointer;
      flex-shrink: 0
    }

    .rm-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 0 6px 22px;
      border-radius: 5px;
      cursor: pointer;
      transition: background .1s;
      -webkit-tap-highlight-color: transparent
    }

    .rm-row:hover {
      background: var(--surf-high)
    }

    .rm-row input {
      accent-color: var(--primary);
      width: 14px;
      height: 14px;
      cursor: pointer;
      flex-shrink: 0
    }

    .rm-row span {
      font-size: 12.5px;
      color: var(--text2);
      line-height: 1.3
    }

    .rm-row:has(input:checked) span {
      color: var(--text)
    }

    .rm-foot-cancel,
    .rm-foot-back {
      flex: 1;
      padding: 9px;
      border-radius: 7px;
      background: var(--surf);
      border: none;
      cursor: pointer;
      font-family: var(--head);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--text2);
      transition: background .15s, color .15s;
      min-height: 40px
    }

    .rm-foot-cancel:hover,
    .rm-foot-back:hover {
      background: var(--surf-high);
      color: var(--text)
    }

    .rm-foot-reset {
      flex: 2;
      padding: 9px;
      border-radius: 7px;
      background: rgba(239, 68, 68, .12);
      border: none;
      cursor: pointer;
      font-family: var(--head);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--red);
      transition: background .15s;
      min-height: 40px
    }

    .rm-foot-reset:hover:not(:disabled) {
      background: rgba(239, 68, 68, .22)
    }

    .rm-foot-reset:disabled {
      opacity: .35;
      cursor: not-allowed
    }

    /* ORDER+ */
    .oe-wrap {
      padding: 24px 16px 40px;
      max-width: 560px;
      margin: 0 auto
    }

    .oe-heading {
      font-family: var(--head);
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 4px
    }

    .oe-sub {
      font-size: 13px;
      color: var(--text3);
      margin-bottom: 20px
    }

    .oe-input-row {
      display: flex;
      gap: 8px;
      margin-bottom: 24px
    }

    .oe-input {
      flex: 1;
      background: var(--surf);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 18px;
      font-weight: 700;
      letter-spacing: .05em;
      padding: 10px 14px;
      outline: none;
      transition: border-color .15s
    }

    .oe-input:focus {
      border-color: var(--primary)
    }


    .oe-error {
      font-size: 13px;
      color: var(--red);
      margin-bottom: 16px
    }

    .oe-card {
      background: var(--surf);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 18px 20px;
      display: flex;
      flex-direction: column;
      gap: 14px
    }

    .oe-rec-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px
    }

    .oe-multiplier {
      font-size: 12px;
      font-weight: 600;
      color: var(--text2)
    }

    .oe-rec {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--head);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: 4px 12px;
      border-radius: 20px;
      align-self: flex-start
    }

    .oe-rec-prioritize {
      background: rgba(34, 197, 94, .15);
      color: #22c55e;
      border: 1px solid rgba(34, 197, 94, .3)
    }

    .oe-rec-strong {
      background: rgba(251, 146, 60, .12);
      color: #fb923c;
      border: 1px solid rgba(251, 146, 60, .3)
    }

    .oe-rec-good {
      background: rgba(99, 102, 241, .15);
      color: #818cf8;
      border: 1px solid rgba(99, 102, 241, .3)
    }

    .oe-rec-later {
      background: rgba(245, 158, 11, .12);
      color: var(--yellow);
      border: 1px solid rgba(245, 158, 11, .3)
    }

    .oe-rec-story {
      background: rgba(255, 255, 255, .06);
      color: var(--text3);
      border: 1px solid var(--border)
    }

    .oe-name {
      font-family: var(--head);
      font-size: 1rem;
      font-weight: 700;
      color: var(--text);
      line-height: 1.3
    }

    .oe-meta {
      font-size: 12px;
      color: var(--text3)
    }

    .oe-stats {
      display: flex;
      flex-direction: column;
      gap: 0;
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden
    }

    .oe-stat {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 14px;
      border-bottom: 1px solid var(--border)
    }

    .oe-stat:nth-child(even) {
      background: rgba(255, 255, 255, .03)
    }

    .oe-stat:last-child {
      border-bottom: none
    }

    .oe-stat-lbl {
      font-size: 12px;
      color: var(--text2);
      flex-shrink: 0
    }

    .oe-stat-val {
      font-family: var(--head);
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--text);
      text-align: right
    }

    .oe-stat-note {
      font-size: 11px;
      color: var(--text3);
      text-align: right
    }

    .oe-flags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px
    }

    .oe-flag {
      font-size: 11px;
      font-weight: 600;
      color: var(--yellow);
      background: rgba(245, 158, 11, .1);
      border: 1px solid rgba(245, 158, 11, .25);
      border-radius: 20px;
      padding: 2px 10px
    }

    .oe-route {
      font-size: 12px;
      color: var(--text3)
    }

    .oe-route span {
      color: var(--text2)
    }

    /* STRUCTURES */
    .str-wrap {
      padding-top: 20px;
      padding-bottom: 40px
    }

    .str-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px
    }

    .str-card {
      background: var(--surf);
      border-radius: 10px;
      overflow: hidden
    }

    .str-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 14px 10px;
      border-bottom: 1px solid rgba(255, 255, 255, .05)
    }

    .str-name {
      font-family: var(--head);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--text)
    }

    .str-bw {
      font-family: var(--head);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .1em;
      color: var(--text3);
      background: var(--surf-high);
      padding: 3px 8px;
      border-radius: 4px
    }

    .str-nodata {
      padding: 12px 14px;
      font-size: 12px;
      color: var(--text3);
      font-style: italic
    }

    .str-table {
      width: 100%;
      border-collapse: collapse
    }

    .str-mat-head {
      text-align: center;
      padding: 10px 6px 6px;
      vertical-align: bottom
    }

    .mat-icon {
      width: 32px;
      height: 32px;
      display: block;
      margin: 0 auto 4px
    }

    .str-mat-label {
      display: block;
      font-family: var(--head);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--text3)
    }

    .str-tier {
      font-family: var(--head);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--text3);
      padding: 8px 14px;
      white-space: nowrap;
      width: 1%
    }

    .str-amt {
      text-align: center;
      padding: 8px 6px;
      font-family: var(--head);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .04em;
      color: var(--text)
    }

    tbody tr:nth-child(odd) .str-tier,
    tbody tr:nth-child(odd) .str-amt {
      background: rgba(255, 255, 255, .02)
    }

    tbody tr:last-child .str-tier,
    tbody tr:last-child .str-amt {
      padding-bottom: 12px
    }

    @media(min-width:480px) {
      .str-grid {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media(min-width:720px) {
      .str-grid {
        grid-template-columns: repeat(3, 1fr)
      }
    }

    @media(min-width:600px) {
      .wrap {
        padding: 0 24px
      }

      .top-bar-inner {
        padding: 12px 24px
      }

      .region-title {
        font-size: 34px
      }

      .card-name {
        font-size: 15px
      }

      .lrow-item {
        font-size: 13px
      }

    }

    /* ── Milestones ───────────────────────────────────────────────── */
    .ms-notice {
      margin: 24px 0 20px;
      background: rgba(245, 158, 11, .06);
      border: 1px solid rgba(245, 158, 11, .18);
      border-radius: 8px;
      padding: 14px 16px;
    }

    .ms-notice p {
      font-size: 13px;
      color: var(--text2);
      margin-bottom: 10px;
    }

    .ms-notice-links {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .ms-notice-links a {
      font-size: 12px;
      color: var(--primary);
      text-decoration: none;
    }

    .ms-notice-links a:hover {
      text-decoration: underline;
    }

    .ms-list {
      display: flex;
      flex-direction: column;
      gap: 2px;
      margin-bottom: 32px;
    }

    .ms-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 11px 14px;
      border-radius: 8px;
      cursor: pointer;
      transition: background .12s;
      border: 1px solid transparent;
    }

    .ms-row:hover {
      background: var(--surf);
    }

    .ms-row input[type="checkbox"] {
      width: 17px;
      height: 17px;
      flex-shrink: 0;
      accent-color: var(--primary);
      cursor: pointer;
    }

    .ms-label {
      font-size: 14px;
      color: var(--text);
      transition: color .12s;
    }

    .ms-row.ms-done .ms-label {
      color: var(--text3);
      text-decoration: line-through;
    }