/* cirQnA - cirqna.com design system */

:root {
    --bg: #0A0B10;
    --bg-elevated: #12141c;
    --bg-card: #181b26;
    --text: #FFFFFF;
    --muted: #888C99;
    --q: #FF007F;
    --a: #00E5FF;
    --success: #00E676;
    --error: #FF5252;
    --radius: 16px;
    --nav-h: 64px;
    --top-h: 56px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    font-family: 'Inter', 'Segoe UI', Helvetica, sans-serif;
}

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

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    min-height: 100%;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--a); text-decoration: none; }
img { max-width: 100%; display: block; }

.top-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: var(--top-h);
    padding: 0 16px;
    background: rgba(10, 11, 16, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.brand-link {
    flex-shrink: 1;
    min-width: 0;
}

.brand-logo { height: 36px; width: auto; }

.top-bar-meta {
    display: flex;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 8px;
    align-items: center;
    min-width: 0;
}

.credit-pill, .level-pill {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.08);
}

.credit-pill { color: var(--a); }
.credit-icon { font-size: 10px; margin-right: 4px; }
.level-pill { color: var(--muted); }

.streak-pill {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
    gap: 4px;
    font-size: 13px;
    font-weight: 800;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 0, 127, 0.12);
    border: 1px solid rgba(255, 0, 127, 0.35);
    color: var(--q);
    text-decoration: none;
}

.friend-pill {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
    gap: 4px;
    font-size: 13px;
    font-weight: 800;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.35);
    color: var(--a);
    text-decoration: none;
}

.friend-pill__icon { font-size: 13px; line-height: 1; }

.streak-pill--risk {
    animation: streak-pulse 1.4s ease-in-out infinite;
    border-color: var(--q);
}

.streak-pill__flame { font-size: 14px; line-height: 1; }

.creator-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 0, 127, 0.12);
    border: 1px solid rgba(255, 0, 127, 0.35);
    text-decoration: none;
}

.creator-pill.is-active {
    box-shadow: 0 0 0 2px rgba(255, 0, 127, 0.28);
}

.creator-pill__icon {
    font-size: 14px;
    line-height: 1;
}

.creator-pill__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--q);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
}

.profile-creator-dash {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
    text-decoration: none;
}

.profile-creator-dash__badge {
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
}

.creator-browse-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.creator-browse-row__link {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-decoration: none;
    color: inherit;
}

.creator-browse-row__link:active {
    background: rgba(255, 0, 127, 0.08);
}

.creator-browse-row__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    font-weight: 800;
    font-size: 18px;
    color: var(--q);
}

.creator-browse-row__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.auth-switch--tight {
    margin: 0 0 4px;
}

.creator-browse-row__name {
    display: block;
    font-weight: 800;
    font-size: 16px;
}

.creator-browse-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.creator-browse-row__rank {
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
}

.creator-browse-row__cta {
    font-size: 13px;
    font-weight: 800;
    color: var(--q);
}

.creator-browse-row__pill {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--muted);
    white-space: nowrap;
}

.creator-browse-row__pill--reveal {
    background: rgba(0, 229, 255, 0.15);
    color: var(--a);
}

.help-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.35);
    color: var(--a);
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
}

@media (max-width: 400px) {
    .top-bar {
        padding: 0 10px;
        gap: 6px;
    }

    .brand-logo { height: 30px; }

    .top-bar-meta { gap: 4px; }

    .credit-pill,
    .level-pill,
    .streak-pill,
    .friend-pill {
        font-size: 12px;
        padding: 4px 7px;
    }

    .help-pill,
    .creator-pill {
        width: 26px;
        height: 26px;
        font-size: 14px;
    }
}

@keyframes streak-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 0, 127, 0.35); }
    50% { box-shadow: 0 0 0 6px rgba(255, 0, 127, 0); }
}

.page {
    min-height: calc(100vh - var(--top-h));
    min-height: calc(100dvh - var(--top-h));
    padding: 16px;
}

.page.has-nav {
    padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 32px);
}

.page--auth {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--top-h));
    min-height: calc(100dvh - var(--top-h));
}

/* Creator ask/browse - full-width scroll, not centered auth column */
.page--auth:has(.creator-shell) {
    display: block;
}

.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    height: calc(var(--nav-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: rgba(10, 11, 16, 0.96);
    backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255,255,255,0.08);
}

.party-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.party-card {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: 16px;
}

.party-code {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 0.14em;
    color: var(--a);
    margin: 0;
}

.party-actions {
    margin-top: 8px;
    display: flex;
    justify-content: flex-start;
}

