@import url('site_theme.php');

* {
    box-sizing: border-box;
}

.giveaway-account-admin-list {
    display: grid;
    gap: 10px;
}

.giveaway-account-admin-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.giveaway-account-admin-row:first-child {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.giveaway-selected-secret {
    display: grid;
    gap: 8px;
}

.giveaway-selected-secret code,
.giveaway-inline-message code {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(16, 34, 27, 0.08);
    font-weight: 800;
}

.site-font-preview {
    display: grid;
    gap: 8px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-soft);
}

.site-font-preview span {
    color: var(--muted-text);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 12px;
}

.site-font-preview strong {
    color: var(--heading-text);
    font-size: 28px;
}

.site-font-preview p {
    margin: 0;
    color: var(--muted-text);
}

@media (max-width: 720px) {
    .giveaway-account-admin-row,
    .giveaway-account-admin-row:first-child {
        grid-template-columns: 1fr;
    }
}

:root {
    color-scheme: light;
    --page-bg: #f4f7f5;
    --page-text: #18251f;
    --surface: #ffffff;
    --surface-soft: #f7fbf9;
    --surface-strong: #edf5f1;
    --border: #dce6e1;
    --muted-text: #527064;
    --heading-text: #10221b;
    --primary: #35a77c;
    --primary-strong: #258b66;
    --primary-soft: rgba(53, 167, 124, .1);
    --danger-bg: #ffe4e4;
    --danger-text: #9b1111;
    --shadow: 0 10px 30px rgba(24, 37, 31, 0.08);
    --profile-page-bg: #f4f7f5;
}

html[data-theme-resolved="dark"] {
    color-scheme: dark;
    --page-bg: #0c1210;
    --page-text: #edf7f2;
    --surface: #121b18;
    --surface-soft: #17231f;
    --surface-strong: #20342d;
    --border: #2b463d;
    --muted-text: #adc6bb;
    --heading-text: #f4fff9;
    --primary: #46c796;
    --primary-strong: #2fa578;
    --primary-soft: rgba(70, 199, 150, .16);
    --danger-bg: #3a171b;
    --danger-text: #ffb4b4;
    --shadow: 0 18px 44px rgba(0, 0, 0, .38);
    --profile-page-bg: #0c1210;
}

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

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--site-font-family, Arial, sans-serif);
    background: var(--page-bg);
    color: var(--page-text);
}

.auth-shell {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 4vw, 24px);
}

.auth-shell.wide .auth-card {
    max-width: min(760px, calc(100vw - 28px));
}

.profile-shell {
    background:
        radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--profile-color) 28%, transparent), transparent 34%),
        linear-gradient(180deg, color-mix(in srgb, var(--profile-color) 10%, var(--profile-page-bg)), var(--profile-page-bg) 48%);
}

.legal-card {
    max-width: 820px !important;
}

.legal-card h2 {
    margin: 22px 0 8px;
    font-size: 19px;
}

.legal-card p {
    line-height: 1.6;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    min-width: 0;
    padding: 28px;
    border: 1px solid #dce6e1;
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.profile-card {
    max-width: min(920px, calc(100vw - 28px));
    padding: 0;
    overflow: hidden;
}

@media (min-width: 980px) and (orientation: landscape) {
    .profile-shell {
        align-items: flex-start;
        padding: 32px;
    }

    .profile-card {
        display: grid;
        grid-template-columns: 340px minmax(0, 1fr);
        gap: 0;
        width: min(1180px, calc(100vw - 64px));
        max-width: 1180px;
        padding-bottom: 26px;
        overflow: visible;
    }

    .profile-card > *:not(.profile-hero) {
        grid-column: 2;
        margin-left: 28px;
        margin-right: 28px;
    }

    .profile-hero {
        position: sticky;
        top: 32px;
        grid-column: 1;
        grid-row: 1 / span 30;
        grid-template-columns: 1fr;
        align-content: start;
        min-height: calc(100vh - 64px);
        border-radius: 8px 0 0 8px;
        text-align: left;
    }

    .profile-hero.has-banner {
        background:
            linear-gradient(180deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.78)),
            var(--profile-banner) center / cover,
            linear-gradient(135deg, var(--profile-color), #17251f);
    }

    .profile-avatar {
        width: 142px;
        height: 142px;
        min-width: 142px;
        max-width: 142px;
        min-height: 142px;
        max-height: 142px;
        line-height: 136px;
        font-size: 48px;
    }

    .profile-title-row {
        display: block;
    }

    .profile-title-row h1 {
        display: inline-flex;
    }

    .profile-inline-badges {
        margin-top: 8px;
    }

    .profile-actions {
        margin-top: 22px;
    }

    .profile-color-row {
        margin-top: 26px;
    }
}

.coin-shop-page {
    max-width: 1180px;
}

.coin-shop-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 22px;
    align-items: stretch;
    margin-bottom: 26px;
    padding: 24px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(53, 167, 124, .16), rgba(5, 0, 135, .12));
    border: 1px solid rgba(53, 167, 124, .18);
}

.coin-shop-hero h1 {
    margin: 0 0 10px;
}

.coin-shop-hero p {
    max-width: 720px;
    margin: 0;
}

.coin-shop-wallet {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 18px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(53, 167, 124, .2);
}

.coin-shop-wallet span,
.coin-shop-wallet small {
    color: #4e6a60;
    font-weight: 800;
}

.coin-shop-wallet strong {
    font-size: 30px;
}

.coin-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin: 14px 0 28px;
}

.coin-shop-card {
    display: flex;
    min-height: 320px;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
    border-radius: 8px;
    border: 1px solid rgba(53, 167, 124, .2);
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 12px 32px rgba(22, 46, 38, .08);
}

.premium-shop-card {
    border-color: rgba(5, 0, 135, .24);
    background:
        linear-gradient(135deg, rgba(53, 167, 124, .12), rgba(5, 0, 135, .10)),
        rgba(255, 255, 255, .88);
}

.coin-shop-card h3 {
    margin: 0 0 8px;
}

.coin-shop-card p {
    margin: 0;
    color: #4e6a60;
}

.coin-shop-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.coin-shop-meta > span,
.perk-status {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(31, 77, 61, .08);
    color: #2e5145;
    font-size: 13px;
    font-weight: 900;
}

.perk-status.active {
    background: rgba(53, 167, 124, .16);
    color: #1f7a59;
}

.perk-status.premium {
    background: rgba(5, 0, 135, .12);
    color: #050087;
}

.coin-shop-card button {
    width: 100%;
}

.coin-shop-card button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.shop-preview {
    position: relative;
    display: grid;
    min-height: 96px;
    place-items: center;
    gap: 8px;
    overflow: hidden;
    padding: 14px;
    border: 1px solid rgba(53, 167, 124, .16);
    border-radius: 8px;
    background:
        radial-gradient(circle at top left, rgba(53, 167, 124, .18), transparent 42%),
        rgba(244, 251, 247, .88);
}

.shop-preview small {
    color: #49675c;
    font-size: 13px;
    font-weight: 900;
    text-align: center;
}

.preview-premium {
    grid-template-columns: 70px 1fr;
    place-items: center start;
    min-height: 118px;
    background:
        radial-gradient(circle at 15% 25%, rgba(255, 214, 82, .38), transparent 30%),
        linear-gradient(135deg, #10241d, #050087);
    color: #ffffff;
}

.preview-premium small,
.preview-premium strong {
    color: #ffffff;
}

.preview-premium strong {
    display: block;
    margin-bottom: 4px;
    font-size: 18px;
}

.premium-orbit {
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd84f, #35a77c);
    box-shadow: 0 0 24px rgba(255, 216, 79, .55);
    animation: premiumFloat 2.6s ease-in-out infinite;
}

.premium-orbit span {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 12px rgba(255, 255, 255, .8);
}

.premium-orbit span:nth-child(1) { top: -3px; left: 25px; }
.premium-orbit span:nth-child(2) { right: -3px; top: 26px; }
.premium-orbit span:nth-child(3) { left: 6px; bottom: 5px; }

.premium-preview-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.premium-preview-benefits span {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    color: inherit;
    font-size: 12px;
    font-weight: 900;
}

.preview-name {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(230, 247, 239, .92)),
        radial-gradient(circle at center, rgba(53, 167, 124, .18), transparent 55%);
}

.preview-name-text {
    display: inline-block;
    font-size: 24px;
    font-weight: 750;
    color: #13231d;
    text-underline-offset: .16em;
    text-decoration-thickness: .08em;
}

.preview-name-text.is-colored {
    color: var(--name-effect-color, #35a77c);
    text-shadow: 0 0 18px color-mix(in srgb, var(--name-effect-color, #35a77c) 42%, transparent);
}

.preview-name-text.is-blinking {
    animation: profileNamePulse var(--name-blink-duration, 1.8s) ease-in-out infinite;
}

.preview-name-text.is-underlined {
    text-decoration-line: underline;
    text-decoration-color: var(--name-effect-color, #35a77c);
}

.preview-name-text.is-bold {
    font-weight: 950;
}

.preview-name-text.is-italic {
    font-style: italic;
}

.preview-profile-panel,
.preview-theme-card {
    width: 100%;
    height: 54px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--profile-color, #35a77c), #050087);
}

.preview-profile-panel.animated-color {
    animation: premiumHue 3s linear infinite;
}

.preview-avatar-frame {
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    border-radius: 50%;
    border: 4px solid #ffd84f;
    background: linear-gradient(135deg, #35a77c, #050087);
    color: #ffffff;
    font-size: 24px;
    font-weight: 950;
    box-shadow: 0 0 0 4px rgba(255, 216, 79, .22);
}

.preview-badge-row {
    display: flex;
    gap: 8px;
    font-size: 28px;
}

.preview-theme-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #101f1a, #050087);
}

.preview-theme-card span {
    position: absolute;
    border-radius: 999px;
    background: rgba(255, 255, 255, .28);
}

.preview-theme-card span:first-child {
    width: 80px;
    height: 12px;
    left: 14px;
    top: 14px;
}

.preview-theme-card span:last-child {
    width: 44px;
    height: 44px;
    right: 14px;
    top: 6px;
}

.preview-action-icon {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 18px;
    background: linear-gradient(135deg, #35a77c, #1f6d4f);
    color: #ffffff;
    font-size: 25px;
    font-weight: 950;
    box-shadow: 0 12px 24px rgba(31, 109, 79, .22);
}

.premium-unlocked {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr);
    gap: 18px;
    overflow: hidden;
    margin: 18px 0 28px;
    padding: 22px;
    border-radius: 8px;
    background: linear-gradient(135deg, #10241d, #050087);
    color: #ffffff;
    box-shadow: 0 18px 44px rgba(5, 0, 135, .22);
}

.premium-unlocked h2,
.premium-unlocked p {
    position: relative;
    margin-bottom: 8px;
    color: #ffffff;
}

.premium-unlocked-glow {
    position: absolute;
    inset: -40%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 216, 79, .35), transparent 22%),
        radial-gradient(circle at 70% 60%, rgba(53, 167, 124, .35), transparent 26%);
    animation: premiumGlowSpin 6s linear infinite;
}

.premium-unlocked-benefits {
    position: relative;
    display: grid;
    gap: 8px;
}

.premium-unlocked-benefits span {
    padding: 9px 11px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .18);
    font-weight: 900;
    animation: premiumBenefitPop .45s ease both;
}

.premium-unlocked-benefits span:nth-child(2) { animation-delay: .08s; }
.premium-unlocked-benefits span:nth-child(3) { animation-delay: .16s; }
.premium-unlocked-benefits span:nth-child(4) { animation-delay: .24s; }
.premium-unlocked-benefits span:nth-child(5) { animation-delay: .32s; }

.coin-shop-preview-dialog {
    width: min(720px, calc(100vw - 28px));
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: #ffffff;
    color: #10231d;
    box-shadow: 0 24px 70px rgba(9, 25, 20, .28);
}

.coin-shop-preview-dialog::backdrop {
    background: rgba(5, 14, 10, .62);
    backdrop-filter: blur(5px);
}

.preview-dialog-close {
    position: absolute;
    right: 12px;
    top: 10px;
    z-index: 2;
}

.preview-dialog-close button {
    width: 38px;
    min-height: 38px;
    margin: 0;
    border-radius: 50%;
    background: rgba(16, 35, 29, .12);
    color: #10231d;
    font-size: 24px;
}

.preview-dialog-body {
    display: grid;
    grid-template-columns: minmax(220px, .85fr) minmax(0, 1fr);
    gap: 20px;
    padding: 28px;
}

.preview-dialog-body .shop-preview {
    min-height: 220px;
}

.preview-dialog-body h2 {
    margin: 0 0 10px;
}

.preview-dialog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 6px;
}

.preview-dialog-meta span,
.preview-dialog-meta strong {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(53, 167, 124, .12);
    color: #1f6d4f;
    font-size: 13px;
    font-weight: 900;
}

.dialog-benefits span {
    background: rgba(5, 0, 135, .10);
    color: #050087;
}

@keyframes premiumFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-5px) rotate(8deg); }
}

