/* ============================================================
   Project entry point.
   1. vars.css  — all CSS variables (colors, spacing, fonts)
   2. elitma.css — structural styles (never put colors here directly)
   3. This file — project-specific overrides and additions
   ============================================================ */

@import 'vars.css';
@import 'elitma.css';

/* ── Project-specific styles go below ─────────────────── */

/* ── Admin section dashboard "hub" cards ──────────────────────────────
   Used on every /admin/{section}/ root page. Cards link to sub-pages
   like /list/, /new/, /stats/. Pattern documented in
   IA_MD/guides/admin_sections.md §0. */
.admin-hub {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-4);
}
.admin-hub__card {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    padding: var(--space-5);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.admin-hub__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
    color: inherit;
}
.admin-hub__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.12);
    color: var(--color-primary);
    font-size: 22px !important;
    margin-bottom: var(--space-3);
}
.admin-hub__card h3 {
    margin: 0 0 var(--space-1);
    font-size: 1.05rem;
    font-weight: 600;
}
.admin-hub__card p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.88rem;
    line-height: 1.4;
}
.admin-hub__count {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    background: var(--color-bg-muted);
    color: var(--color-text-muted);
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--color-border);
}
/* "Coming soon" cards — render as <span> so they're visually present
   but not clickable. */
.admin-hub__card--soon {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
}
.admin-hub__card--soon:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--color-border);
}
.admin-hub__card--soon .admin-hub__icon {
    background: rgba(148, 163, 184, 0.12);
    color: var(--color-text-muted);
}


/* ── Follow button (Following = outline w/ check icon) ─────────────── */
.btn.is-following:hover .js-follow-label::after {
    content: ' · Unfollow?';
    opacity: 0.7;
    margin-left: 4px;
    font-weight: 400;
}

/* ── Report modal (shared between user + post) ─────────────────────── */
.report-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s;
}
.report-modal.is-open { opacity: 1; pointer-events: auto; }
.report-modal__panel {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    width: min(440px, 100%);
    padding: var(--space-5);
    box-shadow: var(--shadow-md);
    max-height: 90vh;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.report-modal__title {
    margin: 0 0 var(--space-3);
    font-size: 1.15rem;
}
.report-modal__error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.88rem;
    margin: 0 0 var(--space-3);
}
.report-modal__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    margin-top: var(--space-2);
}
.report-modal__reason,
.report-modal__notes {
    width: 100%;
}
.report-modal__notes { min-height: 80px; resize: vertical; }
.report-modal__counter {
    text-align: right;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}
.report-modal__btns {
    margin-top: var(--space-4);
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
}


/* ── Profile stats row (posts / likes / followers / level) ─────────── */
.profile-card__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}
.profile-card__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}
.profile-card__stat-num {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
}
.profile-card__stat-lbl {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.profile-card__stat--level {
    line-height: 1;
}
.profile-card__stat--level .level-badge {
    display: block;
    margin-bottom: 2px;
}
.level-badge { vertical-align: middle; }

/* ── Profile mini-grid ("My posts" / "Saved" on /account/) ─────────── */
.profile-grid {
    margin-top: var(--space-6);
}
.profile-grid__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}
.profile-grid__title {
    margin: 0;
    font-size: 1.1rem;
}
.profile-grid__see-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-link);
    font-size: 0.9rem;
    text-decoration: none;
}
.profile-grid__see-more:hover { text-decoration: underline; }
.profile-grid__see-more .material-symbols-outlined { font-size: 16px; }

.profile-grid__items {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-3);
}
@media (max-width: 900px) { .profile-grid__items { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .profile-grid__items { grid-template-columns: repeat(2, 1fr); } }

.profile-grid__card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    transition: transform 0.12s, box-shadow 0.12s;
}
.profile-grid__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    color: inherit;
}
.profile-grid__cover {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #000;
    overflow: hidden;
}
.profile-grid__cover img,
.profile-grid__cover video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.profile-grid__badge,
.profile-grid__price,
.profile-grid__hidden-tag {
    position: absolute;
    background: rgba(0,0,0,0.65);
    color: #fff;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 0.72rem;
    backdrop-filter: blur(4px);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.profile-grid__badge { top: 6px; right: 6px; }
.profile-grid__badge .material-symbols-outlined { font-size: 16px; }
.profile-grid__price { bottom: 6px; right: 6px; }
.profile-grid__price .material-symbols-outlined { font-size: 12px; }
.profile-grid__hidden-tag {
    top: 6px; left: 6px;
    background: rgba(220, 38, 38, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
/* "Banned" / "Hidden" pill on the bigger explore-card (used by the
   owner-only /account/posts/ page). */
.explore-card__hidden-tag {
    position: absolute;
    top: 8px; left: 8px;
    background: rgba(220, 38, 38, 0.9);
    color: #fff;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}

/* Profile sections (Posts preview on /u/{publicid}/, etc.) */
.profile-section {
    margin-top: var(--space-6);
}
.profile-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.profile-section__title {
    margin: 0;
    font-size: 1.25rem;
}
.profile-section__see-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-muted);
    font-weight: 500;
}
.profile-section__see-more:hover { color: var(--color-text); }

.profile-grid__title-row {
    padding: 6px 8px;
    font-size: 0.82rem;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ── Explore feed (4 cols × 5 rows = 20) and post page ──────────────── */
.explore-page { max-width: var(--container-max); margin: 0 auto; }

.explore-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin: var(--space-6) 0;
}
@media (max-width: 900px) { .explore-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .explore-grid { grid-template-columns: repeat(2, 1fr); } }

.explore-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 0;
    overflow: hidden;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    transition: transform 0.15s, box-shadow 0.15s;
}
.explore-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: inherit;
}
.explore-card__cover {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #000;
    overflow: hidden;
}
.explore-card__cover img,
.explore-card__cover video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.explore-card__badge,
.explore-card__price {
    position: absolute;
    top: 8px; right: 8px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.8rem;
    backdrop-filter: blur(4px);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.explore-card__price { top: auto; bottom: 8px; right: 8px; }
.explore-card__price .material-symbols-outlined { font-size: 14px; }
.explore-card__badge .material-symbols-outlined { font-size: 18px; }

.explore-card__title {
    padding: 10px 12px;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: calc(2 * 1.35em + 20px);
}

.explore-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    align-items: center;
    margin: var(--space-8) 0;
}
.explore-pager__btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
    text-decoration: none;
    background: var(--color-bg-card);
    font-size: 0.9rem;
}
.explore-pager__btn:hover { background: var(--color-bg-muted); }
.explore-pager__btn.is-active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.explore-pager__btn.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}
.explore-pager__btn .material-symbols-outlined { font-size: 18px; }
.explore-pager__gap { padding: 6px 4px; color: var(--color-text-muted); }

/* ── Post detail page ─────────────────────────────────────────────── */
.post-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--space-6) var(--container-pad);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.post-page__title { font-size: 1.7rem; margin: 0; }
.post-page__author {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin: 0;
}
.post-page__media {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
/* Each item is a fixed-height "letterbox" — the actual image sits at the
   center scaled to fit the height (object-fit:contain). The empty space
   on either side is filled by the SAME image, scaled to 130% and heavily
   blurred, creating a smooth color-bleed effect instead of black bars. */
.post-page__media-item {
    position: relative;
    height: 500px;
    width: 100%;
    overflow: hidden;
    background: #000;
    cursor: zoom-in;
}
.post-page__media-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.3);
    filter: blur(28px);
    opacity: 0.7;
}
.post-page__media-img,
.post-page__media-video {
    position: relative;
    z-index: 1;
    height: 100%;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    display: block;
    object-fit: contain;
}
.post-page__media-video { cursor: default; }

/* ── Fullscreen media lightbox ───────────────────────────────────── */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s;
}
.lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
}
.lightbox__media {
    max-width: calc(100vw - 120px);
    max-height: calc(100vh - 80px);
    object-fit: contain;
    display: block;
}
.lightbox__btn {
    position: absolute;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    transition: background 0.15s, transform 0.1s;
}
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.25); }
.lightbox__btn:active { transform: scale(0.92); }
.lightbox__btn .material-symbols-outlined { font-size: 28px; }
.lightbox__btn--close { top: 20px; right: 20px; }
.lightbox__btn--prev  { left: 20px;  top: 50%; transform: translateY(-50%); }
.lightbox__btn--next  { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__btn--prev:active,
.lightbox__btn--next:active { transform: translateY(-50%) scale(0.92); }
.lightbox__counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    background: rgba(0, 0, 0, 0.4);
    padding: 6px 14px;
    border-radius: 999px;
    backdrop-filter: blur(8px);
}
@media (max-width: 600px) {
    .lightbox__media { max-width: calc(100vw - 32px); max-height: calc(100vh - 120px); }
    .lightbox__btn--prev { left: 8px;  }
    .lightbox__btn--next { right: 8px; }
}
.post-page__paywall {
    padding: var(--space-8) var(--space-5);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
    color: var(--color-text-muted);
    background: var(--color-bg-muted);
}
.post-page__access-reason {
    margin: var(--space-2) 0 var(--space-3);
    color: #1f9d4d;
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.post-page__access-reason .material-symbols-outlined {
    font-size: 20px;
}

/* ════════════════════════════════════════════════════════════════════
   Community + physical-products pages
   ════════════════════════════════════════════════════════════════════ */
.community-page {
    max-width: 1000px;
    margin: 0 auto;
}

/* Top banner — full width of the container, clickable. Fixed height
   between 100 and 120px so the banner is a thin attention-grabber, not
   a hero. Background-image is `cover` so the banner asset crops to fit
   regardless of its native aspect ratio. */
.community-banner {
    display: block;
    position: relative;
    width: 100%;
    height: 120px;
    min-height: 100px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    margin-bottom: var(--space-6);
    text-decoration: none;
}
.community-banner__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(120deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 60%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-3) var(--space-5);
    color: #fff;
}
.community-banner__title {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.1;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.community-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
}
@media (max-width: 600px) {
    .community-banner__title { font-size: 1.05rem; }
}

/* Online-users line under the banner */
.community-online {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 24px;
    padding: 6px 12px;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 999px;
    font-size: 0.9rem;
    color: #15803d;
    font-weight: 600;
}
.community-online__text { color: inherit; }
.community-online__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    animation: online-pulse 2s ease-out infinite;
}
@keyframes online-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);   }
    100% { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0);   }
}

/* Community activities section */
.community-activities { margin: 28px 0 48px; }
.community-activities__heading {
    margin: 0 0 18px;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}
.community-activities__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 18px;
}
.activity-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 26px 24px;
    min-height: 130px;
    border-radius: 18px;
    text-decoration: none;
    color: #fff;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}
.activity-card::before {
    /* subtle radial accent so the card has depth, not just a flat gradient */
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 60%);
    pointer-events: none;
    z-index: -1;
}
.activity-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}
.activity-card__icon {
    width: 68px; height: 68px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 2rem !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.activity-card__body { flex: 1; min-width: 0; }
.activity-card__body h3 {
    margin: 0 0 6px;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}
.activity-card__body p {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.45;
}
.activity-card__arrow {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.6rem !important;
    transition: transform 0.18s ease;
}
.activity-card:hover .activity-card__arrow { transform: translateX(6px); }

/* Per-activity color schemes — extend by adding a new modifier */
.activity-card--challenges {
    background: linear-gradient(135deg, #ec4899 0%, #f59e0b 55%, #facc15 100%);
}

.community-intro {
    text-align: center;
    padding: var(--space-6) 0;
}
.community-intro h1 { margin-bottom: var(--space-2); }
.community-intro p  { max-width: 520px; margin: 0 auto var(--space-4); }

/* Girls grid */
.girls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-4);
}
.girl-card {
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-container, #fff);
    border: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s;
}
.girl-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.girl-card__photo {
    aspect-ratio: 4 / 5;
    background-size: cover;
    background-position: center;
    background-color: #000;
}
.girl-card__body { padding: var(--space-3); }
.girl-card__name { margin: 0 0 4px; font-size: 1.1rem; }
.girl-card__meta { margin: 0; color: var(--color-text-muted); font-size: 0.85rem; }

/* Girl profile page */
.girl-profile {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-6);
    align-items: start;
}
.girl-profile__photo img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-lg);
    display: block;
}
.girl-profile__meta { color: var(--color-text-muted); margin: var(--space-2) 0; }
.girl-profile__bio  { line-height: 1.5; max-width: 540px; }
@media (max-width: 720px) {
    .girl-profile { grid-template-columns: 1fr; }
}

/* Product picker (cards with hidden checkbox) */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-3);
}
.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-4);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-container, #fff);
    cursor: pointer;
    user-select: none;
    transition: border-color 0.12s, background 0.12s;
}
.product-card__pick { position: absolute; opacity: 0; pointer-events: none; }
.product-card__check {
    position: absolute;
    top: 10px; right: 10px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
}
.product-card__pick:checked ~ .product-card__check { display: inline-flex; }
.product-card:has(input:checked) {
    border-color: var(--color-primary);
    background: rgba(46, 158, 58, 0.04);
}
.product-card__kind {
    font-weight: 700;
    font-size: 1.05rem;
    text-transform: capitalize;
}
.product-card__price { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.product-card__eur { font-weight: 700; font-size: 1.3rem; }
.product-card__diamonds { font-size: 0.85rem; color: var(--color-text-muted); }
.product-card__stock {
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--color-error-text, #d92929);
    font-weight: 600;
}
.products-form__cta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
    flex-wrap: wrap;
}

/* Checkout */
.checkout-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: var(--space-6);
    align-items: start;
}
@media (max-width: 880px) { .checkout-grid { grid-template-columns: 1fr; } }
.checkout-summary {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    background: var(--color-bg-container, #fff);
    position: sticky;
    top: var(--space-4);
}
.checkout-summary__head {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    margin-bottom: var(--space-4);
}
.checkout-summary__photo {
    width: 64px; height: 64px;
    object-fit: cover;
    border-radius: 50%;
}
.checkout-summary__items {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-3);
    border-top: 1px solid var(--color-border);
}
.checkout-summary__items li {
    display: flex;
    justify-content: space-between;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}