.party-count {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.party-question {
    margin: 12px 0 0;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
}

.party-members {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.party-member {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.party-member__name {
    font-weight: 700;
}

.party-member__state {
    font-size: 12px;
    color: var(--muted);
}

.party-member__answer {
    margin-top: 6px;
    color: var(--muted);
    line-height: 1.4;
    font-size: 14px;
}

.party-pick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.party-pick-grid .friend-btn {
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.party-pick-grid .friend-btn.is-selected {
    border-color: rgba(0, 229, 255, 0.8);
    box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.22);
    background: rgba(0, 229, 255, 0.12);
}

.bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bottom-nav__item.is-active { color: var(--text); }
.bottom-nav__item.is-active .bottom-nav__icon { color: var(--q); }

.bottom-nav__icon-wrap {
    position: relative;
    display: inline-flex;
    line-height: 1;
}

.bottom-nav__icon {
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}

.bottom-nav__badge {
    position: absolute;
    top: -5px;
    right: -10px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--q);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    letter-spacing: 0;
    box-shadow: 0 0 0 2px rgba(10, 11, 16, 0.96);
}

.site-footer {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 12px;
    font-size: 11px;
    color: var(--muted);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border-radius: 999px;
    border: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s ease, opacity 0.12s ease;
}

.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn--block { width: 100%; }
.btn--primary { background: linear-gradient(135deg, var(--q), #c4006a); color: #fff; }
.btn--ghost { background: transparent; color: var(--text); border: 1px solid rgba(255,255,255,0.12); }

/* Auth */
.auth-hero {
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.auth-hero__logo {
    margin: 0 auto 24px;
    border-radius: var(--radius);
}

.auth-hero__tagline {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 24px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-switch {
    margin: 16px 0 0;
    font-size: 14px;
    color: var(--muted);
}

.auth-switch a {
    color: var(--a);
    font-weight: 600;
    text-decoration: none;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}

.field input,
.field textarea {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    background: var(--bg-card);
    color: var(--text);
    font-size: 16px;
    font-family: inherit;
}

.field textarea {
    min-height: 88px;
    resize: vertical;
    line-height: 1.45;
}

.field select {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    background: var(--bg-card);
    color: var(--text);
    font-size: 16px;
    font-family: inherit;
}

.auth-note { font-size: 12px; color: var(--muted); margin-top: 20px; line-height: 1.5; }
.auth-note a { color: var(--a); font-weight: 600; text-decoration: none; }

.landing-paths {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.landing-paths__label {
    margin: 8px 0 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.landing-creator {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.landing-creator__hint {
    margin: 8px 0 0;
    text-align: center;
}

.hub-logos {
    display: grid;
    gap: 16px;
    width: 100%;
    margin: 0 0 24px;
}

.hub-logos__card {
    display: block;
    padding: 16px;
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--bg-card);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.hub-logos__card:hover {
    border-color: rgba(0, 229, 255, 0.35);
    transform: translateY(-1px);
}

.hub-logos__logo {
    margin: 0 auto 12px;
    border-radius: calc(var(--radius) - 4px);
}

.hub-logos__desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--muted);
}

.auth-hero--hub {
    max-width: 440px;
}

.hub-continue {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin: 0 0 8px;
}

.surface-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.surface-switch__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
}

.surface-switch__btn.is-active {
    color: #fff;
    background: linear-gradient(135deg, rgba(255, 0, 127, 0.35), rgba(0, 229, 255, 0.25));
}

.guide-block--highlight {
    border-color: rgba(255, 0, 127, 0.25);
    background: linear-gradient(145deg, rgba(255, 0, 127, 0.06) 0%, var(--bg-card) 55%);
}

.auth-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 16px;
    padding: 4px;
    border-radius: 14px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.auth-tabs__item {
    flex: 1;
    text-align: center;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--muted);
    text-decoration: none;
}

.auth-tabs__item.is-active {
    background: rgba(255, 0, 127, 0.15);
    color: var(--text);
}

.auth-divider {
    margin: 4px 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
}

.field--phone .iti {
    width: 100%;
}

.field--phone .iti__country-container {
    border-radius: 12px 0 0 12px;
}

.field--phone .phone-input {
    width: 100%;
    padding-left: 52px;
}

.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover,
.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country:has(+ .iti__dropdown-content:hover) .iti__selected-country-primary {
    background: rgba(255, 255, 255, 0.06);
}

.iti__dropdown-content {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text);
}

.iti__search-input {
    background: var(--bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text);
}

.iti__country-list .iti__country.iti__highlight {
    background: rgba(0, 229, 255, 0.12);
}

.iti__selected-country-primary {
    background: transparent;
}

.iti__selected-dial-code {
    color: var(--muted);
}

.flash {
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    margin-bottom: 16px;
}

.flash--error { background: rgba(255,82,82,0.15); color: var(--error); }
.flash--success { background: rgba(0,229,255,0.12); color: var(--accent-a); }

.section-head h1 {
    font-size: 28px;
    font-weight: 900;
    margin: 0 0 8px;
}

.section-head p {
    color: var(--muted);
    margin: 0 0 24px;
    line-height: 1.5;
}

.empty-state {
    text-align: center;
    padding: 48px 16px;
    color: var(--muted);
}

.empty-state .btn { margin-top: 16px; }

/* Daily - full viewport, one question per screen */
.daily-reset-bar,
.daily-reset-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 8px 12px 12px;
    font-size: 0.75rem;
    color: var(--muted);
    text-align: center;
}

.daily-reset-footer {
    flex-direction: column;
    width: 100%;
    margin-top: 24px;
}

@media (min-width: 768px) {
    .page--daily .daily-reset-footer {
        margin-top: auto;
    }
}

.daily-reset-bar strong {
    color: var(--text);
    font-weight: 600;
}

.daily-reset-bar__timer {
    color: var(--a);
}

.daily-reset-countdown {
    font-size: 0.875rem;
    color: var(--a);
    margin: 0;
}

.daily-shell {
    margin: -16px;
    box-sizing: border-box;
}

.daily-shell > .streak-alert {
    margin: 0 12px 12px;
}

.daily-track {
    position: relative;
}

.daily-slide {
    position: relative;
    padding: 56px 16px 16px;
    box-sizing: border-box;
}

.daily-slide--sponsored::before {
    content: 'Sponsored · +1 credit';
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--a);
    background: rgba(0,229,255,0.12);
    padding: 6px 12px;
    border-radius: 999px;
}

.daily-slide__body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 16px;
    padding-bottom: 8px;
}

.daily-q {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    font-size: clamp(20px, 5vw, 28px);
    font-weight: 800;
    line-height: 1.25;
    margin-top: 28px;
    padding: 0 8px;
}

.daily-q .q-mark { color: var(--q); }

.daily-theme {
    flex-shrink: 0;
    max-width: 88px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.daily-theme--community {
    color: var(--a);
}

.friend-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
}

.daily-slide__body .friend-grid {
    flex: 0 0 auto;
}

.friend-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 8px;
    border: none;
    border-radius: var(--radius);
    background: var(--bg-card);
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, transform 0.12s;
}

.friend-btn:active { transform: scale(0.95); background: rgba(255,0,127,0.15); }

.friend-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--q), var(--a));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 22px;
}

.badge--bot {
    background: rgba(0, 229, 255, 0.18);
    color: var(--a);
    border: 1px solid rgba(0, 229, 255, 0.45);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.15);
}

.badge--bot--sm {
    font-size: 9px;
    padding: 2px 6px;
    margin-right: 0;
}

.bot-avatar-wrap {
    position: relative;
    display: inline-flex;
}

.bot-avatar-wrap .badge--bot {
    position: absolute;
    top: -4px;
    right: -6px;
    z-index: 2;
    margin: 0;
    pointer-events: none;
}

.friend-btn--invite {
    border: 2px dashed rgba(255, 0, 127, 0.5);
    background: rgba(255, 0, 127, 0.06);
}

.friend-btn--invite:active {
    background: rgba(255, 0, 127, 0.14);
}

.friend-invite-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 300;
    line-height: 1;
    color: var(--q);
    background: rgba(255, 0, 127, 0.12);
    border: 2px dashed rgba(255, 0, 127, 0.45);
}

.friend-btn--invite .friend-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--a);
    white-space: normal;
    text-align: center;
    line-height: 1.25;
}

.friend-btn--quiz {
    text-decoration: none;
    border: 2px dashed rgba(0, 229, 255, 0.5);
    background: rgba(0, 229, 255, 0.06);
}

.friend-btn--quiz:active {
    background: rgba(0, 229, 255, 0.14);
}

.friend-quiz-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
    background: rgba(0, 229, 255, 0.12);
    border: 2px dashed rgba(0, 229, 255, 0.45);
}

.friend-btn--quiz .friend-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--a);
    white-space: normal;
    text-align: center;
    line-height: 1.25;
}

.circle-invite-grid {
    margin-bottom: 24px;
}

.friend-btn.is-bot {
    position: relative;
}

.friend-btn__share {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 0, 127, 0.55);
    background: rgba(255, 0, 127, 0.2);
    color: var(--q);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.friend-btn__share:active {
    background: rgba(255, 0, 127, 0.35);
}

.share-modal .share-hint {
    margin: 0 0 8px;
}

.share-modal .share-credits {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(0, 229, 255, 0.35);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--a);
}

.share-modal .modal__actions {
    flex-wrap: wrap;
}

.share-modal .modal__actions .btn--primary {
    flex: 1 1 auto;
    min-width: 120px;
}

.friend-btn.is-bot {
    border: 2px dashed rgba(0, 229, 255, 0.55);
    background: rgba(0, 229, 255, 0.08);
}

