:root {
      --cream: #f4efe2;
      --cream-dim: #bcc5da;
      --gold: #d8b863;
      --gold-bright: #e8cf8a;
      --ember: #c9a24a;
      --sage: #86c79b;
      color-scheme: dark;
    }

    ::selection {
      background: rgba(216, 184, 99, 0.35);
      color: #fffdf6;
    }

    /* Midnight navy ambient lighting + gentle grain */
    body {
      background-color: #060a14;
      background-image:
        radial-gradient(at 8% 8%, rgba(216, 184, 99, 0.08) 0px, transparent 45%),
        radial-gradient(at 92% 12%, rgba(84, 118, 190, 0.10) 0px, transparent 50%),
        radial-gradient(at 50% 85%, rgba(46, 74, 138, 0.10) 0px, transparent 60%),
        radial-gradient(at 85% 95%, rgba(216, 184, 99, 0.04) 0px, transparent 50%);
      background-attachment: fixed;
      color: var(--cream);
      font-family: 'Plus Jakarta Sans', sans-serif;
      letter-spacing: 0.005em;
    }

    body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: 0.035;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    body > * {
      position: relative;
      z-index: 1;
    }

    .font-display {
      font-family: 'Fraunces', Georgia, serif;
      font-optical-sizing: auto;
      letter-spacing: -0.01em;
    }

    /* Frosted glass panels - midnight navy with gold-tinted edges */
    .glass-panel {
      background: linear-gradient(135deg, rgba(244, 239, 226, 0.045) 0%, rgba(244, 239, 226, 0.008) 100%), rgba(10, 17, 34, 0.72);
      backdrop-filter: blur(24px) saturate(170%);
      -webkit-backdrop-filter: blur(24px) saturate(170%);
      border: 1px solid rgba(226, 209, 168, 0.10);
      box-shadow: 0 16px 44px -10px rgba(2, 5, 14, 0.75), inset 0 1px 0 0 rgba(244, 239, 226, 0.10);
    }

    .glass-card {
      background: linear-gradient(145deg, rgba(244, 239, 226, 0.04) 0%, rgba(244, 239, 226, 0.008) 100%), rgba(12, 20, 40, 0.8);
      backdrop-filter: blur(20px) saturate(160%);
      -webkit-backdrop-filter: blur(20px) saturate(160%);
      border: 1px solid rgba(226, 209, 168, 0.09);
      box-shadow: 0 10px 30px -8px rgba(2, 5, 14, 0.7), inset 0 1px 0 0 rgba(244, 239, 226, 0.08);
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .glass-card:hover {
      transform: translateY(-2px);
      border-color: rgba(216, 184, 99, 0.38);
      box-shadow: 0 22px 48px -10px rgba(2, 5, 14, 0.8), 0 0 32px -8px rgba(216, 184, 99, 0.18), inset 0 1px 0 0 rgba(244, 239, 226, 0.16);
    }

    /* Frosted pill buttons */
    .glass-pill-btn {
      background: rgba(244, 239, 226, 0.035);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(226, 209, 168, 0.10);
      box-shadow: inset 0 1px 0 0 rgba(244, 239, 226, 0.06);
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .glass-pill-btn:hover {
      background: rgba(244, 239, 226, 0.07);
      border-color: rgba(216, 184, 99, 0.35);
      box-shadow: 0 6px 18px -4px rgba(2, 5, 14, 0.6), inset 0 1px 0 0 rgba(244, 239, 226, 0.14);
      color: #fffdf6;
    }

    /* Active glowing filter pill - gold */
    .glass-pill-active {
      background: linear-gradient(135deg, rgba(216, 184, 99, 0.26) 0%, rgba(201, 162, 74, 0.12) 100%) !important;
      border-color: rgba(216, 184, 99, 0.55) !important;
      color: var(--gold-bright) !important;
      box-shadow: 0 0 24px -4px rgba(216, 184, 99, 0.45), inset 0 1px 0 0 rgba(244, 239, 226, 0.28) !important;
    }

    .btn-primary {
      background: linear-gradient(135deg, #e8cf8a 0%, #c9a24a 100%);
      color: #0a1122;
      border: 1px solid rgba(255, 248, 228, 0.4);
      box-shadow: 0 10px 28px -8px rgba(216, 184, 99, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4);
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .btn-primary:hover {
      filter: brightness(1.06);
      box-shadow: 0 16px 36px -8px rgba(216, 184, 99, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }

    /* ------------------------------------------------------------------ */
    /* Button role system: one visual language for every control           */
    /* (plain class selectors so Tailwind preflight cannot override colors) */
    /* ------------------------------------------------------------------ */
    .btn-role {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      height: 34px;
      padding: 0 12px;
      border-radius: 11px;
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .btn-ghost {
      background: rgba(244, 239, 226, 0.035);
      border: 1px solid rgba(226, 209, 168, 0.10);
      color: #d7dfee;
      box-shadow: inset 0 1px 0 0 rgba(244, 239, 226, 0.06);
    }
    .btn-ghost:hover {
      background: rgba(244, 239, 226, 0.08);
      border-color: rgba(216, 184, 99, 0.35);
      color: #fffdf6;
    }

    .btn-tint-sky {
      background: rgba(56, 189, 248, 0.12);
      border: 1px solid rgba(56, 189, 248, 0.30);
      color: #7dd3fc;
    }
    .btn-tint-sky:hover {
      background: rgba(56, 189, 248, 0.22);
      border-color: rgba(56, 189, 248, 0.5);
      color: #b4e5fd;
      box-shadow: 0 4px 18px -4px rgba(56, 189, 248, 0.35);
    }

    .btn-tint-amber {
      background: rgba(216, 184, 99, 0.12);
      border: 1px solid rgba(216, 184, 99, 0.32);
      color: #e8cf8a;
    }
    .btn-tint-amber:hover {
      background: rgba(216, 184, 99, 0.22);
      border-color: rgba(216, 184, 99, 0.55);
      color: #f4e3ae;
      box-shadow: 0 4px 18px -4px rgba(216, 184, 99, 0.35);
    }

    .btn-tint-emerald {
      background: rgba(134, 199, 155, 0.12);
      border: 1px solid rgba(134, 199, 155, 0.32);
      color: #86c79b;
    }
    .btn-tint-emerald:hover {
      background: rgba(134, 199, 155, 0.22);
      border-color: rgba(134, 199, 155, 0.55);
      color: #b5e3c2;
      box-shadow: 0 4px 18px -4px rgba(134, 199, 155, 0.35);
    }

    .btn-danger {
      background: rgba(226, 132, 142, 0.08);
      border: 1px solid rgba(226, 132, 142, 0.28);
      color: #f0a6ae;
    }
    .btn-danger:hover {
      background: rgba(226, 132, 142, 0.2);
      border-color: rgba(226, 132, 142, 0.55);
      color: #f8c2c8;
      box-shadow: 0 4px 18px -4px rgba(226, 132, 142, 0.35);
    }

    /* Square icon buttons (row actions, chrome) */
    .btn-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 10px;
      flex-shrink: 0;
      color: #a6b2c9;
      background: transparent;
      border: 1px solid transparent;
      cursor: pointer;
      transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .btn-icon:hover {
      background: rgba(244, 239, 226, 0.07);
      border-color: rgba(226, 209, 168, 0.12);
      color: #fffdf6;
    }
    .btn-icon.btn-amber { color: #e8cf8a; }
    .btn-icon.btn-amber:hover { background: rgba(216, 184, 99, 0.14); border-color: rgba(216, 184, 99, 0.3); color: #f4e3ae; }
    .btn-icon.btn-sky { color: #7dd3fc; }
    .btn-icon.btn-sky:hover { background: rgba(56, 189, 248, 0.15); border-color: rgba(56, 189, 248, 0.3); color: #a5dffb; }
    .btn-icon.btn-danger { color: #f0a6ae; }
    .btn-icon.btn-danger:hover { background: rgba(226, 132, 142, 0.16); border-color: rgba(226, 132, 142, 0.32); color: #f8c2c8; }

    /* Frosted icon buttons (detail drawer controls over artwork) */
    .btn-icon.glass-pill-btn {
      background: rgba(244, 239, 226, 0.06);
      border-color: rgba(226, 209, 168, 0.14);
      color: #e8edf8;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: inset 0 1px 0 0 rgba(244, 239, 226, 0.08);
    }
    .btn-icon.glass-pill-btn:hover {
      background: rgba(244, 239, 226, 0.14);
      border-color: rgba(216, 184, 99, 0.4);
      color: #fffdf6;
    }

    /* Toggle chips with unmistakable on/off states */
    .btn-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      height: 34px;
      padding: 0 12px;
      border-radius: 11px;
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      background: rgba(244, 239, 226, 0.035);
      border: 1px solid rgba(226, 209, 168, 0.10);
      color: #a6b2c9;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .btn-toggle:hover {
      background: rgba(244, 239, 226, 0.08);
      border-color: rgba(216, 184, 99, 0.35);
      color: #fffdf6;
    }
    .btn-toggle-on {
      background: rgba(216, 184, 99, 0.18);
      border-color: rgba(216, 184, 99, 0.5);
      color: #e8cf8a;
      box-shadow: 0 0 18px -4px rgba(216, 184, 99, 0.4), inset 0 1px 0 0 rgba(244, 239, 226, 0.12);
    }
    .btn-toggle-on.tint-emerald {
      background: rgba(134, 199, 155, 0.16);
      border-color: rgba(134, 199, 155, 0.5);
      color: #9fd8b0;
      box-shadow: 0 0 18px -4px rgba(134, 199, 155, 0.4), inset 0 1px 0 0 rgba(244, 239, 226, 0.12);
    }
    .btn-toggle-on:hover {
      background: rgba(216, 184, 99, 0.26);
      border-color: rgba(216, 184, 99, 0.6);
      color: #f4e3ae;
    }
    .btn-toggle-on.tint-emerald:hover {
      background: rgba(134, 199, 155, 0.24);
      border-color: rgba(134, 199, 155, 0.6);
      color: #b5e3c2;
    }

    /* Quiet contextual links (external resources, not actions) */
    .btn-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      height: 30px;
      padding: 0 8px;
      border-radius: 8px;
      font-size: 11.5px;
      font-weight: 600;
      white-space: nowrap;
      color: #a6b2c9;
      text-decoration: none;
      transition: color 0.15s ease, background 0.15s ease;
    }
    .btn-link:hover {
      color: #e8cf8a;
      background: rgba(216, 184, 99, 0.08);
    }

    /* Steam-style review score badges */
    .review-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 10.5px;
      font-weight: 700;
      line-height: 1.5;
      white-space: nowrap;
      border: 1px solid rgba(166, 178, 201, 0.3);
      background: rgba(166, 178, 201, 0.1);
      color: #c3cde0;
    }
    .review-badge.overwhelming {
      color: #beee11;
      background: rgba(190, 238, 17, 0.12);
      border-color: rgba(190, 238, 17, 0.4);
    }
    .review-badge.positive {
      color: #66c0f4;
      background: rgba(102, 192, 244, 0.12);
      border-color: rgba(102, 192, 244, 0.4);
    }
    .review-badge.mixed {
      color: #c9a86a;
      background: rgba(185, 160, 116, 0.14);
      border-color: rgba(185, 160, 116, 0.45);
    }
    .review-badge.negative {
      color: #e08a6a;
      background: rgba(163, 76, 37, 0.18);
      border-color: rgba(163, 76, 37, 0.5);
    }

    /* Visible keyboard focus everywhere */
    button:focus-visible,
    a:focus-visible,
    [role="button"]:focus-visible,
    .sv-check:focus-visible,
    select:focus-visible {
      outline: 2px solid rgba(216, 184, 99, 0.7);
      outline-offset: 2px;
    }

    /* Form section headings */
    .form-section-title {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: rgba(216, 184, 99, 0.75);
      padding-top: 2px;
    }
    .form-section-title::after {
      content: '';
      flex: 1;
      height: 1px;
      background: rgba(226, 209, 168, 0.10);
    }

    /* Toast entrance */
    @keyframes toastIn {
      from { opacity: 0; transform: translateY(10px) scale(0.98); }
      to { opacity: 1; transform: none; }
    }
    .toast-enter { animation: toastIn 0.28s cubic-bezier(0.16, 1, 0.3, 1); }

    /* Filter chips: +/- glyphs replace the status dot once a state is set */
    .filter-chip[data-state="include"] .chip-dot,
    .filter-chip[data-state="exclude"] .chip-dot { display: none; }
    .filter-chip[data-state="include"]::before {
      content: '+';
      font-weight: 800;
      font-size: 12px;
      line-height: 1;
      margin-right: 1px;
    }

    /* Rows expiring soon get a subtle gold marker */
    .expiring-row td:first-child {
      box-shadow: inset 3px 0 0 0 rgba(216, 184, 99, 0.75);
    }

    .expiring-row {
      background: linear-gradient(90deg, rgba(216, 184, 99, 0.06) 0%, transparent 55%);
    }

    .glass-card-active {
      border-color: rgba(216, 184, 99, 0.45) !important;
      box-shadow: 0 0 26px -6px rgba(216, 184, 99, 0.28), inset 0 1px 0 0 rgba(244, 239, 226, 0.16) !important;
    }

    /* Bulk selection checkbox */
    .sv-check {
      appearance: none;
      width: 15px;
      height: 15px;
      border-radius: 5px;
      border: 1px solid rgba(243, 234, 216, 0.25);
      background: rgba(0, 0, 0, 0.35);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
      flex-shrink: 0;
    }

    .sv-check:checked {
      background: linear-gradient(135deg, #e8cf8a, #c9a24a);
      border-color: rgba(255, 248, 228, 0.55);
      box-shadow: 0 0 12px -2px rgba(216, 184, 99, 0.65);
    }

    .sv-check:checked::after {
      content: '';
      width: 4px;
      height: 8px;
      border: solid #241a0c;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg) translate(-1px, -1px);
    }

    .bulk-bar-enter {
      animation: bulkIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes bulkIn {
      from { opacity: 0; transform: translate(-50%, 12px); }
      to { opacity: 1; transform: translate(-50%, 0); }
    }

    @keyframes toastProgress {
      from { transform: scaleX(1); }
      to { transform: scaleX(0); }
    }

    .toast-progress {
      transform-origin: left;
      animation: toastProgress 3.2s linear forwards;
    }

    /* Smooth scrollbar */
    .custom-scrollbar::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
      background: rgba(6, 10, 20, 0.6);
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: rgba(244, 239, 226, 0.13);
      border-radius: 9999px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background: rgba(216, 184, 99, 0.45);
    }

    /* Floating hover card */
    #steamHoverCard {
      transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 28px 60px -12px rgba(2, 5, 14, 0.9), 0 0 36px -8px rgba(216, 184, 99, 0.22), inset 0 1px 0 0 rgba(244, 239, 226, 0.18);
    }

    /* Region-lock icon badge with hover tooltip (JS-positioned, never clipped) */
    .region-badge {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 2px 6px;
      border-radius: 8px;
      font-size: 10px;
      font-weight: 700;
      line-height: 1.4;
      cursor: help;
      flex-shrink: 0;
    }

    .region-badge.only {
      background: rgba(216, 184, 99, 0.16);
      color: #e8cf8a;
      border: 1px solid rgba(216, 184, 99, 0.38);
    }

    .region-badge.excluded {
      background: rgba(226, 132, 142, 0.15);
      color: #f0a6ae;
      border: 1px solid rgba(226, 132, 142, 0.38);
    }

    #regionTooltip {
      position: fixed;
      z-index: 90;
      max-width: 320px;
      max-height: 240px;
      overflow-y: auto;
      padding: 10px 12px;
      border-radius: 14px;
      font-size: 11px;
      line-height: 1.5;
      color: var(--cream);
      background: rgba(7, 12, 24, 0.97);
      border: 1px solid rgba(216, 184, 99, 0.35);
      box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.8);
      pointer-events: none;
      backdrop-filter: blur(14px);
    }

    #regionTooltip .tt-title {
      font-weight: 700;
      color: var(--gold-bright);
      margin-bottom: 4px;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    /* Lazy-load footer */
    #listFooter {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      padding: 14px 0 4px;
    }

    /* Sticky metric cards */
    .sticky-bar {
      position: sticky;
      top: calc(4rem + 4px);
      z-index: 30;
    }

    .sticky-bar::before {
      content: '';
      position: absolute;
      inset: -12px -12px -10px -12px;
      border-radius: 26px;
      background: rgba(6, 10, 20, 0.78);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border: 1px solid rgba(226, 209, 168, 0.08);
      opacity: 0;
      transition: opacity 0.2s ease;
      pointer-events: none;
      z-index: -1;
    }

    .sticky-bar.is-stuck::before {
      opacity: 1;
    }

    /* Filter chips: include (gold, via glass-pill-active) / exclude (rose, struck through) */
    .filter-chip[data-state="exclude"] {
      background: linear-gradient(135deg, rgba(226, 132, 142, 0.2) 0%, rgba(226, 132, 142, 0.07) 100%) !important;
      border-color: rgba(226, 132, 142, 0.5) !important;
      color: #f0a6ae !important;
      box-shadow: 0 0 20px -4px rgba(226, 132, 142, 0.35), inset 0 1px 0 0 rgba(244, 239, 226, 0.2) !important;
    }

    .filter-chip[data-state="exclude"] .chip-label {
      text-decoration: line-through;
    }

    .filter-chip[data-state="exclude"]::before {
      content: '\2212';
      font-weight: 800;
      margin-right: 1px;
    }

    /* Chrome stays non-selectable; content (titles, keys, notes) is selectable */
    header, #metricsBar, #bulkBar, #statusFilterChips, #viewSwitcher, button {
      -webkit-user-select: none;
      user-select: none;
    }

    /* Responsive header: import moves to the menu on tablet, FAB on phones */
    @media (max-width: 1023px) {
      #adminHumbleBtn { display: none !important; }
    }

    @media (min-width: 640px) {
      #adminHumbleFab { display: none !important; }
    }

    @media (max-width: 639px) {
      #toastContainer { bottom: 5.5rem; }
    }

    @media (max-width: 479px) {
      #headerExpiringBadge { display: none !important; }
      #btnCopyPublicLink { display: none !important; }
    }

    /* Command palette */
    .palette-row-active {
      background: linear-gradient(135deg, rgba(216, 184, 99, 0.18) 0%, rgba(201, 162, 74, 0.07) 100%);
      border-color: rgba(216, 184, 99, 0.4) !important;
    }

    kbd {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      padding: 1px 5px;
      border-radius: 6px;
      border: 1px solid rgba(226, 209, 168, 0.18);
      background: rgba(244, 239, 226, 0.05);
      color: var(--cream-dim);
    }

    /* Modal panels sit on an already-blurred overlay: skip the extra backdrop filter
       (avoids double-blur rendering artifacts and saves GPU on low-end devices) */
    .modal-overlay > .glass-panel,
    .modal-overlay > .modal-drawer {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    /* Modal transitions */
    @keyframes overlayIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes panelIn {
      from { opacity: 0; transform: translateY(12px) scale(0.98); }
      to { opacity: 1; transform: none; }
    }

    @keyframes drawerIn {
      from { opacity: 0; transform: translateX(28px); }
      to { opacity: 1; transform: none; }
    }

    @keyframes skeletonSweep {
      from { transform: translateX(-100%); }
      to { transform: translateX(100%); }
    }

    @keyframes expiringPulse {
      0%, 100% { box-shadow: 0 10px 30px -8px rgba(2, 5, 14, 0.7); }
      50% { box-shadow: 0 0 26px -4px rgba(216, 184, 99, 0.4); }
    }

    .modal-overlay.modal-opening { animation: overlayIn 0.18s ease-out; }
    .modal-overlay.modal-opening > * { animation: panelIn 0.24s cubic-bezier(0.16, 1, 0.3, 1); }
    .modal-overlay.modal-opening > .modal-drawer { animation: drawerIn 0.26s cubic-bezier(0.16, 1, 0.3, 1); }
    .modal-overlay.modal-closing { animation: overlayIn 0.16s ease-in reverse forwards; }
    .modal-overlay.modal-closing > * { animation: panelIn 0.16s ease-in reverse forwards; }
    .modal-overlay.modal-closing > .modal-drawer { animation: drawerIn 0.16s ease-in reverse forwards; }

    /* Loading skeletons */
    .sv-skeleton {
      position: relative;
      overflow: hidden;
      background: rgba(244, 239, 226, 0.05);
      border-radius: 12px;
    }

    .sv-skeleton::after {
      content: '';
      position: absolute;
      inset: 0;
      transform: translateX(-100%);
      background: linear-gradient(90deg, transparent, rgba(244, 239, 226, 0.07), transparent);
      animation: skeletonSweep 1.4s infinite;
    }

    .metric-alert {
      animation: expiringPulse 2.6s ease-in-out infinite;
    }

    /* Long lists: skip rendering work for offscreen cards */
    #gridViewContainer > * { content-visibility: auto; contain-intrinsic-size: 320px; }
    #listCardContainer > * { content-visibility: auto; contain-intrinsic-size: 120px; }

    /* Lighter glass and no grain on small screens */
    @media (max-width: 1023px) {
      .glass-panel, .glass-card {
        backdrop-filter: blur(14px) saturate(150%);
        -webkit-backdrop-filter: blur(14px) saturate(150%);
      }
      body::before { display: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
      }
      body::before { display: none; }
    }

    /* Touch devices: hover-only affordances must always be reachable */
    @media (hover: none) {
      .row-actions { opacity: 1 !important; }
      .card-check { opacity: 1 !important; }
    }

    @media (pointer: coarse) {
      button, a, .glass-pill-btn { touch-action: manipulation; }
      .sv-check { width: 18px; height: 18px; }
      #statusFilterChips button { padding-top: 0.4rem; padding-bottom: 0.4rem; }
    }

    /* ------------------------------------------------------------------ */
    /* Candlelight (light) theme                                           */
    /* ------------------------------------------------------------------ */
    html[data-theme="light"] {
      --cream: #232b3d;
      --cream-dim: #5b6784;
      --gold: #a07c2c;
      --gold-bright: #8a6820;
      --ember: #a07c2c;
      --sage: #2f7a4f;
      color-scheme: light;
    }

    html[data-theme="light"] body {
      background-color: #f6f1e6;
      background-image:
        radial-gradient(at 8% 8%, rgba(216, 184, 99, 0.22) 0px, transparent 45%),
        radial-gradient(at 92% 12%, rgba(127, 168, 217, 0.18) 0px, transparent 50%),
        radial-gradient(at 50% 85%, rgba(134, 199, 155, 0.12) 0px, transparent 60%);
      color: #232b3d;
    }

    html[data-theme="light"] body::before { opacity: 0.025; }

    html[data-theme="light"] ::selection {
      background: rgba(216, 184, 99, 0.5);
      color: #2f2817;
    }

    html[data-theme="light"] .glass-panel {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.3) 100%), rgba(255, 253, 247, 0.85);
      border-color: rgba(93, 74, 38, 0.14);
      box-shadow: 0 16px 44px -18px rgba(93, 74, 38, 0.35), inset 0 1px 0 0 rgba(255, 255, 255, 0.9);
    }

    html[data-theme="light"] .glass-card {
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 100%), rgba(255, 253, 247, 0.92);
      border-color: rgba(93, 74, 38, 0.12);
      box-shadow: 0 10px 30px -14px rgba(93, 74, 38, 0.3), inset 0 1px 0 0 rgba(255, 255, 255, 0.9);
    }

    html[data-theme="light"] .glass-card:hover {
      border-color: rgba(160, 124, 44, 0.5);
      box-shadow: 0 22px 48px -16px rgba(93, 74, 38, 0.35), 0 0 32px -12px rgba(160, 124, 44, 0.3), inset 0 1px 0 0 rgba(255, 255, 255, 0.95);
    }

    html[data-theme="light"] .glass-pill-btn {
      background: rgba(255, 255, 255, 0.55);
      border-color: rgba(93, 74, 38, 0.18);
      box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.9);
    }

    html[data-theme="light"] .glass-pill-btn:hover {
      background: rgba(255, 255, 255, 0.9);
      border-color: rgba(160, 124, 44, 0.45);
      box-shadow: 0 6px 18px -8px rgba(93, 74, 38, 0.3), inset 0 1px 0 0 #ffffff;
      color: #232b3d;
    }

    html[data-theme="light"] .glass-pill-active {
      background: linear-gradient(135deg, rgba(216, 184, 99, 0.5) 0%, rgba(201, 162, 74, 0.25) 100%) !important;
      border-color: rgba(160, 124, 44, 0.6) !important;
      color: #6b4f12 !important;
      box-shadow: 0 0 24px -10px rgba(160, 124, 44, 0.6), inset 0 1px 0 0 rgba(255, 255, 255, 0.8) !important;
    }

    html[data-theme="light"] .metric-alert { animation-name: expiringPulseLight; }

    @keyframes expiringPulseLight {
      0%, 100% { box-shadow: 0 10px 30px -14px rgba(93, 74, 38, 0.3); }
      50% { box-shadow: 0 0 26px -6px rgba(160, 124, 44, 0.5); }
    }

    html[data-theme="light"] .sv-skeleton { background: rgba(93, 74, 38, 0.08); }
    html[data-theme="light"] .sv-skeleton::after {
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    }

    html[data-theme="light"] .sv-check {
      background: rgba(255, 255, 255, 0.85);
      border-color: rgba(35, 43, 61, 0.3);
    }

    html[data-theme="light"] .sv-check:checked {
      background: linear-gradient(135deg, #d8b863, #b98f33);
      border-color: rgba(160, 124, 44, 0.6);
      box-shadow: 0 0 12px -2px rgba(160, 124, 44, 0.55);
    }

    html[data-theme="light"] .region-badge.only {
      background: rgba(216, 184, 99, 0.28);
      color: #6b4f12;
      border-color: rgba(160, 124, 44, 0.45);
    }

    html[data-theme="light"] .region-badge.excluded {
      background: rgba(226, 132, 142, 0.2);
      color: #98303c;
      border-color: rgba(190, 80, 95, 0.4);
    }

    html[data-theme="light"] #regionTooltip {
      background: rgba(255, 253, 247, 0.98);
      color: #232b3d;
      border-color: rgba(160, 124, 44, 0.4);
      box-shadow: 0 20px 50px -14px rgba(93, 74, 38, 0.4);
    }

    html[data-theme="light"] #regionTooltip .tt-title { color: #8a6820; }

    html[data-theme="light"] #steamHoverCard {
      background: rgba(255, 253, 247, 0.97);
      border-color: rgba(160, 124, 44, 0.45);
      box-shadow: 0 28px 60px -18px rgba(93, 74, 38, 0.45), 0 0 36px -12px rgba(160, 124, 44, 0.3), inset 0 1px 0 0 rgba(255, 255, 255, 0.9);
    }

    html[data-theme="light"] .hover-card-scrim {
      background: linear-gradient(to top, rgba(255, 253, 247, 0.97), rgba(255, 253, 247, 0.45), transparent);
    }

    html[data-theme="light"] .detail-scrim {
      background: linear-gradient(to top, rgba(255, 253, 247, 0.95), rgba(255, 253, 247, 0.35), transparent);
    }

    html[data-theme="light"] .list-card-scrim {
      background: linear-gradient(90deg, rgba(255, 253, 247, 0.96) 0%, rgba(255, 253, 247, 0.75) 55%, rgba(255, 253, 247, 0.2) 100%);
    }

    html[data-theme="light"] .grid-card-scrim {
      background: linear-gradient(to top, rgba(255, 253, 247, 0.95), transparent);
    }

    html[data-theme="light"] .modal-overlay { background-color: rgba(74, 60, 32, 0.4); }

    html[data-theme="light"] .sticky-bar::before {
      background: rgba(246, 241, 230, 0.85);
      border-color: rgba(93, 74, 38, 0.12);
    }

    html[data-theme="light"] .custom-scrollbar::-webkit-scrollbar-track { background: rgba(93, 74, 38, 0.08); }
    html[data-theme="light"] .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(35, 43, 61, 0.22); }
    html[data-theme="light"] .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(160, 124, 44, 0.55); }

    html[data-theme="light"] kbd {
      border-color: rgba(35, 43, 61, 0.2);
      background: rgba(255, 255, 255, 0.7);
      color: #5b6784;
    }

    /* Gradient headline keeps its clip */
    html[data-theme="light"] .bg-clip-text.text-transparent { color: transparent !important; }

    html[data-theme="light"] .brand-gradient {
      background-image: linear-gradient(90deg, #8a6820 0%, #c39a3a 50%, #6b4f12 100%);
    }

    /* Utility remaps: order matters - keep after component overrides.
       The leading space in [class*=" bg-white/"] avoids matching hover: variants. */
    html[data-theme="light"] [class*=" bg-white/"],
    html[data-theme="light"] [class^="bg-white/"] { background-color: rgba(35, 43, 61, 0.06); }
    html[data-theme="light"] [class*=" border-white/"],
    html[data-theme="light"] [class^="border-white/"] { border-color: rgba(35, 43, 61, 0.16); }
    html[data-theme="light"] .bg-black\/30,
    html[data-theme="light"] .bg-black\/40 { background-color: rgba(255, 255, 255, 0.65); }
    html[data-theme="light"] .bg-black\/50,
    html[data-theme="light"] .bg-black\/60 { background-color: rgba(255, 255, 255, 0.6); }

    html[data-theme="light"] .text-white,
    html[data-theme="light"] .text-slate-100,
    html[data-theme="light"] .text-slate-200 { color: #232b3d; }
    html[data-theme="light"] .text-slate-300 { color: #3b455e; }
    html[data-theme="light"] .text-slate-400 { color: #66708a; }
    html[data-theme="light"] .text-slate-600 { color: #7c869c; }
    html[data-theme="light"] .text-cozy-muted { color: #5b6784; }
    html[data-theme="light"] .text-amber-50 { color: #2f2817; }
    html[data-theme="light"] .text-amber-100 { color: #4a3a12; }
    html[data-theme="light"] .text-amber-200 { color: #7a5c17; }
    html[data-theme="light"] .text-amber-300 { color: #8a6820; }
    html[data-theme="light"] .text-amber-400 { color: #a07c2c; }
    html[data-theme="light"] .text-orange-300 { color: #995b18; }
    html[data-theme="light"] [class*="text-amber-300/"],
    html[data-theme="light"] [class*="text-amber-400/"] { color: rgba(138, 104, 32, 0.85); }
    html[data-theme="light"] .placeholder\:text-cozy-muted::placeholder { color: #7c869c; }
    html[data-theme="light"] .text-sky-300,
    html[data-theme="light"] .text-sky-400 { color: #235da0; }
    html[data-theme="light"] .text-emerald-300,
    html[data-theme="light"] .text-emerald-400 { color: #23734a; }
    html[data-theme="light"] .text-rose-200,
    html[data-theme="light"] .text-rose-300,
    html[data-theme="light"] .text-rose-400 { color: #a13c48; }
    html[data-theme="light"] .text-violet-300 { color: #6d3fa0; }
    html[data-theme="light"] .text-pink-300 { color: #b03a72; }

    /* Hover text variants need darker inks on light surfaces */
    html[data-theme="light"] .hover\:text-white:hover { color: #232b3d !important; }
    html[data-theme="light"] .hover\:text-amber-200:hover { color: #7a5c17 !important; }
    html[data-theme="light"] .hover\:text-amber-300:hover { color: #8a6820 !important; }
    html[data-theme="light"] .hover\:text-sky-300:hover { color: #235da0 !important; }

    /* Hover fills need a dark tint on light surfaces */
    html[data-theme="light"] .hover\:bg-white\/\[0\.045\]:hover,
    html[data-theme="light"] .hover\:bg-white\/\[0\.05\]:hover,
    html[data-theme="light"] .hover\:bg-white\/\[0\.06\]:hover { background-color: rgba(35, 43, 61, 0.06) !important; }

    /* Keep white text on solid/gradient colored buttons */
    html[data-theme="light"] .bg-sky-500.text-white,
    html[data-theme="light"] [class*="bg-gradient-to-r"].text-white,
    html[data-theme="light"] [class*="bg-gradient-to-br"].text-white { color: #ffffff; }

    /* Excluded filter chips */
    html[data-theme="light"] .filter-chip[data-state="exclude"] {
      background: linear-gradient(135deg, rgba(226, 132, 142, 0.35) 0%, rgba(226, 132, 142, 0.15) 100%) !important;
      border-color: rgba(190, 80, 95, 0.5) !important;
      color: #98303c !important;
      box-shadow: 0 0 20px -8px rgba(190, 80, 95, 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.5) !important;
    }

    /* Button role system - candlelight variants */
    html[data-theme="light"] .btn-ghost {
      background: rgba(255, 255, 255, 0.6);
      border-color: rgba(93, 74, 38, 0.18);
      color: #3b455e;
      box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.9);
    }
    html[data-theme="light"] .btn-ghost:hover {
      background: rgba(255, 255, 255, 0.95);
      border-color: rgba(160, 124, 44, 0.45);
      color: #232b3d;
    }
    html[data-theme="light"] .btn-tint-sky {
      background: rgba(35, 93, 160, 0.1);
      border-color: rgba(35, 93, 160, 0.35);
      color: #235da0;
    }
    html[data-theme="light"] .btn-tint-sky:hover {
      background: rgba(35, 93, 160, 0.18);
      border-color: rgba(35, 93, 160, 0.55);
      box-shadow: 0 4px 18px -6px rgba(35, 93, 160, 0.35);
    }
    html[data-theme="light"] .btn-tint-amber {
      background: rgba(160, 124, 44, 0.12);
      border-color: rgba(160, 124, 44, 0.4);
      color: #8a6820;
    }
    html[data-theme="light"] .btn-tint-amber:hover {
      background: rgba(160, 124, 44, 0.2);
      border-color: rgba(160, 124, 44, 0.6);
      box-shadow: 0 4px 18px -6px rgba(160, 124, 44, 0.35);
    }
    html[data-theme="light"] .btn-tint-emerald {
      background: rgba(47, 122, 79, 0.1);
      border-color: rgba(47, 122, 79, 0.35);
      color: #2f7a4f;
    }
    html[data-theme="light"] .btn-tint-emerald:hover {
      background: rgba(47, 122, 79, 0.18);
      border-color: rgba(47, 122, 79, 0.55);
      box-shadow: 0 4px 18px -6px rgba(47, 122, 79, 0.35);
    }
    html[data-theme="light"] .btn-danger {
      background: rgba(152, 48, 60, 0.08);
      border-color: rgba(152, 48, 60, 0.3);
      color: #98303c;
    }
    html[data-theme="light"] .btn-danger:hover {
      background: rgba(152, 48, 60, 0.16);
      border-color: rgba(152, 48, 60, 0.5);
    }
    html[data-theme="light"] .btn-icon { color: #5b6784; }
    html[data-theme="light"] .btn-icon:hover {
      background: rgba(35, 43, 61, 0.07);
      border-color: rgba(93, 74, 38, 0.16);
      color: #232b3d;
    }
    html[data-theme="light"] .btn-icon.btn-amber { color: #8a6820; }
    html[data-theme="light"] .btn-icon.btn-amber:hover { background: rgba(160, 124, 44, 0.14); color: #6b4f12; }
    html[data-theme="light"] .btn-icon.btn-sky { color: #235da0; }
    html[data-theme="light"] .btn-icon.btn-sky:hover { background: rgba(35, 93, 160, 0.12); color: #1a4a82; }
    html[data-theme="light"] .btn-icon.btn-danger { color: #98303c; }
    html[data-theme="light"] .btn-icon.btn-danger:hover { background: rgba(152, 48, 60, 0.12); color: #7c2330; }
    html[data-theme="light"] .btn-icon.glass-pill-btn {
      background: rgba(255, 255, 255, 0.65);
      border-color: rgba(93, 74, 38, 0.18);
      color: #3b455e;
    }
    html[data-theme="light"] .btn-icon.glass-pill-btn:hover {
      background: rgba(255, 255, 255, 0.95);
      border-color: rgba(160, 124, 44, 0.5);
      color: #232b3d;
    }
    html[data-theme="light"] .btn-toggle {
      background: rgba(255, 255, 255, 0.6);
      border-color: rgba(93, 74, 38, 0.18);
      color: #5b6784;
    }
    html[data-theme="light"] .btn-toggle:hover {
      background: #ffffff;
      border-color: rgba(160, 124, 44, 0.45);
      color: #232b3d;
    }
    html[data-theme="light"] .btn-toggle-on {
      background: linear-gradient(135deg, rgba(216, 184, 99, 0.5) 0%, rgba(201, 162, 74, 0.25) 100%);
      border-color: rgba(160, 124, 44, 0.6);
      color: #6b4f12;
      box-shadow: 0 0 20px -8px rgba(160, 124, 44, 0.55), inset 0 1px 0 0 rgba(255, 255, 255, 0.8);
    }
    html[data-theme="light"] .btn-toggle-on.tint-emerald {
      background: linear-gradient(135deg, rgba(134, 199, 155, 0.45) 0%, rgba(134, 199, 155, 0.2) 100%);
      border-color: rgba(47, 122, 79, 0.5);
      color: #1d5c38;
      box-shadow: 0 0 20px -8px rgba(47, 122, 79, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.8);
    }
    html[data-theme="light"] .btn-link { color: #5b6784; }
    html[data-theme="light"] .btn-link:hover { color: #8a6820; background: rgba(160, 124, 44, 0.1); }
    html[data-theme="light"] .form-section-title { color: rgba(160, 124, 44, 0.8); }
    html[data-theme="light"] .form-section-title::after { background: rgba(93, 74, 38, 0.12); }

    /* Steam-style review badges on light surfaces */
    html[data-theme="light"] .review-badge.overwhelming {
      color: #55761b;
      background: rgba(190, 238, 17, 0.3);
      border-color: rgba(118, 150, 0, 0.45);
    }
    html[data-theme="light"] .review-badge.positive {
      color: #1a6ea8;
      background: rgba(102, 192, 244, 0.22);
      border-color: rgba(26, 110, 168, 0.4);
    }
    html[data-theme="light"] .review-badge.mixed {
      color: #7a6030;
      background: rgba(185, 160, 116, 0.25);
      border-color: rgba(122, 96, 48, 0.4);
    }
    html[data-theme="light"] .review-badge.negative {
      color: #98303c;
      background: rgba(163, 76, 37, 0.16);
      border-color: rgba(152, 48, 60, 0.4);
    }

    @media (max-width: 1023px) {
      html[data-theme="light"] body::before { display: none; }
    }

    /* ------------------------------------------------------------------ */
    /* Desktop comfort scale (+12%): rem-based sizes grow on large screens */
    /* ------------------------------------------------------------------ */
    @media (min-width: 1024px) {
      html { font-size: 18px; }
      html body .text-\[10px\] { font-size: 11px; }
      html body .text-\[11px\] { font-size: 12px; }
      html body .text-\[13px\] { font-size: 14px; }
    }

    /* Markdown notes editor toolbar */
    .md-tool {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 24px;
      border-radius: 6px;
      color: #a6b2c9;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      background: transparent;
      border: 1px solid transparent;
      transition: all 0.15s ease;
    }
    .md-tool:hover {
      background: rgba(244, 239, 226, 0.07);
      color: #fffdf6;
    }
    html[data-theme="light"] .md-tool { color: #5b6784; }
    html[data-theme="light"] .md-tool:hover { background: rgba(35, 43, 61, 0.07); color: #232b3d; }

    /* Rendered markdown (notes + public banner) */
    .md-render p { margin: 0; }
    .md-render p + p { margin-top: 0.35em; }
    .md-render code {
      padding: 1px 4px;
      border-radius: 5px;
      background: rgba(244, 239, 226, 0.1);
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.92em;
    }
    .md-render a { color: #e8cf8a; text-decoration: underline; }
    .md-render a:hover { color: #f4e3ae; }
    .md-render ul { margin: 0; }
    html[data-theme="light"] .md-render a { color: #8a6820; }
    html[data-theme="light"] .md-render a:hover { color: #6b4f12; }
    html[data-theme="light"] .md-render code { background: rgba(93, 74, 38, 0.12); }