/* =============================================================================
   AppStore Platform - public store front
   Original design. No Google Play branding, iconography or assets.
   ========================================================================== */

:root {
    --st-bg:       #0f1116;
    --st-surface:  #171a21;
    --st-surface-2:#1f232c;
    --st-border:   #272c37;
    --st-text:     #e8eaf0;
    --st-muted:    #97a0b2;
    --st-accent:   #5b8cff;
    --st-accent-2: #8b5cf6;
    --st-radius:   14px;
}

* { box-sizing: border-box; }

body.store-body {
    margin: 0;
    background: var(--st-bg);
    color: var(--st-text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1rem; }

a { color: inherit; }

/* ------------------------------------------------------------------ header */

.store-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(15, 17, 22, .92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--st-border);
}

.header-row { display: flex; align-items: center; gap: 1rem; padding: .8rem 0; }

.store-brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; flex: 0 0 auto; }
.brand-mark {
    display: grid; place-items: center;
    width: 34px; height: 34px; border-radius: 9px;
    background: linear-gradient(135deg, var(--st-accent), var(--st-accent-2));
    color: #fff; font-size: 1rem;
}
.brand-name { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; }

.store-search {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: .55rem;
    background: var(--st-surface-2);
    border: 1px solid var(--st-border);
    border-radius: 999px;
    padding: .5rem .95rem;
    max-width: 520px;
}
.store-search i { color: var(--st-muted); }
.store-search input {
    flex: 1; background: none; border: 0; outline: none;
    color: var(--st-text); font-size: .92rem; min-width: 0;
}
.store-search input::placeholder { color: var(--st-muted); }

.store-nav { display: flex; align-items: center; gap: 1rem; margin-left: auto; flex: 0 0 auto; }
.store-nav a { color: var(--st-muted); text-decoration: none; font-size: .9rem; font-weight: 500; }
.store-nav a:hover { color: var(--st-text); }
.store-nav .btn-dev {
    background: var(--st-surface-2); border: 1px solid var(--st-border);
    padding: .45rem .8rem; border-radius: 999px; color: var(--st-text);
}

.category-strip {
    display: flex; gap: .5rem; padding-bottom: .7rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--st-border) transparent;
    /* Fade the trailing edge so a clipped row reads as "more to the right"
       rather than as a broken layout. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
}
.category-strip::-webkit-scrollbar { height: 6px; }
.category-strip::-webkit-scrollbar-track { background: transparent; }
.category-strip::-webkit-scrollbar-thumb { background: var(--st-border); border-radius: 999px; }
.category-strip::-webkit-scrollbar-thumb:hover { background: #38455f; }

/* From tablet up there is room for every category, so wrap onto a second row
   instead of hiding any behind a scroll. */
@media (min-width: 768px) {
    .category-strip {
        flex-wrap: wrap;
        row-gap: .5rem;
        overflow-x: visible;
        -webkit-mask-image: none;
                mask-image: none;
    }
}
.category-strip a {
    white-space: nowrap; text-decoration: none; font-size: .82rem;
    color: var(--st-muted); background: var(--st-surface);
    border: 1px solid var(--st-border); border-radius: 999px; padding: .3rem .75rem;
}
.category-strip a:hover { color: var(--st-text); border-color: #38455f; }

/* -------------------------------------------------------------------- main */

.store-main { padding: 1.75rem 0 3rem; min-height: 60vh; }

.page-head { margin-bottom: 1.25rem; }
.page-head h1 { font-size: 1.7rem; font-weight: 750; margin: 0 0 .2rem; letter-spacing: -.02em; }
.page-head p { color: var(--st-muted); margin: 0; font-size: .92rem; }

/* -------------------------------------------------------------------- hero */

.hero {
    text-align: center;
    padding: 2.5rem 1rem 2.75rem;
    margin-bottom: 1.5rem;
    border-radius: 20px;
    background:
        radial-gradient(800px 340px at 20% 0%, rgba(91,140,255,.18), transparent 60%),
        radial-gradient(700px 320px at 85% 100%, rgba(139,92,246,.16), transparent 60%),
        var(--st-surface);
    border: 1px solid var(--st-border);
}
.hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; margin: 0 0 .4rem; letter-spacing: -.03em; }
.hero > p { color: var(--st-muted); margin: 0 0 1.5rem; font-size: 1.02rem; }

.hero-search {
    display: flex; align-items: center; gap: .6rem;
    max-width: 560px; margin: 0 auto;
    background: var(--st-bg); border: 1px solid var(--st-border);
    border-radius: 999px; padding: .45rem .45rem .45rem 1rem;
}
.hero-search.standalone { margin: 0 0 1.5rem; }
.hero-search i { color: var(--st-muted); }
.hero-search input {
    flex: 1; background: none; border: 0; outline: none;
    color: var(--st-text); font-size: .95rem; min-width: 0;
}
.hero-search input::placeholder { color: var(--st-muted); }
.hero-search button {
    border: 0; border-radius: 999px; padding: .55rem 1.2rem;
    background: linear-gradient(135deg, var(--st-accent), var(--st-accent-2));
    color: #fff; font-weight: 600; cursor: pointer;
}