.friend-btn.is-bot .friend-avatar {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.35), rgba(255, 0, 127, 0.25));
    box-shadow: inset 0 0 0 2px rgba(0, 229, 255, 0.35);
}

.friend-bot-tag {
    display: block;
    margin-top: 2px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--a);
}

.daily-suggestions {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.daily-suggestions__title {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.circle-friend.is-bot {
    border-color: rgba(0, 229, 255, 0.4);
    background: rgba(0, 229, 255, 0.06);
}

.circle-friend.is-bot .circle-friend__avatar {
    box-shadow: inset 0 0 0 2px rgba(0, 229, 255, 0.45);
}

.circle-friend__headline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.circle-friend__display {
    font-size: 15px;
    font-weight: 800;
}

.circle-member-chip.is-bot {
    border-color: rgba(0, 229, 255, 0.45);
    background: rgba(0, 229, 255, 0.08);
}

.circle-bots-intro {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.45;
}

.feed-sender .badge--bot {
    vertical-align: middle;
    margin-left: 6px;
}

.history-who .badge--bot {
    margin-left: 6px;
    vertical-align: middle;
}

.friend-btn.is-fav {
    border-color: rgba(255, 0, 127, 0.45);
}

.friend-btn.is-fav .friend-name::after {
    content: ' ★';
    color: var(--q);
    font-size: 10px;
}

.friend-name {
    font-size: 12px;
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.daily-shell > .daily-empty,
.daily-track > .daily-empty {
    display: flex;
    flex-direction: column;
    padding: 48px 20px 16px;
    text-align: center;
}

.daily-empty__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 0 24px;
}

.daily-progress {
    position: fixed;
    top: calc(var(--top-h) + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    width: min(100vw - 24px, 480px);
    box-sizing: border-box;
}

.daily-progress__toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(10, 11, 16, 0.92);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
}

.daily-progress__center {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.daily-progress__split {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.daily-progress--split .daily-progress__center {
    align-items: stretch;
}

.daily-progress__row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.daily-progress__label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    min-width: 72px;
}

.daily-progress__dots {
    display: flex;
    gap: 6px;
    flex: 1;
}

.daily-progress__row--community .daily-dot.is-done { background: var(--a); }
.daily-progress__row--community .daily-dot.is-current { background: var(--q); }

.daily-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    transition: background 0.2s, transform 0.2s;
}

.daily-dot.is-done { background: var(--q); }
.daily-dot.is-current { background: var(--a); transform: scale(1.3); }

.daily-slide.is-submitting { opacity: 0.5; pointer-events: none; }

/* Feed - Curiosity Queue */
.feed-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.feed-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px;
    border: 1px solid rgba(255,255,255,0.06);
    transition: transform 0.4s ease;
}

.feed-card.is-revealed {
    border-color: rgba(0,229,255,0.3);
}

.feed-card.is-flipping {
    animation: flipReveal 0.5s ease;
}

@keyframes flipReveal {
    0% { transform: rotateY(0deg); }
    50% { transform: rotateY(90deg); }
    100% { transform: rotateY(0deg); }
}

.feed-theme {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--a);
    margin-bottom: 8px;
}

.feed-q {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 16px;
}

.feed-sender {
    font-size: 15px;
    color: var(--muted);
    filter: blur(6px);
    user-select: none;
    transition: filter 0.4s ease;
}

.feed-card.is-revealed .feed-sender {
    filter: none;
    color: var(--q);
    font-weight: 700;
}

.feed-reveal-btn {
    width: 100%;
    margin-top: 12px;
}

.feed-card--demo {
    border-style: dashed;
    border-color: rgba(255, 0, 127, 0.25);
    position: relative;
}

.feed-demo-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--q);
    background: rgba(255, 0, 127, 0.12);
    padding: 4px 8px;
    border-radius: 6px;
    margin-bottom: 10px;
}

.feed-demo-note {
    font-size: 13px;
    color: var(--muted);
    margin: 12px 0 0;
    line-height: 1.45;
}

.feed-empty-hint {
    margin-top: 8px;
}

/* Daily - mobile: document scroll; desktop: immersive flex (see @media below) */
.page.has-nav.page--daily {
    padding: 16px;
    padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 24px);
    box-sizing: border-box;
    min-height: calc(100vh - var(--top-h));
    min-height: calc(100svh - var(--top-h));
}

body.is-daily .site-footer {
    display: none;
}

/* Immersive pages - full viewport, no page scroll */
.page.has-nav:has(.vote-shell) {
    padding-bottom: 16px;
}

body:has(.vote-shell) .site-footer {
    display: none;
}

.vote-shell {
    display: flex;
    flex-direction: column;
    margin: -16px;
    padding: 16px;
    height: calc(100vh - var(--top-h) - var(--nav-h) - var(--safe-bottom));
    height: calc(100dvh - var(--top-h) - var(--nav-h) - var(--safe-bottom));
    overflow: hidden;
    box-sizing: border-box;
    touch-action: manipulation;
}

.vote-shell__head {
    flex-shrink: 0;
}

.vote-shell__head h1 {
    font-size: 22px;
    margin-bottom: 4px;
}

.vote-shell__head p {
    font-size: 13px;
    margin-bottom: 12px;
    line-height: 1.4;
}

.vote-main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.vote-main.empty-state {
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

/* Vote - Tinder cards */
.vote-stage {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
}

.vote-stack {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    touch-action: none;
}

.vote-card {
    position: absolute;
    inset: 0;
    background: var(--bg-card);
    border-radius: 20px;
    padding: 28px 24px;
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    justify-content: center;
    touch-action: none;
    user-select: none;
    cursor: grab;
    will-change: transform;
    transition: box-shadow 0.2s;
}

.vote-card.is-dragging { cursor: grabbing; }

.vote-card__theme {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 16px;
}

.vote-card__text {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
}

.vote-card__stamp {
    position: absolute;
    top: 24px;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0;
    border: 4px solid;
    padding: 4px 12px;
    border-radius: 8px;
    transition: opacity 0.1s;
}

.vote-card__stamp--approve { right: 24px; color: var(--success); border-color: var(--success); }
.vote-card__stamp--reject { left: 24px; color: var(--error); border-color: var(--error); }

.vote-hints {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
}

.vote-hint--reject { color: var(--error); }
.vote-hint--approve { color: var(--success); }
.vote-counter { color: var(--muted); }

.vote-submit-bar {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 12px;
}

.vote-submit-bar .btn {
    padding: 12px 20px;
}

.vote-submit__hint {
    font-size: 13px;
    color: var(--muted);
    margin: 0 0 16px;
    line-height: 1.45;
}

.vote-submit-form .field { margin-bottom: 12px; }

.vote-submit__status {
    font-size: 12px;
    color: var(--muted);
    margin: 6px 0 0;
    text-align: center;
}

.vote-my-submissions-wrap {
    flex-shrink: 0;
    margin: 0 0 8px;
    padding: 8px 12px;
    max-height: 28dvh;
    overflow-y: auto;
}

.vote-my-submissions-wrap summary {
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    color: var(--muted);
}

.modal {
    border: none;
    padding: 0;
    max-width: min(100vw - 24px, 400px);
    width: 100%;
    background: transparent;
    color: var(--text);
}

.modal::backdrop {
    background: rgba(0, 0, 0, 0.72);
}

.modal__panel {
    margin: 0;
    padding: 24px;
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.modal__title {
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 8px;
}

.modal__actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 8px;
}

.modal__actions .btn--primary {
    flex: 1;
}

.vote-my-submissions {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    font-size: 13px;
}

.vote-my-submissions li {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.vote-my-submissions__theme { font-weight: 700; color: var(--a); }
.vote-my-submissions__text { flex: 1 1 100%; color: var(--muted); }

.vote-card__progress {
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    margin-top: 20px;
    overflow: hidden;
}

.vote-card__progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--q), var(--a));
    border-radius: 2px;
}