@keyframes premiumHue {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

@keyframes premiumGlowSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes premiumBenefitPop {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 760px) {
    .premium-unlocked,
    .preview-dialog-body {
        grid-template-columns: 1fr;
    }

    .preview-dialog-body .shop-preview {
        min-height: 150px;
    }

    .preview-premium {
        grid-template-columns: 1fr;
        place-items: center;
        text-align: center;
    }

    .user-search-hero,
    .user-search-form {
        grid-template-columns: 1fr;
    }

    .user-search-miniworld {
        width: 100%;
    }
}

.mini-world-card {
    margin: 26px 0;
    padding: 20px;
    border: 1px solid rgba(53, 167, 124, .2);
    border-radius: 8px;
    background: rgba(255, 255, 255, .82);
}

.mini-world-card-header,
.mini-world-player {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.mini-world-card-header h2 {
    margin: 0;
}

.mini-world-status {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(31, 77, 61, .08);
    color: #2e5145;
    font-weight: 900;
}

.mini-world-status.ready {
    background: rgba(53, 167, 124, .16);
    color: #1f7a59;
}

.mini-world-player {
    justify-content: flex-start;
    margin: 18px 0;
}

.mini-world-player img {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--profile-color, #35a77c);
}

.mini-world-player strong,
.mini-world-player span {
    display: block;
}

.mini-world-player strong {
    font-size: 24px;
}

.mini-world-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.mini-world-stat {
    min-height: 84px;
    padding: 14px;
    border-radius: 8px;
    background: rgba(31, 77, 61, .06);
}

.mini-world-stat span {
    display: block;
    margin-bottom: 8px;
    color: #4e6a60;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.mini-world-stat strong {
    overflow-wrap: anywhere;
}

.mini-world-card {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, var(--surface)), var(--surface));
}

.mini-world-grid .notice,
.mini-world-grid .alert {
    grid-column: 1 / -1;
}

.mini-world-json {
    margin-top: 16px;
}

.mini-world-json pre {
    max-height: 300px;
    overflow: auto;
    padding: 14px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .04);
    white-space: pre-wrap;
}

.mini-world-link-panel {
    margin-top: 18px;
}

.mini-world-current {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 14px 0;
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(31, 77, 61, .06);
}

.mini-world-link-form {
    display: grid;
    gap: 10px;
}

.mini-world-search-page {
    max-width: 1180px;
}

.mini-world-search-hero {
    margin-bottom: 22px;
    padding: 28px;
    border-radius: 8px;
    border: 1px solid rgba(53, 167, 124, .18);
    background:
        radial-gradient(circle at top right, rgba(5, 0, 135, .16), transparent 36%),
        linear-gradient(135deg, rgba(53, 167, 124, .18), rgba(255, 255, 255, .82));
}

.mini-world-search-hero h1 {
    margin: 0 0 10px;
}

.mini-world-search-form {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) 190px;
    gap: 12px;
    margin-top: 18px;
}

.mini-world-search-result {
    min-height: 160px;
}

html[data-theme-resolved="dark"] .coin-shop-wallet,
html[data-theme-resolved="dark"] .coin-shop-card,
html[data-theme-resolved="dark"] .mini-world-card {
    background: rgba(18, 34, 29, .92);
    border-color: rgba(139, 184, 164, .25);
}

html[data-theme-resolved="dark"] .coin-shop-hero {
    background: linear-gradient(135deg, rgba(53, 167, 124, .18), rgba(8, 7, 31, .72));
}

html[data-theme-resolved="dark"] .mini-world-search-hero,
html[data-theme-resolved="dark"] .mini-world-current {
    background-color: rgba(18, 34, 29, .92);
    border-color: rgba(139, 184, 164, .25);
}

html[data-theme-resolved="dark"] .coin-shop-card p,
html[data-theme-resolved="dark"] .coin-shop-wallet span,
html[data-theme-resolved="dark"] .coin-shop-wallet small,
html[data-theme-resolved="dark"] .mini-world-stat span {
    color: #b9d7ca;
}

@media (max-width: 720px) {
    .coin-shop-hero {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .mini-world-search-form {
        grid-template-columns: 1fr;
    }
}

.event-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin: 22px 0;
}

.event-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    min-height: 260px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: linear-gradient(180deg, var(--surface), var(--surface-soft));
    box-shadow: var(--shadow);
}

.event-card h2 {
    margin: 10px 0;
}

.event-meta {
    display: grid;
    gap: 6px;
    color: var(--muted-text);
    font-weight: 700;
}

.pill {
    display: inline-flex;
    width: fit-content;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary-strong);
    font-weight: 900;
}

/* Final profile fixes must stay at the end because older profile rules are broad. */
@media (min-width: 980px) and (orientation: landscape) {
    .profile-card {
        grid-template-columns: minmax(360px, 1fr) minmax(520px, 1.7fr) !important;
        width: min(1180px, calc(100vw - 64px)) !important;
        min-height: auto !important;
        overflow: hidden !important;
    }

    .profile-hero {
        position: relative !important;
        top: auto !important;
        grid-row: auto !important;
        min-height: 420px !important;
        height: auto !important;
        border-radius: 8px 0 0 8px !important;
    }
}

img.mini-coin-icon,
.mini-coin-icon {
    width: 1.15em !important;
    height: 1.15em !important;
    min-width: 1.15em !important;
    max-width: 1.15em !important;
    min-height: 1.15em !important;
    max-height: 1.15em !important;
    object-fit: contain !important;
}

.mini-coin-balance img.mini-coin-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
}

/* Mini-monedas use a 1024px source image; always constrain it in UI. */
img.mini-coin-icon,
.mini-coin-icon {
    display: inline-block !important;
    width: 1.15em !important;
    height: 1.15em !important;
    min-width: 1.15em !important;
    max-width: 1.15em !important;
    min-height: 1.15em !important;
    max-height: 1.15em !important;
    margin: 0 4px 0 0 !important;
    object-fit: contain !important;
    vertical-align: -0.18em !important;
}

.mini-coin-balance {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.mini-coin-balance img.mini-coin-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
}

/* Final profile layout fix: avoid the oversized desktop sidebar. */
@media (min-width: 980px) and (orientation: landscape) {
    .profile-shell {
        align-items: center !important;
        justify-content: center !important;
        padding: 32px !important;
    }

    .profile-card {
        display: block !important;
        width: min(980px, calc(100vw - 64px)) !important;
        max-width: 980px !important;
        min-height: 0 !important;
        padding: 0 !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
    }

    .profile-card > *:not(.profile-hero) {
        grid-column: auto !important;
        margin-left: 28px !important;
        margin-right: 28px !important;
    }

    .profile-hero {
        position: relative !important;
        top: auto !important;
        grid-column: auto !important;
        grid-row: auto !important;
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-content: center !important;
        min-height: 260px !important;
        border-radius: 0 !important;
        padding: 42px !important;
        text-align: left !important;
    }

    .profile-hero.has-banner {
        background:
            linear-gradient(135deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.42)),
            var(--profile-banner) center / cover,
            linear-gradient(135deg, var(--profile-color), #17251f) !important;
    }
}

/* Keep profiles as a wide card, not a full-height sidebar layout. */
@media (min-width: 980px) and (orientation: landscape) {
    .profile-shell {
        align-items: center !important;
        justify-content: center !important;
        padding: 32px !important;
    }

    .profile-card {
        display: block !important;
        width: min(980px, calc(100vw - 64px)) !important;
        max-width: 980px !important;
        min-height: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .profile-card > *:not(.profile-hero) {
        grid-column: auto !important;
        margin-left: 28px !important;
        margin-right: 28px !important;
    }

    .profile-hero {
        position: relative !important;
        top: auto !important;
        grid-column: auto !important;
        grid-row: auto !important;
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-content: center !important;
        min-height: 260px !important;
        border-radius: 0 !important;
        padding: 42px !important;
        text-align: left !important;
    }

    .profile-hero.has-banner {
        background:
            linear-gradient(135deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.42)),
            var(--profile-banner) center / cover,
            linear-gradient(135deg, var(--profile-color), #17251f) !important;
    }
}

html[data-theme-resolved="dark"] body {
    background: var(--page-bg);
    color: var(--page-text);
}

html[data-theme-resolved="dark"] .auth-card,
html[data-theme-resolved="dark"] .admin-card,
html[data-theme-resolved="dark"] .admin-item,
html[data-theme-resolved="dark"] .profile-card,
html[data-theme-resolved="dark"] .community-card,
html[data-theme-resolved="dark"] .community-panel,
html[data-theme-resolved="dark"] .studio-shell,
html[data-theme-resolved="dark"] .studio-detail,
html[data-theme-resolved="dark"] .chat-shell,
html[data-theme-resolved="dark"] .chat-panel,
html[data-theme-resolved="dark"] .message,
html[data-theme-resolved="dark"] .legal-card,
html[data-theme-resolved="dark"] details,
html[data-theme-resolved="dark"] article {
    border-color: var(--border);
    background-color: var(--surface);
    color: var(--page-text);
}

html[data-theme-resolved="dark"] h1,
html[data-theme-resolved="dark"] h2,
html[data-theme-resolved="dark"] h3,
html[data-theme-resolved="dark"] h4,
html[data-theme-resolved="dark"] label,
html[data-theme-resolved="dark"] strong {
    color: var(--heading-text);
}

html[data-theme-resolved="dark"] p,
html[data-theme-resolved="dark"] dd,
html[data-theme-resolved="dark"] .muted,
html[data-theme-resolved="dark"] .field-help,
html[data-theme-resolved="dark"] .profile-meta,
html[data-theme-resolved="dark"] .admin-muted {
    color: var(--muted-text);
}

html[data-theme-resolved="dark"] input,
html[data-theme-resolved="dark"] select,
html[data-theme-resolved="dark"] textarea {
    border-color: var(--border);
    background: #0f1815;
    color: var(--page-text);
}

html[data-theme-resolved="dark"] input::placeholder,
html[data-theme-resolved="dark"] textarea::placeholder {
    color: #7f9a8f;
}

html[data-theme-resolved="dark"] .notice {
    border-color: rgba(70, 199, 150, .35);
    background: rgba(70, 199, 150, .16);
    color: #c7ffe9;
}

html[data-theme-resolved="dark"] .alert {
    background: var(--danger-bg);
    color: var(--danger-text);
}

html[data-theme-resolved="dark"] a {
    color: #79e1b8;
}

html[data-theme-resolved="dark"] button,
html[data-theme-resolved="dark"] .button-link,
html[data-theme-resolved="dark"] .profile-action-button,
html[data-theme-resolved="dark"] .community-home-link,
html[data-theme-resolved="dark"] .creator-btn {
    background-color: var(--primary);
    color: #06110d;
}

html[data-theme-resolved="dark"] .button-link.secondary,
html[data-theme-resolved="dark"] .secondary {
    background-color: var(--surface-strong);
    color: var(--page-text);
}

html[data-theme-resolved="dark"] .button-link.danger,
html[data-theme-resolved="dark"] .danger {
    background-color: #5c2229;
    color: #ffd7d7;
}

html[data-theme-resolved="dark"] .account-menu {
    border-color: var(--border);
    background: rgba(18, 27, 24, .97);
    box-shadow: 0 20px 42px rgba(0, 0, 0, .48);
}

html[data-theme-resolved="dark"] .account-menu a {
    color: var(--page-text);
}

html[data-theme-resolved="dark"] .profile-row,
html[data-theme-resolved="dark"] .profile-list > div,
html[data-theme-resolved="dark"] .studio-video-row,
html[data-theme-resolved="dark"] .chat-sidebar,
html[data-theme-resolved="dark"] .community-tabs,
html[data-theme-resolved="dark"] .calendar-cell {
    border-color: var(--border);
}

html[data-theme-resolved="dark"] .calendar-cell,
html[data-theme-resolved="dark"] .community-tabs a,
html[data-theme-resolved="dark"] .community-tabs button,
html[data-theme-resolved="dark"] .badge-chip {
    background: var(--surface-soft);
    color: var(--page-text);
}

/* Interactive community actions */
.community-share-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    width: auto;
    margin-top: 10px;
    padding: 8px 14px;
    border: 1px solid rgba(53, 167, 124, .24);
    border-radius: 999px;
    background: rgba(53, 167, 124, .1);
    color: #0f3a2d;
    font-weight: 800;
    cursor: pointer;
}

.community-share-button::before {
    content: "🔗";
    margin-right: 6px;
}

.community-share-button.copied::after {
    content: " copiado";
}

.community-vote-actions .community-share-button {
    margin-top: 0;
}