.checkout-summary__kind { text-transform: capitalize; }
.checkout-summary__row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
}
.checkout-summary__row--total {
    font-size: 1.2rem;
    font-weight: 700;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-3);
    margin-top: var(--space-2);
}
.checkout-summary__row--alt { font-size: 0.9rem; color: var(--color-text-muted); }
.checkout-summary__guarantee {
    margin: var(--space-4) 0 0;
    padding: var(--space-3);
    background: var(--color-bg-muted);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    display: flex;
    gap: 6px;
    align-items: center;
    color: var(--color-text-muted);
}
.checkout-form {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    background: var(--color-bg-container, #fff);
}

/* Payment options */
.payment-options { display: flex; flex-direction: column; gap: var(--space-2); }
.payment-option {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}
.payment-option:has(input:checked) {
    border-color: var(--color-primary);
    background: rgba(46, 158, 58, 0.04);
}
.payment-option.is-disabled { opacity: 0.5; cursor: not-allowed; }
.payment-option input { margin-top: 4px; }
.payment-option__body { display: flex; flex-direction: column; gap: 4px; }
.payment-option__title { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.payment-option__detail { font-size: 0.9rem; color: var(--color-text-muted); }
.payment-option__badge {
    background: var(--color-primary);
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* ── Admin tabs (used by /admin/users/view/, /admin/tickets/view/, etc.) ──
      ElitmaTabs-style component — emitted by user_view.php and ticket_view.php
      but no styles existed in either elitma.css or main.css. Without these
      rules the tabs render as plain bare buttons stacked left-to-right with
      no visual separation. */
.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 1px solid var(--color-border);
    margin-top: var(--space-4);
}
.admin-tabs__btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 14px;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: -1px;
    border-radius: 4px 4px 0 0;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    font-family: inherit;
}
.admin-tabs__btn:hover {
    color: var(--color-text);
    background: var(--color-bg-muted);
}
.admin-tabs__btn--active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 600;
    background: transparent;
}
.admin-tabs__btn .badge {
    margin-left: 4px;
}
.admin-tab-panel.hidden { display: none; }

/* ── Framework gap: ElitmaPaginator (.pagination / .pagination__list /
      .pagination__link) emits markup with no matching CSS in elitma.css.
      Without these rules the <ul> falls back to default block layout and
      the pager renders vertically. Mirroring the .explore-pager look. */
.pagination {
    margin: var(--space-8) 0;
}
.pagination__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}
.pagination__list > li { margin: 0; }
.pagination__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    background: var(--color-bg);
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    min-width: 36px;
    justify-content: center;
}
.pagination__link:hover { background: var(--color-bg-muted); }
.pagination__link--active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    cursor: default;
}
.pagination__link--disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ── Steam-style review face (replaces raw like / dislike counts) ─── */
.post-page__review {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    padding: 0 var(--space-2);
    user-select: none;
}
.post-page__review[hidden],
.js-vote-group[hidden] { display: none; }
.post-page__review .material-symbols-outlined { font-size: 22px; }
.post-page__review--neutral      { color: #888; }
.post-page__review--negative     { color: #d92929; }
.post-page__review--mixed        { color: #888; }
.post-page__review--positive     { color: #2e9e3a; }
.post-page__review--overwhelming { color: #3aacb8; }

/* ── Post stats page (owner / admin only) ─────────────────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-4);
}
.stats-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-muted);
}
.stats-card h3 {
    margin: 0 0 var(--space-2);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}
.stats-card__big {
    margin: 0 0 var(--space-3);
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
}
.stats-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--color-text-muted);
}
.stats-card__list li { font-size: 14px; }
.post-page__paywall-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-3);
}
.post-page__paywall-perk {
    margin: 0 auto var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: rgba(255, 200, 0, 0.08);
    border: 1px solid rgba(255, 200, 0, 0.25);
    color: var(--color-text);
    max-width: 520px;
    line-height: 1.4;
}
.post-page__paywall-perk a {
    text-decoration: underline;
}
.post-page__actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    align-items: center;
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.post-page__actions .btn .material-symbols-outlined { font-size: 18px; }
.post-page__actions .btn.is-on { background: var(--color-primary); color: #fff; }
.post-page__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.post-page__tag {
    display: inline-flex;
    align-items: center;
    background: var(--color-bg-muted);
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--color-text);
    font-size: 0.85rem;
    text-decoration: none;
}
.post-page__tag:hover { background: var(--color-primary); color: #fff; }
.post-page__related h2 {
    font-size: 1.1rem;
    margin: var(--space-6) 0 var(--space-3);
}
.post-page__viewstats {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}


/* ── Admin layout fix ──────────────────────────────────────
   elitma.css declares `main { width: 100%; margin: 0 auto }` for the
   public layout. The admin override only sets `margin-left:
   var(--sidebar-width)`, leaving `width: 100%` intact — so admin main's
   total box is 100vw + sidebar-width, causing a horizontal scrollbar
   whenever an admin page's form/table pushes near the viewport edge.
   This patch makes admin main fill the space *next to* the fixed sidebar
   instead of overflowing past it, mirroring the responsive breakpoints
   in elitma.css. */
.admin-body main {
    width: calc(100% - var(--sidebar-width));
    margin-right: 0;
}
@media (max-width: 1024px) {
    /* Sidebar narrows to the icon-only width. */
    .admin-body main { width: calc(100% - var(--sidebar-width-sm)); }
}
@media (max-width: 768px) {
    /* Sidebar becomes static / full-width — main goes full-width too. */
    .admin-body main { width: 100%; }
}

/* ── Profile page (own + public) ───────────────────────── */
.profile-page {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-8) var(--container-pad);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* ── Settings page (stacked cards with breathing room) ── */
.settings-page {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-6) var(--container-pad) var(--space-12);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.settings-page .page-header { margin-bottom: var(--space-2); }

.card--danger {
    border-color: rgba(220, 38, 38, 0.45);
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.15) inset, var(--shadow-sm);
}
.card--danger h2 { color: #f87171; }

/* ── Legal / long-form pages (cookies, terms, videochat help) ── */
.legal-page {
    max-width: 820px;
    margin: 0 auto;
    padding: var(--space-8) var(--container-pad) var(--space-12);
    line-height: var(--line-height);
}
.legal-page h1 {
    margin: 0 0 var(--space-2);
}
.legal-page h2 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
    font-size: var(--font-size-xl);
    color: var(--color-primary-light);
}
.legal-page p { margin: 0 0 var(--space-4); }
.legal-page ul { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
.legal-page li { margin-bottom: var(--space-2); }
.legal-page .lead {
    font-size: var(--font-size-lg);
    color: var(--color-text);
}
.legal-page code {
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: var(--font-family-mono);
    font-size: 0.92em;
}
.legal-page table { margin-bottom: var(--space-6); }
.legal-page .btn .material-symbols-outlined {
    margin-right: var(--space-2);
    font-size: 20px;
    vertical-align: -4px;
}

/* Submit buttons inside card forms shouldn't be glued to the last input. */
.card__body form > button[type="submit"],
.card__body form > .btn {
    margin-top: var(--space-4);
}

.profile-page__notice {
    border-left: 4px solid var(--color-warning);
}

.profile-card {
    background: var(--color-bg-container);
    border: 1px solid var(--color-container-border);
    border-radius: var(--radius-lg);
    color: var(--color-text-container);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
}

.profile-card__top {
    display: flex;
    gap: var(--space-6);
    align-items: flex-start;
}

.profile-card__avatar-wrap {
    flex: 0 0 auto;
}

.profile-card__avatar {
    width: 128px;
    height: 128px;
    border-radius: var(--radius-full);
    object-fit: cover;
    background: #1f1f1f;
    border: 2px solid var(--color-container-border);
    display: block;
}

.profile-card__head {
    flex: 1 1 auto;
    min-width: 0;
}

.profile-card__name-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}

.profile-card__username {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin: 0;
    word-break: break-word;
}

.profile-card__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.profile-card__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-full);
    color: var(--color-text);
    background: transparent;
    border: 1px solid var(--color-container-border);
    transition: background var(--transition), border-color var(--transition);
    text-decoration: none;
}
.profile-card__icon-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.profile-card__icon-btn .material-symbols-outlined {
    font-size: 22px;
}

.profile-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.profile-card__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-container-border);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1;
}
.profile-card__chip .material-symbols-outlined {
    font-size: 16px;
}

.profile-card__bio {
    margin: var(--space-5) 0 0;
    color: var(--color-text);
    white-space: pre-wrap;
    line-height: var(--line-height);
}

@media (max-width: 520px) {
    .profile-card__top { flex-direction: column; align-items: center; text-align: center; }
    .profile-card__name-row { justify-content: center; }
    .profile-card__actions { margin-left: 0; }
    .profile-card__meta { justify-content: center; }
}

/* ── Settings page — avatar row ────────────────────────── */
.settings-avatar-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.settings-avatar-row__img {
    width: 96px;
    height: 96px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 2px solid var(--color-container-border);
    background: #1f1f1f;
}
.settings-avatar-row__form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ── Auth-page footer link separator ──────────────────── */
.auth-footer__sep {
    margin: 0 var(--space-2);
    color: var(--color-text-muted);
}

/* ── Checkbox label (registration age confirm) ────────── */
.checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    color: var(--color-text);
}
.checkbox input[type="checkbox"] { margin: 0; }

/* ── Grouped form section (e.g. post access controls) ──── */
.form-fieldset {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5) var(--space-2);
    margin: var(--space-5) 0;
}
.form-fieldset legend {
    padding: 0 var(--space-2);
    font-weight: 600;
    color: var(--color-text);
}

/* ── Wallet card (own profile only) ────────────────────── */
.wallet-card {
    background: var(--color-bg-container);
    border: 1px solid var(--color-container-border);
    border-radius: var(--radius-lg);
    color: var(--color-text-container);
    padding: var(--space-5) var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
    box-shadow: var(--shadow-sm);
}
.wallet-card__balances {
    display: flex;
    gap: var(--space-6);
    flex-wrap: wrap;
}
.wallet-card__balance {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.wallet-card__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.wallet-card__icon--meecoin {
    background: linear-gradient(135deg, #c728c7, #801d80);
}
.wallet-card__icon--diamond {
    background: linear-gradient(135deg, #38bdf8, #7c3aed);
}
.wallet-card__icon .material-symbols-outlined { font-size: 22px; }
.wallet-card__col { display: flex; flex-direction: column; line-height: 1.2; }
.wallet-card__label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.wallet-card__value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}
.wallet-card__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.wallet-card__actions .btn .material-symbols-outlined {
    margin-right: var(--space-2);
    font-size: 20px;
    vertical-align: -4px;
}

@media (max-width: 520px) {
    .wallet-card { justify-content: center; text-align: center; }
}

/* ── Footer (2 cols, max 1000px) ───────────────────────── */
.footerbar {
    background: var(--color-footer-bg);
    color: var(--color-footer-text);
    padding: var(--space-8) var(--container-pad);
    margin-top: var(--space-12);
}
.footerbar__inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-8);
}
.footerbar__col p { margin: 0; }
.footerbar__col--right {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    text-align: right;
}
.footerbar__col--right a {
    color: var(--color-footer-text);
    text-decoration: none;
    transition: color var(--transition);
}
.footerbar__col--right a:hover { color: var(--color-primary); }

@media (max-width: 600px) {
    .footerbar__inner { flex-direction: column; align-items: stretch; gap: var(--space-5); }
    .footerbar__col--right { text-align: left; }
}

/* ── Footer language switcher ──────────────────────────── */
.footerbar__lang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-3);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--color-footer-text);
    padding: 6px 10px 6px 8px;
    border-radius: 6px;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.footerbar__lang:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}
.footerbar__lang .material-symbols-outlined { font-size: 18px; }
.footerbar__lang__caret { font-size: 16px !important; opacity: 0.7; }

/* ── Language modal ──────────────────────────────────────── */
.lang-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    z-index: 9000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.lang-modal.is-open { display: flex; }
.lang-modal__box {
    background: var(--color-bg-card);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 380px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
}
.lang-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
}
.lang-modal__head h3 { margin: 0; font-size: 1.05rem; }
.lang-modal__close {
    background: none;
    border: 0;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
}
.lang-modal__close:hover { color: var(--color-text); background: rgba(0, 0, 0, 0.06); }
.lang-modal__list {
    list-style: none;
    margin: 0;
    padding: 8px;
    overflow-y: auto;
}
.lang-modal__list li { margin: 0; }
.lang-modal__option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition);
}
.lang-modal__option:hover { background: rgba(199, 40, 199, 0.08); }
.lang-modal__option:disabled { opacity: 0.5; cursor: progress; }
.lang-modal__option.is-current {
    background: rgba(199, 40, 199, 0.12);
    cursor: default;
}
.lang-modal__option.is-current:hover { background: rgba(199, 40, 199, 0.12); }
.lang-modal__option__code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 24px;
    padding: 0 8px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}
.lang-modal__option.is-current .lang-modal__option__code {
    background: var(--color-primary);
    color: #fff;
}
.lang-modal__option__name { flex: 1; font-size: 0.95rem; }
.lang-modal__option__check {
    color: var(--color-primary);
    font-size: 20px !important;
}

/* ── Coming-soon page ──────────────────────────────────── */
.coming-soon {
    max-width: 560px;
    margin: 0 auto;
    padding: var(--space-12) var(--container-pad);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}
.coming-soon__icon {
    font-size: 64px;
    color: var(--color-primary);
}
.coming-soon h1 { margin: 0; }

/* ── Navbar logo image (style 1) sizing ────────────────── */
.navbar__logo-img {
    max-height: 36px;
    width: auto;
    display: block;
}

/* ── Drawer wallet header (logged-only, top of drawer) ──── */
.nav-drawer__wallet {
    padding: 0 var(--space-4) var(--space-4);
    border-bottom: 1px solid var(--color-container-border);
    margin-bottom: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.nav-drawer__wallet-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}