.vote-card__meta {
    font-size: 12px;
    color: var(--muted);
    margin-top: 8px;
}

.vote-card__flag {
    align-self: flex-start;
    margin-top: 12px;
}

.badge--muted { color: var(--muted); }
.badge--batch { color: var(--q); font-size: 11px; margin-left: 6px; }
.badge--pack { color: var(--a); font-size: 11px; margin-left: 6px; }
.badge--pending { color: var(--a); }
.badge--active { color: var(--success); }
.badge--rejected, .badge--hidden { color: var(--error); }
.badge--warn { color: #ffb020; }

.daily-flag {
    flex-shrink: 0;
    font-size: 12px;
    padding: 4px 10px;
    opacity: 0.7;
}

.credits-section-title {
    font-size: 15px;
    font-weight: 800;
    margin: 28px 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.earnings-item--reward .earnings-item__amount--pack {
    color: var(--a);
    font-weight: 800;
}

.earnings-item__time {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
}

.submission-history {
    list-style: none;
    margin: 0;
    padding: 0;
}

.submission-history__item {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 14px;
}

.admin-flag-list { font-size: 12px; margin: 8px 0 0; }

/* Profile */
.profile-card {
    text-align: center;
    padding: 24px 0;
}

.profile-card__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.profile-invite-quick {
    width: 96px;
    min-height: 96px;
    border: 2px dashed rgba(255, 0, 127, 0.5);
    background: rgba(255, 0, 127, 0.08);
    color: var(--text);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    font-family: inherit;
    cursor: pointer;
}

.profile-invite-quick:active {
    transform: scale(0.97);
}

.profile-invite-quick__icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 0, 127, 0.16);
    color: var(--q);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    line-height: 1;
    font-weight: 300;
}

.profile-invite-quick__label {
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    font-weight: 700;
    color: var(--a);
}

.profile-card__identity {
    text-align: left;
}

.profile-meta--muted {
    color: var(--muted);
}

.avatar-ring--static {
    margin: 0;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
}

.public-profile {
    max-width: 100%;
    overflow-x: clip;
}

.public-profile .profile-card {
    padding: 16px 0;
    max-width: 100%;
}

.public-profile .profile-card__head {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    text-align: left;
}

.public-profile .profile-card__identity {
    min-width: 0;
}

.public-profile .profile-card__identity h1 {
    font-size: clamp(20px, 5.5vw, 28px);
    line-height: 1.15;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.public-profile .profile-meta {
    overflow-wrap: anywhere;
}

.public-profile__actions {
    margin-top: 16px;
    max-width: 100%;
}

.public-profile .btn--block {
    white-space: normal;
    text-align: center;
}

.friend-request-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.public-profile .friend-request-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin-top: 12px;
}

.public-profile .friend-request-actions .btn {
    min-width: 0;
    white-space: normal;
    padding-left: 10px;
    padding-right: 10px;
}

.public-profile .streak-board--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.public-profile .streak-card--compact .streak-card__label {
    font-size: 11px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.public-profile .stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.public-profile .stat-card {
    padding: 12px 8px;
    min-width: 0;
}

.public-profile .stat-value {
    font-size: clamp(22px, 7vw, 28px);
}

.public-profile .share-hint {
    overflow-wrap: anywhere;
}

.profile-settings {
    margin-top: 20px;
    text-align: left;
}

.profile-settings__field {
    border: none;
    margin: 16px 0 0;
    padding: 0;
}

.profile-settings__legend {
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 8px;
}

.profile-settings__option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 8px 0;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
}

.profile-settings__option input {
    margin-top: 3px;
}

.fan-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 12px 0 0;
    max-width: 100%;
}

.fan-badge {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    background: rgba(255, 0, 127, 0.14);
    color: var(--q);
    border: 1px solid rgba(255, 0, 127, 0.35);
    overflow-wrap: anywhere;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
}

.fan-badge--top {
    background: rgba(0, 229, 255, 0.1);
    color: var(--a);
    border-color: rgba(0, 229, 255, 0.35);
}

.friend-request-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.friend-request {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
}

.friend-request__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    background: linear-gradient(135deg, var(--q), var(--a));
}

.friend-request__user {
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
}

.friend-request__meta {
    display: block;
    font-size: 12px;
    color: var(--muted);
}

.circle-friend__user {
    color: var(--a);
    text-decoration: none;
    font-size: 13px;
}

.streak-board--compact {
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
}

.streak-card--compact {
    padding: 10px;
}

.streak-card--compact .streak-card__hint,
.streak-card--compact .streak-card__risk {
    display: none;
}

.fan-league-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.fan-league-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.fan-league-row:last-child {
    border-bottom: none;
}

.fan-league-row__rank {
    font-weight: 800;
    color: var(--q);
    min-width: 28px;
}

.fan-league-row__user {
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
}

.fan-league-row__score {
    font-size: 13px;
    color: var(--muted);
}

.share-hint--success {
    color: var(--a);
}

/* Creator public page */
.creator-page-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.creator-page-hero {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.creator-page-hero__cover {
    display: block;
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}

.creator-page-hero__body {
    padding: 16px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: start;
}

.creator-page-hero--has-cover .creator-page-hero__body {
    margin-top: -28px;
}

.creator-page-hero__avatar .avatar-ring--static {
    width: 80px;
    height: 80px;
    border: 3px solid var(--bg);
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.creator-page-hero__identity h1 {
    margin: 0;
    font-size: 26px;
}

.creator-page-handle {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--muted);
}

.creator-claim-banner {
    margin: 0 0 16px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--q) 35%, transparent);
    background: color-mix(in srgb, var(--q) 8%, var(--bg));
}

.creator-claim-banner__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
}

.creator-claim-banner__text a {
    color: var(--q);
    font-weight: 600;
}

.creator-intent-stat {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
    color: var(--text);
    border: 1px solid color-mix(in srgb, var(--a) 35%, transparent);
    background: color-mix(in srgb, var(--a) 10%, var(--bg));
}

.creator-share-row {
    margin: 0 0 16px;
    padding: 12px 0 4px;
    border-top: 1px solid color-mix(in srgb, var(--muted) 20%, transparent);
}

.creator-share-row__label {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
}

.creator-share-row__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.creator-share-row__actions .btn {
    min-width: 0;
}