.short-actions form {
    margin: 0;
}

.short-actions a,
.short-actions button,
.short-actions span,
.short-sound-toggle {
    display: grid !important;
    place-items: center !important;
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, .45) !important;
    color: #fff !important;
    font-weight: 900 !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .2) !important;
    backdrop-filter: blur(10px);
    cursor: pointer;
}

.short-actions button.active,
.short-actions a.active {
    background: rgba(53, 167, 124, .82) !important;
    border-color: rgba(255, 255, 255, .35) !important;
}

.short-actions strong {
    display: block;
    margin-top: 2px;
    font-size: 12px;
}

.short-sound-toggle {
    position: absolute !important;
    z-index: 3 !important;
    top: 14px !important;
    right: 14px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 36px !important;
    padding: 0 14px !important;
}

.short-share-button.copied::after {
    content: "✓";
    position: absolute;
    inset: -5px -5px auto auto;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #35a77c;
    color: #fff;
    font-size: 11px;
}

.mini-action-error {
    position: fixed;
    z-index: 1000;
    left: 50%;
    bottom: 24px;
    max-width: min(420px, calc(100vw - 32px));
    transform: translateX(-50%);
    padding: 12px 16px;
    border-radius: 12px;
    background: #ffe4e4;
    color: #8c1212;
    font-weight: 800;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
}

.mini-coin-icon {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    margin-right: 4px;
    vertical-align: -0.22em;
    object-fit: contain;
}

.mini-coin-balance {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 900;
}

.mini-coin-balance .mini-coin-icon {
    width: 28px;
    height: 28px;
    margin-right: 0;
}

@media (max-width: 560px) {
    .short-actions a,
    .short-actions button,
    .short-actions span {
        width: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
        min-height: 50px !important;
    }
}

/* Video player final override: keep controls inside the video and above global button styles. */
.tw-player {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    background: #050908 !important;
    color: #fff !important;
    user-select: none;
}

.tw-player .tw-player-video {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 9;
    max-height: 78vh;
    border-radius: 14px !important;
    background: #000 !important;
    object-fit: contain;
}

.tw-player-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .72), transparent 24%, transparent 58%, rgba(0, 0, 0, .82)),
        radial-gradient(circle at center, transparent 42%, rgba(0, 0, 0, .22));
    opacity: 1;
    transition: opacity .18s ease;
}

.tw-player-title {
    position: absolute;
    top: 16px;
    left: 18px;
    right: 116px;
    z-index: 6;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .72);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity .18s ease;
}

.tw-player-top-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 8;
    display: flex;
    gap: 8px;
    transition: opacity .18s ease;
}

.tw-player button,
.tw-player .tw-player-controls button,
.tw-player .tw-player-top-actions button,
.tw-player .tw-player-settings button {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 999px !important;
    background: rgba(17, 21, 22, .58) !important;
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .28) !important;
    backdrop-filter: blur(12px);
    cursor: pointer;
}

.tw-player button:hover,
.tw-player button:focus-visible {
    background: rgba(255, 255, 255, .2) !important;
    outline: 2px solid rgba(53, 167, 124, .8);
    outline-offset: 2px;
}

.tw-player-center {
    position: absolute !important;
    inset: 50% auto auto 50% !important;
    z-index: 7 !important;
    transform: translate(-50%, -50%);
    width: 78px !important;
    height: 78px !important;
    min-width: 78px !important;
    min-height: 78px !important;
    max-width: 78px !important;
    font-size: 30px !important;
    transition: opacity .18s ease, transform .18s ease;
}

.tw-player.is-playing .tw-player-center {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.88);
}

.tw-player:hover .tw-player-center,
.tw-player:focus-within .tw-player-center {
    opacity: 1;
    pointer-events: auto;
}

.tw-player.is-playing:hover .tw-player-center,
.tw-player.is-playing:focus-within .tw-player-center {
    opacity: 0;
    pointer-events: none;
}

.tw-player-controls {
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
    z-index: 8 !important;
    display: grid !important;
    grid-template-columns: 42px auto minmax(120px, 1fr) 42px 42px !important;
    align-items: center !important;
    gap: 10px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 10px !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 999px !important;
    background: rgba(7, 10, 10, .72) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .3) !important;
    backdrop-filter: blur(18px);
    transition: opacity .18s ease, transform .18s ease;
}

.tw-player-time {
    color: rgba(255, 255, 255, .9) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    white-space: nowrap;
}

.tw-player .tw-player-range {
    display: block !important;
    width: 100% !important;
    min-width: 80px !important;
    height: 18px !important;
    margin: 0 !important;
    accent-color: #35a77c;
    cursor: pointer;
}

.tw-player-settings {
    position: absolute;
    right: 14px;
    bottom: 78px;
    z-index: 10;
    display: grid;
    gap: 8px;
    min-width: 170px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    background: rgba(9, 11, 11, .86);
    box-shadow: 0 18px 46px rgba(0, 0, 0, .36);
    backdrop-filter: blur(18px);
}

.tw-player-settings[hidden] {
    display: none !important;
}

.tw-player-settings strong {
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    text-transform: uppercase;
}

.tw-player .tw-player-settings button {
    width: 100% !important;
    max-width: none !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 10px !important;
    justify-content: start !important;
    padding: 0 12px !important;
    font-size: 13px !important;
}

.tw-player .tw-player-settings button.is-active {
    background: #35a77c !important;
}

.tw-player.is-idle.is-playing .tw-player-shade,
.tw-player.is-idle.is-playing .tw-player-title,
.tw-player.is-idle.is-playing .tw-player-top-actions,
.tw-player.is-idle.is-playing .tw-player-controls {
    opacity: 0;
}

.tw-player.is-idle.is-playing .tw-player-controls {
    transform: translateY(12px);
    pointer-events: none;
}

.tw-player:fullscreen,
.tw-player.is-fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    background: #000 !important;
}

.tw-player:fullscreen .tw-player-video,
.tw-player.is-fullscreen .tw-player-video {
    width: 100vw !important;
    height: 100vh !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    object-fit: contain !important;
}

.tw-player:fullscreen .tw-player-controls,
.tw-player.is-fullscreen .tw-player-controls {
    left: 18px !important;
    right: 18px !important;
    bottom: 18px !important;
}

@media (max-width: 720px) {
    .tw-player-title {
        top: 12px;
        left: 12px;
        right: 92px;
        font-size: 13px;
    }

    .tw-player button,
    .tw-player .tw-player-controls button,
    .tw-player .tw-player-top-actions button {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        max-width: 38px !important;
    }

    .tw-player-center {
        width: 62px !important;
        height: 62px !important;
        min-width: 62px !important;
        min-height: 62px !important;
        max-width: 62px !important;
        font-size: 24px !important;
    }

    .tw-player-controls {
        left: 10px !important;
        right: 10px !important;
        bottom: 10px !important;
        grid-template-columns: 38px minmax(0, 1fr) 38px 38px !important;
        gap: 8px !important;
        padding: 8px !important;
    }

    .tw-player-time {
        display: none !important;
    }
}

.settings-card {
    width: min(100%, 1120px);
    max-width: 1120px;
}

.settings-card h1 {
    font-size: 36px;
}

.register-card {
    display: grid;
    max-width: 760px;
    gap: 16px;
}

.register-card h1 {
    margin-bottom: 6px;
    font-size: 36px;
}

.form-field {
    display: grid;
    gap: 8px;
}

.form-field label {
    margin: 0;
}

.form-field .field-help {
    margin-top: 0;
}

.register-footer {
    display: grid;
    gap: 8px;
}

.register-footer p {
    margin: 0;
}

@media (min-width: 760px) {
    .register-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 22px;
    }

    .register-card h1,
    .register-card .alert,
    .register-card button,
    .register-footer,
    .register-wide-field {
        grid-column: 1 / -1;
    }
}

@media (min-width: 760px) {
    .settings-card {
        display: block;
    }

    .settings-card > label,
    .settings-card > input,
    .settings-card > select,
    .settings-card > textarea,
    .settings-card > .color-field,
    .settings-card > .field-help,
    .settings-card > h2,
    .settings-card > button,
    .settings-card > .button-link,
    .settings-card > .alert,
    .settings-card > .notice {
        width: 100%;
    }

    .settings-card textarea {
        min-height: 170px;
    }
}

.settings-card > label,
.settings-card > h2 {
    margin-top: 18px;
}

.settings-card > label:first-of-type {
    margin-top: 0;
}

.settings-card > input,
.settings-card > select,
.settings-card > textarea,
.settings-card > .color-field {
    margin-top: 8px;
}

.settings-card > .field-help {
    margin-bottom: 12px;
}

