:root {
      --bg: oklch(0.96419 0.01308 var(--primary-hue));
      --surface: oklch(1.00000 0.00450 var(--primary-hue));
      --surface-soft: oklch(0.97753 0.00792 var(--primary-hue));
      --text: oklch(0.23009 0.04314 var(--primary-hue));
      --muted: oklch(0.50775 0.04812 var(--primary-hue));
      --line: oklch(0.83513 0.03540 var(--primary-hue));
      --mint: oklch(0.84864 0.11730 var(--primary-hue));
      --shadow: 0 4px 0 oklch(0.28889 0.07215 var(--primary-hue) / 0.055);
      --radius-xl: 14px;
      --radius-lg: 12px;
      --radius-md: 8px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--text);
      background: var(--bg);
      font: 15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    button, input, textarea, select { font: inherit; }
    button, a { -webkit-tap-highlight-color: oklch(0.50000 0.00450 var(--primary-hue) / 0); }
    a { color: inherit; }
    button { cursor: pointer; }
    button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
      outline: 3px solid oklch(0.75755 0.13051 var(--primary-hue));
      outline-offset: 3px;
    }

    .shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
    .topbar {
      position: sticky; top: 0; z-index: 20;
      background: oklch(0.97651 0.00542 var(--primary-hue) / 0.9);
      border-bottom: 1px solid oklch(0.91752 0.01503 var(--primary-hue) / 0.85);
      backdrop-filter: blur(16px);
    }
    .topbar-inner { display: flex; align-items: center; gap: 24px; min-height: 76px; }
    .brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
    .brand-mark {
      width: 39px; height: 39px; border-radius: 13px; display: grid; place-items: center;
      color: oklch(0.99000 0.00450 var(--primary-hue)); background: var(--primary); box-shadow: 0 7px 17px oklch(0.51787 0.21010 var(--primary-hue) / 0.22);
    }
    .brand-mark svg { width: 22px; height: 22px; }
    .brand-name { font-size: 20px; font-weight: 850; letter-spacing: -.8px; }
    .brand-name span { color: var(--primary); }
    .search-wrap { position: relative; flex: 1; max-width: 520px; margin: 0 auto; }
    .search-wrap svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; color: oklch(0.63320 0.02879 var(--primary-hue)); pointer-events: none; }
    .search-wrap input {
      width: 100%; height: 45px; border: 1px solid var(--line); border-radius: 15px; background: oklch(1.00000 0.00450 var(--primary-hue));
      padding: 0 44px; color: var(--text); outline: none; transition: border .2s, box-shadow .2s;
    }
    .search-wrap input:focus { border-color: oklch(0.79144 0.11121 var(--primary-hue)); box-shadow: 0 0 0 4px oklch(0.51787 0.21010 var(--primary-hue) / 0.08); }
    .search-shortcut { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: oklch(0.63320 0.02879 var(--primary-hue)); font-size: 11px; border: 1px solid var(--line); border-radius: 6px; padding: 2px 5px; }
    .top-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--muted); font-weight: 650; white-space: nowrap; }
    .top-link:hover { color: var(--primary); }
    .top-link svg { width: 18px; }

    main { padding: 28px 0 64px; }
    .hero {
      position: relative; overflow: hidden; min-height: 280px; padding: 38px 44px; border-radius: 30px;
      color: oklch(1.00000 0.00450 var(--primary-hue)); background: linear-gradient(115deg, oklch(0.30143 0.09999 var(--primary-hue)) 0%, oklch(0.47552 0.20260 var(--primary-hue)) 54%, oklch(0.61101 0.19139 var(--primary-hue)) 100%);
      display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr); align-items: center; gap: 20px;
      box-shadow: 0 20px 50px oklch(0.43227 0.20296 var(--primary-hue) / 0.18);
    }
    .hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
    .hero::before { width: 290px; height: 290px; right: 8%; top: -170px; background: oklch(1.00000 0.00450 var(--primary-hue) / 0.09); }
    .hero::after { width: 330px; height: 330px; right: -65px; bottom: -245px; border: 1px solid oklch(1.00000 0.00450 var(--primary-hue) / 0.22); box-shadow: 0 0 0 24px oklch(1.00000 0.00450 var(--primary-hue) / 0.04), 0 0 0 50px oklch(1.00000 0.00450 var(--primary-hue) / 0.03); }
    .hero-content, .hero-art { position: relative; z-index: 1; }
    .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 15px; font-size: 12px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: oklch(0.88687 0.05890 var(--primary-hue)); }
    .eyebrow .dot { width: 7px; height: 7px; background: oklch(0.92389 0.05758 var(--primary-hue)); border-radius: 50%; box-shadow: 0 0 0 5px oklch(0.92389 0.05758 var(--primary-hue) / 0.12); }
    .hero h1 { max-width: 600px; margin: 0; font-size: clamp(32px, 4.2vw, 49px); line-height: 1.05; letter-spacing: -2px; }
    .hero p { max-width: 520px; margin: 17px 0 24px; color: oklch(0.91171 0.04207 var(--primary-hue)); font-size: 16px; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 12px; padding: 12px 17px; font-weight: 750; text-decoration: none; transition: transform .15s, background .15s, box-shadow .15s; }
    .btn:hover { transform: translateY(-1px); }
    .btn svg { width: 17px; height: 17px; }
    .btn-light { background: oklch(0.99000 0.00450 var(--primary-hue)); color: oklch(0.34379 0.14195 var(--primary-hue)); box-shadow: 0 5px 16px oklch(0.22557 0.10522 var(--primary-hue) / 0.13); }
    .btn-light:hover { background: oklch(0.96644 0.01739 var(--primary-hue)); }
    .btn-ghost { color: oklch(0.99000 0.00450 var(--primary-hue)); border: 1px solid oklch(1.00000 0.00450 var(--primary-hue) / 0.35); background: oklch(1.00000 0.00450 var(--primary-hue) / 0.08); }
    .btn-ghost:hover { background: oklch(1.00000 0.00450 var(--primary-hue) / 0.15); }
    .hero-art { min-height: 180px; display: grid; place-items: center; }
    .app-stack { position: relative; width: 245px; height: 190px; transform: rotate(-5deg); }
    .float-card { position: absolute; border: 1px solid oklch(1.00000 0.00450 var(--primary-hue) / 0.6); background: oklch(1.00000 0.00450 var(--primary-hue) / 0.93); border-radius: 23px; box-shadow: 0 20px 40px oklch(0.23759 0.10403 var(--primary-hue) / 0.25); }
    .float-card.main { width: 144px; height: 144px; left: 48px; top: 17px; display: grid; place-items: center; transform: rotate(7deg); }
    .float-card.side { width: 87px; height: 87px; left: 147px; top: 81px; display: grid; place-items: center; transform: rotate(16deg); }
    .float-card.small { width: 72px; height: 72px; left: 8px; top: 104px; display: grid; place-items: center; transform: rotate(-17deg); }
    .mini-logo { width: 80px; height: 80px; border-radius: 25px; display: grid; place-items: center; color: oklch(0.99000 0.00450 var(--primary-hue)); background: linear-gradient(140deg, oklch(0.64449 0.19673 var(--primary-hue)), oklch(0.46926 0.20348 var(--primary-hue))); }
    .mini-logo svg { width: 41px; height: 41px; }
    .side-logo { width: 45px; height: 45px; border-radius: 15px; display: grid; place-items: center; color: oklch(0.28668 0.07459 var(--primary-hue)); background: oklch(0.94595 0.04697 var(--primary-hue)); font-size: 27px; }
    .small-logo { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: oklch(0.99000 0.00450 var(--primary-hue)); background: oklch(0.83328 0.12778 var(--primary-hue)); font-size: 24px; }

    .section-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin: 38px 0 18px; }
    .section-head h2 { margin: 0; font-size: 25px; letter-spacing: -.8px; }
    .section-head p { margin: 5px 0 0; color: var(--muted); }
    .sort-wrap { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13px; white-space: nowrap; }
    .sort-wrap select { color: var(--text); border: 1px solid var(--line); background: oklch(0.99000 0.00450 var(--primary-hue)); border-radius: 10px; padding: 9px 30px 9px 12px; }
    .featured-carousel { margin: 14px 0 26px; position: relative; }
    .carousel-track { display:block; overflow:hidden; padding:0; }
    .carousel-controls { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:10px; }
    .carousel-arrow { width:30px; height:30px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; background:oklch(0.50000 0.00450 var(--primary-hue) / 0); color:var(--muted); cursor:pointer; }
    .carousel-arrow:hover,.carousel-arrow:focus-visible { background:oklch(1.00000 0.00450 var(--primary-hue)); color:oklch(0.21568 0.02945 var(--primary-hue)); }
    .carousel-arrow svg { width:15px; height:15px; }
    .carousel-dots { display:flex; align-items:center; justify-content:center; gap:6px; }
    .carousel-dot { width:6px; height:6px; padding:0; border:0; border-radius:50%; background:oklch(0.86740 0.02334 var(--primary-hue)); cursor:pointer; transition:width .2s,background .2s; }
    .carousel-dot.active { width:17px; border-radius:5px; background:oklch(0.52891 0.17054 var(--primary-hue)); }
    .featured-slide { min-height:210px; border-radius:22px; overflow:hidden; position:relative; color:oklch(0.99000 0.00450 var(--primary-hue)); padding:22px; display:flex; flex-direction:column; justify-content:space-between; scroll-snap-align:start; text-decoration:none; isolation:isolate; background:oklch(0.27725 0.05462 var(--primary-hue)); box-shadow:var(--shadow); }
    .featured-slide::before { content:""; position:absolute; inset:0; z-index:-2; background-image:var(--slide-image); background-size:cover; background-position:center; transition:transform .4s; }
    .featured-slide::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg,oklch(0.17873 0.04096 var(--primary-hue) / 0.88),oklch(0.17873 0.04096 var(--primary-hue) / 0.22)); }
    .featured-slide:hover::before { transform:scale(1.05); }
    .slide-kicker { font-size:11px; text-transform:uppercase; letter-spacing:1.5px; font-weight:800; opacity:.85; }
    .featured-slide h3 { font-size:25px; line-height:1.1; max-width:260px; margin:12px 0 7px; letter-spacing:-.7px; }
    .featured-slide p { margin:0; max-width:270px; font-size:13px; color:oklch(0.95606 0.02143 var(--primary-hue)); }
    .slide-open { align-self:flex-start; margin-top:16px; width:36px; height:36px; padding:0; display:grid; place-items:center; border-radius:50%; background:oklch(0.50000 0.00450 var(--primary-hue) / 0); color:oklch(1.00000 0.00450 var(--primary-hue)); transition:background .16s ease,color .16s ease; }
    .slide-open svg { width:18px; height:18px; }
    .featured-slide:hover .slide-open, .featured-slide:focus-visible .slide-open { background:oklch(1.00000 0.00450 var(--primary-hue)); color:oklch(0.21568 0.02945 var(--primary-hue)); }
    .featured-slide:active .slide-open { background:oklch(1.00000 0.00450 var(--primary-hue)); color:oklch(0.21568 0.02945 var(--primary-hue)); }
    .app-icon, .detail-icon { overflow:hidden; }
    .app-icon img, .detail-icon img { width:100%;height:100%;object-fit:cover;display:block; }
    .app-card .app-meta { flex-wrap:wrap; }
    .policy-page { display:none; background:oklch(0.99000 0.00450 var(--primary-hue)); border:1px solid var(--line); border-radius:22px; padding:clamp(22px,4vw,42px); box-shadow:var(--shadow); margin-top:10px; }
    .policy-page h1 { margin-top:0; letter-spacing:-1px; }
    .policy-page h2 { margin-top:26px; font-size:18px; }
    .policy-page p,.policy-page li { color:var(--muted); line-height:1.8; }
    .site-links { display:flex; gap:10px 18px; flex-wrap:wrap; padding:28px 0 8px; color:var(--muted); font-size:13px; }
    .site-links a { text-decoration:none; }
    .site-links a:hover { color:var(--primary); text-decoration:underline; }
    .detail-view-image { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
    .filters { display: flex; gap: 9px; flex-wrap: wrap; margin: 0 0 22px; }
    .filter-btn { background: oklch(1.00000 0.00450 var(--primary-hue)); border: 1px solid var(--line); border-radius: 999px; padding: 9px 15px; color: oklch(0.51721 0.03372 var(--primary-hue)); font-weight: 700; font-size: 13px; }
    .filter-btn:hover { border-color: oklch(0.83634 0.08622 var(--primary-hue)); color: var(--primary); }
    .filter-btn.active { background: var(--primary); border-color: var(--primary); color: oklch(1.00000 0.00450 var(--primary-hue)); box-shadow: 0 5px 14px oklch(0.51787 0.21010 var(--primary-hue) / 0.18); }
    .result-meta { color: var(--muted); font-size: 13px; margin: 0 0 13px; }
    .app-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
    .app-card { min-width: 0; padding: 19px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); transition: transform .2s, box-shadow .2s, border-color .2s; }
    .app-card:hover { transform: translateY(-3px); border-color: oklch(0.88146 0.06174 var(--primary-hue)); box-shadow: var(--shadow); }
    .app-card-top { display: flex; align-items: flex-start; gap: 13px; }
    .app-icon { width: 61px; height: 61px; flex: 0 0 61px; display: grid; place-items: center; border-radius: 19px; color: oklch(0.99000 0.00450 var(--primary-hue)); box-shadow: inset 0 1px 0 oklch(1.00000 0.00450 var(--primary-hue) / 0.42), 0 6px 14px oklch(0.25198 0.05586 var(--primary-hue) / 0.09); }
    .app-icon svg { width: 30px; height: 30px; }
    .app-icon .emoji { font-size: 29px; }
    .app-title-area { flex: 1; min-width: 0; }
    .app-title-area h3 { font-size: 16px; letter-spacing: -.3px; margin: 2px 0 4px; line-height: 1.25; }
    .app-developer { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .app-description { min-height: 43px; margin: 15px 0 14px; color: oklch(0.53036 0.03042 var(--primary-hue)); font-size: 13px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .app-meta { display: flex; align-items: center; gap: 9px; color: oklch(0.50276 0.03241 var(--primary-hue)); font-size: 12px; }
    .rating { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: oklch(0.33968 0.03515 var(--primary-hue)); }
    .star { color: oklch(0.78304 0.16380 var(--primary-hue)); line-height: 1; font-size: 14px; }
    .meta-separator { width: 3px; height: 3px; border-radius: 50%; background: oklch(0.79086 0.01999 var(--primary-hue)); }
    .new-badge { background:oklch(0.96452 0.02140 var(--primary-hue));color:oklch(0.49456 0.11355 var(--primary-hue));border-radius:99px;padding:3px 7px;font-size:10px;font-weight:800; }
    .category-label { display: inline-block; padding: 0; border-radius: 0; background: oklch(0.50000 0.00450 var(--primary-hue) / 0); color: var(--primary); font-size: 11px; font-weight: 800; }
    .card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid oklch(0.95881 0.00676 var(--primary-hue)); margin-top: 17px; padding-top: 14px; }
    .version-label { color: oklch(0.67508 0.02396 var(--primary-hue)); font-size: 11px; }
    .small-btn { border: 1px solid oklch(0.89962 0.05182 var(--primary-hue)); color: var(--primary); background: oklch(0.97378 0.01330 var(--primary-hue)); border-radius: 10px; padding: 8px 13px; font-size: 12px; font-weight: 800; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
    .small-btn:hover { background: var(--primary); border-color: var(--primary); color: oklch(0.99000 0.00450 var(--primary-hue)); }
    .empty-state { grid-column: 1 / -1; text-align: center; background: oklch(1.00000 0.00450 var(--primary-hue)); border: 1px dashed oklch(0.88839 0.01774 var(--primary-hue)); padding: 48px 20px; border-radius: var(--radius-lg); color: var(--muted); }
    .empty-state strong { display: block; color: var(--text); font-size: 17px; margin-bottom: 5px; }

    /* Detail view */
    #detailView { display: none; }
    .back-link { display: inline-flex; align-items: center; gap: 8px; border: 0; padding: 7px 0; background: oklch(0.50000 0.00450 var(--primary-hue) / 0); color: oklch(0.58652 0.03088 var(--primary-hue)); font-weight: 700; margin: 0 0 18px; }
    .back-link:hover { color: var(--primary); }
    .back-link svg { width: 18px; }
    .detail-card { background: var(--surface); border: 1px solid var(--line); border-radius: 26px; overflow: hidden; box-shadow: 0 10px 35px oklch(0.28279 0.06344 var(--primary-hue) / 0.035); }
    .detail-hero { padding: 30px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 23px; }
    .detail-icon { width: 104px; height: 104px; flex: none; display: grid; place-items: center; border-radius: 29px; box-shadow: inset 0 1px 0 oklch(1.00000 0.00450 var(--primary-hue) / 0.55), 0 12px 25px oklch(0.29905 0.07115 var(--primary-hue) / 0.12); }
    .detail-icon svg { width: 52px; height: 52px; }
    .detail-icon .emoji { font-size: 48px; }
    .detail-title h1 { margin: 0 0 5px; font-size: clamp(25px, 3vw, 35px); letter-spacing: -1.2px; line-height: 1.1; }
    .detail-title .byline { color: var(--primary); font-size: 13px; font-weight: 750; }
    .detail-title .tagline { margin: 9px 0 0; max-width: 620px; color: var(--muted); }
    .detail-actions { display: flex; flex-direction: column; align-items: stretch; gap: 9px; min-width: 140px; }
    .btn-primary { background: var(--primary); color: oklch(0.99000 0.00450 var(--primary-hue)); box-shadow: 0 7px 16px oklch(0.51787 0.21010 var(--primary-hue) / 0.2); }
    .btn-primary:hover { background: var(--primary-dark); }
    .btn-outline { background: oklch(0.99000 0.00450 var(--primary-hue)); color: var(--primary); border: 1px solid oklch(0.88687 0.05890 var(--primary-hue)); }
    .btn-outline:hover { background: oklch(0.97648 0.01196 var(--primary-hue)); }
    .detail-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); padding: 19px 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: oklch(0.99191 0.00450 var(--primary-hue)); }
    .stat { text-align: center; padding: 0 10px; border-right: 1px solid var(--line); }
    .stat:last-child { border-right: 0; }
    .stat strong { display: block; font-size: 19px; letter-spacing: -.4px; }
    .stat span { color: var(--muted); font-size: 11px; }
    .detail-content { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(260px,.8fr); gap: 28px; padding: 28px 30px 32px; }
    .detail-section + .detail-section { margin-top: 30px; }
    .detail-section h2 { margin: 0 0 11px; font-size: 19px; letter-spacing: -.5px; }
    .detail-section p { color: oklch(0.52728 0.03201 var(--primary-hue)); margin: 0; white-space: pre-line; }
    .screenshots { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 11px; margin: 18px 0 0; }
    .shot { min-height: 125px; overflow: hidden; border-radius: 15px; padding: 13px; border: 1px solid oklch(0.92740 0.02155 var(--primary-hue)); background: linear-gradient(145deg, oklch(0.95564 0.02278 var(--primary-hue)), oklch(0.98652 0.00661 var(--primary-hue))); }
    .shot.dark { background: linear-gradient(145deg, oklch(0.30143 0.09999 var(--primary-hue)), oklch(0.58718 0.19262 var(--primary-hue))); color: oklch(0.99000 0.00450 var(--primary-hue)); border-color: oklch(0.50000 0.00450 var(--primary-hue) / 0); }
    .shot.mint { background: linear-gradient(145deg, oklch(0.95435 0.03786 var(--primary-hue)), oklch(0.99385 0.01007 var(--primary-hue))); }
    .shot-bar { height: 6px; width: 48%; border-radius: 8px; background: oklch(0.51911 0.19354 var(--primary-hue) / 0.35); margin: 0 0 12px; }
    .shot.dark .shot-bar { background: oklch(1.00000 0.00450 var(--primary-hue) / 0.6); }
    .shot-line { height: 5px; width: 83%; margin: 7px 0; border-radius: 5px; background: oklch(0.44643 0.06665 var(--primary-hue) / 0.14); }
    .shot-line.short { width: 55%; }
    .shot.dark .shot-line { background: oklch(1.00000 0.00450 var(--primary-hue) / 0.25); }
    .shot-pill { width: 70%; height: 24px; margin-top: 14px; border-radius: 8px; background: var(--primary); }
    .shot.dark .shot-pill { background: oklch(0.92389 0.05758 var(--primary-hue)); }
    .shot.mint .shot-pill { background: oklch(0.53057 0.09377 var(--primary-hue)); }
    .info-panel { border: 1px solid var(--line); border-radius: 17px; overflow: hidden; align-self: start; }
    .info-panel h3 { margin: 0; padding: 14px 16px; font-size: 14px; background: oklch(0.98652 0.00661 var(--primary-hue)); border-bottom: 1px solid var(--line); }
    .info-row { padding: 13px 16px; display: flex; justify-content: space-between; gap: 18px; font-size: 12px; border-bottom: 1px solid oklch(0.95881 0.00676 var(--primary-hue)); }
    .info-row:last-child { border-bottom: 0; }
    .info-row span { color: var(--muted); }
    .info-row strong { font-weight: 750; text-align: right; }
    .release-box { padding: 16px; background: oklch(0.97918 0.01063 var(--primary-hue)); border: 1px solid oklch(0.93207 0.03511 var(--primary-hue)); border-radius: 15px; }
    .release-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
    .release-top strong { font-size: 14px; }
    .release-top span { color: oklch(0.56495 0.04627 var(--primary-hue)); font-size: 11px; }
    .release-box p { font-size: 13px; }
    .reviews-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
    .review-summary { display: flex; align-items: center; gap: 19px; padding: 14px 0 18px; }
    .big-rating { font-size: 45px; font-weight: 850; letter-spacing: -2px; line-height: 1; }
    .rating-sub { color: var(--muted); font-size: 11px; margin-top: 5px; }
    .rating-bars { flex: 1; max-width: 280px; display: grid; gap: 5px; }
    .rating-bar-row { display: flex; align-items: center; gap: 7px; font-size: 10px; color: oklch(0.58614 0.02938 var(--primary-hue)); }
    .rating-track { flex: 1; height: 6px; background: oklch(0.95308 0.00809 var(--primary-hue)); border-radius: 99px; overflow: hidden; }
    .rating-fill { height: 100%; background: oklch(0.80339 0.15803 var(--primary-hue)); border-radius: 99px; }
    .review-list { display: grid; gap: 12px; margin-top: 8px; }
    .review { padding: 15px; border: 1px solid oklch(0.94960 0.00962 var(--primary-hue)); border-radius: 14px; }
    .review-head { display: flex; align-items: center; gap: 10px; }
    .avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: oklch(0.95023 0.02549 var(--primary-hue)); color: oklch(0.48483 0.19956 var(--primary-hue)); font-weight: 850; font-size: 12px; flex: none; }
    .reviewer { font-size: 12px; font-weight: 800; }
    .review-date { color: oklch(0.69222 0.02358 var(--primary-hue)); font-size: 10px; }
    .review-stars { margin-left: auto; letter-spacing: 1px; color: oklch(0.80339 0.15803 var(--primary-hue)); font-size: 12px; white-space: nowrap; }
    .review p { margin: 10px 0 0; color: oklch(0.50979 0.03229 var(--primary-hue)); font-size: 13px; }
    .review-form { margin-top: 16px; padding: 17px; background: oklch(0.98652 0.00661 var(--primary-hue)); border: 1px solid var(--line); border-radius: 15px; }
    .review-form h3 { margin: 0 0 12px; font-size: 15px; }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .field { display: grid; gap: 6px; margin-bottom: 12px; }
    .field label { color: oklch(0.53036 0.03042 var(--primary-hue)); font-size: 12px; font-weight: 750; }
    .field input, .field textarea { width: 100%; border: 1px solid oklch(0.91752 0.01503 var(--primary-hue)); background: oklch(0.99000 0.00450 var(--primary-hue)); border-radius: 10px; padding: 10px 11px; color: var(--text); }
    .field textarea { min-height: 94px; resize: vertical; }
    .field input:focus, .field textarea:focus { outline: 3px solid oklch(0.51787 0.21010 var(--primary-hue) / 0.1); border-color: oklch(0.75755 0.13051 var(--primary-hue)); }
    .star-picker { display: flex; gap: 5px; }
    .star-choice { border: 0; background: oklch(0.50000 0.00450 var(--primary-hue) / 0); color: oklch(0.88411 0.01231 var(--primary-hue)); padding: 1px; font-size: 27px; line-height: 1; }
    .star-choice.selected, .star-choice:hover { color: oklch(0.80339 0.15803 var(--primary-hue)); }
    .form-note { color: oklch(0.67870 0.02537 var(--primary-hue)); font-size: 11px; margin: 9px 0 0; }
    .toast { position: fixed; z-index: 50; bottom: 22px; left: 50%; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; color: oklch(0.99000 0.00450 var(--primary-hue)); background: oklch(0.27061 0.04775 var(--primary-hue)); padding: 12px 17px; border-radius: 12px; box-shadow: var(--shadow); transition: opacity .2s, transform .2s; font-size: 13px; }
    .toast.show { opacity: 1; transform: translate(-50%, 0); }


    @media (max-width: 900px) {
      .hero { grid-template-columns: minmax(0,1fr) 220px; padding: 32px; }
      .app-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .detail-hero { grid-template-columns: auto minmax(0,1fr); }
      .detail-actions { grid-column: 1 / -1; flex-direction: row; }
      .detail-actions .btn { flex: 1; }
      .detail-content { grid-template-columns: minmax(0,1fr); }
      .info-panel { grid-row: auto; }
    }
    @media (max-width: 640px) {
      .shell { width: min(100% - 28px, 1180px); }
      .topbar-inner { min-height: 66px; gap: 12px; flex-wrap: wrap; padding: 12px 0; }
      .brand-name { font-size: 18px; }
      .brand-mark { width: 36px; height: 36px; }
      .top-link { display: none; }
      .theme-panel { right: -2px; width: min(264px, calc(100vw - 34px)); }
      .search-wrap { order: 3; max-width: none; flex-basis: 100%; }
      main { padding-top: 18px; }
      .hero { display: block; padding: 28px 23px; min-height: 0; border-radius: 24px; }
      .hero h1 { font-size: 36px; letter-spacing: -1.5px; }
      .hero p { font-size: 14px; max-width: 400px; }
      .hero-art { display: none; }
      .section-head { margin-top: 30px; align-items: start; flex-direction: column; gap: 12px; }
      .section-head h2 { font-size: 23px; }
      .sort-wrap { width: 100%; justify-content: space-between; }
      .sort-wrap select { flex: 1; max-width: 210px; }
      .app-grid { grid-template-columns: 1fr; gap: 12px; }
      .app-card { padding: 16px; }
      .app-description { min-height: 0; }
      .detail-hero { padding: 22px 18px; gap: 14px; grid-template-columns: 72px minmax(0,1fr); }
      .detail-icon { width: 72px; height: 72px; border-radius: 21px; }
      .detail-icon svg { width: 37px; height: 37px; }
      .detail-icon .emoji { font-size: 34px; }
      .detail-title h1 { font-size: 24px; }
      .detail-title .tagline { font-size: 13px; }
      .detail-actions { grid-column: 1 / -1; }
      .detail-stats { grid-template-columns: repeat(2, minmax(0,1fr)); padding: 14px; gap: 15px 0; }
      .stat:nth-child(2) { border-right: 0; }
      .detail-content { padding: 22px 17px 25px; gap: 24px; }
      .screenshots { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; }
      .shot { min-height: 100px; padding: 9px; }
      .form-grid { grid-template-columns: 1fr; gap: 0; }
      .review-summary { gap: 12px; }
      .big-rating { font-size: 39px; }
    }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }


    /* PbsApps visual system based directly on the supplied Observation Lab reference. */
    :root {
      --ink: oklch(0.23009 0.04314 var(--primary-hue));
      --navy: oklch(0.28889 0.07215 var(--primary-hue));
      --navy-2: oklch(0.34997 0.08392 var(--primary-hue));
      /* Primary hue experiment: keep perceptual lightness/chroma stable while hue changes. */
      --primary-lightness: 0.57148;
      --primary-chroma: 0.23538;
      --primary-hue: 261.56;
      --primary: oklch(var(--primary-lightness) var(--primary-chroma) var(--primary-hue));
      --primary-dark: oklch(calc(var(--primary-lightness) - 0.09) calc(var(--primary-chroma) * 0.88) var(--primary-hue));
      --primary-soft: oklch(0.965 calc(var(--primary-chroma) * 0.12) var(--primary-hue));
      --primary-border: oklch(0.82 calc(var(--primary-chroma) * 0.38) var(--primary-hue));
      --primary-focus: color-mix(in oklch, var(--primary) 24%, oklch(0.50000 0.00450 var(--primary-hue) / 0));
      --blue: var(--primary);
      --blue-dark: var(--primary-dark);
      --blue-soft: var(--primary-soft);
      --bg: oklch(0.96419 0.01308 var(--primary-hue));
      --line: oklch(0.83513 0.03540 var(--primary-hue));
      --muted: oklch(0.50775 0.04812 var(--primary-hue));
      --card: oklch(1.00000 0.00450 var(--primary-hue));
      --teal: oklch(0.60022 0.10384 var(--primary-hue));
      --amber: oklch(0.76859 0.16466 var(--primary-hue));
      --rose: oklch(0.63014 0.19270 var(--primary-hue));
      --green: oklch(0.50376 0.10192 var(--primary-hue));
      --red: oklch(0.53669 0.17366 var(--primary-hue));
      --text: oklch(0.23009 0.04314 var(--primary-hue));
      --surface: oklch(1.00000 0.00450 var(--primary-hue));
      --surface-soft: oklch(0.97753 0.00792 var(--primary-hue));
      --mint: oklch(0.84864 0.11730 var(--primary-hue));
      --shadow: 0 4px 0 oklch(0.28889 0.07215 var(--primary-hue) / 0.055);
      --radius-xl: 14px;
      --radius-lg: 12px;
      --radius-md: 8px;
    }

    html { min-width: 320px; scroll-behavior: smooth; }
    body {
      color: var(--ink);
      background-color: var(--bg);
      background-image:
        linear-gradient(oklch(0.92051 0.02129 var(--primary-hue)) 1px, oklch(0.50000 0.00450 var(--primary-hue) / 0) 1px),
        linear-gradient(90deg, oklch(0.92051 0.02129 var(--primary-hue)) 1px, oklch(0.50000 0.00450 var(--primary-hue) / 0) 1px);
      background-size: 24px 24px;
      background-attachment: fixed;
      font: 14px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    h1, h2, h3, h4, .brand-name, .featured-slide h3, .section-head h2,
    .detail-title h1, .policy-page h1, .policy-page h2 {
      font-family: Inter, ui-sans-serif, system-ui, sans-serif;
      font-weight: 750;
      letter-spacing: -.035em;
    }
    button, input, textarea, select { font: inherit; }
    button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
      outline: 3px solid var(--primary-border);
      outline-offset: 2px;
    }
    ::selection { background: var(--primary-soft); color: oklch(0.28889 0.07215 var(--primary-hue)); }

    .shell { width: min(1280px, calc(100% - 48px)); margin: 0 auto; }
    .topbar {
      position: relative;
      top: auto;
      z-index: 20;
      padding: 20px 0 0;
      background: oklch(0.50000 0.00450 var(--primary-hue) / 0);
      border: 0;
      box-shadow: none;
      backdrop-filter: none;
    }
    .topbar-inner {
      display: flex;
      align-items: center;
      gap: 20px;
      min-height: 0;
      padding: 16px 18px;
      background: var(--navy);
      border: 1px solid oklch(0.22066 0.05386 var(--primary-hue));
      border-radius: 14px;
      color: oklch(1.00000 0.00450 var(--primary-hue));
      box-shadow: 0 5px 0 oklch(0.86066 0.03162 var(--primary-hue));
    }
    .brand { gap: 12px; }
    .brand-mark {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border: 2px solid var(--primary-border);
      border-radius: 10px;
      color: var(--blue-dark);
      background: oklch(1.00000 0.00450 var(--primary-hue));
      box-shadow: none;
    }
    .brand-mark svg { width: 22px; height: 22px; }
    .brand-name { color: oklch(1.00000 0.00450 var(--primary-hue)); font-size: 20px; font-weight: 850; letter-spacing: -.8px; }
    .brand-name span { color: oklch(0.85316 0.10561 var(--primary-hue)); }
    .search-wrap { max-width: 560px; }
    .search-wrap svg { color: oklch(0.50775 0.04812 var(--primary-hue)); }
    .search-wrap input {
      height: 43px;
      border: 1px solid oklch(0.80944 0.04222 var(--primary-hue));
      border-radius: 8px;
      background: oklch(1.00000 0.00450 var(--primary-hue));
      color: var(--ink);
      box-shadow: 0 2px 0 oklch(0.22066 0.05386 var(--primary-hue) / 0.12);
      transition: border-color .15s, box-shadow .15s;
    }
    .search-wrap input::placeholder { color: oklch(0.55903 0.04237 var(--primary-hue)); }
    .search-wrap input:focus {
      border-color: var(--primary-border);
      box-shadow: 0 0 0 3px var(--primary-focus), 0 2px 0 oklch(0.22066 0.05386 var(--primary-hue) / 0.12);
    }
    .search-shortcut { border-color: oklch(0.85797 0.02988 var(--primary-hue)); color: oklch(0.50775 0.04812 var(--primary-hue)); background: oklch(0.97753 0.00792 var(--primary-hue)); border-radius: 5px; }
    .top-link { color: oklch(0.93295 0.03226 var(--primary-hue)); font-size: 13px; font-weight: 750; }
    .top-link:hover { color: oklch(0.85316 0.10561 var(--primary-hue)); }
    .top-link svg { color: currentColor; }

    main { padding: 26px 0 58px; }
    .section-head { margin: 28px 0 16px; align-items: center; }
    .section-head h2 { color: var(--navy); font-size: 26px; font-weight: 850; letter-spacing: -.04em; }
    .section-head p { margin-top: 4px; color: oklch(0.50775 0.04812 var(--primary-hue)); font-size: 13px; }
    .featured-carousel {
      position: relative;
      isolation: isolate;
      overflow: visible;
      margin: 10px 0 30px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: oklch(0.50000 0.00450 var(--primary-hue) / 0);
      box-shadow: none;
    }
    .featured-carousel > .section-head { margin: 8px 0 14px; }
    .featured-carousel > .section-head h2 { color: var(--navy); font-size: 26px; }
    .featured-carousel > .section-head p { color: var(--muted); }
    .carousel-track { display: block; overflow: hidden; padding: 0; border-radius: 12px; }
    .featured-slide {
      min-height: 210px;
      padding: 25px 28px;
      border: 1px solid var(--primary-dark);
      border-radius: 12px;
      background: var(--blue);
      box-shadow: 0 5px 0 oklch(0.86066 0.03162 var(--primary-hue));
    }
    /* Keep gallery artwork crisp: no texture, blur, dimming, or color filter on the image. */
    .featured-slide::before {
      filter: none;
      opacity: 1;
    }
    /* A very light blue veil protects text at the left and fades to fully clear at the center. */
    .featured-slide::after {
      background: linear-gradient(90deg,
        oklch(0.28889 0.07215 var(--primary-hue) / 0.48) 0%,
        oklch(0.28889 0.07215 var(--primary-hue) / 0.24) 27%,
        oklch(0.28889 0.07215 var(--primary-hue) / 0.07) 43%,
        oklch(0.28889 0.07215 var(--primary-hue) / 0) 52%,
        oklch(0.57148 0.23538 var(--primary-hue) / 0) 100%);
    }
    .slide-kicker { color: oklch(0.87099 0.10674 var(--primary-hue)); font-size: 10px; letter-spacing: 1.25px; font-weight: 850; }
    .featured-slide h3 {
      color: oklch(1.00000 0.00450 var(--primary-hue));
      max-width: 430px;
      font-size: clamp(27px, 3vw, 34px);
      font-weight: 850;
      letter-spacing: -.04em;
      text-shadow: 0 2px 12px oklch(0.19738 0.09898 var(--primary-hue) / 0.18);
    }
    .featured-slide p { color: oklch(1.00000 0.00450 var(--primary-hue) / 0.94); font-size: 13px; }
    .slide-open {
      width: 36px;
      height: 36px;
      border: 1px solid oklch(1.00000 0.00450 var(--primary-hue) / 0.46);
      border-radius: 8px;
      background: oklch(0.50000 0.00450 var(--primary-hue) / 0);
      color: oklch(1.00000 0.00450 var(--primary-hue));
    }
    .slide-open svg { width: 18px; height: 18px; }
    .featured-slide:hover .slide-open,
    .featured-slide:focus-visible .slide-open,
    .featured-slide:active .slide-open { background: oklch(1.00000 0.00450 var(--primary-hue)); color: oklch(0.19549 0.00450 var(--primary-hue)); border-color: oklch(1.00000 0.00450 var(--primary-hue)); }
    .carousel-controls { gap: 10px; margin-top: 11px; }
    .carousel-arrow {
      width: 32px;
      height: 32px;
      border: 1px solid oklch(0.83513 0.03540 var(--primary-hue));
      border-radius: 8px;
      background: oklch(1.00000 0.00450 var(--primary-hue));
      color: oklch(0.42763 0.05734 var(--primary-hue));
      box-shadow: 0 2px 0 oklch(0.90793 0.02311 var(--primary-hue));
    }
    .carousel-arrow:hover, .carousel-arrow:focus-visible {
      background: var(--primary-soft);
      border-color: var(--primary-border);
      color: var(--primary-dark);
    }
    .carousel-dot { width: 6px; height: 6px; background: oklch(0.79064 0.03948 var(--primary-hue)); }
    .carousel-dot.active { width: 18px; border-radius: 4px; background: var(--blue); }

    .sort-wrap { color: oklch(0.50775 0.04812 var(--primary-hue)); font-size: 12px; font-weight: 800; }
    .sort-wrap select {
      border: 1px solid oklch(0.83480 0.03424 var(--primary-hue));
      border-radius: 8px;
      padding: 8px 30px 8px 11px;
      background: oklch(1.00000 0.00450 var(--primary-hue));
      color: var(--ink);
      box-shadow: 0 2px 0 oklch(0.91097 0.02309 var(--primary-hue));
    }
    .filters { gap: 8px; margin-bottom: 18px; }
    .filter-btn {
      padding: 8px 12px;
      border: 1px solid oklch(0.83476 0.03718 var(--primary-hue));
      border-radius: 8px;
      background: oklch(1.00000 0.00450 var(--primary-hue));
      color: oklch(0.42763 0.05734 var(--primary-hue));
      font-size: 12px;
      font-weight: 800;
      box-shadow: 0 2px 0 oklch(0.90793 0.02311 var(--primary-hue));
      transition: transform .12s, border-color .12s, background .12s;
    }
    .filter-btn:hover { border-color: var(--primary-border); color: var(--primary-dark); background: var(--primary-soft); transform: translateY(-1px); }
    .filter-btn.active {
      background: var(--blue);
      border-color: var(--blue-dark);
      color: oklch(1.00000 0.00450 var(--primary-hue));
      box-shadow: 0 3px 0 oklch(0.44711 0.17885 var(--primary-hue));
    }
    .result-meta { color: oklch(0.50775 0.04812 var(--primary-hue)); font-size: 12px; font-weight: 700; margin: 0 0 12px; }
    .app-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
    .app-card {
      min-width: 0;
      padding: 14px;
      border: 1px solid oklch(0.82854 0.03725 var(--primary-hue));
      border-radius: 12px;
      background: oklch(1.00000 0.00450 var(--primary-hue));
      box-shadow: 0 4px 0 oklch(0.89573 0.02318 var(--primary-hue));
      transition: transform .12s, border-color .12s, box-shadow .12s;
    }
    .app-card:hover {
      transform: translateY(-2px);
      border-color: var(--primary-border);
      box-shadow: 0 5px 0 oklch(0.84675 0.04470 var(--primary-hue));
    }
    .app-card-top { align-items: center; gap: 11px; }
    .app-icon {
      width: 50px;
      height: 50px;
      flex: 0 0 50px;
      border: 1px solid oklch(0.85797 0.02988 var(--primary-hue));
      border-radius: 10px;
      box-shadow: 0 2px 0 oklch(0.93318 0.01665 var(--primary-hue));
    }
    .app-icon img { border-radius: 9px; }
    .app-icon svg { width: 25px; height: 25px; }
    .app-title-area h3 { margin: 0 0 3px; color: oklch(0.28889 0.07215 var(--primary-hue)); font-size: 16px; font-weight: 850; letter-spacing: -.025em; }
    .app-developer { color: oklch(0.50775 0.04812 var(--primary-hue)); font-size: 11px; font-weight: 550; }
    .app-description { min-height: 0; margin: 8px 0 9px; color: oklch(0.41313 0.05776 var(--primary-hue)); font-size: 12px; line-height: 1.45; }
    .app-meta { gap: 7px; color: oklch(0.46266 0.05160 var(--primary-hue)); font-size: 11px; }
    .rating { color: oklch(0.28889 0.07215 var(--primary-hue)); font-weight: 850; }
    .star { color: oklch(0.72894 0.14679 var(--primary-hue)); }
    .meta-separator { background: oklch(0.78227 0.03719 var(--primary-hue)); }
    .category-label { padding: 0; border: 0; border-radius: 0; background: oklch(0.50000 0.00450 var(--primary-hue) / 0); color: var(--primary); font-size: 11px; font-weight: 800; }
    .new-badge { padding: 0; border: 0; border-radius: 0; background: oklch(0.50000 0.00450 var(--primary-hue) / 0); color: oklch(0.50376 0.10192 var(--primary-hue)); font-size: 10px; font-weight: 800; }
    .card-footer { margin-top: 9px; padding-top: 8px; border-top: 1px solid oklch(0.91443 0.02133 var(--primary-hue)); gap: 8px; }
    .version-label { color: oklch(0.56713 0.04411 var(--primary-hue)); font-size: 10px; font-weight: 650; }
    .small-btn {
      border: 1px solid oklch(0.80944 0.04222 var(--primary-hue));
      border-radius: 7px;
      padding: 6px 10px;
      background: oklch(1.00000 0.00450 var(--primary-hue));
      color: var(--blue-dark);
      font-size: 11px;
      font-weight: 850;
      box-shadow: 0 2px 0 oklch(0.91097 0.02309 var(--primary-hue));
    }
    .small-btn:hover { background: var(--blue); border-color: var(--blue-dark); color: oklch(1.00000 0.00450 var(--primary-hue)); }
    .empty-state { border: 1px dashed oklch(0.76752 0.04819 var(--primary-hue)); border-radius: 12px; background: oklch(1.00000 0.00450 var(--primary-hue)); color: oklch(0.50775 0.04812 var(--primary-hue)); }
    .empty-state strong { color: var(--navy); }

    #detailView { color: var(--ink); }
    .back-link { color: oklch(0.42763 0.05734 var(--primary-hue)); font-size: 12px; font-weight: 850; }
    .back-link:hover { color: var(--blue-dark); }
    .detail-card {
      border: 1px solid oklch(0.82854 0.03725 var(--primary-hue));
      border-radius: 14px;
      background: oklch(1.00000 0.00450 var(--primary-hue));
      box-shadow: 0 5px 0 oklch(0.89573 0.02318 var(--primary-hue));
    }
    .detail-hero {
      padding: 27px;
      gap: 20px;
      background: linear-gradient(115deg, oklch(1.00000 0.00450 var(--primary-hue)) 0%, oklch(0.97122 0.01364 var(--primary-hue)) 100%);
      border-bottom: 1px solid oklch(0.91443 0.02133 var(--primary-hue));
    }
    .detail-icon { width: 88px; height: 88px; border: 1px solid oklch(0.85797 0.02988 var(--primary-hue)); border-radius: 12px; box-shadow: 0 3px 0 oklch(0.92354 0.02128 var(--primary-hue)); }
    .detail-title h1 { color: var(--navy); font-size: 32px; font-weight: 850; letter-spacing: -.04em; }
    .detail-title .byline { color: var(--primary-dark); font-size: 12px; font-weight: 850; }
    .detail-title .tagline { color: oklch(0.46266 0.05160 var(--primary-hue)); font-size: 13px; }
    .btn { border-radius: 8px; padding: 10px 14px; font-size: 12px; font-weight: 850; }
    .btn-primary {
      background: var(--blue);
      border: 1px solid var(--blue-dark);
      color: oklch(1.00000 0.00450 var(--primary-hue));
      box-shadow: 0 3px 0 var(--primary-dark);
    }
    .btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow: 0 4px 0 var(--primary-border); }
    .btn-outline { background: oklch(1.00000 0.00450 var(--primary-hue)); color: var(--blue-dark); border: 1px solid oklch(0.80944 0.04222 var(--primary-hue)); box-shadow: 0 2px 0 oklch(0.91097 0.02309 var(--primary-hue)); }
    .btn-outline:hover { background: var(--primary-soft); border-color: var(--primary-border); }
    .detail-stats { padding: 17px 25px; background: var(--primary-soft); border-color: var(--primary-border); }
    .stat strong { color: oklch(0.28889 0.07215 var(--primary-hue)); font-size: 18px; font-weight: 850; }
    .stat span { color: oklch(0.50775 0.04812 var(--primary-hue)); font-size: 11px; font-weight: 700; }
    .detail-content { gap: 24px; padding: 25px 27px 30px; }
    .detail-section h2 { color: var(--navy); font-size: 21px; font-weight: 850; }
    .detail-section p { color: oklch(0.41313 0.05776 var(--primary-hue)); font-size: 13px; }
    .screenshots { gap: 9px; }
    .shot { border-radius: 9px; border-color: oklch(0.85797 0.02988 var(--primary-hue)); background: oklch(0.96419 0.01308 var(--primary-hue)); }
    .shot.dark { background: linear-gradient(145deg, oklch(0.28889 0.07215 var(--primary-hue)), var(--primary)); }
    .shot-bar { background: color-mix(in oklch, var(--primary) 30%, oklch(0.50000 0.00450 var(--primary-hue) / 0)); }
    .shot-pill { border-radius: 6px; background: var(--blue); }
    .info-panel { border: 1px solid oklch(0.83513 0.03540 var(--primary-hue)); border-radius: 10px; box-shadow: 0 3px 0 oklch(0.92354 0.02128 var(--primary-hue)); }
    .info-panel h3 { padding: 12px 14px; background: var(--primary-soft); border-bottom: 1px solid var(--primary-border); color: var(--navy); font-size: 13px; font-weight: 850; }
    .info-row { padding: 11px 14px; border-bottom-color: oklch(0.93318 0.01665 var(--primary-hue)); }
    .info-row span { color: oklch(0.50775 0.04812 var(--primary-hue)); }
    .info-row strong { color: oklch(0.34997 0.08392 var(--primary-hue)); }
    .release-box { background: oklch(0.96419 0.01308 var(--primary-hue)); border: 1px solid oklch(0.83513 0.03540 var(--primary-hue)); border-radius: 9px; }
    .release-top span { color: oklch(0.50775 0.04812 var(--primary-hue)); }
    .big-rating { color: oklch(0.28889 0.07215 var(--primary-hue)); }
    .rating-track { background: oklch(0.92354 0.02128 var(--primary-hue)); }
    .rating-fill { background: oklch(0.72894 0.14679 var(--primary-hue)); }
    .review { border: 1px solid oklch(0.85797 0.02988 var(--primary-hue)); border-radius: 9px; background: oklch(1.00000 0.00450 var(--primary-hue)); }
    .avatar { background: var(--primary-soft); color: var(--primary-dark); }
    .reviewer { color: var(--navy); }
    .review p { color: oklch(0.41313 0.05776 var(--primary-hue)); }
    .review-form { background: oklch(0.97138 0.01078 var(--primary-hue)); border: 1px solid oklch(0.85797 0.02988 var(--primary-hue)); border-radius: 10px; }
    .field label { color: oklch(0.36958 0.06060 var(--primary-hue)); font-weight: 850; }
    .field input, .field textarea { border: 1px solid oklch(0.83480 0.03424 var(--primary-hue)); border-radius: 8px; color: var(--ink); }
    .field input:focus, .field textarea:focus { outline: 2px solid var(--primary-focus); border-color: var(--primary); }
    .star-choice.selected, .star-choice:hover { color: oklch(0.72894 0.14679 var(--primary-hue)); }
    .form-note { color: oklch(0.50775 0.04812 var(--primary-hue)); }
    .policy-page { border: 1px solid oklch(0.82854 0.03725 var(--primary-hue)); border-radius: 12px; background: oklch(1.00000 0.00450 var(--primary-hue)); box-shadow: 0 4px 0 oklch(0.89573 0.02318 var(--primary-hue)); }
    .policy-page h1, .policy-page h2 { color: var(--navy); }
    .policy-page a, .site-links a:hover { color: var(--blue-dark); }
    .policy-page p, .policy-page li { color: oklch(0.41313 0.05776 var(--primary-hue)); }
    .site-links { color: oklch(0.42763 0.05734 var(--primary-hue)); font-size: 12px; font-weight: 750; }
    .site-links a:hover { text-decoration: underline; }
    .toast { background: var(--navy); border: 1px solid oklch(0.22066 0.05386 var(--primary-hue)); border-radius: 9px; box-shadow: 0 5px 0 oklch(0.87684 0.02797 var(--primary-hue)); }

    /* Live primary-hue experiment control. */
    .theme-control { position: relative; flex: 0 0 auto; }
    .theme-trigger {
      display: inline-flex; align-items: center; gap: 8px; min-height: 38px;
      padding: 7px 11px; border: 1px solid oklch(0.93295 0.03226 var(--primary-hue) / 0.42); border-radius: 8px;
      background: oklch(1.00000 0.00450 var(--primary-hue) / 0.08); color: oklch(1.00000 0.00450 var(--primary-hue)); font-size: 12px; font-weight: 800;
      box-shadow: none; transition: background .15s, border-color .15s;
    }
    .theme-trigger:hover, .theme-trigger[aria-expanded="true"] { background: oklch(1.00000 0.00450 var(--primary-hue) / 0.16); border-color: oklch(1.00000 0.00450 var(--primary-hue) / 0.72); }
    .theme-trigger svg { width: 14px; height: 14px; opacity: .8; }
    .theme-trigger-swatch { width: 13px; height: 13px; border-radius: 4px; background: var(--primary); border: 1px solid oklch(1.00000 0.00450 var(--primary-hue) / 0.75); box-shadow: 0 0 0 2px oklch(1.00000 0.00450 var(--primary-hue) / 0.12); }
    .theme-panel {
      position: absolute; z-index: 50; top: calc(100% + 10px); right: 0; width: 264px;
      padding: 14px; border: 1px solid oklch(0.83513 0.03540 var(--primary-hue)); border-radius: 11px; background: oklch(1.00000 0.00450 var(--primary-hue));
      color: oklch(0.23009 0.04314 var(--primary-hue)); box-shadow: 0 8px 0 oklch(0.28889 0.07215 var(--primary-hue) / 0.1), 0 14px 30px oklch(0.28889 0.07215 var(--primary-hue) / 0.16);
    }
    .theme-panel[hidden] { display: none !important; }
    .theme-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 13px; }
    .theme-panel-heading output { color: var(--primary-dark); font-size: 12px; font-weight: 850; font-variant-numeric: tabular-nums; }
    .theme-hue-range { width: 100%; margin: 2px 0 13px; accent-color: var(--primary); cursor: pointer; }
    .theme-presets { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; }
    .theme-preset { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 7px 3px; border: 1px solid oklch(0.90195 0.02028 var(--primary-hue)); border-radius: 7px; background: oklch(0.98695 0.00621 var(--primary-hue)); color: oklch(0.46266 0.05160 var(--primary-hue)); font-size: 10px; font-weight: 750; }
    .theme-preset:hover, .theme-preset.active { border-color: var(--primary-border); background: var(--primary-soft); color: var(--primary-dark); }
    .theme-preset span { width: 19px; height: 19px; border: 1px solid oklch(0.23009 0.04314 var(--primary-hue) / 0.12); border-radius: 6px; background: var(--swatch); }
    .theme-panel-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid oklch(0.93318 0.01665 var(--primary-hue)); color: oklch(0.56245 0.04231 var(--primary-hue)); font-size: 10px; }
    .theme-panel-footer button { padding: 3px 6px; border: 0; background: oklch(0.50000 0.00450 var(--primary-hue) / 0); color: var(--primary-dark); font-size: 11px; font-weight: 800; }
    .theme-panel-footer button:hover { text-decoration: underline; }

    @media (max-width: 900px) {
      .shell { width: min(100% - 36px, 1280px); }
      .topbar-inner { flex-wrap: wrap; }
      .app-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    }
    @media (max-width: 640px) {
      .shell { width: min(100% - 18px, 1280px); }
      .topbar { padding-top: 10px; }
      .topbar-inner { padding: 12px; border-radius: 10px; gap: 9px; }
      .brand { gap: 8px; }
      .brand-mark { width: 36px; height: 36px; }
      .brand-name { font-size: 18px; }
      .top-link { display: none; }
      .search-wrap { order: 3; max-width: none; flex-basis: 100%; }
      main { padding-top: 18px; }
      .featured-carousel { margin: 8px 0 22px; }
      .featured-carousel > .section-head { align-items: flex-start; margin: 15px 0 12px; }
      .featured-carousel > .section-head h2 { font-size: 22px; }
      .featured-slide { min-height: 184px; padding: 19px; border-radius: 10px; }
      .featured-slide h3 { font-size: 25px; }
      .section-head { margin-top: 24px; align-items: flex-start; }
      .section-head h2 { font-size: 23px; }
      .filters { gap: 6px; }
      .filter-btn { padding: 7px 10px; }
      .app-grid { grid-template-columns: 1fr; gap: 9px; }
      .app-card { padding: 12px; }
      .detail-hero { padding: 18px; gap: 12px; grid-template-columns: 70px minmax(0,1fr); }
      .detail-icon { width: 70px; height: 70px; border-radius: 10px; }
      .detail-title h1 { font-size: 25px; }
      .detail-content { padding: 20px 17px 24px; gap: 22px; }
      .detail-stats { padding: 13px 12px; }
      .screenshots { gap: 7px; }
      .site-links { gap: 10px 14px; padding-top: 22px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
    }

  

    /* Primary hue propagation: keep neutral structure neutral, but derive every
       blue-tinted accent, outline, grid line and interactive state from the hue. */
    :root {
      --primary-on-dark: oklch(0.78 calc(var(--primary-chroma) * 0.62) var(--primary-hue));

      /* These tints use the selected hue directly. Mixing the primary with
         blue-grey neutrals in OKLCH can rotate yellow toward teal or red toward
         purple, which makes the theme look only partly connected. */
      --primary-gridline: oklch(0.875 calc(var(--primary-chroma) * 0.20) var(--primary-hue));
      --primary-outline: oklch(0.82 calc(var(--primary-chroma) * 0.38) var(--primary-hue));
      --primary-outline-soft: oklch(0.91 calc(var(--primary-chroma) * 0.22) var(--primary-hue));
      --primary-shadow-edge: oklch(0.85 calc(var(--primary-chroma) * 0.24) var(--primary-hue));
      --primary-muted-dot: oklch(0.75 calc(var(--primary-chroma) * 0.28) var(--primary-hue));
      --primary-wash: oklch(0.965 calc(var(--primary-chroma) * 0.10) var(--primary-hue));
      --line: var(--primary-outline);
    }

    body {
      background-image:
        linear-gradient(var(--primary-gridline) 1px, oklch(0.50000 0.00450 var(--primary-hue) / 0) 1px),
        linear-gradient(90deg, var(--primary-gridline) 1px, oklch(0.50000 0.00450 var(--primary-hue) / 0) 1px);
    }

    /* Brand and highlighted text */
    .brand-name span,
    .top-link:hover,
    .slide-kicker { color: var(--primary-on-dark); }

    /* Search, gallery navigation and filters */
    .search-wrap input { border-color: var(--primary-outline); }
    .search-shortcut { border-color: var(--primary-outline); }
    .carousel-arrow { border-color: var(--primary-outline); }
    .carousel-dot { background: var(--primary-muted-dot); }
    .filter-btn { border-color: var(--primary-outline); }
    .filter-btn.active { box-shadow: 0 3px 0 var(--primary-dark); }

    /* App cards and action controls */
    .app-card:hover { box-shadow: 0 5px 0 var(--primary-shadow-edge); }
    .small-btn { border-color: var(--primary-outline); }
    .app-icon, .detail-icon { border-color: var(--primary-outline); }
    .btn-outline { border-color: var(--primary-outline); }

    /* Detail panels, screenshots, release notes and reviews */
    .detail-hero { background: linear-gradient(115deg, oklch(1.00000 0.00450 var(--primary-hue)) 0%, var(--primary-soft) 100%); }
    .shot { border-color: var(--primary-outline); background: var(--primary-wash); }
    .info-panel { border-color: var(--primary-outline); }
    .info-panel h3 { background: var(--primary-soft); border-bottom-color: var(--primary-outline); }
    .info-row { border-bottom-color: var(--primary-outline-soft); }
    .release-box { background: var(--primary-wash); border-color: var(--primary-outline); }
    .review { border-color: var(--primary-outline); }
    .review-form { background: var(--primary-wash); border-color: var(--primary-outline); }
    .field input, .field textarea { border-color: var(--primary-outline); }
    .policy-page { border-color: var(--primary-outline); }
    .empty-state { border-color: var(--primary-outline); }

    /* Theme popover uses the same live border family as the rest of the UI. */
    .theme-panel { border-color: var(--primary-outline); }
    .theme-preset { border-color: var(--primary-outline); }
    .theme-panel-footer { border-top-color: var(--primary-outline-soft); }



    /* Unified hue family: every UI color is OKLCH and inherits the one hue. */
    :root {
      --ink: oklch(0.24500 0.04500 var(--primary-hue));
      --navy: oklch(0.28500 0.07500 var(--primary-hue));
      --navy-2: oklch(0.36500 0.09000 var(--primary-hue));
      --text: oklch(0.28500 0.05000 var(--primary-hue));
      --muted: oklch(0.48500 0.05500 var(--primary-hue));
      --line: oklch(0.83500 0.03500 var(--primary-hue));
      --bg: oklch(0.95500 0.01600 var(--primary-hue));
      --surface: oklch(0.99500 0.00450 var(--primary-hue));
      --surface-soft: oklch(0.97200 0.01200 var(--primary-hue));
      --card: var(--surface);
      --mint: oklch(0.82000 0.10500 var(--primary-hue));
      --teal: oklch(0.58500 0.12500 var(--primary-hue));
      --amber: oklch(0.76500 0.14500 var(--primary-hue));
      --rose: oklch(0.66000 0.17500 var(--primary-hue));
      --green: oklch(0.60000 0.12500 var(--primary-hue));
      --red: oklch(0.53500 0.18000 var(--primary-hue));
      --shadow-ink: oklch(0.25500 0.06000 var(--primary-hue) / 0.14);
      --primary-gridline: oklch(0.87500 0.03500 var(--primary-hue));
      --primary-shadow-edge: oklch(0.85000 0.05000 var(--primary-hue));
      --primary-outline: oklch(0.82000 0.06000 var(--primary-hue));
      --primary-outline-soft: oklch(0.91000 0.02500 var(--primary-hue));
      --primary-muted-dot: oklch(0.75000 0.07500 var(--primary-hue));
      --primary-wash: oklch(0.96500 0.01800 var(--primary-hue));
      --primary-on-dark: oklch(0.82500 0.11500 var(--primary-hue));
    }

    /* Make the dark structural palette, neutral text, shadows and all
       secondary accents follow the selected primary hue as well. */
    .topbar-inner, .toast { background: var(--navy); border-color: var(--ink); }
    .brand-mark { color: var(--primary-dark); }
    .brand-name span, .top-link:hover, .slide-kicker { color: var(--primary-on-dark); }
    .section-head h2, .app-title-area h3, .rating, .stat strong,
    .detail-title h1, .detail-section h2, .info-panel h3, .big-rating,
    .reviewer, .policy-page h1, .policy-page h2, .empty-state strong { color: var(--navy); }
    .app-developer, .section-head p, .sort-wrap, .result-meta, .back-link,
    .detail-title .tagline, .detail-section p, .info-row span, .release-top span,
    .rating-bar-row, .review p, .review-date, .form-note, .site-links,
    .version-label, .search-wrap svg, .search-shortcut { color: var(--muted); }
    .app-description, .app-meta, .detail-title .tagline, .policy-page p,
    .policy-page li, .info-row strong, .field label { color: var(--text); }
    .card-footer, .info-row, .detail-hero, .review, .review-form,
    .release-box, .info-panel, .app-card, .detail-card, .policy-page,
    .theme-panel, .theme-preset, .search-wrap input, .sort-wrap select,
    .filter-btn, .carousel-arrow, .app-icon, .detail-icon, .field input,
    .field textarea, .small-btn, .empty-state { border-color: var(--primary-outline); }
    .detail-stats, .info-panel h3, .review-form, .release-box,
    .detail-hero, .shot, .theme-preset:hover, .theme-preset.active,
    .filter-btn:hover, .btn-outline:hover { background-color: var(--primary-wash); }
    .carousel-dot { background: var(--primary-muted-dot); }
    .carousel-dot.active { background: var(--primary); }
    .meta-separator { background: var(--primary-outline); }
    .rating-track { background: var(--primary-wash); }
    .rating-fill { background: var(--primary); }
    .new-badge { color: var(--primary); background: oklch(0.50000 0.00450 var(--primary-hue) / 0); }
    .star, .review-stars, .star-choice.selected, .star-choice:hover { color: var(--primary); }
    .featured-slide::after {
      background: linear-gradient(90deg,
        oklch(0.20 0.050 var(--primary-hue) / .48) 0%,
        oklch(0.20 0.050 var(--primary-hue) / .24) 27%,
        oklch(0.20 0.050 var(--primary-hue) / .07) 43%,
        oklch(0.20 0.050 var(--primary-hue) / 0) 52%,
        oklch(0.20 0.050 var(--primary-hue) / 0) 100%);
    }
    .carousel-arrow:hover, .carousel-arrow:focus-visible,
    .filter-btn:hover, .theme-preset:hover, .theme-preset.active,
    .small-btn:hover, .btn-primary:hover { border-color: var(--primary-dark); }
    .theme-trigger-swatch { background: var(--primary); }


    /*
      Full semantic hue relationships.
      The secondary hue keeps a -30 degree offset from the primary:
      primary 130 -> secondary 100; primary 240 -> secondary 210.
      Adjust offsets here if the palette relationship should change.
    */
    :root {
      color-scheme: light;
      accent-color: var(--primary);
      --secondary-hue-offset: -30;
      --tertiary-hue-offset: 30;
      --complementary-hue-offset: 180;
      --split-complement-hue-offset: 150;
      --split-complement-alt-hue-offset: -150;
      --success-hue-offset: -120;
      --warning-hue-offset: 60;
      --danger-hue-offset: 180;

      --secondary-hue: calc(var(--primary-hue) + var(--secondary-hue-offset));
      --tertiary-hue: calc(var(--primary-hue) + var(--tertiary-hue-offset));
      --complementary-hue: calc(var(--primary-hue) + var(--complementary-hue-offset));
      --split-complement-hue: calc(var(--primary-hue) + var(--split-complement-hue-offset));
      --split-complement-alt-hue: calc(var(--primary-hue) + var(--split-complement-alt-hue-offset));
      --success-hue: calc(var(--primary-hue) + var(--success-hue-offset));
      --warning-hue: calc(var(--primary-hue) + var(--warning-hue-offset));
      --danger-hue: calc(var(--primary-hue) + var(--danger-hue-offset));

      /* Complementary accent families retain their hue relationship as the primary moves. */
      --secondary: oklch(0.595 0.145 var(--secondary-hue));
      --secondary-dark: oklch(0.385 0.115 var(--secondary-hue));
      --secondary-soft: oklch(0.965 0.022 var(--secondary-hue));
      --secondary-outline: oklch(0.825 0.065 var(--secondary-hue));
      --tertiary: oklch(0.735 0.145 var(--tertiary-hue));
      --complementary: oklch(0.605 0.155 var(--complementary-hue));
      --split-complement: oklch(0.625 0.165 var(--split-complement-hue));
      --success: oklch(0.585 0.135 var(--success-hue));
      --warning: oklch(0.755 0.155 var(--warning-hue));
      --danger: oklch(0.565 0.17 var(--danger-hue));

      /* Backward-compatible semantic aliases, now intentionally offset from primary. */
      --mint: oklch(0.835 0.105 var(--secondary-hue));
      --teal: oklch(0.595 0.13 var(--secondary-hue));
      --amber: oklch(0.755 0.15 var(--tertiary-hue));
      --rose: oklch(0.635 0.17 var(--split-complement-hue));
      --green: var(--success);
      --red: var(--danger);

      --primary-link: var(--primary-dark);
      --primary-link-hover: var(--primary);
      --visited-link: var(--secondary-dark);
      --dropdown-hover: var(--secondary-soft);
      --dropdown-hover-text: var(--secondary-dark);
      --dropdown-selected: var(--primary-soft);
      --dropdown-selected-text: var(--primary-dark);
    }

    /* Standard links, including links rendered later inside policy and detail pages. */
    a:not(.brand):not(.featured-slide):not(.top-link) {
      color: var(--primary-link);
      text-decoration-color: var(--primary-border);
      text-underline-offset: 3px;
      caret-color: var(--primary);
    }
    a:visited:not(.brand):not(.featured-slide):not(.top-link) { color: var(--visited-link); }
    a:hover:not(.brand):not(.featured-slide):not(.top-link) {
      color: var(--primary-link-hover);
      text-decoration-color: var(--primary);
    }
    a:active:not(.brand):not(.featured-slide):not(.top-link) { color: var(--secondary-dark); }
    .top-link:hover, .site-links a:hover, .policy-page a:hover { color: var(--primary-on-dark); }
    .site-links a { color: var(--primary-link); }
    .site-links a:visited { color: var(--visited-link); }
    .site-links a:hover { color: var(--primary); }

    /* Native browser controls: focus, selected options, range thumbs and check marks. */
    input, textarea, select, button { accent-color: var(--primary); caret-color: var(--primary); }
    input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
    select {
      color: var(--text);
      background-color: var(--surface);
      border-color: var(--primary-outline);
      accent-color: var(--primary);
    }
    select:hover { border-color: var(--primary); }
    select:focus, select:focus-visible {
      border-color: var(--primary);
      outline-color: var(--primary);
      box-shadow: 0 0 0 3px var(--primary-focus);
    }
    select option, option {
      color: var(--text);
      background-color: var(--surface);
    }
    select option:checked, option:checked {
      color: oklch(0.99 0.0045 var(--primary-hue));
      background-color: var(--primary);
    }
    select option:hover, option:hover, select option:focus, option:focus {
      color: var(--dropdown-hover-text);
      background-color: var(--dropdown-hover);
    }
    input[type="checkbox"], input[type="radio"], input[type="range"], progress, meter {
      accent-color: var(--primary);
    }
    input[type="range"] { accent-color: var(--primary); }
    input[type="range"]::-webkit-slider-runnable-track {
      background: var(--secondary-soft);
      border: 1px solid var(--secondary-outline);
      border-radius: 999px;
    }
    input[type="range"]::-webkit-slider-thumb {
      background: var(--primary);
      border: 2px solid var(--surface);
      box-shadow: 0 0 0 1px var(--primary);
    }
    input[type="range"]::-moz-range-track {
      background: var(--secondary-soft);
      border: 1px solid var(--secondary-outline);
      border-radius: 999px;
    }
    input[type="range"]::-moz-range-thumb {
      background: var(--primary);
      border: 2px solid var(--surface);
      box-shadow: 0 0 0 1px var(--primary);
    }
    input[type="file"]::file-selector-button {
      color: oklch(0.99 0.0045 var(--primary-hue));
      background: var(--primary);
      border: 1px solid var(--primary-dark);
      border-radius: 6px;
      padding: 6px 10px;
      cursor: pointer;
    }
    input[type="file"]::file-selector-button:hover { background: var(--primary-dark); }

    /* Browser text highlights, form marks and keyboard interaction. */
    ::selection { color: var(--primary-dark); background: var(--primary-soft); }
    ::-moz-selection { color: var(--primary-dark); background: var(--primary-soft); }
    mark { color: var(--secondary-dark); background: var(--secondary-soft); }
    mark a { color: inherit; }
    :focus-visible { outline-color: var(--primary); }
    button:hover, [role="button"]:hover { accent-color: var(--primary); }
    button[aria-pressed="true"], [aria-selected="true"], [aria-checked="true"] {
      accent-color: var(--primary);
    }
    button:active, [role="button"]:active { outline-color: var(--secondary); }
    ::placeholder { color: var(--muted); }
    ::marker { color: var(--secondary); }
    progress { accent-color: var(--primary); }
    progress::-webkit-progress-value { background: var(--primary); }
    progress::-moz-progress-bar { background: var(--primary); }

    /* Use the offset palette for non-primary accents instead of cloning primary hue. */
    .carousel-dot { background: oklch(0.75 0.075 var(--secondary-hue)); }
    .carousel-dot.active { background: var(--primary); }
    .star, .review-stars, .star-choice.selected, .star-choice:hover,
    .rating-fill { color: var(--tertiary); background-color: var(--tertiary); }
    .star, .review-stars, .star-choice.selected, .star-choice:hover { background: transparent; }
    .new-badge { color: var(--secondary-dark); }
    .meta-separator { background: var(--secondary-outline); }
    .theme-panel-heading output { color: var(--secondary-dark); }
    .filter-btn.active, .carousel-arrow:focus-visible { outline-color: var(--primary); }
    .dropdown-highlight, [role="option"][aria-selected="true"] {
      color: var(--dropdown-selected-text);
      background: var(--dropdown-selected);
    }

    /* Browser scrollbar accents also track the current theme. */
    * { scrollbar-color: var(--primary-outline) var(--surface-soft); }
    *::-webkit-scrollbar-thumb { background: var(--primary-outline); border-radius: 999px; }
    *::-webkit-scrollbar-thumb:hover { background: var(--primary); }
    *::-webkit-scrollbar-track { background: var(--surface-soft); }

    [hidden] { display: none !important; }
    #detailView:not([hidden]), #adminView:not([hidden]), #infoPage:not([hidden]) { display: block; }
    .featured-slide { background-size: cover; background-position: center; }
    .featured-slide .featured-banner { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; }
    .featured-slide>div,.featured-slide>span { position:relative; z-index:1; }
    .header-actions { display:flex; align-items:center; gap:18px; margin-left:auto; }
    .header-button { border:0; background:transparent; font:inherit; cursor:pointer; }
    .account-label { max-width:180px; overflow:hidden; text-overflow:ellipsis; }
    .admin-view { padding: 8px 0 26px; }
    .admin-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:18px; }
    .admin-card { min-width:0; padding:20px; border:1px solid var(--primary-outline); border-radius:12px; background:var(--surface); box-shadow:0 4px 0 var(--primary-shadow-edge); }
    .admin-card h3 { margin:0; color:var(--navy); font-size:17px; }
    .admin-card>p { margin:7px 0 16px; color:var(--muted); font-size:12px; }
    .admin-search { display:flex; gap:8px; }
    .admin-search-label,.admin-controls label { display:block; margin:12px 0 6px; color:var(--muted); font-size:12px; font-weight:750; }
    .admin-search input,.admin-controls input,.admin-controls select { min-width:0; width:100%; padding:9px 10px; border:1px solid var(--primary-outline); border-radius:8px; background:var(--surface); color:var(--ink); }
    .admin-controls { display:grid; grid-template-columns:minmax(0,1fr); gap:6px; margin:12px 0; }
    .admin-controls label { margin:0; }
    .admin-list { display:grid; gap:8px; margin-top:12px; font-size:12px; }
    .admin-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid var(--primary-outline); }
    .admin-row>div:first-child { min-width:0; display:grid; gap:3px; }
    .admin-row strong { color:var(--navy); font-size:13px; }
    .admin-row span { color:var(--muted); overflow-wrap:anywhere; }
    .admin-row .user-id { font-size:10px; opacity:.8; }
    .muted-note { align-self:center; color:var(--muted); font-size:11px; }
    .admin-row-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:6px; }
    .admin-row .small-btn { flex:none; }
    .danger-btn { color:var(--danger); border-color:var(--danger); }
    .danger-btn:hover { color:white; background:var(--danger); border-color:var(--danger); }
    .admin-message { margin:16px 0; padding:12px 14px; border:1px solid var(--primary-outline); border-radius:10px; background:var(--primary-soft); color:var(--ink); font-size:13px; }
    .admin-message.error { border-color:var(--danger); color:var(--danger); }
    button:disabled { opacity:.55; cursor:not-allowed; transform:none !important; }
    @media(max-width:900px) { .admin-grid { grid-template-columns:1fr; } }
    @media(max-width:640px) { .header-actions { gap:10px; } .header-actions .top-link { display:inline-flex; font-size:11px; } .account-label { display:none; } .admin-row { align-items:flex-start; flex-direction:column; } .admin-row-actions { justify-content:flex-start; } }

    /* App media remains fully visible; text and navigation sit beside or below artwork. */
    .featured-slide { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(220px,1fr); gap:22px; min-height:0; padding:16px; color:var(--ink); background:var(--surface); border-color:var(--primary-outline); }
    .featured-slide::before,.featured-slide::after { display:none; }
    .featured-media { position:relative; min-width:0; aspect-ratio:2.15 / 1; overflow:hidden; border-radius:8px; background:var(--primary-soft); }
    .featured-banner { display:block; width:100%; height:100%; object-fit:contain; }
    .featured-copy { align-self:center; padding:12px 14px 12px 0; }
    .featured-slide h3 { color:var(--navy); text-shadow:none; margin:8px 0; }
    .featured-slide p { color:var(--muted); }
    .featured-slide .slide-open { margin-top:12px; border-color:var(--primary-outline); color:var(--primary); }
    .app-icon img,.detail-icon img { object-fit:contain; }
    .media-fallback { display:none; }
    .media-failed>.media-fallback,.media-fallback.visible { display:grid; position:absolute; inset:0; place-items:center; padding:12px; text-align:center; color:var(--muted); background:var(--primary-soft); font-size:12px; font-weight:750; }
    .app-icon,.detail-icon,.shot,.featured-media,.detail-banner { position:relative; }
    .detail-banner { width:100%; aspect-ratio:2.4 / 1; overflow:hidden; background:var(--primary-soft); }
    .detail-banner img { width:100%; height:100%; object-fit:contain; display:block; }
    .screenshots { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
    .shot { min-height:0; aspect-ratio:16 / 10; padding:0; background:var(--primary-soft); }
    .detail-view-image { display:block; object-fit:contain; }
    .asset-editor { display:grid; gap:10px; padding:4px 0 14px; }
    .asset-form { display:grid; grid-template-columns:minmax(100px,150px) minmax(0,1fr); gap:12px; padding:12px; border:1px solid var(--primary-outline); border-radius:10px; background:var(--surface-soft); }
    .asset-preview { position:relative; align-self:start; aspect-ratio:4 / 3; overflow:hidden; border-radius:8px; background:var(--primary-soft); }
    .asset-preview img { display:block; width:100%; height:100%; object-fit:contain; }
    .asset-preview>span { position:absolute; left:5px; bottom:5px; border-radius:5px; padding:3px 6px; background:var(--surface); color:var(--ink); font-size:10px; }
    .asset-fields { display:grid; gap:7px; min-width:0; }
    .asset-fields>strong { overflow-wrap:anywhere; font-size:11px; }
    .asset-fields label { display:grid; grid-template-columns:105px minmax(0,1fr); align-items:center; gap:7px; color:var(--muted); font-size:11px; font-weight:700; }
    .asset-fields input,.asset-fields select { min-width:0; width:100%; padding:7px 8px; border:1px solid var(--primary-outline); border-radius:7px; background:var(--surface); color:var(--ink); }
    @media(max-width:640px) { .featured-slide { grid-template-columns:1fr; gap:8px; } .featured-copy { padding:8px; } .asset-form { grid-template-columns:1fr; } .asset-preview { max-width:240px; width:100%; } }