.creator-join-nudge__message {
    width: 100%;
    margin: 0 0 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--muted) 25%, transparent);
    background: color-mix(in srgb, var(--muted) 8%, var(--bg));
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
}

.creator-page-bio {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
}

.creator-page-bio--placeholder {
    color: var(--muted);
}

.creator-social-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.creator-social-link {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    color: var(--a);
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(0, 229, 255, 0.28);
}

.creator-page-cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stat-grid--creator {
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
}

.stat-card--rate .stat-value {
    color: var(--a);
}

.creator-rate-hint {
    margin: -4px 0 0;
    font-size: 12px;
    text-align: center;
}

.creator-public-question__tag {
    color: var(--q);
    font-weight: 700;
}

.creator-questions-feed .creator-card__title {
    margin-bottom: 4px;
}

.creator-public-questions {
    list-style: none;
    margin: 16px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.creator-public-question {
    padding: 14px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.creator-public-question__prompt {
    margin: 0;
}

.creator-public-question__text {
    margin: 0;
    font-size: 16px;
    line-height: 1.45;
    font-weight: 600;
}

.creator-public-question__meta {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--muted);
}

.creator-public-question__reveal {
    display: inline-block;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--q);
    text-decoration: none;
}

.public-profile--guest {
    padding-bottom: 88px;
}

.creator-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent, rgba(10, 11, 16, 0.92) 24%, var(--bg) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.page--auth .creator-sticky-cta {
    bottom: 0;
}

.has-nav .creator-sticky-cta {
    bottom: calc(56px + env(safe-area-inset-bottom));
}

.creator-cover-upload {
    margin-bottom: 16px;
}

.creator-cover-upload__label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}

.creator-cover-upload__frame {
    min-height: 120px;
    border-radius: var(--radius);
    border: 2px dashed rgba(255, 255, 255, 0.14);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
}

.creator-cover-upload__frame.has-cover {
    border-style: solid;
}

.creator-cover-upload__preview {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    display: block;
}

.creator-cover-upload__placeholder {
    color: var(--muted);
    font-size: 14px;
    padding: 24px;
    text-align: center;
}

.creator-cover-upload__actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.creator-social-editor {
    border: none;
    margin: 16px 0;
    padding: 0;
}

.creator-social-editor__row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 8px;
    margin-bottom: 8px;
}

.creator-social-editor__label {
    font-family: inherit;
    font-size: 14px;
    padding: 10px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: var(--bg);
    color: var(--text);
}

.avatar-ring {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--q), var(--a));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 900;
    overflow: hidden;
    position: relative;
}

.avatar-ring__inner,
.circle-friend__avatar {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: inherit;
    font-weight: inherit;
}

.avatar--has-image {
    background: transparent;
}

.avatar--has-image img,
.friend-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.friend-avatar.avatar--has-image {
    background: var(--bg-card);
    overflow: hidden;
}

.avatar-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
}

.avatar-ring--editable {
    cursor: pointer;
    margin-bottom: 16px;
}

.avatar-ring--editable.is-uploading {
    opacity: 0.55;
    pointer-events: none;
}

.avatar-upload__badge {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    pointer-events: none;
}

.avatar-upload__icon {
    display: block;
}

.avatar-remove-icon {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: var(--bg-card);
    color: var(--text);
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    padding: 0;
}

.avatar-remove-icon:hover {
    border-color: var(--q);
}

.avatar-remove-icon:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.profile-card h1 { margin: 0; font-size: 28px; }
.profile-meta { color: var(--muted); margin: 8px 0 0; }

@media (max-width: 420px) {
    .profile-card__head {
        gap: 12px;
    }

    .profile-invite-quick {
        width: 84px;
        min-height: 84px;
    }

    .profile-card h1 {
        font-size: 24px;
    }

    .public-profile .profile-card__head {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 10px;
    }

    .public-profile .avatar-ring--static {
        width: 64px;
        height: 64px;
        font-size: 26px;
    }
}

.streak-board {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.streak-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 14px;
    border: 1px solid rgba(255, 0, 127, 0.15);
}

.streak-card--risk {
    border-color: var(--q);
    animation: streak-pulse 1.4s ease-in-out infinite;
}

.streak-card__head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}

.streak-card__flame { font-size: 18px; line-height: 1; }

.streak-card__count {
    font-size: 26px;
    font-weight: 900;
    color: var(--q);
    line-height: 1;
}

.streak-card__best {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
}

.streak-card__label {
    display: block;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.streak-card__hint {
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.35;
    color: var(--muted);
}

.streak-card__risk {
    margin: 8px 0 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--q);
}

.streak-alert {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    margin-bottom: 16px;
    border-radius: var(--radius);
    background: rgba(255, 0, 127, 0.1);
    border: 1px solid rgba(255, 0, 127, 0.35);
    animation: streak-pulse 1.4s ease-in-out infinite;
}

.streak-alert__flame { font-size: 22px; line-height: 1; }

.streak-alert strong {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}

.streak-alert p {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.4;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.06);
}

.stat-value {
    display: block;
    font-size: 28px;
    font-weight: 900;
    color: var(--a);
}

.stat-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.share-box {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 24px;
    border: 1px solid rgba(255,255,255,0.06);
}

.share-box label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: 8px;
}

.share-row { display: flex; gap: 8px; }

.share-input {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
}

.share-hint { font-size: 12px; color: var(--muted); margin: 8px 0 0; line-height: 1.45; }
.share-hint--warn { color: var(--accent-q); }
.share-hint a { color: var(--accent-a); }

.invite-box__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.invite-box__head label { margin-bottom: 0; }

.invite-box__count {
    font-size: 28px;
    font-weight: 900;
    color: var(--accent-a);
    line-height: 1;
}

.invite-referrals {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 10px;
    font-size: 13px;
    color: var(--muted);
}

.invite-referrals li { padding: 4px 0; }

.invite-referrals strong { color: var(--text); }

.invite-email {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.invite-email label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: 8px;
}

.invite-email-sent {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    font-size: 12px;
    color: var(--muted);
}

.invite-email-sent li { padding: 3px 0; }

.tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.tab {
    flex: 1;
    text-align: center;
    padding: 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    background: var(--bg-card);
}

.tab.is-active { background: var(--q); color: #fff; }

.history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.history-item {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.06);
}

.history-theme {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--a);
}

.history-q { font-weight: 700; margin: 8px 0; }
.history-who { color: var(--muted); font-size: 14px; margin: 0; }
.history-item time { font-size: 12px; color: var(--muted); }

.credits-summary {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px 16px;
    margin-bottom: 16px;
    border: 1px solid rgba(255,255,255,0.06);
    text-align: center;
}

.credits-total__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: 4px;
}

.credits-total__value {
    font-size: 40px;
    font-weight: 900;
    color: var(--a);
    line-height: 1.1;
}

.credits-balance-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
    font-size: 14px;
    color: var(--muted);
}

.credits-balance-row strong { color: var(--text); }

.credits-spent { font-size: 12px; }

.earnings-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.earnings-item {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,0.06);
}

.earnings-item__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.earnings-item__label {
    font-weight: 700;
    font-size: 15px;
}