.premium-toggle {
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(53, 167, 124, .34);
    border-radius: 10px;
    background: color-mix(in srgb, var(--profile-color, #35a77c) 9%, transparent);
}

.premium-effect-toggles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 10px;
    margin: 12px 0 4px;
}

.premium-effect-toggles .inline-check {
    margin: 0;
    padding: 11px 12px;
    border: 1px solid rgba(53, 167, 124, .28);
    border-radius: 10px;
    background: rgba(255, 255, 255, .03);
}

.profile-card > *:not(.profile-hero) {
    margin-left: 28px;
    margin-right: 28px;
}

.profile-hero {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
    padding: 34px;
    background: linear-gradient(135deg, var(--profile-color), #17251f);
    color: #ffffff;
}

.profile-hero.has-banner {
    background:
        linear-gradient(135deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.42)),
        var(--profile-banner) center / cover,
        linear-gradient(135deg, var(--profile-color), #17251f);
}

.profile-hero h1 {
    margin: 2px 0 4px;
    overflow-wrap: anywhere;
}

.profile-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.profile-title-row h1 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 2px;
}

.profile-clan-identity {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 999px;
    background: rgba(10, 18, 23, 0.34);
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.1;
    text-decoration: none;
}

.profile-clan-identity:hover,
.profile-clan-identity:focus-visible {
    border-color: rgba(255, 255, 255, 0.8);
    background: rgba(10, 18, 23, 0.58);
    color: #ffffff;
}

.profile-clan-tag {
    color: #8ef0cc;
    font-weight: 900;
}

.profile-name-effect {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    text-underline-offset: 0.16em;
    text-decoration-thickness: 0.08em;
}

.profile-name-effect.name-effect-color {
    color: var(--name-effect-color, var(--profile-color, #35a77c));
    text-shadow: 0 0 18px color-mix(in srgb, var(--name-effect-color, var(--profile-color, #35a77c)) 45%, transparent);
}

.profile-name-effect.name-effect-blink {
    animation: profileNamePulse var(--name-blink-duration, 1.8s) ease-in-out infinite;
}

.profile-name-effect.name-effect-underline {
    text-decoration-line: underline;
    text-decoration-color: var(--name-underline-color, var(--name-effect-color, var(--profile-color, #35a77c)));
}

.profile-name-effect.name-effect-bold {
    font-weight: var(--name-bold-weight, 900);
}

.profile-name-effect.name-effect-italic {
    font-style: var(--name-italic-style, italic);
}

@keyframes profileNamePulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: var(--name-blink-opacity, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-name-effect.name-effect-blink {
        animation: none;
    }
}

.profile-inline-badges {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.profile-title-badges {
    gap: 4px;
}

.profile-icon-badge {
    position: relative;
    display: inline-flex;
    width: 24px;
    height: 24px;
    max-width: 24px;
    max-height: 24px;
    align-items: center;
    justify-content: center;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    cursor: help;
}

.profile-icon-badge.verified {
    background: transparent;
    border-color: transparent;
}

.profile-icon-badge img {
    display: block;
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    object-fit: contain;
}

.profile-verified-next-name {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    flex: 0 0 auto;
    vertical-align: middle;
    overflow: visible;
}

.profile-verified-next-name img {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
}

.profile-icon-badge::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    top: calc(100% + 9px);
    z-index: 5;
    width: max-content;
    max-width: 240px;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(36, 36, 40, 0.92);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(4px);
    transition: opacity 120ms ease, transform 120ms ease;
    white-space: normal;
}

.profile-icon-badge:hover::after,
.profile-icon-badge:focus::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.profile-avatar {
    position: relative;
    display: block;
    width: 96px;
    height: 96px;
    min-width: 96px;
    max-width: 96px;
    min-height: 96px;
    max-height: 96px;
    flex: 0 0 96px;
    place-items: center;
    border: 3px solid rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    font-size: 34px;
    font-weight: 700;
    overflow: hidden;
    line-height: 90px;
    text-align: center;
}

.profile-avatar img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

.profile-kicker,
.profile-handle,
.profile-uid {
    margin: 0;
}

.online-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 700;
}

.online-state::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #aebbb5;
}

.online-state.online::before {
    background: #5df09c;
}

.online-state.away::before {
    background: #ffd166;
}

.online-state.dnd::before {
    background: #ff6b6b;
}

.profile-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.profile-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
}

.profile-list > div {
    min-width: 0;
}

.profile-list .profile-description,
.profile-list div:has(.profile-description) {
    grid-column: 1 / -1;
}

.profile-badges span {
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    font-size: 12px;
    font-weight: 700;
}

.profile-kicker {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.profile-handle {
    opacity: 0.9;
    overflow-wrap: anywhere;
}

.profile-uid {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 700;
    opacity: 0.78;
}

.profile-color-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    color: #49675c;
}

.profile-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--profile-color);
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px #cfdcd6;
}

.profile-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.profile-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 38px;
    margin-top: 0;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background: var(--profile-color, #35a77c);
    color: #ffffff;
    font: inherit;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.community-vote-actions {
    margin: 18px 0 24px;
}

.community-vote-actions .profile-action-button {
    min-height: 46px;
    border: 1px solid rgba(53, 167, 124, 0.28);
    background: #ffffff;
    color: #1f6d4f;
    box-shadow: 0 8px 18px rgba(24, 37, 31, 0.08);
}

.community-vote-actions .profile-action-button:hover {
    background: #e7f7ef;
}

.community-vote-actions .profile-action-button.active {
    border-color: #35a77c;
    background: #e7f7ef;
    color: #145f43;
}

.danger-button {
    border: 0;
    background: #d93f3f;
    color: #ffffff;
}

.danger-button:hover {
    background: #b83232;
}

.profile-copy-status {
    margin-top: 12px;
}

.inline-action-form {
    margin: 14px 28px 0;
}

.inline-action-form button {
    margin-top: 0;
}

.inline-profile-link {
    display: inline-flex;
    margin-left: 10px;
    padding: 5px 8px;
    border-radius: 999px;
    background: #e7f7ef;
    color: #1f6d4f;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    vertical-align: middle;
}

.verify-button {
    background: #245f4a;
}

.verify-card {
    max-width: 520px;
    overflow: hidden;
    border: 0;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, #35a77c, #18352a) border-box;
    border: 1px solid transparent;
}

.verify-icon {
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, #35a77c, #245f4a);
    color: #ffffff;
    font-size: 30px;
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(53, 167, 124, 0.24);
}

.verify-card h1 {
    margin-bottom: 8px;
}

.verify-card > p {
    line-height: 1.5;
}

.verify-email {
    margin: 12px 0 18px;
    padding: 12px;
    border: 1px solid #dce6e1;
    border-radius: 8px;
    background: #fbfdfc;
    color: #1f6d4f;
    font-size: 18px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.quota-meter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 0;
    padding: 12px 14px;
    border-radius: 8px;
    background: #f1f7f4;
    color: #49675c;
}

.quota-meter strong {
    color: #18251f;
    font-size: 18px;
}

.code-form {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #edf2ef;
}

.code-input {
    height: 58px;
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 8px;
}

.verify-card button:disabled {
    background: #9ca9a3;
    cursor: not-allowed;
}

h1 {
    margin: 0 0 22px;
    font-size: 26px;
}

label {
    display: block;
    margin: 14px 0 6px;
    font-weight: 700;
}

input {
    width: 100%;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid #cfdcd6;
    border-radius: 6px;
    font: inherit;
}

input[type="checkbox"] {
    width: auto;
    margin-right: 8px;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    font-weight: 700;
}

.checkbox-row input {
    margin: 0;
}

.color-field {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 10px;
    align-items: center;
}

.color-field input[type="color"] {
    height: 43px;
    padding: 4px;
}

select,
textarea {
    width: 100%;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid #cfdcd6;
    border-radius: 6px;
    font: inherit;
    background: #ffffff;
}

textarea {
    resize: vertical;
}

button,
.button-link {
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    margin-top: 18px;
    border: 0;
    border-radius: 6px;
    background: #35a77c;
    color: #ffffff;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

button:hover,
.button-link:hover {
    background: #278762;
}

.button-link.secondary {
    background: #4f6f63;
}

.button-link.danger {
    background: #c74646;
}

.alert {
    padding: 12px;
    border-radius: 6px;
    background: #ffe8e8;
    color: #8b1f1f;
}

.notice {
    padding: 12px;
    border-radius: 6px;
    background: #e7f7ef;
    color: #1f6d4f;
}

.field-help {
    margin: 6px 0 0;
    color: #63786f;
    font-size: 13px;
}

.premium-label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-left: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffd36a, #f0a91f);
    color: #18251f;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: middle;
    box-shadow: 0 6px 16px rgba(240, 169, 31, .26);
}

.password-meter {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid #d7e4de;
    border-radius: 8px;
    background: #f7fbf9;
}

.password-meter-bar {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #dfe9e4;
}

.password-meter-bar span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #b64a4a;
    transition: width 0.18s ease, background 0.18s ease;
}

.password-meter[data-score="1"] .password-meter-bar span { width: 25%; background: #b64a4a; }
.password-meter[data-score="2"] .password-meter-bar span { width: 50%; background: #c27c2c; }
.password-meter[data-score="3"] .password-meter-bar span { width: 75%; background: #2f8b63; }
.password-meter[data-score="4"] .password-meter-bar span { width: 100%; background: #216d50; }

.password-meter-label {
    margin: 0;
    font-weight: 800;
    color: #2e5d4d;
}

.password-meter ul {
    display: grid;
    gap: 5px;
    margin: 0;
    padding-left: 18px;
    color: #6a7d74;
    font-size: 13px;
}

.password-meter li.passed {
    color: #1f7a57;
    font-weight: 700;
}

a {
    color: #207d5a;
}

.profile-list {
    margin: 0;
}

.profile-list div {
    padding: 12px 0;
    border-bottom: 1px solid #edf2ef;
}

.profile-list dt {
    font-weight: 700;
    color: #49675c;
}

.profile-list dd {
    margin: 4px 0 0;
    font-size: 20px;
}

.profile-description {
    font-size: 16px !important;
    line-height: 1.5;
    white-space: normal;
}

.activity-calendar {
    margin-top: 22px;
}

.activity-calendar h2 {
    margin: 0 0 6px;
    font-size: 20px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    gap: 5px;
    margin-top: 12px;
}

.calendar-day {
    aspect-ratio: 1;
    border-radius: 3px;
    background: #e4ece8;
}

.calendar-day.active {
    background: var(--profile-color);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) inset;
}

.search-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.search-form button {
    width: auto;
    margin-top: 0;
    padding: 0 18px;
}

.users-table {
    width: 100%;
    margin-top: 22px;
    border-collapse: collapse;
}

.users-table th,
.users-table td {
    padding: 10px;
    border-bottom: 1px solid #edf2ef;
    text-align: left;
}

.users-table th {
    color: #49675c;
}

.user-search-page {
    max-width: 1120px;
}

.user-search-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin-bottom: 18px;
    padding: 24px;
    border: 1px solid rgba(53, 167, 124, .2);
    border-radius: 8px;
    background:
        radial-gradient(circle at top right, rgba(53, 167, 124, .22), transparent 34%),
        linear-gradient(135deg, rgba(5, 0, 135, .12), rgba(53, 167, 124, .08));
}

.user-search-hero h1 {
    margin: 0 0 8px;
    font-size: clamp(32px, 5vw, 54px);
}

.user-search-hero p {
    margin: 0;
    color: #49675c;
}

.user-search-miniworld {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 999px;
    background: #1e4335;
    color: #ffffff;
    font-weight: 900;
    text-decoration: none;
}

.user-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 12px;
    margin-bottom: 28px;
}

.user-search-form input {
    min-height: 58px;
    border-radius: 8px;
    font-size: 20px;
}

.user-search-form button {
    min-height: 58px;
    margin-top: 0;
    border-radius: 8px;
}

.user-search-results {
    margin-top: 12px;
}

.recommended-users {
    margin-top: 28px;
}

.recommended-users h2 {
    margin: 0 0 12px;
    font-size: 20px;
}

.recommended-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.recommended-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 11px;
    min-width: 0;
    padding: 12px;
    border: 1px solid #dce6e1;
    border-left: 5px solid var(--profile-color);
    border-radius: 8px;
    background: #fbfdfc;
    color: #18251f;
    text-decoration: none;
    box-shadow: 0 14px 34px rgba(24, 37, 31, .08);
}

.recommended-card:hover {
    border-color: var(--profile-color);
    background: #f2faf6;
}

.recommended-avatar {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    background: var(--profile-color);
    color: #ffffff;
    font-weight: 700;
    overflow: hidden;
}

.recommended-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recommended-body {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.recommended-body strong,
.recommended-body span,
.recommended-body small,
.recommended-body em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recommended-body span,
.recommended-body small {
    color: #49675c;
}

.recommended-body em {
    color: #63786f;
    font-size: 13px;
    font-style: normal;
}

.recommended-body strong,
.user-result-card strong {
    min-width: 0;
}

.recommended-body .profile-name-effect,
.user-result-card .profile-name-effect,
.community-item .profile-name-effect,
.users-table .profile-name-effect {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.premium-user-card {
    position: relative;
    overflow: hidden;
    min-height: 104px;
}

.premium-user-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--profile-color, #35a77c);
}

.user-result-main {
    display: grid;
    gap: 4px;
    min-width: 0;
}

html[data-theme-resolved="dark"] .user-search-hero {
    border-color: rgba(139, 184, 164, .25);
    background:
        radial-gradient(circle at top right, rgba(53, 167, 124, .2), transparent 34%),
        linear-gradient(135deg, rgba(5, 0, 135, .26), rgba(18, 34, 29, .92));
}

html[data-theme-resolved="dark"] .recommended-card {
    border-color: rgba(139, 184, 164, .25);
    border-left-color: var(--profile-color, #35a77c);
    background: rgba(246, 251, 248, .98);
    color: #17251f;
}

html[data-theme-resolved="dark"] .recommended-body span,
html[data-theme-resolved="dark"] .recommended-body small,
html[data-theme-resolved="dark"] .recommended-body em,
html[data-theme-resolved="dark"] .user-search-hero p {
    color: #49675c;
}

.chat-card {
    max-width: 980px !important;
}

.group-chat-card {
    max-width: 1280px !important;
}

.chat-top-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 18px;
}

.chat-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 18px;
}

.group-chat-layout {
    grid-template-columns: 250px 190px minmax(0, 1fr);
    align-items: start;
}

.chat-sidebar {
    border-right: 1px solid #edf2ef;
    padding-right: 14px;
}

.chat-sidebar h2,
.chat-header h2 {
    margin: 0 0 12px;
    font-size: 20px;
}

.chat-friend {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    color: #18251f;
    text-decoration: none;
}

.chat-friend:hover,
.chat-friend.active {
    background: #f2faf6;
}

.chat-friend span:last-child {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.chat-friend strong,
.chat-friend small,
.chat-friend em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-friend small {
    color: #63786f;
}

.chat-friend em {
    color: #207d5a;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.chat-window {
    min-width: 0;
}

.group-channel-sidebar {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: linear-gradient(180deg, var(--surface-soft), var(--surface));
}

.group-channel-sidebar h2 {
    margin: 0 0 6px;
    font-size: 18px;
}

.group-channel-sidebar a,
.group-channel-sidebar summary {
    display: block;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    font-weight: 900;
}

.group-channel-sidebar a:hover,
.group-channel-sidebar a.active {
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    color: var(--primary-strong);
}

.group-channel-create form {
    display: grid;
    gap: 8px;
    padding: 8px 0 0;
}

.group-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 20%, transparent), transparent 42%),
        var(--surface);
}

.group-rules,
.group-pinned,
.group-invite-card {
    margin: 12px 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
}

.group-rules summary,
.group-pinned strong {
    cursor: pointer;
    font-weight: 900;
}

.group-pinned {
    display: grid;
    gap: 8px;
}

.group-pinned a {
    padding: 8px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    color: var(--text);
    text-decoration: none;
    font-weight: 800;
}

.group-invite-card {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--primary) 26%, var(--surface)), var(--surface));
}

.group-invite-card span {
    color: var(--primary-strong);
    font-weight: 900;
    text-transform: uppercase;
}

.group-category-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-right: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 18%, var(--surface));
    color: var(--primary-strong);
    font-size: 12px;
    font-weight: 900;
}

.profile-mini-card {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 22px 0;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}

.profile-avatar-small {
    display: grid;
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    color: #fff;
    font-size: 28px;
    font-weight: 900;
    border: 3px solid rgba(255, 255, 255, .7);
}

.profile-avatar-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.target {
    display: block;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    overflow-wrap: anywhere;
}

.group-settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, auto);
    gap: 12px;
    align-items: end;
}

.checkbox-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    font-weight: 900;
}

.checkbox-card input {
    width: auto;
}

.chat-header {
    margin-bottom: 12px;
}