.nav-drawer__balance {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-container-border);
    color: var(--color-text);
    text-decoration: none;
    transition: background var(--transition), border-color var(--transition);
    min-width: 0;
}
.nav-drawer__balance:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-primary);
}
.nav-drawer__balance-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.nav-drawer__balance-icon .material-symbols-outlined { font-size: 18px; }
.nav-drawer__balance-icon--meecoin {
    background: linear-gradient(135deg, #c728c7, #801d80);
}
.nav-drawer__balance-icon--diamond {
    background: linear-gradient(135deg, #38bdf8, #7c3aed);
}
.nav-drawer__balance-col {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
}
.nav-drawer__balance-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.nav-drawer__balance-value {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-drawer__store {
    justify-content: center;
}
.nav-drawer__store .material-symbols-outlined {
    margin-right: var(--space-2);
    font-size: 20px;
    vertical-align: -4px;
}

/* ── Animated dark background (lobby pages) ─────────────── */
/* Two large blurred radial blobs that drift diagonally on opposite cycles.
   Pure CSS, no JS, works on every modern browser. Honours reduced-motion. */
.bg-animated {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background:
        radial-gradient(ellipse at top left,    rgba(199, 40, 199, 0.08), transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(124, 58, 237, 0.08), transparent 55%),
        var(--color-bg-gbody);
}
.bg-animated::before,
.bg-animated::after {
    content: '';
    position: absolute;
    width: 60vw;
    height: 60vw;
    max-width: 720px;
    max-height: 720px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.55;
    will-change: transform;
}
.bg-animated::before {
    background: radial-gradient(circle, #c728c7, transparent 70%);
    top: -15vw;
    left: -10vw;
    animation: bgblob1 28s ease-in-out infinite alternate;
}
.bg-animated::after {
    background: radial-gradient(circle, #7c3aed, transparent 70%);
    bottom: -15vw;
    right: -10vw;
    animation: bgblob2 34s ease-in-out infinite alternate;
}
@keyframes bgblob1 {
    0%   { transform: translate(0, 0)        scale(1); }
    50%  { transform: translate(20vw, 15vh)  scale(1.08); }
    100% { transform: translate(40vw, 25vh)  scale(0.95); }
}
@keyframes bgblob2 {
    0%   { transform: translate(0, 0)         scale(1); }
    50%  { transform: translate(-15vw, -10vh) scale(1.12); }
    100% { transform: translate(-30vw, -20vh) scale(0.92); }
}
@media (prefers-reduced-motion: reduce) {
    .bg-animated::before,
    .bg-animated::after { animation: none; }
}

/* ── Random chat lobby (text + video) ───────────────────── */
.lobby {
    min-height: calc(100vh - var(--navbar-height) - 200px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--container-pad) var(--space-12);
    gap: var(--space-6);
}
.lobby__topbar {
    width: 100%;
    max-width: 800px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.lobby__filter,
.lobby__mode {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-container-border);
    border-radius: var(--radius-full);
    padding: 4px;
    gap: 2px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.lobby__pill {
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    padding: 8px 18px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: background var(--transition), color var(--transition);
    white-space: nowrap;
}
.lobby__pill:hover { color: var(--color-text); background: rgba(255, 255, 255, 0.05); }
.lobby__pill.is-active {
    background: var(--color-primary);
    color: var(--color-on-primary);
}
.lobby__pill.is-active:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
.lobby__pill.is-locked {
    color: var(--color-text-light);
    cursor: not-allowed;
    opacity: 0.65;
}
.lobby__pill.is-locked:hover { background: transparent; color: var(--color-text-light); }
.lobby__pill .material-symbols-outlined { font-size: 16px; }

.lobby__filter-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
}
.lobby__filter-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    padding-left: var(--space-3);
}
.lobby__filter-hint a { color: var(--color-primary-light); }

.lobby__start {
    width: 100%;
    max-width: 800px;
    min-height: 220px;
    border-radius: var(--radius-2xl);
    border: 0;
    cursor: pointer;
    background: linear-gradient(135deg, #c728c7 0%, #801d80 100%);
    color: var(--color-on-primary);
    font-size: clamp(2rem, 6vw, 3.5rem);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 20px 60px rgba(199, 40, 199, 0.35);
    transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
    position: relative;
    overflow: hidden;
}
.lobby__start:hover {
    transform: translateY(-2px);
    box-shadow: 0 25px 75px rgba(199, 40, 199, 0.45);
    filter: brightness(1.08);
}
.lobby__start:active { transform: translateY(0); filter: brightness(0.95); }
.lobby__start:disabled {
    cursor: not-allowed;
    opacity: 0.7;
    filter: grayscale(0.3);
}
.lobby__start::after {
    /* slow shimmer sweep */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: shimmer 4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes shimmer {
    0%   { transform: translateX(-100%); }
    60%  { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
    .lobby__start::after { animation: none; opacity: 0; }
}

.lobby__hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-align: center;
    max-width: 720px;
}

/* Searching state */
.lobby__searching {
    width: 100%;
    max-width: 800px;
    min-height: 220px;
    border-radius: var(--radius-2xl);
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed var(--color-container-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-6);
}
.lobby__spinner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--color-primary);
    animation: lobbyspin 1s linear infinite;
}
@keyframes lobbyspin { to { transform: rotate(360deg); } }
.lobby__searching h2 { margin: 0; }
.lobby__searching p { margin: 0; color: var(--color-text-muted); }

/* Chat room placeholder (still used by /videochat/c/{id}/ until that flow becomes a SPA too) */
.chatroom {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-8) var(--container-pad);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
}
.chatroom__icon {
    font-size: 64px;
    color: var(--color-primary);
}

/* ── Vue v-cloak: hide the SPA root until Vue mounts ────── */
[v-cloak] { display: none !important; }

/* ── Live text-chat (SPA on /textchat/) ────────────────── */
.chat {
    width: 100%;
    max-width: 800px;
    background: var(--color-bg-container);
    border: 1px solid var(--color-container-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    height: clamp(420px, 70vh, 720px);
    overflow: hidden;
}

/* Full-screen variant — fills viewport from navbar to bottom, edge-to-edge.
   Used by the text-chat SPA. The chat shell is mounted once and stays put
   across re-searches, so we use 100vw/100% and zero radius / border. */
.textchat-main {
    /* Override the framework's default <main> { max-width:1200px; margin:0 auto;
       padding:var(--space-10) ... } so the chat can stretch edge-to-edge. */
    min-height: calc(100vh - var(--navbar-height));
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.textchat-main > #textchat-app {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.chat--full {
    width: 100%;
    max-width: none;
    height: calc(100vh - var(--navbar-height));
    border: 0;
    border-radius: 0;
    box-shadow: none;
    flex: 1 1 auto;
}
/* Hide the site footer on the chat page so the chat can truly fill
   the viewport. We use a body class (set by the textchat view) so the
   rule is scoped to this page only. */
.textchat-body .footerbar { display: none; }

/* Empty states inside the chat list */
.chat__empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    color: var(--color-text-muted);
    text-align: center;
}
.chat__sayhi {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.02em;
    user-select: none;
}

/* Partner intro — first row in the chat, identifies who you're connected to.
   Left-aligned chip. Premium-gated content gets blurred + an unlock CTA;
   the placeholder text is server-issued so DOM inspection reveals nothing. */
.chat__intro {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 90%;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    line-height: 1.4;
    border: 1px solid var(--color-container-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text);
}
.chat__intro .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.chat__intro__text {
    transition: filter var(--transition);
}
.chat__intro__text.is-blurred {
    filter: blur(6px);
    user-select: none;
    pointer-events: none;
    /* Slightly desaturated so the placeholder bullets sit calmly under the blur. */
    color: var(--color-text-muted);
}
.chat__intro__cta {
    margin-left: var(--space-2);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition);
}
.chat__intro__cta:hover {
    background: var(--color-primary-hover);
    color: var(--color-on-primary);
}
.chat__intro--logged {
    border-color: rgba(199, 40, 199, 0.45);
    background: rgba(199, 40, 199, 0.10);
}
.chat__intro--logged .material-symbols-outlined {
    color: var(--color-primary-light);
}
.chat__intro--guest {
    color: var(--color-text-muted);
}
.chat__intro--locked {
    border-style: dashed;
    background: rgba(255, 255, 255, 0.03);
}
.chat__intro--locked .material-symbols-outlined {
    color: var(--color-text-muted);
}
/* Small inline keyboard-shortcut chip inside a button, e.g. "Disconnect [Esc]" */
.btn__kbd {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.72em;
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.18);
    opacity: 0.85;
    text-transform: none;
    letter-spacing: 0;
    vertical-align: 1px;
}
.btn--outline .btn__kbd {
    background: rgba(255, 255, 255, 0.06);
}

.chat__status-dot.is-searching {
    background: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
    animation: chatdotpulse 1.4s ease-in-out infinite;
}
@keyframes chatdotpulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18); }
    50%      { box-shadow: 0 0 0 7px rgba(245, 158, 11, 0.32); }
}
.chat__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-container-border);
    background: rgba(255,255,255,0.02);
    /* Fixed height — the action button shows/hides between states; without
       a min-height the bar would jump up/down when the button disappears. */
    min-height: 64px;
    box-sizing: border-box;
}
.chat__status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.18);
    flex-shrink: 0;
}
.chat__status-dot.is-closed {
    background: #6b7280;
    box-shadow: 0 0 0 4px rgba(107, 114, 128, 0.18);
}
.chat__status-text {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    flex: 1;
    min-width: 0;
}
.chat__messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.chat__msg {
    display: flex;
    width: 100%;
    /* All messages are left-aligned; colour distinguishes mine from theirs.
       This keeps long pages from feeling huge / asymmetrical. */
    justify-content: flex-start;
}
.chat__bubble {
    max-width: min(72%, 720px);
    padding: 10px 14px;
    border-radius: var(--radius-xl);
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.chat__msg--mine .chat__bubble {
    background: var(--color-primary);
    color: var(--color-on-primary);
}
.chat__msg--theirs .chat__bubble {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text);
    border: 1px solid var(--color-container-border);
}
.chat__system {
    align-self: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.04);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    border: 1px dashed var(--color-container-border);
}
.chat__compose {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-container-border);
    background: rgba(255,255,255,0.02);
}
.chat__compose input[type="text"] {
    flex: 1;
    margin: 0;
}
.chat__compose .btn { flex-shrink: 0; }

/* ── Premium webcam (Coomeet third-party iframe) ────────── */
.premium-webcam {
    width: 100%;
    padding: var(--space-5) var(--container-pad);
    display: flex;
    justify-content: center;
}
.premium-webcam__inner {
    width: 100%;
    max-width: 1200px;
    background: var(--color-bg-container);
    border: 1px solid var(--color-container-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    /* Reserve space so the page doesn't jump when the iframe injects.
       Coomeet sizes itself responsively; this is just a comfortable
       starting min-height. */
    min-height: clamp(520px, 80vh, 900px);
}
.premium-webcam__inner > #coomeet_container {
    width: 100%;
    height: 100%;
}
.premium-webcam__inner iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 520px;
    border: 0;
    display: block;
}

/* ── Store placeholder page ────────────────────────────── */
.store-page {
    max-width: 560px;
    margin: 0 auto;
    padding: var(--space-12) var(--container-pad);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}
.store-page__icon {
    font-size: 64px;
    color: var(--color-primary);
}
.store-page h1 { margin: 0; }