.earnings-item__amount {
    font-size: 20px;
    font-weight: 900;
    color: var(--a);
}

.earnings-item__meta {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--muted);
}

.credits-footnote {
    font-size: 12px;
    color: var(--muted);
    margin: 0;
    line-height: 1.5;
}

.profile-actions { display: flex; flex-direction: column; gap: 8px; }

/* Circle */
.circle-intro {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.5;
    margin: 0 0 20px;
}

.circle-intro a { color: var(--a); font-weight: 700; }

.circle-add {
    margin-bottom: 20px;
}

.circle-add label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: 8px;
}

.circle-add__form .share-row {
    gap: 8px;
}

.circle-suggestions {
    margin-bottom: 24px;
}

.circle-open-spots {
    margin-bottom: 24px;
}

.circle-open-spots__full {
    padding: 14px;
    border-radius: 12px;
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.25);
}

.circle-open-spots__full p {
    margin: 0;
    color: var(--a);
    font-size: 13px;
    line-height: 1.45;
}

.circle-suggestions__hint {
    font-size: 0.875rem;
    color: var(--muted);
    margin: -4px 0 12px;
}

.circle-suggestions__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.circle-suggestion {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.circle-suggestion__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 0, 127, 0.15);
    color: var(--q);
    font-weight: 700;
    overflow: hidden;
}

.circle-suggestion__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.circle-suggestion__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.circle-suggestion__user {
    font-weight: 700;
}

.circle-suggestion__meta {
    font-size: 0.8125rem;
    color: var(--muted);
}

.feed-credits-hint {
    font-size: 0.9375rem;
    color: var(--muted);
    line-height: 1.45;
}

.feed-credits-hint a {
    color: var(--a);
    font-weight: 700;
}

.circle-section-title {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.circle-friend-list,
.circle-group-list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.circle-friend,
.circle-group {
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.circle-friend {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
}

.circle-friend__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--q), var(--a));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    flex-shrink: 0;
}

.circle-friend__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.circle-friend__user {
    font-size: 12px;
    color: var(--muted);
}

.circle-nickname,
.circle-group__name {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
}

.circle-fav-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: var(--muted);
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.circle-fav-btn.is-on {
    background: rgba(255, 0, 127, 0.2);
    color: var(--q);
}

.circle-groups-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.circle-groups-head .circle-section-title { margin: 0; }

.circle-groups-empty {
    font-size: 14px;
    color: var(--muted);
    margin: 0 0 16px;
}

.circle-group { padding: 14px; }

.circle-group__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.circle-group__name { flex: 1; }

.circle-group-delete {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 80, 80, 0.15);
    color: var(--error);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.circle-group__members {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.circle-member-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.circle-member-chip input { accent-color: var(--q); }

.theme-pool {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.theme-pool__label {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.theme-pool-form {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.theme-pool-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--bg);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.theme-pool-chip input { accent-color: var(--a); }

.theme-pool__hint {
    margin: 0;
    font-size: 11px;
    color: var(--muted);
    line-height: 1.4;
}

.theme-pool__hint a { color: var(--a); }

.circle-stats {
    margin: 0 0 24px;
}

.circle-stat-grid {
    margin-bottom: 0;
}

.circle-league {
    margin: 0 0 24px;
}

.circle-league-table tbody tr.is-me {
    background: rgba(255, 0, 127, 0.12);
}

/* Themes */
.theme-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.theme-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px 16px;
    border: 1px solid rgba(255,255,255,0.06);
}

.theme-card--premium {
    border-color: rgba(255,0,127,0.25);
}

.theme-card__head {
    display: block;
    width: 100%;
    margin: 0 0 12px;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.theme-card__head:focus-visible {
    outline: 2px solid var(--a);
    outline-offset: 4px;
    border-radius: 6px;
}

.theme-card__head h2 {
    margin: 0 0 8px;
    font-size: 18px;
}

.theme-card__peek {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--a);
}

.theme-card__head .pack-progress {
    margin-bottom: 0;
}

.theme-credits-modal .share-hint {
    margin: 0 0 16px;
}

.theme-credits-modal__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.theme-preview-modal {
    max-width: min(100vw - 24px, 440px);
}

.theme-preview__panel {
    max-height: min(85vh, 640px);
    display: flex;
    flex-direction: column;
}

.theme-preview__meta {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--muted);
}

.theme-preview__list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

.theme-preview__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.theme-preview__item:last-child {
    border-bottom: none;
}

.theme-preview__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    flex: 1;
}

.theme-preview__item--answered .theme-preview__text {
    color: var(--muted);
}

.theme-preview__badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--a);
}

.theme-preview__badge--sponsored {
    color: var(--q);
}

.theme-preview__empty {
    padding: 16px 0;
    font-size: 14px;
    color: var(--muted);
}

.pack-progress {
    margin-bottom: 12px;
}

.pack-progress__bar {
    display: block;
    width: 100%;
    height: 6px;
    margin: 0;
    border: none;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    appearance: none;
}

.pack-progress__bar::-webkit-progress-bar {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}

.pack-progress__bar::-webkit-progress-value {
    background: linear-gradient(90deg, var(--q), var(--a));
    border-radius: 3px;
}

.pack-progress__bar::-moz-progress-bar {
    background: linear-gradient(90deg, var(--q), var(--a));
    border-radius: 3px;
}

.pack-progress--complete .pack-progress__bar::-webkit-progress-value,
.pack-progress--complete .pack-progress__bar::-moz-progress-bar {
    background: var(--a);
}

.pack-progress__label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--muted);
}

.pack-progress__badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--a);
}

.theme-price {
    color: var(--muted);
    font-size: 14px;
    margin: 0 0 12px;
}

.theme-card .btn { margin-top: 4px; }

/* Tokens shop - equal card size in 2×2 grid */
#tokens-app .theme-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

#tokens-app .theme-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 11.75rem;
}

#tokens-app .theme-card h2 {
    margin: 0 0 8px;
    font-size: 18px;
    min-height: 2.6em;
}

#tokens-app .theme-card .theme-price {
    margin-bottom: 8px;
}

#tokens-app .theme-card .share-hint {
    flex: 1 1 auto;
    margin: 0 0 12px;
    min-height: 2.9em;
}

#tokens-app .theme-card .btn {
    margin-top: auto;
}

/* Changelog */
.version-block {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(255,255,255,0.06);
}

.version-block h2 {
    margin: 0 0 4px;
    font-size: 20px;
}

.codename {
    font-size: 14px;
    font-weight: 600;
    color: var(--q);
    margin-left: 8px;
}

.version-block time {
    font-size: 12px;
    color: var(--muted);
}

.changelog-list {
    margin: 16px 0 0;
    padding-left: 20px;
    line-height: 1.6;
    color: var(--muted);
}

.changelog-list--admin { list-style: none; padding-left: 0; }
.changelog-list--admin li { margin-bottom: 12px; }

/* How it works guide */
.guide-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.guide-block {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 18px;
    border: 1px solid rgba(255,255,255,0.06);
}

.guide-block h2 {
    margin: 0 0 10px;
    font-size: 18px;
}