.messages {
    display: grid;
    gap: 10px;
    min-height: 260px;
    max-height: 480px;
    overflow-y: auto;
    padding: 12px;
    border: 1px solid #edf2ef;
    border-radius: 8px;
    background: #fbfdfc;
}

.message {
    max-width: 78%;
    padding: 10px 12px;
    border-radius: 8px;
}

.group-messages .message {
    width: min(78%, 760px);
    max-width: 100%;
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.message.mine {
    justify-self: end;
    background: #35a77c;
    color: #ffffff;
}

.message.theirs {
    justify-self: start;
    background: #edf2ef;
}

.message p {
    margin: 0;
    line-height: 1.4;
}

.message-author {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.message-author span {
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255, 208, 74, .22);
    color: #8c5f00;
    font-size: 11px;
    font-weight: 900;
}

.message-reply-preview {
    display: block;
    margin: 0 0 8px;
    padding: 8px;
    border-left: 3px solid currentColor;
    border-radius: 6px;
    background: rgba(255, 255, 255, .18);
    color: inherit;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    opacity: .86;
}

.message small {
    display: block;
    margin-top: 5px;
    opacity: 0.72;
    font-size: 11px;
}

.message-report {
    display: inline-block;
    margin-top: 6px;
    color: inherit;
    font-size: 12px;
    font-weight: 700;
    opacity: 0.82;
}

.message-actions,
.message-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 8px;
}

.message-actions form,
.message-reactions form {
    margin: 0;
}

.message-actions button,
.message-reactions button,
.message-actions a {
    width: auto;
    min-height: 30px;
    margin: 0;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(0, 0, 0, .08);
    color: inherit;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.message.theirs .message-actions button,
.message.theirs .message-reactions button,
.message.theirs .message-actions a {
    border-color: var(--border);
    background: var(--surface);
}

.reply-indicator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    color: var(--text);
    font-weight: 800;
}

.reply-indicator button {
    width: auto;
    min-height: 32px;
    margin: 0;
    padding: 6px 10px;
}

.message-form {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.message-form button {
    margin-top: 0;
}

.report-preview {
    margin: 12px 0;
    padding: 12px;
    border-left: 4px solid #35a77c;
    background: #f2faf6;
    color: #20352d;
}

.group-member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    margin: 8px 0 12px;
}

.group-member-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px;
    border: 1px solid #dce6e1;
    border-radius: 8px;
    background: #ffffff;
    font-weight: 700;
}

.group-member-grid span {
    color: #63786f;
    font-size: 12px;
    font-weight: 400;
}

.group-management {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.group-management details {
    border: 1px solid #dce6e1;
    border-radius: 8px;
    background: #fbfdfc;
}

.group-management summary {
    padding: 12px 14px;
    cursor: pointer;
    font-weight: 800;
}

.group-management form,
.group-management details > .group-member-row {
    margin: 0;
    padding: 0 14px 14px;
}

.group-member-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    border-top: 1px solid #edf2ef;
}

.group-member-row span {
    display: grid;
    min-width: 0;
}

.group-member-row small {
    color: #63786f;
}

.group-member-row button,
.group-member-row select,
.group-management button {
    width: auto;
    min-height: 36px;
    margin-top: 0;
    padding: 8px 12px;
}

.group-member-row form {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0;
}

.ban-summary {
    margin: 14px 0;
    padding: 14px;
    border: 1px solid #dce6e1;
    border-radius: 8px;
    background: #fbfdfc;
}

.ban-summary p {
    margin: 8px 0;
}

.appeal-box {
    margin-top: 16px;
    padding: 12px;
    border: 1px solid #dce6e1;
    border-radius: 8px;
}

.appeal-box summary {
    cursor: pointer;
    font-weight: 700;
}

.admin-card {
    max-width: 980px !important;
}

.admin-card h2 {
    margin: 26px 0 12px;
    font-size: 20px;
}

.admin-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 18px 0 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid #edf2ef;
}

.admin-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid #dce6e1;
    border-radius: 999px;
    background: #fbfdfc;
    color: #20352d;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.admin-tabs a:hover,
.admin-tabs a.active {
    border-color: #35a77c;
    background: #e7f7ef;
    color: #1f6d4f;
}

.admin-item {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #dce6e1;
    border-radius: 8px;
    background: #fbfdfc;
}

.admin-item p {
    margin: 7px 0;
    overflow-wrap: anywhere;
}

.error-card {
    text-align: center;
}

.error-code-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 104px;
    margin: 18px auto 8px;
    border: 2px solid #dce6e1;
    border-radius: 50%;
    background: linear-gradient(135deg, #35a77c, #17251f);
    color: #ffffff;
    font-size: 30px;
    font-weight: 800;
}

.news-page {
    max-width: 900px !important;
}

.news-hero-image {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
}

.news-body {
    line-height: 1.7;
    white-space: normal;
}

.news-list {
    display: grid;
    gap: 14px;
}

.news-card {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 14px;
    padding: 12px;
    border: 1px solid #dce6e1;
    border-radius: 8px;
    color: #18251f;
    text-decoration: none;
}

.news-card:hover {
    background: #f2faf6;
}

.news-card img {
    width: 100%;
    height: 105px;
    object-fit: cover;
    border-radius: 6px;
}

.news-card span {
    display: grid;
    gap: 4px;
}

.news-card small,
.news-card em {
    color: #63786f;
    font-style: normal;
}

.community-card {
    max-width: 1040px !important;
    border-color: rgba(220, 230, 225, 0.9);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 250, 0.98)),
        #ffffff;
}

.community-card > h1 {
    margin-bottom: 8px;
    font-size: 34px;
    letter-spacing: 0;
}

.community-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin: 18px 0 18px;
    padding: 8px;
    border: 1px solid #dce6e1;
    border-radius: 8px;
    background: #f7fbf9;
}

.studio-shell {
    align-items: flex-start;
    padding: 28px;
}

.studio-card {
    max-width: 1240px !important;
    padding: 28px;
}

.studio-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.studio-header h1 {
    margin-bottom: 6px;
    font-size: 36px;
}

.studio-header-actions {
    display: flex;
    gap: 10px;
    min-width: 260px;
}

.studio-header-actions .button-link {
    margin-top: 0;
}

.studio-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0 22px;
}

.studio-content-table {
    margin-top: 16px;
}

.studio-table-tabs {
    display: flex;
    gap: 28px;
    overflow-x: auto;
    border-bottom: 1px solid #dce6e1;
}

.studio-table-tabs a {
    position: relative;
    padding: 0 0 12px;
    color: #63786f;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.studio-table-tabs a.active,
.studio-table-tabs a:hover {
    color: #18251f;
}

.studio-table-tabs a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: #35a77c;
}

.studio-filter-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    color: #63786f;
    font-weight: 700;
}

.studio-video-table {
    border-top: 1px solid #edf2ef;
}

.studio-video-row {
    display: grid;
    grid-template-columns: minmax(360px, 1.9fr) 120px 145px 120px 80px 110px 120px 118px;
    gap: 14px;
    align-items: center;
    min-height: 74px;
    padding: 10px 0;
    border-bottom: 1px solid #edf2ef;
}

.studio-video-row.active,
.studio-video-row:hover {
    background: #fbfdfc;
}

.studio-video-head {
    min-height: 42px;
    padding: 0;
    color: #63786f;
    font-size: 12px;
    font-weight: 800;
}

.studio-video-main {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
    color: #18251f;
    text-decoration: none;
}