/* ── Store hub (/store/) ──────────────────────────────────── */
.store-hub { max-width: 1100px; margin: 0 auto; padding: var(--space-8) var(--container-pad); }
.store-hub__header { text-align: center; margin-bottom: var(--space-8); }
.store-hub__header h1 {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: 2.2rem; margin: 0 0 8px;
}
.store-hub__header h1 .material-symbols-outlined { font-size: 40px; color: var(--color-primary); }
.store-hub__balances {
    display: flex; flex-wrap: wrap; gap: 10px;
    justify-content: center;
    margin: 16px 0 var(--space-8);
}
.store-hub__chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 999px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--color-border);
    font-size: 0.9rem;
}
.store-hub__chip--gold {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #fff; border-color: transparent;
}
.store-hub__chip .material-symbols-outlined { font-size: 18px; }
.store-hub__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
}
.store-card {
    display: flex; flex-direction: column;
    padding: 28px 24px;
    border-radius: 16px;
    background: var(--color-card-bg, #1a1f2e);
    border: 1px solid var(--color-border);
    color: inherit; text-decoration: none;
    transition: transform 160ms, border-color 160ms, box-shadow 160ms;
    min-height: 220px;
    position: relative;
    overflow: hidden;
}
.store-card:hover {
    transform: translateY(-3px);
    border-color: var(--color-primary);
    box-shadow: 0 12px 30px rgba(0,0,0,0.3);
}
.store-card__icon { font-size: 36px; margin-bottom: 12px; opacity: 0.9; }
.store-card h2 { margin: 0 0 8px; font-size: 1.25rem; }
.store-card p { color: var(--text-muted, #94a3b8); flex: 1; font-size: 0.9rem; line-height: 1.4; }
.store-card__cta {
    margin-top: 14px;
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 700; font-size: 0.9rem;
    color: var(--color-primary);
}
.store-card--premium  { background: linear-gradient(160deg, #1e293b, #4c1d95 120%); }
.store-card--meecoins { background: linear-gradient(160deg, #1e293b, #047857 130%); }
.store-card--diamonds { background: linear-gradient(160deg, #1e293b, #1e40af 130%); }
.store-card--physical { background: linear-gradient(160deg, #1e293b, #be185d 130%); }
.store-hub__notice {
    text-align: center; margin-top: var(--space-6);
    padding: 14px; border-radius: 8px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
}

/* ── Store detail pages (/store/premium/, /store/meecoins/, etc.) ── */
.store-detail { max-width: 880px; margin: 0 auto; padding: var(--space-6) var(--container-pad); }
.store-detail__header {
    text-align: center; margin: var(--space-6) 0;
    padding: 24px 16px;
    border-radius: 14px;
    background: var(--color-card-bg, #1a1f2e);
    border: 1px solid var(--color-border);
}
.store-detail__icon { font-size: 56px; color: var(--color-primary); }
.store-cta {
    text-align: center;
    padding: 32px 20px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: var(--color-card-bg, #1a1f2e);
}
.store-cta--active { background: linear-gradient(160deg, #1e293b, #92400e 130%); border-color: #f59e0b; }
.store-cta--soon   { opacity: 0.85; }
.store-bullets {
    list-style: none; padding: 0; margin: 16px auto;
    max-width: 360px; text-align: left;
}
.store-bullets li {
    padding: 6px 0 6px 26px;
    position: relative;
}
.store-bullets li::before {
    content: '✓'; position: absolute; left: 0; top: 6px;
    color: #10b981; font-weight: 800;
}

/* Pack grid for meecoins / diamonds */
.store-packs {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin: var(--space-6) 0;
}
.store-pack {
    text-align: center;
    padding: 20px 16px;
    border-radius: 12px;
    background: var(--color-card-bg, #1a1f2e);
    border: 1px solid var(--color-border);
    position: relative;
    transition: transform 140ms, border-color 140ms;
}
.store-pack:hover { transform: translateY(-2px); border-color: var(--color-primary); }
.store-pack--best { border-color: #f59e0b; box-shadow: 0 0 24px rgba(245,158,11,0.18); }
.store-pack__badge {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    background: #f59e0b; color: #1f1305;
    font-size: 0.7rem; font-weight: 800;
    padding: 3px 10px; border-radius: 999px;
    letter-spacing: 0.04em; text-transform: uppercase;
}
.store-pack__icon { font-size: 32px; opacity: 0.9; }
.store-pack h3 { margin: 8px 0 4px; font-size: 1.15rem; }
.store-pack__price {
    font-size: 1.3rem; font-weight: 800; margin: 4px 0 12px;
    color: var(--color-primary);
    display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
    justify-content: center;
}
.store-pack__price-old {
    font-size: 0.9rem; font-weight: 500;
    color: var(--text-muted, #94a3b8);
    text-decoration: line-through;
}
.store-pack__discount-pct {
    font-size: 0.75rem; font-weight: 800;
    background: #dc2626; color: #fff;
    padding: 2px 6px; border-radius: 4px;
    letter-spacing: 0.04em;
}
.store-pack form { margin: 0; }

/* Discount-event banner on /store/* sub-pages */
.store-event-banner {
    margin: 16px 0;
    padding: 12px 16px;
    background: linear-gradient(135deg, #047857, #10b981);
    border-radius: 10px;
    color: #fff;
    display: flex; align-items: center; gap: 10px;
    font-weight: 600;
}
.store-event-banner .material-symbols-outlined { font-size: 22px; }

/* Premium plan grid */
.store-plans {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin: var(--space-6) 0;
}
.store-plan {
    padding: 24px;
    border-radius: 12px;
    background: linear-gradient(160deg, #1e293b, #4c1d95 130%);
    border: 1px solid rgba(255,255,255,0.12);
    text-align: center;
}
.store-plan h2 { margin: 0 0 8px; }
.store-plan__price {
    font-size: 1.8rem; font-weight: 800;
    margin: 8px 0 16px; color: #fbbf24;
}
.store-plan__price small {
    font-size: 0.7em; font-weight: 500; color: rgba(255,255,255,0.7);
}
.store-plan__or {
    margin: 12px 0 8px;
    font-size: 0.8rem; text-align: center; opacity: 0.6;
    letter-spacing: 0.08em;
}
.store-plan__diamonds-btn {
    width: 100%; justify-content: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(96, 165, 250, 0.4);
    color: #93c5fd;
}
.store-plan__diamonds-btn:hover:not(:disabled) {
    background: rgba(96, 165, 250, 0.15);
    border-color: #60a5fa;
}
.store-plan__diamonds-btn small {
    font-size: 0.75em; font-weight: 500; opacity: 0.8; margin-left: 4px;
}

/* ── Settings sub-nav (Profile / Wallet / Purchases / Verification) ── */
.settings-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-2);
    margin: 0 0 var(--space-4);
}
.settings-subnav__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}
.settings-subnav__tab:hover { background: rgba(255, 255, 255, 0.05); color: var(--color-text); }
.settings-subnav__tab--active {
    background: var(--color-primary);
    color: #fff;
}
.settings-subnav__tab--active:hover { background: var(--color-primary); color: #fff; }
.settings-subnav__tab .material-symbols-outlined { font-size: 18px; }

/* ── Reset profile row (paid CTA buttons side-by-side) ── */
.reset-profile-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-3);
}
.reset-profile-row form { margin: 0; }

/* ── Default avatar picker (collapsible — level-1 fallback) ── */
.default-avatar-picker { /* native <details> wrapper */ }
.default-avatar-picker__toggle {
    list-style: none;            /* hide default disclosure triangle */
    cursor: pointer;
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    transition: background 120ms, border-color 120ms;
    user-select: none;
}
.default-avatar-picker__toggle::-webkit-details-marker { display: none; }
.default-avatar-picker__toggle:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--color-primary);
}
.default-avatar-picker__icon {
    font-size: 22px;
    color: var(--color-primary);
    flex-shrink: 0;
}
.default-avatar-picker__label {
    display: flex; flex-direction: column;
    flex: 1; min-width: 0;
    gap: 2px;
}
.default-avatar-picker__label strong { font-size: 0.95rem; }
.default-avatar-picker__label small  { font-size: 0.75rem; }
.default-avatar-picker__chevron {
    font-size: 22px;
    transition: transform 180ms;
    flex-shrink: 0;
    opacity: 0.7;
}
.default-avatar-picker[open] .default-avatar-picker__chevron {
    transform: rotate(180deg);
}

.default-avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: var(--space-2);
}
.default-avatar-grid__cell { margin: 0; }
.default-avatar-grid__btn {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    background: transparent;
    cursor: pointer;
    transition: transform 0.1s ease, border-color 0.15s ease;
}
.default-avatar-grid__btn:hover  { transform: scale(1.05); border-color: rgba(255, 255, 255, 0.25); }
.default-avatar-grid__btn[disabled] { cursor: not-allowed; opacity: 0.5; }
.default-avatar-grid__btn--selected { border-color: var(--color-primary); }
.default-avatar-grid__btn img { display: block; width: 100%; height: 100%; }

.settings-avatar-locked {
    flex: 1;
    min-width: 200px;
}
.settings-avatar-locked p { margin-top: 2px; }

/* ── Ban banner (settings page) ── */
.ban-banner__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-top: var(--space-3);
}
.ban-banner__pay {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
}
.ban-banner__pay form { margin: 0; }

/* ── Verification challenge code display ── */
.verif-code {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 0.4rem;
    color: var(--color-primary);
    text-align: center;
    padding: var(--space-4);
    background: rgba(199, 40, 199, 0.08);
    border: 1px dashed rgba(199, 40, 199, 0.4);
    border-radius: 8px;
    user-select: all;
}

/* ── Public profile: 'account disabled' placeholder ── */
.profile-disabled {
    text-align: center;
    padding: var(--space-12) var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}
.profile-disabled__icon {
    font-size: 80px;
    color: var(--color-text-muted);
    opacity: 0.4;
}
.profile-disabled h1 { margin: 0; color: var(--color-text-muted); }

/* ── Random video chat (full-screen layout) ─────────────────────────── */
.videochat-body { overflow: hidden; }
.videochat-main {
    max-width: none;
    margin: 0;
    padding: 0;
    height: calc(100vh - var(--navbar-height));
    position: relative;
}
.videochat-body .footerbar { display: none; }

#videochat-app { height: 100%; }

/* Floats over the lobby so showing/hiding it doesn't reflow the centered
   stack and shift the START button vertically. */
.lobby__error {
    position: absolute;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%);
    max-width: 560px;
    width: calc(100% - var(--space-6) * 2);
    text-align: center;
    color: #fecaca;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 0.9rem;
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────
   VIDEOCHAT SESSION — Thundr-style 2-column layout
   Desktop: [videos | divider | chat] over [action | divider | compose]
   Mobile: vertical stack (partner top, me bottom) with chat overlay
   over the bottom (my) half so messages don't cover the partner.
   ─────────────────────────────────────────────────────────────── */
.vchat {
    --vchat-left-w: 50%;          /* updated by JS resizer; clamped 40-60% */
    --vchat-bottom-h: 64px;
    --vchat-self-h: 240px;
    --vchat-divider-w: 6px;

    position: fixed;
    top: var(--navbar-height);
    left: 0; right: 0; bottom: 0;
    background: #000;
    overflow: hidden;
    z-index: 1;

    display: grid;
    grid-template-columns: var(--vchat-left-w) var(--vchat-divider-w) 1fr;
    grid-template-rows: 1fr var(--vchat-bottom-h);
    grid-template-areas:
        "videos divider chat"
        "action divider compose";
}
.vchat.is-resizing { user-select: none; cursor: ew-resize; }

/* ── Left column: stacked video tiles ── */
.vchat__col--videos {
    grid-area: videos;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: #000;
}
.vchat__remote-tile {
    flex: 1 1 auto;
    position: relative;
    background: #0a0a0a;
    overflow: hidden;
    min-height: 0;
}
.vchat__remote {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
    display: block;
}
.vchat__watermark {
    position: absolute;
    bottom: 14px;
    left: 14px;
    z-index: 4;
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7),
                 0 0 10px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    user-select: none;
}
.vchat__self-tile {
    flex: 0 0 var(--vchat-self-h);
    position: relative;
    background: #111;
    border-top: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
}
/* Self <video> appended programmatically by JS — class drives styling.
   `contain` (not cover) so the full webcam frame is visible regardless
   of the tile's aspect — same image the partner is receiving. No mirror:
   the user sees exactly what the partner sees, not a flipped selfie. */
.vchat__self-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #111;
}

/* ── Draggable divider ── */
.vchat__divider {
    grid-area: divider;
    background: rgba(255,255,255,0.04);
    cursor: ew-resize;
    position: relative;
    transition: background 0.15s;
    z-index: 8;
}
.vchat__divider:hover,
.vchat__divider.is-dragging { background: rgba(255,255,255,0.14); }
.vchat__divider::before {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 3px; height: 40px;
    background: rgba(255,255,255,0.35);
    border-radius: 2px;
    transform: translate(-50%, -50%);
}

/* ── Right column: chat messages ── */
.vchat__col--chat {
    grid-area: chat;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--color-bg);
    border-left: 1px solid rgba(255,255,255,0.05);
}
.vchat__messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Bottom-left: status action button ── */
.vchat__action {
    grid-area: action;
    background: rgba(0,0,0,0.6);
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    padding: 8px 12px;
}
.vchat__action .btn--block {
    width: 100%;
    height: 100%;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ── Bottom-right: compose ── */
.vchat__compose {
    grid-area: compose;
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.6);
    align-items: center;
}
.vchat__compose input {
    flex: 1;
    height: 100%;
    background: rgba(255,255,255,0.06);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    padding: 0 12px;
}
.vchat__compose input::placeholder { color: rgba(255,255,255,0.45); }
.vchat__compose input:disabled { opacity: 0.5; }

/* ── Status overlay (only over partner tile) ── */
.vchat__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.7);
    z-index: 5;
}
.vchat__overlay__inner {
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}
.vchat__overlay__text { font-size: 1.05rem; margin: 0; }

/* ── Status chip (top-left of partner tile) ── */
.vchat__top {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    padding: 6px 12px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    z-index: 6;
    font-size: 0.85rem;
}
.vchat__top__partner {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    opacity: 0.85;
    margin-left: 4px;
    padding-left: 10px;
    border-left: 1px solid rgba(255,255,255,0.2);
}
.vchat__top__partner .material-symbols-outlined { font-size: 16px; }

/* ── Report corner button (top-right of partner tile) ── */
.vchat__corner-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    backdrop-filter: blur(6px);
    z-index: 6;
    font-size: 0.85rem;
    font-weight: 500;
}
.vchat__corner-btn:hover { background: rgba(0,0,0,0.78); }
.vchat__corner-btn:disabled { opacity: 0.6; cursor: default; }
.vchat__corner-btn .material-symbols-outlined { font-size: 18px; }

/* ── Report modal (overlays everything) ── */
.vchat__modal {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
}
.vchat__modal__box {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: var(--space-5);
    width: min(420px, 90vw);
}
.vchat__modal__box h3 { margin: 0 0 var(--space-3); }
.vchat__modal__box textarea {
    width: 100%;
    background: rgba(255,255,255,0.05);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 8px;
    resize: vertical;
}

/* ── Mobile: vertical stack with transparent chat overlay over my half ── */
@media (max-width: 720px) {
    .vchat {
        --vchat-bottom-h: 56px;
        grid-template-columns: auto 1fr;
        grid-template-rows: 1fr var(--vchat-bottom-h);
        grid-template-areas:
            "videos  videos"
            "action  compose";
    }
    .vchat__divider { display: none; }

    /* Both video tiles split 50/50 vertically. */
    .vchat__col--videos { flex-direction: column; }
    .vchat__remote-tile { flex: 0 0 50%; }
    .vchat__self-tile   { flex: 0 0 50%; border-top: 2px solid rgba(255,255,255,0.12); }

    /* Chat lives over the bottom (my) half only — top:50% → above the
       compose row. Container is transparent + non-blocking; only the
       messages area accepts pointer events. Bubbles get their own
       background so text stays legible over the self video. */
    .vchat__col--chat {
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        bottom: var(--vchat-bottom-h);
        background: transparent;
        border-left: none;
        pointer-events: none;
        z-index: 4;
    }
    .vchat__messages {
        background: transparent;
        pointer-events: auto;
        padding: 12px;
    }
    .vchat .chat__msg .chat__bubble {
        background: rgba(0,0,0,0.65);
        backdrop-filter: blur(4px);
        color: #fff;
    }
    .vchat .chat__sayhi {
        background: rgba(0,0,0,0.55);
        color: #fff;
        padding: 6px 12px;
        border-radius: 8px;
        align-self: center;
    }

    /* Keep status chip & report button compact on small screens */
    .vchat__top { font-size: 0.78rem; padding: 5px 10px; top: 8px; left: 8px; }
    .vchat__top__partner { display: none; }
    .vchat__corner-btn { padding: 5px 8px; font-size: 0.78rem; top: 8px; right: 8px; }
    .vchat__corner-btn__label { display: none; }

    /* Action button gets just enough room for its label. */
    .vchat__action  { padding: 6px 8px; }
    .vchat__compose { padding: 6px 8px; }
    .vchat__action .btn--block { font-size: 0.85rem; padding: 0 12px; white-space: nowrap; }
}

/* ── Lightweight alert boxes ── */
.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: 6px;
    margin: var(--space-3) 0;
    font-size: 0.95rem;
    border: 1px solid transparent;
}
.alert strong { display: inline-block; margin-bottom: 4px; }
.alert--info     { background: rgba(56, 189, 248, 0.1); border-color: rgba(56, 189, 248, 0.35); color: #bae6fd; }
.alert--warning  { background: rgba(250, 204, 21, 0.1); border-color: rgba(250, 204, 21, 0.35); color: #fde68a; }
.alert--error    { background: rgba(239, 68, 68, 0.1);  border-color: rgba(239, 68, 68, 0.35);  color: #fecaca; }
.alert--success  { background: rgba(34, 197, 94, 0.1);  border-color: rgba(34, 197, 94, 0.35);  color: #bbf7d0; }

/* My orders list (account/settings/orders/) */
.orders-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-3);
}
.order-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.order-card__id {
    font-family: var(--font-family-mono, monospace);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.order-card__items {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    font-size: 0.95rem;
}
.order-card__items li::first-letter { text-transform: uppercase; }
.order-card__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ========== Games module ============================================== */

/* Games list (/games/) — 2 cards per row, big covers. */
.games-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4);
}
.games-intro {
    margin-bottom: var(--space-6);
    text-align: center;
}
.games-intro h1 { margin: 0 0 var(--space-2); }
.games-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}
@media (max-width: 720px) {
    .games-grid { grid-template-columns: 1fr; }
}
.game-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.game-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.game-card__cover {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background-size: cover;
    background-position: center;
    background-color: #1a1a1a;
}
.game-card__badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.game-card__badge--free { background: #16a34a; color: #fff; }
.game-card__badge--paid { background: #f59e0b; color: #1f1f1f; }
.game-card__body { padding: var(--space-4); }
.game-card__title   { margin: 0 0 var(--space-1); font-size: 1.4rem; }
.game-card__tagline { margin: 0; color: var(--color-text-muted, #9aa); }

/* Game landing (/games/{slug}/) */
.game-landing {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-4);
}
.game-landing__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-muted, #aab);
    text-decoration: none;
    margin-bottom: var(--space-4);
}
.game-landing__back:hover { color: #fff; }
.game-landing__hero {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    min-height: 360px;
    display: flex;
    align-items: flex-end;
    margin-bottom: var(--space-6);
}
.game-landing__hero-inner {
    width: 100%;
    padding: var(--space-6);
    color: #fff;
}
.game-landing__hero-inner h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin: var(--space-2) 0 var(--space-2);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
.game-landing__cost {
    margin: 12px 0 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
.game-landing__pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.game-landing__pill--free { background: #16a34a; color: #fff; }
.game-landing__pill--paid { background: #f59e0b; color: #1f1f1f; }
.game-landing__tagline {
    font-size: 1.15rem;
    max-width: 640px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
    margin: 0 0 var(--space-5);
}
.game-landing__play { font-size: 1.05rem; }
/* ─── Landing: feature cards (4 colored hype tiles) ───────────────── */
.game-landing__features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-7, 4rem);
}
@media (max-width: 980px) { .game-landing__features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .game-landing__features { grid-template-columns: 1fr; } }

.feature-card {
    position: relative;
    padding: var(--space-5);
    border-radius: 18px;
    color: #fff;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.feature-card__icon {
    font-size: 2.6rem;
    line-height: 1;
    margin-bottom: var(--space-3);
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.35));
}
.feature-card__title {
    margin: 0 0 var(--space-2);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.2;
}
.feature-card__body {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.45;
    opacity: 0.95;
}
.feature-card--pink   { background: linear-gradient(135deg, #ec4899 0%, #d946ef 100%); }
.feature-card--orange { background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%); }
.feature-card--gold   { background: linear-gradient(135deg, #fbbf24 0%, #ec4899 100%); }
.feature-card--red    { background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); }

/* ─── Landing: how it works (numbered colored steps) ───────────────── */
.game-landing__steps-section {
    margin-bottom: var(--space-7, 4rem);
}
.game-landing__steps-heading {
    text-align: center;
    margin: 0 0 var(--space-5);
    font-size: 2rem;
}
.game-landing__steps-big {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}
@media (max-width: 720px) { .game-landing__steps-big { grid-template-columns: 1fr; } }

.step-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.step-card p {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.4;
}
.step-card__num {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.step-card--1 .step-card__num { background: linear-gradient(135deg, #ec4899, #d946ef); }
.step-card--2 .step-card__num { background: linear-gradient(135deg, #f59e0b, #f97316); }
.step-card--3 .step-card__num { background: linear-gradient(135deg, #fbbf24, #ec4899); }
.step-card--4 .step-card__num { background: linear-gradient(135deg, #ef4444, #b91c1c); }

/* ─── Landing: final CTA ───────────────────────────────────────────── */
.game-landing__final-cta {
    text-align: center;
    padding: var(--space-6) 0 var(--space-3);
}
.game-landing__final-cta .btn {
    font-size: 1.2rem;
    padding: 16px 36px;
    box-shadow: 0 14px 50px rgba(236, 72, 153, 0.45);
}

/* Game setup (/games/{slug}/setup/) */
.game-setup {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-4);
}
.game-setup__form { margin-top: var(--space-3); }
.game-setup__pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.game-setup__pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-full);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.15s ease;
    background: rgba(255, 255, 255, 0.03);
}
.game-setup__pill:hover { border-color: rgba(255, 255, 255, 0.3); }
.game-setup__pill input { display: none; }
.game-setup__pill.is-active {
    background: var(--color-primary, #6366f1);
    border-color: var(--color-primary, #6366f1);
    color: #fff;
}
.game-setup__cta { margin-top: var(--space-5); text-align: right; }

/* Game play (/games/{slug}/play/) */
.game-play {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-3) var(--space-4) var(--space-6);
}
.game-play__topbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}
.game-play__live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    background: #dc2626;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--font-size-xs);
    letter-spacing: 0.5px;
}
.game-play__live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    animation: live-pulse 1.2s ease-in-out infinite;
}
@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}
.game-play__viewers {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 700;
}
.game-play__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--space-4);
    align-items: stretch;   /* chat stretches to cam's row height */
}
@media (max-width: 980px) {
    .game-play__stage { grid-template-columns: 1fr; }
    .game-play__chat  { height: 380px; }
}
.game-play__cam {
    position: relative;
    background: #000;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 16/9;
}
.game-play__cam video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1); /* mirror like a webcam selfie */
}
.game-play__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.65) 100%);
    z-index: 2;
}
.game-play__overlay--error {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
    padding: var(--space-5);
}
.game-play__big-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 18px 32px;
    border: none;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 12px 40px rgba(236, 72, 153, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.game-play__big-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 16px 50px rgba(236, 72, 153, 0.55);
}
.game-play__big-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}
.game-play__big-btn .material-symbols-outlined {
    font-size: 2rem;
}
.game-play__stop {
    position: absolute;
    bottom: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-full);
    background: rgba(220, 38, 38, 0.9);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    z-index: 3;
    transition: background 0.15s ease;
}
.game-play__stop:hover { background: #dc2626; }

.game-play__chat {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* No fixed height — grid stretches us to the cam's row height. */
    min-height: 0;
}
.game-play__chat-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex: 0 0 auto;
}
.game-play__chat-list {
    flex: 1 1 0;
    min-height: 0;          /* CRITICAL: lets the list shrink under content */
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: 6px;
    scroll-behavior: smooth;
}
.game-play__chat-msg {
    font-size: 0.95rem;
    line-height: 1.45;
    word-break: break-word;
}
.game-play__chat-user {
    font-weight: 700;
    margin-right: 6px;
}
.game-play__chat-foot {
    padding: var(--space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

/* ─── Donation chat message ─────────────────────────────────────────── */
.game-play__chat-msg--donation {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    margin: 2px 0;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.18) 0%, rgba(236, 72, 153, 0.18) 100%);
    border-left: 3px solid #fbbf24;
    font-weight: 600;
    animation: chat-donation-flash 1.6s ease-out;
}
.game-play__chat-msg--donation .game-play__chat-user {
    margin-right: 0;
}
.game-play__chat-donation-icon {
    color: #fbbf24;
    font-size: 1.15rem;
}
.game-play__chat-donation-text {
    color: #fff;
}
.game-play__chat-donation-text strong {
    color: #fbbf24;
    font-size: 1.05rem;
    margin: 0 2px;
}
@keyframes chat-donation-flash {
    0%   { background: linear-gradient(90deg, rgba(251, 191, 36, 0.55) 0%, rgba(236, 72, 153, 0.55) 100%); }
    100% { background: linear-gradient(90deg, rgba(245, 158, 11, 0.18) 0%, rgba(236, 72, 153, 0.18) 100%); }
}

/* ─── Donation floating banner (overlays the cam) ───────────────────── */
.donation-alert {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 12px 18px;
    border-radius: 14px;
    color: #fff;
    font-weight: 700;
    pointer-events: none;
    backdrop-filter: blur(4px);
    box-shadow: 0 14px 50px rgba(0, 0, 0, 0.45);
    max-width: 320px;
}
.donation-alert__icon {
    font-size: 2.2rem;
    flex: 0 0 auto;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
.donation-alert__body { line-height: 1.15; }
.donation-alert__user {
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.92;
}
.donation-alert__amount {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: 0.5px;
}
.donation-alert__unit {
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.85;
    margin-left: 2px;
    text-transform: uppercase;
}
.donation-alert__sparkle {
    font-size: 1.5rem;
    animation: donation-sparkle 1.4s ease-in-out infinite;
}
@keyframes donation-sparkle {
    0%, 100% { transform: rotate(-8deg) scale(1);   opacity: 1; }
    50%      { transform: rotate(8deg)  scale(1.2); opacity: 0.85; }
}

/* tiers — bigger amount, bigger glow */
.donation-alert--small {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
}
.donation-alert--medium {
    background: linear-gradient(135deg, #f59e0b 0%, #ec4899 100%);
}
.donation-alert--large {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 50%, #ec4899 100%);
    animation: donation-pulse-large 1.4s ease-in-out infinite;
}
.donation-alert--huge {
    background: linear-gradient(135deg, #fbbf24 0%, #ef4444 50%, #a855f7 100%);
    animation: donation-pulse-huge 1.2s ease-in-out infinite;
}
.donation-alert--huge .donation-alert__amount { font-size: 1.7rem; }
@keyframes donation-pulse-large {
    0%, 100% { box-shadow: 0 14px 50px rgba(239, 68, 68, 0.45); }
    50%      { box-shadow: 0 18px 70px rgba(239, 68, 68, 0.85); }
}
@keyframes donation-pulse-huge {
    0%, 100% { box-shadow: 0 14px 50px rgba(168, 85, 247, 0.55); }
    50%      { box-shadow: 0 22px 80px rgba(168, 85, 247, 0.95); }
}

/* Vue <transition name="donation-pop"> */
.donation-pop-enter-active { animation: donation-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
.donation-pop-leave-active { animation: donation-out 0.35s ease-in; }
@keyframes donation-in {
    0%   { opacity: 0; transform: translateX(80px) scale(0.8); }
    60%  { transform: translateX(-6px) scale(1.06); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes donation-out {
    to { opacity: 0; transform: translateX(60px) scale(0.95); }
}

/* ============================================================
   Framework polyfill: datetime-local inputs aren't covered by
   elitma.css's [type=text/email/...] block. Inherit the same look.
   ============================================================ */
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
    width:            100%;
    padding:          var(--space-3) var(--space-4);
    font-size:        var(--font-size-sm);
    color:            var(--color-input-text);
    background-color: var(--color-input-bg);
    border:           1.5px solid var(--color-input-border);
    border-radius:    var(--radius);
    transition:       border-color var(--transition), box-shadow var(--transition);
    outline:          none;
    color-scheme:     light dark;   /* hand the calendar widget the right palette */
    font-family:      inherit;
}
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus {
    border-color: var(--color-primary, #6366f1);
    box-shadow:   0 0 0 3px rgba(99, 102, 241, 0.15);
}
input[type="datetime-local"]:disabled,
input[type="month"]:disabled,
input[type="week"]:disabled,
input[type="date"]:disabled,
input[type="time"]:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background-color: rgba(0, 0, 0, 0.03);
}
/* Calendar picker icon — make it visible on light + dark backgrounds */
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Lock banner on edit page */
.post-locked-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(236, 72, 153, 0.08));
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 12px;
    margin-bottom: var(--space-4);
}
.post-locked-banner .material-symbols-outlined {
    color: #d97706;
    font-size: 1.5rem !important;
    flex-shrink: 0;
}
.post-locked-banner strong { display: block; margin-bottom: 4px; }

/* ============================================================
   Lucky Models slot machine
   ============================================================ */
.slot {
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--space-5) var(--space-4);
}
.slot__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.slot__balance {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: #fef3c7;
    border: 1px solid rgba(250, 204, 21, 0.4);
    padding: var(--space-2) var(--space-3);
    border-radius: 999px;
    font-weight: 600;
    font-size: 1.05rem;
}
.slot__balance-icon { color: #facc15; font-size: 1.2rem; }
.slot__topup-link { color: #fde68a; font-size: 0.85rem; margin-left: var(--space-2); }
.slot__topup-link:hover { color: #fff; }

.slot__pending-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    color: #fff;
    border-radius: 14px;
    margin-bottom: var(--space-4);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3);
}
.slot__pending-banner > span:first-child { font-size: 1.4rem; }
.slot__pending-banner .btn { margin-left: auto; background: #fff; color: #ea580c; }

/* === Old casino cabinet === */
.slot-cabinet {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    padding: 90px 32px 36px;
    background:
        radial-gradient(ellipse at top, #7f1d1d 0%, #4c1313 35%, #1c0606 70%, #0a0202 100%);
    border-radius: 28px;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.7),
        inset 0 0 0 6px #1e0606,
        inset 0 0 0 8px #facc15,
        inset 0 0 0 12px #b45309,
        inset 0 0 0 14px #facc15;
    overflow: hidden;
    isolation: isolate;
}
.slot-cabinet::before {
    /* subtle wood-grain inner background */
    content: '';
    position: absolute;
    inset: 14px;
    border-radius: 18px;
    background:
        repeating-linear-gradient(115deg, rgba(0, 0, 0, 0.08) 0 2px, transparent 2px 7px),
        radial-gradient(ellipse at center, rgba(255, 255, 255, 0.05), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* Marquee bulbs ringing the cabinet */
.slot-cabinet__bulbs {
    position: absolute;
    inset: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
    pointer-events: none;
    z-index: 2;
}
.slot-cabinet__bulbs li {
    position: absolute;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fffbeb, #facc15 60%, #b45309 100%);
    box-shadow: 0 0 8px #facc15, 0 0 16px rgba(250, 204, 21, 0.6);
    animation: bulb-blink 1.6s infinite;
}
/* Place 24 bulbs around the perimeter — corners + 4 per side */
.slot-cabinet__bulbs li:nth-child(1)  { top: 0;          left: 0;        }
.slot-cabinet__bulbs li:nth-child(2)  { top: 0;          left: 14%;      }
.slot-cabinet__bulbs li:nth-child(3)  { top: 0;          left: 28%;      }
.slot-cabinet__bulbs li:nth-child(4)  { top: 0;          left: 42%;      }
.slot-cabinet__bulbs li:nth-child(5)  { top: 0;          left: 56%;      }
.slot-cabinet__bulbs li:nth-child(6)  { top: 0;          left: 70%;      }
.slot-cabinet__bulbs li:nth-child(7)  { top: 0;          left: 84%;      }
.slot-cabinet__bulbs li:nth-child(8)  { top: 0;          right: 0;       }
.slot-cabinet__bulbs li:nth-child(9)  { top: 14%;        right: 0;       }
.slot-cabinet__bulbs li:nth-child(10) { top: 28%;        right: 0;       }
.slot-cabinet__bulbs li:nth-child(11) { top: 42%;        right: 0;       }
.slot-cabinet__bulbs li:nth-child(12) { top: 56%;        right: 0;       }
.slot-cabinet__bulbs li:nth-child(13) { top: 70%;        right: 0;       }
.slot-cabinet__bulbs li:nth-child(14) { top: 84%;        right: 0;       }
.slot-cabinet__bulbs li:nth-child(15) { bottom: 0;       right: 0;       }
.slot-cabinet__bulbs li:nth-child(16) { bottom: 0;       right: 14%;     }
.slot-cabinet__bulbs li:nth-child(17) { bottom: 0;       right: 28%;     }
.slot-cabinet__bulbs li:nth-child(18) { bottom: 0;       right: 42%;     }
.slot-cabinet__bulbs li:nth-child(19) { bottom: 0;       right: 56%;     }
.slot-cabinet__bulbs li:nth-child(20) { bottom: 0;       right: 70%;     }
.slot-cabinet__bulbs li:nth-child(21) { bottom: 0;       right: 84%;     }
.slot-cabinet__bulbs li:nth-child(22) { bottom: 0;       left: 0;        }
.slot-cabinet__bulbs li:nth-child(23) { bottom: 50%;     left: 0;        }
.slot-cabinet__bulbs li:nth-child(24) { top: 50%;        left: 0;        }
@keyframes bulb-blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.9); }
}
.slot-cabinet.is-winning .slot-cabinet__bulbs li {
    animation: bulb-rave 0.4s infinite;
}
@keyframes bulb-rave {
    0%, 100% { background: radial-gradient(circle at 30% 30%, #fff, #facc15 60%, #b45309 100%); transform: scale(1.2); box-shadow: 0 0 18px #facc15, 0 0 30px #f97316; }
    50%      { background: radial-gradient(circle at 30% 30%, #fff, #ec4899 60%, #831843 100%); transform: scale(0.9); box-shadow: 0 0 18px #ec4899, 0 0 30px #f43f5e; }
}

/* Top arch with neon brand */
.slot-cabinet__arch {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 110px;
    z-index: 1;
    text-align: center;
    overflow: hidden;
}
.slot-cabinet__arch-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.slot-cabinet__neon {
    position: relative;
    margin: 0;
    padding-top: 32px;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 2.4rem;
    font-weight: 900;
    letter-spacing: 0.15em;
    color: #fef3c7;
    text-shadow:
        0 0 4px #fff,
        0 0 8px #fef08a,
        0 0 14px #facc15,
        0 0 22px #f59e0b,
        0 0 36px #ec4899;
    z-index: 2;
}
.slot-cabinet__neon span {
    display: inline-block;
    animation: neon-flicker 4s infinite;
}
.slot-cabinet__neon span:nth-child(odd) { animation-delay: 1s; }
.slot-cabinet__neon-spacer { width: 0.6em; }
@keyframes neon-flicker {
    0%, 92%, 100% { opacity: 1; }
    93% { opacity: 0.4; }
    94% { opacity: 1; }
    96% { opacity: 0.6; }
    97% { opacity: 1; }
}
.slot-cabinet__stars {
    position: absolute;
    bottom: 6px;
    left: 0; right: 0;
    color: #facc15;
    font-size: 0.9rem;
    letter-spacing: 0.5em;
    text-shadow: 0 0 6px #facc15;
    z-index: 2;
}

/* Display window with chrome trim */
.slot-cabinet__display {
    position: relative;
    z-index: 1;
    margin-bottom: 28px;
}
.slot-cabinet__chrome {
    position: relative;
    padding: 14px;
    background: linear-gradient(180deg, #cbd5e1 0%, #475569 50%, #1e293b 100%);
    border-radius: 16px;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.6),
        inset 0 -2px 0 rgba(0, 0, 0, 0.4),
        0 8px 24px rgba(0, 0, 0, 0.5);
}
.slot-cabinet__reels {
    display: flex;
    justify-content: center;
    gap: 8px;
    background: #0a0a0a;
    border-radius: 10px;
    padding: 10px;
    box-shadow: inset 0 4px 20px rgba(0, 0, 0, 0.9);
}
.slot-cabinet__reel {
    width: 140px;
    height: 140px;
    overflow: hidden;
    background: #0a0a0a;
    border-radius: 6px;
    position: relative;
    box-shadow:
        inset 0 8px 16px rgba(0, 0, 0, 0.8),
        inset 0 -8px 16px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(250, 204, 21, 0.3);
}
.slot-cabinet__reel-strip {
    display: flex;
    flex-direction: column;
}
.slot-cabinet__reels.is-spinning .slot-cabinet__reel--settling .slot-cabinet__reel-strip {
    transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.slot-cabinet__reel-cell {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    filter: saturate(1.05);
}
.slot-cabinet__reel-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Glass shine overlay — subtle gradient with center darken */
.slot-cabinet__reel-glass {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.18) 0%,
            transparent 22%,
            transparent 78%,
            rgba(0, 0, 0, 0.35) 100%);
    border-radius: 6px;
}
/* Spinning reels get a vertical motion blur via a striped overlay */
.slot-cabinet__reels.is-spinning .slot-cabinet__reel:not(.slot-cabinet__reel--settling) .slot-cabinet__reel-glass {
    background:
        repeating-linear-gradient(0deg,
            rgba(0, 0, 0, 0.5) 0 2px,
            transparent 2px 6px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.15), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.35));
}
.slot-cabinet__reel--win {
    animation: cabinet-reel-win 0.55s ease-in-out 4;
}
@keyframes cabinet-reel-win {
    0%, 100% { box-shadow: inset 0 8px 16px rgba(0,0,0,0.8), inset 0 -8px 16px rgba(0,0,0,0.8), 0 0 0 1px rgba(250,204,21,0.3); }
    50%      { box-shadow: inset 0 0 24px rgba(250,204,21,0.95), 0 0 36px rgba(250,204,21,0.9), 0 0 60px rgba(236,72,153,0.6); }
}

/* Pay-line: horizontal indicator across all reels at center */
.slot-cabinet__payline {
    position: absolute;
    top: 50%;
    left: 8px; right: 8px;
    height: 0;
    border-top: 2px dashed rgba(250, 204, 21, 0.5);
    pointer-events: none;
    transform: translateY(-1px);
}
.slot-cabinet__payline-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #facc15;
    font-size: 1.2rem;
    text-shadow: 0 0 8px #facc15;
    animation: payline-pulse 1.4s infinite;
}
.slot-cabinet__payline-arrow--left  { left: -4px; }
.slot-cabinet__payline-arrow--right { right: -4px; }
@keyframes payline-pulse {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

/* Status panel under reels */
.slot-cabinet__panel {
    position: relative;
    z-index: 1;
    text-align: center;
}
.slot-cabinet__status {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    background: #0a0a0a;
    border: 2px solid #facc15;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 18px;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.8);
}
.slot-cabinet__status-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.slot-cabinet__status-label {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: rgba(250, 204, 21, 0.7);
    text-transform: uppercase;
}
.slot-cabinet__status-value {
    font-family: 'Courier New', monospace;
    font-size: 1.15rem;
    font-weight: 900;
    color: #facc15;
    text-shadow: 0 0 8px #facc15;
}
.slot-cabinet__error {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.15);
    padding: 8px 12px;
    border-radius: 8px;
    margin: 0 0 12px;
    font-size: 0.9rem;
}

/* Big 3D spin button */
.slot-cabinet__spin-btn {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 180px;
    height: 90px;
    border: none;
    border-radius: 18px;
    background: linear-gradient(180deg, #fde047 0%, #f59e0b 45%, #b45309 90%, #78350f 100%);
    color: #1c0606;
    font-family: 'Georgia', serif;
    font-weight: 900;
    cursor: pointer;
    box-shadow:
        0 8px 0 #78350f,
        0 12px 20px rgba(0, 0, 0, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.6),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    letter-spacing: 0.08em;
    overflow: hidden;
}
.slot-cabinet__spin-btn:hover:not(:disabled) {
    transform: translateY(-2px);
}
.slot-cabinet__spin-btn:active:not(:disabled) {
    transform: translateY(6px);
    box-shadow:
        0 2px 0 #78350f,
        0 4px 8px rgba(0, 0, 0, 0.4),
        inset 0 2px 4px rgba(0, 0, 0, 0.3);
}
.slot-cabinet__spin-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.4);
}
.slot-cabinet__spin-ring {
    position: absolute;
    inset: 4px;
    border-radius: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    pointer-events: none;
}
.slot-cabinet__spin-label {
    font-size: 1.7rem;
    line-height: 1;
}
.slot-cabinet__spin-cost {
    font-size: 0.85rem;
    color: #4a1f0a;
    letter-spacing: 0.15em;
}
.slot-cabinet.is-spinning .slot-cabinet__spin-btn {
    animation: spin-btn-pulse 0.6s infinite;
}
@keyframes spin-btn-pulse {
    0%, 100% { box-shadow: 0 8px 0 #78350f, 0 12px 20px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.6); }
    50%      { box-shadow: 0 8px 0 #78350f, 0 12px 32px rgba(245, 158, 11, 0.8), inset 0 2px 4px rgba(255,255,255,0.8); }
}

.slot-cabinet__low-balance { color: #fde68a; margin-top: 12px; }
.slot-cabinet__low-balance a { color: #fff; text-decoration: underline; }

/* Coin shower on win — falling diamonds across the cabinet */
.slot-cabinet__coins {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 5;
}
.slot-cabinet__coin {
    position: absolute;
    top: -40px;
    font-size: 1.6rem;
    animation: coin-fall linear forwards;
    filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.8));
}
@keyframes coin-fall {
    0%   { transform: translateY(0)    rotate(0); }
    100% { transform: translateY(680px) rotate(720deg); }
}
.slot-coins-leave-active { transition: opacity 0.4s ease; }
.slot-coins-leave-to     { opacity: 0; }

/* Responsive — narrow screens compress everything */
@media (max-width: 620px) {
    .slot-cabinet { padding: 80px 14px 24px; }
    .slot-cabinet__reel,
    .slot-cabinet__reel-cell { width: 90px; height: 90px; }
    .slot-cabinet__neon { font-size: 1.5rem; padding-top: 28px; letter-spacing: 0.08em; }
    .slot-cabinet__status-value { font-size: 0.95rem; }
    .slot-cabinet__spin-btn { width: 150px; height: 76px; }
    .slot-cabinet__spin-label { font-size: 1.4rem; }
}

.slot__history {
    margin-top: var(--space-5);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.slot__history h3 {
    font-size: 1rem;
    color: var(--text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 var(--space-3);
}
.slot__history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.slot__history-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: var(--space-2) var(--space-3);
}
.slot__history-list li.is-win {
    background: linear-gradient(90deg, rgba(250, 204, 21, 0.15), rgba(236, 72, 153, 0.1));
    border: 1px solid rgba(250, 204, 21, 0.4);
}
.slot__history-thumbs { display: inline-flex; gap: var(--space-1); }
.slot__history-thumbs img {
    width: 36px; height: 36px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.slot__history-result { font-size: 0.9rem; }

/* Win overlay */
.slot__win-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}
.slot__win-card {
    background: linear-gradient(135deg, #1e1b4b 0%, #4c1d95 100%);
    border: 2px solid #facc15;
    border-radius: 24px;
    padding: var(--space-6) var(--space-5);
    text-align: center;
    color: #fff;
    max-width: 460px;
    width: 100%;
    box-shadow: 0 20px 80px rgba(250, 204, 21, 0.4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: center;
}
.slot__win-confetti { font-size: 3rem; }
.slot__win-card h2 { margin: 0; font-size: 2rem; }
.slot__win-girl {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}
.slot__win-girl img {
    width: 120px; height: 120px;
    border-radius: 50%;
    border: 3px solid #facc15;
    object-fit: cover;
}
.slot__win-prize {
    margin: 0;
    font-size: 1.05rem;
    color: #fde68a;
}
.slot-win-pop-enter-active {
    animation: slot-win-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.slot-win-pop-leave-active {
    animation: slot-win-out 0.25s ease-in;
}
@keyframes slot-win-in {
    0%   { opacity: 0; transform: scale(0.6); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes slot-win-out {
    to { opacity: 0; transform: scale(0.9); }
}

/* Responsive — single column for narrow screens */
@media (max-width: 540px) {
    .slot__reels { gap: var(--space-2); }
    .slot__reel, .slot__reel-cell { width: 96px; height: 96px; }
    .slot__spin-btn { font-size: 1.1rem; padding: var(--space-3) var(--space-4); }
    .slot__win-girl img { width: 90px; height: 90px; }
}

/* Claim form (separate page) */
.slot-claim {
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--space-5) var(--space-4);
}
.slot-claim__layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--space-5);
    align-items: start;
}
.slot-claim__prize {
    background: linear-gradient(180deg, rgba(250, 204, 21, 0.08), transparent);
    border: 1px solid rgba(250, 204, 21, 0.3);
    border-radius: 16px;
    padding: var(--space-4);
    text-align: center;
}
.slot-claim__prize img {
    width: 200px;
    height: 200px;
    border-radius: 14px;
    object-fit: cover;
    border: 2px solid rgba(250, 204, 21, 0.4);
}
.slot-claim__prize h2 { margin: var(--space-3) 0 var(--space-1); }
.slot-claim__kind, .slot-claim__free-shipping {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-2) 0;
    color: var(--text-muted, #94a3b8);
}
.slot-claim__form {
    background: var(--surface, #fff);
    border-radius: 14px;
    padding: var(--space-4);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}
@media (max-width: 760px) {
    .slot-claim__layout { grid-template-columns: 1fr; }
    .slot-claim__prize img { width: 140px; height: 140px; }
}

/* Pending-win cards (account/settings/orders) */
.orders-pending-wins {
    margin-bottom: var(--space-5);
}
.orders-pending-wins > h2 { margin: 0 0 var(--space-2); }
.pending-win-card {
    border: 2px solid rgba(250, 204, 21, 0.6);
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.08), rgba(236, 72, 153, 0.05));
}
.pending-win-card__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.pending-win-card__photo {
    width: 64px; height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(250, 204, 21, 0.6);
}
.pending-win-card .btn { margin-left: auto; }

/* ============================================================
   Community Challenges
   ============================================================ */
.cc {
    max-width: 980px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}
.cc__header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin-bottom: 20px;
}
.cc__header h1 { margin: 0 0 4px; }

/* Ban screen */
.cc-ban {
    text-align: center;
    padding: 40px 24px;
    background: linear-gradient(135deg, #7f1d1d, #450a0a);
    color: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(127, 29, 29, 0.4);
    max-width: 560px;
    margin: 24px auto;
}
.cc-ban__icon { font-size: 3rem !important; color: #fca5a5; margin-bottom: 8px; }
.cc-ban h2 { margin: 8px 0; font-size: 1.6rem; }
.cc-ban__reason { color: #fecaca; margin: 0 0 16px; font-style: italic; }
.cc-ban__hint { color: #fee2e2; margin: 16px 0 24px; }

/* Active-attempt banner */
.cc-active-banner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding: 18px 22px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-radius: 14px;
    color: #fff;
    margin-bottom: 28px;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3);
}
.cc-active-banner__body { flex: 1; min-width: 220px; }
.cc-active-banner__body h2 { margin: 8px 0 4px; font-size: 1.25rem; }
/* Force readable color even when inline classes (.text-muted) try to lighten it */
.cc-active-banner__body p,
.cc-active-banner__body p.text-muted { margin: 0; color: rgba(255, 255, 255, 0.95); }
.cc-active-banner__pill {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}
.cc-active-banner .btn { background: #fff; color: #d97706; }

/* Categories grid */
.cc-categories { margin: 0 0 36px; }
.cc-categories__heading {
    margin: 0 0 16px; font-size: 1.2rem; font-weight: 700;
}
.cc-categories__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.cc-cat-card {
    display: flex; flex-direction: column; gap: 8px;
    padding: 22px 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    text-decoration: none;
    min-height: 140px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.25);
}
.cc-cat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(99, 102, 241, 0.35);
}
.cc-cat-card__icon { font-size: 1.8rem !important; opacity: 0.9; }
.cc-cat-card h3 { margin: 0; font-size: 1.15rem; }
.cc-cat-card p { margin: 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.88); }
.cc-cat-card__count {
    margin-top: auto;
    font-size: 0.78rem;
    opacity: 0.8;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Eligibility banner (under the categories area) */
.cc-eligibility {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 24px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(236, 72, 153, 0.08));
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 14px;
    margin: 0 0 28px;
}
.cc-eligibility__icon {
    font-size: 2.2rem !important;
    color: #d97706;
}
.cc-eligibility h2 { margin: 0 0 6px; font-size: 1.1rem; }
.cc-eligibility p  { margin: 0 0 10px; }

/* ─── Roulette wheel ─── */
.wheel-stage {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin: 32px auto 24px;
    text-align: center;
}
.wheel-pointer {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    color: #facc15;
    font-size: 2.2rem;
    text-shadow: 0 0 6px #f59e0b, 0 0 12px #f59e0b;
    line-height: 1;
}
.wheel {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    box-shadow:
        0 0 0 8px #1e293b,
        0 0 0 14px #facc15,
        0 24px 48px rgba(0, 0, 0, 0.35);
    transition: transform 4s cubic-bezier(0.16, 1, 0.3, 1);
    transform: rotate(0deg);
    overflow: hidden;
}
/* Slice labels: rotate parent wrapper by the slice's center angle, then
   slide a child outward via translateY so the text floats at the slice's
   visual center. */
.wheel__label {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.wheel__label-text {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 36%;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.78rem;
    line-height: 1.15;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    word-wrap: break-word;
}
.wheel__hub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22%;
    height: 22%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fffbeb, #facc15 60%, #b45309 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3), inset 0 -4px 8px rgba(0, 0, 0, 0.2);
    z-index: 2;
}
.wheel__hub .material-symbols-outlined {
    color: #1c0606;
    font-size: 1.6rem !important;
}
.wheel-controls {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
}
.wheel-spin-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 36px;
    background: linear-gradient(135deg, #ec4899, #f43f5e);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(236, 72, 153, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wheel-spin-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(236, 72, 153, 0.55);
}
.wheel-spin-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.wheel-result {
    width: 100%;
    max-width: 460px;
    padding: 18px 22px;
    background: var(--surface, #fff);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    text-align: center;
}
.wheel-result__heading {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted, #94a3b8);
    font-size: 0.78rem;
}
.wheel-result__title { margin: 4px 0 8px; font-size: 1.4rem; }
.wheel-result__objective { margin: 0 0 12px; }
.wheel-result__reward {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
    border-radius: 999px;
    margin: 0 0 14px;
    font-size: 0.95rem;
    font-weight: 600;
}
.wheel-result form {
    display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.wheel-result__lock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 6px 0 12px;
}
.wheel-result__lock .material-symbols-outlined { font-size: 1rem !important; }

/* Spin button visually communicates the locked state */
.wheel-spin-btn:disabled {
    background: linear-gradient(135deg, #64748b, #475569);
    color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Pool inside a category */
.cc-pool { display: flex; flex-direction: column; gap: 14px; }
.cc-pool-card {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 18px 20px;
    background: var(--surface, #fff);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}
.cc-pool-card__body { flex: 1; min-width: 240px; }
.cc-pool-card__title { margin: 0 0 4px; font-size: 1.1rem; }
.cc-pool-card__objective { margin: 0 0 10px; color: var(--text-muted, #64748b); font-size: 0.93rem; }
.cc-pool-card__meta { display: flex; gap: 8px; flex-wrap: wrap; }

.cc-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--text-muted, #475569);
    font-weight: 600;
}
.cc-chip--reward {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}
.cc-chip .material-symbols-outlined { font-size: 0.95rem; }

/* Active-attempt view */
.cc-objective {
    padding: 20px 22px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(236, 72, 153, 0.05));
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 14px;
    margin-bottom: 22px;
}
.cc-objective h2 { margin: 0 0 8px; font-size: 1.1rem; }
.cc-objective p { margin: 0 0 12px; line-height: 1.55; }
.cc-objective__meta { display: flex; gap: 8px; flex-wrap: wrap; }

.cc-card {
    padding: 20px 22px;
    background: var(--surface, #fff);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    margin-bottom: 22px;
}
.cc-card--info {
    display: flex; align-items: flex-start; gap: 14px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(99, 102, 241, 0.05));
    border-color: rgba(59, 130, 246, 0.2);
}
.cc-card--info .material-symbols-outlined { font-size: 1.8rem; color: #3b82f6; }
.cc-card--info h3 { margin: 0 0 4px; }
.cc-card--info p { margin: 0; }
.cc-section-heading { margin: 0 0 12px; font-size: 1rem; font-weight: 700; }

.cc-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.cc-media-tile {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 10px;
    background: #0f172a;
    position: relative;
}
.cc-media-tile img,
.cc-media-tile video {
    width: 100%; height: 100%; object-fit: cover;
}

.cc-upload {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.cc-upload__btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cc-upload__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.3);
}
.cc-upload__btn input[type=file] { display: none; }

.cc-actions {
    margin-top: 24px;
    display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
}
.cc-actions__skip { width: 100%; }
.cc-actions__skip details { color: var(--text-muted, #64748b); }
.cc-actions__skip summary { cursor: pointer; }

/* Feed */
.cc-feed { margin: 32px 0 0; }
.cc-feed__heading { margin: 0 0 14px; font-size: 1.2rem; font-weight: 700; }
.cc-feed__teaser { margin: 0 0 12px; }
.cc-feed__list {
    display: flex; flex-direction: column; gap: 16px;
}
.cc-feed-card {
    position: relative;
    padding: 18px 20px;
    border-radius: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    isolation: isolate;
    color: #fff;  /* default — overridden per level if needed */
}
.cc-feed-card:hover {
    transform: translateY(-2px);
}
.cc-feed-card__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    position: relative; z-index: 2;
}
.cc-feed-card__title {
    position: relative; z-index: 2;
    margin: 4px 0 14px;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}
.cc-feed-card__when {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    margin-left: auto;
}
/* Admin-only ✕ in the card header — hide a completion from the public feed. */
.cc-feed-card__hide {
    appearance: none;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.85);
    border-radius: 999px;
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 120ms, border-color 120ms, color 120ms;
}
.cc-feed-card__hide:hover {
    background: rgba(220, 38, 38, 0.85);
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
}
.cc-feed-card__hide .material-symbols-outlined {
    font-size: 16px;
    line-height: 1;
}

/* Difficulty pill ─ a small chip with color-matched dot */
.cc-feed-card__diff {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    backdrop-filter: blur(4px);
}
.cc-feed-card__diff-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px currentColor;
}
.cc-feed-card__diff--1 .cc-feed-card__diff-dot { background: #34d399; }  /* easy = green */
.cc-feed-card__diff--2 .cc-feed-card__diff-dot { background: #60a5fa; }  /* medium = blue */
.cc-feed-card__diff--3 .cc-feed-card__diff-dot { background: #c084fc; }  /* hard = purple */
.cc-feed-card__diff--4 .cc-feed-card__diff-dot { background: #facc15; box-shadow: 0 0 10px #facc15; }

/* ── L1 — easy: cool teal/green ───────────────────────────────────────── */
.cc-feed-card--lvl-1 {
    background: linear-gradient(135deg, #064e3b 0%, #047857 60%, #059669 100%);
    box-shadow: 0 6px 20px rgba(4, 120, 87, 0.25);
}
.cc-feed-card--lvl-1:hover {
    box-shadow: 0 10px 28px rgba(4, 120, 87, 0.4);
}

/* ── L2 — medium: deep blue/indigo ────────────────────────────────────── */
.cc-feed-card--lvl-2 {
    background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 50%, #4338ca 100%);
    box-shadow: 0 6px 20px rgba(67, 56, 202, 0.3);
}
.cc-feed-card--lvl-2:hover {
    box-shadow: 0 10px 28px rgba(67, 56, 202, 0.45);
}

/* ── L3 — hard: purple with a slow pulsing glow ───────────────────────── */
.cc-feed-card--lvl-3 {
    background: linear-gradient(135deg, #581c87 0%, #7e22ce 50%, #a21caf 100%);
    box-shadow:
        0 0 0 1px rgba(192, 132, 252, 0.5),
        0 8px 28px rgba(168, 85, 247, 0.35),
        0 0 24px rgba(168, 85, 247, 0.15);
    animation: cc-feed-hard-pulse 3.2s ease-in-out infinite;
}
.cc-feed-card--lvl-3:hover {
    box-shadow:
        0 0 0 1px #c084fc,
        0 12px 36px rgba(168, 85, 247, 0.55),
        0 0 32px rgba(168, 85, 247, 0.3);
}
@keyframes cc-feed-hard-pulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.5), 0 8px 28px rgba(168, 85, 247, 0.35), 0 0 24px rgba(168, 85, 247, 0.15); }
    50%      { box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.8), 0 8px 28px rgba(168, 85, 247, 0.55), 0 0 40px rgba(168, 85, 247, 0.45); }
}

/* ── L4 — legendary: red→amber→gold with a moving shimmer ─────────────── */
.cc-feed-card--lvl-4 {
    background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 35%, #f59e0b 75%, #facc15 100%);
    box-shadow:
        0 0 0 2px rgba(250, 204, 21, 0.55),
        0 10px 32px rgba(245, 158, 11, 0.45),
        0 0 28px rgba(250, 204, 21, 0.3);
}
.cc-feed-card--lvl-4::before {
    /* moving shine band */
    content: '';
    position: absolute;
    inset: -25%;
    background: linear-gradient(60deg,
        transparent 35%,
        rgba(255, 255, 255, 0.28) 48%,
        rgba(255, 255, 255, 0.05) 52%,
        transparent 65%);
    animation: cc-feed-legendary-shimmer 4.5s linear infinite;
    pointer-events: none;
    z-index: 1;
}
.cc-feed-card--lvl-4 .cc-feed-card__diff {
    background: rgba(0, 0, 0, 0.45);
    border-color: rgba(250, 204, 21, 0.5);
}
@keyframes cc-feed-legendary-shimmer {
    0%   { transform: translateX(-60%) skewX(-8deg); }
    100% { transform: translateX(60%)  skewX(-8deg); }
}

/* When unavailable, mute the gradient so the placeholder reads first */
.cc-feed-card.is-unavailable {
    background: rgba(15, 23, 42, 0.05) !important;
    color: var(--text-muted, #64748b);
    border: 1px dashed rgba(0, 0, 0, 0.15);
    box-shadow: none !important;
    animation: none !important;
}
.cc-feed-card.is-unavailable::before { display: none; }
.cc-feed-card.is-unavailable .cc-feed-card__diff { background: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.12); color: var(--text-muted, #64748b); }
.cc-feed-card.is-unavailable .cc-feed-card__when { color: var(--text-muted, #94a3b8); }
.cc-feed-card__thumbs {
    position: relative; z-index: 2;
    display: flex; gap: 8px; flex-wrap: wrap;
    text-decoration: none;
}
.cc-feed-thumb {
    width: 86px; height: 86px;
    border-radius: 10px;
    object-fit: cover;
    background: #1e293b;
    border: 2px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: transform 0.18s ease, border-color 0.18s ease;
    display: block;
}
.cc-feed-thumb:hover {
    transform: scale(1.06) translateY(-2px);
    border-color: rgba(255, 255, 255, 0.6);
}
.cc-feed-thumb--video {
    position: relative;
    display: inline-block;
    overflow: hidden;
}
.cc-feed-thumb--video video {
    width: 84px; height: 84px; object-fit: cover; display: block;
}
.cc-feed-thumb--video .material-symbols-outlined {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 28px; height: 28px;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    font-size: 1.6rem !important;
}
.cc-feed-card__unavailable {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    color: var(--text-muted, #64748b);
    font-size: 0.92rem;
}
.cc-feed__sentinel {
    text-align: center;
    padding: 18px;
    color: var(--text-muted, #94a3b8);
    font-size: 0.9rem;
}
.cc-feed__loading { display: inline-block; }

/* Admin: cycle progress bar */
.slot-progress {
    position: relative;
    height: 28px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    overflow: hidden;
}
.slot-progress__bar {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, #ec4899, #f59e0b, #facc15);
    border-radius: 14px;
    transition: width 0.4s ease-out;
}
.slot-progress__label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}


/* ─── Help / Legal pages ─────────────────────────────────────────── */
/* The contact form, terms, privacy etc. share a tight 800px reading
   column. Body copy is paragraph-spaced and slightly larger so long
   blocks of legal text stay readable. */
.helpc-page {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-8) var(--container-pad);
}
.helpc-page h1 { margin-top: 0; }
.helpc-page h2 { margin-top: var(--space-8); }
.helpc-page p,
.helpc-page li { line-height: 1.65; }
.helpc-page ul { padding-left: var(--space-6); margin-bottom: var(--space-5); }
.helpc-page li + li { margin-top: var(--space-2); }
.helpc-lead {
    font-size: 1.05rem;
    margin-bottom: var(--space-6);
}
.helpc-rule {
    border: none;
    border-top: 1px solid rgba(0,0,0,0.08);
    margin: var(--space-8) 0 var(--space-4);
}
.helpc-form .form-group { margin-bottom: var(--space-5); }
.helpc-form textarea  { resize: vertical; min-height: 140px; }
.helpc-original-error {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
    font-size: 0.95rem;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #b91c1c;
    padding: var(--space-4);
    border-radius: 8px;
    overflow-x: auto;
    white-space: pre-wrap;
    margin: var(--space-6) 0;
}
.helpc-page--legal h2 + p { margin-top: var(--space-3); }


/* ─── Admin / Logs dashboard ──────────────────────────────────────── */

/* "Critical" hub card stands out with a red border + subtle wash. */
.admin-hub__card--danger {
    border: 1px solid rgba(239, 68, 68, 0.35);
    background:
        linear-gradient(180deg, rgba(254,226,226,0.6), rgba(255,255,255,1));
}
.admin-hub__card--danger .admin-hub__icon { color: #b91c1c; }
.admin-hub__card--danger .admin-hub__count { color: #b91c1c; }

/* Pulsing "must-see" panel — sits above the hub when there are unseen
   critical logs. The animation is gentle (no flashing). */
.logs-mustsee {
    border: 1px solid rgba(239, 68, 68, 0.45);
    background:
        linear-gradient(180deg, #fef2f2, #fff);
    border-radius: 12px;
    padding: var(--space-5);
    margin-top: var(--space-4);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    animation: mustseePulse 2.4s ease-in-out infinite;
}
.logs-mustsee__header {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}
.logs-mustsee__icon {
    color: #b91c1c;
    font-size: 32px;
    flex-shrink: 0;
}
.logs-mustsee__title {
    margin: 0 0 var(--space-1);
    color: #991b1b;
    font-size: 1.05rem;
}
.logs-mustsee__list {
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.logs-mustsee__list a {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    align-items: baseline;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.7);
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(239, 68, 68, 0.15);
}
.logs-mustsee__list a:hover {
    background: rgba(255,255,255,1);
    border-color: rgba(239, 68, 68, 0.4);
}
.logs-mustsee__msg {
    font-weight: 600;
    color: #7f1d1d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.logs-mustsee__when {
    font-size: 0.75rem;
    flex-shrink: 0;
}
@keyframes mustseePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.35); }
    50%      { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

/* Calm "all clear" panel — shown when everything has been reviewed. */
.logs-allclear {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #166534;
    border-radius: 12px;
    padding: var(--space-4) var(--space-5);
    margin-top: var(--space-4);
}
.logs-allclear .material-symbols-outlined {
    font-size: 28px;
    color: #16a34a;
}

/* Stats grid below the hub. Three cards on desktop, stacks on small. */
.logs-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-3);
}
.logs-stats__card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: var(--space-4) var(--space-5);
}
.logs-stats__card h3 { margin: 0; font-size: 1rem; }
.logs-stats__card ul {
    list-style: none;
    padding: 0;
    margin: var(--space-3) 0 0;
}
.logs-stats__card li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.logs-stats__card li:last-child { border-bottom: none; }
.logs-stats__card li strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }

/* Row highlight on the list when a critical log hasn't been opened yet. */
.logs-row--mustsee { background: rgba(254, 226, 226, 0.45); }
.logs-row--mustsee:hover { background: rgba(254, 226, 226, 0.75); }

/* Context block on the detail page — readable JSON dump. */
.logs-context {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    background: #0f172a;
    color: #e2e8f0;
    padding: var(--space-4);
    border-radius: 8px;
    overflow-x: auto;
    white-space: pre;
    margin: 0;
    max-height: 60vh;
}


/* ─── Landing page ────────────────────────────────────────────────── */
:root {
    --brand:       #c728c7;
    --brand-2:     #8a1a8a;
    --brand-soft:  #fdf3fd;
}

.landing-body { background: #fff; overflow-x: hidden; }
.landing-body main { display: none; }

/* HERO --------------------------------------------------------------- */
.landing-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(56px, 11vw, 120px) 24px;
    text-align: center;
    background:
        radial-gradient(ellipse at 50% 0%, var(--brand-soft) 0%, transparent 60%),
        #fff;
}
.landing-hero__inner { position: relative; z-index: 2; max-width: 880px; margin: 0 auto; }

.landing-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(199, 40, 199, 0.08);
    color: var(--brand-2);
    border: 1px solid rgba(199, 40, 199, 0.18);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 24px;
}
.landing-hero__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #16a34a;
    animation: hero-dot 1.8s ease-in-out infinite;
}
@keyframes hero-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6); }
    50%      { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
}

.landing-hero__title {
    font-size: clamp(36px, 6.5vw, 64px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0 0 20px;
    color: #0f172a;
}
.landing-hero__title-accent {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
}
.landing-hero__sub {
    font-size: clamp(16px, 2vw, 19px);
    line-height: 1.55;
    color: #475569;
    max-width: 600px;
    margin: 0 auto 36px;
}

.landing-hero__ctas {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.landing-hero__trust {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #64748b;
    font-size: 14px;
}
.landing-hero__trust .material-symbols-outlined {
    font-size: 18px;
    color: var(--brand);
}

.landing-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.45;
    pointer-events: none;
    z-index: 1;
}
.landing-hero__orb--a { width: 360px; height: 360px; background: var(--brand); top: -80px;  left: -80px; }
.landing-hero__orb--b { width: 300px; height: 300px; background: #ff8a5b;      top: 20px;   right: -60px; opacity: 0.35; }
.landing-hero__orb--c { width: 280px; height: 280px; background: #5b8aff;      bottom: -100px; left: 40%;  opacity: 0.25; }

/* CTAs --------------------------------------------------------------- */
.landing-cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    border-radius: 14px;
    text-decoration: none;
    font-size: 15px;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    min-width: 280px;
    text-align: left;
}
.landing-cta strong { display: block; font-size: 16px; font-weight: 700; line-height: 1.2; }
.landing-cta small  { display: block; font-size: 12px; opacity: 0.85; margin-top: 2px; }
.landing-cta__body  { flex: 1; }
.landing-cta__arrow { font-size: 22px; font-weight: 700; }
.landing-cta:hover  { transform: translateY(-2px); }

.landing-cta--primary {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
    color: #fff;
    box-shadow: 0 6px 20px rgba(199, 40, 199, 0.35);
}
.landing-cta--primary:hover { box-shadow: 0 10px 28px rgba(199, 40, 199, 0.45); }
.landing-cta--primary .material-symbols-outlined { font-size: 28px; }

.landing-cta--secondary {
    background: #fff;
    color: #0f172a;
    border: 2px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.landing-cta--secondary:hover { border-color: var(--brand); }
.landing-cta--secondary .material-symbols-outlined {
    font-size: 28px;
    color: var(--brand);
}

/* SECTIONS / TYPOGRAPHY --------------------------------------------- */
.landing-section__title {
    font-size: clamp(26px, 3.5vw, 36px);
    font-weight: 800;
    letter-spacing: -0.01em;
    text-align: center;
    margin: 0 0 40px;
    color: #0f172a;
}

/* HOW IT WORKS ------------------------------------------------------- */
.landing-steps {
    padding: clamp(56px, 8vw, 96px) 24px;
    background: #fafafa;
}
.landing-steps__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    max-width: 1080px;
    margin: 0 auto;
}
.landing-step {
    background: #fff;
    border-radius: 16px;
    padding: 28px;
    border: 1px solid #ececec;
    text-align: left;
}
.landing-step__num {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 18px;
    margin-bottom: 16px;
}
.landing-step h3 { margin: 0 0 8px; font-size: 18px; color: #0f172a; }
.landing-step p  { margin: 0; color: #64748b; line-height: 1.55; }

/* FEATURES ----------------------------------------------------------- */
.landing-features { padding: clamp(56px, 8vw, 96px) 24px; }
.landing-features__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    max-width: 1080px;
    margin: 0 auto;
}
.landing-feature {
    display: block;
    padding: 32px 28px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #ececec;
    text-decoration: none;
    color: #0f172a;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
}
.landing-feature:hover {
    transform: translateY(-4px);
    border-color: var(--brand);
    box-shadow: 0 12px 30px rgba(199, 40, 199, 0.12);
}
.landing-feature__icon {
    font-size: 36px !important;
    color: var(--brand);
    margin-bottom: 16px;
    display: inline-block;
}
.landing-feature h3 { margin: 0 0 10px; font-size: 20px; }
.landing-feature p  { margin: 0 0 18px; color: #475569; line-height: 1.6; font-size: 14.5px; }
.landing-feature__arrow { color: var(--brand); font-weight: 600; font-size: 14px; }

/* TRUST -------------------------------------------------------------- */
.landing-trust {
    background: var(--brand-soft);
    padding: clamp(48px, 7vw, 80px) 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 32px;
    max-width: 1180px;
    margin: 0 auto;
}
.landing-trust__item { display: flex; gap: 14px; align-items: flex-start; }
.landing-trust__item .material-symbols-outlined {
    font-size: 28px;
    color: var(--brand);
    flex-shrink: 0;
}
.landing-trust__item strong { display: block; font-size: 16px; color: #0f172a; }
.landing-trust__item p      { margin: 4px 0 0; color: #64748b; font-size: 14px; line-height: 1.5; }

/* FINAL CTA ---------------------------------------------------------- */
.landing-final {
    padding: clamp(64px, 10vw, 120px) 24px;
    text-align: center;
    background:
        radial-gradient(ellipse at 50% 100%, var(--brand-soft) 0%, transparent 70%),
        #fff;
}
.landing-final h2 {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    margin: 0 0 12px;
    color: #0f172a;
    letter-spacing: -0.01em;
}
.landing-final__sub { color: #475569; font-size: 17px; margin: 0 0 32px; }
.landing-final__signup { margin-top: 28px; color: #64748b; font-size: 14px; }
.landing-final__signup a { color: var(--brand); font-weight: 600; }

@media (max-width: 640px) {
    .landing-cta { min-width: 0; width: 100%; }
    .landing-hero__ctas { flex-direction: column; align-items: stretch; }
    .landing-hero__ctas .landing-cta { justify-content: flex-start; }
}


/* ─── Auth: Google Sign-in button + divider ─────────────────────── */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 500;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}
.google-signin-wrap {
    margin: 0 0 16px;
}
/* GIS renders an inner <div> with a fixed width by default — force fluid. */
.google-signin-wrap .g_id_signin > div,
.google-signin-wrap .g_id_signin iframe {
    width: 100% !important;
    max-width: 100% !important;
}

/* ─── Profile-incomplete warning banner ─────────────────────────── */
/* Shown on /account/ when username, gender or birthdate is NULL —
   typical after a fresh Google sign-in. Soft amber tone, not red:
   it's a nudge, not an error. */
.profile-incomplete {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    margin: 0 0 20px;
    border-radius: 12px;
    background: linear-gradient(180deg, #fff7e6 0%, #fffbf2 100%);
    border: 1px solid #f5d28a;
    color: #7c4a03;
}
.profile-incomplete__icon {
    color: #d97706;
    font-size: 26px;
    flex-shrink: 0;
    margin-top: 2px;
}
.profile-incomplete__body {
    flex: 1;
    line-height: 1.5;
    font-size: 14px;
}
.profile-incomplete__body strong { color: #7c4a03; }
.profile-incomplete__body p {
    margin: 4px 0 0;
    color: #92400e;
    font-size: 13.5px;
}
.profile-incomplete .btn {
    flex-shrink: 0;
    align-self: center;
    background: #d97706;
    border-color: #d97706;
}
.profile-incomplete .btn:hover {
    background: #b45309;
    border-color: #b45309;
}

@media (max-width: 540px) {
    .profile-incomplete { flex-direction: column; }
    .profile-incomplete .btn { align-self: flex-start; }
}

/* ─── File input — drag-drop card ─────────────────────────────────────
   Auto-applied by assets/js/file_input.js to every <input type="file">.
   Wraps the native input in a styled drop-zone, accumulates files on
   multi-select (so the user can add files in several passes), and renders
   preview thumbnails. The native input is overlaid invisibly on top so
   clicking anywhere on the wrapper opens the picker. */
.file-input-wrapper {
    position: relative;
    display: block;
    border: 2px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-bg-card);
    padding: var(--space-4);
    transition: border-color 0.15s, background-color 0.15s;
    cursor: pointer;
    min-height: 120px;
}
.file-input-wrapper:hover {
    border-color: var(--color-primary);
    background: rgba(199, 40, 199, 0.04);
}
.file-input-wrapper.is-dragging {
    border-color: var(--color-primary);
    background: rgba(199, 40, 199, 0.10);
}
.file-input-wrapper:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(199, 40, 199, 0.18);
    outline: none;
}
.file-input-wrapper__native {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}
/* Native input takes pointer events when the list is empty; once files
   exist, the list (with its own remove buttons) sits on top. */
.file-input-wrapper.has-files .file-input-wrapper__native {
    pointer-events: none;
}
.file-input-wrapper__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--space-3) var(--space-2);
    text-align: center;
    pointer-events: none;
}
.file-input-wrapper.has-files .file-input-wrapper__placeholder { display: none; }
.file-input-wrapper__icon {
    font-size: 40px !important;
    color: var(--color-primary);
}
.file-input-wrapper__primary {
    font-size: 0.95rem;
    color: var(--color-text);
}
.file-input-wrapper__secondary {
    font-size: 0.8rem;
}
.file-input-wrapper__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--space-2);
    position: relative;
    z-index: 2;
}
.file-input-wrapper__item {
    position: relative;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 6px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.file-input-wrapper__thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    background: #000;
}
.file-input-wrapper__thumb--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px !important;
    color: var(--color-text-muted);
}
.file-input-wrapper__meta {
    display: flex;
    flex-direction: column;
    padding: 6px 8px;
    gap: 2px;
    min-width: 0;
}
.file-input-wrapper__name {
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-input-wrapper__size {
    font-size: 0.7rem;
}
.file-input-wrapper__remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.15s;
    z-index: 3;
}
.file-input-wrapper__remove:hover {
    background: var(--color-error, #b91c1c);
}
.file-input-wrapper__remove .material-symbols-outlined {
    font-size: 18px !important;
}
/* "Add more" tile rendered after the thumbs — only shown when wrapper is
   multi-file. Clicking it opens the picker (via the native input below). */
.file-input-wrapper__add-more {
    aspect-ratio: 1 / 1;
    border: 2px dashed var(--color-border-strong);
    border-radius: var(--radius-md, 6px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    background: transparent;
}
.file-input-wrapper__add-more:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.file-input-wrapper__add-more .material-symbols-outlined {
    font-size: 28px !important;
}