.guide-text {
    margin: 0 0 12px;
    color: var(--muted);
    line-height: 1.5;
    font-size: 14px;
}

.guide-list,
.guide-steps {
    margin: 0;
    padding-left: 20px;
    color: var(--muted);
    line-height: 1.55;
    font-size: 14px;
}

.guide-list li + li,
.guide-steps li + li {
    margin-top: 7px;
}

.guide-list strong,
.guide-steps strong {
    color: var(--text);
}

.guide-actions {
    margin-top: 8px;
}

.badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255,255,255,0.08);
    color: var(--a);
    margin-right: 8px;
}

.badge--draft { color: var(--error); }

.toast {
    position: fixed;
    bottom: calc(var(--nav-h) + var(--safe-bottom) + 16px);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg-elevated);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 12px 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.25s, transform 0.25s;
    z-index: 200;
    pointer-events: none;
}

.toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Admin */
.admin-body { background: var(--bg); }

.admin-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(10, 11, 16, 0.95);
    backdrop-filter: blur(12px);
}

.admin-top__brand {
    font-weight: 900;
    font-size: 16px;
    color: var(--text);
}

.admin-top__q { color: var(--q); }

.admin-top__user {
    font-size: 13px;
    color: var(--muted);
    font-weight: 600;
}

.admin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: sticky;
    top: 49px;
    z-index: 99;
    background: var(--bg);
}

.admin-nav__link {
    font-size: 12px;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--muted);
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.06);
}

.admin-nav__link.is-active {
    color: var(--text);
    border-color: rgba(255,0,127,0.35);
    background: rgba(255,0,127,0.1);
}

.admin-nav__link--exit { margin-left: auto; }

.admin-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 16px;
    padding-bottom: 48px;
}

.admin-stat-grid { margin-bottom: 20px; }

.admin-panel {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(255,255,255,0.06);
}

.admin-panel h2 {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
}

.admin-panel--muted { border-style: dashed; }

.admin-kv-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.admin-kv-list li {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 14px;
}

.admin-kv-list li:last-child { border-bottom: none; }

.admin-kv-list strong { font-weight: 700; }
.admin-warn { color: var(--q); }

.admin-hint {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
}

.admin-hint code {
    font-size: 12px;
    background: rgba(255,255,255,0.06);
    padding: 2px 6px;
    border-radius: 4px;
}

.admin-search {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.admin-search input {
    flex: 1;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    background: var(--bg-card);
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
}

.admin-table-wrap {
    overflow-x: auto;
    margin-bottom: 16px;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.admin-table th,
.admin-table td {
    text-align: left;
    padding: 12px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    vertical-align: top;
}

.admin-table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 700;
}

.admin-muted { color: var(--muted); font-size: 13px; }
.admin-time { font-size: 12px; color: var(--muted); }

.admin-inline-form {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.admin-test-email-form {
    margin-top: 12px;
}

.admin-test-email-form .admin-input {
    flex: 1;
    min-width: 200px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
}

.admin-input-num {
    width: 72px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
}

.btn--sm {
    padding: 8px 14px;
    font-size: 13px;
}

.badge--admin { color: var(--q); }
.badge--sponsored { color: var(--a); }
.badge--premium { color: var(--q); }

.admin-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.admin-tabs { margin-bottom: 16px; }

.admin-form .field select,
.admin-form .field textarea {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
    width: 100%;
}

.field--row {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.admin-question-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-question-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.06);
}

.admin-question-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
}

.admin-question-card__text {
    margin: 0 0 12px;
    line-height: 1.5;
    font-size: 15px;
}

.admin-question-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-body .toast {
    bottom: 24px;
}