.studio-video-main img,
.studio-video-main .studio-video-fallback {
    display: grid;
    width: 132px;
    aspect-ratio: 16 / 9;
    place-items: center;
    border-radius: 8px;
    background: linear-gradient(135deg, #35a77c, #17251f);
    color: #ffffff;
    object-fit: cover;
    font-size: 28px;
    font-weight: 800;
}

.studio-video-main strong,
.studio-video-main small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.studio-video-main strong {
    white-space: nowrap;
}

.studio-video-main small {
    display: -webkit-box;
    margin-top: 5px;
    color: #63786f;
    font-size: 12px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.studio-cell {
    color: #37594d;
    font-size: 13px;
    font-weight: 700;
}

.studio-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.studio-row-actions a {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #37594d;
    font-size: 18px;
    text-decoration: none;
}

.studio-row-actions a:hover {
    background: #e7f7ef;
    color: #1f6d4f;
}

.studio-metrics article {
    padding: 14px;
    border: 1px solid #dce6e1;
    border-radius: 8px;
    background: #fbfdfc;
}

.studio-metrics span {
    display: block;
    color: #63786f;
    font-size: 13px;
    font-weight: 700;
}

.studio-metrics strong {
    display: block;
    margin-top: 4px;
    color: #18251f;
    font-size: 28px;
}

.studio-layout {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 18px;
}

.studio-video-list {
    display: grid;
    align-content: start;
    gap: 10px;
    max-height: calc(100vh - 260px);
    overflow-y: auto;
    padding-right: 4px;
}

.studio-video-list a {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
    border: 1px solid #dce6e1;
    border-radius: 8px;
    background: #ffffff;
    color: #18251f;
    text-decoration: none;
}

.studio-video-list a:hover,
.studio-video-list a.active {
    border-color: #35a77c;
    background: #f2faf6;
}

.studio-video-list img,
.studio-video-fallback {
    display: grid;
    width: 112px;
    aspect-ratio: 16 / 9;
    place-items: center;
    border-radius: 6px;
    background: linear-gradient(135deg, #35a77c, #17251f);
    color: #ffffff;
    object-fit: cover;
    font-size: 28px;
    font-weight: 800;
}

.studio-video-list strong,
.studio-video-list small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.studio-video-list strong {
    white-space: nowrap;
}

.studio-video-list small {
    margin-top: 4px;
    color: #63786f;
    line-height: 1.35;
}

.studio-editor {
    min-width: 0;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #dce6e1;
}

.studio-preview {
    overflow: hidden;
    border-radius: 8px;
    background: #17251f;
    box-shadow: 0 14px 32px rgba(24, 37, 31, 0.12);
}

.studio-preview video,
.studio-preview img,
.studio-empty-preview {
    display: grid;
    width: 100%;
    aspect-ratio: 16 / 9;
    place-items: center;
    object-fit: contain;
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
}

.studio-preview img {
    object-fit: cover;
}

.studio-status-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 14px 0;
}

.studio-status-row span {
    padding: 7px 10px;
    border: 1px solid #dce6e1;
    border-radius: 999px;
    background: #fbfdfc;
    color: #49675c;
    font-size: 13px;
    font-weight: 800;
}

.studio-edit-form {
    display: grid;
    gap: 4px;
}

.studio-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.studio-actions .button-link,
.studio-actions button {
    margin-top: 0;
}

.danger-button {
    background: #c74646;
}

.danger-button:hover {
    background: #9f3030;
}

.studio-empty {
    padding: 28px;
    border: 1px solid #dce6e1;
    border-radius: 8px;
    background: #fbfdfc;
    text-align: center;
}

.community-tabs a {
    display: grid;
    min-height: 76px;
    align-content: center;
    justify-items: center;
    gap: 5px;
    padding: 12px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #37594d;
    background: #ffffff;
    text-align: center;
    text-decoration: none;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(24, 37, 31, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.community-tabs a:hover,
.community-tabs a.active {
    transform: translateY(-2px);
    border-color: #35a77c;
    background: linear-gradient(180deg, #ffffff, #e9f8f1);
    color: #1f6d4f;
    box-shadow: 0 14px 26px rgba(24, 37, 31, 0.12);
}

.community-tabs .tab-icon {
    font-size: 24px;
    line-height: 1;
}

.community-tabs small {
    display: block;
    margin-top: 2px;
    color: #2f8b63;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.soon-banner {
    display: inline-flex;
    width: fit-content;
    margin: 4px 0 14px;
    padding: 8px 12px;
    border: 1px solid #35a77c;
    border-radius: 999px;
    background: #e7f7ef;
    color: #1f6d4f;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.soon-pill {
    display: inline-flex;
    width: fit-content;
    padding: 5px 8px;
    border-radius: 999px;
    background: #e7f7ef;
    color: #1f6d4f;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.05em;
}

.live-preview {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(240px, 0.8fr);
    gap: 14px;
    margin: 20px 0 24px;
}

.live-player-placeholder,
.live-chat-placeholder,
.feature-card,
.roadmap-section {
    border: 1px solid #dce6e1;
    border-radius: 8px;
    background: #fbfdfc;
}

.live-player-placeholder {
    display: grid;
    min-height: 320px;
    place-items: center;
    align-content: center;
    gap: 8px;
    background:
        linear-gradient(135deg, rgba(23, 37, 31, 0.9), rgba(31, 109, 79, 0.82)),
        #17251f;
    color: #ffffff;
    text-align: center;
}

.live-player-placeholder span {
    padding: 6px 10px;
    border-radius: 999px;
    background: #d93025;
    font-size: 12px;
    font-weight: 900;
}

.live-player-placeholder strong {
    font-size: 28px;
}

.live-chat-placeholder {
    padding: 16px;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 18px 0 22px;
}

.feature-card {
    display: grid;
    gap: 8px;
    padding: 14px;
}

.feature-card strong {
    font-size: 18px;
}

.feature-card p {
    margin: 0;
    color: #63786f;
    line-height: 1.45;
}

.feature-card.locked {
    background: linear-gradient(180deg, #ffffff, #f4fbf7);
}

.profile-avatar.has-frame {
    overflow: visible;
    border-color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .22);
}

.profile-avatar.has-frame > img:not(.profile-avatar-frame) {
    overflow: hidden;
    z-index: 1;
}

.profile-avatar .profile-avatar-frame {
    position: absolute !important;
    inset: -22% !important;
    z-index: 3 !important;
    width: 144% !important;
    height: 144% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    pointer-events: none;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .25));
}

.frame-shop-preview .preview-avatar-frame,
.avatar-frame-preview {
    position: relative;
    overflow: visible;
    border: 0;
    box-shadow: none;
}

.frame-shop-preview .preview-avatar-frame span,
.avatar-frame-preview span {
    position: relative;
    z-index: 1;
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #35a77c, #050087);
    color: #fff;
}

.preview-avatar-frame-img,
.avatar-frame-preview img {
    position: absolute;
    inset: -18%;
    z-index: 2;
    width: 136%;
    height: 136%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    pointer-events: none;
}

.avatar-frame-inventory-grid,
.avatar-frame-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
    margin: 18px 0 22px;
}

.avatar-frame-inventory-card,
.avatar-frame-admin-grid article {
    display: grid;
    gap: 10px;
    align-content: start;
    padding: 14px;
    border: 1px solid rgba(53, 167, 124, .24);
    border-radius: 10px;
    background: color-mix(in srgb, var(--card, #ffffff) 92%, var(--profile-color, #35a77c) 8%);
}

.avatar-frame-inventory-card.active {
    border-color: #35a77c;
    box-shadow: 0 0 0 3px rgba(53, 167, 124, .15);
}

.avatar-frame-preview {
    display: grid;
    width: 76px;
    height: 76px;
    place-items: center;
}

.avatar-frame-inventory-card button,
.reward-admin-form button {
    width: 100%;
}

.avatar-frame-admin-grid img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.avatar-frame-admin-grid span,
.avatar-frame-admin-grid small,
.avatar-frame-inventory-card small {
    color: var(--muted, #63786f);
}

.giveaway-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin: 18px 0 28px;
}

.giveaway-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--profile-color, #35a77c) 32%, transparent);
    border-radius: 12px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--profile-color, #35a77c) 13%, transparent), transparent 48%),
        var(--card, #ffffff);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .08);
}

.giveaway-card.winner {
    border-color: #ffc845;
    background:
        radial-gradient(circle at 16% 0%, rgba(255, 200, 69, .24), transparent 34%),
        linear-gradient(135deg, color-mix(in srgb, var(--profile-color, #35a77c) 16%, transparent), transparent 56%),
        var(--card, #ffffff);
}

.giveaway-card h2 {
    margin: 0;
}

.giveaway-card p {
    margin: 0;
    line-height: 1.45;
}

.giveaway-account-select {
    display: grid;
    gap: 10px;
}

.giveaway-uid-list {
    border: 1px solid color-mix(in srgb, var(--profile-color, #35a77c) 24%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--profile-color, #35a77c) 6%, var(--card, #ffffff));
}

.giveaway-uid-list summary {
    padding: 11px 12px;
    font-weight: 800;
    cursor: pointer;
}

.giveaway-uid-list div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 12px 12px;
}

.giveaway-uid-list span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--profile-color, #35a77c) 16%, transparent);
    color: var(--text, #10231d);
    font-weight: 800;
}

.giveaway-uid-list span.taken {
    opacity: .58;
    text-decoration: line-through;
}

.roadmap-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
    margin-bottom: 18px;
}

.roadmap-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(84px, 1fr));
    gap: 8px;
}

.roadmap-summary span {
    padding: 10px;
    border: 1px solid #dce6e1;
    border-radius: 8px;
    background: #fbfdfc;
    color: #63786f;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.roadmap-summary strong {
    display: block;
    color: #18251f;
    font-size: 24px;
}

.roadmap-jump {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0 24px;
    padding: 8px;
    border: 1px solid #dce6e1;
    border-radius: 8px;
    background: #f7fbf9;
}

.roadmap-jump a {
    padding: 8px 10px;
    border-radius: 6px;
    color: #37594d;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

.roadmap-jump a:hover {
    background: #e7f7ef;
    color: #1f6d4f;
}

.roadmap-section-block {
    margin-top: 26px;
}

.roadmap-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.roadmap-section-heading h2 {
    margin: 0;
    font-size: 26px;
}

.roadmap-section-heading > span:not(.soon-pill) {
    color: #63786f;
    font-size: 13px;
    font-weight: 800;
}

.roadmap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.roadmap-feature {
    display: grid;
    gap: 8px;
    min-height: 160px;
    padding: 15px;
    border: 1px solid #dce6e1;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff, #fbfdfc);
    color: #18251f;
    text-decoration: none;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.roadmap-feature:hover {
    transform: translateY(-2px);
    border-color: #35a77c;
    box-shadow: 0 14px 28px rgba(24, 37, 31, 0.12);
}

.roadmap-feature strong {
    font-size: 18px;
}

.roadmap-feature p {
    margin: 0;
    color: #63786f;
    line-height: 1.45;
}

.roadmap-status {
    width: fit-content;
    padding: 5px 8px;
    border-radius: 999px;
    background: #edf7f2;
    color: #1f6d4f;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.roadmap-feature.active .roadmap-status {
    background: #e7f7ef;
    color: #1f6d4f;
}

.roadmap-feature.ready .roadmap-status,
.roadmap-feature.design .roadmap-status {
    background: #eef3f0;
    color: #4f6f63;
}

.roadmap-feature.next .roadmap-status {
    background: #fff5df;
    color: #8a5a00;
}

.roadmap-lives {
    padding: 18px;
    border: 1px dashed #35a77c;
    border-radius: 8px;
    background: linear-gradient(180deg, #f5fbf8, #ffffff);
}

.roadmap-feature.soon {
    opacity: 0.78;
    border-style: dashed;
    pointer-events: auto;
}

.roadmap-feature.soon .roadmap-status {
    background: #17251f;
    color: #ffffff;
}

.roadmap-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 24px;
}

.roadmap-actions .button-link {
    margin-top: 0;
}

.community-create {
    margin: 18px 0;
    padding: 16px;
    border: 1px solid #dce6e1;
    border-radius: 8px;
    background: linear-gradient(180deg, #fbfdfc, #f2faf6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.community-create summary {
    cursor: pointer;
    font-weight: 800;
    font-size: 18px;
}

.video-upload-step {
    display: grid;
    gap: 6px;
    padding: 18px;
    border: 1px dashed #35a77c;
    border-radius: 8px;
    background: #f2faf6;
    color: #2d5f4c;
}

.video-upload-step strong {
    color: #18251f;
    font-size: 18px;
}

.required-star {
    margin-left: 3px;
    color: #d93025;
    font-weight: 900;
}

.community-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    margin: 12px 0 22px;
}

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

.community-item {
    overflow: hidden;
    border: 1px solid #dce6e1;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(24, 37, 31, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.community-item:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--profile-color) 45%, #dce6e1);
    box-shadow: 0 16px 32px rgba(24, 37, 31, 0.13);
}

.community-item img,
.community-empty-thumb {
    display: flex;
    width: 100%;
    aspect-ratio: 16 / 9;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    background: linear-gradient(135deg, var(--profile-color), #17251f);
    color: #ffffff;
    font-size: 38px;
    font-weight: 800;
    text-decoration: none;
}

.community-thumb-link {
    position: relative;
    display: block;
    overflow: hidden;
}

.community-empty-thumb {
    position: relative;
    overflow: hidden;
}

.community-type-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(24, 37, 31, 0.78);
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.community-item-video .community-type-badge {
    background: rgba(190, 24, 93, 0.86);
}

.community-item div {
    padding: 12px;
}

.community-item h3 {
    margin: 0 0 6px;
    font-size: 18px;
}

.community-item h3 a {
    color: #18251f;
    text-decoration: none;
}

.community-stats {
    margin-bottom: 0;
    font-weight: 700;
}

.profile-feed,
.search-section {
    margin-top: 24px;
}

.profile-feed h2,
.search-section h2 {
    margin-bottom: 10px;
}

.user-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin: 12px 0 22px;
}

.user-result-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid #dce6e1;
    border-radius: 8px;
    color: #18251f;
    text-decoration: none;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(24, 37, 31, 0.08);
}

.user-result-card:hover {
    border-color: color-mix(in srgb, var(--profile-color) 45%, #dce6e1);
    transform: translateY(-1px);
}

.user-result-avatar {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    overflow: hidden;
    color: #ffffff;
    font-weight: 900;
    background: linear-gradient(135deg, var(--profile-color), #17251f);
}

.user-result-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-result-card small {
    display: block;
    color: #547169;
    margin-top: 3px;
}

.user-result-card strong {
    color: #17251f;
}

html[data-theme-resolved="dark"] .user-result-card {
    border-color: rgba(139, 184, 164, .25);
    background: rgba(246, 251, 248, .98);
    color: #17251f;
}

html[data-theme-resolved="dark"] .user-result-card strong {
    color: #17251f;
}

html[data-theme-resolved="dark"] .user-result-card small {
    color: #49675c;
}

.comment-reply {
    margin: 12px 0 0 18px;
    padding: 10px 12px;
    border-left: 3px solid #35a77c;
    border-radius: 0 8px 8px 0;
    background: #f3faf6;
}

.reply-box {
    margin-top: 10px;
}

.reply-box textarea {
    min-height: 70px;
}

.feature-card form {
    margin-top: 12px;
}

.feature-card button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.community-cover,
.community-video {
    display: block;
    width: 100%;
    border-radius: 8px;
    background: #17251f;
    box-shadow: 0 12px 30px rgba(24, 37, 31, 0.12);
}

.community-cover {
    max-height: 460px;
    object-fit: cover;
}

.community-video {
    aspect-ratio: 16 / 9;
    max-height: none;
    object-fit: contain;
}

.tw-player {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background:
        radial-gradient(circle at top left, rgba(53, 167, 124, .22), transparent 36%),
        #050908;
    box-shadow: 0 18px 46px rgba(24, 37, 31, 0.18);
}

.tw-player .community-video {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
}

.tw-player-center {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    background: rgba(0, 0, 0, .48);
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    backdrop-filter: blur(14px);
    transition: opacity .18s ease, transform .18s ease;
}

.tw-player.is-playing .tw-player-center {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.92);
    pointer-events: none;
}

.tw-player:hover .tw-player-center,
.tw-player:focus-within .tw-player-center {
    opacity: 1;
    pointer-events: auto;
}

.tw-player-controls {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    display: grid;
    grid-template-columns: 42px auto minmax(120px, 1fr) 42px 42px;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(0, 0, 0, .58);
    color: #fff;
    backdrop-filter: blur(16px);
}

.tw-player-controls button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    min-height: 38px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    cursor: pointer;
}

.tw-player-time {
    min-width: 86px;
    color: rgba(255, 255, 255, .86);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.tw-player-range {
    width: 100%;
    accent-color: #35a77c;
}

.community-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin: 16px 0;
}

.community-media-grid img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
}

.community-body {
    line-height: 1.65;
}

.rich-text p,
.markdown-preview p {
    margin: 0 0 12px;
}

.rich-text h2,
.rich-text h3,
.rich-text h4,
.markdown-preview h2,
.markdown-preview h3,
.markdown-preview h4 {
    margin: 18px 0 10px;
}

.rich-text ul,
.markdown-preview ul {
    margin: 0 0 14px 22px;
}

.rich-text code,
.markdown-preview code {
    padding: 2px 5px;
    border-radius: 5px;
    background: #edf5f1;
    color: #1f6d4f;
}

.markdown-preview {
    margin: 10px 0 14px;
    padding: 14px;
    border: 1px solid #dce6e1;
    border-radius: 8px;
    background: #fbfdfc;
}

.inline-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 8px 12px 8px 0;
    font-weight: 700;
}

.legal-check {
    width: 100%;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(53, 167, 124, 0.06);
    line-height: 1.35;
}

.legal-check input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
}

.mini-preview-button {
    width: auto;
    min-height: 38px;
    padding: 8px 14px;
}

.admin-ban-form {
    display: grid;
    gap: 8px;
}

.inline-admin-form {
    display: inline-flex;
    gap: 8px;
    margin: 8px 8px 0 0;
    vertical-align: top;
}

.inline-admin-form button,
.admin-item form button {
    width: auto;
    min-height: 36px;
    margin-top: 0;
    padding: 8px 12px;
}

.recommended-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.muted {
    color: #63786f;
}

@media (max-width: 760px) {
    h1 {
        font-size: 30px;
        line-height: 1.08;
    }

    .auth-shell,
    .auth-shell.wide,
    .studio-shell {
        min-height: auto;
        align-items: flex-start;
        padding: 12px;
    }

    .auth-card,
    .auth-shell.wide .auth-card,
    .legal-card,
    .admin-card,
    .chat-card,
    .community-card,
    .studio-card,
    .news-page {
        width: 100% !important;
        max-width: calc(100vw - 24px) !important;
        padding: 18px;
    }

    .profile-card {
        width: 100%;
        max-width: calc(100vw - 24px);
    }

    .register-card,
    .settings-card {
        display: block;
    }

    .profile-card > *:not(.profile-hero) {
        margin-left: 16px;
        margin-right: 16px;
    }

    .profile-hero {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 24px 18px;
        text-align: left;
    }

    .profile-avatar {
        width: 88px;
        height: 88px;
        min-width: 88px;
        max-width: 88px;
        min-height: 88px;
        max-height: 88px;
        line-height: 82px;
    }

    .profile-actions,
    .profile-list,
    .chat-layout,
    .group-chat-layout,
    .group-settings-grid,
    .studio-layout,
    .studio-actions,
    .news-card,
    .search-form,
    .group-management,
    .chat-top-actions {
        grid-template-columns: 1fr !important;
    }

    .group-channel-sidebar {
        order: -1;
    }

    .group-chat-header {
        align-items: stretch;
        flex-direction: column;
    }

    .group-messages .message {
        width: 100%;
    }

    .group-member-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .group-member-row form {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .tw-player-controls {
        grid-template-columns: 38px minmax(0, 1fr) 38px 38px;
        border-radius: 16px;
    }

    .tw-player-time {
        display: none;
    }

    .profile-icon-badge::after {
        left: auto;
        right: 0;
        max-width: min(240px, calc(100vw - 48px));
        transform: translateY(4px);
    }

    .profile-icon-badge:hover::after,
    .profile-icon-badge:focus::after {
        transform: translateY(0);
    }

    .community-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 6px;
    }

    .community-grid {
        grid-template-columns: 1fr;
    }

    .live-preview {
        grid-template-columns: 1fr;
    }

    .live-player-placeholder {
        min-height: 220px;
    }

    .roadmap-hero,
    .roadmap-actions {
        grid-template-columns: 1fr;
    }

    .roadmap-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .roadmap-grid {
        grid-template-columns: 1fr;
    }

    .roadmap-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .community-card > h1,
    .studio-header h1,
    .settings-card h1,
    .register-card h1 {
        font-size: 32px;
    }

    .studio-header,
    .studio-header-actions,
    .studio-filter-row {
        display: grid;
        width: 100%;
        min-width: 0;
    }

    .studio-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .studio-video-table {
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .studio-video-row {
        min-width: 920px;
    }

    .studio-video-list {
        max-height: none;
    }

    .chat-sidebar {
        border-right: 0;
        border-bottom: 1px solid #edf2ef;
        padding-right: 0;
        padding-bottom: 14px;
    }

    .message {
        max-width: 92%;
    }

    .calendar-grid {
        grid-template-columns: repeat(10, 1fr);
    }

    .users-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

.video-review-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 14px 0;
}

.video-review-compare video {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    background: #101815;
}

.shorts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 18px;
}

.short-card {
    border: 1px solid #dce6e1;
    border-radius: 8px;
    padding: 12px;
    background: #fff;
}

.short-card > a {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 9 / 16;
    border-radius: 8px;
    background: #13231d;
}

.short-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.short-play {
    position: absolute;
    inset: auto 12px 12px auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .62);
    color: #fff;
}

.short-card h2 {
    margin: 12px 0 4px;
    font-size: 18px;
}

.shorts-shell {
    min-height: 100vh;
    background: #07110d;
    color: #fff;
}

.shorts-topbar {
    position: fixed;
    z-index: 20;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px clamp(16px, 4vw, 42px);
    background: linear-gradient(180deg, rgba(7, 17, 13, .92), rgba(7, 17, 13, 0));
    pointer-events: none;
}

.shorts-topbar > * {
    pointer-events: auto;
}

.shorts-topbar h1,
.shorts-topbar .profile-kicker {
    margin: 0;
    color: #fff;
}

.shorts-topbar h1 {
    font-size: clamp(28px, 4vw, 44px);
}

.shorts-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.shorts-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    text-decoration: none;
    backdrop-filter: blur(10px);
}

.shorts-nav a.active {
    background: #35a77c;
    border-color: #35a77c;
}

.shorts-stage {
    height: 100vh;
    overflow: hidden;
}

.shorts-feed {
    height: 100vh;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
}

.shorts-feed::-webkit-scrollbar {
    display: none;
}

.short-reel {
    min-height: 100vh;
    display: grid;
    place-items: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding: 86px 18px 24px;
}

.short-reel-video {
    position: relative;
    width: min(430px, 100%);
    height: min(820px, calc(100vh - 112px));
    min-height: 520px;
    overflow: hidden;
    border-radius: 18px;
    background: #000;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}

.short-reel-video video,
.short-reel-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.short-gradient {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .25), transparent 28%),
        linear-gradient(0deg, rgba(0, 0, 0, .78), transparent 48%);
    pointer-events: none;
}

.short-info {
    position: absolute;
    left: 20px;
    right: 84px;
    bottom: 22px;
    z-index: 2;
}

.short-info h2 {
    margin: 0 0 8px;
    font-size: 24px;
    line-height: 1.08;
    color: #fff;
}

.short-info p,
.short-info a {
    margin: 6px 0 0;
    color: #fff;
}

.short-actions {
    position: absolute;
    z-index: 3;
    right: 14px;
    bottom: 22px;
    display: grid;
    gap: 12px;
    justify-items: center;
}

.short-actions a,
.short-actions span,
.short-sound-toggle {
    display: grid;
    place-items: center;
    width: 56px;
    min-height: 56px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    backdrop-filter: blur(10px);
}

.short-actions strong {
    display: block;
    margin-top: 2px;
    font-size: 12px;
}

.short-sound-toggle {
    position: absolute;
    z-index: 3;
    top: 14px;
    right: 14px;
    width: auto;
    min-height: 36px;
    padding: 0 12px;
    border: 0;
    cursor: pointer;
}

@media (max-width: 560px) {
    .auth-card {
        padding: 22px;
    }

    .search-form {
        grid-template-columns: 1fr;
    }

    .recommended-grid {
        grid-template-columns: 1fr;
    }

    .community-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .studio-shell {
        padding: 16px;
    }

    .studio-header,
    .studio-header-actions {
        display: grid;
    }

    .studio-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .studio-video-table {
        overflow-x: auto;
    }

    .studio-video-row {
        min-width: 980px;
    }

    .studio-layout {
        grid-template-columns: 1fr;
    }

    .studio-video-list {
        max-height: none;
    }

    .studio-actions {
        grid-template-columns: 1fr;
    }

    .chat-layout {
        grid-template-columns: 1fr;
    }

    .chat-sidebar {
        border-right: 0;
        border-bottom: 1px solid #edf2ef;
        padding-right: 0;
        padding-bottom: 14px;
    }

    .message {
        max-width: 92%;
    }

    .profile-card > *:not(.profile-hero) {
        margin-left: 22px;
        margin-right: 22px;
    }

    .profile-hero {
        grid-template-columns: 1fr;
        padding: 28px 22px;
    }

    .profile-list {
        grid-template-columns: 1fr;
    }

    .profile-actions {
        grid-template-columns: 1fr;
    }

    .calendar-grid {
        grid-template-columns: repeat(10, 1fr);
    }

    .video-review-compare {
        grid-template-columns: 1fr;
    }

    .shorts-topbar {
        align-items: flex-start;
        padding: 12px;
    }

    .shorts-topbar h1 {
        font-size: 28px;
    }

    .shorts-nav {
        max-width: 56vw;
        gap: 6px;
    }

    .shorts-nav a {
        min-height: 30px;
        padding: 6px 9px;
        font-size: 13px;
    }

    .short-reel {
        padding: 72px 0 0;
    }

    .short-reel-video {
        width: 100vw;
        height: calc(100vh - 72px);
        min-height: 0;
        border-radius: 0;
    }

    .short-info {
        left: 16px;
        right: 78px;
        bottom: 18px;
    }

    .short-info h2 {
        font-size: 21px;
    }

    .short-actions {
        right: 10px;
        bottom: 18px;
    }

    .short-actions a,
    .short-actions span {
        width: 50px;
        min-height: 50px;
    }
}

@media (min-width: 980px) and (orientation: landscape) {
    .profile-shell {
        align-items: flex-start;
        padding: 32px;
    }

    .profile-card {
        display: grid;
        grid-template-columns: 340px minmax(0, 1fr);
        width: min(1180px, calc(100vw - 64px));
        max-width: 1180px;
        padding-bottom: 26px;
        overflow: visible;
    }

    .profile-card > *:not(.profile-hero) {
        grid-column: 2;
        margin-left: 28px;
        margin-right: 28px;
    }

    .profile-hero {
        position: sticky;
        top: 32px;
        grid-column: 1;
        grid-row: 1 / span 30;
        grid-template-columns: 1fr;
        align-content: start;
        min-height: calc(100vh - 64px);
        border-radius: 8px 0 0 8px;
        padding: 34px;
        text-align: left;
    }

    .profile-hero.has-banner {
        background:
            linear-gradient(180deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.78)),
            var(--profile-banner) center / cover,
            linear-gradient(135deg, var(--profile-color), #17251f);
    }

    .profile-avatar {
        width: 142px;
        height: 142px;
        min-width: 142px;
        max-width: 142px;
        min-height: 142px;
        max-height: 142px;
        line-height: 136px;
        font-size: 48px;
    }

    .profile-title-row {
        display: block;
    }

    .profile-inline-badges {
        margin-top: 8px;
    }

    .profile-color-row {
        margin-top: 26px;
    }
}
/* Creator/support refinements */
.creator-channel-profile .profile-hero {
    min-height: 320px;
    align-items: end;
}

.creator-channel-profile .profile-hero::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.74));
}

