/* Self-hosted fonts (formerly Google Fonts CDN). Variable woff2 files mirror
       the exact subsets Google served; declaring the weight range lets the two
       Fraunces instances (600/900) and four Hanken weights (400-700) share one
       file per subset. font-display: swap matches the old ?display=swap. */
    @font-face {
      font-family: 'Fraunces';
      font-style: normal;
      font-weight: 600 900;
      font-display: swap;
      src: url('/fonts/fraunces-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: 'Fraunces';
      font-style: normal;
      font-weight: 600 900;
      font-display: swap;
      src: url('/fonts/fraunces-latin-ext.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: 'Fraunces';
      font-style: normal;
      font-weight: 600 900;
      font-display: swap;
      src: url('/fonts/fraunces-vietnamese.woff2') format('woff2');
      unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
    }
    @font-face {
      font-family: 'Hanken Grotesk';
      font-style: normal;
      font-weight: 400 700;
      font-display: swap;
      src: url('/fonts/hanken-grotesk-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: 'Hanken Grotesk';
      font-style: normal;
      font-weight: 400 700;
      font-display: swap;
      src: url('/fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: 'Hanken Grotesk';
      font-style: normal;
      font-weight: 400 700;
      font-display: swap;
      src: url('/fonts/hanken-grotesk-vietnamese.woff2') format('woff2');
      unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
    }
    @font-face {
      font-family: 'Hanken Grotesk';
      font-style: normal;
      font-weight: 400 700;
      font-display: swap;
      src: url('/fonts/hanken-grotesk-cyrillic-ext.woff2') format('woff2');
      unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }

    :root {
      --sr-bg: #181C21;
      --sr-bg-deep: #0F1216;
      --sr-card: #1D262D;
      --sr-bg-raised: var(--sr-card);
      --sr-surface: var(--sr-card);
      --sr-surface-2: var(--sr-card);
      --sr-line: rgba(247,239,226,0.12);
      --sr-amber: #EA6E4A;
      --sr-amber-deep: #EA6E4A;
      --sr-gold: #E6B85C;
      --sr-teal-soft: #8A9BA8;
      --sr-gleam: #F7EFE2;
      --sr-cream: #F7EFE2;
      --sr-cream-soft: #FFF8ED;
      --sr-ink: #1E252E;
      --sr-text: #F7EFE2;
      --sr-text-muted: #8A9BA8;
      --sr-text-on-amber: #141A1F;
      --sr-danger: #EA6E4A;
      --sr-danger-bg: rgba(234,110,74,0.13);
      --sr-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
      --sr-font-ui: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
      --sr-radius-sm: 10px;
      --sr-radius-md: 14px;
      --sr-radius-lg: 18px;
      --sr-radius-xl: 24px;
      --sr-radius-pill: 999px;
      --sr-border: 1px solid var(--sr-line);
      --sr-focus-ring: 0 0 0 2px var(--sr-bg), 0 0 0 4px rgba(234,110,74,0.82);
      --sr-shadow-1: 0 1px 2px rgba(4, 18, 20, 0.38);
      --sr-shadow-2: 0 6px 20px rgba(4, 18, 20, 0.38);
      --sr-shadow-3: 0 24px 60px rgba(4, 18, 20, 0.54);
      --sr-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    }

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

    body {
      background: #181C21;
      color: #fff;
      font-family: var(--sr-font-ui);
      font-optical-sizing: auto;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      min-height: 100vh;
      max-width: 100%;
      overflow-x: hidden;
    }

    html {
      max-width: 100%;
      overflow-x: hidden;
    }

    /* ── Header ── */
    header {
      background: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 80%, transparent 100%);
      padding: 18px 4% 14px;
      position: sticky;
      top: 0;
      z-index: 100;
      backdrop-filter: blur(8px);
    }

    .header-top {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 14px;
    }

    .logo { font-family: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 0; line-height: 0.88; color: #fff; text-transform: uppercase; display: inline-flex; flex-direction: column; }
    .logo span:last-child { color: #EA6E4A; }

    .header-sub { font-size: 13px; color: #999; }

    .controls {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
    }

    .search-box,
    .ctrl-select {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 4px;
      color: #fff;
      padding: 7px 12px;
      font-size: 13px;
      outline: none;
      transition: border-color 0.15s;
    }

    .search-box { width: 220px; }
    .search-box::placeholder { color: #777; }
    .search-box:focus,
    .ctrl-select:focus { border-color: rgba(255,255,255,0.5); }

    .ctrl-select {
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      padding-right: 28px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23fff' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      background-size: 8px;
    }

    .ctrl-select option { background: #1a1a1a; color: #fff; }
    .ctrl-select optgroup { background: #111; color: #888; font-style: normal; }

    .mode-select { border-color: rgba(234,110,74,0.45); font-weight: 600; }

    .provider-toggle-group { display: flex; gap: 4px; flex-wrap: wrap; }

    .provider-group-label {
      font-size: 10px;
      color: #555;
      text-transform: uppercase;
      letter-spacing: 0;
      margin-right: 6px;
      align-self: center;
    }

    .provider-toggle.rentbuy {
      border-style: none;
    }
    .provider-toggle {
      background: transparent;
      border: 0;
      border-radius: 5px;
      color: #8a8a8a;
      padding: 8px 9px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s;
      text-align: left;
    }

    .provider-toggle.active {
      color: #fff;
      background: transparent;
    }

    .provider-toggle::before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      margin-right: 8px;
      border-radius: 999px;
      background: transparent;
      font-size: 0;
      vertical-align: middle;
    }
    .provider-toggle.active::before { background: #E6B85C; }
    .provider-toggle:hover:not(.active) { background: rgba(255,255,255,0.045); color: #ccc; }

    .ctrl-divider {
      color: rgba(255,255,255,0.15);
      font-size: 20px;
      line-height: 1;
      user-select: none;
    }

    .stats { display: none; }

    .note-bar { font-size: 11px; color: #555; margin-top: 6px; }

    /* ── Cache bar ── */
    .cache-bar {
      font-size: 12px;
      color: #666;
      margin-top: 8px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .cache-bar .dot { color: #4caf50; }
    .btn-refresh {
      background: none;
      border: 1px solid rgba(255,255,255,0.2);
      color: #aaa;
      padding: 2px 10px;
      border-radius: 3px;
      font-size: 11px;
      cursor: pointer;
      transition: border-color 0.15s, color 0.15s;
    }
    .btn-refresh:hover { border-color: #fff; color: #fff; }

    /* ── Auth bar ── */
    .auth-bar {
      font-size: 12px;
      color: #666;
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid rgba(255,255,255,0.06);
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .auth-status-guest   { color: #888; margin-left: auto; }
    .auth-status-signedin { color: #4caf50; margin-left: auto; }
    .btn-auth {
      background: none;
      border: 1px solid rgba(255,255,255,0.2);
      color: #aaa;
      padding: 6px 14px;
      border-radius: 4px;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.15s;
      white-space: nowrap;
      min-height: 32px;
      -webkit-tap-highlight-color: rgba(255,255,255,0.1);
    }
    @media (max-width: 640px) {
      .btn-auth { padding: 8px 16px; font-size: 13px; min-height: 40px; }
    }
    .btn-auth:hover { border-color: #fff; color: #fff; }
    .btn-auth.signin { border-color: rgba(234,110,74,0.5); color: #E6B85C; }
    .btn-auth.signin:hover { border-color: #EA6E4A; color: #fff; background: rgba(234,110,74,0.15); }

    /* ── Account chip & menu ── */
    .account-wrap { position: relative; margin-left: auto; }
    .btn-account {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(76,175,80,0.08);
      border: 1px solid rgba(76,175,80,0.35);
      color: #6fcf73;
      padding: 6px 12px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s;
      max-width: 240px;
      min-height: 32px;
      flex-shrink: 0;
      -webkit-tap-highlight-color: rgba(255,255,255,0.1);
    }
    .btn-account:hover { background: rgba(76,175,80,0.15); border-color: rgba(76,175,80,0.55); }
    .btn-account.has-pending { border-color: rgba(245,158,11,0.55); color: #f59e0b; background: rgba(245,158,11,0.08); }
    .account-dot { width: 6px; height: 6px; background: currentColor; border-radius: 50%; flex-shrink: 0; }
    .account-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .account-caret { font-size: 9px; opacity: 0.75; flex-shrink: 0; transition: transform 0.15s; }
    .btn-account.open .account-caret { transform: rotate(180deg); }
    .account-badge {
      background: #f59e0b;
      color: #1a1a1a;
      font-size: 10px;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 999px;
      flex-shrink: 0;
    }

    .account-menu {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      min-width: 240px;
      background: var(--sr-card);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 10px;
      box-shadow: 0 16px 48px rgba(0,0,0,0.7);
      z-index: 150;
      padding: 6px;
    }
    .account-menu.open { display: block; }
    .account-menu-email {
      font-size: 11px;
      color: #888;
      padding: 8px 12px 10px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      margin-bottom: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .menu-item {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      text-align: left;
      background: none;
      border: none;
      color: #ddd;
      padding: 10px 12px;
      border-radius: 6px;
      font-size: 13px;
      cursor: pointer;
      transition: background 0.12s;
    }
    .menu-item:hover:not(:disabled) { background: rgba(255,255,255,0.06); color: #fff; }
    .menu-item:disabled { opacity: 0.55; cursor: not-allowed; }
    .menu-icon { width: 18px; text-align: center; flex-shrink: 0; font-size: 13px; }
    .menu-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .menu-badge {
      background: #f59e0b;
      color: #1a1a1a;
      font-size: 10px;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 999px;
    }
    .menu-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 6px 4px; }
    .menu-item-danger { color: var(--sr-danger); }
    .menu-item-danger:hover:not(:disabled) { background: var(--sr-danger-bg); color: var(--sr-danger); }

    @media (max-width: 640px) {
      .btn-account { max-width: 180px; min-height: 36px; padding: 7px 13px; font-size: 13px; }
      .account-menu { min-width: 250px; }
      .menu-item { padding: 12px 12px; font-size: 14px; }
    }

    /* ── Login modal ── */
    .login-modal-box {
      background: #1f1f1f;
      border-radius: 10px;
      max-width: 400px;
      width: 100%;
      position: relative;
      box-shadow: 0 24px 80px rgba(0,0,0,0.9);
      padding: 32px;
    }
    .login-title   { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
    .login-sub     { font-size: 13px; color: #888; line-height: 1.5; margin-bottom: 20px; }
    .login-input   {
      width: 100%; padding: 9px 12px; border-radius: 4px;
      border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.08);
      color: #fff; font-size: 14px; outline: none; margin-bottom: 10px; display: block;
    }
    .login-input:focus { border-color: rgba(255,255,255,0.5); }
    .login-input::placeholder { color: #555; }
    .btn-login-primary {
      width: 100%; padding: 11px; background: #EA6E4A; border: none; color: #fff;
      border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer;
      transition: background 0.15s;
    }
    .btn-login-primary:hover { background: #EA6E4A; }
    .btn-login-primary:disabled { background: #555; cursor: not-allowed; }
    .login-back { font-size: 12px; color: #666; cursor: pointer; margin-top: 10px; display: inline-block; }
    .login-back:hover { color: #aaa; }
    .login-success { text-align: center; padding: 10px 0; }
    .login-success-icon { font-size: 15px; color: #4caf50; margin-bottom: 6px; }
    .login-success-sub  { font-size: 12px; color: #888; line-height: 1.5; }
    .delete-actions { display: flex; gap: 10px; margin-top: 18px; }
    .btn-login-secondary {
      flex: 1;
      padding: 11px;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.14);
      color: #ddd;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
    }
    .btn-login-danger {
      flex: 1.5;
      display: inline-block;
      text-align: center;
      padding: 11px;
      background: #b83a35;
      border: none;
      color: #fff;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 700;
      text-decoration: none;
      cursor: pointer;
    }
    .btn-login-danger:disabled {
      background: #5a3432;
      color: #aaa;
      cursor: not-allowed;
    }
    .delete-fallback {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid rgba(255,255,255,0.08);
      color: #777;
      font-size: 12px;
      line-height: 1.5;
      word-break: break-word;
    }
    .delete-copy-status {
      min-height: 18px;
      margin-top: 10px;
      color: #8fbf8f;
      font-size: 12px;
      line-height: 1.5;
    }
    .signout-account {
      margin: -8px 0 16px;
      padding: 9px 10px;
      border-radius: 6px;
      background: rgba(255,255,255,0.06);
      color: #aaa;
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .signout-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin-top: 16px;
    }
    .signout-actions .btn-login-secondary,
    .signout-actions .btn-login-danger {
      width: 100%;
      flex: none;
    }
    .diagnostics-launcher {
      display: none;
      position: fixed;
      left: 16px;
      bottom: 16px;
      z-index: 260;
      border: 1px solid rgba(234,110,74,0.55);
      background: rgba(24,20,30,0.96);
      color: #f2b457;
      border-radius: 999px;
      padding: 9px 13px;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 12px 28px rgba(0,0,0,0.36);
    }
    .diagnostics-box {
      background: #17121f;
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 10px;
      width: min(860px, 100%);
      max-height: 90vh;
      overflow-y: auto;
      position: relative;
      padding: 22px;
      box-shadow: 0 24px 80px rgba(0,0,0,0.9);
    }
    .diagnostics-title {
      color: #fff8ee;
      font-family: var(--font-display, serif);
      font-size: 28px;
      font-weight: 800;
      line-height: 1.05;
    }
    .diagnostics-sub {
      margin-top: 6px;
      color: #b8b0c2;
      font-size: 14px;
      line-height: 1.45;
      max-width: 680px;
    }
    .diagnostics-form {
      display: flex;
      gap: 10px;
      margin-top: 18px;
    }
    .diagnostics-input {
      flex: 1;
      min-width: 0;
      background: #24202d;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 6px;
      color: #fff;
      padding: 12px 13px;
      font-size: 15px;
      outline: none;
    }
    .diagnostics-input:focus {
      border-color: rgba(234,110,74,0.75);
      box-shadow: 0 0 0 3px rgba(234,110,74,0.12);
    }
    .diagnostics-btn {
      border: none;
      background: #f2b457;
      color: #111;
      border-radius: 6px;
      padding: 0 18px;
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
    }
    .diagnostics-btn:disabled {
      opacity: 0.55;
      cursor: wait;
    }
    .diagnostics-context {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 16px;
    }
    .diagnostics-chip {
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.05);
      color: #d9d2df;
      border-radius: 999px;
      padding: 6px 9px;
      font-size: 12px;
      line-height: 1.2;
    }
    .diagnostics-results {
      margin-top: 18px;
      display: grid;
      gap: 12px;
    }
    .diagnostics-card {
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.035);
      border-radius: 8px;
      padding: 15px;
    }
    .diagnostics-card-title {
      color: #fff8ee;
      font-family: var(--font-display, serif);
      font-size: 21px;
      font-weight: 800;
      line-height: 1.15;
    }
    .diagnostics-meta {
      margin-top: 4px;
      color: #b8b0c2;
      font-size: 13px;
      line-height: 1.4;
    }
    .diagnostics-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: 12px;
    }
    .diagnostics-check {
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 6px;
      padding: 9px 10px;
      color: #d9d2df;
      font-size: 13px;
      line-height: 1.35;
    }
    .diagnostics-pass { color: #8fcf93; font-weight: 800; }
    .diagnostics-fail { color: #ff8d82; font-weight: 800; }
    .diagnostics-note {
      margin-top: 12px;
      color: #f2b457;
      font-size: 13px;
      line-height: 1.45;
    }
    .diagnostics-muted {
      color: #938b9b;
      font-size: 12px;
      line-height: 1.45;
    }
    @media (max-width: 640px) {
      .diagnostics-box {
        padding: 18px;
        max-height: 88vh;
      }
      .diagnostics-form {
        flex-direction: column;
      }
      .diagnostics-btn {
        min-height: 44px;
      }
      .diagnostics-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ── Watchlist view button ── */
    .btn-watchlist-view {
      margin-left: auto;
      background: none;
      border: 1px solid rgba(255,255,255,0.18);
      color: #ccc;
      padding: 6px 12px;
      border-radius: 20px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
      flex-shrink: 0;
      transition: border-color 0.15s, color 0.15s, background 0.15s;
    }
    .btn-watchlist-view:hover { border-color: #EA6E4A; color: #EA6E4A; }
    .btn-watchlist-view.active {
      border-color: #EA6E4A;
      color: #EA6E4A;
      background: rgba(234,110,74,0.15);
    }

    /* ── Mobile filter button ── */
    .btn-filters-mobile {
      display: none;
      background: none;
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 999px;
      color: #ccc;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      align-items: center;
      gap: 6px;
      min-height: 32px;
      transition: border-color 0.15s, color 0.15s, background 0.15s;
      flex-shrink: 0;
      -webkit-tap-highlight-color: rgba(255,255,255,0.1);
    }
    .btn-filters-mobile:hover { border-color: rgba(255,255,255,0.4); color: #fff; }
    .btn-filters-mobile.has-filters {
      border-color: #EA6E4A;
      color: #E6B85C;
      background: rgba(234,110,74,0.08);
    }

    .filter-badge {
      width: 8px;
      height: 8px;
      background: #EA6E4A;
      border-radius: 50%;
      display: none;
      flex-shrink: 0;
    }
    .filter-badge.visible { display: inline-block; }

    .mobile-search-row {
      display: none;
      margin-top: 10px;
    }
    .mobile-search-row .search-box { width: 100%; }

    /* ── Filter overlay & bottom sheet ── */
    .filter-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.65);
      z-index: 200;
    }
    .filter-overlay.open { display: block; }

    .filter-sheet {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #1c1c1c;
      border-radius: 16px 16px 0 0;
      z-index: 201;
      transform: translateY(100%);
      transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
      max-height: calc(100dvh - 12px);
      display: flex;
      flex-direction: column;
      box-shadow: 0 -18px 60px rgba(0,0,0,0.55);
      padding-top: env(safe-area-inset-top);
    }
    .filter-sheet.open { transform: translateY(0); }

    .filter-sheet-hd {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 20px 12px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      font-size: 15px;
      font-weight: 700;
      flex-shrink: 0;
      position: relative;
      z-index: 2;
      background: #1c1c1c;
    }
    .filter-sheet-title {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .filter-sheet-title span {
      font-size: 15px;
      color: #fff;
    }
    .filter-sheet-title small {
      color: #898989;
      font-size: 12px;
      font-weight: 500;
      line-height: 1.35;
    }
    .filter-sheet-close {
      width: 40px;
      height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,0.07);
      border: 0;
      border-radius: 50%;
      color: #e5e5e5;
      font-size: 0;
      cursor: pointer;
      padding: 0;
      line-height: 1;
      flex: 0 0 auto;
    }
    .filter-sheet-close::before {
      content: '\00d7';
      font-size: 28px;
      line-height: 1;
    }
    .filter-sheet-close:hover { color: #fff; }

    .filter-sheet-body {
      overflow-y: auto;
      padding: 8px 20px 16px;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 0;
      overscroll-behavior: contain;
    }

    .filter-section {
      padding: 16px 0;
      border: 0;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      border-radius: 0;
      background: transparent;
    }
    .filter-section:last-child { border-bottom: 0; }

    .filter-section-title {
      color: #8A9BA8;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0;
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    .filter-section-toggle {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 38px;
      background: transparent;
      border: 0;
      color: #f3f3f3;
      font: inherit;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: none;
      padding: 0;
      margin-bottom: 0;
      cursor: pointer;
      text-align: left;
    }

    .filter-section-toggle::after {
      content: '';
      width: 8px;
      height: 8px;
      border-right: 1.5px solid rgba(255,255,255,0.35);
      border-bottom: 1.5px solid rgba(255,255,255,0.35);
      transform: translateY(-2px) rotate(45deg);
      transition: transform 0.15s ease;
      flex: 0 0 auto;
    }

    .filter-section:not(.collapsed) .filter-section-toggle { color: #fff; }

    .filter-section-label { flex: 0 0 auto; }

    .filter-section-summary {
      flex: 1;
      min-width: 0;
      color: #8d8d8d;
      font-size: 12px;
      font-weight: 600;
      text-align: right;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .filter-section.collapsed .filter-section-toggle::after {
      transform: translateY(2px) rotate(-45deg);
    }

    .filter-section-body { padding-top: 10px; }

    .filter-section.collapsed .filter-section-body {
      display: none;
    }

    .filter-group + .filter-group { margin-top: 13px; }
    .filter-help {
      margin: -2px 0 10px;
      color: #8f879b;
      font-size: 12px;
      font-weight: 500;
      line-height: 1.45;
    }

    .filter-setup-title {
      margin: 8px 0 0;
    }

    .filter-group label {
      display: block;
      font-size: 11px;
      color: #8b8b8b;
      text-transform: uppercase;
      letter-spacing: 0;
      margin-bottom: 8px;
    }
    .filter-group .ctrl-select { width: 100%; }

    .mobile-select-grid {
      display: none;
    }

    .native-select-hidden,
    .filter-sheet .native-select-hidden {
      position: absolute !important;
      width: 1px !important;
      min-width: 1px !important;
      max-width: 1px !important;
      height: 1px !important;
      min-height: 1px !important;
      max-height: 1px !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

    .app-select {
      position: relative;
      width: 100%;
    }

    .app-select-trigger {
      width: 100%;
      min-height: 38px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border: 0;
      border-radius: 6px;
      background: rgba(255,255,255,0.065);
      color: #f3f3f3;
      padding: 9px 11px;
      font-size: 13px;
      font-weight: 650;
      text-align: left;
      cursor: pointer;
    }

    .app-select.open .app-select-trigger {
      background: rgba(255,255,255,0.1);
    }

    .app-select-text {
      min-width: 0;
      flex: 1 1 auto;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .app-select-label {
      flex: 0 0 auto;
      color: var(--sr-text-muted);
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }

    .app-select-value {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .app-select-caret {
      color: #EA6E4A;
      font-size: 13px;
      line-height: 1;
      flex: 0 0 auto;
    }

    .app-select-menu {
      display: none;
      margin-top: 6px;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 8px;
      background: #151515;
      box-shadow: 0 14px 32px rgba(0,0,0,0.35);
      max-height: 230px;
      overflow-y: auto;
      padding: 6px;
      overscroll-behavior: contain;
    }

    .app-select.open .app-select-menu { display: block; }

    .filter-sheet .app-select-country.open .app-select-menu,
    .filter-sheet .app-select-genre.open .app-select-menu {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 2px 6px;
      max-height: 360px;
    }

    .app-select-group {
      color: #8a8a8a;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0;
      text-transform: uppercase;
      padding: 8px 8px 5px;
    }

    .filter-sheet .app-select-country .app-select-group,
    .filter-sheet .app-select-genre .app-select-group {
      grid-column: 1 / -1;
    }

    .app-select-option {
      width: 100%;
      border: 0;
      border-radius: 5px;
      background: transparent;
      color: #d6d6d6;
      padding: 9px 8px;
      font-size: 13px;
      font-weight: 600;
      text-align: left;
      cursor: pointer;
    }

    .app-select-option:hover,
    .app-select-option.active {
      background: rgba(234,110,74,0.16);
      color: #fff;
    }

    .filter-sheet-ft {
      display: flex;
      gap: 10px;
      padding: 12px 20px calc(24px + env(safe-area-inset-bottom));
      border-top: 1px solid rgba(255,255,255,0.08);
      flex-shrink: 0;
      background: #1c1c1c;
    }

    .btn-sheet-reset {
      flex: 1;
      background: none;
      border: 1px solid rgba(255,255,255,0.2);
      color: #aaa;
      padding: 11px;
      border-radius: 4px;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.15s;
    }
    .btn-sheet-reset:hover { border-color: #fff; color: #fff; }

    .btn-sheet-apply {
      flex: 2;
      background: #EA6E4A;
      border: none;
      color: #fff;
      min-height: 46px;
      padding: 12px 16px;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(0,0,0,0.28);
      transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
    }
    .btn-sheet-apply:hover {
      background: #EA6E4A;
      transform: translateY(-1px);
      box-shadow: 0 10px 24px rgba(0,0,0,0.34);
    }

    /* ── Main ── */
    main { padding: 18px 4% 60px; }
    .app-footer { display: none; }

    /* ── Grid ── */
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
      gap: 16px;
      transition: opacity 0.15s ease;
    }

    /* ── Card ── */
    .card {
      background: #1D262D;
      border-radius: 6px;
      overflow: hidden;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      position: relative;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      touch-action: pan-y;
      user-select: none;
      -webkit-touch-callout: none;
    }

    .card:hover {
      transform: scale(1.05);
      box-shadow: 0 10px 35px rgba(0,0,0,0.85);
      z-index: 5;
    }

    .card-rank {
      position: absolute;
      top: 8px;
      left: 8px;
      z-index: 3;
      background: rgba(0,0,0,0.75);
      color: #F7EFE2;
      font-weight: 800;
      font-size: 12px;
      padding: 2px 7px;
      border-radius: 3px;
      backdrop-filter: blur(4px);
    }

    .provider-badges {
      position: absolute;
      top: 8px;
      right: 8px;
      z-index: 3;
      display: flex;
      flex-direction: column;
      gap: 3px;
      padding: 0 2px 2px 0;
      max-height: 124px;
      overflow: hidden;
    }

    .provider-badge {
      width: 22px;
      height: 22px;
      border-radius: 4px;
      object-fit: cover;
      opacity: 0.9;
    }

    .provider-badge-wrap {
      position: relative;
      display: inline-flex;
      width: 22px;
      height: 22px;
      flex: 0 0 auto;
    }

    .provider-badge-wrap .provider-badge,
    .provider-badge-wrap .provider-badge-text {
      width: 100%;
      height: 100%;
    }

    .provider-badge-mode {
      position: absolute;
      right: -2px;
      bottom: -2px;
      min-width: 12px;
      height: 12px;
      padding: 0 2px;
      border-radius: 3px;
      border: 1px solid rgba(247,239,226,0.18);
      background: rgba(15,18,22,0.86);
      color: #F7EFE2;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 8px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: 0;
    }

    .provider-badge-mode.rentbuy {
      background: #f2f2f2;
      color: #151515;
    }

    .provider-badge-text {
      width: 22px;
      height: 22px;
      border-radius: 4px;
      background: #2a85e0;
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.92;
      letter-spacing: 0;
    }

    .provider-badge-more {
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      border: 1px solid rgba(247,239,226,0.18);
      background: rgba(16,13,23,0.82);
      color: #F7EFE2;
      font-size: 9px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: 0;
      box-shadow: 0 4px 12px rgba(0,0,0,0.24);
      backdrop-filter: blur(6px);
    }

    .card-poster-wrap {
      width: 100%;
      aspect-ratio: 2 / 3;
      background: #2a2a2a;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-user-drag: none;
    }

    .card-poster {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      -webkit-user-drag: none;
    }

    .card-poster-fallback {
      color: #555;
      font-size: 12px;
      text-align: center;
      padding: 12px;
      line-height: 1.4;
    }

    .card-body {
      padding: 11px;
      display: flex;
      flex: 1;
      flex-direction: column;
    }

    .card-title-row {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin-bottom: 8px;
      min-height: 34px;
    }

    .card-title {
      font-size: 13px;
      font-weight: 700;
      line-height: 1.3;
      margin-bottom: 8px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      min-height: 34px;
    }
    .card-title-row .card-title {
      flex: 1 1 auto;
      min-width: 0;
      margin-bottom: 0;
    }

    .card-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 7px;
      min-height: 24px;
    }

    .rating-stack {
      display: flex;
      align-items: center;
      gap: 5px;
      min-width: 0;
      flex-wrap: wrap;
    }
    .sr-score {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      color: #EA6E4A;
      background: rgba(234,110,74,0.08);
      border: 1px solid rgba(234,110,74,0.36);
      border-radius: 5px;
      padding: 3px 6px;
      font-size: 12px;
      font-weight: 900;
      line-height: 1.2;
    }
    .sr-score span {
      color: #EA6E4A;
      font-size: 9px;
      letter-spacing: 0;
    }
    /* Visible confidence - color only, pill dimensions unchanged (no layout shift).
       medium: muted number; low: muted number + quieter pill. */
    .sr-score--medium { color: var(--sr-text-muted); }
    .sr-score--low {
      color: var(--sr-text-muted);
      background: rgba(234,110,74,0.10);
      border-color: rgba(234,110,74,0.22);
    }
    .card-confidence-hint {
      margin-top: 3px;
      font-size: 11px;
      color: var(--sr-text-muted);
    }
    .modal-sr-value--medium,
    .modal-sr-value--low { color: var(--sr-text-muted); }
    .modal-sr-note {
      margin-top: 4px;
      font-size: 11px;
      line-height: 1.35;
      color: var(--sr-text-muted);
    }

    .imdb-score {
      display: flex;
      align-items: center;
      gap: 3px;
      min-height: 21px;
      font-size: 12px;
      font-weight: 700;
      color: var(--sr-text-muted);
      white-space: nowrap;
    }

    .imdb-score .star { color: #E6B85C; font-size: 11px; }

    .card-year {
      font-size: 11px;
      color: #777;
      white-space: nowrap;
      padding-top: 3px;
    }

    .card-genre {
      font-size: 11px;
      color: #8c8c8c;
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-height: 14px;
    }

    .card-language {
      font-size: 11px;
      color: #a7a7a7;
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-height: 14px;
    }

    /* ── Skeleton ── */
    .card.skeleton { pointer-events: none; }

    .card.skeleton .card-poster-wrap,
    .card.skeleton .skeleton-line {
      background: #2a2a2a;
      border-radius: 4px;
      position: relative;
      overflow: hidden;
    }

    .card.skeleton .card-poster-wrap::after,
    .card.skeleton .skeleton-line::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%);
      animation: shimmer 1.4s infinite;
    }

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

    .skeleton-line { height: 11px; margin: 8px 10px 4px; }
    .skeleton-line.short { width: 55%; }

    .loading-status {
      font-size: 12px;
      color: #555;
      text-align: center;
      padding: 12px 0 0;
    }

    /* ── Error ── */
    .error-box {
      background: rgba(234,110,74,0.12);
      border: 1px solid rgba(234,110,74,0.35);
      border-radius: 6px;
      padding: 14px 18px;
      color: #ff6b6b;
      font-size: 13px;
      margin-bottom: 20px;
      line-height: 1.5;
    }

    /* ── Back to Top ── */
    .btn-top {
      display: block;
      margin: 36px auto 0;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.2);
      color: #ccc;
      padding: 11px 30px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .btn-top:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.45); color: #fff; }

    /* ── Header sort control & merge seam (list stability) ── */
    .rank-sort {
      min-height: 30px;
      padding: 0 10px;
      border: var(--sr-border);
      border-radius: var(--sr-radius-pill);
      background: transparent;
      color: var(--sr-text-muted);
      font: inherit;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background 0.15s;
    }
    .rank-sort[hidden] { display: none; }
    .rank-sort:hover,
    .rank-sort:focus-visible {
      color: var(--sr-text);
      border-color: rgba(234,110,74,0.45);
      background: rgba(234,110,74,0.08);
      outline: none;
    }
    .auth-label-short { display: none; }

    .rank-seam {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      gap: 12px;
      color: #777;
      font-size: 12px;
      letter-spacing: 0.04em;
      text-transform: none;
    }
    .rank-seam::before,
    .rank-seam::after {
      content: '';
      flex: 1;
      border-top: 1px solid rgba(255,255,255,0.12);
    }

    /* ── Branded offline state (native builds always boot from local assets) ── */
    .offline-box { text-align: center; padding: 28px 20px; }
    .offline-brand { width: 44px; height: 44px; margin-bottom: 10px; opacity: 0.9; }
    .offline-retry { margin-top: 16px; }

    /* ── Load More ── */
    .load-more-wrap { text-align: center; margin-top: 36px; }

    .btn-more {
      background: #EA6E4A;
      color: #fff;
      border: none;
      padding: 11px 30px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s;
    }

    .btn-more:hover:not(:disabled) { background: #EA6E4A; }
    .btn-more:disabled { background: #444; cursor: not-allowed; }

    .empty {
      max-width: 520px;
      margin: 0 auto;
      text-align: center;
      padding: 60px 20px;
      color: #777;
      font-size: 15px;
      line-height: 1.45;
    }
    .empty strong {
      display: block;
      margin-bottom: 8px;
      color: #fff;
      font-size: 20px;
      line-height: 1.2;
    }

    /* ── Seen overlay ── */
    .card.seen .card-poster-wrap::after {
      content: '✓ Seen';
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.55);
      color: #4caf50;
      font-size: 16px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      letter-spacing: 0;
    }

    .card.seen .card-poster-wrap { position: relative; }
    .card.series-caught-up .card-poster-wrap::after { content: 'Seen'; }
    .card.seen .card-poster-wrap::after,
    .card.series-caught-up .card-poster-wrap::after {
      content: '';
      background: rgba(11,18,25,0.46);
      color: transparent;
      display: block;
      pointer-events: none;
    }
    .card.series-new-season .card-poster-wrap { position: relative; }
    .card.series-new-season .card-poster-wrap::before {
      content: 'New season';
      position: absolute;
      top: 8px;
      left: 8px;
      z-index: 2;
      border: 1px solid rgba(234,110,74,0.56);
      border-radius: 999px;
      background: rgba(18,16,22,0.88);
      color: #f4c36b;
      padding: 4px 7px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .btn-seen {
      background: rgba(255,255,255,0.045);
      border: 1px solid rgba(255,255,255,0.12);
      color: #9a9a9a;
      border-radius: 5px;
      font-size: 11px;
      font-weight: 700;
      padding: 7px 8px;
      cursor: pointer;
      transition: all 0.15s;
      width: auto;
      flex: 1;
      min-height: 32px;
    }

    .btn-seen:hover {
      border-color: rgba(255,255,255,0.24);
      color: #d0d0d0;
      background: rgba(255,255,255,0.07);
    }
    .btn-seen.marked { border-color: #4caf50; color: #4caf50; background: rgba(76,175,80,0.1); }
    .btn-seen.needs-update {
      border-color: rgba(234,110,74,0.46);
      color: #E6B85C;
      background: rgba(234,110,74,0.08);
    }

    .btn-watchlist,
    .btn-hide,
    .btn-like,
    .btn-dislike,
    .btn-list-remove {
      background: rgba(255,255,255,0.045);
      border: 1px solid rgba(255,255,255,0.12);
      color: #9a9a9a;
      border-radius: 5px;
      font-size: 11px;
      font-weight: 700;
      padding: 7px 8px;
      cursor: pointer;
      transition: all 0.15s;
      width: 36px;
      min-height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .btn-watchlist:hover { border-color: #EA6E4A; color: #EA6E4A; }
    .btn-watchlist.marked { border-color: #EA6E4A; color: #EA6E4A; background: rgba(234,110,74,0.1); }
    .btn-like:hover,
    .btn-dislike:hover {
      border-color: rgba(247,239,226,0.24);
      color: #d8d3ca;
      background: rgba(255,255,255,0.06);
    }
    .btn-like.marked {
      border-color: #EA6E4A;
      color: #EA6E4A;
      background: rgba(234,110,74,0.1);
    }
    .btn-hide:hover { border-color: rgba(234,110,74,0.46); color: var(--sr-danger); }
    .btn-hide.marked {
      border-color: rgba(234,110,74,0.46);
      color: var(--sr-danger);
      background: var(--sr-danger-bg);
    }
    .btn-dislike.marked {
      border-color: #EA6E4A;
      color: #EA6E4A;
      background: rgba(234,110,74,0.1);
    }

    .btn-list-remove {
      flex: 0 0 32px;
      width: 32px;
      min-height: 32px;
      padding: 0;
    }
    .btn-list-remove:hover {
      border-color: rgba(234,110,74,0.46);
      color: var(--sr-danger);
      background: var(--sr-danger-bg);
    }
    .btn-list-remove:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }
    .btn-list-remove.is-removing {
      color: #c9beb6;
      background: rgba(255,255,255,0.04);
      border-color: rgba(255,255,255,0.12);
    }
    .list-remove-icon {
      width: 15px;
      height: 15px;
      display: block;
    }
    .list-remove-progress {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 7px 0 0 currentColor, -7px 0 0 currentColor;
      opacity: 0.72;
    }

    .card.hidden .card-poster-wrap { position: relative; }
    .card.hidden .card-poster-wrap::after {
      content: 'Hidden';
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.68);
      color: var(--sr-danger);
      font-size: 16px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      letter-spacing: 0;
    }

    /* ── Movie detail modal ── */
    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.82);
      z-index: 500;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }
    .modal-overlay.open { display: flex; }

    .modal-box {
      background: #1f1f1f;
      border-radius: 10px;
      max-width: 820px;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      position: relative;
      box-shadow: 0 24px 80px rgba(0,0,0,0.9);
    }

    .modal-close {
      position: absolute;
      top: 12px;
      right: 14px;
      background: rgba(255,255,255,0.08);
      border: none;
      color: #ccc;
      font-size: 18px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
      transition: background 0.15s;
    }
    .modal-close:hover { background: rgba(255,255,255,0.16); color: #fff; }

    .modal-inner {
      display: flex;
      gap: 24px;
      padding: 24px;
    }

    .modal-poster-col { flex-shrink: 0; width: 150px; }
    .modal-poster-col img {
      width: 150px;
      border-radius: 6px;
      display: block;
      user-select: none;
      -webkit-user-drag: none;
      -webkit-touch-callout: none;
    }

    .modal-providers-row {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 10px;
    }

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

    .modal-title {
      font-size: 20px;
      font-weight: 700;
      line-height: 1.3;
      margin-bottom: 6px;
    }

    .modal-meta {
      font-size: 13px;
      color: #888;
      margin-bottom: 12px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }

    .modal-original {
      color: #bdbdbd;
      font-size: 13px;
      line-height: 1.45;
      margin: -4px 0 14px;
    }

    .modal-original span {
      color: #777;
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      margin-right: 5px;
    }

    .modal-rating {
      color: #f5c518;
      font-weight: 700;
      font-size: 14px;
    }

    .modal-rank-panel {
      display: grid;
      grid-template-columns: minmax(110px, 0.75fr) minmax(0, 1fr);
      gap: 12px;
      margin: 0 0 14px;
      padding: 13px;
      border: 1px solid rgba(234,110,74,0.28);
      border-radius: 8px;
      background: rgba(234,110,74,0.08);
    }

    .modal-sr-score {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 4px;
      min-height: 76px;
      padding: 10px;
      border-radius: 6px;
      background: rgba(0,0,0,0.24);
    }

    .modal-sr-label {
      color: #EA6E4A;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .modal-sr-value {
      color: #fff;
      font-size: 34px;
      font-weight: 850;
      line-height: 1;
    }

    .modal-sr-help {
      color: rgba(244,241,234,0.56);
      font-size: 11px;
      font-weight: 500;
      text-decoration: underline;
      text-decoration-color: rgba(244,241,234,0.28);
      text-underline-offset: 3px;
      text-decoration-thickness: 1px;
      margin-top: 2px;
    }

    .modal-sr-help:hover {
      color: rgba(244,241,234,0.82);
      text-decoration-color: rgba(234,110,74,0.58);
    }

    .modal-evidence-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 10px;
    }

    .modal-evidence {
      min-width: 0;
      padding: 9px 10px;
      border-radius: 6px;
      background: rgba(255,255,255,0.045);
    }

    .modal-evidence-label {
      color: #8f8f8f;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0;
      margin-bottom: 3px;
    }

    .modal-evidence-value {
      color: #f2f2f2;
      font-size: 14px;
      font-weight: 800;
    }

    .modal-rank-copy {
      color: #d0d0d0;
      font-size: 13px;
      line-height: 1.45;
    }

    .modal-section-label {
      color: #777;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0;
      margin: 2px 0 7px;
    }

    .modal-provider-block {
      margin: 0 0 14px;
      padding: 12px;
      border: 1px solid transparent;
      border-radius: 8px;
      background: rgba(255,255,255,0.04);
    }

    .modal-provider-link {
      display: block;
      color: inherit;
      text-decoration: none;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
    }

    .modal-provider-link:hover,
    .modal-provider-link:focus-visible {
      background: rgba(234,110,74,0.10);
      border-color: rgba(234,110,74,0.36);
      outline: none;
    }

    .modal-provider-summary {
      color: #cfcfcf;
      font-size: 13px;
      line-height: 1.45;
    }

    .modal-provider-cta {
      margin-top: 8px;
      color: #EA6E4A;
      font-size: 12px;
      font-weight: 800;
    }

    .modal-tagline {
      font-size: 13px;
      color: #aaa;
      font-style: italic;
      margin-bottom: 12px;
    }

    .modal-overview {
      font-size: 14px;
      color: #ccc;
      line-height: 1.6;
      margin-bottom: 14px;
    }

    .modal-crew {
      font-size: 13px;
      color: #aaa;
      margin-bottom: 18px;
      line-height: 1.7;
    }
    .modal-crew strong { color: #ddd; }

    .modal-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

    .modal-btn {
      padding: 10px 18px;
      border-radius: 5px;
      font-size: 13px;
      font-weight: 750;
      cursor: pointer;
      text-decoration: none;
      border: none;
      transition: background 0.15s;
    }
    .modal-btn:disabled {
      opacity: 0.48;
      cursor: not-allowed;
    }
    .modal-btn-icon {
      width: 42px;
      min-width: 42px;
      height: 40px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
    }
    .modal-btn-icon svg {
      width: 18px;
      height: 18px;
      display: block;
    }
    .modal-btn-imdb  { background: #f5c518; color: #000; }
    .modal-btn-imdb:hover  { background: #e6b800; }
    .modal-btn-watch {
      background: rgba(255,255,255,0.08);
      color: #e8e1d5;
      border: 1px solid rgba(255,255,255,0.14);
    }
    .modal-btn-watch:hover {
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.28);
      color: #fff;
    }
    .modal-btn-share {
      background: rgba(255,255,255,0.08);
      color: #e8e1d5;
      border: 1px solid rgba(255,255,255,0.14);
    }
    .modal-btn-share:hover {
      background: rgba(234,110,74,0.14);
      border-color: rgba(234,110,74,0.45);
      color: #fff;
    }
    .modal-btn-list {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      white-space: nowrap;
      background: rgba(255,255,255,0.08);
      color: #e8e1d5;
      border: 1px solid rgba(255,255,255,0.14);
    }
    .modal-btn-list svg {
      width: 16px;
      height: 16px;
      display: block;
      flex: 0 0 auto;
    }
    .modal-btn-list:hover {
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.28);
      color: #fff;
    }
    .modal-btn-watchlist {
      background: rgba(255,255,255,0.08);
      color: #e8e1d5;
      border: 1px solid rgba(255,255,255,0.14);
    }
    .modal-btn-watchlist:hover {
      background: rgba(234,110,74,0.14);
      border-color: rgba(234,110,74,0.45);
      color: #fff;
    }
    .modal-btn-watchlist.marked {
      background: rgba(234,110,74,0.18);
      border-color: rgba(234,110,74,0.6);
      color: var(--sr-amber);
    }
    .modal-btn-liked {
      background: rgba(255,255,255,0.08);
      color: #e8e1d5;
      border: 1px solid rgba(255,255,255,0.14);
    }
    .modal-btn-liked:hover,
    .modal-btn-disliked:hover {
      background: rgba(255,255,255,0.10);
      border-color: rgba(247,239,226,0.24);
      color: #fff;
    }
    .modal-btn-liked.marked {
      background: rgba(234,110,74,0.16);
      border-color: rgba(234,110,74,0.56);
      color: var(--sr-amber);
    }
    .modal-btn-disliked {
      background: rgba(255,255,255,0.08);
      color: #e8e1d5;
      border: 1px solid rgba(255,255,255,0.14);
    }
    .modal-btn-disliked.marked {
      background: rgba(234,110,74,0.16);
      border-color: rgba(234,110,74,0.56);
      color: var(--sr-amber);
    }
    .modal-btn-hide {
      background: rgba(255,255,255,0.08);
      color: #e8e1d5;
      border: 1px solid rgba(255,255,255,0.14);
    }
    .modal-btn-hide:hover {
      background: var(--sr-danger-bg);
      border-color: rgba(234,110,74,0.42);
      color: var(--sr-danger);
    }
    .modal-btn-hide.marked {
      background: var(--sr-danger-bg);
      border-color: rgba(234,110,74,0.52);
      color: var(--sr-danger);
    }
    .series-progress-block {
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 8px;
      background: rgba(255,255,255,0.035);
      padding: 14px;
      margin-top: 14px;
    }
    .series-progress-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }
    .series-progress-title {
      color: #fff;
      font-size: 14px;
      font-weight: 800;
      line-height: 1.25;
    }
    .series-progress-sub {
      color: #9f9f9f;
      font-size: 12px;
      line-height: 1.4;
      margin-top: 3px;
    }
    .series-progress-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .series-progress-btn {
      min-height: 30px;
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 5px;
      background: rgba(255,255,255,0.05);
      color: #ddd;
      padding: 6px 9px;
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
    }
    .series-progress-btn.primary {
      border-color: rgba(255,255,255,0.18);
      color: #e8e1d5;
      background: rgba(255,255,255,0.07);
    }
    .series-progress-btn:hover {
      border-color: rgba(255,255,255,0.28);
      color: #fff;
      background: rgba(255,255,255,0.08);
    }
    .series-season-list {
      display: grid;
      gap: 7px;
    }
    .series-season-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 6px;
      padding: 9px 10px;
      background: rgba(0,0,0,0.14);
    }
    .series-season-row.seen {
      border-color: rgba(76,175,80,0.24);
      background: rgba(76,175,80,0.035);
    }
    .series-season-name {
      color: #eee;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.25;
    }
    .series-season-meta {
      color: #8f8f8f;
      font-size: 11px;
      line-height: 1.35;
      margin-top: 2px;
    }
    .series-season-toggle {
      min-width: 76px;
      min-height: 30px;
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 5px;
      background: rgba(255,255,255,0.045);
      color: #bdb7ad;
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
    }
    .series-season-toggle.marked {
      border-color: rgba(76,175,80,0.38);
      color: #8fd493;
      background: rgba(76,175,80,0.065);
    }

    #saveListModal {
      z-index: 720;
      background: rgba(0,0,0,0.72);
      backdrop-filter: blur(2px);
    }

    .list-modal-box {
      width: min(480px, calc(100vw - 24px));
      max-height: 82vh;
      overflow-y: auto;
      background: #1f1f1f;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 10px;
      box-shadow: 0 24px 80px rgba(0,0,0,0.9);
      padding: 24px;
      position: relative;
    }
    #saveListModal .modal-close {
      top: 14px;
      right: 14px;
      z-index: 2;
    }
    .list-modal-title {
      color: #fff;
      font-size: 20px;
      font-weight: 800;
      line-height: 1.2;
      margin: 0 34px 5px 0;
    }
    .list-modal-sub {
      color: #9f9f9f;
      font-size: 13px;
      line-height: 1.45;
      margin-bottom: 16px;
    }
    .list-option-stack {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 14px;
    }
    .list-option {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 11px;
      border: 1px solid rgba(255,255,255,0.11);
      border-radius: 7px;
      background: rgba(255,255,255,0.04);
      color: #e8e1d5;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }
    .list-option input {
      width: 15px;
      height: 15px;
      accent-color: #EA6E4A;
      flex-shrink: 0;
    }
    .list-option-name {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .list-option-count {
      color: #8d8d8d;
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
    }
    .list-new-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }
    .list-new-input {
      box-sizing: border-box;
      width: 100%;
      min-width: 0;
      height: 44px;
      border: 1px solid rgba(255,255,255,0.13);
      border-radius: 7px;
      background: rgba(0,0,0,0.24);
      color: #fff;
      padding: 0 12px;
      font: inherit;
      font-size: 16px;
    }
    .list-new-input:focus {
      outline: none;
      border-color: rgba(234,110,74,0.56);
    }
    .list-modal-status {
      min-height: 18px;
      color: var(--sr-text-muted);
      font-size: 12px;
      line-height: 1.45;
      margin-bottom: 12px;
    }
    .list-modal-status:not(:empty)::before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      margin-right: 7px;
      border-radius: 999px;
      background: var(--sr-amber);
      vertical-align: 1px;
    }
    .list-modal-status:empty { display: none; }
    .list-modal-status.error { color: #ff7975; }
    .list-modal-status.error::before { background: #ff7975; }
    .list-modal-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-start;
    }
    .list-empty {
      color: #8f8f8f;
      font-size: 13px;
      line-height: 1.45;
      padding: 0;
      border: none;
      border-radius: 0;
      margin-bottom: 14px;
    }

    .modal-loading {
      padding: 60px;
      text-align: center;
      color: #666;
      font-size: 14px;
    }

    @media (max-width: 540px) {
      .modal-overlay {
        align-items: flex-start;
        padding-top: calc(54px + env(safe-area-inset-top));
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
      }
      .modal-box {
        max-height: calc(100dvh - 76px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
      }
      #movieModal .modal-close {
        position: fixed;
        top: calc(12px + env(safe-area-inset-top));
        right: 14px;
        z-index: 260;
        width: 40px;
        height: 40px;
        background: rgba(31,31,31,0.96);
        box-shadow: 0 10px 28px rgba(0,0,0,0.45);
      }
      .modal-inner { flex-direction: column; gap: 16px; padding: 18px; }
      .modal-poster-col { width: 100%; }
      .modal-poster-col img { width: 120px; }
      .modal-rank-panel { grid-template-columns: 1fr; }
      .modal-sr-score { min-height: auto; }
      .modal-title { padding-right: 34px; font-size: 19px; }
      .modal-actions .modal-btn { flex: 1; text-align: center; }
      .modal-actions .modal-btn-imdb,
      .modal-actions .modal-btn-list,
      .modal-actions .modal-btn-icon {
        flex: 0 0 auto;
      }
      #saveListModal {
        align-items: flex-end;
        padding: 0;
      }
      .list-modal-box {
        width: 100%;
        max-height: min(76dvh, calc(100dvh - env(safe-area-inset-top) - 12px));
        border-radius: 16px 16px 0 0;
        padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
      }
      .list-modal-title { font-size: 19px; margin-bottom: 4px; }
      .list-modal-sub { margin-bottom: 14px; }
      .list-option-stack {
        max-height: 34dvh;
        overflow-y: auto;
        padding-right: 2px;
        -webkit-overflow-scrolling: touch;
      }
      .list-option { padding: 9px 10px; }
      .list-new-row { grid-template-columns: minmax(0, 1fr); }
      .list-new-row .modal-btn { width: 100%; min-height: 44px; }
      .list-modal-actions .modal-btn { flex: 1; text-align: center; }
      .modal-loading { padding: 46px 20px; }
    }

    @media (max-width: 600px) {
      .controls { display: none !important; }
      .note-bar { display: none; }
      .header-sub { display: none; }
      .btn-filters-mobile { display: flex; }
      .mobile-search-row { display: flex; }
      .ctrl-divider { display: none; }
    }

    /* ── First-launch onboarding overlay ── */
    .onboarding-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.97);
      z-index: 2000;
      display: none;
      align-items: flex-start;
      justify-content: center;
      padding: 48px 24px 32px;
      overflow-y: auto;
      overflow-y: auto;
    }
    .onboarding-overlay.open { display: flex; }
    .onboarding-card {
      width: 100%;
      max-width: 460px;
      padding: 8px 4px;
    }
    .onboarding-hero {
      text-align: center;
      margin-bottom: 28px;
    }
    .onboarding-logo {
      font-family: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
      font-size: 46px;
      font-weight: 800;
      letter-spacing: 0;
      line-height: 0.88;
      margin-bottom: 10px;
      color: #fff;
      text-transform: uppercase;
    }
    .onboarding-logo span { color: #EA6E4A; }
    .onboarding-title {
      font-size: 18px;
      font-weight: 600;
      line-height: 1.35;
      color: #E6B85C;
      letter-spacing: 0;
      margin-bottom: 14px;
    }
    .onboarding-sub {
      font-size: 14px;
      color: #999;
      line-height: 1.55;
      margin-bottom: 0;
    }
    .onboarding-setup-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 32px 0 20px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0;
      color: #666;
      font-weight: 700;
    }
    .onboarding-setup-divider::before,
    .onboarding-setup-divider::after {
      content: "";
      flex: 1;
      height: 1px;
      background: rgba(255,255,255,0.08);
    }
    .onboarding-features {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-bottom: 32px;
      padding: 18px 16px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px;
    }
    .onboarding-feature {
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }
    .onboarding-feature-icon {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #EA6E4A;
    }
    .onboarding-feature-icon svg {
      width: 26px;
      height: 26px;
    }
    .onboarding-feature-text {
      flex: 1;
      min-width: 0;
    }
    .onboarding-feature-headline {
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 2px;
    }
    .onboarding-feature-sub {
      font-size: 12.5px;
      color: #999;
      line-height: 1.45;
    }
    .onboarding-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0;
      color: #777;
      margin: 0 0 10px;
      font-weight: 600;
    }
    .onboarding-select {
      width: 100%;
      background: #1e1e1e;
      border: 1px solid rgba(255,255,255,0.18);
      color: #fff;
      padding: 12px 14px;
      font-size: 15px;
      border-radius: 6px;
      cursor: pointer;
      font-family: inherit;
      margin-bottom: 28px;
    }
    .onboarding-card .app-select-onboarding-country {
      width: 100%;
      margin-bottom: 28px;
    }
    .onboarding-card .app-select-onboarding-country .app-select-trigger {
      min-height: 48px;
      width: 100%;
      justify-content: space-between;
    }
    .onboarding-card .app-select-onboarding-country .app-select-menu {
      --sr-text: #F7EFE2;
      --sr-text-muted: #8FA0A4;
      --sr-surface: rgba(255,255,255,0.045);
      --sr-surface-2: rgba(255,255,255,0.075);
      --sr-line: rgba(255,255,255,0.12);
      --sr-border: 1px solid rgba(255,255,255,0.12);
      left: 0;
      right: 0;
      width: auto;
      max-height: min(320px, 48dvh);
      background: #1D262D;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: var(--sr-radius-lg);
      box-shadow: var(--sr-shadow-3);
      padding: 8px;
    }
    .onboarding-card .app-select-onboarding-country .app-select-option {
      min-height: 42px;
      border-radius: var(--sr-radius-md);
      color: #F7EFE2;
    }
    .onboarding-card .app-select-onboarding-country .app-select-option.active::before {
      content: '✓';
      color: var(--sr-amber);
      font-weight: 900;
      margin-right: 9px;
    }
    .onboarding-card .app-select-onboarding-country .app-select-group {
      color: #8FA0A4;
    }
    .onboarding-providers {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 8px;
    }
    .onboarding-provider {
      background: none;
      border: 1px solid rgba(255,255,255,0.18);
      color: #ccc;
      padding: 9px 16px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.15s;
    }
    .onboarding-provider:hover { border-color: rgba(255,255,255,0.4); color: #fff; }
    .onboarding-provider.active {
      border-color: #EA6E4A;
      background: rgba(234,110,74,0.15);
      color: #fff;
    }
    .language-options {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .language-hint {
      font-size: 12px;
      color: #666;
      line-height: 1.45;
      margin-top: 8px;
    }
    .onboarding-hint {
      font-size: 12px;
      color: #666;
      margin-top: 8px;
    }
    .onboarding-cta {
      width: 100%;
      background: #EA6E4A;
      border: none;
      color: #fff;
      padding: 14px;
      font-size: 16px;
      font-weight: 700;
      border-radius: 6px;
      cursor: pointer;
      margin-top: 36px;
      font-family: inherit;
      transition: background 0.15s;
    }
    .onboarding-cta:hover:not(:disabled) { background: #EA6E4A; }
    .onboarding-cta:disabled { opacity: 0.4; cursor: not-allowed; }

    /* ============================================================
       NEW APP BAR LAYOUT (overrides legacy header styles below)
       ============================================================ */
    body {
      background:
        radial-gradient(ellipse 900px 600px at 50% -100px, rgba(234,110,74,0.06) 0%, transparent 60%),
        #0f0f11;
      padding-top: var(--appbar-fixed-offset, 0px);
    }

    header {
      background: linear-gradient(180deg, rgba(15,15,17,0.92) 0%, rgba(15,15,17,0.7) 70%, rgba(15,15,17,0) 100%);
      padding: 12px 5% 8px;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      z-index: 120;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .appbar-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 2px;
    }
    .logo-link { text-decoration: none; }
    .appbar-account { display: flex; align-items: center; }

    .btn-signin {
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.2);
      color: #ccc;
      padding: 7px 16px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s;
      white-space: nowrap;
    }
    .btn-signin:hover {
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.4);
      color: #fff;
    }

    .appbar-tagline {
      font-size: 14px;
      color: #b8b8b8;
      margin-bottom: 12px;
      line-height: 1.4;
      max-width: 620px;
    }

    .appbar-search-row {
      margin-bottom: 8px;
    }
    .search-wrap {
      position: relative;
      width: 100%;
    }
    .search-icon {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      width: 18px;
      height: 18px;
      color: #777;
      pointer-events: none;
    }
    .search-input {
      width: 100%;
      background: rgba(255,255,255,0.06);
      border: 1px solid transparent;
      color: #fff;
      padding: 10px 42px 10px 42px;
      font-size: 14px;
      border-radius: 10px;
      outline: none;
      font-family: inherit;
      transition: background 0.15s, border-color 0.15s;
    }
    .search-input::placeholder { color: #666; }
    .search-input:focus {
      background: rgba(255,255,255,0.09);
      border-color: rgba(234,110,74,0.35);
    }
    .search-clear-btn {
      position: absolute;
      right: 7px;
      top: 50%;
      transform: translateY(-50%);
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: #8a8a8a;
      cursor: pointer;
      padding: 0;
      z-index: 1;
      transition: background 0.15s, color 0.15s;
    }
    .search-clear-btn:hover,
    .search-clear-btn:focus-visible {
      background: rgba(255,255,255,0.1);
      color: #fff;
      outline: none;
    }
    .search-clear-btn[hidden] {
      display: none;
    }
    .search-clear-btn svg {
      width: 16px;
      height: 16px;
    }

    .appbar-toolbar {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .appbar-toolbar-spacer { flex: 1; }
    .controls {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 8px;
      padding: 0;
      position: relative;
    }
    .tune-dot {
      display: none;
    }
    .controls .ctrl-select {
      min-height: 32px;
      background-color: transparent;
      border-color: transparent;
      border-radius: 6px;
      color: #d7d7d7;
      font-size: 13px;
      font-weight: 650;
      padding: 6px 24px 6px 7px;
    }
    .controls .ctrl-select:hover,
    .controls .ctrl-select:focus {
      background-color: rgba(255,255,255,0.07);
      border-color: transparent;
    }
    .controls .mode-select { border-color: transparent; }
    .tune-menu {
      position: relative;
      min-width: 0;
    }
    .tune-menu-trigger {
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 8px;
      background: rgba(255,255,255,0.045);
      color: #d7d7d7;
      padding: 6px 28px 6px 10px;
      font: inherit;
      font-size: 13px;
      font-weight: 650;
      line-height: 1.15;
      text-align: left;
      white-space: nowrap;
      cursor: pointer;
      position: relative;
      max-width: 236px;
    }
    .tune-menu-trigger::after {
      content: '';
      position: absolute;
      right: 9px;
      top: 50%;
      width: 7px;
      height: 7px;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: translateY(-65%) rotate(45deg);
      opacity: 0.7;
    }
    .tune-menu.open .tune-menu-trigger,
    .tune-menu-trigger:hover {
      border-color: rgba(234,110,74,0.36);
      background: rgba(255,255,255,0.07);
      color: #fff;
    }
    .tune-menu.open .tune-menu-trigger::after {
      transform: translateY(-30%) rotate(225deg);
    }
    .tune-chip-text {
      min-width: 0;
      flex: 1 1 auto;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .tune-chip-label {
      flex: 0 0 auto;
      color: var(--sr-text-muted);
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }
    .tune-chip-value {
      min-width: 0;
      overflow: hidden;
      color: var(--sr-text);
      font-weight: 700;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .tune-menu-panel {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      z-index: 180;
      width: 240px;
      max-height: min(420px, calc(100vh - 180px));
      overflow-y: auto;
      padding: 10px;
      border-radius: 8px;
      background: #111316;
      box-shadow: 0 18px 46px rgba(0,0,0,0.62);
      border: 1px solid rgba(255,255,255,0.08);
    }
    .tune-menu-panel-wide { width: 420px; }
    .tune-menu.open .tune-menu-panel { display: block; }
    .multi-select-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
    }
    .multi-select-head-clear {
      justify-content: flex-end;
    }
    .multi-select-title,
    .multi-select-head label {
      color: #8b8b8b;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0;
      text-transform: uppercase;
      margin: 0;
    }
    .clear-multi-btn {
      width: auto;
      height: 26px;
      flex: 0 0 auto;
      border: 0;
      border-radius: 6px;
      background: rgba(255,255,255,0.06);
      color: #b8b8b8;
      font: inherit;
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
      padding: 0 9px;
      cursor: pointer;
    }
    .clear-multi-btn:hover {
      background: rgba(234,110,74,0.16);
      color: #fff;
    }
    .controls .provider-toggle-group {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2px;
    }
    .controls #langToggle {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 2px 8px;
    }
    .controls .app-select {
      width: auto;
      min-width: 132px;
      position: relative;
    }
    .controls .app-select-trigger {
      min-height: 34px;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 8px;
      background: rgba(255,255,255,0.045);
      color: #d7d7d7;
      padding: 6px 10px;
      font-size: 13px;
      font-weight: 650;
      line-height: 1.15;
    }
    .controls .app-select-trigger:hover,
    .controls .app-select.open .app-select-trigger {
      border-color: rgba(234,110,74,0.36);
      background: rgba(255,255,255,0.07);
      color: #fff;
    }
    .controls .app-select-label,
    .controls .tune-chip-label {
      color: var(--sr-text-muted);
    }
    .controls .app-select-value {
      color: var(--sr-text);
      font-weight: 700;
    }
    .controls .app-select-caret {
      color: currentColor;
      opacity: 0.7;
    }
    .controls .app-select-menu {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      z-index: 190;
      margin-top: 0;
      width: 380px;
      max-height: min(500px, calc(100vh - 180px));
      padding: 10px;
      background:
        linear-gradient(180deg, rgba(30,37,46,0.98), rgba(20,26,31,0.98));
      border: 1px solid rgba(247,239,226,0.16);
      box-shadow: 0 18px 46px rgba(4,18,20,0.62);
    }
    .controls .app-select-country .app-select-menu { width: 430px; }
    .controls .app-select-genre .app-select-menu { width: 390px; }
    .controls .app-select-seen {
      min-width: 118px;
    }
    .controls .app-select-mode {
      min-width: 164px;
    }
    .controls .app-select-country {
      min-width: 132px;
    }
    .controls .app-select-genre {
      min-width: 138px;
    }
    .controls .app-select-collection {
      min-width: 154px;
    }
    .controls .app-select-collection .app-select-menu {
      width: 270px;
    }
    .controls .app-select-country.open .app-select-menu,
    .controls .app-select-genre.open .app-select-menu {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 2px 8px;
    }
    .controls .app-select-country .app-select-group,
    .controls .app-select-genre .app-select-group {
      grid-column: 1 / -1;
    }
    .controls .collection-toggle-top {
      min-height: 34px;
      border-radius: 8px;
      background: rgba(255,255,255,0.045);
      padding: 0 12px 0 9px;
      font-size: 13px;
      font-weight: 700;
    }

    .segmented {
      display: inline-flex;
      background: rgba(255,255,255,0.06);
      border-radius: 10px;
      padding: 3px;
      gap: 0;
    }
    .segmented .media-btn {
      background: none;
      border: none;
      color: #999;
      padding: 7px 18px;
      border-radius: 7px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      transition: color 0.15s, background 0.15s;
      letter-spacing: 0;
    }
    .segmented .media-btn:hover:not(.active) { color: #ddd; }
    .segmented .media-btn.active {
      background: rgba(255,255,255,0.14);
      color: #fff;
      box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    }

    .btn-icon {
      width: 40px;
      height: 40px;
      background: rgba(255,255,255,0.06);
      border: none;
      border-radius: 10px;
      color: #bbb;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      transition: background 0.15s, color 0.15s;
      font-family: inherit;
    }
    .btn-icon:hover { background: rgba(255,255,255,0.1); color: #fff; }
    .btn-icon svg { width: 20px; height: 20px; }
    .btn-icon-text {
      width: auto;
      min-width: 0;
      padding: 0 13px;
      gap: 7px;
      font-size: 13px;
      font-weight: 800;
      line-height: 1;
      white-space: nowrap;
    }
    .btn-icon-label {
      display: inline-block;
      line-height: 1;
    }
    .watchlist-icon {
      display: block;
      width: 16px;
      height: 16px;
    }
    .btn-icon .watchlist-icon {
      width: 18px;
      height: 18px;
    }
    .btn-watchlist .watchlist-icon,
    .btn-hide .hidden-icon,
    .btn-like .liked-icon,
    .btn-dislike .disliked-icon {
      width: 14px;
      height: 14px;
      display: block;
    }
    .btn-icon.active {
      background: rgba(234,110,74,0.16);
      color: #EA6E4A;
    }
    .btn-icon .filter-badge {
      position: absolute;
      top: 7px;
      right: 7px;
      width: 8px;
      height: 8px;
      background: #EA6E4A;
      border-radius: 50%;
      display: none;
    }
    .btn-icon .filter-badge.visible { display: block; }
    #btnFiltersMobile { display: none; }

    .quick-bar {
      display: none;
      position: fixed;
      left: 10px;
      right: 10px;
      bottom: calc(10px + env(safe-area-inset-bottom));
      z-index: 130;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 3px;
      padding: 7px;
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 18px;
      background: rgba(15,14,20,0.88);
      box-shadow: 0 18px 46px rgba(0,0,0,0.48);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    .quick-bar-btn {
      min-width: 0;
      min-height: 52px;
      border: 0;
      border-radius: 13px;
      background: transparent;
      color: var(--sr-text-muted);
      font: inherit;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      cursor: pointer;
      position: relative;
      -webkit-tap-highlight-color: transparent;
    }
    .quick-bar-btn svg {
      width: 19px;
      height: 19px;
      display: block;
    }
    .quick-bar-btn span {
      text-align: center;
      line-height: 1.05;
      overflow-wrap: anywhere;
    }
    .quick-bar-btn.active {
      background: rgba(234,110,74,0.14);
      color: var(--sr-amber);
    }
    .quick-bar-btn:focus-visible {
      outline: none;
      box-shadow: var(--sr-focus-ring);
    }
    .quick-bar-badge {
      position: absolute;
      top: 7px;
      right: 15px;
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--sr-amber);
      display: none;
    }
    .quick-bar-badge.visible { display: block; }

    /* Pick for Me bottom-bar entry: neutral at rest like the other quick-bar buttons,
       amber only when the Pick for Me view is open (so amber consistently = active). */
    .quick-bar-btn-accent {
      color: var(--sr-text-muted);
      background: transparent;
    }
    .quick-bar-btn-accent.active {
      background: rgba(234,110,74,0.14);
      color: var(--sr-amber);
    }

    /* Pick for Me desktop header button: neutral at rest (matches the quiet toolbar
       icon buttons) so amber reads as "active" only when the Pick for Me view is open. */
    .btn-top3 {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      height: 40px;
      padding: 0 16px;
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 999px;
      background: rgba(255,255,255,0.06);
      color: #bbb;
      font-family: inherit;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.01em;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    }
    .btn-top3 svg { width: 16px; height: 16px; }
    .btn-top3:hover {
      background: rgba(255,255,255,0.1);
      border-color: rgba(255,255,255,0.18);
      color: #fff;
    }
    .btn-top3:active { transform: translateY(1px); }
    .btn-top3:focus-visible { outline: none; box-shadow: var(--sr-focus-ring); }
    .btn-top3.active {
      background: rgba(234,110,74,0.26);
      border-color: var(--sr-amber);
      color: var(--sr-gleam);
    }

    /* Pick for Me full-screen decision surface. */
    .top3-view {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 160;
      background: var(--sr-bg);
      flex-direction: column;
      overflow: hidden;
    }
    .top3-view.open { display: flex; }
    .top3-head {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: calc(14px + env(safe-area-inset-top)) 18px 14px;
      border-bottom: var(--sr-border);
      background: linear-gradient(180deg, var(--sr-bg-raised), var(--sr-bg));
    }
    .top3-back {
      flex: none;
      width: 40px;
      height: 40px;
      border: none;
      border-radius: 12px;
      background: rgba(255,255,255,0.06);
      color: var(--sr-text);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .top3-back:hover { background: rgba(255,255,255,0.12); }
    .top3-back svg { width: 22px; height: 22px; }
    .top3-back:focus-visible { outline: none; box-shadow: var(--sr-focus-ring); }
    .top3-heading {
      margin: 0;
      font-family: var(--sr-font-display);
      font-weight: 900;
      font-size: 26px;
      line-height: 1.05;
      color: var(--sr-text);
    }
    .top3-subtitle {
      margin: 3px 0 0;
      font-size: 13px;
      color: var(--sr-text-muted);
    }
    .top3-body {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      width: 100%;
      max-width: 720px;
      margin: 0 auto;
    }
    .top3-card {
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: 14px;
      padding: 12px;
      border: var(--sr-border);
      border-radius: var(--sr-radius-lg);
      background: var(--sr-surface);
      box-shadow: var(--sr-shadow-1);
      touch-action: pan-y;
      user-select: none;
      -webkit-touch-callout: none;
    }
    .top3-poster {
      position: relative;
      aspect-ratio: 2 / 3;
      border-radius: var(--sr-radius-md);
      overflow: hidden;
      background: var(--sr-surface-2);
      cursor: pointer;
      -webkit-user-drag: none;
    }
    .top3-poster img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
    .top3-poster:focus-visible { outline: none; box-shadow: var(--sr-focus-ring); }
    .top3-poster-fallback {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      padding: 8px;
      text-align: center;
      font-family: var(--sr-font-display);
      font-size: 13px;
      color: var(--sr-text-muted);
    }
    .top3-rank {
      position: absolute;
      top: 6px;
      left: 6px;
      min-width: 24px;
      height: 24px;
      padding: 0 6px;
      border-radius: 999px;
      background: rgba(15,18,22,0.78);
      border: 1px solid rgba(247,239,226,0.16);
      color: var(--sr-cream);
      font-weight: 900;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(6px);
    }
    .top3-card-body { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
    .top3-provider-badges { display: flex; flex-wrap: wrap; gap: 5px; }
    .top3-title {
      margin: 0;
      font-family: var(--sr-font-display);
      font-weight: 800;
      font-size: 19px;
      line-height: 1.15;
      color: var(--sr-text);
    }
    .top3-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
    .top3-evidence-src { font-size: 10px; font-weight: 400; color: var(--sr-text-muted); }
    .top3-type {
      font-size: 11px;
      font-weight: 800;
      line-height: 1;
      padding: 5px 7px;
      border: var(--sr-border);
      border-radius: var(--sr-radius-pill);
      color: var(--sr-text-muted);
      background: rgba(255,255,255,0.035);
    }
    .top3-year { font-size: 13px; color: var(--sr-text-muted); }
    .top3-lang { font-size: 12px; color: var(--sr-text-muted); }
    .top3-reason {
      font-size: 13px;
      color: var(--sr-text);
      opacity: 0.92;
    }
    .top3-card-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px;
      margin-top: auto;
      padding-top: 4px;
    }
    .top3-btn-primary {
      height: 40px;
      border: none;
      border-radius: var(--sr-radius-pill);
      background: var(--sr-amber);
      color: var(--sr-text-on-amber);
      font-family: inherit;
      font-weight: 800;
      font-size: 13px;
      cursor: pointer;
      transition: background 0.15s;
    }
    .top3-card-actions .top3-btn-primary {
      grid-column: 1 / -1;
      width: 100%;
      min-width: 0;
    }
    .top3-btn-primary:hover { background: var(--sr-gleam); }
    .top3-btn-primary:focus-visible { outline: none; box-shadow: var(--sr-focus-ring); }
    .top3-btn-ghost {
      min-width: 0;
      height: 34px;
      padding: 0 10px;
      border: var(--sr-border);
      border-radius: var(--sr-radius-pill);
      background: transparent;
      color: var(--sr-text-muted);
      font-family: inherit;
      font-weight: 700;
      font-size: 13px;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s;
    }
    .top3-btn-ghost:hover { color: var(--sr-text); border-color: var(--sr-text-muted); }
    .top3-btn-ghost:focus-visible { outline: none; box-shadow: var(--sr-focus-ring); }
    .top3-btn-hide:hover {
      color: var(--sr-danger);
      border-color: rgba(234,110,74,0.46);
    }
    .top3-empty {
      margin: auto;
      max-width: 420px;
      padding: 24px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
    .top3-empty-mark { width: 44px; height: 44px; color: var(--sr-amber); }
    .top3-empty-title {
      margin: 0;
      font-family: var(--sr-font-display);
      font-weight: 800;
      font-size: 21px;
      color: var(--sr-text);
    }
    .top3-empty-sub { margin: 0; font-size: 14px; line-height: 1.5; color: var(--sr-text-muted); }
    .top3-empty .top3-btn-primary { flex: none; padding: 0 22px; margin-top: 4px; }
    .top3-loading-mark {
      width: 36px;
      height: 36px;
      border-radius: 999px;
      border: 3px solid rgba(255,255,255,0.12);
      border-top-color: var(--sr-amber);
      animation: sr-spin 0.85s linear infinite;
    }
    .top3-footer {
      flex: none;
      padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
      border-top: var(--sr-border);
      background: var(--sr-bg-raised);
      display: flex;
      justify-content: center;
    }
    .top3-reshuffle {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      height: 46px;
      padding: 0 26px;
      border: var(--sr-border);
      border-radius: var(--sr-radius-pill);
      background: var(--sr-surface);
      color: var(--sr-text);
      font-family: inherit;
      font-weight: 800;
      font-size: 14px;
      cursor: pointer;
      transition: background 0.15s;
    }
    .top3-reshuffle:hover { background: var(--sr-surface-2); }
    .top3-reshuffle:disabled {
      cursor: wait;
      opacity: 0.58;
    }
    .top3-reshuffle.loading svg {
      animation: sr-spin 0.85s linear infinite;
    }
    .top3-reshuffle svg { width: 18px; height: 18px; color: var(--sr-amber); }
    .top3-reshuffle:focus-visible { outline: none; box-shadow: var(--sr-focus-ring); }
    @keyframes sr-spin {
      to { transform: rotate(360deg); }
    }
    @media (max-width: 640px) {
      .top3-desktop-btn { display: none; }
    }
    @media (max-width: 380px) {
      .top3-card { grid-template-columns: 96px 1fr; }
    }

    .more-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.56);
      z-index: 210;
      display: none;
      opacity: 0;
      transition: opacity 0.18s ease;
    }
    .more-overlay.open {
      display: block;
      opacity: 1;
    }
    .more-sheet {
      position: fixed;
      left: auto;
      right: 16px;
      bottom: 16px;
      z-index: 220;
      display: none;
      width: min(430px, calc(100% - 32px));
      max-height: min(86vh, 580px);
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,0.10);
      background: var(--sr-bg-raised);
      box-shadow: 0 18px 52px rgba(0,0,0,0.58);
      transform: translateY(12px);
      transition: transform 0.22s var(--sr-ease);
      overflow: hidden;
    }
    .more-sheet.open {
      display: block;
      transform: translateY(0);
    }
    .more-sheet-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 18px 20px 10px;
    }
    .more-sheet-title {
      font-size: 18px;
      font-weight: 850;
      color: var(--sr-text);
    }
    .more-sheet-sub {
      font-size: 12px;
      color: var(--sr-text-muted);
      margin-top: 2px;
    }
    .more-sheet-close {
      width: 38px;
      height: 38px;
      border: var(--sr-border);
      border-radius: var(--sr-radius-md);
      background: var(--sr-surface-2);
      color: var(--sr-text-muted);
      cursor: pointer;
      font-size: 20px;
      line-height: 1;
    }
    .more-sheet-body {
      padding: 4px 14px calc(20px + env(safe-area-inset-bottom));
      overflow: auto;
      max-height: calc(min(86vh, 580px) - 76px);
    }
    .more-group {
      padding: 8px 0;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .more-group:first-child { border-top: 0; }
    .more-label {
      padding: 8px 8px 6px;
      color: var(--sr-amber);
      font-size: 10px;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: 0.12em;
    }
    .more-action {
      width: 100%;
      min-height: 46px;
      border: 0;
      border-radius: var(--sr-radius-md);
      background: transparent;
      color: var(--sr-text);
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 10px;
      font: inherit;
      font-size: 14px;
      font-weight: 750;
      text-align: left;
      text-decoration: none;
      cursor: pointer;
    }
    .more-action[hidden] { display: none; }
    .more-action-grid #moreListsWrap {
      display: contents;
    }
    .more-action:hover,
    .more-action:focus-visible {
      background: rgba(255,255,255,0.06);
      outline: none;
      text-decoration: none;
    }
    .more-action.active {
      background: rgba(234,110,74,0.12);
      color: var(--sr-amber);
    }
    .more-action.active::after {
      content: '✓';
      margin-left: auto;
      color: var(--sr-amber);
      font-weight: 900;
    }
    .more-action.active .more-action-count {
      margin-left: 0;
    }
    .more-action-return {
      margin: 0 0 8px;
      border: 1px solid rgba(234,110,74,0.28);
      color: var(--sr-text);
      background:
        linear-gradient(180deg, rgba(234,110,74,0.16), rgba(234,110,74,0.07)),
        rgba(255,255,255,0.03);
      box-shadow: 0 10px 24px rgba(0,0,0,0.22);
    }
    .more-action-return:hover,
    .more-action-return:focus-visible {
      border-color: rgba(234,110,74,0.48);
      background:
        linear-gradient(180deg, rgba(234,110,74,0.22), rgba(234,110,74,0.1)),
        rgba(255,255,255,0.05);
    }
    .more-action-text {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .more-action-count {
      margin-left: auto;
      color: var(--sr-text-muted);
      font-size: 12px;
      font-weight: 800;
    }
    .more-action.active .more-action-count {
      color: var(--sr-amber);
    }
    .more-action svg {
      width: 18px;
      height: 18px;
      color: var(--sr-amber);
      flex: 0 0 auto;
    }
    .more-action.danger { color: var(--sr-danger); }
    .more-action.danger:hover,
    .more-action.danger:focus-visible {
      background: var(--sr-danger-bg);
      color: var(--sr-danger);
    }
    .more-action.danger svg { color: var(--sr-danger); }
    .more-account-email {
      padding: 0 8px 8px;
      color: var(--sr-text-muted);
      font-size: 12px;
      line-height: 1.35;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .more-disclosure {
      padding: 10px 8px 4px;
      color: var(--sr-text-muted);
      font-size: 11px;
      line-height: 1.45;
    }

    .discovery-head {
      width: 100%;
      margin: 0 0 14px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 18px;
    }
    .discovery-head > div:first-child {
      min-width: 0;
      text-align: left;
    }
    .discovery-main {
      min-width: 0;
      text-align: left;
    }
    .discovery-kicker {
      font-size: 11px;
      color: #8A9BA8;
      text-transform: uppercase;
      letter-spacing: 1.1px;
      font-weight: 700;
      margin-bottom: 6px;
    }
    .discovery-title-row {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      margin-bottom: 8px;
      flex-wrap: wrap;
    }
    .discovery-title {
      font-size: clamp(28px, 4.4vw, 42px);
      line-height: 1;
      font-weight: 800;
      letter-spacing: 0;
      margin-bottom: 0;
      min-width: 0;
    }
    .discovery-sub {
      color: #8f8f8f;
      font-size: 14px;
      line-height: 1.45;
      max-width: 620px;
    }
    body.collection-mode .discovery-sub {
      max-width: min(880px, 100%);
    }
    .saved-view-bar {
      margin: -4px 0 14px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 7px;
      border: 0;
      background: transparent;
      box-shadow: none;
    }
    .saved-view-bar[hidden] { display: none; }
    .saved-view-bar-action {
      flex: 0 0 auto;
      min-height: 34px;
      border: 1px solid rgba(234,110,74,0.38);
      border-radius: var(--sr-radius-pill);
      background:
        linear-gradient(180deg, rgba(234,110,74,0.16), rgba(234,110,74,0.07)),
        rgba(255,255,255,0.03);
      color: var(--sr-text);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 0 13px 0 8px;
      font-size: 12px;
      font-weight: 850;
      cursor: pointer;
      box-shadow: 0 10px 22px rgba(0,0,0,0.2);
      transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
    }
    .browse-return-icon {
      width: 22px;
      height: 22px;
      border-radius: 999px;
      background: rgba(234,110,74,0.16);
      color: var(--sr-amber);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      font-size: 13px;
      font-weight: 900;
      line-height: 1;
    }
    .browse-return-icon::before {
      content: '\2190';
    }
    .browse-return-text {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .saved-view-bar-action:hover,
    .saved-view-bar-action:focus-visible {
      background:
        linear-gradient(180deg, rgba(234,110,74,0.22), rgba(234,110,74,0.1)),
        rgba(255,255,255,0.05);
      border-color: rgba(234,110,74,0.58);
      color: #fff;
      transform: translateY(-1px);
      box-shadow: 0 13px 26px rgba(0,0,0,0.28);
      outline: none;
    }
    .collection-controls {
      margin: -4px 0 14px;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      border: 0;
      background: transparent;
    }
    .collection-controls[hidden] { display: none; }
    .collection-top-separator[hidden],
    .collection-toggle[hidden] {
      display: none;
    }
    .collection-toggle-top {
      min-height: 32px;
      white-space: nowrap;
    }
    .collection-inline-control {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      max-width: 100%;
      min-width: 0;
    }
    .collection-inline-label {
      color: var(--sr-text-muted);
      font-size: 12px;
      font-weight: 800;
    }
    .collection-inline-control .ctrl-select {
      min-height: 30px;
      border-radius: var(--sr-radius-pill);
      border: 1px solid rgba(255,255,255,0.13);
      background: transparent;
      color: var(--sr-text);
      padding: 4px 26px 4px 11px;
      font-size: 12px;
      font-weight: 800;
    }
    .collection-inline-control .ctrl-select:hover,
    .collection-inline-control .ctrl-select:focus {
      border-color: rgba(234,110,74,0.36);
      background: rgba(255,255,255,0.06);
      outline: none;
    }
    .collection-inline-control .app-select {
      width: min(270px, 100%);
      min-width: 180px;
      position: relative;
    }
    .collection-inline-control .app-select-trigger {
      min-height: 34px;
      border-radius: var(--sr-radius-md);
      border: 1px solid rgba(255,255,255,0.13);
      background: rgba(255,255,255,0.045);
      padding: 6px 10px;
      font-size: 13px;
      font-weight: 650;
      line-height: 1.15;
    }
    .collection-inline-control .app-select-trigger:hover,
    .collection-inline-control .app-select.open .app-select-trigger {
      border-color: rgba(234,110,74,0.36);
      background: rgba(255,255,255,0.07);
      color: var(--sr-text);
    }
    .collection-inline-control .app-select-caret {
      color: var(--sr-text-muted);
      opacity: 0.8;
    }
    .collection-inline-control .app-select-trigger:hover .app-select-caret,
    .collection-inline-control .app-select.open .app-select-caret,
    .collection-inline-control .app-select-trigger:focus-visible .app-select-caret {
      color: var(--sr-amber);
      opacity: 1;
    }
    .collection-inline-control .app-select-value {
      color: var(--sr-text);
      font-weight: 700;
    }
    .collection-inline-control .app-select-menu {
      position: absolute;
      top: calc(100% + 7px);
      left: 0;
      z-index: 170;
      width: 100%;
      min-width: 240px;
      max-height: min(340px, calc(100vh - 220px));
      margin-top: 0;
      padding: 8px;
      background:
        linear-gradient(180deg, rgba(30,37,46,0.98), rgba(20,26,31,0.98));
      border: 1px solid rgba(247,239,226,0.16);
      border-radius: var(--sr-radius-lg);
      box-shadow: 0 18px 46px rgba(4,18,20,0.58);
    }
    .collection-view-control {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      min-height: 34px;
      padding: 3px;
      border: 1px solid rgba(255,255,255,0.13);
      border-radius: var(--sr-radius-md);
      background: rgba(255,255,255,0.045);
    }
    .collection-view-label {
      padding: 0 7px;
      color: var(--sr-text-muted);
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
    }
    .collection-view-option {
      min-height: 26px;
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: var(--sr-text-muted);
      padding: 0 9px;
      font: inherit;
      font-size: 12px;
      font-weight: 850;
      line-height: 1;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.15s, color 0.15s;
    }
    .collection-view-option:hover,
    .collection-view-option:focus-visible {
      color: var(--sr-text);
      background: rgba(255,255,255,0.07);
      outline: none;
    }
    .collection-view-option.active {
      background: rgba(234,110,74,0.92);
      color: #21170a;
    }
    .collection-toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 30px;
      border: 1px solid rgba(255,255,255,0.13);
      border-radius: var(--sr-radius-pill);
      background: transparent;
      color: var(--sr-text-muted);
      padding: 0 12px 0 8px;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }
    .collection-action-mobile {
      display: none;
    }
    .collection-controls > .saved-view-bar-action {
      border-color: rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.045);
      color: var(--sr-text);
      box-shadow: none;
    }
    .collection-controls > .saved-view-bar-action .browse-return-icon {
      background: rgba(234,110,74,0.13);
      color: var(--sr-amber);
    }
    .collection-controls > .saved-view-bar-action:hover,
    .collection-controls > .saved-view-bar-action:focus-visible {
      border-color: rgba(234,110,74,0.38);
      background: rgba(255,255,255,0.07);
      color: var(--sr-text);
      box-shadow: none;
    }
    .collection-sort-action {
      min-height: 34px;
      border-color: rgba(255,255,255,0.13);
      background: rgba(255,255,255,0.045);
    }
    .collection-toggle:hover,
    .collection-toggle:focus-visible {
      color: var(--sr-text);
      border-color: rgba(234,110,74,0.36);
      outline: none;
    }
    .collection-toggle-track {
      position: relative;
      width: 30px;
      height: 16px;
      border-radius: 999px;
      background: rgba(255,255,255,0.16);
      transition: background 0.15s ease;
      flex: 0 0 auto;
    }
    .collection-toggle-thumb {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #cfcfcf;
      transition: transform 0.15s ease, background 0.15s ease;
    }
    .collection-toggle.active {
      color: var(--sr-amber);
      border-color: rgba(234,110,74,0.45);
    }
    .collection-toggle.active .collection-toggle-track {
      background: rgba(234,110,74,0.55);
    }
    .collection-toggle.active .collection-toggle-thumb {
      transform: translateX(14px);
      background: #fff;
    }
    .discovery-stat {
      color: #777;
      font-size: 12px;
      white-space: nowrap;
      margin-bottom: 3px;
      text-align: right;
    }
    .discovery-side {
      margin-left: auto;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 7px;
      min-width: max-content;
    }
    .card-reason {
      color: #a0a0a0;
      font-size: 11px;
      line-height: 1.35;
      margin: 7px 0 9px;
      min-height: 15px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .card-availability {
      margin-top: 4px;
      color: #d9d9d9;
      font-size: 11px;
      font-weight: 800;
      line-height: 1.3;
    }
    .card-availability.service { color: #8fd5a6; }
    .card-availability.rentbuy { color: #f0c166; }
    .card-availability.unavailable,
    .card-availability.unknown { color: var(--sr-text-muted); }
    .card.collection-unavailable {
      border: 1px dashed rgba(255,255,255,0.16);
      background: #191919;
    }
    .card.collection-unavailable .card-poster,
    .card.collection-unavailable .card-poster-fallback {
      filter: grayscale(1);
      opacity: 0.44;
    }
    .card-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      margin-top: auto;
    }
    .custom-list-toolbar {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 7px;
      min-width: 0;
      margin: 2px 0 0;
    }
    .custom-list-toolbar[hidden] { display: none; }
    .custom-list-main {
      min-width: 0;
      flex: 1;
    }
    .custom-list-meta {
      color: #8f8f8f;
      font-size: 12px;
      line-height: 1.4;
      text-align: right;
      white-space: nowrap;
    }
    .custom-list-actions {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-wrap: wrap;
      justify-content: flex-start;
    }
    .custom-list-action {
      min-height: 30px;
      padding: 6px 9px;
      border-radius: 6px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.045);
      color: #bdb7ad;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .custom-list-action:hover {
      background: rgba(255,255,255,0.10);
      border-color: rgba(255,255,255,0.28);
      color: #fff;
    }
    .custom-list-action:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }
    .custom-list-action.primary {
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.22);
      color: #fff;
    }
    .custom-list-action.danger {
      border-color: rgba(255,255,255,0.14);
      color: #c9beb6;
      background: rgba(255,255,255,0.045);
    }
    .custom-list-action.danger:hover {
      border-color: rgba(255,99,92,0.46);
      color: #ff9b96;
      background: rgba(255,99,92,0.08);
    }
    .custom-list-actions--quiet {
      gap: 2px;
      flex-wrap: nowrap;
    }
    .custom-list-icon-btn {
      width: 30px;
      height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid transparent;
      border-radius: 6px;
      background: transparent;
      color: #918b82;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .custom-list-icon-btn svg {
      width: 15px;
      height: 15px;
      display: block;
    }
    .custom-list-icon-btn:hover {
      background: rgba(255,255,255,0.075);
      border-color: rgba(255,255,255,0.10);
      color: #f1ebe2;
    }
    .custom-list-icon-btn.danger:hover {
      background: rgba(255,99,92,0.08);
      border-color: rgba(255,99,92,0.18);
      color: #ff9b96;
    }
    .custom-list-rename {
      display: grid;
      grid-template-columns: minmax(180px, 300px) auto auto;
      gap: 6px;
      align-items: center;
    }
    .custom-list-input {
      box-sizing: border-box;
      width: 100%;
      min-width: 0;
      min-height: 34px;
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 7px;
      background: rgba(0,0,0,0.24);
      color: #fff;
      padding: 0 12px;
      font: inherit;
      font-size: 15px;
      font-weight: 700;
    }
    .custom-list-input:focus {
      outline: none;
      border-color: rgba(234,110,74,0.62);
      box-shadow: 0 0 0 3px rgba(234,110,74,0.18);
    }
    .custom-list-confirm {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 6px;
      flex-wrap: wrap;
      padding: 5px 5px 5px 9px;
      border: 1px solid rgba(255,99,92,0.16);
      border-radius: 7px;
      background: rgba(255,99,92,0.045);
    }
    .custom-list-confirm-text {
      color: #d6d1c8;
      font-size: 12px;
      line-height: 1.3;
      min-width: 0;
      flex: 0 1 auto;
      text-align: left;
    }
    .custom-list-status {
      color: #8f8f8f;
      font-size: 12px;
      line-height: 1.4;
      text-align: left;
      white-space: nowrap;
    }
    .custom-list-status.error { color: #ff7975; }
    .list-notice {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;
      width: fit-content;
      max-width: min(560px, 100%);
      margin: 0 0 14px;
      padding: 10px 12px;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 7px;
      background: rgba(255,255,255,0.06);
      color: #d8d3ca;
      font-size: 13px;
      line-height: 1.4;
    }
    .list-notice > span {
      min-width: 0;
      overflow-wrap: anywhere;
    }
    .list-notice[hidden] { display: none; }
    .list-notice.error {
      border-color: rgba(255,99,92,0.34);
      color: #ff9b96;
      background: rgba(255,99,92,0.08);
    }
    .list-notice.floating {
      position: fixed;
      left: 50%;
      right: auto;
      bottom: calc(22px + env(safe-area-inset-bottom));
      z-index: 760;
      width: fit-content;
      max-width: min(460px, calc(100vw - 28px));
      margin: 0;
      background: rgba(28,28,28,0.96);
      box-shadow: 0 18px 48px rgba(0,0,0,0.42);
      transform: translateX(-50%);
    }
    .list-notice.floating.actionable {
      top: auto;
      right: 22px;
      bottom: calc(22px + env(safe-area-inset-bottom));
      left: auto;
      max-width: min(360px, calc(100vw - 44px));
      padding: 7px 8px 7px 10px;
      border-color: rgba(234,110,74,0.16);
      background: rgba(23,21,28,0.92);
      box-shadow: 0 10px 28px rgba(0,0,0,0.36), 0 0 0 1px rgba(234,110,74,0.05);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      transform: none;
    }
    .list-notice.floating.actionable.reaction {
      left: 50%;
      right: auto;
      bottom: calc(58px + env(safe-area-inset-bottom));
      min-width: 330px;
      max-width: min(520px, calc(100vw - 48px));
      padding: 12px 13px 12px 15px;
      gap: 14px;
      color: #fff4df;
      font-size: 13px;
      font-weight: 800;
      border-color: rgba(234,110,74,0.64);
      border-radius: 14px;
      background:
        radial-gradient(circle at 16% 0%, rgba(234,110,74,0.22), transparent 34%),
        linear-gradient(135deg, rgba(49,36,20,0.99), rgba(20,22,29,0.98));
      box-shadow: 0 22px 60px rgba(0,0,0,0.58), 0 0 0 1px rgba(234,110,74,0.18), 0 0 42px rgba(234,110,74,0.2);
      transform: translateX(-50%);
    }
    .list-notice.floating.actionable.reaction::before {
      content: '';
      align-self: stretch;
      width: 4px;
      min-height: 30px;
      border-radius: 999px;
      background: linear-gradient(180deg, #f0bd62, #d88a12);
      box-shadow: 0 0 18px rgba(234,110,74,0.48);
      flex: 0 0 auto;
    }
    .list-notice-copy {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
      text-align: left;
    }
    .list-notice-question {
      color: var(--sr-amber);
      font-size: 12px;
      font-weight: 900;
      line-height: 1.1;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .list-notice-title {
      max-width: 250px;
      color: #fff7ea;
      font-size: 14px;
      font-weight: 900;
      line-height: 1.2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .list-notice.floating.top3-floating {
      top: calc(76px + env(safe-area-inset-top));
      bottom: auto;
    }
    .list-notice button {
      border: none;
      background: none;
      color: #EA6E4A;
      font: inherit;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      padding: 4px 0;
      white-space: nowrap;
    }
    .list-notice-actions {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      flex: 0 0 auto;
    }
    .list-notice .list-notice-icon-action {
      width: 30px;
      height: 30px;
      padding: 0;
      border: 1px solid rgba(255,255,255,0.13);
      border-radius: 5px;
      background: rgba(255,255,255,0.045);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #bfb8ad;
    }
    .list-notice.reaction .list-notice-icon-action {
      width: auto;
      height: auto;
    }
    .list-notice.floating.actionable.reaction .list-notice-icon-action {
      min-width: 54px;
      height: 42px;
      gap: 7px;
      padding: 0 11px;
      border-radius: 10px;
      border-color: rgba(255,255,255,0.2);
      background: rgba(255,255,255,0.09);
      color: #ffe3b7;
      font-size: 12px;
      font-weight: 900;
    }
    .list-notice.floating.actionable.reaction .list-notice-icon-action.like {
      border-color: rgba(234,110,74,0.42);
      background: rgba(234,110,74,0.14);
    }
    .list-notice.floating.actionable.reaction .list-notice-icon-action svg {
      width: 16px;
      height: 16px;
    }
    .list-notice-action-label {
      line-height: 1;
    }
    .list-notice.floating.actionable.reaction .list-notice-icon-action.skip {
      min-width: 58px;
      border-color: rgba(255,255,255,0.13);
      background: rgba(255,255,255,0.05);
      color: #cfc7ba;
    }
    .list-notice .list-notice-icon-action svg {
      width: 15px;
      height: 15px;
      display: block;
    }
    .list-notice .list-notice-icon-action.like:hover {
      border-color: rgba(234,110,74,0.48);
      color: var(--sr-amber);
      background: rgba(234,110,74,0.1);
    }
    .list-notice .list-notice-icon-action.dislike:hover {
      border-color: rgba(234,110,74,0.48);
      color: var(--sr-amber);
      background: rgba(234,110,74,0.1);
    }

    @media (max-width: 640px) {
      header {
        padding: calc(8px + env(safe-area-inset-top)) 4% 8px;
      }
      .auth-label-full { display: none; }
      .auth-label-short { display: inline; }
      .appbar-top {
        margin-bottom: 7px;
      }
      .appbar-tagline {
        display: none;
      }
      .appbar-search-row {
        margin-bottom: 0;
      }
      .appbar-toolbar {
        display: none;
      }
      .search-input {
        min-height: 42px;
      }
      main {
        padding-bottom: calc(94px + env(safe-area-inset-bottom));
      }
      .quick-bar {
        display: grid;
      }
      .more-sheet {
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        max-height: min(78vh, 520px);
        border-radius: 22px 22px 0 0;
        border-bottom: 0;
        box-shadow: 0 -18px 52px rgba(0,0,0,0.58);
        transform: translateY(100%);
      }
      .more-sheet.open {
        transform: translateY(0);
      }
      .more-sheet-body {
        max-height: calc(min(78vh, 520px) - 76px);
      }
      input,
      select,
      textarea,
      .search-input,
      .ctrl-select,
      .app-select-trigger,
      .login-input,
      .onboarding-select {
        font-size: 16px;
      }
      .controls { display: none !important; }
      #btnFiltersMobile { display: flex; }
      .discovery-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        column-gap: 10px;
        margin-bottom: 14px;
      }
      .discovery-main {
        display: contents;
      }
      .discovery-kicker {
        grid-column: 1 / -1;
        grid-row: 1;
        font-size: 10px;
        line-height: 1.2;
        margin-bottom: 3px;
      }
      .discovery-title-row {
        grid-column: 1;
        grid-row: 2;
        gap: 6px;
        margin-bottom: 0;
      }
      .discovery-title {
        font-size: 31px;
        min-width: 0;
      }
      .discovery-sub {
        grid-column: 1 / -1;
        grid-row: 3;
        font-size: 13px;
        display: block;
        margin-top: 7px;
      }
      .saved-view-bar {
        align-items: center;
        flex-direction: row;
        gap: 6px;
        margin: -1px 0 10px;
        max-width: 100%;
        overflow: hidden;
        position: sticky;
        top: calc(96px + env(safe-area-inset-top));
        z-index: 6;
        padding: 2px 0;
        background: linear-gradient(180deg, rgba(13,11,19,0.94), rgba(13,11,19,0.72));
        backdrop-filter: blur(12px);
      }
      .saved-view-bar-action {
        width: auto;
        min-height: 34px;
        max-width: 100%;
      }
      .collection-controls {
        margin: 8px 0 18px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        width: 100%;
        position: static;
        padding: 0;
        background: transparent;
        backdrop-filter: none;
      }
      .collection-controls > .saved-view-bar-action {
        grid-column: 1;
        justify-self: start;
        min-height: 34px;
        max-width: 100%;
      }
      .collection-inline-control {
        grid-column: 1;
        width: 100%;
      }
      .collection-inline-control .app-select {
        width: 100%;
        min-width: 0;
      }
      .collection-inline-control .app-select-label {
        display: none;
      }
      .collection-inline-control .app-select-trigger {
        min-height: 36px;
        padding: 7px 9px 7px 11px;
      }
      .collection-inline-control .app-select-menu {
        min-width: 100%;
        max-height: min(330px, calc(100vh - 230px));
      }
      .collection-view-control {
        display: none;
      }
      .collection-action-mobile {
        display: inline-flex;
        grid-column: 2;
        align-items: center;
        justify-content: center;
        min-height: 36px;
        max-width: 150px;
        border: 1px solid rgba(255,255,255,0.14);
        border-radius: var(--sr-radius-md);
        background: rgba(255,255,255,0.045);
        color: var(--sr-text);
        padding: 0 12px;
        font-size: 12px;
        font-weight: 850;
        white-space: nowrap;
        cursor: pointer;
      }
      .collection-action-mobile:hover,
      .collection-action-mobile:focus-visible {
        border-color: rgba(234,110,74,0.38);
        background: rgba(255,255,255,0.07);
        color: var(--sr-text);
        outline: none;
      }
      .collection-action-mobile.showing-all {
        border-color: rgba(255,255,255,0.18);
        background: rgba(255,255,255,0.055);
        color: var(--sr-text);
      }
      .collection-controls .collection-sort-action {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 34px;
        padding: 0 11px;
        font-size: 12px;
      }
      .collection-controls .collection-sort-action[hidden] {
        display: none !important;
      }
      body.collection-mode .discovery-head {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        row-gap: 0;
        margin-bottom: 10px;
      }
      body.collection-mode .discovery-sub {
        margin-top: 7px;
      }
      body.collection-mode .discovery-side {
        grid-column: 1;
        grid-row: 4;
        width: 100%;
        min-width: 0;
        margin-left: 0;
        align-self: start;
        align-items: flex-start;
        gap: 6px;
      }
      body.collection-mode .discovery-stat {
        max-width: 100%;
        margin: 4px 0 0;
        text-align: left;
        white-space: normal;
      }
      .discovery-stat {
        display: block;
        margin: 0;
        text-align: right;
        white-space: nowrap;
        line-height: 1.2;
      }
      .discovery-side {
        grid-column: 2;
        grid-row: 2;
        align-self: end;
        gap: 5px;
      }
      .rank-sort {
        min-height: 28px;
        padding: 0 9px;
        font-size: 11px;
      }
      .discovery-stat::before {
        content: '';
      }
      .discovery-stat:empty::before { content: ''; }
      .custom-list-toolbar {
        align-items: center;
        flex-direction: row;
        gap: 6px;
        margin: 1px 0 0;
      }
      .custom-list-actions {
        display: flex;
        justify-content: flex-start;
      }
      .custom-list-action {
        width: auto;
        min-height: 34px;
      }
      .custom-list-icon-btn {
        width: 32px;
        height: 32px;
      }
      .custom-list-toolbar[data-mode="rename"],
      .custom-list-toolbar[data-mode="delete"] {
        flex-basis: 100%;
        width: 100%;
      }
      .custom-list-rename {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
      }
      .custom-list-confirm {
        align-items: stretch;
        flex-direction: column;
      }
      .custom-list-confirm .custom-list-actions {
        width: 100%;
      }
      .list-notice {
        align-items: flex-start;
        flex-direction: column;
      }
      .list-notice.floating {
        align-items: center;
        flex-direction: row;
      }
      .list-notice.floating.actionable {
        right: 14px;
        bottom: calc(94px + env(safe-area-inset-bottom));
        left: 14px;
        width: auto;
        max-width: none;
      }
      .list-notice.floating.actionable.reaction {
        right: 14px;
        bottom: calc(112px + env(safe-area-inset-bottom));
        left: 14px;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        min-width: 0;
        max-width: none;
        padding: 13px;
        gap: 10px;
        border-radius: 18px;
        transform: none;
      }
      .list-notice.floating.actionable.reaction::before {
        display: none;
      }
      .list-notice.floating.actionable.reaction .list-notice-title {
        max-width: none;
        font-size: 15px;
      }
      .list-notice.floating.actionable.reaction .list-notice-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        gap: 8px;
      }
      .list-notice.floating.actionable.reaction .list-notice-icon-action {
        width: 100%;
        min-width: 0;
        height: 46px;
        padding: 0 8px;
      }
      .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }
      .card:hover {
        transform: none;
        box-shadow: none;
      }
      .card-body { padding: 9px; }
      .card-row { gap: 6px; }
      .sr-score {
        padding: 3px 5px;
        font-size: 11px;
      }
      .imdb-score { font-size: 11px; }
      .card-reason {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        min-height: 30px;
      }
      .filter-sheet {
        max-height: calc(100dvh - 8px);
        border-radius: 14px 14px 0 0;
      }
      .filter-sheet .app-select-trigger {
        min-height: 44px;
        border-radius: 8px;
        background: rgba(255,255,255,0.065);
        padding: 10px 12px;
        font-size: 13px;
        font-weight: 700;
      }
      .filter-sheet .mobile-select-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px 10px;
      }
      .filter-sheet .app-select[data-select-id="m-countryFilter"],
      .filter-sheet .app-select[data-select-id="m-modeFilter"],
      .filter-sheet .app-select[data-select-id="m-genreFilter"],
      .filter-sheet .app-select[data-select-id="m-seenFilter"] {
        display: none;
      }
      .mobile-select-option {
        min-height: 34px;
        display: flex;
        align-items: center;
        gap: 8px;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #d7d7d7;
        padding: 6px 0;
        font-size: 13px;
        font-weight: 650;
        line-height: 1.25;
        text-align: left;
      }
      .mobile-select-option::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: transparent;
        flex: 0 0 auto;
      }
      .mobile-select-option.active {
        background: transparent;
        color: #f1c36f;
        box-shadow: none;
      }
      .mobile-select-option.active::before {
        background: #EA6E4A;
      }
      .filter-sheet .app-select.open .app-select-trigger {
        background: rgba(234,110,74,0.12);
      }
      .filter-sheet .clear-multi-btn {
        width: auto;
        height: 28px;
        flex-basis: auto;
        padding: 0 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 800;
      }
      .filter-sheet-hd,
      .filter-sheet-body,
      .filter-sheet-ft {
        padding-left: 16px;
        padding-right: 16px;
      }
      .filter-section { padding: 16px 0; }
      .filter-section-quick { padding-top: 10px; }
      .filter-section-setup { padding: 10px 0; }
      .filter-setup-title {
        padding-top: 10px;
        margin-bottom: 0;
      }
      .filter-sheet .provider-toggle-group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px 10px;
      }
      .filter-sheet .provider-toggle {
        width: 100%;
        min-width: 0;
        display: flex;
        align-items: center;
        padding: 6px 0;
        line-height: 1.25;
        color: #d7d7d7;
        background: transparent;
      }
      .filter-sheet .provider-toggle.active {
        color: #f1c36f;
        background: transparent;
      }
      .filter-sheet .provider-toggle::before {
        content: '';
        width: 6px;
        height: 6px;
        flex: 0 0 6px;
        border-radius: 999px;
        margin-right: 8px;
        background: transparent;
      }
      .filter-sheet #m-rentBuyFilter,
      .filter-sheet #m-langToggle {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .filter-sheet .multi-select-head { margin-bottom: 8px; }
      .more-action-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 8px;
      }
      .more-action-grid .more-action {
        min-width: 0;
        min-height: 38px;
        padding: 0 8px;
        font-size: 13px;
        line-height: 1.15;
      }
      .more-action-grid .more-action-text {
        min-width: 0;
      }
      .more-action-grid .more-action-count {
        font-size: 11px;
      }
    }

    /* StreamRanker brand skin: visual-only overrides for the existing layout */
    body {
      background:
        radial-gradient(ellipse 900px 520px at 50% -160px, rgba(234,110,74,0.07), transparent 68%),
        linear-gradient(180deg, var(--sr-bg) 0%, var(--sr-bg-deep) 100%);
      color: var(--sr-text);
      font-family: var(--sr-font-ui);
    }

    header {
      background:
        linear-gradient(180deg, rgba(20,26,31,0.97) 0%, rgba(20,26,31,0.85) 78%, rgba(20,26,31,0) 100%);
      border-bottom: 1px solid rgba(247,239,226,0.08);
      box-shadow: var(--sr-shadow-1);
    }

    .logo-link {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      min-width: 0;
    }
    .logo-link::before {
      content: "";
      width: 42px;
      height: 42px;
      flex: 0 0 42px;
      border-radius: 10px;
      background: url("header-mark.svg") center / cover no-repeat;
      box-shadow: 0 8px 22px rgba(0,0,0,0.42);
    }
    .logo {
      display: inline-flex;
      flex-direction: column;
      font-family: var(--sr-font-ui);
      font-size: 15px;
      font-weight: 800;
      line-height: 0.88;
      letter-spacing: 0;
      color: var(--sr-text);
      text-transform: uppercase;
    }
    .logo span:first-child { color: var(--sr-text); }
    .logo span:last-child { color: var(--sr-amber); }
    .onboarding-logo {
      display: inline-flex;
      flex-direction: column;
      font-family: var(--sr-font-ui);
      font-size: 46px;
      font-weight: 800;
      line-height: 0.88;
      color: var(--sr-text);
      text-transform: uppercase;
      letter-spacing: 0;
      overflow-wrap: anywhere;
    }
    .onboarding-logo span:first-child { color: var(--sr-text); }
    .onboarding-logo span:last-child { color: var(--sr-amber); }

    .appbar-tagline,
    .discovery-sub,
    .card-reason,
    .loading-status,
    .empty,
    .modal-meta,
    .modal-original,
    .modal-tagline,
    .modal-overview,
    .modal-crew,
    .modal-rank-copy {
      color: var(--sr-text-muted);
    }

    .search-input,
    .search-box,
    .ctrl-select,
    .app-select-trigger,
    .login-input,
    .onboarding-select {
      background: var(--sr-surface-2);
      border: var(--sr-border);
      color: var(--sr-text);
      border-radius: var(--sr-radius-md);
      font-family: var(--sr-font-ui);
    }
    .search-input::placeholder,
    .search-box::placeholder,
    .login-input::placeholder {
      color: color-mix(in srgb, var(--sr-text-muted) 78%, transparent);
    }
    .search-input:focus,
    .search-box:focus,
    .ctrl-select:focus,
    .app-select-trigger:focus,
    .login-input:focus,
    .onboarding-select:focus {
      border-color: var(--sr-amber);
      box-shadow: var(--sr-focus-ring);
    }
    .search-icon,
    .search-clear-btn {
      color: var(--sr-text-muted);
    }

    .btn-auth.signin,
    .btn-sheet-apply,
    .btn-login-primary,
    .btn-more,
    .onboarding-cta {
      background: var(--sr-amber);
      color: var(--sr-text-on-amber);
      border-color: var(--sr-amber);
      border-radius: var(--sr-radius-md);
      font-family: var(--sr-font-ui);
      font-weight: 700;
    }
    .btn-auth.signin:hover,
    .btn-sheet-apply:hover,
    .btn-login-primary:hover,
    .btn-more:hover:not(:disabled),
    .onboarding-cta:hover:not(:disabled) {
      background: var(--sr-gleam);
      color: var(--sr-text-on-amber);
      border-color: var(--sr-gleam);
    }
    .btn-signin {
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.2);
      color: #ccc;
      border-radius: var(--sr-radius-md);
      font-family: var(--sr-font-ui);
      font-weight: 700;
    }
    .btn-signin:hover {
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.4);
      color: #fff;
    }

    .btn-icon,
    .btn-auth,
    .btn-account,
    .btn-refresh,
    .btn-top,
    .btn-seen,
    .btn-watchlist,
    .btn-hide,
    .clear-multi-btn,
    .btn-sheet-reset,
    .modal-btn,
    .onboarding-provider,
    .mobile-select-option {
      border-radius: var(--sr-radius-md);
      font-family: var(--sr-font-ui);
    }
    .btn-icon,
    .btn-auth,
    .btn-account,
    .btn-refresh,
    .btn-top,
    .btn-seen,
    .btn-watchlist,
    .btn-hide {
      background: var(--sr-surface-2);
      border: var(--sr-border);
      color: var(--sr-text-muted);
    }
    .btn-icon:hover,
    .btn-auth:hover,
    .btn-refresh:hover,
    .btn-top:hover,
    .btn-watchlist:hover,
    .btn-hide:hover {
      border-color: var(--sr-amber);
      color: var(--sr-text);
      background: color-mix(in srgb, var(--sr-surface-2) 84%, var(--sr-amber));
    }
    .btn-icon.active,
    .btn-watchlist.marked,
    .btn-hide.marked,
    .provider-toggle.active,
    .mobile-select-option.active,
    .onboarding-provider.active {
      color: var(--sr-amber);
      border-color: rgba(234,110,74,0.52);
      background: rgba(234,110,74,0.13);
    }
    .btn-seen.marked {
      color: #4caf50;
      border-color: rgba(76,175,80,0.58);
      background: rgba(76,175,80,0.10);
    }
    .btn-seen.needs-update {
      color: var(--sr-text-muted);
      border-color: var(--sr-line);
      background: var(--sr-surface-2);
    }
    .btn-hide.marked {
      color: var(--sr-danger);
      border-color: rgba(234,110,74,0.52);
      background: var(--sr-danger-bg);
    }

    .onboarding-card {
      background: linear-gradient(180deg, var(--sr-cream-soft) 0%, var(--sr-cream) 100%);
      border: 1px solid rgba(30,37,46,0.16);
      border-radius: var(--sr-radius-xl);
      box-shadow: var(--sr-shadow-3);
      color: var(--sr-ink);
    }
    .tune-menu-panel,
    .filter-sheet .app-select-menu,
    .filter-sheet,
    .login-modal-box,
    .delete-modal-box,
    .list-modal-box {
      background: var(--sr-card);
      border: var(--sr-border);
      border-radius: var(--sr-radius-xl);
      box-shadow: var(--sr-shadow-3);
      color: var(--sr-text);
    }
    .modal-box {
      background: var(--sr-card);
      border: var(--sr-border);
      border-radius: var(--sr-radius-xl);
      box-shadow: var(--sr-shadow-3);
      color: var(--sr-text);
    }
    .onboarding-card {
      padding: 28px;
    }
    .onboarding-features {
      background: rgba(30,37,46,0.07);
      border: 1px solid rgba(30,37,46,0.12);
      border-radius: var(--sr-radius-lg);
      color: var(--sr-ink);
    }
    .filter-sheet {
      border-radius: var(--sr-radius-xl) var(--sr-radius-xl) 0 0;
    }

    .onboarding-card,
    .onboarding-card * {
      --sr-text: var(--sr-ink);
      --sr-text-muted: #4D6A6C;
      --sr-surface: rgba(30,37,46,0.06);
      --sr-surface-2: rgba(30,37,46,0.09);
      --sr-line: rgba(30,37,46,0.16);
      --sr-border: 1px solid rgba(30,37,46,0.16);
    }

    .account-menu,
    .tune-menu-panel,
    .filter-sheet .app-select-menu,
    .filter-sheet,
    .login-modal-box,
    .delete-modal-box,
    .list-modal-box,
    .onboarding-card {
      color: var(--sr-text);
    }

    .account-menu-email,
    .filter-sheet-title small,
    .filter-section-summary,
    .filter-help,
    .filter-group label,
    .app-select-label,
    .app-select-group,
    .login-sub,
    .login-success-sub,
    .login-back,
    .delete-fallback,
    .delete-copy-status,
    .signout-account,
    .list-modal-sub,
    .list-option-count,
    .list-empty {
      color: var(--sr-text-muted);
    }

    .menu-item,
    .filter-sheet-title span,
    .filter-section-toggle,
    .filter-section:not(.collapsed) .filter-section-toggle,
    .app-select-option,
    .login-title,
    .list-modal-title,
    .list-option,
    .list-new-input {
      color: var(--sr-text);
    }

    .menu-item:hover:not(:disabled),
    .app-select-option:hover,
    .app-select-option.active {
      background: rgba(234,110,74,0.13);
      color: var(--sr-text);
    }

    .menu-divider {
      background: var(--sr-line);
    }

    .login-input,
    .list-new-input {
      background: var(--sr-surface);
      border: var(--sr-border);
      color: var(--sr-text);
    }

    .login-input::placeholder,
    .list-new-input::placeholder {
      color: color-mix(in srgb, var(--sr-text-muted) 78%, transparent);
    }

    .signout-account,
    .list-option {
      background: var(--sr-surface);
      border: var(--sr-border);
    }

    .filter-sheet-hd,
    .filter-sheet-ft {
      background: rgba(255,255,255,0.035);
      border-color: var(--sr-line);
    }

    .filter-section {
      border-color: var(--sr-line);
    }

    .filter-sheet .app-select-trigger,
    .filter-sheet .clear-multi-btn,
    .filter-sheet .provider-toggle,
    .btn-login-secondary,
    .list-modal-box .modal-btn-share,
    .list-modal-box .modal-btn-list,
    .filter-sheet .btn-sheet-reset {
      background: var(--sr-surface);
      border: var(--sr-border);
      color: var(--sr-text);
    }

    .btn-login-secondary:hover,
    .list-modal-box .modal-btn-share:hover,
    .filter-sheet .btn-sheet-reset:hover {
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.26);
      color: var(--sr-text);
    }

    .list-modal-box .modal-btn-list {
      background: var(--sr-amber);
      border-color: var(--sr-amber);
      color: var(--sr-text-on-amber);
    }

    .list-modal-box .modal-btn-list:hover {
      background: var(--sr-gold);
      border-color: var(--sr-gold);
      color: var(--sr-text-on-amber);
    }

    .list-modal-box .list-create-btn:disabled {
      background: var(--sr-surface);
      border-color: var(--sr-line);
      color: var(--sr-text-muted);
      opacity: 0.72;
      cursor: not-allowed;
    }

    .list-modal-box .list-create-btn:disabled:hover {
      background: var(--sr-surface);
      border-color: var(--sr-line);
      color: var(--sr-text-muted);
    }

    .list-modal-box .list-view-btn {
      background: var(--sr-surface);
      border-color: var(--sr-line);
      color: var(--sr-text);
    }

    .login-modal-box .modal-close,
    .delete-modal-box .modal-close,
    .list-modal-box .modal-close,
    .filter-sheet-close {
      background: rgba(255,255,255,0.08);
      color: var(--sr-text-muted);
    }

    .login-modal-box .modal-close:hover,
    .delete-modal-box .modal-close:hover,
    .list-modal-box .modal-close:hover,
    .filter-sheet-close:hover {
      background: rgba(255,255,255,0.16);
      color: var(--sr-text);
    }

    .onboarding-card .onboarding-sub,
    .onboarding-card .onboarding-feature-sub,
    .onboarding-card .onboarding-hint,
    .onboarding-card .language-hint {
      color: var(--sr-text-muted);
    }

    .onboarding-card .onboarding-feature-headline,
    .onboarding-card .onboarding-provider,
    .onboarding-card .onboarding-select {
      color: var(--sr-text);
    }

    .onboarding-card .onboarding-label,
    .onboarding-card .onboarding-setup-divider {
      color: var(--sr-text-muted);
      letter-spacing: 0.12em;
    }

    .onboarding-card .onboarding-feature-icon,
    .onboarding-card .onboarding-logo span:last-child {
      color: var(--sr-amber);
    }

    .onboarding-card .onboarding-features {
      background: rgba(30,37,46,0.055);
      border-color: rgba(30,37,46,0.13);
    }

    .onboarding-card .onboarding-provider {
      background: rgba(30,37,46,0.055);
      border: 1px solid rgba(30,37,46,0.18);
      border-radius: var(--sr-radius-md);
    }

    .onboarding-card .onboarding-provider:hover {
      background: rgba(30,37,46,0.09);
      border-color: rgba(30,37,46,0.28);
      color: var(--sr-text);
    }

    .onboarding-card .onboarding-provider.active {
      background: var(--sr-bg);
      border-color: var(--sr-bg);
      color: var(--sr-cream);
      box-shadow: inset 0 -2px 0 rgba(234,110,74,0.85), 0 8px 20px rgba(30,37,46,0.14);
    }

    .onboarding-card .onboarding-cta {
      color: var(--sr-text-on-amber);
    }

    .onboarding-card .onboarding-cta:disabled {
      background: rgba(30,37,46,0.08);
      border: 1px solid rgba(30,37,46,0.14);
      color: var(--sr-text-muted);
      opacity: 1;
    }

    .filter-sheet .filter-section-title,
    .filter-sheet .filter-section-label,
    .filter-sheet .multi-select-head label,
    .filter-sheet .filter-setup-title {
      color: var(--sr-text);
      letter-spacing: 0.12em;
    }

    .filter-sheet .mobile-select-option,
    .filter-sheet .provider-toggle {
      color: var(--sr-text);
      border-radius: var(--sr-radius-sm);
      padding-left: 14px;
      padding-right: 14px;
    }

    .filter-sheet .mobile-select-option:hover,
    .filter-sheet .provider-toggle:hover:not(.active) {
      background: rgba(255,255,255,0.06);
      color: var(--sr-text);
    }

    .filter-sheet .mobile-select-option.active,
    .filter-sheet .provider-toggle.active {
      background: rgba(255,255,255,0.08);
      color: var(--sr-text);
      font-weight: 800;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
    }

    .filter-sheet .mobile-select-option::before,
    .filter-sheet .provider-toggle::before {
      border: 1px solid rgba(255,255,255,0.28);
      margin-left: 0;
    }

    .filter-sheet .mobile-select-option.active::before,
    .filter-sheet .provider-toggle.active::before {
      background: var(--sr-amber);
      border-color: var(--sr-amber);
      box-shadow: 0 0 0 2px rgba(234,110,74,0.16);
    }

    .filter-sheet-title,
    .discovery-title,
    .modal-title,
    .onboarding-title,
    .card-title {
      font-family: var(--sr-font-display);
      letter-spacing: 0;
      color: var(--sr-text);
    }
    .discovery-title {
      font-weight: 900;
      line-height: 1.08;
    }
    .card-title {
      font-weight: 600;
      font-size: 15px;
    }
    .discovery-kicker,
    .filter-section-label,
    .multi-select-title,
    .multi-select-head label,
    .filter-setup-title,
    .modal-section-label,
    .modal-evidence-label,
    .modal-sr-label,
    .onboarding-label,
    .onboarding-setup-divider {
      color: var(--sr-teal-soft);
      letter-spacing: 0.12em;
    }

    .segmented {
      background: var(--sr-surface);
      border: var(--sr-border);
      border-radius: var(--sr-radius-md);
    }
    .segmented .media-btn {
      color: var(--sr-text-muted);
      border-radius: 11px;
      font-family: var(--sr-font-ui);
    }
    .segmented .media-btn.active {
      background: rgba(255,255,255,0.14);
      color: var(--sr-cream);
      box-shadow: none;
    }

    .provider-toggle,
    .controls .app-select-trigger,
    .tune-menu-trigger {
      color: var(--sr-text-muted);
      border-radius: var(--sr-radius-md);
    }
    .provider-toggle.active::before,
    .mobile-select-option.active::before {
      color: var(--sr-amber);
      background: var(--sr-amber);
    }

    .card {
      background: var(--sr-card);
      border: var(--sr-border);
      border-radius: var(--sr-radius-lg);
      box-shadow: var(--sr-shadow-1);
      transition: transform 0.18s var(--sr-ease), border-color 0.18s var(--sr-ease), box-shadow 0.18s var(--sr-ease);
    }
    .card:hover {
      transform: translateY(-3px);
      border-color: rgba(234,110,74,0.58);
      box-shadow: 0 16px 34px rgba(4,18,20,0.44);
    }
    .card-poster-wrap,
    .card.skeleton .card-poster-wrap,
    .card.skeleton .skeleton-line {
      background: var(--sr-surface-2);
    }
    .card-poster-fallback,
    .card-year,
    .card-genre,
    .card-language {
      color: var(--sr-text-muted);
    }
    .sr-score,
    .modal-sr-score {
      background: rgba(234,110,74,0.14);
      border-color: rgba(234,110,74,0.42);
      color: var(--sr-text);
      border-radius: var(--sr-radius-md);
    }
    .sr-score {
      background: rgba(234,110,74,0.08);
      border-color: rgba(234,110,74,0.36);
      color: var(--sr-amber);
      font-weight: 900;
    }
    .sr-score--medium {
      color: var(--sr-text-muted);
    }
    .sr-score--low {
      color: var(--sr-text-muted);
      background: rgba(234,110,74,0.06);
      border-color: rgba(234,110,74,0.24);
    }
    .card-rank {
      background: rgba(15,18,22,0.78);
      border: 1px solid rgba(247,239,226,0.16);
      color: var(--sr-cream);
      border-radius: var(--sr-radius-md);
    }
    .sr-score,
    .modal-sr-value {
      font-family: var(--sr-font-display);
      font-variant-numeric: tabular-nums;
    }
    .sr-score span,
    .modal-sr-value {
      color: var(--sr-amber);
    }
    .imdb-score,
    .modal-rating {
      color: var(--sr-text-muted);
    }
    .provider-badge-text {
      background: var(--sr-surface-2);
      border: var(--sr-border);
      color: var(--sr-cream);
    }
    .card.seen .card-poster-wrap::after {
      background: rgba(11,18,25,0.46);
      color: transparent;
    }
    .card.hidden .card-poster-wrap::after {
      background: rgba(11,18,25,0.76);
      color: var(--sr-danger);
    }

    .modal-overlay,
    .onboarding-overlay {
      background: rgba(11,18,25,0.88);
      backdrop-filter: blur(8px);
    }
    .modal-rank-panel,
    .modal-provider-block,
    .modal-evidence {
      background: var(--sr-surface);
      border: var(--sr-border);
      border-radius: var(--sr-radius-lg);
    }
    .modal-poster-col img {
      border-radius: var(--sr-radius-sm);
    }
    .modal-close,
    .filter-sheet-close {
      background: rgba(255,255,255,0.08);
      color: var(--sr-text-muted);
    }

    .error-box {
      background: var(--sr-danger-bg);
      border-color: rgba(234,110,74,0.5);
      color: var(--sr-danger);
    }

    :where(a, button, input, select, textarea, [tabindex]):focus-visible {
      outline: none;
      box-shadow: var(--sr-focus-ring);
    }

    @media (max-width: 640px) {
      .logo-link::before {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
      }
      .logo { font-size: 12px; }
      .onboarding-logo { font-size: 38px; }
      .card:hover {
        transform: none;
        border-color: var(--sr-line);
        box-shadow: var(--sr-shadow-1);
      }
    }

    @media (hover: none), (pointer: coarse) {
      .btn-seen:hover,
      .btn-watchlist:hover,
      .btn-like:hover,
      .btn-dislike:hover,
      .btn-hide:hover {
        border: var(--sr-border);
        color: var(--sr-text-muted);
        background: var(--sr-surface-2);
      }
      .btn-seen.marked {
        color: #4caf50;
        border-color: rgba(76,175,80,0.58);
        background: rgba(76,175,80,0.10);
      }
      .btn-watchlist.marked {
        color: var(--sr-amber);
        border-color: rgba(234,110,74,0.52);
        background: rgba(234,110,74,0.13);
      }
      .btn-like.marked,
      .btn-dislike.marked {
        color: var(--sr-amber);
        border-color: rgba(234,110,74,0.52);
        background: rgba(234,110,74,0.13);
      }
      .btn-hide.marked {
        color: var(--sr-danger);
        border-color: rgba(234,110,74,0.52);
        background: var(--sr-danger-bg);
      }
      .btn-seen.needs-update {
        color: var(--sr-text-muted);
        border-color: var(--sr-line);
        background: var(--sr-surface-2);
      }
    }

    /* Hide deprecated layout elements */
    .header-top { display: none !important; }
    .mobile-search-row { display: none !important; }
    .note-bar { display: none !important; }
    .cache-bar { display: none !important; }
    .auth-bar { display: none !important; }

    /* Account chip stays on top-right */
    .account-wrap { margin-left: 0; }

    /* ── Unified card surface color (#1D262D via --sr-card) ── */
    .search-input,
    .btn-watchlist,
    .btn-account {
      background: var(--sr-card);
    }
    .list-notice.floating,
    .list-notice.floating.actionable {
      background: var(--sr-card);
    }