@media (min-width: 768px) {
    .page { max-width: 480px; margin: 0 auto; }
    .daily-shell { margin: -16px auto; max-width: 480px; }
    .bottom-nav { max-width: 480px; left: 50%; transform: translateX(-50%); border-radius: 20px 20px 0 0; }

    .page.has-nav.page--daily {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--top-h));
        height: calc(100dvh - var(--top-h));
        min-height: calc(100vh - var(--top-h));
        min-height: calc(100dvh - var(--top-h));
        overflow: hidden;
        padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 8px);
    }

    .page--daily .daily-shell {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    .page--daily .daily-shell > .streak-alert {
        flex-shrink: 0;
    }

    .page--daily .daily-track {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .page--daily .daily-slide {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        padding: 56px 16px 8px;
    }

    .page--daily .daily-slide__body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-bottom: 12px;
    }

    .page--daily .daily-shell > .daily-empty,
    .page--daily .daily-track > .daily-empty {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        padding: 24px 20px 12px;
    }

    .page--daily .daily-empty__main {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Learn & Earn quiz */
.quiz-promo {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.45;
}

.quiz-promo.panel {
    padding: 16px;
    margin-bottom: 20px;
}

.quiz-promo .btn {
    margin-top: 10px;
}

.quiz-shell__invite {
    font-size: 14px;
    margin-top: 8px;
}

.quiz-shell__invite a {
    color: var(--a);
}

.quiz-progress {
    margin-bottom: 16px;
}

.quiz-progress__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}

.quiz-progress__row--pool {
    margin-top: 14px;
}

.quiz-progress__label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.quiz-progress__value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

.quiz-progress__bar {
    display: block;
    width: 100%;
    height: 8px;
    border: none;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    appearance: none;
}

.quiz-progress__bar::-webkit-progress-bar {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
}

.quiz-progress__bar--credit::-webkit-progress-value {
    background: linear-gradient(90deg, var(--q), #ff4da6);
    border-radius: 4px;
}

.quiz-progress__bar--pool::-webkit-progress-value {
    background: linear-gradient(90deg, var(--a), #66eeff);
    border-radius: 4px;
}

.quiz-progress__bar--credit::-moz-progress-bar {
    background: linear-gradient(90deg, var(--q), #ff4da6);
    border-radius: 4px;
}

.quiz-progress__bar--pool::-moz-progress-bar {
    background: linear-gradient(90deg, var(--a), #66eeff);
    border-radius: 4px;
}

.quiz-progress__hint {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--muted);
}

.quiz-card__category {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--a);
    margin: 0 0 10px;
}

.quiz-card__prompt {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 16px;
}

.quiz-choices {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quiz-choice {
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font-size: 15px;
    line-height: 1.35;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.quiz-choice:hover:not(:disabled) {
    border-color: rgba(0, 229, 255, 0.45);
    background: rgba(0, 229, 255, 0.08);
}

.quiz-choice:disabled {
    opacity: 0.85;
    cursor: default;
}

.quiz-choice--correct {
    border-color: var(--a);
    background: rgba(0, 229, 255, 0.15);
}

.quiz-choice--wrong {
    border-color: var(--q);
    background: rgba(255, 0, 127, 0.12);
}

.quiz-feedback {
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.45;
}

.quiz-feedback--ok {
    color: var(--a);
}

.quiz-feedback--miss {
    color: #ffb3d4;
}

.quiz-empty {
    margin-top: 24px;
}

/* Creator Mode */
.creator-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.creator-card {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: 16px;
}

.creator-card__title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 800;
}

.creator-card__label {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.creator-hero__badge {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--q);
}

.creator-link-card .share-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.ask-auth--hidden {
    display: none;
}

.ask-auth {
    width: 100%;
    text-align: left;
}

.ask-auth .creator-card__title {
    margin-bottom: 8px;
}

.ask-auth .share-hint {
    margin: 0 0 16px;
    text-align: left;
    line-height: 1.45;
}

.ask-auth .auth-form {
    width: 100%;
}

.ask-auth .auth-switch {
    text-align: center;
}

.ask-auth .field-hint {
    text-align: left;
}

.ask-compose__hint {
    margin: 12px 0 0;
}

.field__optional {
    font-weight: 500;
    color: var(--muted);
    text-transform: none;
    letter-spacing: 0;
}

.field-hint {
    margin: 6px 0 0;
}

.creator-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.creator-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.creator-stat {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: 14px;
    text-align: center;
}

.creator-stat__value {
    display: block;
    font-size: 22px;
    font-weight: 900;
    color: var(--a);
}

.creator-stat__label {
    font-size: 12px;
    color: var(--muted);
}

.creator-inbox {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.creator-inbox__from {
    margin: 0 0 4px;
    font-size: 13px;
    color: var(--q);
    font-weight: 700;
}

.creator-inbox__q {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}

.creator-league {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.creator-league li {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
}

.creator-league__rank {
    font-weight: 900;
    color: var(--a);
}

.creator-league__score {
    font-size: 12px;
    color: var(--muted);
}

.creator-submission-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.creator-submission {
    padding: 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
}

.creator-submission__q {
    margin: 0 0 8px;
    font-weight: 600;
}

.creator-submission__a {
    margin: 0;
    color: var(--a);
}

.creator-submission__note {
    color: var(--muted);
    font-size: 14px;
}

.slot-meter {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 16px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(0, 229, 255, 0.06);
    border: 1px solid rgba(0, 229, 255, 0.18);
}

.slot-meter--empty {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.slot-meter--empty .slot-meter__count {
    color: var(--muted);
}

.slot-meter--empty .slot-pip.is-available {
    display: none;
}

.slot-meter__pips,
.slot-inline__pips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.slot-meter__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.slot-meter__count {
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    color: var(--a);
    font-variant-numeric: tabular-nums;
}

.slot-meter__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.slot-pip {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.slot-pip.is-available {
    background: var(--a);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.45);
}

.slot-pip.is-used {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.14);
}

.slot-pip-extra {
    font-size: 11px;
    font-weight: 800;
    color: var(--a);
    margin-left: 2px;
}

.slot-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.2);
}

.slot-inline--empty {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.slot-inline--empty .slot-inline__count {
    color: var(--muted);
}

.slot-inline--empty .slot-pip.is-available {
    display: none;
}

.slot-inline__pips {
    gap: 4px;
}

.slot-inline__pips .slot-pip {
    width: 7px;
    height: 7px;
}

.slot-inline__count {
    font-size: 13px;
    font-weight: 800;
    color: var(--a);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.creator-rank {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
}

.creator-rank-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.creator-earnings {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 16px;
    margin: 0 0 12px;
}

.creator-earnings dt {
    color: var(--muted);
    font-size: 14px;
}

.creator-earnings dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
}

.creator-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
    margin: 12px 0 0;
}

.creator-meta dt {
    color: var(--muted);
}

.creator-meta dd {
    margin: 0;
}

.creator-empty,
.creator-muted {
    color: var(--muted);
    font-size: 14px;
}

.creator-shoutout {
    margin: 0 0 12px;
    color: var(--q);
    font-weight: 600;
}

.creator-inbox__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.creator-inbox-question,
.creator-inbox-answer {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.creator-inbox-question {
    margin-bottom: 12px;
}

.creator-inbox-question .creator-inbox__q {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}

.creator-pack-list__q {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.creator-pack-list {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.creator-pack-list__item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.4;
}

.creator-pack-ask-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.creator-pack-ask-btn {
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

.creator-pack-ask-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.creator-pack-ask-btn:not(:disabled):active {
    background: rgba(0, 229, 255, 0.1);
    border-color: rgba(0, 229, 255, 0.3);
}

.admin-subnav {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.admin-subnav__link {
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-subnav__link.is-active {
    color: var(--text);
    background: rgba(255, 0, 127, 0.12);
    border-color: rgba(255, 0, 127, 0.35);
}

.admin-card {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 20px;
}

.ask-compose-card .creator-card__title {
    margin-bottom: 4px;
}

.ask-compose-card .share-hint {
    margin: 0 0 12px;
}

.ask-compose-card .ask-compose {
    margin-bottom: 0;
}

.ask-compose {
    margin-bottom: 8px;
}

.ask-compose .slot-meter {
    margin-bottom: 20px;
}

.ask-compose__prompt {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 4px 0 20px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Q = ask (magenta), A = answer (cyan) - see .cursor/rules/q-a-glyphs.mdc */
.ask-compose__q {
    flex-shrink: 0;
    font-size: clamp(24px, 6vw, 32px);
    font-weight: 900;
    color: var(--q);
    line-height: 1.15;
    user-select: none;
}

.ask-compose__q--sm {
    font-size: 18px;
    line-height: 1.2;
}

.ask-compose__a {
    flex-shrink: 0;
    font-size: clamp(24px, 6vw, 32px);
    font-weight: 900;
    color: var(--a);
    line-height: 1.15;
    user-select: none;
}

.ask-compose__input {
    flex: 1;
    min-width: 0;
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: clamp(18px, 4.5vw, 22px);
    font-weight: 700;
    line-height: 1.35;
    resize: none;
    padding: 2px 0 0;
    margin: 0;
    outline: none;
    field-sizing: content;
    min-height: 2.7em;
}

.ask-compose__input::placeholder {
    color: rgba(136, 140, 153, 0.55);
    font-weight: 600;
}

.ask-compose__input:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.ask-compose__foot {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.ask-compose__foot .btn--primary {
    flex: 1;
    min-height: 48px;
    font-size: 16px;
}

.ask-compose__foot .btn--ghost {
    flex-shrink: 0;
    white-space: nowrap;
    align-self: center;
}

.wrapped-card {
    background: linear-gradient(145deg, #1a0f24 0%, #0d1520 50%, #0A0B10 100%);
    border: 2px solid rgba(255, 0, 127, 0.35);
    border-radius: 24px;
    padding: 28px 24px;
    text-align: center;
}

.wrapped-card--fan {
    border-color: rgba(0, 229, 255, 0.35);
}

.wrapped-card__brand {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.06em;
}

.wrapped-card__month {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.wrapped-card__title {
    margin: 0;
    font-size: 32px;
    font-weight: 900;
    line-height: 1.1;
}

.wrapped-card__subtitle {
    margin: 4px 0 20px;
    color: var(--muted);
}

.wrapped-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

.wrapped-stats li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 16px;
}

.wrapped-quote {
    font-style: italic;
    color: var(--q);
}

.wrapped-card__tag {
    margin: 20px 0 0;
    font-size: 12px;
    color: var(--muted);
}

.brand-q { color: var(--q); }
.brand-a { color: var(--a); }