.creator-channel-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.creator-channel-strip span {
    border: 1px solid rgba(255, 255, 255, 0.38);
    background: rgba(0, 0, 0, 0.24);
    color: #fff;
    border-radius: 999px;
    padding: 7px 11px;
    font-weight: 800;
    font-size: 0.82rem;
}

.support-creator-panel {
    margin: 18px 0;
    padding: 18px;
    border: 1px solid rgba(53, 167, 124, 0.24);
    border-radius: 12px;
    background: rgba(53, 167, 124, 0.07);
}

.interactive-error-code {
    animation: errorPulse 2.4s ease-in-out infinite;
}

@keyframes errorPulse {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.02); }
}

/* Rewards, activity and status pages */
.pill-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0;
}

.pill-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid rgba(53, 167, 124, 0.28);
    border-radius: 999px;
    text-decoration: none;
    font-weight: 800;
    color: inherit;
    background: rgba(255, 255, 255, 0.62);
}

.pill-nav a.active {
    background: #35a77c;
    color: #fff;
}

.activity-timeline {
    display: grid;
    gap: 14px;
    margin: 24px 0;
}

.activity-item {
    position: relative;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(53, 167, 124, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.68);
}

.activity-dot {
    width: 12px;
    height: 12px;
    margin-top: 6px;
    border-radius: 50%;
    background: #35a77c;
    box-shadow: 0 0 0 5px rgba(53, 167, 124, 0.14);
}

.reward-hero {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 22px 0;
}

.reward-hero > div,
.status-check,
.season-reward {
    border: 1px solid rgba(53, 167, 124, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.68);
}

.reward-hero > div {
    padding: 18px;
}

.reward-hero span {
    display: block;
    color: #4f6b61;
    font-weight: 700;
}

.reward-hero strong {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 1.35rem;
}

.reward-card-link {
    color: inherit;
    text-decoration: none;
}

.reward-card-link.has-alert {
    border-color: #e11d48;
    box-shadow: inset 4px 0 0 #e11d48;
}

.promo-form {
    margin: 24px 0;
}

.season-progress {
    height: 14px;
    overflow: hidden;
    margin: 20px 0 26px;
    border-radius: 999px;
    background: rgba(53, 167, 124, 0.15);
}

.season-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #35a77c, #ffd166);
}

.season-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.premium-track {
    border-color: rgba(255, 193, 7, 0.65);
    box-shadow: inset 0 3px 0 #ffc107;
}