.hero-note { margin: 1.25rem 0 0; color: var(--st-muted); font-size: .82rem; }

/* --------------------------------------------------------------- app cards */

.app-row { margin-bottom: 2.25rem; }
.row-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .9rem; }
.row-head h2 { font-size: 1.15rem; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.row-head a { color: var(--st-accent); text-decoration: none; font-size: .85rem; font-weight: 600; }

.row-scroll {
    display: flex; gap: .8rem; overflow-x: auto;
    padding-bottom: .6rem; scroll-snap-type: x mandatory;
}
.row-scroll::-webkit-scrollbar { height: 6px; }
.row-scroll::-webkit-scrollbar-thumb { background: var(--st-border); border-radius: 999px; }
.row-scroll .app-card { flex: 0 0 250px; scroll-snap-align: start; }

.app-grid {
    display: grid; gap: .8rem;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.app-card {
    display: flex; align-items: center; gap: .8rem;
    padding: .85rem;
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    text-decoration: none;
    transition: transform .15s, border-color .15s, background .15s;
}
.app-card:hover { transform: translateY(-2px); border-color: #38455f; background: var(--st-surface-2); }

.app-card-icon {
    width: 60px; height: 60px; flex: 0 0 60px;
    border-radius: 14px; object-fit: cover; background: var(--st-surface-2);
}
.app-card-body { min-width: 0; }
.app-card-name {
    font-size: .95rem; font-weight: 650; margin: 0 0 .12rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-card-dev {
    margin: 0 0 .3rem; font-size: .8rem; color: var(--st-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-card-meta { display: flex; gap: .7rem; font-size: .76rem; color: var(--st-muted); }
.app-card-meta i { font-size: .72rem; }

.verified { color: #4ade80; font-size: .78rem; }

/* ---------------------------------------------------------------- category */

.category-grid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.category-grid.large { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.category-tile {
    display: flex; flex-direction: column; gap: .3rem;
    padding: 1rem;
    background: var(--st-surface); border: 1px solid var(--st-border);
    border-radius: var(--st-radius); text-decoration: none;
    transition: transform .15s, border-color .15s;
}
.category-tile:hover { transform: translateY(-2px); border-color: #38455f; }
.category-tile > i { font-size: 1.4rem; color: var(--st-accent); }
.cat-name { font-weight: 650; font-size: .95rem; }
.cat-count { font-size: .78rem; color: var(--st-muted); }
.cat-desc { font-size: .78rem; color: var(--st-muted); }

/* -------------------------------------------------------------- app detail */

.app-detail { max-width: 980px; }

.app-hero { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.app-hero-icon {
    width: 112px; height: 112px; flex: 0 0 112px;
    border-radius: 24px; object-fit: cover; background: var(--st-surface-2);
}
.app-hero-info { flex: 1 1 320px; min-width: 0; }
.app-hero-info h1 { font-size: 1.8rem; font-weight: 780; margin: 0 0 .3rem; letter-spacing: -.02em; }
.app-hero-dev { margin: 0 0 .5rem; font-size: .95rem; }
.app-hero-dev a { color: var(--st-accent); text-decoration: none; font-weight: 600; }

.app-hero-flags { display: flex; gap: .5rem; margin: 0 0 .75rem; }
.app-hero-flags span {
    font-size: .72rem; color: var(--st-muted);
    border: 1px solid var(--st-border); border-radius: 999px; padding: .15rem .55rem;
}

.app-stats {
    display: flex; flex-wrap: wrap; gap: 0;
    margin: 1.1rem 0;
    border: 1px solid var(--st-border); border-radius: 12px; overflow: hidden;
}
.app-stats > div {
    flex: 1 1 90px; padding: .7rem .5rem; text-align: center;
    border-right: 1px solid var(--st-border);
}
.app-stats > div:last-child { border-right: 0; }
.app-stats strong { display: block; font-size: 1rem; font-weight: 700; }
.app-stats strong i { font-size: .78rem; color: #facc15; }
.app-stats span { font-size: .72rem; color: var(--st-muted); }

.download-form { margin: 0; }
.btn-download {
    display: inline-flex; align-items: center; gap: .55rem;
    border: 0; border-radius: 999px; cursor: pointer;
    padding: .8rem 1.8rem;
    background: linear-gradient(135deg, var(--st-accent), var(--st-accent-2));
    color: #fff; font-size: 1rem; font-weight: 650;
}
.btn-download span { font-weight: 400; opacity: .8; font-size: .85rem; }
.btn-download:hover { filter: brightness(1.08); }

.download-note { margin: .6rem 0 0; font-size: .8rem; color: var(--st-muted); }

.app-section { margin-bottom: 2.25rem; }
.app-section h2 { font-size: 1.15rem; font-weight: 700; margin: 0 0 .7rem; }

.app-description { color: #cbd2e0; line-height: 1.7; font-size: .94rem; margin: 0; }

.shot-scroll { display: flex; gap: .7rem; overflow-x: auto; padding-bottom: .6rem; }
.shot-scroll img {
    height: 400px; border-radius: 12px; border: 1px solid var(--st-border);
    flex: 0 0 auto;
}
.shot-scroll::-webkit-scrollbar { height: 6px; }
.shot-scroll::-webkit-scrollbar-thumb { background: var(--st-border); border-radius: 999px; }

.info-grid { display: grid; gap: .1rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin: 0; }
.info-grid > div { padding: .55rem 0; border-bottom: 1px solid var(--st-border); }
.info-grid > div.wide { grid-column: 1 / -1; }
.info-grid dt { font-size: .78rem; color: var(--st-muted); margin: 0; }
.info-grid dd { margin: .15rem 0 0; font-size: .9rem; }
.hash { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; word-break: break-all; }

.app-links { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }
.app-links a { color: var(--st-accent); text-decoration: none; font-size: .88rem; font-weight: 500; }

.perm-heading { font-size: .9rem; font-weight: 650; margin: 1rem 0 .5rem; }
.perm-heading i { color: #facc15; }
.perm-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.perm-list li {
    font-size: .76rem; color: var(--st-muted);
    background: var(--st-surface); border: 1px solid var(--st-border);
    border-radius: 6px; padding: .25rem .55rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.perm-list.dangerous li { border-color: rgba(250,204,21,.35); color: #facc15; }

.version-history { list-style: none; padding: 0; margin: 0; }
.version-history li { padding: .8rem 0; border-bottom: 1px solid var(--st-border); }
.vh-head { display: flex; flex-wrap: wrap; gap: .7rem; align-items: baseline; font-size: .85rem; }
.vh-head code, .vh-head span { color: var(--st-muted); font-size: .78rem; }
.version-history p { margin: .4rem 0 0; font-size: .85rem; color: #cbd2e0; }

/* ----------------------------------------------------------------- ratings */

.rating-summary { display: flex; gap: 2rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.rating-score { text-align: center; }
.rating-score strong { display: block; font-size: 3rem; font-weight: 800; line-height: 1; }
.rating-score .stars { color: #facc15; font-size: .85rem; margin: .3rem 0; }
.rating-score span { font-size: .78rem; color: var(--st-muted); }

.rating-bars { flex: 1 1 260px; display: flex; flex-direction: column; gap: .3rem; justify-content: center; }
.rating-bar { display: flex; align-items: center; gap: .6rem; font-size: .78rem; }
.rb-label { width: .8rem; color: var(--st-muted); }
.rb-track { flex: 1; height: 7px; background: var(--st-surface-2); border-radius: 999px; overflow: hidden; }
.rb-track span { display: block; height: 100%; background: #facc15; border-radius: 999px; }
.rb-count { width: 3rem; text-align: right; color: var(--st-muted); }

.review-list { list-style: none; padding: 0; margin: 0; }
.review-list li { padding: 1rem 0; border-bottom: 1px solid var(--st-border); }
.review-head { display: flex; gap: .7rem; align-items: center; margin-bottom: .35rem; flex-wrap: wrap; }
.review-author { font-weight: 600; font-size: .9rem; }
.review-head .stars { color: #facc15; font-size: .75rem; }
.review-date { color: var(--st-muted); font-size: .76rem; }
.review-list p { margin: .3rem 0 0; font-size: .88rem; color: #cbd2e0; }

/* Edit / delete controls on a user's own review */
.review-actions { display: flex; gap: .9rem; align-items: center; margin-top: .55rem; }
.review-actions a,
.btn-link-danger {
    font-size: .78rem; background: none; border: 0; padding: 0;
    cursor: pointer; text-decoration: underline;
}
.review-actions a { color: var(--st-muted); }
.review-actions a:hover { color: #cbd2e0; }
.btn-link-danger { color: #f87171; }
.btn-link-danger:hover { color: #fca5a5; }
.review-delete { margin-top: .6rem; }

/* "(12.5K)" next to the star score on an app card */
.rating-count { color: var(--st-muted); font-size: .95em; }

.dev-reply {
    margin-top: .7rem; padding: .7rem .9rem;
    background: var(--st-surface); border-left: 3px solid var(--st-accent); border-radius: 0 8px 8px 0;
}
.dev-reply span { font-size: .76rem; color: var(--st-muted); font-weight: 600; }

.report-line { color: var(--st-muted); font-size: .82rem; margin-top: 2rem; }
.report-line a { color: var(--st-accent); }

/* --------------------------------------------------------------- publisher */

.publisher-hero { display: flex; gap: 1.25rem; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; }
.pub-avatar {
    display: grid; place-items: center;
    width: 88px; height: 88px; flex: 0 0 88px; border-radius: 50%;
    background: linear-gradient(135deg, var(--st-accent), var(--st-accent-2));
    color: #fff; font-size: 2.2rem; font-weight: 700;
}
.publisher-hero h1 { font-size: 1.6rem; font-weight: 750; margin: 0 0 .2rem; }
.pub-meta { display: flex; flex-wrap: wrap; gap: 1rem; color: var(--st-muted); font-size: .85rem; margin: .4rem 0; }
.pub-link { color: var(--st-accent); text-decoration: none; font-size: .88rem; font-weight: 600; }

/* ----------------------------------------------------------------- filters */

.listing-filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.25rem; }
.listing-filters select {
    background: var(--st-surface); color: var(--st-text);
    border: 1px solid var(--st-border); border-radius: 999px;
    padding: .45rem 1rem; font-size: .85rem; cursor: pointer;
}

/* -------------------------------------------------------------- empty/page */

.empty-store { text-align: center; padding: 3.5rem 1rem; }
.empty-store i { font-size: 3rem; color: var(--st-muted); opacity: .5; }
.empty-store h2 { font-size: 1.25rem; font-weight: 700; margin: 1rem 0 .4rem; }
.empty-store p { color: var(--st-muted); margin: 0 0 1.25rem; }
.empty-store .btn-primary {
    display: inline-block; text-decoration: none;
    background: linear-gradient(135deg, var(--st-accent), var(--st-accent-2));
    border: 0; color: #fff; padding: .6rem 1.4rem; border-radius: 999px; font-weight: 600;
}

.store-pagination { display: flex; justify-content: center; margin-top: 2rem; }
.store-pagination .pagination { gap: .25rem; }
.store-pagination .page-link {
    background: var(--st-surface); border-color: var(--st-border); color: var(--st-text);
    border-radius: 8px;
}
.store-pagination .page-item.active .page-link { background: var(--st-accent); border-color: var(--st-accent); }
.store-pagination .page-item.disabled .page-link { background: var(--st-surface); color: var(--st-muted); }

/* ------------------------------------------------------------------ footer */

.store-footer { border-top: 1px solid var(--st-border); padding: 2.25rem 0 1.5rem; margin-top: 2rem; }
.footer-grid { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.footer-grid h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--st-muted); margin: 0 0 .7rem; }
.footer-grid a { display: block; color: var(--st-muted); text-decoration: none; font-size: .86rem; margin-bottom: .4rem; }
.footer-grid a:hover { color: var(--st-text); }
.text-muted { color: var(--st-muted); }
.footer-bottom {
    margin-top: 1.75rem; padding-top: 1.25rem;
    border-top: 1px solid var(--st-border);
    color: var(--st-muted); font-size: .78rem;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 767.98px) {
    .header-row { flex-wrap: wrap; }
    .store-search { order: 3; flex-basis: 100%; max-width: none; }
    .store-nav a:not(.btn-dev) { display: none; }
    .app-hero-icon { width: 84px; height: 84px; flex-basis: 84px; }
    .app-hero-info h1 { font-size: 1.4rem; }
    .shot-scroll img { height: 300px; }
    .rating-score strong { font-size: 2.4rem; }
}

@media (prefers-reduced-motion: reduce) {
    .app-card, .category-tile { transition: none; }
}

/* ----------------------------------------------------- accounts & reviews */

.auth-panel {
    max-width: 420px; margin: 1rem auto 3rem;
    background: var(--st-surface); border: 1px solid var(--st-border);
    border-radius: var(--st-radius); padding: 1.75rem;
}
.auth-panel.inline { max-width: none; margin: 0; padding: 0; border: 0; background: none; }
.auth-panel h1 { font-size: 1.5rem; font-weight: 750; margin: 0 0 .3rem; letter-spacing: -.02em; }
.auth-panel > p { margin: 0 0 1.5rem; font-size: .9rem; }
.auth-panel label { display: block; font-size: .82rem; font-weight: 600; margin: .9rem 0 .3rem; }
.auth-panel input, .auth-panel select, .auth-panel textarea,
.report-form input, .report-form select, .report-form textarea,
.review-form input, .review-form textarea {
    width: 100%; background: var(--st-bg); color: var(--st-text);
    border: 1px solid var(--st-border); border-radius: 9px;
    padding: .6rem .8rem; font-size: .92rem; font-family: inherit;
}
.auth-panel input:focus, .auth-panel textarea:focus, .auth-panel select:focus,
.report-form input:focus, .report-form select:focus, .report-form textarea:focus,
.review-form input:focus, .review-form textarea:focus {
    outline: none; border-color: var(--st-accent); box-shadow: 0 0 0 .2rem rgba(91,140,255,.18);
}
.auth-panel button, .report-form button, .review-form button {
    margin-top: 1.1rem; width: 100%; border: 0; border-radius: 999px; cursor: pointer;
    padding: .7rem 1.4rem; font-weight: 650; font-size: .95rem; color: #fff;
    background: linear-gradient(135deg, var(--st-accent), var(--st-accent-2));
}
.report-form button, .review-form button { width: auto; padding: .6rem 1.6rem; }
.auth-panel button:hover, .report-form button:hover, .review-form button:hover { filter: brightness(1.08); }
.auth-panel small { display: block; font-size: .76rem; margin-top: .3rem; }
.field-error { color: #f87171; }
.auth-alt { text-align: center; margin: 1rem 0 0; font-size: .88rem; color: var(--st-muted); }
.auth-alt a { color: var(--st-accent); text-decoration: none; font-weight: 600; }

/* ------------------------------------------------------- sign in with Google
   Google's brand guidelines require their mark on a plain white or plain dark
   button - never recoloured or on a gradient. */
.btn-google {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    width: 100%; padding: .68rem 1.1rem; margin-bottom: .25rem;
    background: #fff; color: #1f1f1f; text-decoration: none;
    border: 1px solid #dadce0; border-radius: 999px;
    font-size: .9rem; font-weight: 600; cursor: pointer;
    transition: box-shadow .15s ease, background .15s ease;
}
.btn-google:hover { background: #f7f8f8; box-shadow: 0 1px 6px rgba(0,0,0,.28); }
.btn-google svg { flex: 0 0 auto; }

.auth-divider {
    display: flex; align-items: center; gap: .75rem;
    margin: 1rem 0; color: var(--st-muted); font-size: .78rem;
}
.auth-divider::before, .auth-divider::after {
    content: ""; flex: 1; height: 1px; background: var(--st-border);
}

.signin-prompt { margin: 0; }
.signin-prompt p { color: var(--st-muted); font-size: .9rem; margin: 0 0 .7rem; }
.signin-prompt .btn-google { max-width: 280px; }

.btn-outline {
    display: inline-block; background: none; color: var(--st-text); cursor: pointer;
    border: 1px solid var(--st-border); border-radius: 999px; padding: .5rem 1.2rem;
    font-size: .88rem; font-weight: 600;
}
.btn-outline:hover { border-color: var(--st-accent); color: var(--st-accent); }

.account-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .account-grid { grid-template-columns: 1.6fr 1fr; } }
.account-side { display: grid; gap: 1.25rem; align-content: start; }

/* ------------------------------------------------------------- account page */

.account-hero { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.account-avatar {
    flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--st-accent), var(--st-accent-2));
    color: #fff; font-size: 1.5rem; font-weight: 700;
}
.account-hero h1 { font-size: 1.7rem; font-weight: 750; margin: 0 0 .15rem; letter-spacing: -.02em; }
.account-hero p { color: var(--st-muted); margin: 0; font-size: .92rem; }

/* Quick stats so the page leads with information, not empty space */
.stat-row {
    display: grid; gap: .75rem; margin-bottom: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.stat-tile {
    background: var(--st-surface); border: 1px solid var(--st-border);
    border-radius: var(--st-radius); padding: .9rem 1rem;
}
.stat-value { display: block; font-size: 1.45rem; font-weight: 750; line-height: 1.1; }
.stat-label { display: block; margin-top: .3rem; font-size: .78rem; color: var(--st-muted); }
.stat-label i { margin-right: .25rem; }

.account-card {
    background: var(--st-surface); border: 1px solid var(--st-border);
    border-radius: var(--st-radius); padding: 1.15rem 1.25rem;
}
.account-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    margin-bottom: .9rem; padding-bottom: .7rem; border-bottom: 1px solid var(--st-border);
}
.account-card-head h2 { font-size: 1.02rem; font-weight: 700; margin: 0; }
.account-card-head h2 i { color: var(--st-accent); margin-right: .4rem; }
.count-badge {
    font-size: .76rem; font-weight: 700; padding: .1rem .55rem; border-radius: 999px;
    background: var(--st-surface-2); border: 1px solid var(--st-border); color: var(--st-muted);
}

/* Readable muted text - the old .text-muted was too dim on this background */
.account-muted { color: var(--st-muted); font-size: .86rem; margin: 0; }
.account-note {
    display: flex; gap: .5rem; align-items: flex-start;
    background: var(--st-surface-2); border: 1px solid var(--st-border);
    border-radius: 10px; padding: .6rem .8rem; margin: 0 0 .9rem;
    font-size: .83rem; color: var(--st-text);
}
.account-note i { color: #facc15; }

/* Compact empty state for use inside a card */
.empty-inline { text-align: center; padding: 2.25rem 1rem 1.75rem; }
.empty-inline i { font-size: 2.5rem; color: var(--st-muted); opacity: .45; }
.empty-inline h3 { font-size: 1.05rem; font-weight: 700; margin: .8rem 0 .35rem; }
.empty-inline p { color: var(--st-muted); margin: 0 0 1.1rem; font-size: .88rem; }
.empty-inline .btn-primary {
    display: inline-block; text-decoration: none;
    background: linear-gradient(135deg, var(--st-accent), var(--st-accent-2));
    border: 0; color: #fff; padding: .55rem 1.3rem; border-radius: 999px;
    font-weight: 600; font-size: .88rem;
}
.empty-inline .btn-primary:hover { filter: brightness(1.08); }

.account-card .review-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.account-card .report-list li:last-child { border-bottom: 0; }

.status-pill {
    font-size: .7rem; padding: .12rem .55rem; border-radius: 999px;
    border: 1px solid var(--st-border); color: var(--st-muted);
}
.status-approved { color: #4ade80; border-color: rgba(74,222,128,.4); }
.status-pending, .status-open, .status-reviewing { color: #facc15; border-color: rgba(250,204,21,.4); }
.status-rejected, .status-hidden { color: #f87171; border-color: rgba(248,113,113,.4); }

.report-list { list-style: none; padding: 0; margin: 0; }
.report-list li { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
                  padding: .6rem 0; border-bottom: 1px solid var(--st-border); font-size: .86rem; }
.report-list a { color: var(--st-accent); text-decoration: none; font-weight: 600; }

/* ------------------------------------------------------------ review form */

.review-form {
    background: var(--st-surface); border: 1px solid var(--st-border);
    border-radius: var(--st-radius); padding: 1.25rem; margin-bottom: 1.75rem;
}
.review-form h3 { font-size: 1rem; font-weight: 650; margin: 0 0 .75rem; }
.review-form input, .review-form textarea { margin-bottom: .7rem; }

/* Stars render right-to-left so CSS sibling selectors can light up the row. */
.star-picker { display: inline-flex; flex-direction: row-reverse; gap: .2rem; margin-bottom: .9rem; }
.star-picker input { position: absolute; opacity: 0; width: 0; height: 0; }
.star-picker label { cursor: pointer; font-size: 1.5rem; color: var(--st-border); transition: color .12s; }
.star-picker label:hover,
.star-picker label:hover ~ label,
.star-picker input:checked ~ label { color: #facc15; }
.star-picker input:focus-visible + label { outline: 2px solid var(--st-accent); border-radius: 4px; }

.signin-prompt {
    background: var(--st-surface); border: 1px solid var(--st-border);
    border-radius: var(--st-radius); padding: 1rem 1.25rem;
    color: var(--st-muted); font-size: .9rem; margin-bottom: 1.75rem;
}
.signin-prompt a { color: var(--st-accent); text-decoration: none; font-weight: 650; }

/* ------------------------------------------------------------ report form */

.report-box {
    background: var(--st-surface); border: 1px solid var(--st-border);
    border-radius: var(--st-radius); padding: 1rem 1.25rem;
}
.report-box summary { cursor: pointer; font-size: .9rem; color: var(--st-muted); font-weight: 600; }
.report-box summary::marker { color: var(--st-muted); }
.report-box[open] summary { margin-bottom: 1rem; color: var(--st-text); }
.report-form label { display: block; font-size: .82rem; font-weight: 600; margin: .8rem 0 .3rem; }

/* ---------------------------------------------------------------- platform
   Android apps are hosted here; iOS entries are listings that open the App
   Store. The badge tells a visitor which before they tap. */
.platform-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .02em;
    padding: .18rem .5rem; border-radius: 999px; vertical-align: middle;
    border: 1px solid transparent; text-transform: uppercase;
}
.platform-badge.platform-android { color: #1b7f3b; background: #e7f6ec; border-color: #bfe6cc; }
.platform-badge.platform-ios     { color: #1d4ed8; background: #e8eeff; border-color: #c7d5ff; }

.platform-dot { font-size: .72rem; margin-left: .28rem; vertical-align: baseline; }
.platform-dot.platform-android { color: #1b7f3b; }
.platform-dot.platform-ios     { color: #1d4ed8; }

@media (prefers-color-scheme: dark) {
    .platform-badge.platform-android { color: #7ee2a3; background: #12301d; border-color: #1f5233; }
    .platform-badge.platform-ios     { color: #a9c1ff; background: #16203f; border-color: #2b3d6b; }
    .platform-dot.platform-android { color: #7ee2a3; }
    .platform-dot.platform-ios     { color: #a9c1ff; }
}

/* ------------------------------------------------------- platform chips
   Homepage quick filters. Each links to the browse page pre-filtered, so
   the same listing code serves them - no separate per-platform page. */
.platform-chips {
    display: flex; flex-wrap: wrap; gap: .55rem;
    justify-content: center; margin: 1.15rem 0 0;
}
.platform-chip {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .45rem .95rem; border-radius: 999px;
    font-size: .85rem; font-weight: 600; text-decoration: none;
    border: 1px solid var(--st-border, #d9dee5);
    background: var(--st-surface, #fff); color: var(--st-text, #1a1d21);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.platform-chip:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.platform-chip span {
    font-size: .74rem; font-weight: 700; padding: .1rem .42rem;
    border-radius: 999px; background: rgba(0,0,0,.06); color: inherit;
}
.platform-chip.chip-android { border-color: #bfe6cc; color: #1b7f3b; }
.platform-chip.chip-android span { background: #e7f6ec; }
.platform-chip.chip-ios { border-color: #c7d5ff; color: #1d4ed8; }
.platform-chip.chip-ios span { background: #e8eeff; }

@media (prefers-color-scheme: dark) {
    .platform-chip { background: #161a1f; border-color: #2a3038; color: #e6e9ee; }
    .platform-chip span { background: rgba(255,255,255,.08); }
    .platform-chip.chip-android { border-color: #1f5233; color: #7ee2a3; }
    .platform-chip.chip-android span { background: #12301d; }
    .platform-chip.chip-ios { border-color: #2b3d6b; color: #a9c1ff; }
    .platform-chip.chip-ios span { background: #16203f; }
}

/* A platform with nothing published yet stays visible but reads as quiet,
   so the store still advertises that it covers both. */
.platform-chip.is-empty { opacity: .62; }
.platform-chip.is-empty:hover { opacity: 1; }

/* =============================================================================
   Homepage v2 - animated hero, reveal-on-scroll, category tiles, publisher CTA
   Scoped to homepage-only classes so browse, search and detail pages keep the
   original look. All motion is disabled under prefers-reduced-motion below.
   ========================================================================== */

.reveal, .app-row {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s cubic-bezier(.22,.61,.36,1),
                transform .55s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
}
.reveal.is-visible, .app-row.is-visible { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- hero v2 */

.hero-v2 {
    position: relative;
    overflow: hidden;
    padding: 3.4rem 1.25rem 3rem;
    border-radius: 26px;
    background: linear-gradient(165deg, #141824 0%, #10131b 55%, #0f1116 100%);
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 24px 60px -30px rgba(0,0,0,.9);
}
.hero-inner { position: relative; z-index: 2; text-align: center; }

/* Slow drifting colour orbs behind the content. */
.hero-aurora { position: absolute; inset: -30%; z-index: 1; filter: blur(60px); opacity: .75; }
.hero-aurora .orb { position: absolute; display: block; border-radius: 50%; }
.orb-1 {
    width: 46%; height: 60%; left: 4%; top: 6%;
    background: radial-gradient(circle, rgba(91,140,255,.55), transparent 68%);
    animation: orbDrift1 19s ease-in-out infinite;
}
.orb-2 {
    width: 42%; height: 56%; right: 2%; top: 18%;
    background: radial-gradient(circle, rgba(139,92,246,.5), transparent 68%);
    animation: orbDrift2 23s ease-in-out infinite;
}
.orb-3 {
    width: 38%; height: 48%; left: 32%; bottom: 0;
    background: radial-gradient(circle, rgba(34,211,238,.34), transparent 70%);
    animation: orbDrift3 27s ease-in-out infinite;
}
@keyframes orbDrift1 {
    0%,100% { transform: translate3d(0,0,0) scale(1); }
    50%     { transform: translate3d(14%,8%,0) scale(1.14); }
}
@keyframes orbDrift2 {
    0%,100% { transform: translate3d(0,0,0) scale(1.06); }
    50%     { transform: translate3d(-12%,10%,0) scale(.92); }
}
@keyframes orbDrift3 {
    0%,100% { transform: translate3d(0,0,0) scale(.95); }
    50%     { transform: translate3d(8%,-12%,0) scale(1.18); }
}

.hero-eyebrow {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .76rem; font-weight: 600; letter-spacing: .01em;
    color: #b9c4dc;
    padding: .38rem .85rem; margin-bottom: 1.1rem;
    border-radius: 999px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.09);
    backdrop-filter: blur(6px);
}
.hero-eyebrow i { color: #5eead4; }

.hero-title {
    font-size: clamp(2.1rem, 6vw, 3.6rem);
    font-weight: 850; letter-spacing: -.035em; line-height: 1.05;
    margin: 0 0 .55rem;
}
.grad-text {
    background: linear-gradient(100deg, #ffffff 8%, #a9c1ff 34%, #c4b5fd 58%, #67e8f9 82%, #ffffff 96%);
    background-size: 220% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: gradShift 9s linear infinite;
}
@keyframes gradShift { to { background-position: 220% center; } }

.hero-sub {
    color: #9fabc4; margin: 0 auto 1.7rem; font-size: clamp(.95rem, 2vw, 1.12rem);
    max-width: 46ch;
}

.hero-search-v2 {
    max-width: 620px;
    background: rgba(10,12,17,.72);
    border: 1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(10px);
    padding: .5rem .5rem .5rem 1.15rem;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.hero-search-v2:focus-within {
    border-color: rgba(91,140,255,.65);
    box-shadow: 0 0 0 4px rgba(91,140,255,.14), 0 14px 40px -18px rgba(91,140,255,.7);
    transform: translateY(-1px);
}
.hero-search-v2 button {
    position: relative; overflow: hidden;
    padding: .6rem 1.5rem;
    box-shadow: 0 6px 20px -8px rgba(99,102,241,.9);
    transition: transform .16s ease, box-shadow .16s ease;
}
.hero-search-v2 button:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -8px rgba(99,102,241,1); }
.hero-search-v2 button span { position: relative; z-index: 2; }
.hero-search-v2 button::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.42) 50%, transparent 80%);
    transform: translateX(-120%);
    animation: sheen 4.5s ease-in-out infinite;
}
@keyframes sheen { 0%,62% { transform: translateX(-120%); } 88%,100% { transform: translateX(120%); } }

.hero-v2 .platform-chips { margin-top: 1.4rem; }
.hero-v2 .platform-chip {
    background: rgba(255,255,255,.055);
    border-color: rgba(255,255,255,.11);
    color: #e8eaf0;
    backdrop-filter: blur(6px);
}
.hero-v2 .platform-chip:hover { background: rgba(255,255,255,.1); }
.hero-v2 .platform-chip.chip-android { color: #86efac; border-color: rgba(134,239,172,.32); }
.hero-v2 .platform-chip.chip-ios     { color: #a5b4fc; border-color: rgba(165,180,252,.34); }

.hero-stats {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 2.4rem;
    margin: 2.1rem 0 0; padding: 1.35rem 0 0;
    border-top: 1px solid rgba(255,255,255,.07);
}
.hero-stats .stat { display: flex; flex-direction: column; text-align: center; }
.hero-stats dt {
    order: 2; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
    color: #8792a8; margin-top: .2rem;
}
.hero-stats dd {
    order: 1; margin: 0; font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 800;
    letter-spacing: -.02em;
    background: linear-gradient(135deg, #ffffff, #9fb4e8);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* ----------------------------------------------------------- category tiles */

.category-tile { transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.category-tile:hover { transform: translateY(-3px); }
.category-tile i { transition: transform .18s ease, color .18s ease; }
.category-tile:hover i { transform: scale(1.16); color: var(--st-accent); }

/* ------------------------------------------------------------ publisher CTA */

.publish-cta {
    position: relative; overflow: hidden;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1.5rem; margin: 0 0 2.5rem;
    padding: 2.1rem 1.9rem;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(91,140,255,.14), rgba(139,92,246,.13) 55%, rgba(34,211,238,.1));
    border: 1px solid rgba(255,255,255,.09);
}
.cta-glow {
    position: absolute; width: 460px; height: 460px; right: -150px; top: -220px;
    background: radial-gradient(circle, rgba(139,92,246,.4), transparent 66%);
    filter: blur(46px); animation: orbDrift2 21s ease-in-out infinite;
}
.cta-body { position: relative; z-index: 2; max-width: 56ch; }
.cta-body h2 { margin: 0 0 .45rem; font-size: clamp(1.2rem, 2.6vw, 1.6rem); font-weight: 800; letter-spacing: -.02em; }
.cta-body p { margin: 0; color: #a8b3c9; font-size: .93rem; line-height: 1.55; }
.cta-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: .7rem; }
.cta-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .72rem 1.35rem; border-radius: 999px;
    font-size: .9rem; font-weight: 650; text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.cta-btn-primary {
    background: linear-gradient(135deg, var(--st-accent), var(--st-accent-2));
    color: #fff; box-shadow: 0 10px 26px -12px rgba(99,102,241,1);
}
.cta-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(99,102,241,1); }
.cta-btn-ghost { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); color: #e8eaf0; }
.cta-btn-ghost:hover { background: rgba(255,255,255,.13); transform: translateY(-2px); }

@media (max-width: 640px) {
    .hero-v2 { padding: 2.5rem 1rem 2.2rem; border-radius: 20px; }
    .hero-stats { gap: 1.5rem; }
    .publish-cta { padding: 1.6rem 1.25rem; }
    .cta-actions { width: 100%; }
    .cta-btn { flex: 1 1 auto; justify-content: center; }
}

/* Motion here is decoration - remove all of it when the visitor asks. */
@media (prefers-reduced-motion: reduce) {
    .reveal, .app-row { opacity: 1; transform: none; transition: none; }
    .orb-1, .orb-2, .orb-3, .cta-glow, .grad-text,
    .hero-search-v2 button::after { animation: none; }
    .category-tile, .category-tile i, .cta-btn,
    .hero-search-v2, .hero-search-v2 button { transition: none; }
}