.infinite-track {
    border-color: rgba(73, 201, 255, 0.55);
    box-shadow: inset 0 3px 0 #49c9ff;
}

.season-claimed {
    outline: 2px solid rgba(53, 167, 124, 0.45);
}

.inline-season-notice {
    margin: 6px 0 0;
    padding: 10px 12px;
    font-size: 0.95rem;
}

.leaderboard-card {
    overflow: hidden;
}

.leaderboard-filter {
    align-items: stretch;
    margin: 18px 0;
}

.leaderboard-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 24px;
}

.leaderboard-tabs a {
    padding: 10px 14px;
    border: 1px solid rgba(53, 167, 124, 0.28);
    border-radius: 999px;
    background: rgba(53, 167, 124, 0.1);
    color: inherit;
    font-weight: 800;
    text-decoration: none;
}

.leaderboard-tabs a.active {
    background: #35a77c;
    color: #061b14;
    box-shadow: 0 10px 25px rgba(53, 167, 124, 0.22);
}

.league-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    gap: 18px;
    align-items: center;
    margin: 20px 0;
    padding: 24px;
    border-radius: 8px;
    border: 1px solid rgba(53, 167, 124, 0.28);
    background:
        radial-gradient(circle at top right, rgba(255, 209, 102, 0.22), transparent 35%),
        linear-gradient(135deg, rgba(53, 167, 124, 0.2), rgba(5, 0, 135, 0.08));
}

.league-hero h2 {
    margin: 0 0 8px;
}

.league-rules {
    display: grid;
    gap: 8px;
}

.league-rules span {
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
    color: #264d3e;
    font-weight: 900;
}

.league-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
    gap: 20px;
    align-items: start;
    margin: 22px 0;
    padding: 22px;
    border: 1px solid rgba(53, 167, 124, 0.25);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(53, 167, 124, 0.16), rgba(255, 209, 102, 0.13));
}

.league-panel h2 {
    margin-top: 0;
}

.league-mini-list {
    display: grid;
    gap: 8px;
}

.league-mini-list a {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.62);
    color: inherit;
    text-decoration: none;
}

.leaderboard-list {
    display: grid;
    gap: 12px;
}

.leaderboard-row {
    display: grid;
    grid-template-columns: 68px minmax(180px, 1.5fr) repeat(3, minmax(90px, 0.55fr)) minmax(180px, 1fr);
    gap: 14px;
    align-items: center;
    padding: 16px;
    border: 1px solid rgba(53, 167, 124, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.74);
}

.leaderboard-row.rank-1 {
    border-color: rgba(255, 193, 7, 0.85);
    box-shadow: inset 5px 0 0 #ffc107;
}

.leaderboard-row.rank-2 {
    border-color: rgba(148, 163, 184, 0.8);
    box-shadow: inset 5px 0 0 #94a3b8;
}

.leaderboard-row.rank-3 {
    border-color: rgba(217, 119, 6, 0.75);
    box-shadow: inset 5px 0 0 #d97706;
}

.rank-badge {
    display: grid;
    place-items: center;
    min-height: 48px;
    border-radius: 8px;
    background: rgba(53, 167, 124, 0.16);
    font-size: 1.15rem;
    font-weight: 900;
}

.leaderboard-user a {
    display: inline-block;
    color: inherit;
    font-size: 1.05rem;
    font-weight: 900;
    text-decoration: none;
}

.leaderboard-user span,
.leaderboard-stats span,
.leaderboard-extra span {
    display: block;
    color: #4f6b61;
    font-weight: 700;
}

.competition-result-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 18px;
}

.competition-result-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 13, 10, 0.72);
    backdrop-filter: blur(5px);
}

.competition-result-dialog {
    position: relative;
    z-index: 1;
    width: min(620px, 100%);
    max-height: min(760px, calc(100vh - 36px));
    overflow: auto;
    padding: 26px;
    border: 1px solid rgba(99, 244, 187, 0.42);
    border-radius: 8px;
    background: linear-gradient(145deg, #123629, #0b2019);
    color: #eefbf5;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.48);
}

.competition-result-dialog h2 { margin: 0 0 8px; }
.competition-result-dialog .muted { color: #bdd8cb; }
.competition-result-dialog button { width: 100%; margin-top: 16px; }

.competition-result-ranking {
    display: grid;
    gap: 8px;
    margin-top: 18px;
}

.competition-result-ranking > div {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
}

.competition-result-ranking small { display: block; color: #a6c8b9; }
.competition-result-reward {
    margin-top: 18px;
    padding: 18px;
    border-radius: 8px;
    background: rgba(99, 244, 187, 0.15);
    color: #d6ffeb;
    font-weight: 800;
}

.leaderboard-stats strong {
    display: block;
    font-size: 1.25rem;
}

.leaderboard-extra {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.leaderboard-extra span {
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(53, 167, 124, 0.12);
}

.clan-leaderboard-card {
    display: grid;
    gap: 18px;
}

.clan-battle-hero {
    margin-top: 0;
}

.clan-ranking-section {
    display: grid;
    gap: 12px;
    margin-top: 8px;
}

.section-title-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.section-title-row h2 {
    margin: 0;
}

.soft-pill {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(53, 167, 124, 0.14);
    color: #245846;
    font-weight: 900;
    white-space: nowrap;
}

.clan-row {
    grid-template-columns: 68px minmax(220px, 1.4fr) repeat(3, minmax(110px, 0.55fr)) minmax(190px, 0.9fr);
}

.clan-row-main a {
    font-size: 1.12rem;
}

.clan-tag-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    margin-right: 4px;
    border-radius: 999px;
    background: rgba(5, 0, 135, 0.11);
    color: #050087;
    font-size: 0.9rem;
    font-weight: 950;
}

.clan-reward-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.clan-reward-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 16px;
    border: 1px solid rgba(53, 167, 124, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
}

.clan-reward-card h3,
.clan-reward-card p {
    margin: 0 0 6px;
}

.clan-reward-card small {
    color: #4f6b61;
    font-weight: 800;
}

.clan-empty-state {
    display: grid;
    gap: 6px;
    padding: 22px;
    border: 1px dashed rgba(53, 167, 124, 0.32);
    border-radius: 8px;
    background: rgba(53, 167, 124, 0.07);
    color: #4f6b61;
}

.clan-empty-state strong {
    color: #10251d;
    font-size: 1.08rem;
}

html[data-theme-resolved="dark"] .soft-pill {
    background: rgba(99, 244, 187, 0.13);
    color: #c9ffea;
}

html[data-theme-resolved="dark"] .clan-tag-pill {
    background: rgba(99, 244, 187, 0.12);
    color: #d8fff0;
}

html[data-theme-resolved="dark"] .clan-reward-card,
html[data-theme-resolved="dark"] .clan-empty-state {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(99, 244, 187, 0.22);
}

html[data-theme-resolved="dark"] .clan-empty-state strong {
    color: #eefbf5;
}

.status-check.ok {
    box-shadow: inset 4px 0 0 #35a77c;
}

.status-check.warn {
    box-shadow: inset 4px 0 0 #d97706;
}

html[data-theme-resolved="dark"] .pill-nav a,
html[data-theme-resolved="dark"] .activity-item,
html[data-theme-resolved="dark"] .reward-hero > div,
html[data-theme-resolved="dark"] .status-check,
html[data-theme-resolved="dark"] .season-reward {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(99, 244, 187, 0.22);
}

html[data-theme-resolved="dark"] .leaderboard-row,
html[data-theme-resolved="dark"] .league-rules span,
html[data-theme-resolved="dark"] .league-mini-list a {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(99, 244, 187, 0.22);
}

html[data-theme-resolved="dark"] .leaderboard-tabs a {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(99, 244, 187, 0.24);
}

html[data-theme-resolved="dark"] .leaderboard-tabs a.active {
    background: #63f4bb;
    color: #04130e;
}

@media (max-width: 720px) {
    .reward-hero {
        grid-template-columns: 1fr;
    }

    .league-panel,
    .league-hero,
    .leaderboard-row {
        grid-template-columns: 1fr;
    }

    .section-title-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .leaderboard-filter {
        grid-template-columns: 1fr;
    }
}

/* Stable shared surfaces for new account/admin pages */
.stack-form {
    display: grid;
    gap: 14px;
}

.stack-form label {
    display: grid;
    gap: 7px;
    font-weight: 900;
}

.stack-form input,
.stack-form select,
.stack-form textarea {
    width: 100%;
}

.table-scroll {
    width: 100%;
    overflow-x: auto;
}

.table-scroll table {
    min-width: 760px;
}

.timeline-list,
.moderation-list,
.review-list,
.webhook-list {
    display: grid;
    gap: 12px;
}

.activity-item,
.moderation-item,
.review-item,
.webhook-item,
.profile-feature-card,
.progress-panel {
    padding: 16px;
    border: 1px solid rgba(53, 167, 124, 0.24);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
}

.profile-feature-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.avatar-mini {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #fff;
    font-weight: 900;
}

.avatar-mini img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.progress-panel {
    display: grid;
    gap: 12px;
}

.progress-bar {
    height: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(53, 167, 124, 0.16);
}

.progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #35a77c, #ffd166);
}

.utility-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
}

html[data-low-data="1"] *,
html[data-low-data="1"] *::before,
html[data-low-data="1"] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

html[data-low-data="1"] .news-strip,
html[data-low-data="1"] .kofi-middle-widget,
html[data-low-data="1"] .donation-kofi-wrap {
    display: none !important;
}

html[data-theme-resolved="dark"] .activity-item,
html[data-theme-resolved="dark"] .moderation-item,
html[data-theme-resolved="dark"] .review-item,
html[data-theme-resolved="dark"] .webhook-item,
html[data-theme-resolved="dark"] .profile-feature-card,
html[data-theme-resolved="dark"] .progress-panel {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(99, 244, 187, 0.22);
}

@font-face {
    font-family: "MiniWorldHeiTi";
    src: url("/assets/ttf/heiti.ttf") format("truetype");
    font-display: swap;
}

.profile-card.profile-font-heiti,
.profile-card.profile-font-heiti input,
.profile-card.profile-font-heiti button {
    font-family: "MiniWorldHeiTi", system-ui, sans-serif;
}

.profile-card.profile-theme-forest { --profile-theme-shadow: #0d2b20; }
.profile-card.profile-theme-ocean { --profile-theme-shadow: #102a50; }
.profile-card.profile-theme-neon { --profile-theme-shadow: #102d5f; }
.profile-card.profile-theme-midnight { --profile-theme-shadow: #080d18; }
.profile-card.profile-theme-seasonal { --profile-theme-shadow: #264f48; }
/* Themes keep their contrast, but the selected profile color remains the visual identity. */
.profile-card[class*="profile-theme-"] .profile-hero:not(.has-banner) {
    background: linear-gradient(
        125deg,
        var(--profile-color),
        color-mix(in srgb, var(--profile-color) 44%, var(--profile-theme-shadow, #17251f))
    );
}
html[data-theme-resolved="dark"] .profile-card .profile-action-button {
    background-color: var(--profile-color);
    color: #ffffff;
}
.profile-card.profile-pattern-dots { background-image: radial-gradient(color-mix(in srgb, var(--profile-color) 18%, transparent) 1px, transparent 1px); background-size: 18px 18px; }
.profile-card.profile-pattern-grid { background-image: linear-gradient(color-mix(in srgb, var(--profile-color) 12%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--profile-color) 12%, transparent) 1px, transparent 1px); background-size: 24px 24px; }
.profile-card.profile-pattern-diagonal { background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--profile-color) 10%, transparent) 0 2px, transparent 2px 16px); }
.profile-card.profile-layout-compact .profile-list > div { padding: 10px 0; }
.profile-card.profile-layout-wide { max-width: 1380px; }
.profile-custom-title { margin: 2px 0; color: var(--profile-color); font-weight: 700; }
.profile-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.profile-gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.profile-music audio { width: min(100%, 520px); }
.qr-card { max-width: 520px; text-align: center; }
.qr-wrap { position: relative; width: min(80vw, 360px); margin: 18px auto; padding: 14px; background: #fff; border-radius: 12px; }
.qr-image { display: block; width: 100%; height: auto; }
.qr-logo { position: absolute; width: 66px; height: 66px; border-radius: 14px; object-fit: cover; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 5px solid #fff; background: #fff; }
.qr-card input { width: 100%; margin: 12px 0; text-align: center; }
.league-mini-list small { display: block; opacity: .72; font-size: .78rem; }

.profile-public-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 4px;
}

.profile-public-tags span {
    border: 1px solid color-mix(in srgb, var(--profile-tag-color) 55%, var(--border));
    background: color-mix(in srgb, var(--profile-tag-color) 14%, var(--surface));
    color: var(--profile-tag-color);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    padding: 5px 10px;
}