@font-face {
    font-family: "B Yekan";
    src: url("../fonts/BYekan.ttf") format("truetype");
    font-display: swap;
    font-style: normal;
    font-weight: 400;
}

.site-header-skip-link {
    position: fixed;
    z-index: 10000;
    inset-inline-start: 1rem;
    top: -5rem;
    padding: 0.7rem 1rem;
    border-radius: 0.6rem;
    background: #3d2018;
    color: #fff;
    font-weight: 700;
}

.site-header-skip-link:focus-visible {
    top: 1rem;
}
.content-page-picker {
    display: grid;
    gap: 16px;
    margin-bottom: 20px;
}

.content-page-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.content-page-picker-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: var(--surface-soft);
    color: var(--ink);
    text-decoration: none;
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.content-page-picker-card:hover,
.content-page-picker-card:focus-visible,
.content-page-picker-card.is-selected {
    border-color: color-mix(in srgb, var(--accent) 65%, var(--line));
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent);
    transform: translateY(-1px);
}

.content-page-picker-icon {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 13px;
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    color: var(--primary);
    font-size: 1.25rem;
    font-weight: 900;
}

.content-page-picker-card > span:last-child {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.content-page-picker-card strong {
    color: var(--primary-dark);
}

.content-page-picker-card small {
    color: var(--muted);
    line-height: 1.7;
}

@media (max-width: 920px) {

    .content-page-picker-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {

    .content-page-picker-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 460px) {
    .content-page-picker-card {
        padding: 12px;
    }

    .content-page-picker-icon {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }
}

/* Global font picker in the branding administration page. */
.admin-font-settings-card {
    display: grid;
    gap: 18px;
    grid-column: 1 / -1;
    width: 100%;
}

.admin-font-settings-form {
    display: grid;
    gap: 18px;
}

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

.admin-font-option {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-height: 88px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface-soft);
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.admin-font-option:hover,
.admin-font-option:has(input:checked) {
    border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
    transform: translateY(-1px);
}

.admin-font-option input {
    flex: 0 0 auto;
    margin-top: 5px;
    accent-color: var(--accent);
}

.admin-font-option-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.admin-font-option-copy strong {
    color: var(--primary-dark);
    font-size: 1.05rem;
}

.admin-font-option-copy span {
    color: var(--muted);
    line-height: 1.75;
}

/* Header settings editor. */
.admin-header-settings-card {
    display: grid;
    gap: 18px;
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    padding: clamp(18px, 2.5vw, 28px);
}

.admin-header-settings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(220px, .8fr);
    gap: 20px;
    min-width: 0;
}

.admin-header-settings-form,
.admin-header-settings-preview {
    min-width: 0;
}

.admin-header-item-list {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.admin-header-item-row {
    display: grid;
    grid-template-columns: auto auto minmax(90px, .7fr) minmax(120px, 1fr) minmax(90px, .7fr) auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface-soft);
}

.admin-header-item-row strong,
.admin-header-item-row input {
    min-width: 0;
}

.admin-header-item-row input {
    width: 100%;
    min-height: 38px;
    padding: 6px 9px;
}

.admin-header-item-row .btn {
    min-width: 34px;
    padding-inline: 7px;
}

.admin-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    cursor: pointer;
}

.admin-switch input {
    width: auto;
    min-height: auto;
}

.admin-header-settings-preview {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 16px;
    border: 1px dashed var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
    color: var(--muted);
}

.form-status.is-error {
    color: var(--danger, #b42318);
}

.site-header[data-header-height="compact"] {
    --header-height-scale: .88;
}

.site-header[data-header-height="large"] {
    --header-height-scale: 1.12;
}

.site-header[data-header-height="compact"] .nav,
.site-header[data-header-height="large"] .nav {
    min-height: calc(64px * var(--header-height-scale));
}

.site-header .header-control-icon {
    width: var(--header-control-size, 20px);
    height: var(--header-control-size, 20px);
}

.site-header .nav-links {
    gap: var(--header-item-gap, 10px);
    font-size: var(--header-font-size, 14px);
}

@media (max-width: 760px) {
    .admin-header-settings-layout {
        grid-template-columns: 1fr;
    }

    .admin-header-item-row {
        grid-template-columns: auto auto minmax(0, 1fr) auto;
    }

    .admin-header-item-row strong {
        grid-column: 3 / -1;
    }

    .admin-header-item-row input {
        grid-column: span 2;
    }
}

/* Dark is the default; the toggle switches only between dark and light. */
.site-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    overflow: visible;
    vertical-align: -.12em;
    color: currentColor;
}

html[data-icon-pack="line"] :is(.site-header, .dashboard-bottom-nav, .admin-cpanel-nav) .site-icon {
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}

html[data-icon-pack="rounded"] :is(.site-header, .dashboard-bottom-nav, .admin-cpanel-nav) .site-icon {
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

html[data-icon-pack="bold"] :is(.site-header, .dashboard-bottom-nav, .admin-cpanel-nav) .site-icon {
    stroke-width: 2.65;
    stroke-linecap: square;
    stroke-linejoin: round;
}

.admin-icons-card {
    display: grid;
    gap: 22px;
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    padding: clamp(18px, 2.5vw, 28px);
}

.admin-icons-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

.admin-icons-toolbar h2,
.admin-icons-toolbar p {
    margin-block: 7px 0;
}

.admin-icons-search {
    display: grid;
    gap: 7px;
    width: min(100%, 330px);
}

.admin-icon-pack-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.admin-icon-pack-tab {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
    color: var(--ink);
    text-align: right;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.admin-icon-pack-tab:hover,
.admin-icon-pack-tab.is-active {
    border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent);
    transform: translateY(-1px);
}

.admin-icon-pack-tab > span:nth-child(2) {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.admin-icon-pack-tab small {
    color: var(--muted);
    line-height: 1.65;
}

.admin-icon-pack-tab em {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--success) 18%, var(--surface));
    color: var(--success);
    font-size: .68rem;
    font-style: normal;
}

.admin-icon-pack-sample {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    color: var(--primary-dark);
    font-size: 29px;
}

.admin-icon-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
    gap: 10px;
}

.admin-icon-tile {
    display: grid;
    place-items: center;
    gap: 7px;
    min-height: 125px;
    padding: 13px 9px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
    text-align: center;
}

.admin-icon-tile .site-icon {
    color: var(--primary-dark);
    font-size: 32px;
}

.admin-icon-tile code {
    color: var(--muted);
    font-size: .72rem;
    direction: ltr;
}

.card-icon .site-icon {
    width: 1.15em;
    height: 1.15em;
}

.admin-icons-empty {
    padding: 28px;
    border: 1px dashed var(--line);
    border-radius: 14px;
    color: var(--muted);
    text-align: center;
}

.admin-icons-actions {
    position: sticky;
    bottom: 12px;
    z-index: 3;
    width: fit-content;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
}

.dashboard-nav-icon .site-icon {
    width: 1.3rem;
    height: 1.3rem;
    max-width: 1.3rem;
    max-height: 1.3rem;
}

.dashboard-topbar-icon .site-icon,
.notification-bell .site-icon {
    width: 1.15rem;
    height: 1.15rem;
    max-width: 1.15rem;
    max-height: 1.15rem;
    flex: 0 0 1.15rem;
}

@media (max-width: 780px) {
    .admin-icons-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-icons-search {
        width: 100%;
    }

    .admin-icon-pack-tabs {
        grid-template-columns: 1fr;
    }
}

html[data-theme="brown"] {
    color-scheme: dark;
    --bg: #241714;
    --surface: #30201b;
    --surface-soft: #39261f;
    --surface-contrast: #4a3025;
    --ink: #fff4eb;
    --muted: #d5bcae;
    --line: #5b3b2d;
    --primary: #d9a06a;
    --primary-dark: #f2c79d;
    --accent: #e7ad70;
    --danger: #f18c86;
    --success: #72d6a2;
    --shadow: 0 24px 70px rgba(12, 6, 4, 0.38);
    --body-glow: rgba(210, 137, 76, 0.16);
}

html[data-theme="light"] {
    color-scheme: light;
    --bg: #f6f1eb;
    --surface: #ffffff;
    --surface-soft: #fffaf5;
    --surface-contrast: #f5e4d5;
    --ink: #2a1b16;
    --muted: #806f67;
    --line: #eaded5;
    --primary: #5a3023;
    --primary-dark: #3d2018;
    --accent: #c98b53;
    --danger: #b42318;
    --success: #18794e;
    --shadow: 0 24px 70px rgba(70, 39, 25, 0.12);
    --body-glow: rgba(201, 139, 83, 0.14);
}

/* Friends module: compact in-page tabs and consistent panel rhythm. */
[data-chat-app] {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.friends-tabs {
    display: flex;
    gap: .45rem;
    width: 100%;
    padding: .35rem;
    overflow-x: auto;
    scrollbar-width: none;
    border: 1px solid var(--border-color, rgba(89, 66, 46, .14));
    border-radius: 1rem;
    background: var(--surface-color, rgba(255, 255, 255, .72));
}

.friends-tabs::-webkit-scrollbar {
    display: none;
}

.friends-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-width: max-content;
    min-height: 2.75rem;
    padding: .55rem 1rem;
    border: 0;
    border-radius: .75rem;
    color: var(--muted-color, #796b61);
    background: transparent;
    font: inherit;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease, transform .18s ease;
}

.friends-tab:hover,
.friends-tab:focus-visible {
    color: var(--accent-color, #9a6b2f);
    background: color-mix(in srgb, var(--accent-color, #9a6b2f) 9%, transparent);
}

.friends-tab:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent-color, #9a6b2f) 35%, transparent);
    outline-offset: 2px;
}

.friends-tab.is-active {
    color: var(--text-color, #3b2a20);
    background: color-mix(in srgb, var(--accent-color, #9a6b2f) 16%, transparent);
    box-shadow: 0 5px 14px rgba(50, 32, 18, .08);
}

[data-friends-section] {
    min-width: 0;
    animation: friends-tab-in 180ms ease both;
}

[data-friends-section][hidden] {
    display: none !important;
}

[data-chat-app] > .panel,
[data-chat-app] > .friends-layout {
    margin: 0;
}

[data-chat-app] .panel + .panel,
[data-chat-app] .panel + .friends-layout,
[data-chat-app] .friends-layout + .panel {
    margin-top: 0;
}

.friends-messages-panel .friend-message-contact {
    align-items: center;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.friends-messages-panel .friend-message-contact:hover,
.friends-messages-panel .friend-message-contact:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 8px 20px rgba(50, 32, 18, .1);
    transform: translateY(-1px);
}

.friends-messages-panel .friend-message-contact:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent);
    outline-offset: 2px;
}

.friends-message-search {
    margin-bottom: 12px;
}

.friends-message-contact[hidden] {
    display: none;
}

html[data-theme="dark"] .friends-tabs,
html[data-theme="dark"] .friends-tab.is-active {
    background: var(--surface-color, rgba(38, 29, 24, .9));
}

@keyframes friends-tab-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 540px) {
    .friends-tabs {
        margin-inline: 0;
    }

    .friends-tab {
        flex: 1 0 auto;
        padding-inline: .75rem;
        font-size: .82rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-friends-section] {
        animation: none;
    }
}

:root {
    --bg: #17110f;
    --surface: #211815;
    --surface-soft: #2a1e1a;
    --surface-contrast: #38261f;
    --ink: #f6ece5;
    --muted: #c2ada2;
    --line: #4a342b;
    --primary: #8f5035;
    --primary-dark: #f0c59d;
    --accent: #e4a56a;
    --danger: #f18c86;
    --success: #72d6a2;
    --shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
    --body-glow: rgba(201, 139, 83, 0.1);
    --font-fa: "B Yekan", "B Yekan+", "BYekan", Tahoma, Arial, sans-serif;
}

html {
    color-scheme: dark;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #17110f;
    --surface: #211815;
    --surface-soft: #2a1e1a;
    --surface-contrast: #38261f;
    --ink: #f6ece5;
    --muted: #c2ada2;
    --line: #4a342b;
    --primary: #8f5035;
    --primary-dark: #f0c59d;
    --accent: #e4a56a;
    --danger: #f18c86;
    --success: #72d6a2;
    --shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
    --body-glow: rgba(201, 139, 83, 0.1);
}

* {
    box-sizing: border-box;
}

html:not([data-theme="dark"]) {
    direction: rtl;
    scroll-behavior: smooth;
}

html[data-theme="dark"] {
    direction: rtl;
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    margin: 0;
    background:
        radial-gradient(circle at 10% 0%, var(--body-glow), transparent 32rem),
        var(--bg);
    color: var(--ink);
    font-family: var(--font-fa);
    line-height: 1.8;
    transition: background-color 180ms ease, color 180ms ease;
}

body.chat-modal-open {
    overflow: hidden;
}

html,
body,
button,
input,
textarea,
select {
    font-family: var(--font-fa);
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.site-header {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
    padding: 24px 0;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--primary);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.brand-mark {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    object-fit: contain;
    background: radial-gradient(circle, rgba(223, 164, 62, 0.42) 0%, rgba(102, 50, 18, 0.24) 42%, transparent 74%);
    filter: drop-shadow(0 0 8px rgba(223, 164, 62, 0.34)) drop-shadow(0 9px 22px rgba(90, 48, 35, 0.16));
    box-shadow: 0 9px 22px rgba(90, 48, 35, 0.16);
}

.nav-links,
.hero-actions,
.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.nav-user {
    color: var(--primary-dark);
    font-size: 0.92rem;
    font-weight: 700;
}

.theme-toggle {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--primary);
    cursor: pointer;
    font-size: 1.15rem;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.theme-toggle:hover {
    border-color: var(--accent);
    background: var(--surface-soft);
}

.theme-toggle-icon {
    display: inline-grid;
    width: 24px;
    height: 24px;
    place-items: center;
    font-size: 1.15rem;
    line-height: 1;
}

.install-app-button[hidden] {
    display: none;
}

.install-app-button {
    gap: 7px;
    white-space: nowrap;
}

.install-app-button-icon {
    display: inline-grid;
    width: 20px;
    height: 20px;
    place-items: center;
    font-family: Arial, sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
}

.language-switcher {
    position: relative;
    display: inline-block;
    min-width: 128px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

.help-widget {
    position: relative;
}

.help-trigger {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--primary);
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    font-weight: 800;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.help-trigger:hover,
.help-widget.is-open .help-trigger {
    border-color: var(--accent);
    background: var(--surface-soft);
}

.help-popover {
    position: absolute;
    z-index: 980;
    top: calc(100% + 10px);
    right: 0;
    width: min(300px, calc(100vw - 32px));
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.help-popover[hidden] {
    display: none;
}

.help-popover strong {
    display: block;
    margin-bottom: 5px;
    color: var(--primary-dark);
}

.help-popover p {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.8;
}

.help-popover a {
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 800;
}

.language-switcher-toggle {
    display: flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 800;
}

.language-switcher-toggle:hover,
.language-switcher.is-open .language-switcher-toggle {
    background: var(--surface-contrast);
}

.language-menu {
    position: absolute;
    z-index: 80;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    min-width: 160px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.language-menu[hidden] {
    display: none;
}

.language-menu a {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 9px;
    border-radius: 9px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    transition: background 160ms ease, color 160ms ease;
}

.language-menu a small {
    color: var(--muted);
    font-family: Arial, sans-serif;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
}

.language-menu a:hover,
.language-menu a.is-active {
    background: var(--surface-contrast);
    color: var(--primary);
}

html[data-language="en"] .language-menu {
    right: auto;
    left: 0;
}

.container {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
}

.hero {
    display: grid;
    min-height: calc(100vh - 100px);
    align-items: center;
    padding: 48px 0 80px;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    align-items: center;
    gap: 72px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    color: var(--accent);
    font-size: 0.95rem;
    font-weight: 700;
}

.eyebrow::before {
    width: 28px;
    height: 2px;
    background: var(--accent);
    content: "";
}

.hero h1 {
    max-width: 650px;
    margin: 0 0 22px;
    color: var(--primary-dark);
    font-size: clamp(2.4rem, 6vw, 5.2rem);
    line-height: 1.25;
}

.hero p {
    max-width: 560px;
    margin: 0 0 30px;
    color: var(--muted);
    font-size: 1.15rem;
}

.hero-card {
    position: relative;
    min-height: 390px;
    overflow: hidden;
    padding: 34px;
    border-radius: 34px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.1), transparent),
        linear-gradient(145deg, var(--primary), #24130e);
    box-shadow: var(--shadow);
    color: #fff;
}

.hero-card::after {
    position: absolute;
    right: -90px;
    bottom: -120px;
    width: 320px;
    height: 320px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(255, 255, 255, 0.03), 0 0 0 68px rgba(255, 255, 255, 0.03);
    content: "";
}

.hero-card-content {
    position: relative;
    z-index: 1;
}

.hero-card h2 {
    max-width: 320px;
    margin: 24px 0 16px;
    font-size: 2rem;
    line-height: 1.45;
}

.hero-card p {
    color: rgba(255, 255, 255, 0.76);
    font-size: 1rem;
}

.btn {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border: 1px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    font-weight: 700;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background: var(--primary);
    color: #fff;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-secondary {
    border-color: var(--line);
    background: var(--surface);
    color: var(--primary);
}

.btn-ghost {
    color: var(--primary);
}

.btn-small {
    min-height: 40px;
    padding: 7px 15px;
    border-radius: 11px;
    font-size: 0.9rem;
}

.btn-block {
    width: 100%;
}

.auth-page {
    display: grid;
    min-height: calc(100vh - 100px);
    place-items: center;
    padding: 30px 0 70px;
}

.auth-card {
    width: min(100%, 470px);
    padding: clamp(26px, 5vw, 44px);
    border: 1px solid rgba(234, 222, 213, 0.9);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow);
}

.auth-card-wide {
    width: min(100%, 700px);
}

.minimal-auth-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 15%, rgba(201, 139, 83, 0.2), transparent 26rem),
        radial-gradient(circle at 88% 85%, rgba(119, 72, 55, 0.22), transparent 30rem),
        linear-gradient(135deg, #241612 0%, #3d2118 48%, #17100e 100%);
}

.minimal-auth-body .auth-page {
    min-height: 100vh;
    padding: clamp(24px, 6vw, 70px) var(--page-gutter);
}

.minimal-auth-body .auth-card {
    border-color: rgba(238, 204, 171, 0.24);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 247, 238, 0.9)),
        rgba(255, 255, 255, 0.92);
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.36),
        0 0 0 1px rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
}

.minimal-auth-body .auth-heading h1 {
    letter-spacing: -0.02em;
}

.auth-heading {
    margin-bottom: 28px;
    text-align: center;
}

.auth-heading h1 {
    margin: 14px 0 8px;
    color: var(--primary-dark);
    font-size: 2rem;
}

.auth-heading p,
.page-heading p,
.panel-heading p {
    margin: 0;
    color: var(--muted);
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 999px;
    background: #f8ecdf;
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 800;
}

.badge-light {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.badge-warning {
    background: #fff1df;
    color: #a15e16;
}

.badge-success {
    background: #e6f6ec;
    color: var(--success);
}

.field {
    margin-bottom: 18px;
}

.field label {
    display: block;
    margin-bottom: 8px;
    color: var(--primary-dark);
    font-weight: 700;
}

.field input {
    width: 100%;
    min-height: 54px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    outline: 0;
    background: var(--surface-soft);
    color: var(--ink);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.field input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(201, 139, 83, 0.16);
}

.password-field {
    position: relative;
}

.password-field input {
    padding-inline-end: 54px;
}

.password-toggle {
    position: absolute;
    inset-inline-end: 10px;
    top: 50%;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 1rem;
    transform: translateY(-50%);
}

.password-toggle:hover,
.password-toggle:focus-visible {
    background: var(--surface-contrast);
    color: var(--primary-dark);
    outline: 0;
}

.phone-input {
    display: flex;
    align-items: stretch;
    direction: ltr;
}

.phone-prefix {
    display: inline-flex;
    min-width: 58px;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-inline-end: 0;
    border-radius: 14px 0 0 14px;
    background: var(--surface-contrast);
    color: var(--muted);
    direction: ltr;
    font-weight: 700;
    user-select: none;
}

.phone-input input {
    flex: 1;
    min-width: 0;
    border-radius: 0 14px 14px 0;
    direction: ltr;
    text-align: left;
}

.sheba-input {
    display: flex;
    align-items: stretch;
    direction: ltr;
}

.sheba-prefix {
    display: inline-flex;
    min-width: 58px;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-inline-end: 0;
    border-radius: 14px 0 0 14px;
    background: var(--surface-contrast);
    color: var(--muted);
    font-family: Arial, sans-serif;
    font-weight: 800;
    user-select: none;
}

.sheba-input input {
    flex: 1;
    min-width: 0;
    border-radius: 0 14px 14px 0;
    direction: ltr;
    text-align: left;
    font-family: Arial, sans-serif;
    letter-spacing: 0.08em;
}

.password-strength {
    margin: -2px 0 18px;
}

.password-strength-track {
    position: relative;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--line);
    direction: ltr;
}

.password-strength-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        #a72f27 0%,
        #e68c35 50%,
        #258052 100%
    );
    transition: width 180ms ease, background-color 180ms ease;
}

.password-strength[data-strength-level="1"] .password-strength-fill {
    background: #a72f27;
}

.password-strength[data-strength-level="2"] .password-strength-fill {
    background: #e68c35;
}

.password-strength[data-strength-level="3"] .password-strength-fill {
    background: #d6a437;
}

.password-strength[data-strength-level="4"] .password-strength-fill {
    background: #258052;
}

.password-strength small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.82rem;
}

.field input[type="file"] {
    padding: 8px 12px;
}

.field small,
.field-hint {
    display: block;
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.field-hint {
    margin-top: -6px;
    margin-bottom: 18px;
}

.otp-form-hint {
    margin-top: 22px;
    padding-top: 4px;
}

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

.form-actions .btn {
    width: 100%;
}

.auth-footer {
    margin-top: 24px;
    color: var(--muted);
    text-align: center;
}

.auth-footer a {
    color: var(--primary);
    font-weight: 800;
}

.alert {
    margin-bottom: 20px;
    padding: 12px 15px;
    border-radius: 13px;
    font-size: 0.95rem;
}

.alert-error {
    background: #fff0ef;
    color: var(--danger);
}

.alert-success {
    background: #edf9f2;
    color: var(--success);
}

.flash-stack {
    padding-top: 4px;
}

.login-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 24px;
    padding: 5px;
    border-radius: 16px;
    background: #f7eee7;
}

.tab-button {
    min-height: 43px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-weight: 700;
}

.tab-button.is-active {
    background: #fff;
    color: var(--primary);
    box-shadow: 0 5px 15px rgba(70, 39, 25, 0.08);
}

.otp-input {
    direction: ltr;
    font-size: 2rem !important;
    letter-spacing: 0.35em;
    text-align: center;
}

.otp-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 18px;
    padding: 11px 14px;
    border-radius: 13px;
    background: #fff8ee;
    color: var(--muted);
    font-size: 0.9rem;
}

.otp-status strong {
    color: var(--primary);
    direction: ltr;
}

.resend-form {
    margin-top: 12px;
}

.site-content-modal[hidden] {
    display: none;
}

.site-content-modal {
    position: fixed;
    z-index: 200;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.site-content-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(42, 27, 22, 0.64);
}

.site-content-modal.friend-confirm-modal {
    z-index: 1100;
    height: 100vh;
    height: 100dvh;
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    padding:
        calc(16px + env(safe-area-inset-top))
        calc(16px + env(safe-area-inset-right))
        calc(16px + env(safe-area-inset-bottom))
        calc(16px + env(safe-area-inset-left));
}

.friend-confirm-modal .site-content-modal-dialog {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: min(420px, 100%);
    max-height: 100%;
    padding: 24px 20px 20px;
    overflow: hidden;
}

.friend-confirm-modal .site-content-modal-dialog h2 {
    flex-shrink: 0;
    margin: 0;
    padding-inline-end: 32px;
    font-size: 1.15rem;
}

.friend-confirm-modal .site-content-modal-body {
    min-height: 0;
    overflow-y: auto;
}

.friend-confirm-modal .site-content-modal-body p {
    margin: 0;
}

.friend-confirm-modal .form-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex-shrink: 0;
    gap: 10px;
    margin: 0;
}

.friend-confirm-modal .form-actions .btn {
    width: 100%;
    min-height: 44px;
}

.friend-confirm-modal .site-content-modal-backdrop {
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}

.site-content-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(620px, 100%);
    max-height: min(720px, calc(100vh - 40px));
    overflow-y: auto;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.site-content-modal-dialog h2 {
    margin: 0 0 14px;
    color: var(--primary-dark);
}

.site-content-modal-body {
    color: var(--muted);
    line-height: 2;
    white-space: normal;
}

.content-editor-form {
    display: grid;
    gap: 20px;
}

.content-editor-section {
    margin: 0;
}

.content-editor-list {
    display: grid;
    gap: 17px;
}

.content-editor-item {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: var(--surface-soft);
}

.content-editor-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 13px;
}

.content-editor-label strong {
    color: var(--primary-dark);
}

.content-editor-label code {
    direction: ltr;
    color: var(--muted);
    font-family: Consolas, monospace;
    font-size: 0.72rem;
}

.content-editor-locale-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}

.content-editor-locale-grid .field {
    margin: 0;
}

.content-editor-locale-grid label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.content-editor-locale-grid label small {
    direction: ltr;
    color: var(--muted);
    font-family: Arial, sans-serif;
    font-size: 0.68rem;
}

.content-editor-locale-grid textarea {
    min-height: 92px;
    resize: vertical;
}

.content-editor-actions {
    justify-content: flex-start;
}

.content-editor-faq-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: -4px 0 16px;
    padding: 12px 15px;
    border: 1px dashed color-mix(in srgb, var(--accent) 42%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.content-editor-faq-actions small {
    color: var(--muted);
    font-size: 0.78rem;
}

.content-editor-faq-item-is-hidden {
    display: none;
}

.site-content-modal-close {
    position: absolute;
    top: 13px;
    left: 15px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface-soft);
    color: var(--primary);
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
}

/* Short-lived administrator re-authentication prompt. */
.admin-reauth-modal {
    z-index: 300;
    background: transparent;
}

.admin-reauth-dialog {
    width: min(430px, 100%);
    padding: clamp(24px, 5vw, 34px);
    text-align: right;
}

.admin-reauth-dialog h2 {
    margin: 14px 0 8px;
    font-size: clamp(1.15rem, 2vw, 1.4rem);
}

.admin-reauth-dialog p {
    margin: 0 0 22px;
    color: var(--muted);
    line-height: 1.9;
    font-size: 0.9rem;
}

.admin-reauth-icon {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
    border-radius: 16px;
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    color: var(--accent);
}

.admin-reauth-icon svg,
.admin-reauth-icon .icon {
    width: 25px;
    height: 25px;
}

.admin-reauth-dialog .badge {
    display: inline-flex;
    margin-top: 18px;
}

.admin-reauth-dialog .field {
    margin: 0;
}

.admin-reauth-dialog input {
    width: 100%;
}

.admin-reauth-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.admin-reauth-actions .btn {
    flex: 1 1 160px;
}

.admin-reauth-message {
    min-height: 1.5em;
    margin-top: 10px;
    color: var(--muted);
    font-size: 0.82rem;
}

.admin-reauth-message.is-error {
    color: var(--danger, #b54c42);
}

.admin-reauth-message.is-success {
    color: var(--success, #3f7959);
}

.admin-reauth-message.is-loading {
    color: var(--primary);
}

.admin-reauth-hint {
    display: block;
    margin-top: 16px;
    color: var(--muted);
    line-height: 1.8;
}

body.admin-reauth-open .admin-reauth-dialog {
    animation: admin-reauth-dialog-in 180ms ease both;
}

@keyframes admin-reauth-dialog-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 560px) {
    .admin-reauth-modal {
        align-items: end;
        padding: 10px;
    }

    .admin-reauth-dialog {
        border-radius: 22px;
        padding: 24px 20px;
    }
}

.site-feedback-modal-dialog {
    width: min(650px, 100%);
}

html[data-language="en"] .site-content-modal-close {
    right: 15px;
    left: auto;
}

body.site-modal-open {
    overflow: hidden;
}

/* Latest site update shown once to a signed-in user. */
.site-update-modal {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(14px, 4vw, 30px);
    color: var(--ink);
    opacity: 0;
    transition: opacity 180ms ease;
}

.site-update-modal.is-visible {
    opacity: 1;
}

.site-update-modal.is-closing {
    opacity: 0;
}

.site-update-modal-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 48%),
        color-mix(in srgb, var(--bg) 76%, transparent);
    backdrop-filter: blur(9px) saturate(85%);
    -webkit-backdrop-filter: blur(9px) saturate(85%);
}

.site-update-modal-card {
    position: relative;
    z-index: 1;
    width: min(100%, 650px);
    max-height: min(760px, calc(100dvh - 28px));
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
    border-radius: clamp(20px, 4vw, 30px);
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 14%, transparent), transparent 38%),
        var(--surface);
    box-shadow: 0 28px 90px color-mix(in srgb, var(--bg) 70%, transparent), var(--shadow);
    transform: translateY(18px) scale(.975);
    transition: transform 260ms cubic-bezier(.2, .8, .2, 1);
}

.site-update-modal.is-visible .site-update-modal-card {
    transform: translateY(0) scale(1);
}

.site-update-modal.is-closing .site-update-modal-card {
    transform: translateY(10px) scale(.985);
}

.site-update-modal-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 17px;
    padding: clamp(22px, 5vw, 32px);
    padding-bottom: 21px;
    border-bottom: 1px solid var(--line);
}

.site-update-modal-hero::after {
    position: absolute;
    right: clamp(22px, 5vw, 32px);
    bottom: -1px;
    width: 74px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--accent), var(--primary));
    content: "";
}

.site-update-modal-icon {
    display: grid;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: 18px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 22%, var(--surface)), color-mix(in srgb, var(--primary) 10%, var(--surface-soft)));
    color: var(--primary-dark);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 17%, transparent);
}

.site-update-modal-icon svg {
    width: 29px;
    height: 29px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-update-modal-heading {
    min-width: 0;
}

.site-update-modal-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: var(--accent);
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .01em;
}

.site-update-modal-label::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 13%, transparent);
    content: "";
}

.site-update-modal-heading h2 {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: clamp(1.2rem, 3.7vw, 1.65rem);
    line-height: 1.55;
}

.site-update-modal-body {
    max-height: min(390px, 45dvh);
    margin: clamp(20px, 4vw, 28px) clamp(22px, 5vw, 32px);
    padding: 18px 20px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: color-mix(in srgb, var(--surface-soft) 92%, var(--accent));
    color: var(--ink);
    font-size: clamp(.9rem, 2.8vw, 1rem);
    line-height: 2.05;
    overflow-wrap: anywhere;
    scrollbar-color: var(--platform-scrollbar-thumb) transparent;
    scrollbar-width: thin;
    white-space: pre-wrap;
}

.site-update-modal-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 0 clamp(22px, 5vw, 32px) clamp(22px, 5vw, 30px);
}

.site-update-modal-confirm {
    display: inline-flex;
    min-width: 148px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 0 0 auto;
}

.site-update-modal-confirm svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

html[dir="ltr"] .site-update-modal-confirm svg {
    transform: rotate(180deg);
}

body.site-update-modal-open {
    overflow: hidden;
}

@media (max-width: 520px) {
    .site-update-modal {
        align-items: end;
        padding: 10px;
    }

    .site-update-modal-card {
        width: 100%;
        max-height: calc(100dvh - 20px);
        border-radius: 24px;
    }

    .site-update-modal-hero {
        gap: 13px;
        padding: 20px 18px 17px;
    }

    .site-update-modal-hero::after {
        right: 18px;
    }

    .site-update-modal-icon {
        width: 49px;
        height: 49px;
        flex-basis: 49px;
        border-radius: 15px;
    }

    .site-update-modal-icon svg {
        width: 25px;
        height: 25px;
    }

    .site-update-modal-body {
        max-height: 43dvh;
        margin: 17px 18px;
        padding: 15px 16px;
        border-radius: 15px;
    }

    .site-update-modal-actions {
        display: grid;
        gap: 12px;
        padding: 0 18px 18px;
    }

    .site-update-modal-confirm {
        width: 100%;
        min-height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-update-modal,
    .site-update-modal-card {
        transition: none;
    }
}

.ios-install-modal[hidden] {
    display: none;
}

.ios-install-modal {
    position: fixed;
    z-index: 360;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.ios-install-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(42, 27, 22, 0.68);
    backdrop-filter: blur(4px);
}

.ios-install-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(620px, 100%);
    max-height: min(780px, calc(100vh - 40px));
    overflow-y: auto;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 26px;
    background:
        radial-gradient(circle at 100% 0%, var(--body-glow), transparent 17rem),
        var(--surface);
    box-shadow: var(--shadow);
}

.ios-install-modal-close {
    position: absolute;
    top: 14px;
    inset-inline-end: 15px;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface-soft);
    color: var(--primary);
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
}

.ios-install-modal-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-inline-end: 42px;
}

.ios-install-modal-heading img {
    display: block;
    width: 66px;
    height: 66px;
    flex: 0 0 auto;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface-soft);
    object-fit: contain;
    box-shadow: 0 12px 26px rgba(70, 39, 25, 0.1);
}

.ios-install-modal-heading h2 {
    margin: 9px 0 0;
    color: var(--primary-dark);
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    line-height: 1.5;
}

.ios-install-modal-intro {
    margin: 20px 0 0;
    color: var(--muted);
    line-height: 2;
}

.ios-install-steps {
    display: grid;
    gap: 12px;
    margin: 22px 0;
    padding: 0;
    list-style: none;
}

.ios-install-steps li {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: var(--surface-soft);
}

.ios-install-step-number {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: var(--primary);
    font-family: Arial, sans-serif;
    font-weight: 800;
}

.ios-install-steps strong {
    display: block;
    color: var(--primary-dark);
}

.ios-install-steps p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.9;
}

.ios-share-symbol {
    display: inline-flex;
    margin-inline-start: 5px;
    direction: ltr;
    color: var(--primary);
    font-family: Arial, sans-serif;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.12em;
    vertical-align: middle;
}

.ios-install-tip {
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
    border-radius: 15px;
    color: var(--muted);
    background: color-mix(in srgb, var(--accent) 9%, var(--surface));
    font-size: 0.84rem;
    line-height: 1.9;
}

.ios-install-tip strong {
    color: var(--primary-dark);
}

.ios-install-modal-actions {
    margin-top: 22px;
}

body.ios-install-modal-open {
    overflow: hidden;
}

.page-shell {
    padding: 44px 0 80px;
}

.page-heading,
.dashboard-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 30px;
}

.page-heading-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.wallet-quick-balance {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.88rem;
}

.wallet-quick-balance strong {
    color: var(--primary-dark);
}

.page-heading h1,
.dashboard-hero h1 {
    margin: 0 0 8px;
    color: var(--primary-dark);
    font-size: clamp(2rem, 4vw, 3.4rem);
}

.dashboard-hero {
    padding: clamp(25px, 5vw, 50px);
    border-radius: 30px;
    background: linear-gradient(140deg, var(--primary), var(--primary-dark));
    box-shadow: var(--shadow);
    color: #fff;
}

.dashboard-hero h1 {
    color: #fff;
}

.dashboard-hero p {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
}

.dashboard-hero .dashboard-welcome-subtitle {
    margin: -2px 0 8px;
    color: #fff;
    font-weight: 700;
}

.dashboard-hero .eyebrow {
    color: #eabf92;
}

.dashboard-hero h1 strong {
    font-weight: 900;
}

.dashboard-layout-hint {
    margin-top: 12px !important;
    color: rgba(255, 255, 255, 0.66) !important;
    font-size: 0.86rem;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px;
}

.admin-card-group-heading {
    grid-column: 1 / -1;
    margin-top: 14px;
    padding: 8px 2px 0;
    color: var(--primary-dark);
    font-size: 1rem;
    font-weight: 800;
}

.admin-card-group-heading:first-child {
    margin-top: 0;
}

/* cPanel-style compact administration navigation */
.admin-cpanel-nav {
    display: grid;
    gap: 14px;
    margin-top: 24px;
}

.admin-section-search {
    margin: 0 0 22px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background:
        radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 34%),
        var(--surface);
    box-shadow: 0 12px 35px rgba(70, 39, 25, 0.06);
}

.admin-section-search-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.admin-section-search-heading .eyebrow { margin: 0 0 4px; }
.admin-section-search-heading h2 { margin: 0 0 5px; color: var(--primary-dark); font-size: 1.18rem; }
.admin-section-search-heading p:last-child { margin: 0; color: var(--muted); font-size: .86rem; }
.admin-section-search-shortcut { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); color: var(--muted); font-weight: 800; box-shadow: inset 0 -2px 0 var(--line); }

.admin-section-search-field {
    position: relative;
    display: flex;
    align-items: center;
}

.admin-section-search-field input {
    width: 100%;
    min-height: 52px;
    padding: 12px 48px;
    border: 1px solid var(--line);
    border-radius: 14px;
    outline: 0;
    background: var(--surface-soft);
    color: var(--text);
    font: inherit;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.admin-section-search-field input:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 17%, transparent); }
.admin-section-search-field input::placeholder { color: var(--muted); opacity: .82; }
.admin-section-search-field input::-webkit-search-cancel-button { display: none; }
.admin-section-search-icon { position: absolute; z-index: 1; inset-inline-start: 17px; color: var(--accent); font-size: 1.45rem; line-height: 1; pointer-events: none; }
.admin-section-search-clear { position: absolute; inset-inline-end: 12px; display: grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--surface-contrast); color: var(--muted); cursor: pointer; font: inherit; font-size: 1.2rem; }
.admin-section-search-clear[hidden] { display: none; }
.admin-section-search-clear:hover { color: var(--primary-dark); }

.admin-section-search-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 15px 2px 9px; }
.admin-section-search-meta strong { color: var(--primary-dark); font-size: .88rem; }
.admin-section-search-meta span { color: var(--muted); font-size: .78rem; }
.admin-section-search-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.admin-section-search-meta[hidden],
.admin-section-search-results[hidden] { display: none; }

.admin-section-search-result {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-soft) 76%, transparent);
    color: var(--text);
    text-decoration: none;
    transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.admin-section-search-result:hover,
.admin-section-search-result:focus-visible { border-color: var(--accent); outline: 0; background: var(--surface); transform: translateY(-1px); }
.admin-section-search-result-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); font-size: 1.15rem; }
.admin-section-search-result-copy { display: grid; min-width: 0; gap: 3px; }
.admin-section-search-result-copy strong,
.admin-section-search-result-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-section-search-result-copy strong { color: var(--primary-dark); font-size: .87rem; }
.admin-section-search-result-copy small { color: var(--muted); font-size: .73rem; }
.admin-section-search-result-meta { max-width: 125px; padding: 4px 7px; border-radius: 999px; background: var(--surface-contrast); color: var(--muted); font-size: .68rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-section-search-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 4px; padding: 25px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; }
.admin-section-search-empty > span { color: var(--accent); font-size: 1.7rem; }
.admin-section-search-empty strong { color: var(--primary-dark); font-size: .9rem; }
.admin-section-search-empty small { font-size: .78rem; }

.admin-cpanel-group {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 8px 24px rgba(70, 39, 25, 0.055);
}

.admin-cpanel-group-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 11px;
    padding: 15px 18px;
    border: 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--surface-soft) 88%, var(--accent)), var(--surface));
    color: var(--primary-dark);
    cursor: pointer;
    text-align: start;
}

.admin-cpanel-group-toggle:hover { background: var(--surface-contrast); }
.admin-cpanel-group-icon { color: var(--accent); font-size: 1.2rem; line-height: 1; }
.admin-cpanel-group-title { flex: 1; font-size: .98rem; font-weight: 850; }
.admin-cpanel-group-count { min-width: 25px; padding: 2px 7px; border-radius: 999px; background: var(--surface-contrast); color: var(--muted); font-size: .75rem; text-align: center; }
.admin-cpanel-chevron { color: var(--muted); font-size: 1.15rem; transition: transform 180ms ease; }
.admin-cpanel-group-toggle[aria-expanded="true"] .admin-cpanel-chevron { transform: rotate(180deg); }

.admin-cpanel-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.admin-cpanel-items[hidden] { display: none; }
/* Progressive enhancement: if the optional menu script is unavailable, keep
 * every section reachable instead of hiding links behind inert buttons. */
html:not([data-admin-cpanel-bound]) .admin-cpanel-items[hidden] { display: grid; }
.admin-cpanel-item { min-height: 0; padding: 0; border: 1px solid transparent; border-radius: 11px; background: transparent; box-shadow: none; }
.admin-cpanel-item:hover { transform: none; border-color: var(--line); background: var(--surface-soft); box-shadow: none; }
.admin-cpanel-item .dashboard-card-tools { top: 7px; inset-inline-start: auto; inset-inline-end: 8px; opacity: 0; transition: opacity 150ms ease; }
.admin-cpanel-item:hover .dashboard-card-tools, .admin-cpanel-item.is-pinned .dashboard-card-tools { opacity: 1; }
.admin-cpanel-item .dashboard-card-link { display: flex; min-height: 66px; align-items: center; gap: 12px; padding: 10px 14px; }
.admin-cpanel-item .card-icon { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--accent) 13%, transparent); font-size: 1.15rem; }
.admin-cpanel-item-copy { display: grid; min-width: 0; gap: 3px; }
.admin-cpanel-item-copy strong { overflow: hidden; color: var(--primary-dark); font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-cpanel-item-copy small { overflow: hidden; color: var(--muted); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-cpanel-item-arrow { margin-inline-start: auto; color: var(--muted); font-size: 1rem; opacity: .7; }

/* Keep live metrics useful without bringing back oversized image cards. */
.admin-monitoring-grid .admin-stat-card-image { display: none; }
.admin-monitoring-grid .admin-stat-card { min-height: 0; padding: 14px 16px; border-radius: 14px; }

@media (max-width: 700px) {
    .admin-cpanel-items,
    .admin-section-search-results { grid-template-columns: 1fr; }
    .admin-section-search { padding: 17px; }
    .admin-section-search-heading { margin-bottom: 13px; }
    .admin-section-search-heading p:last-child { font-size: .8rem; }
    .admin-section-search-shortcut { display: none; }
    .admin-section-search-meta { align-items: flex-start; flex-direction: column; gap: 3px; }
    .admin-section-search-result-meta { display: none; }
    .admin-section-search-result { grid-template-columns: 38px minmax(0, 1fr); }
}

.dashboard-card,
.panel,
.empty-state {
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 35px rgba(70, 39, 25, 0.06);
}

.dashboard-card {
    position: relative;
    min-width: 0;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.dashboard-sortable-card {
    cursor: grab;
}

.dashboard-sortable-card.is-dragging {
    opacity: 0.58;
    cursor: grabbing;
}

.dashboard-sortable-card.is-drop-target {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(201, 139, 83, 0.15);
}

.dashboard-card-tools {
    position: absolute;
    z-index: 2;
    top: 14px;
    inset-inline-start: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dashboard-drag-handle {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface-soft);
    color: var(--muted);
    cursor: grab;
    font-size: 1.35rem;
    line-height: 1;
    user-select: none;
}

.dashboard-pin-button {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface-soft);
    color: var(--accent);
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
}

.dashboard-drag-handle:hover,
.dashboard-pin-button:hover,
.dashboard-sortable-card.is-pinned .dashboard-pin-button {
    border-color: var(--accent);
    background: var(--surface-contrast);
}

.dashboard-card-link {
    display: block;
    height: 100%;
    padding-top: 28px;
}

.dashboard-card.is-pinned {
    border-color: rgba(201, 139, 83, 0.72);
}

.dashboard-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.dashboard-card h2,
.panel h2,
.empty-state h2 {
    margin: 12px 0 6px;
    color: var(--primary-dark);
    font-size: 1.25rem;
}

.dashboard-card p,
.empty-state p {
    margin: 0;
    color: var(--muted);
}

.card-icon,
.empty-icon {
    color: var(--accent);
    font-size: 2rem;
    font-weight: 800;
}

.dashboard-overview,
.admin-monitoring-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.dashboard-overview-card {
    display: grid;
    gap: 4px;
    padding: 19px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 12px 35px rgba(70, 39, 25, 0.06);
}

.dashboard-overview-card span,
.dashboard-overview-card small {
    color: var(--muted);
    font-size: 0.82rem;
}

.dashboard-overview-card strong {
    color: var(--primary-dark);
    font-size: 1.55rem;
    line-height: 1.35;
}

.dashboard-admin-section {
    margin-top: 34px;
}

.admin-monitoring-panel {
    margin-bottom: 20px;
}

.admin-tools-panel {
    position: sticky;
    z-index: 40;
    top: var(--dashboard-header-offset, 0px);
    margin-inline: calc(50% - 50vw);
    margin-bottom: 20px;
    padding-inline: max(var(--page-gutter), calc((100vw - var(--page-max)) / 2));
    border-bottom: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    box-shadow: 0 10px 28px rgba(52, 29, 20, 0.06);
    backdrop-filter: blur(18px) saturate(130%);
    isolation: isolate;
}

.admin-tools-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 62px;
    width: 100%;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 10px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow-x: auto;
    scrollbar-width: thin;
}

.admin-tools-label {
    flex: 0 0 auto;
    padding: 0 8px;
    color: var(--primary-dark);
    font-weight: 800;
    white-space: nowrap;
}

.admin-tool-button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--text);
    background: var(--surface-soft);
    cursor: pointer;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 160ms ease, color 160ms ease, background 160ms ease, transform 160ms ease;
}

.admin-tool-button:hover {
    border-color: var(--accent);
    color: var(--primary-dark);
    background: var(--surface);
    transform: translateY(-1px);
}

.admin-tool-button:focus-visible {
    outline: 0;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.admin-tool-button-icon {
    color: var(--accent);
    font-size: 1.15rem;
    line-height: 1;
}

.bank-account-list {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
}

.bank-account-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
}

.bank-account-main {
    min-width: 0;
    flex: 1;
}

.bank-account-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.bank-account-heading strong {
    color: var(--primary-dark);
}

.bank-account-details {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.84rem;
}

.bank-account-details strong {
    color: var(--primary-dark);
}

.bank-account-delete-form {
    flex: 0 0 auto;
}

.bank-account-form-wrapper {
    margin-top: 18px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.bank-account-form-wrapper[hidden] {
    display: none;
}

.empty-inline {
    margin-bottom: 18px;
    padding: 14px;
    border-radius: 13px;
    background: var(--surface-soft);
    color: var(--muted);
}

.email-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.95fr);
    align-items: center;
    gap: 12px;
}

.email-consent-row {
    margin: 0;
}

.profile-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
    gap: 18px;
}

.profile-layout .panel:last-child {
    grid-column: 1 / -1;
}

.profile-bio-preview {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.profile-bio-preview span,
.profile-bio-preview p {
    color: var(--muted);
}

.profile-bio-preview span {
    font-size: 0.82rem;
    font-weight: 800;
}

.profile-bio-preview p {
    margin: 5px 0 0;
    white-space: pre-wrap;
}

.gender-choice-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.gender-choice {
    display: inline-flex;
    min-width: 105px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface-soft);
    color: var(--muted);
    cursor: pointer;
    font-weight: 800;
}

.gender-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.gender-choice.is-selected,
.gender-choice:has(input:checked) {
    border-color: var(--accent);
    background: var(--surface-contrast);
    color: var(--primary);
}

.gender-choice-icon {
    color: var(--accent);
    font-family: Arial, sans-serif;
    font-size: 1.25rem;
    line-height: 1;
}

.privacy-setting-row {
    margin-top: 8px;
}

.profile-gift-panel {
    grid-column: 1 / -1;
}

.profile-gift-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.profile-gift-actions .inline-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
}

.profile-gift-actions .inline-form input,
.profile-gift-actions .inline-form select {
    min-width: 0;
    flex: 1 1 150px;
}

.gift-code-apply-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.gift-code-table-action {
    white-space: nowrap;
}

.panel-divider {
    height: 1px;
    margin: 18px 0;
    background: var(--line);
}

.gift-code-highlight {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 16px;
    border: 1px dashed var(--accent);
    border-radius: 16px;
    background: var(--surface-soft);
}

.gift-code-highlight > div {
    display: grid;
    gap: 2px;
}

.gift-code-highlight span {
    color: var(--muted);
    font-size: 0.8rem;
}

.gift-code-highlight strong {
    color: var(--primary-dark);
    font-size: 1.35rem;
    letter-spacing: 0.08em;
}

.panel-financial {
    grid-column: 1 / -1;
}

.panel-heading {
    margin-bottom: 22px;
}

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

.settings-subheading {
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.wallet-transfer-setting-card {
    margin-bottom: 24px;
}

.profile-avatar-setting-card {
    margin-bottom: 24px;
}

.platform-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 20px 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
}

.platform-setting-row p {
    margin: 6px 0;
}

.platform-setting-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    white-space: nowrap;
}

.platform-setting-switch input {
    width: 46px;
    height: 24px;
    accent-color: var(--primary);
}

.platform-setting-switch input:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent);
    outline-offset: 3px;
}

.platform-setting-switch input:disabled {
    cursor: not-allowed;
    opacity: .6;
}

.wallet-transfer-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 20px 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
}

.wallet-transfer-setting-row p {
    margin: 6px 0;
}

.wallet-transfer-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    white-space: nowrap;
}

.wallet-transfer-switch input {
    width: 46px;
    height: 24px;
    accent-color: var(--primary);
}

.wallet-transfer-switch input:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent);
    outline-offset: 3px;
}

.wallet-transfer-switch input:disabled {
    cursor: not-allowed;
    opacity: .6;
}

@media (max-width: 640px) {
    .wallet-transfer-setting-row,
    .platform-setting-row {
        align-items: flex-start;
        flex-direction: column;
    }
}

.tournament-rules-panel {
    margin-bottom: 22px;
}

.tournament-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 8px;
}

.tournament-card {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    gap: 8px;
}

.tournament-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.tournament-card-header h2 {
    margin-bottom: 4px;
}

.tournament-card-header p {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
}

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

.tournament-meta-grid > div {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface-soft);
}

.tournament-meta-grid span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 0.78rem;
}

.tournament-meta-grid strong {
    display: block;
    color: var(--primary-dark);
    font-size: 0.93rem;
}

.tournament-progress {
    height: 8px;
    overflow: hidden;
    border-radius: 99px;
    background: var(--surface-contrast);
}

.tournament-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), var(--primary));
    transition: width 200ms ease;
}

.tournament-join-form {
    margin-top: auto;
}

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

.tournament-summary-grid > div {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
}

.tournament-summary-grid span,
.current-match-meta span {
    display: block;
    color: var(--muted);
    font-size: 0.8rem;
}

.tournament-summary-grid strong {
    display: block;
    margin-top: 6px;
    color: var(--primary-dark);
}

.current-match-panel {
    margin-top: 18px;
}

.current-match-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.current-match-meta span {
    display: inline-block;
}

.bracket-panel {
    margin-top: 18px;
    overflow: hidden;
}

.bracket-tree {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
    gap: 18px;
    align-items: start;
}

.bracket-round {
    min-width: 0;
}

.bracket-round-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.bracket-round-heading strong {
    color: var(--muted);
    font-size: 0.78rem;
}

.bracket-round-matches {
    display: grid;
    gap: 14px;
}

.bracket-match {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
}

.bracket-match.is-viewer-match {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(201, 139, 83, 0.14);
}

.bracket-match-header,
.bracket-match-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--muted);
    font-size: 0.76rem;
}

.bracket-match-header {
    margin-bottom: 9px;
}

.bracket-match-footer {
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
}

.bracket-player {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
    font-size: 0.88rem;
}

.bracket-player + .bracket-player {
    margin-top: 5px;
}

.bracket-player.is-current-user {
    outline: 2px solid rgba(201, 139, 83, 0.5);
}

.bracket-player.is-winner {
    color: var(--success);
    font-weight: 800;
}

.bracket-player.is-loser {
    color: var(--muted);
    text-decoration: line-through;
}

.bracket-player b {
    font-size: 0.7rem;
    white-space: nowrap;
}

.profile-summary {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
}

.profile-summary h2 {
    margin: 0 0 3px;
}

.profile-summary p {
    margin: 0 0 8px;
    color: var(--muted);
}

.avatar {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: #f5e4d5;
    color: var(--primary);
    object-fit: cover;
    font-weight: 800;
}

.avatar-large {
    width: 92px;
    height: 92px;
    border: 4px solid rgba(255, 255, 255, 0.32);
    font-size: 2rem;
}

.avatar-xl {
    width: 82px;
    height: 82px;
    font-size: 1.7rem;
}

/* Initial-based fallback avatars need a stronger visual presence than the
 * regular text scale used by the shared avatar sizes. */
.avatar-placeholder {
    line-height: 1;
    text-transform: uppercase;
}

.avatar-large.avatar-placeholder {
    font-size: 2.65rem;
}

.avatar-xl.avatar-placeholder {
    font-size: 2.25rem;
}

.status-pill {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
}

.status-active {
    background: #e6f6ec;
    color: var(--success);
}

.status-expired {
    background: #f0f2f4;
    color: var(--muted);
}

.status-disabled,
.status-dismissed {
    background: #f0ebe7;
    color: var(--muted);
}

.status-new {
    background: #fff1df;
    color: #a15e16;
}

.status-reviewing {
    background: #eef1ff;
    color: #4955a3;
}

.status-paid {
    background: #e6f6ec;
    color: var(--success);
}

.status-approved {
    background: #e6f6ec;
    color: var(--success);
}

.status-posted {
    background: #e6f6ec;
    color: var(--success);
}

.status-scheduled {
    background: #fff8ee;
    color: #9a641d;
}

.status-waiting {
    background: #fff8ee;
    color: #9a641d;
}

.status-ready {
    background: #eef4ff;
    color: #3768a8;
}

.status-in_progress {
    background: #eef4ff;
    color: #3768a8;
}

.status-completed {
    background: #e6f6ec;
    color: var(--success);
}

.status-bye {
    background: #f0f2f4;
    color: var(--muted);
}

.status-under_review,
.status-pending,
.status-redirected {
    background: #fff8ee;
    color: #9a641d;
}

.status-rejected,
.status-failed,
.status-cancelled,
.status-removed,
.status-reversed {
    background: #fff0ef;
    color: var(--danger);
}

.account-details {
    display: grid;
    gap: 0;
    margin: 0;
}

.account-details div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
}

.account-details dt {
    color: var(--muted);
}

.account-details dd {
    margin: 0;
    color: var(--primary-dark);
    font-weight: 700;
}

.financial-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.financial-summary div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
}

.financial-summary span {
    color: var(--muted);
    font-size: 0.82rem;
}

.financial-summary strong {
    color: var(--primary-dark);
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -4px 0 18px;
    color: var(--muted);
    font-size: 0.9rem;
}

.checkbox-row input[type="checkbox"],
input[type="checkbox"].consent-checkbox {
    width: 17px;
    height: 17px;
    min-width: 17px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.empty-state {
    padding: 70px 25px;
    text-align: center;
}

.compact-empty {
    padding: 38px 20px;
    border: 0;
    box-shadow: none;
}

.empty-state h2 {
    font-size: 1.7rem;
}

.wallet-balance-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 18px;
    padding: clamp(25px, 5vw, 42px);
    border-radius: 28px;
    background: linear-gradient(140deg, #3d2018, #7a432d);
    box-shadow: var(--shadow);
    color: #fff;
}

.wallet-balance-card span,
.wallet-balance-card small {
    display: block;
    color: rgba(255, 255, 255, 0.72);
}

.wallet-balance-card strong {
    display: inline-block;
    margin-top: 4px;
    font-size: clamp(2.1rem, 6vw, 4rem);
    line-height: 1.2;
}

.wallet-balance-card small {
    display: inline-block;
    margin-right: 8px;
}

.wallet-balance-secondary {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.86rem;
}

.wallet-balance-meta {
    min-width: 150px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 15px;
    text-align: center;
}

.wallet-balance-meta strong {
    display: block;
    font-size: 1.1rem;
}

.wallet-balance-side {
    display: grid;
    justify-items: end;
    gap: 14px;
}

.wallet-balance-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.wallet-tabs {
    margin: 0 0 20px;
}

.wallet-tab-panel {
    display: block;
    min-width: 0;
}

.wallet-page > .wallet-tab-panel {
    margin: 0;
}

.wallet-tab-panel[hidden] {
    display: none !important;
}

.wallet-transaction-stack {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.wallet-transaction-section {
    margin: 0;
}

.wallet-gift-panel {
    display: grid;
    margin: 0;
    gap: 16px;
}

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

.wallet-gift-actions.gift-code-redeem-only,
.admin-gift-layout.gift-code-redeem-only {
    grid-template-columns: minmax(0, 1fr);
}

.wallet-gift-actions .inline-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
}

.wallet-gift-actions .inline-form input,
.wallet-gift-actions .inline-form select {
    min-width: 0;
    flex: 1 1 150px;
}

.wallet-gift-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.wallet-history {
    overflow: hidden;
}

.wallet-transaction-filter {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.wallet-filter-button {
    min-height: 34px;
    padding: 5px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--muted);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 160ms ease,
        background 160ms ease,
        color 160ms ease;
}

.wallet-filter-button:hover,
.wallet-filter-button:focus-visible {
    border-color: var(--accent);
    color: var(--primary);
    outline: none;
}

.wallet-filter-button.is-active,
.wallet-filter-button[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--primary) 36%, var(--line));
    background: color-mix(in srgb, var(--accent) 18%, var(--surface));
    color: var(--primary);
}

.wallet-filter-empty {
    padding: 28px 20px;
    color: var(--muted);
    text-align: center;
}

[data-paginate-list] > [hidden],
.list-pagination[hidden] {
    display: none !important;
}

.list-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 12px;
    color: var(--muted);
    font-size: 0.86rem;
}

.list-pagination-button {
    min-height: 40px;
    padding: 7px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-soft);
    color: var(--primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.list-pagination-button:disabled {
    opacity: 0.45;
    cursor: default;
}

.list-pagination-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.list-pagination-status {
    flex-basis: 100%;
    text-align: center;
}

.list-pagination-numbers {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
}

.list-pagination-number {
    display: inline-flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 50%;
    line-height: 1;
}

.list-pagination-number[aria-current="page"] {
    background: var(--primary);
    color: var(--surface);
}

.panel-heading-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
}

.data-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.data-table th,
.data-table td {
    padding: 13px 12px;
    border-top: 1px solid var(--line);
    text-align: right;
    vertical-align: middle;
}

.data-table th {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.data-table td small {
    display: block;
    color: var(--muted);
}

.transaction-pill {
    display: inline-flex;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
}

.transaction-credit {
    background: #e6f6ec;
    color: var(--success);
}

.transaction-debit {
    background: #fff0ef;
    color: var(--danger);
}

.amount-credit {
    color: var(--success);
    font-weight: 800;
}

.amount-debit {
    color: var(--danger);
    font-weight: 800;
}

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

.online-payment-card {
    grid-column: 1 / -1;
    grid-row: 1;
}

.gift-code-card {
    grid-column: 1;
    grid-row: 2;
}

.card-to-card-card {
    grid-column: 2;
    grid-row: 2;
}

.gateway-picker {
    min-width: 0;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
}

.gateway-picker legend {
    margin-bottom: 10px;
    color: var(--primary-dark);
    font-size: 0.86rem;
    font-weight: 800;
}

.gateway-picker-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 10px;
}

.gateway-option {
    position: relative;
    display: grid;
    place-items: center;
    gap: 5px;
    min-height: 116px;
    padding: 12px 8px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
    cursor: pointer;
    text-align: center;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.gateway-option:not(.is-disabled):hover {
    transform: translateY(-2px);
    border-color: var(--primary);
}

.gateway-option:has(input:checked) {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(74, 92, 72, 0.14);
}

.gateway-option:has(input:focus-visible) {
    outline: 3px solid color-mix(in srgb, var(--primary) 28%, transparent);
    outline-offset: 2px;
}

.gateway-option input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
}

.gateway-option-mark {
    display: grid;
    inline-size: 82px;
    block-size: 58px;
    place-items: center;
    padding: 7px;
    border: 1px solid color-mix(in srgb, var(--gateway-color, var(--primary)) 20%, var(--line));
    border-radius: 14px;
    background: #fff;
}

.gateway-option-logo {
    display: block;
    inline-size: 68px;
    block-size: 42px;
    object-fit: contain;
}

.gateway-option-aqayepardakht .gateway-option-mark {
    padding: 3px;
}

.gateway-option-aqayepardakht .gateway-option-logo {
    inline-size: 52px;
    block-size: 52px;
    object-position: center;
}

.gateway-option-name {
    color: var(--primary-dark);
    font-size: 0.78rem;
    font-weight: 800;
}

.gateway-option-status {
    color: var(--success);
    font-size: 0.68rem;
    font-weight: 700;
}

.gateway-option.is-disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

.gateway-option.is-disabled .gateway-option-logo {
    filter: grayscale(1);
    opacity: 0.58;
}

.gateway-option.is-disabled .gateway-option-status {
    color: var(--muted);
}

.gateway-option-behpardakht { --gateway-color: #d71920; }
.gateway-option-zarinpal { --gateway-color: #f7b500; }
.gateway-option-snapp_pay { --gateway-color: #00b862; }
.gateway-option-digipay { --gateway-color: #1f66d1; }
.gateway-option-balepay { --gateway-color: #1677f2; }
.gateway-option-aqayepardakht { --gateway-color: #7a3fd0; }
.gateway-option-payping { --gateway-color: #138eae; }

@media (max-width: 820px) {
    .online-payment-card {
        grid-column: auto;
        grid-row: auto;
    }

    .gift-code-card,
    .card-to-card-card {
        grid-column: auto;
        grid-row: auto;
    }
}

@media (max-width: 600px) {
    .deposit-tracking-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 54px;
        align-items: end;
        column-gap: 10px;
        margin-bottom: 18px;
    }

    .deposit-tracking-row > .field:first-child {
        min-width: 0;
        margin-bottom: 0;
    }

    .deposit-receipt-field {
        display: contents;
    }

    .deposit-receipt-field .ticket-file-input {
        grid-column: 2;
        grid-row: 1;
        width: 54px;
        height: 54px;
        border-radius: 14px;
    }

    .deposit-receipt-field .ticket-file-selection,
    .deposit-receipt-field small {
        grid-column: 1 / -1;
        min-width: 0;
        max-width: 100%;
        margin-top: 8px;
    }
}

.admin-gift-layout,
.admin-note-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 20px;
}

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

.admin-note-card {
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
}

.admin-note-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.admin-note-card h3 {
    margin: 7px 0 0;
    color: var(--primary-dark);
    font-size: 1.05rem;
}

.admin-note-card p {
    margin: 0;
    color: var(--muted);
    white-space: pre-wrap;
}

.admin-note-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
    color: var(--muted);
    font-size: 0.78rem;
}

.chat-composer-tools {
    position: relative;
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.emoji-toggle {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface-soft);
    cursor: pointer;
    font-size: 1.2rem;
}

.emoji-toggle:hover {
    border-color: var(--accent);
    background: var(--surface-contrast);
}

.emoji-picker {
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: calc(100% + 8px);
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    width: 252px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.emoji-picker[hidden] {
    display: none;
}

.emoji-picker button {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    font-size: 1.15rem;
}

.emoji-picker button:hover {
    background: var(--surface-contrast);
}

.referral-panel {
    margin-bottom: 18px;
}

.referral-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tournament-game-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 20px;
}

.referral-code-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 18px;
    border: 1px dashed var(--accent);
    border-radius: 16px;
    background: #fffaf5;
}

.referral-code-box strong {
    color: var(--primary-dark);
    font-size: clamp(1.35rem, 4vw, 2rem);
    letter-spacing: 0.08em;
}

.friend-search-form {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

.friend-search-control {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}

.friend-search-form input {
    flex: 1;
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 13px;
    outline: 0;
    background: var(--surface-soft);
}

.friend-search-form input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(201, 139, 83, 0.16);
}

.friend-search-form.is-loading input {
    padding-inline-end: 48px;
}

.friend-search-form.is-loading input::-webkit-search-cancel-button {
    visibility: hidden;
}

.friend-search-loader {
    position: absolute;
    top: 50%;
    inset-inline-end: 16px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    border: 2px solid color-mix(in srgb, var(--primary) 22%, transparent);
    border-top-color: var(--primary);
    border-radius: 50%;
    pointer-events: none;
    animation: friend-search-spin 680ms linear infinite;
}

.friend-search-loader[hidden] {
    display: none;
}

@keyframes friend-search-spin {
    to {
        transform: rotate(360deg);
    }
}

.friend-results,
.friend-list {
    display: grid;
    gap: 10px;
}

.friend-results[hidden] {
    display: none;
}

.friend-results-scroll {
    max-block-size: 410px;
    padding-inline-end: 5px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--primary) 42%, transparent) transparent;
}

.friend-results-scroll:focus-visible {
    border-radius: 12px;
    outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
    outline-offset: 3px;
}

.friend-results-scroll::-webkit-scrollbar {
    width: 7px;
}

.friend-results-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 42%, transparent);
}

.friend-results-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.friend-search-error h2 {
    color: var(--danger);
}

.friends-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.user-result,
.friend-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface-soft);
}

.friend-identity {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.friend-identity-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
    text-align: start;
}

.friend-identity-copy > [dir="ltr"] {
    max-width: 100%;
    overflow: hidden;
    justify-self: start;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-avatar {
    display: block;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border: 2px solid color-mix(in srgb, var(--accent) 42%, var(--line));
    border-radius: 50%;
    background: var(--surface-contrast);
    object-fit: cover;
}

.friend-avatar-trigger {
    display: block;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.friend-avatar-trigger:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}

.friend-avatar-placeholder {
    display: grid;
    place-items: center;
    color: var(--primary);
    font-size: 1.3rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.user-result span,
.friend-card span,
.user-result small,
.friend-card small {
    color: var(--muted);
    font-size: 0.82rem;
}

.friend-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.friend-actions > form {
    margin: 0;
}

.friend-request-list--outgoing .friend-card {
    flex-direction: row;
    align-items: center;
}

.friend-request-list--outgoing .friend-actions {
    width: auto;
}

.friend-request-list--outgoing .friend-identity-copy > .status-pill {
    justify-self: start;
}

.game-invite-list {
    display: grid;
    gap: 10px;
}

.friends-challenge-panel .game-invite-open-button,
.game-invite-outgoing-card > .btn {
    inline-size: 140px;
    max-inline-size: 100%;
    text-align: center;
}

.game-invite-outgoing-card .friend-identity-copy > span:last-child {
    overflow-wrap: anywhere;
}

.backgammon-room-shell .game-invitation-waiting,
.chess-room-shell .game-invitation-waiting {
    width: 100%;
    max-width: 680px;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    margin-inline: auto;
    align-self: start;
    overflow: auto;
    overflow-wrap: anywhere;
}

.game-invite-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 14px 15px;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
    border-radius: 15px;
    background: var(--surface-soft);
}

.game-invite-item .friend-identity-copy,
.game-invite-item > .game-invite-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.game-invite-item span,
.game-invite-item small {
    color: var(--muted);
    font-size: 0.82rem;
}

.game-invite-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.game-invite-form {
    display: grid;
    gap: 20px;
}

.game-invite-error {
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line));
    border-radius: 11px;
    background: color-mix(in srgb, var(--danger) 9%, var(--surface));
    color: var(--danger);
}

/* Challenge composer: mounted directly under body like the public player
 * profile so dashboard scroll containers cannot clip it below the app chrome. */
.site-content-modal.game-invite-modal {
    z-index: 1100;
    place-items: center;
    padding: 24px;
}

.game-invite-modal .site-content-modal-backdrop {
    background: rgb(12 15 23 / 62%);
    -webkit-backdrop-filter: blur(12px) saturate(82%);
    backdrop-filter: blur(12px) saturate(82%);
}

.site-content-modal-dialog.game-invite-dialog {
    display: flex;
    flex-direction: column;
    width: min(100%, 560px);
    max-height: calc(100dvh - 48px);
    overflow: hidden;
    padding: 0;
    border-radius: 28px;
    color: var(--ink);
    box-shadow: 0 24px 80px rgb(0 0 0 / 25%);
    animation: public-profile-dialog-in 180ms ease both;
}

.game-invite-topline {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    min-height: 76px;
    padding: 20px 28px;
    padding-left: 82px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.game-invite-topline-mark {
    color: var(--primary);
    font-size: 1.3rem;
}

.game-invite-close {
    z-index: 3;
    top: 16px;
    right: auto;
    left: 20px;
    width: 44px;
    height: 44px;
    background: var(--surface);
    color: var(--ink);
    font-size: 1.5rem;
}

html[data-language="en"] .game-invite-close {
    right: auto;
    left: 20px;
}

.game-invite-scroll {
    min-height: 0;
    margin: 0 8px 14px;
    padding: 0 20px 10px;
    overflow: auto;
    overscroll-behavior: contain;
}

.game-invite-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 0 20px;
}

.game-invite-avatar {
    display: grid;
    flex: 0 0 76px;
    width: 76px;
    height: 76px;
    place-items: center;
    overflow: hidden;
    border: 4px solid var(--surface);
    outline: 1px solid var(--line);
    border-radius: 23px;
    background: var(--surface-soft);
    color: var(--primary);
    font-size: 2.3rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

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

.game-invite-hero-copy {
    min-width: 0;
}

.game-invite-hero-copy .eyebrow {
    margin: 0 0 4px;
}

.game-invite-hero-copy h2 {
    margin: 0 0 5px;
    color: var(--ink);
    font-size: clamp(1.25rem, 3vw, 1.65rem);
}

.game-invite-hero-copy p:last-child {
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
}

.game-invite-hero-copy strong {
    color: var(--primary);
}

.game-invite-section {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.game-invite-section legend,
.game-invite-message-field > span {
    display: block;
    margin-bottom: 10px;
    color: var(--ink);
    font-size: 0.83rem;
    font-weight: 800;
}

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

.game-invite-game-choice,
.game-invite-point-choice {
    position: relative;
    cursor: pointer;
}

.game-invite-game-choice > input,
.game-invite-point-choice > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.game-invite-game-card {
    display: flex;
    min-height: 86px;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface-soft);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.game-invite-game-choice:hover .game-invite-game-card {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
    transform: translateY(-1px);
}

.game-invite-game-choice.is-disabled {
    cursor: not-allowed;
}

.game-invite-game-choice.is-disabled .game-invite-game-card {
    opacity: 0.48;
    filter: grayscale(0.7);
}

.game-invite-game-choice.is-disabled:hover .game-invite-game-card {
    border-color: var(--line);
    transform: none;
}

.game-invite-game-choice > input:checked + .game-invite-game-card {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 13%, transparent);
}

.game-invite-game-choice > input:focus-visible + .game-invite-game-card,
.game-invite-point-choice > input:focus-visible + span {
    outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent);
    outline-offset: 3px;
}

.game-invite-game-icon {
    display: grid;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 14px;
    background: var(--surface);
    color: var(--primary);
    font-size: 1.7rem;
}

.game-invite-game-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.game-invite-game-copy strong {
    color: var(--ink);
    font-size: 0.94rem;
}

.game-invite-game-copy small {
    color: var(--muted);
    font-size: 0.72rem;
}

.game-invite-choice-check {
    display: grid;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin-inline-start: auto;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: transparent;
    font-size: 0.72rem;
}

.game-invite-game-choice > input:checked + .game-invite-game-card .game-invite-choice-check {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.game-invite-points {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.game-invite-point-choice > span {
    display: grid;
    min-height: 44px;
    place-items: center;
    padding: 8px 6px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.game-invite-point-choice:hover > span {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
}

.game-invite-point-choice > input:checked + span {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.game-invite-point-choice.is-disabled {
    cursor: not-allowed;
}

.game-invite-point-choice.is-disabled > span {
    opacity: 0.38;
    text-decoration: line-through;
}

.game-invite-message-field {
    display: block;
}

.game-invite-message-field input {
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
    background: var(--surface-soft);
}

.game-invite-form-actions {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(110px, 1fr);
    gap: 10px;
    margin: 0;
}

.game-invite-form-actions .btn {
    min-height: 48px;
    justify-content: center;
}

.friends-tab.is-locked {
    color: var(--muted);
    background: color-mix(in srgb, var(--line) 34%, transparent);
}

.friends-tab.is-locked:not(:disabled) {
    cursor: pointer;
    opacity: 0.78;
}

.site-content-modal.game-subscription-invite-modal {
    z-index: 1110;
    place-items: center;
    padding: 24px;
}

.game-subscription-invite-modal .site-content-modal-backdrop {
    background: rgb(12 15 23 / 68%);
    -webkit-backdrop-filter: blur(12px) saturate(85%);
    backdrop-filter: blur(12px) saturate(85%);
}

.site-content-modal-dialog.game-subscription-invite-dialog {
    width: min(100%, 500px);
    overflow: hidden;
    padding: 42px 34px 32px;
    text-align: center;
    box-shadow: 0 24px 80px rgb(0 0 0 / 28%);
    animation: public-profile-dialog-in 180ms ease both;
}

.game-subscription-invite-close,
html[data-language="en"] .game-subscription-invite-close {
    top: 16px;
    right: auto;
    left: 18px;
}

.game-subscription-invite-icon {
    display: grid;
    width: 78px;
    height: 78px;
    margin: 0 auto 18px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line));
    border-radius: 24px;
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    color: var(--primary);
    font-size: 2.2rem;
    box-shadow: 0 12px 32px color-mix(in srgb, var(--primary) 15%, transparent);
}

.game-subscription-invite-dialog .eyebrow {
    margin: 0 0 6px;
}

.game-subscription-invite-dialog h2 {
    margin-bottom: 12px;
    color: var(--ink);
    font-size: clamp(1.35rem, 4vw, 1.8rem);
}

.game-subscription-invite-dialog > p:not(.eyebrow) {
    margin: 0;
    color: var(--muted);
    line-height: 1.9;
}

.game-subscription-invite-benefits {
    display: grid;
    gap: 9px;
    margin: 24px 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface-soft);
    text-align: start;
}

.game-subscription-invite-benefits span {
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 700;
}

.game-subscription-invite-dialog .form-actions {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(110px, 1fr);
    gap: 10px;
    margin: 0;
}

.game-subscription-invite-dialog .form-actions .btn {
    min-height: 48px;
    justify-content: center;
}

@media (min-width: 761px) {
    .dashboard-shell-body > .game-invite-modal {
        top: var(--game-invite-shell-top, 0px);
        bottom: var(--game-invite-shell-bottom, 0px);
        grid-template-rows: minmax(0, 1fr);
        padding: 12px 24px;
    }

    .dashboard-shell-body > .game-invite-modal > .game-invite-dialog {
        max-height: 100%;
    }
}

@media (max-width: 760px) {
    .site-content-modal.game-invite-modal {
        padding:
            calc(14px + env(safe-area-inset-top))
            calc(12px + env(safe-area-inset-right))
            calc(14px + env(safe-area-inset-bottom))
            calc(12px + env(safe-area-inset-left));
    }

    .site-content-modal-dialog.game-invite-dialog {
        width: min(100%, 440px);
        max-height: calc(
            100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)
        );
        border-radius: 22px;
    }

    .game-invite-topline {
        min-height: 64px;
        padding: 14px 18px;
        padding-left: 68px;
    }

    .game-invite-close {
        top: 10px;
        right: auto;
        left: 14px;
    }

    .site-content-modal.game-subscription-invite-modal {
        align-items: end;
        padding:
            calc(14px + env(safe-area-inset-top))
            calc(12px + env(safe-area-inset-right))
            calc(14px + env(safe-area-inset-bottom))
            calc(12px + env(safe-area-inset-left));
    }

    .site-content-modal-dialog.game-subscription-invite-dialog {
        width: 100%;
        padding: 38px 20px 22px;
        border-radius: 22px;
    }

    .game-subscription-invite-dialog .form-actions {
        grid-template-columns: 1fr;
    }

    .game-invite-scroll {
        margin-inline: 5px;
        padding-inline: 13px;
    }

    .game-invite-hero {
        gap: 13px;
        padding-block: 18px;
    }

    .game-invite-avatar {
        flex-basis: 62px;
        width: 62px;
        height: 62px;
        border-radius: 18px;
        font-size: 1.9rem;
    }

    .game-invite-game-card {
        min-height: 78px;
        gap: 8px;
        padding: 11px;
    }

    .game-invite-game-icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
        border-radius: 12px;
        font-size: 1.35rem;
    }

    .game-invite-choice-check {
        display: none;
    }
}

@media (max-width: 390px) {
    .game-invite-game-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .game-invite-game-card {
        min-height: 66px;
    }

    .game-invite-points {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.friend-wallet-transfer {
    position: relative;
}

.friend-wallet-transfer > summary {
    list-style: none;
}

.friend-wallet-transfer > summary::-webkit-details-marker {
    display: none;
}

.friend-wallet-transfer-form {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    right: 0;
    width: min(300px, calc(100vw - 40px));
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.friend-wallet-transfer-form .field {
    margin: 0;
}

.friend-wallet-transfer-form label {
    font-size: 0.78rem;
}

.notification-widget {
    position: relative;
}

.notification-toggle {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--primary);
    cursor: pointer;
    font-weight: 700;
}

.notification-toggle:hover {
    border-color: var(--accent);
    background: var(--surface-soft);
}

.notification-bell {
    font-size: 1rem;
    line-height: 1;
}

.notification-badge {
    display: inline-flex;
    min-width: 22px;
    min-height: 22px;
    align-items: center;
    justify-content: center;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
}

.notification-dropdown {
    position: fixed;
    z-index: 950;
    top: 78px;
    right: max(14px, calc((100vw - 1120px) / 2));
    left: auto;
    width: min(380px, calc(100vw - 28px));
    max-width: calc(100vw - 28px);
    max-height: calc(100vh - 96px);
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.notification-dropdown[hidden] {
    display: none;
}

.notification-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
}

.notification-dropdown-header strong {
    color: var(--primary-dark);
}

.notification-dropdown-header a {
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 800;
}

.notification-preview-list {
    display: grid;
    max-height: 390px;
    overflow-y: auto;
    padding: 0;
}

.notification-preview-item {
    display: block;
    padding: 13px 16px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    border-radius: 0;
    background: transparent;
    color: inherit;
    transition: background 160ms ease;
}

.notification-preview-item:last-child {
    border-bottom: 0;
}

.notification-preview-item:hover,
.notification-preview-item.is-unread {
    background: color-mix(in srgb, var(--surface-soft) 72%, transparent);
}

.notification-preview-item.is-unread {
    border-right: 0;
}

.notification-preview-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.notification-preview-title strong {
    color: var(--primary-dark);
    font-size: 0.92rem;
}

.notification-preview-title time {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.7rem;
}

.notification-preview-item p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.7;
}

.notification-empty {
    padding: 28px 16px;
    color: var(--muted);
    text-align: center;
    font-size: 0.86rem;
}

.presence-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.presence-status.is-online {
    color: var(--success);
}

.presence-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c4b9b0;
}

.presence-status.is-online .presence-dot {
    background: var(--success);
}

.unread-badge {
    display: inline-flex;
    min-width: 24px;
    min-height: 24px;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 0.76rem;
    font-weight: 800;
}

.chat-modal-backdrop {
    position: fixed;
    z-index: 1100;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgb(12 15 23 / 68%);
    -webkit-backdrop-filter: blur(12px) saturate(85%);
    backdrop-filter: blur(12px) saturate(85%);
}

.chat-modal-backdrop[hidden] {
    display: none;
}

.chat-modal {
    display: flex;
    width: min(100%, 580px);
    max-height: min(760px, calc(100dvh - 40px));
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: 0 24px 80px rgb(0 0 0 / 28%);
    animation: public-profile-dialog-in 180ms ease both;
}

.chat-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 22px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
}

.chat-modal-header .eyebrow {
    margin-bottom: 5px;
    font-size: 0.8rem;
}

.chat-modal-header h2 {
    margin: 0 0 4px;
    color: var(--primary-dark);
    font-size: 1.25rem;
}

.chat-close-button {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 0;
    border-radius: 12px;
    background: #f5e4d5;
    color: var(--primary);
    cursor: pointer;
    font-size: 1.65rem;
    line-height: 1;
}

.chat-messages {
    display: flex;
    min-height: 280px;
    max-height: 440px;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    padding: 18px;
    background: #fffdfb;
}

.chat-empty {
    margin: auto;
    color: var(--muted);
    text-align: center;
}

.chat-message {
    display: flex;
    max-width: 82%;
    flex-direction: column;
    gap: 3px;
    padding: 9px 12px;
    border-radius: 15px;
    background: #f4ece5;
    color: var(--ink);
}

.chat-message.is-mine {
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    background: var(--primary);
    color: #fff;
}

.chat-message:not(.is-mine) {
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.chat-message-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.chat-message-meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    color: var(--muted);
    font-size: 0.7rem;
}

.chat-message.is-mine .chat-message-meta {
    color: rgba(255, 255, 255, 0.76);
}

.chat-message-delete {
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
}

.chat-message-delete:hover {
    text-decoration: underline;
}

.chat-error {
    margin: 10px 18px 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: #fff0ef;
    color: var(--danger);
    font-size: 0.82rem;
}

.chat-form {
    display: grid;
    gap: 9px;
    padding: 14px 18px 18px;
    border-top: 1px solid var(--line);
}

.chat-form textarea {
    width: 100%;
    resize: vertical;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    outline: 0;
    background: var(--surface-soft);
}

.chat-form textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(201, 139, 83, 0.16);
}

.chat-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.chat-form-footer small {
    color: var(--muted);
    font-size: 0.75rem;
}

.notification-page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* Notification center: keep the list and its settings in separate, readable sections. */
.notification-section-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -8px 0 24px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
}

.notification-section-tab {
    min-height: 42px;
    padding: 9px 18px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.notification-section-tab:hover,
.notification-section-tab:focus-visible {
    color: var(--primary-dark);
    background: rgba(255, 255, 255, .72);
}

.notification-section-tab.is-active {
    color: var(--primary-dark);
    background: var(--surface);
    box-shadow: 0 4px 14px rgba(70, 39, 25, .08);
}

.notification-panel-view {
    display: grid;
    gap: 18px;
}

.notification-panel-view[hidden] {
    display: none !important;
}

.push-notification-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.push-notification-copy {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.push-notification-icon {
    display: grid;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 15px;
    background: #f5e4d5;
    font-size: 1.3rem;
}

.push-notification-copy h2 {
    margin: 0 0 5px;
    color: var(--primary-dark);
    font-size: 1.06rem;
}

.push-notification-copy p {
    margin: 0;
    color: var(--muted);
}

.push-notification-status {
    margin-top: 7px !important;
    font-size: 0.82rem;
    font-weight: 800;
}

.push-notification-status[data-state="enabled"] {
    color: var(--success);
}

.push-notification-status[data-state="blocked"],
.push-notification-status[data-state="error"],
.push-notification-status[data-state="unconfigured"] {
    color: var(--danger);
}

.push-notification-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}

.push-notification-ios-help {
    flex-basis: 100%;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(201, 139, 83, 0.38);
    border-radius: 12px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 0.82rem;
}

/* راهنمای فعال‌سازی خودکار اعلان برای کاربران واردشده به پنل. */
.push-auto-prompt {
    position: fixed;
    z-index: 1200;
    inset-inline: 18px;
    bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 760px;
    margin-inline: auto;
    padding: 15px 17px;
    border: 1px solid rgba(201, 139, 83, .45);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 14px 34px rgba(55, 31, 20, .18);
}

.push-auto-prompt[hidden] {
    display: none !important;
}

.push-auto-prompt-copy {
    min-width: 0;
}

.push-auto-prompt-copy strong {
    display: block;
    margin-bottom: 4px;
    color: var(--primary-dark);
}

.push-auto-prompt-copy p {
    margin: 0;
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.7;
}

.push-auto-prompt-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 640px) {
    .push-auto-prompt {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        inset-inline: 10px;
        bottom: 10px;
        padding: 14px;
    }

    .push-auto-prompt-actions {
        justify-content: stretch;
    }

    .push-auto-prompt-actions .btn {
        flex: 1 1 0;
    }
}

.push-debug-panel {
    min-width: 0;
    width: 100%;
    flex-basis: 100%;
    margin-top: 3px;
    padding: 10px 12px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: var(--surface-soft);
}

.push-debug-panel summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 800;
}

.push-debug-panel pre {
    max-height: 260px;
    margin: 10px 0 0;
    overflow: auto;
    direction: ltr;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--muted);
    font: 0.72rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.notification-preferences-form {
    display: grid;
    gap: 15px;
}

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

.notification-preference-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
    cursor: pointer;
}

.notification-preference-option input {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 2px;
    accent-color: var(--primary);
}

.notification-preference-option span {
    display: grid;
    gap: 4px;
}

.notification-preference-option small {
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.7;
}

.notification-page-list {
    display: grid;
    gap: 18px;
}

.notification-page-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 15px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: var(--surface);
}

.notification-all-view > .empty-state {
    margin: 0;
}

@media (max-width: 620px) {
    .notification-section-nav {
        width: 100%;
        margin-top: -2px;
        margin-bottom: 18px;
    }

    .notification-section-tab {
        flex: 1 1 0;
        padding-inline: 10px;
        font-size: .85rem;
    }

}

.notification-page-item.is-unread {
    border-color: rgba(201, 139, 83, 0.72);
    background: #fffaf5;
    box-shadow: 0 8px 24px rgba(70, 39, 25, 0.05);
}

.notification-page-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 13px;
    background: #f5e4d5;
    font-size: 1.2rem;
}

.notification-page-content {
    min-width: 0;
}

.notification-page-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.notification-type-label {
    display: block;
    margin-bottom: 2px;
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 800;
}

.notification-page-title-row h2 {
    margin: 0;
    color: var(--primary-dark);
    font-size: 1.05rem;
}

.notification-page-title-row time {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.76rem;
}

.notification-page-content > p {
    margin: 7px 0 12px;
    color: var(--muted);
}

.bank-destination {
    display: grid;
    gap: 8px;
    margin-bottom: 20px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface-soft);
}

.bank-destination div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.bank-destination span {
    color: var(--muted);
}

.bank-destination strong {
    color: var(--primary-dark);
}

.text-link {
    color: var(--primary);
    font-weight: 800;
}

.admin-table {
    min-width: 1100px;
}

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.admin-stat-card {
    display: grid;
    gap: 4px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 35px rgba(70, 39, 25, 0.06);
}

.admin-stat-card span,
.admin-stat-card small {
    color: var(--muted);
    font-size: 0.82rem;
}

.admin-stat-card strong {
    color: var(--primary-dark);
    font-size: 1.75rem;
    line-height: 1.35;
}

.admin-stat-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.admin-monitoring-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.admin-monitoring-clock {
    display: grid;
    min-width: 165px;
    gap: 2px;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
    text-align: center;
}

.admin-monitoring-clock span,
.admin-monitoring-clock small {
    color: var(--muted);
    font-size: 0.72rem;
}

.admin-monitoring-clock strong {
    color: var(--primary-dark);
    direction: ltr;
    font-family: Consolas, monospace;
    font-size: 1.25rem;
}

.dashboard-monitoring-clock {
    grid-column: 1 / -1;
    justify-self: end;
}

.feedback-history-list,
.feedback-admin-list {
    display: grid;
    gap: 14px;
}

.feedback-history-item,
.feedback-admin-item {
    display: grid;
    gap: 10px;
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
}

.feedback-history-heading,
.gateway-admin-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.feedback-history-heading h3 {
    margin: 8px 0 0;
    color: var(--primary-dark);
}

.feedback-history-item p,
.feedback-admin-item p {
    margin: 0;
    color: var(--muted);
}

.feedback-history-item > small,
.feedback-page-url {
    color: var(--muted);
    font-size: 0.75rem;
}

.feedback-admin-sender {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    color: var(--muted);
    font-size: 0.8rem;
}

.feedback-admin-sender strong {
    color: var(--primary-dark);
}

.feedback-admin-action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.feedback-admin-action input {
    min-width: min(100%, 250px);
    flex: 1 1 250px;
}

.feedback-admin-note {
    padding: 10px 12px;
    border-right: 3px solid var(--accent);
    border-radius: 9px;
    background: var(--surface-contrast);
    color: var(--muted);
    font-size: 0.82rem;
}

.gateway-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 18px;
    margin-bottom: 20px;
}

.gateway-admin-card {
    display: grid;
    gap: 15px;
}

.gateway-key-settings {
    min-width: 0;
}

.gateway-key-settings > summary {
    cursor: pointer;
}

.gateway-key-settings[open] > summary {
    margin-bottom: 12px;
}

.gateway-key-settings .form-grid {
    grid-template-columns: minmax(0, 1fr);
}

.gateway-admin-card.is-usable {
    border-color: rgba(24, 121, 78, 0.42);
}

.gateway-admin-meta {
    display: grid;
    gap: 8px;
    margin: 0;
}

.gateway-admin-meta div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}

.gateway-admin-meta dt {
    color: var(--muted);
    font-size: 0.8rem;
}

.gateway-admin-meta dd {
    margin: 0;
    color: var(--primary-dark);
    font-size: 0.8rem;
    font-weight: 800;
    text-align: end;
}

.maintenance-page {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 30px 20px;
}

.maintenance-card {
    width: min(620px, 100%);
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: clamp(28px, 6vw, 58px);
    border: 1px solid var(--line);
    border-radius: 28px;
    background: var(--surface);
    box-shadow: var(--shadow);
    text-align: center;
}

.maintenance-logo {
    width: 76px;
    height: 76px;
    object-fit: contain;
    padding: 6px;
    border-radius: 22px;
    background: radial-gradient(circle, rgba(223, 164, 62, 0.46) 0%, rgba(102, 50, 18, 0.26) 44%, transparent 76%);
    filter: drop-shadow(0 0 14px rgba(223, 164, 62, 0.42));
}

.maintenance-icon {
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-contrast);
    color: var(--accent);
    font-family: Arial, sans-serif;
    font-size: 2.6rem;
}

.maintenance-card h1 {
    margin: 0;
    color: var(--primary-dark);
}

.maintenance-message {
    max-width: 480px;
    margin: 0;
    color: var(--muted);
}

.maintenance-actions {
    justify-content: center;
    margin-top: 8px;
}

.maintenance-admin-panel {
    max-width: 760px;
}

.cache-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.cache-stat-card {
    display: grid;
    gap: 7px;
    min-height: 148px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface-soft);
    box-shadow: 0 8px 24px rgba(70, 39, 25, 0.05);
}

.cache-stat-card.is-healthy { border-color: rgba(57, 130, 91, 0.35); }
.cache-stat-card.is-accent { border-color: rgba(201, 139, 83, 0.5); background: rgba(201, 139, 83, 0.11); }
.cache-stat-card.is-muted { opacity: 0.82; }
.cache-stat-kicker { color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.cache-stat-card strong { color: var(--primary-dark); font-size: 2rem; line-height: 1; }
.cache-stat-card small, .cache-stat-card > span:last-child { color: var(--muted); }

.cache-manager-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.cache-action-form, .cache-settings-form { display: grid; gap: 13px; }
.cache-action-form + .cache-action-form { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.cache-action-form small { color: var(--muted); line-height: 1.7; }
.cache-fields-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cache-fields-row input { width: 100%; min-height: 48px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); color: var(--ink); }
.cache-detail-panel { margin-top: 20px; }
.cache-detail-list { display: grid; gap: 0; }
.cache-detail-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 14px 0; border-top: 1px solid var(--line); }
.cache-detail-row > div { display: grid; gap: 5px; min-width: 0; }
.cache-detail-row code { color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.cache-detail-row > span { color: var(--muted); white-space: nowrap; }

@media (max-width: 640px) {
    .cache-fields-row { grid-template-columns: 1fr; }
    .cache-detail-row { align-items: flex-start; flex-direction: column; gap: 8px; }
    .cache-detail-row > span { white-space: normal; }
}

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

.plain-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-right: 20px;
    color: var(--muted);
}

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

.admin-filter-form input,
.admin-filter-form select,
.admin-filter-form .btn {
    min-height: 46px;
}

.admin-filter-form input {
    min-width: min(100%, 280px);
    flex: 1 1 260px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 13px;
    outline: 0;
    background: var(--surface-soft);
}

.admin-filter-form input:focus,
.admin-filter-form select:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(201, 139, 83, 0.16);
}

.admin-filter-form select,
.admin-actions select,
.field select,
.field textarea {
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    outline: 0;
    background: var(--surface-soft);
    color: var(--ink);
}

.field select {
    width: 100%;
    min-height: 54px;
}

.admin-actions select {
    min-height: 40px;
    max-width: 170px;
}

.field textarea {
    width: 100%;
    resize: vertical;
}

/* Email marketing directory */
.marketing-admin-page {
    display: grid;
    gap: 20px;
}

.marketing-admin-page > .page-heading,
.marketing-admin-page > .panel,
.marketing-admin-page > .admin-stat-grid,
.marketing-admin-page > .alert {
    margin-bottom: 0;
}

.marketing-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.marketing-section-heading {
    align-items: flex-start;
    margin-bottom: 18px;
}

.marketing-limit-badge {
    border: 1px solid var(--line);
    background: var(--surface-soft);
    color: var(--muted);
    white-space: nowrap;
}

.marketing-import-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 14px;
}

.marketing-import-form .field,
.marketing-filter-form .field {
    margin-bottom: 0;
}

.marketing-file-field input[type="file"] {
    width: 100%;
    min-height: 50px;
    padding: 7px;
    border: 1px dashed color-mix(in srgb, var(--primary) 34%, var(--line));
    border-radius: 13px;
    background: var(--surface-soft);
    color: var(--ink);
}

.marketing-file-field input[type="file"]::file-selector-button {
    margin-inline-end: 10px;
    padding: 8px 13px;
    border: 0;
    border-radius: 9px;
    background: var(--primary);
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.marketing-file-field small {
    display: block;
    margin-top: 7px;
    color: var(--muted);
}

.marketing-import-result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--success) 30%, var(--line));
    border-radius: 13px;
    background: color-mix(in srgb, var(--success) 7%, var(--surface));
    color: var(--muted);
    font-size: .86rem;
}

.marketing-import-result strong {
    color: var(--ink);
}

.marketing-filter-form {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(150px, .28fr) minmax(150px, .28fr) auto;
    align-items: end;
    margin-bottom: 18px;
}

.marketing-filter-form label {
    display: block;
    margin-bottom: 7px;
    color: var(--primary-dark);
    font-size: .82rem;
    font-weight: 800;
}

.marketing-filter-form input,
.marketing-filter-form select {
    width: 100%;
    min-width: 0;
}

.marketing-filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.marketing-table-wrap {
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface);
}

.marketing-contacts-table {
    width: 100%;
    min-width: 980px;
    table-layout: fixed;
}

.marketing-contacts-table th,
.marketing-contacts-table td {
    padding: 14px 12px;
    border-top: 1px solid var(--line);
    text-align: right;
    vertical-align: middle;
}

.marketing-contacts-table thead th {
    border-top: 0;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: .8rem;
    font-weight: 800;
    white-space: nowrap;
}

.marketing-contacts-table tbody tr:hover {
    background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}

.marketing-contacts-table th:nth-child(1) { width: 64px; }
.marketing-contacts-table th:nth-child(2) { width: 180px; }
.marketing-contacts-table th:nth-child(3) { width: 235px; }
.marketing-contacts-table th:nth-child(4) { width: 130px; }
.marketing-contacts-table th:nth-child(5) { width: 120px; }
.marketing-contacts-table th:nth-child(6),
.marketing-contacts-table th:nth-child(7) { width: 155px; }

.marketing-row-number {
    color: var(--muted);
    text-align: center !important;
}

.marketing-contact-cell {
    min-width: 0;
}

.marketing-contact-cell strong,
.marketing-contact-cell small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marketing-contact-cell small {
    margin-top: 4px;
    color: var(--muted);
}

.marketing-email-cell {
    color: var(--ink);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .84rem;
    text-align: left !important;
    overflow-wrap: anywhere;
}

.marketing-source-badge,
.marketing-status-badge {
    justify-content: center;
    min-width: 94px;
    white-space: nowrap;
}

.marketing-source-user {
    background: color-mix(in srgb, #2f80ed 12%, var(--surface));
    color: #2167bd;
}

.marketing-source-import {
    background: color-mix(in srgb, var(--accent) 16%, var(--surface));
    color: var(--primary-dark);
}

.marketing-status-active {
    background: color-mix(in srgb, var(--success) 13%, var(--surface));
    color: var(--success);
}

.marketing-status-unsubscribed {
    background: color-mix(in srgb, var(--muted) 12%, var(--surface));
    color: var(--muted);
}

.marketing-status-invalid {
    background: color-mix(in srgb, var(--danger) 11%, var(--surface));
    color: var(--danger);
}

.marketing-date-cell {
    color: var(--muted);
    font-size: .8rem;
    line-height: 1.65;
    white-space: nowrap;
}

.marketing-empty-state {
    border: 1px dashed var(--line);
    border-radius: 15px;
}

.marketing-pagination {
    align-items: center;
    justify-content: center;
    margin-top: 18px;
}

.marketing-pagination > span {
    color: var(--muted);
    font-size: .85rem;
}

@media (max-width: 1000px) {
    .marketing-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .marketing-filter-form {
        grid-template-columns: minmax(0, 1fr) repeat(2, minmax(145px, .35fr));
    }

    .marketing-filter-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 680px) {
    .marketing-page-heading .page-heading-actions,
    .marketing-page-heading .btn,
    .marketing-import-form .btn,
    .marketing-filter-actions,
    .marketing-filter-actions .btn {
        width: 100%;
    }

    .marketing-stat-grid,
    .marketing-import-form,
    .marketing-filter-form {
        grid-template-columns: 1fr;
    }

    .marketing-section-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .marketing-limit-badge {
        align-self: flex-start;
        white-space: normal;
    }

    .marketing-filter-actions {
        grid-column: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .marketing-import-result {
        align-items: flex-start;
        flex-direction: column;
    }
}

.admin-user-actions {
    min-width: 280px;
}

.admin-user-actions form {
    align-items: center;
}

.admin-role-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
    gap: 18px;
    margin-bottom: 18px;
}

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

.role-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
}

.role-list-item:hover,
.role-list-item.is-selected {
    border-color: var(--accent);
    background: #fff8ee;
}

.role-list-item span:first-child,
.role-list-meta {
    display: grid;
    gap: 2px;
}

.role-list-item small,
.role-list-meta small {
    color: var(--muted);
    font-size: 0.78rem;
}

.role-list-meta {
    text-align: left;
}

.permission-fieldset {
    margin: 0 0 20px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
}

.permission-fieldset legend {
    padding: 0 8px;
    color: var(--primary-dark);
    font-weight: 800;
}

.permission-group {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

.permission-group:last-child {
    margin-bottom: 0;
}

.permission-group h3 {
    margin: 0;
    color: var(--accent);
    font-size: 0.95rem;
}

.permission-option {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 10px;
    border-radius: 11px;
    background: rgba(255, 250, 245, 0.72);
}

.permission-option:hover {
    background: #fff8ee;
}

.permission-option input {
    margin-top: 5px;
}

.permission-option span {
    display: grid;
    gap: 1px;
}

.permission-option small {
    color: var(--muted);
    font-size: 0.78rem;
}

.admin-role-actions {
    justify-content: flex-start;
}

/* Roles workspace refresh */
.roles-page-heading { align-items: flex-start; }
.roles-heading-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.roles-security-note { color:var(--muted); font-size:.82rem; }
.roles-overview-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0 0 18px; }
.roles-overview-card { display:flex; align-items:center; gap:12px; padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:0 5px 18px rgba(30,35,60,.04); }
.roles-overview-card strong { display:block; font-size:1.35rem; color:var(--primary-dark); }
.roles-overview-card small { color:var(--muted); }
.roles-overview-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:#fff1df; color:#b86812; font-size:1.25rem; }
.roles-overview-icon.is-purple { background:#eee9ff; color:#7359c9; } .roles-overview-icon.is-green { background:#e4f7ee; color:#269b67; } .roles-overview-icon.is-orange { background:#fff0e6; color:#d47328; }
.roles-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 18px; padding:6px; border:1px solid var(--line); border-radius:15px; background:var(--surface-soft); }
.roles-tab { padding:10px 14px; border-radius:10px; color:var(--muted); text-decoration:none; font-weight:700; }
.roles-tab span { margin-right:5px; padding:2px 7px; border-radius:20px; background:rgba(0,0,0,.06); font-size:.75rem; }
.roles-tab:hover,.roles-tab.is-active { background:var(--surface); color:var(--primary-dark); box-shadow:0 3px 12px rgba(0,0,0,.06); }
.roles-tab-create { margin-right:auto; color:var(--accent); }
.roles-content-grid { display:grid; grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr); gap:18px; align-items:start; }
.roles-list-panel,.roles-editor-panel { min-width:0; }
.roles-panel-heading,.roles-editor-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.roles-section-kicker { display:block; margin-bottom:4px; color:var(--accent); font-size:.78rem; font-weight:800; }
.roles-count-label { color:var(--muted); font-size:.82rem; }
.role-list-modern { gap:9px; }
.role-list-item-modern { display:grid; grid-template-columns:38px 1fr auto 16px; align-items:center; padding:12px; border-radius:15px; }
.role-avatar { display:grid; place-items:center; width:36px; height:36px; border-radius:11px; font-weight:900; background:#eee9ff; color:#7359c9; }
.role-avatar.is-custom { background:#e4f7ee; color:#269b67; }
.role-list-main { min-width:0; } .role-list-main strong,.role-list-main small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.role-list-arrow { color:var(--muted); font-size:1.3rem; }
.role-status-badge { padding:5px 10px; border-radius:20px; font-size:.76rem; font-weight:800; } .role-status-badge.is-active { background:#e5f7ec; color:#208452; } .role-status-badge.is-inactive { background:#fce8e8; color:#b34b4b; }
.role-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .role-form-wide { grid-column:1/-1; }
.permission-toolbar { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; } .permission-toolbar legend { padding:0; } .permission-tools { display:flex; gap:8px; align-items:center; } .permission-tools input { min-height:38px; width:190px; }
.permission-groups-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; max-height:410px; overflow:auto; padding-left:3px; }
.permission-group { margin:0; padding:10px; border:1px solid var(--line); border-radius:13px; } .permission-group h3 { margin-bottom:8px; }
.permission-option { background:var(--surface-soft); } .btn-sm { padding:8px 10px; font-size:.78rem; }
.roles-editor-placeholder { display:grid; place-items:center; min-height:300px; text-align:center; color:var(--muted); } .roles-editor-placeholder span { font-size:2.5rem; color:var(--accent); }
.roles-empty { display:grid; place-items:center; gap:8px; padding:46px 16px; text-align:center; color:var(--muted); } .roles-empty span { font-size:2rem; color:var(--accent); }
@media (max-width:900px) { .roles-overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .roles-content-grid { grid-template-columns:1fr; } }
@media (max-width:600px) { .roles-overview-grid,.role-form-grid,.permission-groups-grid { grid-template-columns:1fr; } .roles-heading-actions { align-items:stretch; flex-direction:column; } .roles-tab-create { margin-right:0; } }

.role-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.admin-form-block {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.admin-form-block .field {
    flex: 1 1 240px;
    margin-bottom: 0;
}

.admin-actions {
    display: grid;
    gap: 8px;
    min-width: 250px;
}

.admin-actions form {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.admin-actions form input[type="text"] {
    min-width: 150px;
    min-height: 40px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-soft);
}

.btn-danger {
    background: var(--danger);
    color: #fff;
}

.admin-danger-zone {
    margin-top: 1.5rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--danger) 7%, var(--surface));
}

.admin-danger-zone h2 {
    color: var(--danger);
}

.reject-form input {
    min-width: 150px;
    min-height: 40px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-soft);
}

.tax-profile-fields {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.tax-profile-fields .form-grid {
    margin-bottom: 1rem;
}

.tax-profile-fields > .field {
    margin-bottom: 1rem;
}

.accounting-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.accounting-summary-card {
    display: grid;
    gap: 4px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 12px 35px rgba(70, 39, 25, 0.06);
}

.accounting-summary-card span,
.accounting-summary-card small {
    color: var(--muted);
    font-size: 0.82rem;
}

.accounting-summary-card strong {
    color: var(--primary-dark);
    font-size: 1.75rem;
    line-height: 1.35;
}

.accounting-summary-income {
    border-top: 4px solid var(--success);
}

.accounting-summary-expense {
    border-top: 4px solid var(--danger);
}

.accounting-summary-net {
    border-top: 4px solid var(--accent);
}

.accounting-create-panel {
    margin-bottom: 20px;
}

.accounting-owner-name-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.accounting-owner-name-grid input,
.accounting-void-form input {
    min-height: 43px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    outline: 0;
    background: var(--surface-soft);
    color: var(--ink);
}

.accounting-owner-name-grid input:focus,
.accounting-void-form input:focus,
.money-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(201, 139, 83, 0.16);
}

.money-input {
    direction: ltr;
    text-align: left;
    font-variant-numeric: tabular-nums;
}

.accounting-document-table {
    min-width: 1500px;
}

.accounting-account-table {
    min-width: 900px;
}

.accounting-document-table td small {
    display: block;
    color: var(--muted);
}

.accounting-account-table td small {
    display: block;
    color: var(--muted);
}

.status-draft {
    background: #fff8ee;
    color: #9a641d;
}

.status-void {
    background: #fff0ef;
    color: var(--danger);
}

.accounting-amount {
    color: var(--primary-dark);
    font-weight: 800;
    white-space: nowrap;
}

.accounting-description-cell {
    max-width: 260px;
    white-space: normal;
}

.accounting-type {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
}

.accounting-type-income {
    background: #e6f6ec;
    color: var(--success);
}

.accounting-type-expense {
    background: #fff0ef;
    color: var(--danger);
}

.accounting-type-transfer,
.accounting-type-adjustment {
    background: #fff8ee;
    color: #9a641d;
}

.accounting-void-form {
    display: grid;
    min-width: 180px;
    gap: 6px;
}

.accounting-filter-form {
    margin-bottom: 18px;
}

.muted-text {
    color: var(--muted);
}

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

.session-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
}

.session-current {
    border-color: rgba(181, 105, 53, 0.55);
    background: #fffaf5;
}

.session-card-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 14px;
    background: #f5e4d5;
    color: var(--primary);
    font-size: 1.45rem;
    font-weight: 800;
}

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

.session-card-title h3 {
    margin: 0;
    color: var(--primary-dark);
    font-size: 1rem;
}

.session-card-main p {
    margin: 4px 0 9px;
    color: var(--muted);
}

.session-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    color: var(--muted);
    font-size: 0.78rem;
}

.session-meta b {
    color: var(--primary-dark);
    font-weight: 700;
}

.session-online {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
}

.session-online::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c4b9b0;
    content: "";
}

.session-online.is-online {
    color: var(--success);
}

.session-online.is-online::before {
    background: var(--success);
}

.session-revoke-form {
    margin: 0;
}

.session-limit-card {
    max-width: 900px;
    margin: 0 auto;
}

.session-settings-card {
    grid-column: 1 / -1;
}

.session-history-table {
    min-width: 820px;
}

.ticket-layout {
    display: grid;
    grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
    gap: 8px;
}

.ticket-layout > .panel:last-child {
    min-width: 0;
}

.ticket-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}

.ticket-filters input,
.ticket-filters select {
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    outline: 0;
    background: var(--surface-soft);
    color: var(--ink);
}

.ticket-filters input {
    min-width: min(100%, 240px);
    flex: 1 1 240px;
}

.ticket-filters input:focus,
.ticket-filters select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(201, 139, 83, 0.16);
}

@media (max-width: 640px) {
    .ticket-filters {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .ticket-filters input,
    .ticket-filters select,
    .ticket-filters .btn {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        min-height: 44px;
        font-size: 16px;
    }
}

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

.ticket-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface-soft);
    transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.ticket-list-item:hover {
    border-color: var(--accent);
    background: #fff8ee;
    transform: translateY(-2px);
}

.ticket-list-main {
    min-width: 0;
}

.ticket-list-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ticket-list-title strong {
    overflow: hidden;
    color: var(--primary-dark);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-list-title span {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.75rem;
}

.ticket-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.78rem;
}

.ticket-list-badges,
.ticket-detail-badges {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 8px;
}

.status-in_progress,
.status-waiting_user,
.status-waiting_staff,
.status-resolved,
.status-closed {
    background: #fff8ee;
    color: #9a641d;
}

.status-resolved {
    background: #e6f6ec;
    color: var(--success);
}

.status-closed {
    background: #f0ebe7;
    color: var(--muted);
}

.priority-low {
    background: #eef5f0;
    color: #4c765b;
}

.priority-normal {
    background: #f3eee9;
    color: var(--muted);
}

.priority-high {
    background: #fff1df;
    color: #a15e16;
}

.priority-urgent {
    background: #fff0ef;
    color: var(--danger);
}

.ticket-detail-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 35px rgba(70, 39, 25, 0.06);
}

.ticket-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
}

.ticket-detail-header .ticket-meta {
    justify-content: flex-end;
    margin-top: 0;
}

.ticket-conversation {
    display: flex;
    min-height: 260px;
    flex-direction: column;
    gap: 13px;
    padding: 22px;
    background: #fffdfb;
}

.ticket-message {
    max-width: min(86%, 760px);
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: #f5eee8;
}

.ticket-message.is-mine {
    align-self: flex-start;
    border-bottom-left-radius: 5px;
    background: var(--primary);
    color: #fff;
}

.ticket-message.is-staff {
    align-self: flex-end;
    border-bottom-right-radius: 5px;
    background: #fff;
}

.ticket-message.is-internal {
    align-self: stretch;
    border-color: #e9b65c;
    background: #fff8df;
}

.ticket-message-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.ticket-message-header strong {
    color: var(--primary-dark);
    font-size: 0.9rem;
}

.ticket-message.is-mine .ticket-message-header strong {
    color: #fff;
}

.ticket-message-header time {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.7rem;
}

.ticket-message.is-mine .ticket-message-header time {
    color: rgba(255, 255, 255, 0.72);
}

.ticket-message-body {
    overflow-wrap: anywhere;
    white-space: normal;
}

.ticket-detail-actions {
    display: flex;
    justify-content: flex-start;
    padding: 0 22px 18px;
}

.ticket-rating-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 22px 18px;
    padding: 13px 15px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
    border-radius: 15px;
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.ticket-rating-inline > div:first-child {
    display: grid;
    gap: 3px;
}

.ticket-rating-inline strong {
    color: var(--primary-dark);
    font-size: 0.88rem;
}

.ticket-rating-inline small {
    color: var(--muted);
    font-size: 0.73rem;
}

.ticket-rating-stars {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    direction: ltr;
    color: #d7c8bb;
    font-family: Arial, sans-serif;
    line-height: 1;
}

.ticket-rating-stars span,
.ticket-rating-stars button {
    color: inherit;
    font-size: 1.65rem;
    line-height: 1;
}

.ticket-rating-stars span.is-selected,
.ticket-rating-stars button.is-selected,
.ticket-rating-stars button.is-hovered {
    color: #e5a928;
}

.ticket-rating-stars.is-locked {
    cursor: default;
}

.ticket-rating-modal[hidden] {
    display: none;
}

.ticket-rating-modal {
    position: fixed;
    z-index: 1300;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    height: 100vh;
    height: 100dvh;
}

.ticket-rating-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(42, 27, 22, 0.68);
    backdrop-filter: blur(4px);
}

.ticket-rating-dialog {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    max-height: min(720px, calc(100dvh - 40px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 31px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--surface);
    box-shadow: var(--shadow);
    text-align: center;
}

.ticket-rating-close {
    position: absolute;
    top: 13px;
    left: 15px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface-soft);
    color: var(--primary);
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
}

.ticket-rating-icon {
    display: grid;
    width: 52px;
    height: 52px;
    margin: 0 auto 13px;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, #e5a928 15%, var(--surface-soft));
    color: #e5a928;
    font-family: Arial, sans-serif;
    font-size: 1.8rem;
}

.ticket-rating-dialog h2 {
    margin: 0 0 10px;
    color: var(--primary-dark);
}

.ticket-rating-description {
    margin: 0 auto 19px;
    color: var(--muted);
    line-height: 1.9;
}

.ticket-rating-input {
    justify-content: center;
    margin: 2px 0 20px;
}

.ticket-rating-input button {
    padding: 5px;
    border: 0;
    background: transparent;
    color: #d7c8bb;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
}

.ticket-rating-input button:hover,
.ticket-rating-input button:focus-visible {
    transform: translateY(-2px) scale(1.08);
    outline: 0;
}

.ticket-rating-input button:focus-visible {
    border-radius: 8px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

.ticket-rating-dialog .field {
    text-align: start;
}

.ticket-rating-error {
    margin: 0 0 12px;
    color: var(--danger);
    font-size: 0.82rem;
    text-align: start;
}

.ticket-rating-dialog .form-actions {
    justify-content: center;
}

html[data-theme="dark"] .ticket-detail-card {
    background: var(--surface);
}

html[data-theme="dark"] .ticket-rating-backdrop {
    background: rgba(0, 0, 0, 0.76);
}

@media (max-width: 560px) {
    .ticket-rating-inline {
        align-items: flex-start;
        flex-direction: column;
    }

    .ticket-rating-modal {
        padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
    }

    .ticket-rating-dialog {
        width: min(100%, 440px);
        max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        padding: 20px 18px 18px;
        border-radius: 20px;
    }

    .ticket-rating-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 8px;
        font-size: 1.5rem;
    }

    .ticket-rating-description {
        margin-bottom: 10px;
        line-height: 1.7;
    }

    .ticket-rating-input {
        margin-bottom: 12px;
    }

    .ticket-rating-dialog .field {
        margin-bottom: 12px;
    }

    .ticket-rating-dialog .field textarea {
        min-height: 88px;
    }

    .ticket-rating-dialog .form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .ticket-rating-dialog .form-actions .btn {
        width: 100%;
    }
}

.ticket-composer {
    padding: 20px 22px 22px;
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.ticket-composer .field {
    margin-bottom: 12px;
}

.ticket-composer-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.ticket-composer-footer small {
    flex: 1 1 180px;
    color: var(--muted);
    font-size: 0.78rem;
}

.ticket-composer-footer .btn {
    margin-right: auto;
}

.ticket-file-input {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface-soft);
    color: var(--primary);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 700;
}

.field .ticket-file-input {
    display: inline-flex;
    margin-bottom: 0;
    color: var(--primary);
}

.ticket-file-input:focus-within {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.ticket-file-icon {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1;
}

.ticket-file-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.ticket-file-input input,
.field .ticket-file-input input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

.ticket-file-selection {
    min-width: 0;
    max-width: 240px;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-file-selection:empty {
    display: none;
}

.ticket-internal-toggle {
    margin: 0;
}

.ticket-attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.ticket-attachment {
    display: inline-flex;
    min-width: 180px;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--primary);
}

.ticket-message.is-mine .ticket-attachment {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.ticket-attachment > span:last-child {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.ticket-attachment strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
}

.ticket-attachment small {
    color: var(--muted);
    font-size: 0.68rem;
}

.ticket-message.is-mine .ticket-attachment small {
    color: rgba(255, 255, 255, 0.72);
}

.admin-ticket-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
    gap: 18px;
    align-items: start;
}

.ticket-side-panels {
    display: grid;
    gap: 18px;
}

.ticket-side-panels .admin-form-block {
    align-items: flex-end;
}

.ticket-side-panels .admin-form-block .field {
    flex-basis: 100%;
}

.ticket-events-panel {
    margin-top: 18px;
}

.ticket-event-list {
    display: grid;
    gap: 8px;
}

.ticket-event-item {
    display: grid;
    grid-template-columns: minmax(150px, 0.7fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-soft);
}

.ticket-event-item > div:first-child {
    display: grid;
    gap: 1px;
}

.ticket-event-item strong {
    color: var(--primary-dark);
    font-size: 0.85rem;
}

.ticket-event-item small,
.ticket-event-item time,
.ticket-event-change {
    color: var(--muted);
    font-size: 0.75rem;
}

.ticket-event-item time {
    white-space: nowrap;
}

.ticket-inline-form {
    margin: 0;
}

.ticket-inline-form select {
    max-width: 170px;
    min-height: 36px;
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 9px;
    outline: 0;
    background: var(--surface-soft);
    color: var(--ink);
    font-size: 0.78rem;
}

.ticket-inline-form select:focus {
    border-color: var(--accent);
}

.ticket-admin-table {
    min-width: 1120px;
}

.ticket-rating-report-panel {
    margin-bottom: 18px;
}

.ticket-rating-report-score {
    display: grid;
    min-width: 150px;
    gap: 3px;
    padding: 12px 15px;
    border: 1px solid color-mix(in srgb, #e5a928 35%, var(--line));
    border-radius: 13px;
    background: color-mix(in srgb, #e5a928 8%, var(--surface));
    text-align: center;
}

.ticket-rating-report-score strong,
.ticket-rating-score-cell {
    color: #b77b00;
    font-family: Arial, sans-serif;
    font-weight: 800;
}

.ticket-rating-report-score small {
    color: var(--muted);
    font-size: 0.72rem;
}

.ticket-rating-agents-table td:first-child {
    display: grid;
    gap: 2px;
}

.ticket-rating-agents-table td:first-child small {
    color: var(--muted);
    direction: ltr;
    font-size: 0.72rem;
}

.admin-user-rating-panel {
    margin-top: 18px;
}

.admin-user-rating-table td:first-child {
    display: grid;
    gap: 2px;
}

.admin-user-rating-table td:first-child small {
    color: var(--muted);
    direction: ltr;
    font-size: 0.72rem;
}

.admin-ticket-rating-panel .ticket-rating-stars {
    margin-bottom: 12px;
}

.admin-ticket-rating-feedback {
    margin: 0 0 9px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface-soft);
    color: var(--ink);
    line-height: 1.8;
}

.admin-stat-card-rating strong {
    color: #b77b00;
}

.admin-stat-card-rating-scale {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.muted-text {
    color: var(--muted);
}

.support-assignment-user-list {
    display: grid;
    gap: 9px;
    margin-top: 16px;
    max-height: 440px;
    overflow-y: auto;
}

@media (max-width: 820px) {
    .hero-grid,
    .profile-layout,
    .admin-role-layout,
    .ticket-layout,
    .admin-ticket-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .ticket-layout {
        gap: 8px;
    }

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

    .dashboard-overview,
    .admin-monitoring-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .deposit-grid,
    .profile-gift-actions,
    .wallet-gift-actions,
    .friends-layout {
        grid-template-columns: 1fr;
    }

    .session-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .ticket-event-item {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .session-revoke-form {
        grid-column: 1 / -1;
    }

    .friend-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .friend-actions {
        justify-content: flex-start;
    }

    .friends-messages-panel .friend-message-contact {
        align-items: stretch;
    }

    .profile-layout .panel:last-child {
        grid-column: auto;
    }

    .panel-financial {
        grid-column: auto;
    }

    .hero-card {
        min-height: 280px;
    }

    .content-editor-locale-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 540px) {
    .site-header,
    .container {
        width: min(100% - 28px, 1120px);
    }

    .nav {
        align-items: flex-start;
        flex-direction: column;
    }

    .nav-links {
        width: 100%;
        justify-content: flex-start;
    }

    .language-switcher {
        min-width: 120px;
    }



    .hero {
        padding-top: 24px;
    }

    .hero-card {
        padding: 26px;
        border-radius: 24px;
    }

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

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

    .bracket-tree {
        grid-template-columns: 1fr;
    }

    .financial-summary {
        grid-template-columns: 1fr;
    }

    .dashboard-overview,
    .admin-monitoring-grid {
        grid-template-columns: 1fr;
    }

    .bank-account-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .email-field-row {
        grid-template-columns: 1fr;
    }

    .bank-account-delete-form,
    .bank-account-delete-form .btn {
        width: 100%;
    }

    .accounting-summary-grid,
    .accounting-owner-name-grid {
        grid-template-columns: 1fr;
    }

    .page-heading,
    .dashboard-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .page-heading-actions {
        width: 100%;
        align-items: stretch;
        justify-content: flex-start;
        flex-direction: column;
    }

    .wallet-quick-balance {
        justify-content: space-between;
    }

    .wallet-balance-card,
    .panel-heading-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .wallet-balance-side,
    .wallet-balance-actions {
        width: 100%;
        justify-items: stretch;
        justify-content: stretch;
    }

    .wallet-balance-actions .btn {
        flex: 1 1 160px;
    }

    .wallet-transaction-filter {
        width: 100%;
        justify-content: flex-start;
    }

    .wallet-balance-meta {
        width: 100%;
    }

    .friend-search-form,
    .referral-code-box,
    .user-result,
    .friend-card,
    .admin-filter-form {
        align-items: stretch;
        flex-direction: column;
    }

    .friend-search-form .btn,
    .friend-actions {
        width: 100%;
    }

    .friend-actions {
        justify-content: flex-start;
    }

    .admin-filter-form > * {
        width: 100%;
    }

    .admin-filter-form input {
        min-width: 0;
    }

    .notification-dropdown {
        position: fixed;
        top: 78px;
        right: 14px;
        left: 14px;
        width: auto;
    }

    .notification-page-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .notification-page-actions {
        justify-content: flex-start;
    }

    .push-notification-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .push-notification-actions {
        justify-content: flex-start;
    }

    .ticket-list-item,
    .ticket-detail-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .ticket-detail-header .ticket-meta {
        justify-content: flex-start;
    }

    .ticket-list-badges {
        align-self: stretch;
    }

    .ticket-message {
        max-width: 100%;
    }

    .ticket-composer-footer .btn {
        width: 100%;
        margin-right: 0;
    }

    .ticket-file-input {
        width: 44px;
    }
}

/* Public landing page */
.landing-page {
    overflow: hidden;
}

.landing-hero {
    position: relative;
    padding: 58px 0 54px;
}

.landing-hero::before {
    position: absolute;
    top: -240px;
    left: -180px;
    width: 560px;
    height: 560px;
    border: 1px solid rgba(201, 139, 83, 0.14);
    border-radius: 50%;
    box-shadow:
        0 0 0 30px rgba(201, 139, 83, 0.04),
        0 0 0 74px rgba(201, 139, 83, 0.03);
    content: "";
    pointer-events: none;
}

.landing-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
    align-items: center;
    gap: 70px;
}

.landing-hero-copy {
    position: relative;
    z-index: 1;
}

.landing-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
    color: var(--accent);
    font-size: 0.94rem;
    font-weight: 800;
}

.landing-kicker-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 6px rgba(201, 139, 83, 0.14);
}

.landing-hero h1 {
    max-width: 700px;
    margin: 0 0 22px;
    color: var(--primary-dark);
    font-size: clamp(3.2rem, 7vw, 6.5rem);
    letter-spacing: -0.045em;
    line-height: 1.08;
}

.landing-hero h1 em {
    display: block;
    color: var(--accent);
    font-style: normal;
}

.landing-hero-copy > p {
    max-width: 620px;
    margin: 0 0 30px;
    color: var(--muted);
    font-size: 1.16rem;
}

.landing-hero-actions {
    margin-bottom: 35px;
}

.landing-hero-actions .btn-primary {
    min-width: 218px;
}

.landing-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}

.landing-trust-item {
    display: grid;
    gap: 1px;
    padding-right: 17px;
    border-right: 2px solid var(--line);
}

.landing-trust-item:first-child {
    padding-right: 0;
    border-right: 0;
}

.landing-trust-item strong {
    color: var(--primary-dark);
    font-size: 1.05rem;
}

.landing-trust-item small {
    color: var(--muted);
    font-size: 0.76rem;
}

.landing-hero-visual {
    position: relative;
    min-height: 470px;
}

.landing-visual-card {
    position: relative;
    z-index: 1;
    width: min(100%, 480px);
    margin: 0 auto;
    padding: 23px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 31px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 48%),
        linear-gradient(145deg, #5a3023, #24130e);
    box-shadow: 0 35px 90px rgba(70, 39, 25, 0.27);
    color: #fff;
    transform: rotate(2deg);
}

.landing-visual-card::before {
    position: absolute;
    top: -22px;
    right: 45px;
    width: 90px;
    height: 90px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;
    content: "";
}

.landing-visual-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 19px;
}

.landing-live-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.76rem;
    font-weight: 700;
}

.landing-live-status span {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #63d391;
    box-shadow: 0 0 0 5px rgba(99, 211, 145, 0.12);
}

.board-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 7px;
}

.board-point {
    display: block;
    height: 106px;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background: #4e2419;
    opacity: 0.95;
}

.board-point.is-light {
    background: #f2c38d;
}

.board-row-bottom .board-point {
    transform: rotate(180deg);
}

.board-center {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 34px;
    padding: 5px 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.74rem;
}

.board-center b {
    color: #f7d7ad;
    font-size: 1rem;
}

.board-center i {
    color: rgba(255, 255, 255, 0.5);
    font-style: normal;
}

.board-piece {
    position: absolute;
    z-index: 2;
    width: 37px;
    height: 37px;
    border: 3px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    box-shadow: 0 5px 7px rgba(0, 0, 0, 0.22);
}

.board-piece-light {
    background: #f6dfc0;
}

.board-piece-dark {
    background: #33201b;
    border-color: rgba(245, 201, 145, 0.6);
}

.board-piece-left {
    top: 63px;
    left: 63px;
}

.board-piece-left-two {
    top: 88px;
    left: 63px;
}

.board-piece-right {
    right: 60px;
    bottom: 65px;
}

.board-piece-right-two {
    right: 60px;
    bottom: 90px;
}

.landing-visual-footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 18px;
}

.landing-visual-footer div {
    display: grid;
    gap: 2px;
    padding: 10px 9px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.07);
}

.landing-visual-footer span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.68rem;
}

.landing-visual-footer strong {
    color: #fff;
    font-size: 0.77rem;
}

.landing-visual-orbit {
    position: absolute;
    border: 1px solid rgba(201, 139, 83, 0.24);
    border-radius: 50%;
    pointer-events: none;
}

.landing-visual-orbit-one {
    top: 14px;
    right: 0;
    width: 420px;
    height: 420px;
}

.landing-visual-orbit-two {
    top: 76px;
    right: 58px;
    width: 300px;
    height: 300px;
    border-color: rgba(201, 139, 83, 0.13);
}

.landing-proof-strip {
    padding: 0 0 30px;
}

.landing-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
}

.landing-proof-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 82px;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.68);
}

.landing-proof-item strong,
.landing-proof-item small {
    display: block;
}

.landing-proof-item strong {
    color: var(--primary-dark);
    font-size: 0.88rem;
}

.landing-proof-item small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.73rem;
}

.proof-icon {
    display: grid;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 13px;
    background: #f5e4d5;
    color: var(--primary);
    font-size: 1.05rem;
    font-weight: 800;
}

.landing-section {
    padding: 92px 0;
}

.landing-section-soft {
    background:
        linear-gradient(180deg, rgba(255, 250, 245, 0.1), rgba(255, 255, 255, 0.45)),
        #f1e8e0;
}

.landing-section-mission {
    padding-top: 70px;
    padding-bottom: 70px;
}

.landing-section-heading {
    max-width: 690px;
    margin-bottom: 34px;
}

.landing-section-heading h2,
.landing-mission h2 {
    margin: 0 0 11px;
    color: var(--primary-dark);
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.3;
}

.landing-section-heading > p:last-child,
.landing-mission > div:first-child > p:last-child {
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
}

.landing-section-heading-centered {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.landing-section-heading-centered .eyebrow {
    justify-content: center;
}

.tournament-plan-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}

.tournament-plan-card {
    display: flex;
    min-height: 405px;
    flex-direction: column;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 12px 35px rgba(70, 39, 25, 0.06);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.tournament-plan-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
}

.tournament-plan-card.plan-copper {
    border-color: rgba(181, 105, 53, 0.55);
    background: linear-gradient(160deg, #fffaf5, #f8e9db);
}

.tournament-plan-card.plan-plum {
    border-color: rgba(93, 55, 68, 0.23);
    background: linear-gradient(160deg, #fffdfb, #f2e7e5);
}

.tournament-plan-card.plan-dark {
    border-color: rgba(61, 32, 24, 0.42);
    background: linear-gradient(160deg, #5a3023, #321b15);
    color: #fff;
}

.plan-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 29px;
}

.plan-frequency {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.plan-dark .plan-frequency {
    color: rgba(255, 255, 255, 0.65);
}

.tournament-plan-card h3 {
    margin: 22px 0 7px;
    color: var(--primary-dark);
    font-size: 1.45rem;
}

.plan-dark h3 {
    color: #fff;
}

.tournament-plan-card > p {
    min-height: 62px;
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.8;
}

.plan-dark > p {
    color: rgba(255, 255, 255, 0.7);
}

.plan-price {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 0 8px;
    margin-bottom: 13px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.plan-dark .plan-price {
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

.plan-price span,
.plan-prize-grid span {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 0.72rem;
}

.plan-dark .plan-price span,
.plan-dark .plan-prize-grid span {
    color: rgba(255, 255, 255, 0.62);
}

.plan-price strong {
    color: var(--primary-dark);
    font-size: 1.7rem;
    line-height: 1.3;
}

.plan-dark .plan-price strong {
    color: #fff;
}

.plan-price small,
.plan-prize-grid small {
    color: var(--muted);
    font-size: 0.7rem;
}

.plan-dark .plan-price small,
.plan-dark .plan-prize-grid small {
    color: rgba(255, 255, 255, 0.62);
}

.plan-prize-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 20px;
}

.plan-prize-grid > div {
    display: grid;
    gap: 2px;
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(201, 139, 83, 0.1);
}

.plan-dark .plan-prize-grid > div {
    background: rgba(255, 255, 255, 0.1);
}

.plan-prize-grid strong {
    color: var(--primary-dark);
    font-size: 0.9rem;
}

.plan-dark .plan-prize-grid strong {
    color: #fff;
}

.plan-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
}

.plan-dark .plan-footer {
    color: rgba(255, 255, 255, 0.7);
}

.tournament-plan-card .plan-footer .btn {
    border-color: var(--line);
    background: #fff;
    color: var(--primary);
}

.plan-dark .plan-footer .btn {
    border-color: rgba(255, 255, 255, 0.2);
    background: #fff;
    color: var(--primary);
}

.landing-note {
    margin: 20px 0 0;
    color: var(--muted);
    font-size: 0.78rem;
    text-align: center;
}

.landing-faq-section {
    padding-top: 70px;
    background:
        radial-gradient(circle at 15% 25%, rgba(201, 139, 83, 0.1), transparent 20rem),
        var(--bg);
}

.landing-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    max-width: 930px;
    margin: 0 auto;
}

.landing-faq-item {
    border: 1px solid var(--line);
    border-radius: 17px;
    background: var(--surface);
    box-shadow: 0 10px 28px rgba(70, 39, 25, 0.05);
    transition: border-color 160ms ease, background 160ms ease;
}

.landing-faq-item[open] {
    border-color: rgba(201, 139, 83, 0.6);
    background: var(--surface-soft);
}

.landing-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 20px;
    color: var(--primary-dark);
    cursor: pointer;
    font-weight: 800;
    list-style: none;
}

.landing-faq-item summary::-webkit-details-marker {
    display: none;
}

.landing-faq-item summary b {
    display: grid;
    flex: 0 0 auto;
    width: 27px;
    height: 27px;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-contrast);
    color: var(--primary);
    font-size: 1.1rem;
    line-height: 1;
    transition: transform 160ms ease;
}

.landing-faq-item[open] summary b {
    transform: rotate(45deg);
}

.landing-faq-item > p {
    margin: -2px 20px 19px;
    color: var(--muted);
    font-size: 0.87rem;
}

.landing-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.landing-process-step {
    position: relative;
    padding: 24px 22px;
    border: 1px solid rgba(234, 222, 213, 0.95);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.82);
}

.landing-process-step:not(:last-child)::after {
    position: absolute;
    top: 45px;
    left: -23px;
    width: 30px;
    height: 1px;
    background: rgba(201, 139, 83, 0.55);
    content: "";
}

.process-number {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    margin-bottom: 15px;
    border-radius: 14px;
    background: var(--primary);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
}

.landing-process-step h3,
.landing-feature-card h3 {
    margin: 0 0 6px;
    color: var(--primary-dark);
    font-size: 1.04rem;
}

.landing-process-step p,
.landing-feature-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.83rem;
}

.landing-why-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
    gap: 19px;
    align-items: stretch;
}

.landing-why-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(26px, 5vw, 45px);
    border-radius: 26px;
    background: linear-gradient(145deg, var(--primary), var(--primary-dark));
    box-shadow: var(--shadow);
    color: #fff;
}

.landing-why-copy h2 {
    margin: 22px 0 13px;
    color: #fff;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    line-height: 1.4;
}

.landing-why-copy p {
    margin: 0 0 28px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.95rem;
}

.btn-light {
    background: #fff;
    color: var(--primary);
}

.btn-light:hover {
    background: #fff8ee;
}

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

.landing-feature-card {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.88);
}

.feature-icon {
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    margin-bottom: 15px;
    border-radius: 12px;
    background: #f5e4d5;
    color: var(--primary);
    font-size: 1.2rem;
    font-weight: 800;
}

.landing-mission {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(270px, 0.85fr);
    align-items: center;
    gap: 65px;
}

.landing-mission > div:first-child {
    max-width: 700px;
}

.landing-mission-card {
    display: grid;
    min-height: 230px;
    align-content: center;
    gap: 13px;
    padding: 30px;
    border: 1px solid rgba(201, 139, 83, 0.34);
    border-radius: 26px;
    background:
        radial-gradient(circle at 85% 15%, rgba(201, 139, 83, 0.23), transparent 10rem),
        #fffaf5;
    box-shadow: 0 20px 50px rgba(70, 39, 25, 0.08);
    text-align: center;
}

.mission-mark {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    margin: 0 auto 7px;
    border-radius: 18px;
    background: transparent;
    object-fit: contain;
}

.landing-mission-card strong {
    color: var(--primary-dark);
    font-size: 1.2rem;
    line-height: 1.6;
}

.landing-mission-card > span:last-child {
    color: var(--muted);
    font-size: 0.82rem;
}

.landing-final-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 80px;
    padding: clamp(26px, 5vw, 46px);
    border-radius: 27px;
    background: linear-gradient(120deg, #f9e4ca, #fffaf5);
}

.landing-final-cta .eyebrow {
    margin-bottom: 11px;
}

.landing-final-cta h2 {
    margin: 0 0 7px;
    color: var(--primary-dark);
    font-size: clamp(1.7rem, 4vw, 2.7rem);
}

.landing-final-cta p:last-child {
    margin: 0;
    color: var(--muted);
}

@media (max-width: 980px) {
    .landing-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(310px, 0.85fr);
        gap: 34px;
    }

    .landing-hero h1 {
        font-size: clamp(3rem, 7vw, 5rem);
    }

    .landing-proof-grid,
    .tournament-plan-grid,
    .landing-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .landing-proof-item:last-child {
        grid-column: 1 / -1;
    }

    .landing-process-step:not(:last-child)::after {
        display: none;
    }
}

@media (max-width: 820px) {
    .landing-hero {
        padding-top: 35px;
    }

    .landing-hero-grid,
    .landing-why-layout,
    .landing-mission {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .landing-hero-copy {
        max-width: 720px;
        margin: 0 auto;
        text-align: center;
    }

    .landing-kicker {
        justify-content: center;
    }

    .landing-hero-copy > p {
        margin-right: auto;
        margin-left: auto;
    }

    .landing-hero-actions,
    .landing-trust-row {
        justify-content: center;
    }

    .landing-hero-visual {
        min-height: 430px;
    }

    .landing-visual-card {
        transform: none;
    }

    .landing-why-copy {
        text-align: center;
        align-items: center;
    }

    .landing-mission {
        text-align: center;
    }

    .landing-mission .eyebrow {
        justify-content: center;
    }

    .landing-mission-card {
        width: min(100%, 430px);
        margin: 0 auto;
    }

    .landing-final-cta {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 540px) {
    .landing-hero {
        padding-top: 20px;
    }

    .landing-hero h1 {
        font-size: clamp(2.65rem, 15vw, 4.2rem);
    }

    .landing-hero-copy > p {
        font-size: 1rem;
    }

    .landing-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .landing-hero-actions .btn-primary,
    .landing-hero-actions .btn {
        width: 100%;
    }

    .landing-trust-row {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .landing-trust-item,
    .landing-trust-item:first-child {
        padding: 0 0 9px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .landing-trust-item:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .landing-hero-visual {
        min-height: 355px;
    }

    .landing-visual-card {
        padding: 15px;
        border-radius: 23px;
    }

    .landing-visual-topline {
        margin-bottom: 12px;
    }

    .board-row {
        gap: 4px;
    }

    .board-point {
        height: 75px;
    }

    .board-center {
        min-height: 26px;
        padding: 3px 6px;
        font-size: 0.62rem;
    }

    .board-center b {
        font-size: 0.78rem;
    }

    .board-piece {
        width: 26px;
        height: 26px;
        border-width: 2px;
    }

    .board-piece-left {
        top: 43px;
        left: 38px;
    }

    .board-piece-left-two {
        top: 60px;
        left: 38px;
    }

    .board-piece-right {
        right: 34px;
        bottom: 45px;
    }

    .board-piece-right-two {
        right: 34px;
        bottom: 62px;
    }

    .landing-visual-footer {
        gap: 5px;
        margin-top: 10px;
    }

    .landing-visual-footer div {
        padding: 7px 5px;
    }

    .landing-visual-footer span {
        font-size: 0.58rem;
    }

    .landing-visual-footer strong {
        font-size: 0.63rem;
    }

    .landing-visual-orbit {
        display: none;
    }

    .landing-proof-grid,
    .tournament-plan-grid,
    .landing-process-grid,
    .landing-feature-grid {
        grid-template-columns: 1fr;
    }

    .landing-proof-item:last-child {
        grid-column: auto;
    }

    .landing-section {
        padding: 62px 0;
    }

    .landing-section-mission {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .tournament-plan-card {
        min-height: 0;
    }

    .landing-final-cta {
        align-items: stretch;
        margin-bottom: 55px;
    }

    .landing-final-cta .hero-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .landing-final-cta .hero-actions .btn {
        width: 100%;
    }

    .content-editor-label {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Dark theme overrides */

html[data-theme="dark"] .btn-primary {
    background: #8f5035;
    color: #fff;
}

html[data-theme="dark"] .btn-primary:hover {
    background: #a8643f;
}

html[data-theme="dark"] .btn-secondary {
    border-color: var(--line);
    background: var(--surface);
    color: var(--primary-dark);
}

html[data-theme="dark"] .btn-ghost {
    color: var(--primary-dark);
}

html[data-theme="dark"] .btn-light {
    background: #f6ece5;
    color: #3d2018;
}

html[data-theme="dark"] .wallet-quick-balance,
html[data-theme="dark"] .tournament-meta-grid > div,
html[data-theme="dark"] .tournament-summary-grid > div,
html[data-theme="dark"] .bracket-match {
    background: var(--surface-contrast);
}

html[data-theme="dark"] .wallet-quick-balance strong,
html[data-theme="dark"] .tournament-meta-grid strong,
html[data-theme="dark"] .tournament-summary-grid strong {
    color: var(--primary-dark);
}

html[data-theme="dark"] .bracket-player {
    background: var(--surface);
}

html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .admin-stat-card,
html[data-theme="dark"] .ticket-detail-card,
html[data-theme="dark"] .notification-page-item {
    border-color: var(--line);
    background: var(--surface);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .compact-empty {
    background: transparent;
    box-shadow: none;
}

html[data-theme="dark"] .badge:not(.badge-light) {
    background: #493025;
    color: #f4c99d;
}

html[data-theme="dark"] .login-tabs {
    background: var(--surface-contrast);
}

html[data-theme="dark"] .tab-button.is-active {
    background: var(--surface);
    color: var(--primary-dark);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .otp-status,
html[data-theme="dark"] .role-list-item:hover,
html[data-theme="dark"] .role-list-item.is-selected,
html[data-theme="dark"] .ticket-list-item:hover,
html[data-theme="dark"] .permission-option:hover {
    background: #3b2a22;
}

html[data-theme="dark"] .alert-error,
html[data-theme="dark"] .chat-error {
    background: #4b2526;
    color: #ffaaa4;
}

html[data-theme="dark"] .alert-success {
    background: #1d3c2d;
    color: #8be4b3;
}

html[data-theme="dark"] .dashboard-hero,
html[data-theme="dark"] .wallet-balance-card {
    background: linear-gradient(140deg, #4a291e, #251512);
}

html[data-theme="dark"] .dashboard-hero .eyebrow {
    color: #f0bd86;
}

html[data-theme="dark"] .dashboard-hero p,
html[data-theme="dark"] .wallet-balance-card span,
html[data-theme="dark"] .wallet-balance-card small,
html[data-theme="dark"] .wallet-balance-secondary {
    color: rgba(255, 245, 235, 0.72);
}

html[data-theme="dark"] .avatar,
html[data-theme="dark"] .session-card-icon,
html[data-theme="dark"] .feature-icon,
html[data-theme="dark"] .proof-icon,
html[data-theme="dark"] .push-notification-icon,
html[data-theme="dark"] .notification-page-icon,
html[data-theme="dark"] .chat-close-button {
    background: var(--surface-contrast);
    color: var(--primary-dark);
}

html[data-theme="dark"] .status-active,
html[data-theme="dark"] .status-paid,
html[data-theme="dark"] .status-approved,
html[data-theme="dark"] .status-posted,
html[data-theme="dark"] .status-completed,
html[data-theme="dark"] .transaction-credit {
    background: #1d3c2d;
    color: #8be4b3;
}

html[data-theme="dark"] .status-under_review,
html[data-theme="dark"] .status-pending,
html[data-theme="dark"] .status-scheduled,
html[data-theme="dark"] .status-waiting,
html[data-theme="dark"] .status-redirected,
html[data-theme="dark"] .status-in_progress,
html[data-theme="dark"] .status-waiting_user,
html[data-theme="dark"] .status-waiting_staff,
html[data-theme="dark"] .status-resolved,
html[data-theme="dark"] .priority-high {
    background: #4b3821;
    color: #f2c27e;
}

html[data-theme="dark"] .status-ready {
    background: #253a52;
    color: #9ac8ff;
}

html[data-theme="dark"] .status-rejected,
html[data-theme="dark"] .status-failed,
html[data-theme="dark"] .status-cancelled,
html[data-theme="dark"] .status-removed,
html[data-theme="dark"] .status-reversed,
html[data-theme="dark"] .status-void,
html[data-theme="dark"] .transaction-debit,
html[data-theme="dark"] .priority-urgent {
    background: #4b2526;
    color: #ffaaa4;
}

html[data-theme="dark"] .status-closed,
html[data-theme="dark"] .status-bye,
html[data-theme="dark"] .status-draft,
html[data-theme="dark"] .priority-normal {
    background: #342a26;
    color: var(--muted);
}

html[data-theme="dark"] .accounting-summary-card,
html[data-theme="dark"] .accounting-owner-name-grid input,
html[data-theme="dark"] .accounting-void-form input {
    background: var(--surface);
    border-color: var(--line);
}

html[data-theme="dark"] .accounting-type-income {
    background: #1d3c2d;
    color: #8be4b3;
}

html[data-theme="dark"] .accounting-type-expense {
    background: #4b2526;
    color: #ffaaa4;
}

html[data-theme="dark"] .accounting-type-transfer,
html[data-theme="dark"] .accounting-type-adjustment {
    background: #4b3821;
    color: #f2c27e;
}

html[data-theme="dark"] .priority-low {
    background: #203a30;
    color: #8bd8ae;
}

html[data-theme="dark"] .notification-preview-item:hover,
html[data-theme="dark"] .notification-preview-item.is-unread,
html[data-theme="dark"] .notification-page-item.is-unread {
    background: #3b2a22;
}

html[data-theme="dark"] .referral-code-box,
html[data-theme="dark"] .bank-destination {
    background: var(--surface-soft);
}

html[data-theme="dark"] .chat-modal-backdrop {
    background: rgba(0, 0, 0, 0.72);
}

html[data-theme="dark"] .chat-messages {
    background: #1b1412;
}

html[data-theme="dark"] .chat-message {
    background: #382a23;
    color: var(--ink);
}

html[data-theme="dark"] .chat-message.is-mine {
    background: #8f5035;
    color: #fff;
}

html[data-theme="dark"] .ticket-conversation {
    background: #1b1412;
}

html[data-theme="dark"] .ticket-message {
    background: #382a23;
    color: var(--ink);
}

html[data-theme="dark"] .ticket-message.is-mine {
    background: #8f5035;
    color: #fff;
}

html[data-theme="dark"] .ticket-message.is-staff {
    background: var(--surface);
}

html[data-theme="dark"] .ticket-message.is-internal {
    border-color: #a97832;
    background: #4b3b20;
}

html[data-theme="dark"] .ticket-attachment {
    background: var(--surface-soft);
}

html[data-theme="dark"] .permission-option {
    background: rgba(56, 38, 31, 0.72);
}

html[data-theme="dark"] .session-current {
    border-color: #a66d3d;
    background: #3b2a22;
}

html[data-theme="dark"] .landing-section-soft {
    background:
        linear-gradient(180deg, rgba(42, 30, 26, 0.5), rgba(23, 17, 15, 0.4)),
        #1c1412;
}

html[data-theme="dark"] .landing-why-copy {
    background: linear-gradient(145deg, #4a291e, #251512);
}

html[data-theme="dark"] .landing-proof-item,
html[data-theme="dark"] .tournament-plan-card,
html[data-theme="dark"] .landing-process-step,
html[data-theme="dark"] .landing-feature-card,
html[data-theme="dark"] .landing-mission-card,
html[data-theme="dark"] .landing-casual-game-card {
    border-color: var(--line);
    background: var(--surface);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .landing-casual-games-section {
    background:
        radial-gradient(circle at 88% 12%, rgba(201, 139, 83, 0.12), transparent 23rem),
        var(--bg);
}

html[data-theme="dark"] .landing-casual-game-card {
    background:
        linear-gradient(145deg, rgba(57, 39, 31, 0.96), rgba(35, 24, 20, 0.92)),
        var(--surface);
}

html[data-theme="dark"] .tournament-plan-card.plan-copper {
    border-color: #8c5a3c;
    background: linear-gradient(160deg, #33231d, #2a1d18);
}

html[data-theme="dark"] .tournament-plan-card.plan-plum {
    border-color: #604550;
    background: linear-gradient(160deg, #302124, #25191b);
}

html[data-theme="dark"] .tournament-plan-card.plan-dark {
    border-color: #6c4635;
    background: linear-gradient(160deg, #5a3023, #321b15);
}

html[data-theme="dark"] .plan-prize-grid > div {
    background: rgba(228, 165, 106, 0.12);
}

html[data-theme="dark"] .plan-dark .plan-prize-grid > div {
    background: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .tournament-plan-card .plan-footer .btn {
    border-color: var(--line);
    background: var(--surface-contrast);
    color: var(--primary-dark);
}

html[data-theme="dark"] .landing-final-cta {
    background: linear-gradient(120deg, #3b2921, #211815);
}

html[data-theme="dark"] .site-content-modal-backdrop {
    background: rgba(0, 0, 0, 0.78);
}


html[data-theme="dark"] .landing-faq-item {
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.18);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #9e887d;
}

html[data-theme="dark"] ::selection {
    background: #9b633e;
    color: #fff;
}

@media (max-width: 540px) {
    .theme-toggle {
        width: 42px;
        height: 42px;
    }
}

/* English uses the same visual system with an LTR reading direction. */
html[data-language="en"] {
    direction: ltr;
}

html[data-language="en"] body {
    direction: ltr;
}

html[data-language="en"] .data-table th,
html[data-language="en"] .data-table td {
    text-align: left;
}

html[data-language="en"] .notification-dropdown {
    right: max(14px, calc((100vw - 1120px) / 2));
    left: auto;
}

html[data-language="en"] .notification-preview-item.is-unread {
    border-right: 0;
    border-left: 4px solid var(--accent);
}

html[data-language="en"] .ticket-message.is-mine {
    align-self: flex-end;
    border-right: 0;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 17px;
}

html[data-language="en"] .ticket-message.is-staff {
    align-self: flex-start;
    border-bottom-right-radius: 17px;
    border-bottom-left-radius: 5px;
}

html[data-language="en"] .chat-message.is-mine {
    align-self: flex-end;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 15px;
}

html[data-language="en"] .chat-message:not(.is-mine) {
    align-self: flex-start;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 4px;
}

html[data-language="en"] .plain-list {
    padding-right: 0;
    padding-left: 20px;
}

html[data-language="en"] .role-list-meta {
    text-align: right;
}

html[data-language="en"] .landing-trust-item {
    padding-right: 0;
    padding-left: 17px;
    border-right: 0;
    border-left: 2px solid var(--line);
}

html[data-language="en"] .landing-trust-item:first-child {
    padding-left: 0;
    border-left: 0;
}

html[data-language="en"] .ticket-composer-footer .btn {
    margin-right: 0;
    margin-left: auto;
}

@media (max-width: 540px) {
    html[data-language="en"] .notification-dropdown {
        right: 14px;
        left: 14px;
    }

    html[data-language="en"] .landing-trust-item,
    html[data-language="en"] .landing-trust-item:first-child {
        padding-right: 0;
        padding-left: 0;
        border-left: 0;
        border-bottom: 1px solid var(--line);
    }

    html[data-language="en"] .landing-trust-item:last-child {
        border-bottom: 0;
    }
}

/* Player one is the room creator (black); the joining player is white. */

.current-match-actions {
    margin-top: 16px;
}

.game-card {
    display: grid;
    gap: 16px;
}

.games-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 8px;
}

.game-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.game-card-heading h2 {
    margin: 9px 0 2px;
}

.game-card-heading p {
    margin: 0;
    color: var(--muted);
}

.game-card-meta {
    display: grid;
    gap: 8px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 0.84rem;
}

.game-card-meta strong {
    color: var(--primary-dark);
}

.game-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.matchmaking-card {
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--primary) 28%, var(--line));
    background:
        radial-gradient(
            circle at 100% 0,
            color-mix(in srgb, var(--primary) 11%, transparent),
            transparent 42%
        ),
        var(--surface);
}

.matchmaking-card::after {
    position: absolute;
    inset-inline-end: 22px;
    inset-block-end: 18px;
    width: 88px;
    height: 88px;
    border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.matchmaking-live-dot {
    display: block;
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--success) 15%, transparent);
}

.matchmaking-message {
    min-height: 24px;
    margin: 0;
    color: var(--primary-dark);
    font-weight: 700;
}

.matchmaking-message.is-error {
    color: var(--danger);
}

@media (max-width: 540px) {
    .admin-monitoring-heading,
    .feedback-history-heading {
        flex-direction: column;
    }

    .admin-monitoring-clock {
        width: 100%;
    }
}

/*
 * Responsive layout system
 *
 * The site uses a fluid page width instead of relying on one fixed desktop
 * width.  The rules below intentionally live at the end of the file so they
 * can harmonize the older page-specific breakpoints without changing their
 * visual language.
 */
:root {
    --page-max: 1120px;
    --page-gutter: 20px;
}

html,
body {
    max-width: 100%;
}

body {
    overflow-x: hidden;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

button,
input,
select,
textarea {
    max-width: 100%;
}

.site-header,
.container {
    width: min(var(--page-max), calc(100% - (var(--page-gutter) * 2)));
}

.site-header,
.container,
.hero-grid > *,
.dashboard-grid > *,
.profile-layout > *,
.tournament-grid > *,
.tournament-plan-grid > *,
.landing-proof-grid > *,
.landing-process-grid > *,
.landing-feature-grid > *,
.friends-layout > *,
.deposit-grid > *,
.admin-role-layout > *,
.admin-gift-layout > *,
.admin-note-layout > *,
.ticket-layout > *,
.admin-ticket-layout > * {
    min-width: 0;
}

.page-heading h1,
.page-heading p,
.dashboard-hero h1,
.dashboard-hero p,
.dashboard-card h2,
.dashboard-card p,
.panel-heading h1,
.panel-heading h2,
.panel-heading p,
.nav-user,
.brand span,
.notification-preview-title strong,
.notification-preview-item p {
    overflow-wrap: anywhere;
}

.table-wrap {
    max-width: 100%;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.data-table,
.admin-table {
    max-width: none;
}

.nav,
.nav-links,
.page-heading,
.dashboard-hero,
.panel-heading-row,
.admin-monitoring-heading,
.form-actions,
.hero-actions {
    min-width: 0;
}

.nav {
    flex-wrap: wrap;
}

.nav-links {
    min-width: 0;
}

.btn {
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
}

.site-content-modal-dialog,
.chat-modal {
    max-width: 100%;
}

/* Large laptops and desktop monitors. */
@media (min-width: 1200px) {
    :root {
        --page-max: 1260px;
        --page-gutter: 24px;
    }

    .hero-grid,
    .landing-hero-grid {
        gap: clamp(34px, 4vw, 72px);
    }

    .dashboard-grid {
        grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
    }

    .tournament-grid,
    .games-list {
        grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    }

    .site-content-modal-dialog {
        max-height: min(820px, calc(100vh - 56px));
    }
}

/* Wide monitors. */
@media (min-width: 1440px) {
    :root {
        --page-max: 1360px;
        --page-gutter: 30px;
    }

    .site-header {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .page-shell {
        padding-top: clamp(52px, 4vw, 76px);
        padding-bottom: clamp(82px, 5vw, 110px);
    }

    .dashboard-grid {
        grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    }

    .dashboard-card,
    .panel {
        padding: clamp(26px, 1.8vw, 34px);
    }

    .landing-hero-grid {
        gap: clamp(60px, 6vw, 105px);
    }
}

/* Large desktop screens and televisions. */
@media (min-width: 1920px) {
    :root {
        --page-max: 1660px;
        --page-gutter: 38px;
    }

    body {
        font-size: clamp(1rem, calc(0.95rem + 0.12vw), 1.12rem);
    }

    .dashboard-grid {
        grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
        gap: 22px;
    }

    .dashboard-overview,
    .admin-monitoring-grid {
        gap: 18px;
    }

    .tournament-grid,
    .games-list {
        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
        gap: 8px;
    }

    .landing-proof-grid,
    .landing-process-grid {
        gap: 22px;
    }
}

/* 2K/4K televisions: use the available canvas while keeping text readable. */
@media (min-width: 2560px) {
    :root {
        --page-max: 2200px;
        --page-gutter: 48px;
    }

    body {
        font-size: clamp(1.05rem, calc(1rem + 0.18vw), 1.22rem);
    }

    .dashboard-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 26px;
    }

    .tournament-grid,
    .games-list {
        grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    }

}

/* Tablet landscape and compact laptop layouts. */
@media (min-width: 821px) and (max-width: 1199px) {
    :root {
        --page-gutter: 24px;
    }

    .nav {
        align-items: center;
        gap: 14px;
    }

    .nav-links {
        flex: 1 1 560px;
        justify-content: flex-end;
        gap: 8px;
    }

    .hero-grid,
    .landing-hero-grid {
        gap: 34px;
    }

    .hero-card {
        min-height: 340px;
    }

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


}

/* Tablet portrait. */
@media (min-width: 541px) and (max-width: 820px) {
    :root {
        --page-gutter: 20px;
    }

    .site-header {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .nav {
        align-items: flex-start;
        gap: 14px;
    }

    .brand {
        flex: 0 0 auto;
    }

    .nav-links {
        flex: 1 1 100%;
        justify-content: flex-start;
        gap: 8px;
    }

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


    .notification-dropdown {
        right: 14px;
        left: 14px;
        width: auto;
        max-width: none;
    }

    .page-heading,
    .dashboard-hero {
        gap: 18px;
    }

    .panel,
    .dashboard-card {
        padding: 22px;
    }

    .ticket-message {
        max-width: 90%;
    }
}

/* Phones and narrow portrait screens. */
@media (max-width: 540px) {
    :root {
        --page-gutter: 14px;
    }

    body {
        font-size: 0.95rem;
    }

    .site-header {
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .brand {
        gap: 8px;
        min-width: 0;
        font-size: 1rem;
    }

    .brand-mark {
        width: 44px;
        height: 44px;
        border-radius: 13px;
    }

    .nav {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
    }

    .nav-links {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) auto auto;
        width: 100%;
        align-items: center;
        gap: 7px;
        padding: 7px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: var(--surface);
        box-shadow: 0 8px 24px rgba(70, 39, 25, 0.05);
    }

    .nav-links > .language-switcher {
        grid-column: 1 / 2;
        width: 100%;
    }

    .nav-links > .help-widget,
    .nav-links > .theme-toggle {
        grid-row: 1;
    }

    .nav-links > .help-widget {
        grid-column: 2;
    }

    .nav-links > .theme-toggle {
        grid-column: 3;
    }

    .nav-links > .nav-user {
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
        max-width: none;
        overflow: hidden;
        padding: 7px 9px;
        border-radius: 10px;
        background: var(--surface-soft);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .nav-links > .notification-widget {
        grid-column: 2;
        grid-row: 2;
    }

    .nav-links > .notification-widget,
    .nav-links > .notification-widget .notification-toggle {
        width: 100%;
    }

    .nav-links > .notification-widget .notification-toggle {
        justify-content: center;
    }

    .nav-links > .btn {
        grid-row: 2;
        min-height: 40px;
        width: 100%;
        padding-inline: 10px;
        font-size: 0.8rem;
    }

    .nav-links > .btn:not(:last-child) {
        grid-column: 1;
    }

    .nav-links > .btn:last-child {
        grid-column: 3;
    }

    .nav-user {
        max-width: min(100%, 150px);
        font-size: 0.82rem;
    }

    .language-switcher {
        min-width: 0;
        flex: 1 1 116px;
    }

    .language-switcher-toggle {
        min-height: 40px;
        padding-inline: 8px;
        font-size: 0.72rem;
    }

    .help-trigger,
    .theme-toggle {
        width: 40px;
        height: 40px;
    }

    .notification-toggle {
        min-height: 40px;
        padding-inline: 9px;
        font-size: 0.78rem;
    }

    .notification-toggle-label {
        display: none;
    }

    .notification-dropdown {
        top: 176px;
        right: 14px;
        left: 14px;
        width: auto;
        max-width: none;
        max-height: calc(100dvh - 194px);
    }

    .notification-dropdown-header,
    .notification-preview-item {
        padding-inline: 13px;
    }

    .help-popover {
        right: auto;
        left: 0;
        width: min(280px, calc(100vw - 28px));
    }

    .page-shell {
        padding-top: 28px;
        padding-bottom: 54px;
    }

    .page-heading h1,
    .dashboard-hero h1 {
        font-size: clamp(1.7rem, 7vw, 2.35rem);
        line-height: 1.35;
    }

    .page-heading p,
    .dashboard-hero p {
        font-size: 0.9rem;
    }

    .panel,
    .dashboard-card,
    .empty-state {
        padding: 18px;
        border-radius: 18px;
    }

    .panel-heading {
        margin-bottom: 16px;
    }

    .panel-heading h2,
    .dashboard-card h2 {
        font-size: 1.1rem;
    }

    .btn {
        min-height: 44px;
        padding: 9px 14px;
    }

    .field input,
    .field select {
        min-height: 48px;
        padding: 10px 13px;
    }

    .field textarea {
        min-height: 110px;
    }

    .phone-prefix,
    .sheba-prefix {
        min-width: 52px;
        padding-inline: 8px;
    }

    .otp-input {
        font-size: 1.65rem !important;
        letter-spacing: 0.22em;
    }

    .dashboard-hero {
        padding: 22px;
        border-radius: 22px;
    }

    .dashboard-hero .avatar-large {
        width: 62px;
        height: 62px;
        border-width: 3px;
        font-size: 1.45rem;
    }

    .dashboard-card-tools {
        top: 10px;
        inset-inline-start: 10px;
    }

    .dashboard-card-link {
        padding-top: 30px;
    }

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

    .dashboard-card {
        min-height: 142px;
        padding: 14px;
        border-radius: 17px;
    }

    .dashboard-card h2 {
        margin-top: 8px;
        font-size: 0.98rem;
        line-height: 1.45;
    }

    .dashboard-card p {
        font-size: 0.75rem;
        line-height: 1.65;
    }

    .card-icon {
        font-size: 1.55rem;
    }

    .dashboard-drag-handle,
    .dashboard-pin-button {
        width: 26px;
        height: 26px;
    }

    .dashboard-drag-handle {
        font-size: 1.15rem;
    }

    .dashboard-pin-button {
        font-size: 0.9rem;
    }

    .dashboard-overview,
    .admin-monitoring-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .dashboard-overview-card,
    .admin-stat-card {
        min-width: 0;
        padding: 14px;
        border-radius: 15px;
    }

    .dashboard-overview-card strong,
    .admin-stat-card strong {
        font-size: 1.2rem;
    }

    .dashboard-overview-card span,
    .dashboard-overview-card small,
    .admin-stat-card span,
    .admin-stat-card small {
        font-size: 0.72rem;
    }

    .dashboard-card:hover {
        transform: none;
    }




    .site-content-modal {
        align-items: end;
        padding: 10px;
    }

    .site-content-modal-dialog {
        width: 100%;
        max-height: calc(100dvh - 20px);
        padding: 24px 16px 18px;
        border-radius: 18px;
    }

    .site-content-modal-close {
        top: 10px;
    }

    .table-wrap {
        margin-inline: -4px;
        padding-inline: 4px;
    }

    .data-table th,
    .data-table td {
        padding: 10px 9px;
        font-size: 0.78rem;
    }

    .notification-page-item {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .notification-page-icon {
        width: 40px;
        height: 40px;
    }

    .notification-page-title-row time {
        white-space: normal;
    }

    .bank-destination div {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .friend-wallet-transfer {
        width: 100%;
    }

    .friend-wallet-transfer > summary {
        width: 100%;
        text-align: center;
    }

    .friend-wallet-transfer-form {
        position: static;
        width: 100%;
        margin-top: 8px;
    }

    .friend-actions > .status-pill {
        align-self: flex-start;
    }

    .admin-user-actions,
    .admin-actions,
    .accounting-void-form {
        width: 100%;
        min-width: 0;
    }

    .admin-form-block {
        align-items: stretch;
    }

    .admin-form-block .field {
        flex-basis: 100%;
    }

    .chat-modal-backdrop {
        align-items: stretch;
        padding: 8px;
    }

    .chat-modal {
        width: 100%;
        max-height: calc(100dvh - 16px);
        border-radius: 18px;
    }

    .chat-modal-header {
        padding: 16px 15px 12px;
    }

    .chat-messages {
        min-height: 180px;
        max-height: none;
        padding: 14px;
    }

    .chat-message {
        max-width: 92%;
    }

    .chat-form {
        padding: 12px;
    }

    .chat-form-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .chat-form-footer .btn {
        width: 100%;
    }

    .landing-section-heading h2,
    .landing-mission h2 {
        font-size: clamp(1.55rem, 7vw, 2.15rem);
    }

    .landing-final-cta {
        padding: 22px;
        border-radius: 21px;
    }
}

/* Mobile color and surface corrections. */
@media (max-width: 540px) {
    .dashboard-card,
    .panel,
    .empty-state,
    .admin-stat-card,
    .dashboard-overview-card,
    .nav-links {
        background: var(--surface);
    }

    html[data-theme="dark"] .dashboard-card,
    html[data-theme="dark"] .panel,
    html[data-theme="dark"] .empty-state,
    html[data-theme="dark"] .admin-stat-card,
    html[data-theme="dark"] .dashboard-overview-card,
    html[data-theme="dark"] .nav-links {
        border-color: var(--line);
        background: var(--surface);
        color: var(--ink);
    }

    html[data-theme="dark"] .dashboard-overview-card span,
    html[data-theme="dark"] .dashboard-overview-card small,
    html[data-theme="dark"] .admin-stat-card span,
    html[data-theme="dark"] .admin-stat-card small {
        color: var(--muted);
    }
}

@media (max-width: 360px) {
    :root {
        --page-gutter: 10px;
    }

    .nav-links {
        grid-template-columns: minmax(0, 1fr) 44px 44px;
        gap: 5px;
        padding: 6px;
    }

    .help-trigger,
    .theme-toggle {
        width: 38px;
        height: 38px;
    }

    .notification-toggle {
        padding-inline: 4px;
    }

    .nav-links > .btn {
        padding-inline: 4px;
        font-size: 0.72rem;
    }

    .dashboard-grid {
        gap: 8px;
    }

    .dashboard-card {
        min-height: 136px;
        padding: 12px;
    }

    .dashboard-card h2 {
        font-size: 0.92rem;
    }

    .dashboard-card p {
        font-size: 0.7rem;
    }

    .dashboard-overview-card,
    .admin-stat-card {
        padding: 12px;
    }
}

/* Short viewport devices such as compact laptops and mobile landscape. */
@media (max-height: 700px) and (min-width: 541px) {
    .hero {
        min-height: auto;
        padding-top: 30px;
        padding-bottom: 54px;
    }

    .auth-page {
        min-height: auto;
        padding-top: 20px;
        padding-bottom: 45px;
    }

    .site-content-modal-dialog {
        max-height: calc(100vh - 28px);
    }

    .chat-modal {
        max-height: calc(100vh - 28px);
    }
}

/* Management tools */
.page-heading-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-tool-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.35fr);
    gap: 20px;
    align-items: start;
}

.admin-tool-layout > .panel {
    min-width: 0;
}

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

.admin-branding-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 15px;
}

.admin-branding-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.admin-branding-card-heading h2 {
    margin: 9px 0 5px;
    font-size: 1.18rem;
}

.admin-branding-card-heading p {
    margin: 0;
    color: var(--muted);
    line-height: 1.8;
}

.admin-branding-dimensions {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--muted);
    direction: ltr;
    font-size: 0.75rem;
    font-weight: 800;
}

.admin-branding-preview-wrap {
    display: grid;
    min-height: 190px;
    place-items: center;
    overflow: hidden;
    padding: 20px;
    border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--line));
    border-radius: 18px;
    background:
        linear-gradient(45deg, color-mix(in srgb, var(--line) 28%, transparent) 25%, transparent 25%),
        linear-gradient(-45deg, color-mix(in srgb, var(--line) 28%, transparent) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--line) 28%, transparent) 75%),
        linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--line) 28%, transparent) 75%),
        var(--surface-soft);
    background-position: 0 0, 0 9px, 9px -9px, -9px 0;
    background-size: 18px 18px;
}

.admin-branding-preview {
    display: block;
    max-width: min(100%, 260px);
    max-height: 150px;
    object-fit: contain;
}

.admin-branding-recommendation {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.8;
}

.admin-branding-recommendation strong {
    color: var(--ink);
}

.admin-branding-form {
    margin-top: auto;
}

.admin-branding-delete-form {
    margin: 0;
}

.branding-security-note {
    margin-bottom: 20px;
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
    background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.branding-security-note .panel-heading {
    margin-bottom: 0;
}

.branding-security-note p {
    max-width: 900px;
    margin-bottom: 0;
    color: var(--muted);
    line-height: 1.9;
}

.selected-site-role-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.selected-site-role-options .permission-option {
    min-height: 58px;
}

.admin-selected-site-list {
    display: grid;
    gap: 14px;
}

.admin-selected-site-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 17px;
    background: var(--surface-soft);
}

.admin-selected-site-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.admin-selected-site-heading h3 {
    margin: 8px 0 0;
}

.admin-selected-site-url {
    display: block;
    margin-top: 12px;
    overflow-wrap: anywhere;
    color: var(--accent-strong);
    direction: ltr;
    text-align: left;
}

.admin-selected-site-card > p {
    margin: 12px 0 0;
    color: var(--muted);
    line-height: 1.85;
}

.admin-selected-site-note {
    display: grid;
    gap: 4px;
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
    border-radius: 13px;
    background: color-mix(in srgb, var(--accent) 6%, var(--surface));
    color: var(--muted);
    line-height: 1.8;
}

.admin-selected-site-note strong {
    color: var(--ink);
}

.admin-training-list,
.admin-contact-list,
.admin-template-list,
.admin-cloud-list,
.daily-message-history {
    display: grid;
    gap: 14px;
}

.admin-training-card,
.admin-contact-card,
.admin-template-card,
.admin-cloud-file-card,
.daily-message-history-item {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 17px;
    background: var(--surface-soft);
}

.admin-training-card-heading,
.admin-contact-card-heading,
.admin-cloud-file-card,
.admin-template-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.admin-training-card h3,
.admin-contact-card h3,
.admin-template-card h3,
.admin-cloud-file-card h3,
.daily-message-history-item p {
    margin: 8px 0 0;
}

.admin-training-card p,
.admin-contact-card p,
.admin-template-card p,
.daily-message-history-item p {
    color: var(--muted);
    line-height: 1.85;
}

.admin-training-card details {
    margin-top: 14px;
}

.admin-training-card summary {
    cursor: pointer;
    color: var(--accent-strong);
    font-weight: 700;
}

.admin-training-body {
    margin-top: 10px;
    padding: 13px;
    border-radius: 13px;
    background: var(--surface);
    color: var(--ink);
    line-height: 1.95;
}

.admin-note-meta,
.admin-contact-meta,
.admin-template-meta,
.admin-cloud-file-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 14px;
    color: var(--muted);
    font-size: 0.8rem;
}

.admin-contact-meta a {
    color: var(--accent-strong);
}

.admin-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.admin-actions form {
    margin: 0;
}

.admin-task-alarm-box {
    margin-top: 14px;
    padding: 14px;
    border: 1px dashed var(--accent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.admin-task-alarm-box .field {
    margin-top: 12px;
}

.sms-security-note {
    border-color: color-mix(in srgb, #d98b24 45%, var(--line));
    background: color-mix(in srgb, #d98b24 9%, var(--surface));
}

.sms-security-note p {
    margin: 8px 0 0;
    color: var(--muted);
    line-height: 1.8;
}

.admin-sms-contact-table {
    min-width: 680px;
}

.admin-cloud-summary {
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}

.admin-cloud-summary strong {
    display: block;
    margin-top: 5px;
    font-size: 1.45rem;
}

.admin-cloud-summary small,
.admin-cloud-summary p {
    color: var(--muted);
}

.cloud-quota-track {
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--line);
}

.cloud-quota-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), #d98b24);
}

.admin-cloud-file-card {
    align-items: center;
}

.admin-cloud-file-icon {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 14px;
    color: var(--accent-strong);
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    font-size: 1.3rem;
}

.admin-cloud-file-info {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-cloud-file-info h3 {
    overflow-wrap: anywhere;
}

.admin-cloud-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 10px;
    margin: 18px 0;
}

.admin-cloud-categories a {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--ink);
    background: var(--surface-soft);
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.admin-cloud-categories a:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
    transform: translateY(-1px);
}

.admin-cloud-categories a.is-active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    color: var(--accent-strong);
}

.admin-cloud-categories a > span {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 11%, var(--surface));
    font-size: 0.8rem;
    font-weight: 800;
}

.admin-cloud-categories strong {
    overflow: hidden;
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-cloud-categories small {
    min-width: 25px;
    padding: 3px 6px;
    border-radius: 999px;
    color: var(--muted);
    background: var(--surface);
    text-align: center;
}

.admin-cloud-type-badge {
    padding: 3px 8px;
    border-radius: 999px;
    color: var(--accent-strong);
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    font-weight: 750;
}

@media (max-width: 540px) {
    .admin-cloud-categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.daily-message-card {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin: 20px 0;
    padding: 19px 22px;
    border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 13%, transparent), transparent 42%),
        var(--surface);
    box-shadow: var(--shadow-soft);
}

.daily-message-mark {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 13px;
    color: var(--accent-strong);
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    font-size: 1.3rem;
}

.daily-message-card .eyebrow {
    margin-bottom: 5px;
}

.daily-message-card blockquote {
    margin: 0;
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.9;
}

.daily-message-card cite,
.daily-message-preview cite {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.82rem;
    font-style: normal;
    font-weight: 800;
}

.daily-message-preview {
    margin-bottom: 20px;
    padding: 24px;
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(135deg, #253c35, #467b63);
    box-shadow: var(--shadow-soft);
}

.daily-message-preview .eyebrow,
.daily-message-preview small {
    color: rgba(255, 255, 255, 0.76);
}

.daily-message-preview blockquote {
    margin: 11px 0 8px;
    font-size: clamp(1.15rem, 2.5vw, 1.65rem);
    font-weight: 800;
    line-height: 1.85;
}

.daily-message-history-quote {
    display: block;
    margin-top: 7px;
    color: var(--accent-strong);
    font-style: normal;
    font-weight: 800;
}

.daily-message-history-item > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.daily-message-history-item small {
    color: var(--muted);
}

.daily-message-archive-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 13px;
}

.daily-message-archive-actions form {
    margin: 0;
}

.daily-message-archive-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
    direction: rtl;
}

.admin-calculator-modal[hidden] {
    display: none;
}

.admin-calculator-modal {
    position: fixed;
    z-index: 1200;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.admin-calculator-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 20, 17, 0.56);
    backdrop-filter: blur(5px);
}

.admin-calculator-dialog {
    position: relative;
    z-index: 1;
    width: min(370px, 100%);
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--surface);
    box-shadow: 0 28px 80px rgba(11, 20, 17, 0.28);
    max-height: min(90vh, 850px);
    overflow-y: auto;
}

.admin-calculator-dialog:has(.admin-calculator-scientific:not([hidden])) {
    width: min(430px, 100%);
}

.admin-calculator-mode {
    display: inline-flex;
    margin-top: 12px;
    padding: 7px 15px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    color: var(--accent);
    background: var(--surface);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.admin-calculator-mode:hover,
.admin-calculator-mode:focus-visible {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.admin-calculator-close {
    position: absolute;
    top: 12px;
    inset-inline-end: 14px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    color: var(--muted);
    background: var(--surface-soft);
    cursor: pointer;
    font-size: 1.35rem;
}

.admin-calculator-display {
    width: 100%;
    margin: 12px 0 16px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--ink);
    background: var(--surface-soft);
    font-size: 1.35rem;
    font-weight: 700;
    text-align: end;
}

.admin-calculator-keys {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.admin-calculator-scientific[hidden] {
    display: none;
}

.admin-calculator-scientific {
    margin-bottom: 9px;
}

.admin-calculator-keys.admin-calculator-scientific button {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}

.admin-calculator-keys button {
    min-height: 48px;
    border: 1px solid var(--line);
    border-radius: 13px;
    color: var(--ink);
    background: var(--surface-soft);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    transition: transform 0.16s ease, background 0.16s ease;
}

.admin-calculator-keys button:hover,
.admin-calculator-keys button:focus-visible {
    background: color-mix(in srgb, var(--accent) 13%, var(--surface));
    transform: translateY(-1px);
}

.admin-calculator-keys .calculator-key-equals {
    color: #fff;
    border-color: var(--accent);
    background: var(--accent);
}

.admin-calculator-keys .calculator-key-zero {
    grid-column: span 2;
}

@media (max-width: 820px) {
    .admin-tool-layout {
        grid-template-columns: 1fr;
    }

    .admin-branding-grid {
        grid-template-columns: 1fr;
    }

    .selected-site-role-options {
        grid-template-columns: 1fr;
    }

    .admin-cloud-summary {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

@media (max-width: 540px) {
    .page-heading-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .install-app-button {
        width: 40px;
        height: 40px;
        padding: 7px;
        border-radius: 50%;
    }

    .install-app-button-label {
        display: none;
    }

    .ios-install-modal {
        padding: 12px;
    }

    .ios-install-modal-dialog {
        max-height: calc(100vh - 24px);
        padding: 24px 18px;
        border-radius: 22px;
    }

    .ios-install-modal-heading {
        gap: 11px;
        padding-inline-end: 30px;
    }

    .ios-install-modal-heading img {
        width: 54px;
        height: 54px;
        padding: 6px;
        border-radius: 16px;
    }

    .ios-install-steps li {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 9px;
        padding: 11px;
    }

    .ios-install-step-number {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }

    .ios-install-modal-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .ios-install-modal-actions .btn {
        width: 100%;
    }

    .admin-training-card-heading,
    .admin-contact-card-heading,
    .admin-selected-site-heading,
    .admin-template-card,
    .admin-cloud-file-card {
        flex-direction: column;
    }

    .admin-training-card .status-pill,
    .admin-contact-card .status-pill,
    .admin-selected-site-card .status-pill {
        align-self: flex-start;
    }

    .admin-cloud-file-card .admin-actions,
    .admin-template-card .btn {
        width: 100%;
    }

    .admin-cloud-file-card .admin-actions .btn,
    .admin-cloud-file-card .admin-actions form {
        flex: 1 1 0;
    }

    .admin-cloud-file-card .admin-actions form .btn {
        width: 100%;
    }

    .daily-message-card {
        padding: 16px;
    }

    .daily-message-card blockquote {
        font-size: 0.92rem;
    }

    .daily-message-archive-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .daily-message-archive-actions form,
    .daily-message-archive-actions .btn {
        width: 100%;
    }

    .daily-message-archive-buttons {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .admin-calculator-modal {
        align-items: end;
        padding: 10px;
    }

    .admin-calculator-dialog {
        width: 100%;
        padding: 20px 16px;
        border-radius: 20px;
    }
}

/* Final board container overrides for the legacy grid declaration. */

/* The free twelve-second phase is visible on the board and hands off to the
 * player's bank without adding another control to the room. */

/* Keep the board wide and place the only game controls below it. */

/* Standalone game-room layout: no site chrome, no side control card. */

/* Compact player cards: keep each bank timer directly opposite the profile. */

/* Desktop player strips: profile right, time bank center, wins left. */

/* A taller board on larger screens while preserving a compact mobile layout. */
.games-page {
    display: grid;
    gap: 22px;
    min-width: 0;
}

.game-subscription-bar {
    display: grid;
    gap: 0;
    width: 100%;
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, #2f855a 30%, var(--line));
    border-radius: 16px;
    background: color-mix(in srgb, #2f855a 8%, var(--surface));
}

.game-profile-gift-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(150px, 0.7fr) minmax(0, 1.8fr);
    gap: clamp(18px, 4vw, 42px);
    align-items: stretch;
    overflow: hidden;
    min-width: 0;
    padding: clamp(20px, 4vw, 34px);
    border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
    border-radius: 26px;
    background:
        radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 35%),
        linear-gradient(135deg, color-mix(in srgb, var(--primary) 9%, var(--surface)), var(--surface));
    box-shadow: 0 18px 48px color-mix(in srgb, var(--primary) 12%, transparent);
    isolation: isolate;
}

.game-profile-gift-card::after {
    position: absolute;
    z-index: -1;
    inset: auto -70px -120px auto;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    content: "";
}

.game-profile-gift-card-art {
    position: relative;
    display: grid;
    min-height: 190px;
    place-items: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 34%, color-mix(in srgb, #fff 26%, transparent), transparent 28%),
        linear-gradient(145deg, color-mix(in srgb, var(--primary) 85%, #160d2d), color-mix(in srgb, var(--accent) 70%, #301b5c));
    color: #fff;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 24%, transparent);
}

.game-profile-gift-card-art-box {
    position: relative;
    z-index: 1;
    display: grid;
    width: 76px;
    height: 76px;
    place-items: center;
    border-radius: 23px;
    background: color-mix(in srgb, #fff 17%, transparent);
    font-size: 2.7rem;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
    transform: rotate(-5deg);
}

.game-profile-gift-card-art-days {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-end: 18px;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 900;
}

.game-profile-gift-card-art small {
    position: absolute;
    inset-block-end: 15px;
    color: color-mix(in srgb, #fff 78%, transparent);
    font-size: 0.72rem;
    font-weight: 700;
}

.game-profile-gift-card-art-spark {
    position: absolute;
    color: #ffd166;
    font-size: 1.15rem;
}

.game-profile-gift-card-art-spark-one { inset-block-start: 34px; inset-inline-start: 24px; }
.game-profile-gift-card-art-spark-two { inset-block-end: 42px; inset-inline-end: 28px; font-size: 0.8rem; }

.game-profile-gift-card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.game-profile-gift-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--success);
    font-size: 0.76rem;
    font-weight: 800;
}

.game-profile-gift-card-meta .badge {
    margin: 0;
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    color: var(--primary-dark);
}

.game-profile-gift-card h2 {
    max-width: 620px;
    margin: 10px 0 8px;
    color: var(--primary-dark);
    font-size: clamp(1.35rem, 3vw, 2.05rem);
    line-height: 1.45;
}

.game-profile-gift-card-content > p {
    max-width: 650px;
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 2;
}

.game-profile-gift-progress {
    max-width: 480px;
    margin-top: 18px;
}

.game-profile-gift-progress-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 800;
}

.game-profile-gift-progress-label strong { color: var(--primary-dark); }

.game-profile-gift-progress-track {
    height: 8px;
    overflow: hidden;
    border-radius: 99px;
    background: color-mix(in srgb, var(--line) 62%, var(--surface));
}

.game-profile-gift-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), var(--success));
    transition: width 180ms ease;
}

.game-profile-gift-card-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.game-profile-gift-card-actions form { margin: 0; }

@media (max-width: 640px) {
    .game-profile-gift-card {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 18px;
        border-radius: 21px;
    }

    .game-profile-gift-card-art {
        min-height: 142px;
    }

    .game-profile-gift-card h2 {
        font-size: 1.35rem;
    }

    .game-profile-gift-card-actions,
    .game-profile-gift-card-actions form,
    .game-profile-gift-card-actions .btn {
        width: 100%;
    }
}

.game-subscription-bar-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.game-subscription-status {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.game-subscription-status .badge {
    margin: 0;
}

.game-subscription-status strong {
    color: var(--text);
    font-size: 0.9rem;
}

.game-subscription-status small {
    color: var(--muted);
    font-size: 0.78rem;
}

.games-mode-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
}

.games-mode-tab {
    min-width: 0;
    min-height: 46px;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.games-mode-tab:hover,
.games-mode-tab:focus-visible {
    color: var(--primary-dark);
    outline: none;
}

.games-mode-tab.is-active {
    border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
    background: var(--surface);
    color: var(--primary-dark);
    box-shadow: var(--shadow-sm, 0 6px 16px rgba(34, 24, 18, 0.08));
}

.games-mode-panel {
    min-width: 0;
    animation: games-mode-enter 180ms ease both;
}

.games-mode-panel[hidden] {
    display: none !important;
}

.games-mode-empty {
    min-height: 180px;
}

.games-empty-state {
    display: grid;
    place-items: center;
    gap: 10px;
    min-height: 180px;
    padding: 28px 16px;
    border: 1px dashed var(--line);
    border-radius: 18px;
    background: var(--surface-soft);
    color: var(--muted);
    text-align: center;
}

.games-empty-state-icon {
    color: var(--accent);
    font-size: 1.5rem;
}

@keyframes games-mode-enter {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.games-catalog {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.game-tile {
    position: relative;
    display: grid;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm, 0 10px 28px rgba(34, 24, 18, 0.08));
    font: inherit;
    text-align: start;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease,
        opacity 160ms ease;
}

button.game-tile {
    cursor: pointer;
}

button.game-tile:hover,
button.game-tile:focus-visible,
.game-tile.is-open {
    border-color: color-mix(in srgb, var(--primary) 58%, var(--line));
    box-shadow: 0 16px 36px color-mix(in srgb, var(--primary) 15%, transparent);
    outline: none;
    transform: translateY(-2px);
}

.game-tile img {
    display: block;
    width: 100%;
    aspect-ratio: 1.52 / 1;
    object-fit: cover;
}

.game-tile > strong,
.game-tile-title {
    display: block;
    padding: 15px 18px 18px;
}

.game-tile-title {
    display: grid;
    gap: 5px;
}

.game-tile-title > strong {
    font-size: clamp(1rem, 2vw, 1.22rem);
}

.game-tile-wins,
.game-variant-wins {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
}

.game-tile-disabled {
    cursor: not-allowed;
    opacity: 0.72;
}

.game-tile-disabled:hover {
    transform: none;
}

.game-tile-badge {
    position: absolute;
    inset-block-start: 14px;
    inset-inline-start: 14px;
    padding: 5px 9px;
    border: 1px solid color-mix(in srgb, #fff 45%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, #171126 78%, transparent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
}

.matchmaking-status-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding-top: 2px;
}

.matchmaking-status-strip .matchmaking-message {
    flex: 1 1 280px;
    min-height: 24px;
    margin: 0;
}

.matchmaking-count {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.matchmaking-status-strip [hidden] {
    display: none !important;
}

@media (max-width: 860px) {
    .games-catalog {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .notification-preferences-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 540px) {
    .games-page {
        gap: 8px;
    }

    .game-subscription-bar {
        padding: 9px 10px;
    }

    .game-subscription-bar-main {
        align-items: center;
        gap: 8px;
    }

    .game-subscription-status {
        min-width: 0;
        gap: 3px 7px;
    }

    .game-subscription-bar .btn {
        flex: 0 0 auto;
        min-height: 36px;
        width: auto;
        padding: 6px 9px;
        font-size: 0.78rem;
        white-space: nowrap;
    }

    .game-subscription-status strong {
        font-size: 0.82rem;
        line-height: 1.4;
    }

    .game-subscription-status small {
        font-size: 0.72rem;
        line-height: 1.4;
    }

    .games-mode-tabs {
        gap: 8px;
        padding: 4px;
    }

    .games-mode-tab {
        min-height: 42px;
        padding-inline: 5px;
        font-size: 0.72rem;
    }

    .games-catalog {
        gap: 8px;
    }

    .game-tile {
        border-radius: 16px;
    }

    .game-tile > strong,
    .game-tile-title {
        padding: 11px 12px 13px;
        font-size: 0.94rem;
    }

    .game-tile-title {
        gap: 3px;
    }

    .game-tile-title > strong {
        font-size: 0.94rem;
    }

    .game-tile-wins,
    .game-variant-wins {
        font-size: 0.64rem;
    }

    .game-tile-badge {
        inset-block-start: 9px;
        inset-inline-start: 9px;
        padding: 4px 7px;
        font-size: 0.64rem;
    }

    .matchmaking-status-strip {
        align-items: stretch;
        display: grid;
        gap: 8px;
    }

    .matchmaking-status-strip .btn {
        justify-self: start;
    }

    .game-invite-item {
        align-items: stretch;
        flex-direction: column;
    }

    .game-invite-actions {
        justify-content: flex-start;
    }
}

.mafia-scenarios {
    display: grid;
    gap: 18px;
    scroll-margin-top: 16px;
    padding: clamp(16px, 3vw, 24px);
    border: 1px solid color-mix(in srgb, #8b5cf6 30%, var(--line));
    border-radius: 22px;
    background:
        radial-gradient(
            circle at 0 0,
            color-mix(in srgb, #9f1239 13%, transparent),
            transparent 38%
        ),
        var(--surface);
}

.mafia-scenarios[hidden] {
    display: none !important;
}

.mafia-scenarios-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.mafia-scenarios-heading h2 {
    margin: 9px 0 4px;
}

.mafia-scenarios-heading p {
    margin: 0;
    color: var(--muted);
}

.mafia-scenarios-mark {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid color-mix(in srgb, #9f1239 45%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, #9f1239 10%, var(--surface-soft));
    color: #9f1239;
    font-size: 1.28rem;
}

.mafia-scenario-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.mafia-scenario-card {
    position: relative;
    display: grid;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: var(--surface-soft);
    color: var(--text);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.mafia-scenario-card:hover,
.mafia-scenario-card:focus-visible,
.mafia-scenario-card.is-selected {
    border-color: color-mix(in srgb, #9f1239 60%, var(--line));
    outline: none;
    transform: translateY(-2px);
}

.mafia-scenario-card.is-selected {
    box-shadow: 0 0 0 3px color-mix(in srgb, #9f1239 18%, transparent);
}

.mafia-scenario-card > img {
    display: block;
    width: 100%;
    aspect-ratio: 1.55 / 1;
    object-fit: cover;
}

.mafia-scenario-card-body {
    display: grid;
    gap: 6px;
    padding: 12px 13px 14px;
}

.mafia-scenario-card-body strong {
    font-size: 0.96rem;
}

.mafia-scenario-card-body small {
    color: var(--muted);
    line-height: 1.75;
    font-size: 0.76rem;
}

.mafia-scenario-status {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-start: 10px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.78);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
}

.mafia-scenario-message {
    min-height: 24px;
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 700;
}

@media (max-width: 860px) {
    .mafia-scenario-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 540px) {
    .mafia-scenarios {
        gap: 8px;
        padding: 14px;
        border-radius: 17px;
    }

    .mafia-scenarios-heading {
        gap: 10px;
    }

    .mafia-scenarios-heading h2 {
        font-size: 1.04rem;
    }

    .mafia-scenarios-heading p {
        font-size: 0.78rem;
    }

    .mafia-scenarios-mark {
        width: 34px;
        height: 34px;
        border-radius: 11px;
        font-size: 1rem;
    }

    .mafia-scenario-grid {
        gap: 8px;
    }

    .mafia-scenario-card {
        border-radius: 13px;
    }

    .mafia-scenario-card-body {
        gap: 4px;
        padding: 9px;
    }

    .mafia-scenario-card-body strong {
        font-size: 0.76rem;
    }

    .mafia-scenario-card-body small {
        font-size: 0.64rem;
        line-height: 1.65;
    }

    .mafia-scenario-status {
        inset-block-start: 7px;
        inset-inline-start: 7px;
        padding: 3px 6px;
        font-size: 0.58rem;
    }
}

.mafia-investigator-page {
    padding-bottom: 36px;
}

.mafia-scenario-page {
    padding-bottom: 36px;
}

.mafia-scenario-overview {
    align-items: stretch;
}

.mafia-scenario-overview h2 {
    margin-bottom: 7px;
}

.mafia-scenario-rules {
    display: grid;
    gap: 5px;
    margin-top: 12px;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.8;
}

.mafia-scenario-meta {
    align-content: center;
}

.investigator-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
    border-color: color-mix(in srgb, #9f1239 32%, var(--line));
    background:
        radial-gradient(
            circle at 0 0,
            color-mix(in srgb, #9f1239 12%, transparent),
            transparent 42%
        ),
        var(--surface);
}

.investigator-intro h2 {
    margin: 9px 0 5px;
}

.investigator-intro p {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    line-height: 1.9;
}

.investigator-subscription-note {
    display: grid;
    min-width: 210px;
    gap: 6px;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
}

.investigator-subscription-note small {
    color: var(--muted);
    line-height: 1.7;
}

.mafia-investigator-app {
    display: grid;
    gap: 18px;
}

.investigator-count-panel,
.investigator-players-panel,
.investigator-roles-panel,
.investigator-assignment-panel {
    min-width: 0;
}

.investigator-count-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.investigator-count-option {
    display: grid;
    min-height: 74px;
    place-items: center;
    gap: 2px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface-soft);
    color: var(--text);
    font: inherit;
    font-size: 1.35rem;
    font-weight: 900;
    cursor: pointer;
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.investigator-count-option small {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.investigator-count-option:hover,
.investigator-count-option:focus-visible,
.investigator-count-option.is-selected {
    border-color: color-mix(in srgb, #9f1239 65%, var(--line));
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, #9f1239 15%, transparent);
    transform: translateY(-1px);
}

.investigator-count-note {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.7;
}

.investigator-workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 18px;
}

.investigator-players-panel,
.investigator-roles-panel,
.investigator-assignment-panel {
    display: grid;
    align-content: start;
    gap: 16px;
}

.investigator-group-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface-soft);
}

.investigator-stage-help {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    line-height: 1.75;
}

.investigator-players-list,
.investigator-role-pool,
.investigator-assignment-list {
    display: grid;
    gap: 8px;
}

.investigator-player-row,
.investigator-role-row,
.investigator-assignment-row {
    display: grid;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface-soft);
}

.investigator-player-row {
    grid-template-columns: 34px minmax(0, 1fr) 34px;
}

.investigator-role-row {
    grid-template-columns: 30px minmax(0, 1fr) auto;
}

.investigator-assignment-row {
    grid-template-columns: 36px minmax(0, 1fr) auto;
}

.investigator-player-row input,
.investigator-role-row select,
.investigator-assignment-row select {
    min-width: 0;
    width: 100%;
}

.investigator-role-player-button {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-start;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease;
}

.investigator-role-player-button:not(:disabled):hover,
.investigator-role-player-button:not(:disabled):focus-visible {
    border-color: color-mix(in srgb, #9f1239 38%, var(--line));
    background: color-mix(in srgb, #9f1239 7%, var(--surface));
    outline: none;
}

.investigator-role-player-button:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.investigator-assignment-row.is-role-seen {
    border-color: color-mix(in srgb, #16a34a 38%, var(--line));
    background: color-mix(in srgb, #16a34a 7%, var(--surface-soft));
}

.investigator-role-player-button.is-revealed {
    border-color: color-mix(in srgb, #16a34a 45%, var(--line));
    background: color-mix(in srgb, #16a34a 13%, var(--surface));
    color: #15803d;
    opacity: 1;
}

.investigator-assignment-status {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.6;
    text-align: end;
}

.investigator-assignment-row.is-role-seen .investigator-assignment-status {
    color: #15803d;
}

.investigator-seat,
.investigator-role-index,
.investigator-assignment-seat {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 10px;
    background: color-mix(in srgb, #9f1239 12%, var(--surface));
    color: var(--accent-strong);
    font-size: 0.8rem;
    font-weight: 900;
}

.investigator-remove-player {
    width: 34px;
    height: 34px;
    border: 1px solid color-mix(in srgb, #dc2626 35%, var(--line));
    border-radius: 10px;
    background: color-mix(in srgb, #dc2626 8%, var(--surface));
    color: #dc2626;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.investigator-role-team,
.investigator-assignment-team {
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    white-space: nowrap;
}

.investigator-role-team.team-mafia,
.investigator-assignment-team.team-mafia {
    background: color-mix(in srgb, #dc2626 12%, var(--surface));
    color: #b91c1c;
}

.investigator-role-team.team-town {
    background: color-mix(in srgb, #16a34a 12%, var(--surface));
    color: #15803d;
}

.investigator-role-team.team-independent,
.investigator-assignment-team.team-independent,
.investigator-role-dialog-card .badge.team-independent {
    background: color-mix(in srgb, #7c3aed 12%, var(--surface));
    color: #6d28d9;
}

.investigator-role-team.team-neutral,
.investigator-assignment-team.team-neutral,
.investigator-role-dialog-card .badge.team-neutral {
    background: color-mix(in srgb, #64748b 14%, var(--surface));
    color: #475569;
}

.investigator-role-team.team-liberal,
.investigator-assignment-team.team-liberal,
.investigator-role-dialog-card .badge.team-liberal {
    background: color-mix(in srgb, #2563eb 12%, var(--surface));
    color: #1d4ed8;
}

.investigator-role-team.team-fascist,
.investigator-assignment-team.team-fascist,
.investigator-role-dialog-card .badge.team-fascist {
    background: color-mix(in srgb, #dc2626 12%, var(--surface));
    color: #b91c1c;
}

.investigator-role-team.team-partisan,
.investigator-assignment-team.team-partisan,
.investigator-role-dialog-card .badge.team-partisan {
    background: color-mix(in srgb, #16a34a 12%, var(--surface));
    color: #15803d;
}

.investigator-role-team.team-gestapo,
.investigator-assignment-team.team-gestapo,
.investigator-role-dialog-card .badge.team-gestapo {
    background: color-mix(in srgb, #7f1d1d 13%, var(--surface));
    color: #991b1b;
}

.investigator-role-team.team-client,
.investigator-assignment-team.team-client,
.investigator-role-dialog-card .badge.team-client {
    background: color-mix(in srgb, #d97706 13%, var(--surface));
    color: #b45309;
}

.investigator-panel-actions,
.investigator-assignment-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.investigator-panel-actions .btn {
    width: auto;
}

.investigator-role-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.role-count-chip {
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 0.73rem;
    font-weight: 800;
}

.role-count-mafia {
    border-color: color-mix(in srgb, #dc2626 28%, var(--line));
    color: #b91c1c;
}

.role-count-town {
    border-color: color-mix(in srgb, #16a34a 28%, var(--line));
    color: #15803d;
}

.investigator-assignment-toolbar {
    justify-content: flex-start;
}

.investigator-action-message {
    min-height: 24px;
    color: var(--muted);
    font-size: 0.83rem;
    font-weight: 800;
}

.investigator-action-message.is-error {
    color: #b91c1c;
}

.investigator-action-message.is-success {
    color: #15803d;
}

.investigator-role-dialog {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 18px;
}

.investigator-role-dialog[hidden] {
    display: none;
}

.investigator-role-dialog-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(15 23 42 / 68%);
    backdrop-filter: blur(4px);
}

.investigator-role-dialog-card {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(100%, 430px);
    gap: 12px;
    padding: 26px;
    border: 1px solid color-mix(in srgb, #9f1239 28%, var(--line));
    border-radius: 22px;
    background: var(--surface);
    box-shadow: 0 24px 80px rgb(15 23 42 / 30%);
    text-align: center;
}

.investigator-role-dialog-close {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 12px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.investigator-role-dialog-player {
    margin: 8px 0 0;
    color: var(--muted);
    font-weight: 800;
}

.investigator-role-dialog-card h3 {
    margin: 0;
    color: var(--accent-strong);
    font-size: 1.55rem;
}

.investigator-role-dialog-description {
    margin: 0;
    color: var(--muted);
    line-height: 1.9;
}

.mafia-role-dialog-allies {
    display: grid;
    gap: 7px;
    padding: 12px 13px;
    border: 1px solid color-mix(in srgb, #2563eb 24%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, #2563eb 6%, var(--surface-soft));
    text-align: start;
}

.mafia-role-dialog-allies[hidden] {
    display: none;
}

.mafia-role-dialog-allies strong {
    color: var(--accent-strong);
}

.mafia-role-dialog-allies p {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.75;
}

.mafia-role-dialog-allies ul {
    display: grid;
    gap: 5px;
    margin: 0;
    padding-inline-start: 20px;
}

.mafia-role-dialog-allies li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--text);
    font-size: 0.82rem;
}

.mafia-role-dialog-allies li span {
    color: var(--muted);
    font-size: 0.74rem;
}

.investigator-role-dialog-card .badge.team-mafia {
    background: color-mix(in srgb, #dc2626 12%, var(--surface));
    color: #b91c1c;
}

.investigator-role-dialog-card .badge.team-town {
    background: color-mix(in srgb, #16a34a 12%, var(--surface));
    color: #15803d;
}

@media (max-width: 860px) {
    .investigator-intro {
        align-items: stretch;
        flex-direction: column;
    }

    .investigator-subscription-note {
        min-width: 0;
    }

    .investigator-workspace-grid {
        grid-template-columns: 1fr;
    }

    .investigator-group-toolbar {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .investigator-count-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .investigator-assignment-row {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .investigator-assignment-status {
        grid-column: 2 / -1;
        text-align: start;
    }

    .investigator-panel-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .investigator-panel-actions .btn {
        width: 100%;
    }
}

@media (max-width: 460px) {
    .investigator-player-row {
        grid-template-columns: 30px minmax(0, 1fr) 30px;
        gap: 6px;
        padding: 7px;
    }

    .investigator-role-row {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .investigator-role-team {
        grid-column: 2;
        justify-self: start;
    }

    .investigator-assignment-row {
        gap: 7px;
        padding: 8px;
    }

    .investigator-role-dialog-card {
        padding: 24px 18px 18px;
    }
}

.subscription-page {
    display: grid;
    gap: 22px;
}

.subscription-current-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: clamp(18px, 3vw, 26px);
    border-color: color-mix(in srgb, #2f855a 30%, var(--line));
    background:
        radial-gradient(
            circle at 0 0,
            color-mix(in srgb, #2f855a 12%, transparent),
            transparent 42%
        ),
        var(--surface);
}

.subscription-current-card h2 {
    margin: 10px 0 5px;
}

.subscription-current-card p {
    margin: 0;
    color: var(--muted);
}

.subscription-current-card strong {
    color: var(--text);
}

.subscription-wallet-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface-soft);
}

.subscription-wallet-summary > div {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.subscription-wallet-summary span,
.subscription-wallet-summary small {
    color: var(--muted);
}

.subscription-wallet-summary strong {
    color: var(--primary);
    font-size: 1.3rem;
}

.subscription-section {
    display: grid;
    gap: 18px;
    padding: clamp(18px, 3vw, 26px);
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
    border-radius: 22px;
    background:
        radial-gradient(
            circle at 100% 0,
            color-mix(in srgb, var(--primary) 10%, transparent),
            transparent 42%
        ),
        var(--surface);
}

.subscription-plan-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.subscription-plan-card {
    position: relative;
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
    padding: 19px 16px 17px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface-soft);
    box-shadow: var(--shadow-sm, 0 10px 28px rgba(34, 24, 18, 0.08));
}

.subscription-plan-card.is-featured {
    border-color: var(--subscription-plan-color, var(--primary));
    box-shadow:
        0 18px 45px color-mix(in srgb, var(--subscription-plan-color, var(--primary)) 20%, transparent),
        inset 0 0 0 1px var(--subscription-plan-color, var(--primary));
}

.subscription-plan-card.is-featured::after {
    background: var(--subscription-plan-color, var(--primary));
}

.subscription-plan-access-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.subscription-plan-access-list span {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: .76rem;
    font-weight: 700;
}

.game-subscription-access-summary {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid color-mix(in srgb, #2f855a 22%, var(--line));
}

.game-subscription-access-summary summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--text);
    font-size: .86rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.game-subscription-access-summary summary::-webkit-details-marker {
    display: none;
}

.game-subscription-access-summary summary:focus-visible {
    border-radius: 8px;
    outline: 2px solid var(--primary);
    outline-offset: 4px;
}

.game-subscription-access-arrow {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-inline-end: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
}

.game-subscription-access-summary[open] .game-subscription-access-arrow {
    transform: rotate(225deg);
}

.game-subscription-access-summary .subscription-plan-access-list {
    margin-top: 10px;
}

@media (max-width: 540px) {
    .game-subscription-access-summary summary {
        min-width: 0;
        font-size: 0.78rem;
        line-height: 1.4;
    }

    .game-subscription-access-summary summary strong {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

.subscription-plan-access-list span.is-allowed {
    background: rgba(34, 197, 94, .1);
    color: #15803d;
}

.subscription-plan-access-list span.is-locked {
    background: rgba(239, 68, 68, .08);
    color: #b91c1c;
}

.subscription-plan-card-gift {
    position: relative;
    overflow: hidden;
    border-color: rgba(245, 158, 11, 0.55);
    background:
        radial-gradient(circle at 88% 8%, rgba(251, 191, 36, 0.22), transparent 42%),
        linear-gradient(145deg, rgba(120, 53, 15, 0.28), rgba(30, 41, 59, 0.9));
    box-shadow: 0 18px 42px rgba(245, 158, 11, 0.14);
}

.subscription-plan-card-gift::before {
    content: 'پیشنهاد ویژه شما';
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 5px 10px;
    border: 1px solid rgba(253, 230, 138, 0.45);
    border-radius: 999px;
    color: #fef3c7;
    background: rgba(120, 53, 15, 0.42);
    font-size: 0.72rem;
    font-weight: 700;
}

.subscription-plan-card-gift .subscription-plan-icon {
    color: #fbbf24;
    filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.45));
}

.subscription-plan-card-gift .subscription-plan-price {
    color: #fde68a;
}

.subscription-plan-card::after {
    position: absolute;
    inset-block-start: -34px;
    inset-inline-end: -28px;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    content: "";
}

.subscription-plan-icon {
    position: absolute;
    inset-block-start: 14px;
    inset-inline-end: 16px;
    color: var(--primary);
    font-size: 1.25rem;
}

.subscription-plan-card h3 {
    margin: 0;
    font-size: 1.02rem;
}

.subscription-plan-price {
    display: flex;
    align-items: baseline;
    gap: 5px;
    color: var(--primary);
    font-size: clamp(1.25rem, 2.7vw, 1.7rem);
}

.subscription-plan-price small {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.subscription-plan-card p {
    min-height: 42px;
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.8;
}

.subscription-plan-card form {
    margin-top: auto;
}

.subscription-plan-card .btn {
    width: 100%;
}

.subscription-payment-note {
    padding: 18px 20px;
}

.subscription-history {
    display: grid;
    gap: 18px;
    padding: clamp(18px, 3vw, 26px);
}

.subscription-history .panel-heading {
    margin: 0;
}

.subscription-history-table {
    min-width: 760px;
}

.subscription-history-table th,
.subscription-history-table td {
    vertical-align: middle;
}

.subscription-history-table td small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.78rem;
}

.subscription-history-table td strong {
    color: var(--text);
}

.subscription-payment-note h2 {
    margin: 0 0 7px;
    font-size: 1.05rem;
}

.subscription-payment-note p {
    margin: 0;
    color: var(--muted);
    line-height: 1.9;
}

.subscription-payment-note strong {
    color: var(--text);
}

@media (max-width: 980px) {
    .subscription-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 540px) {
    .subscription-page {
        gap: 16px;
    }

    .subscription-current-card,
    .subscription-wallet-summary {
        align-items: stretch;
        display: grid;
    }

    .subscription-current-card .btn,
    .subscription-wallet-summary .btn {
        justify-self: start;
    }

    .subscription-section {
        gap: 13px;
        padding: 14px;
        border-radius: 17px;
    }

    .subscription-section .panel-heading h2 {
        font-size: 1.05rem;
    }

    .subscription-section .panel-heading p {
        font-size: 0.78rem;
    }

    .subscription-plan-grid {
        gap: 9px;
    }

    .subscription-plan-card {
        gap: 7px;
        padding: 13px 11px;
        border-radius: 14px;
    }

    .subscription-plan-card h3 {
        font-size: 0.8rem;
    }

    .subscription-plan-price {
        font-size: 1.05rem;
    }

    .subscription-plan-price small {
        font-size: 0.58rem;
    }

    .subscription-plan-card p {
        min-height: 40px;
        font-size: 0.65rem;
    }

    .subscription-plan-card .btn {
        padding-inline: 8px;
        font-size: 0.7rem;
    }
}

/* Privacy policy landing page. */
.privacy-page {
    overflow: hidden;
}

.privacy-hero {
    position: relative;
    padding: 64px 0 72px;
    background:
        radial-gradient(circle at 88% 8%, rgba(201, 139, 83, 0.2), transparent 33%),
        linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 74%, transparent), transparent);
}

.privacy-hero::before {
    position: absolute;
    top: -190px;
    left: -170px;
    width: 510px;
    height: 510px;
    border: 1px solid rgba(201, 139, 83, 0.16);
    border-radius: 50%;
    box-shadow:
        0 0 0 34px rgba(201, 139, 83, 0.05),
        0 0 0 78px rgba(201, 139, 83, 0.025);
    content: "";
    pointer-events: none;
}

.privacy-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    align-items: center;
    gap: 66px;
}

.privacy-hero-copy {
    position: relative;
    z-index: 1;
}

.privacy-hero-copy h1 {
    max-width: 720px;
    margin: 0 0 22px;
    color: var(--primary-dark);
    font-size: clamp(2.65rem, 6vw, 5.4rem);
    letter-spacing: -0.045em;
    line-height: 1.14;
}

.privacy-hero-copy > p {
    max-width: 660px;
    margin: 0 0 30px;
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 2;
}

.privacy-hero-card {
    position: relative;
    display: grid;
    gap: 22px;
    min-height: 410px;
    padding: 30px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 31px;
    background:
        radial-gradient(circle at 85% 8%, rgba(230, 186, 124, 0.27), transparent 30%),
        linear-gradient(145deg, #4a2b20, #1f1410);
    box-shadow: 0 30px 80px rgba(70, 39, 25, 0.22);
    color: #fff;
}

.privacy-hero-card::after {
    position: absolute;
    right: -100px;
    bottom: -150px;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    box-shadow: 0 0 0 26px rgba(255, 255, 255, 0.03);
    content: "";
    pointer-events: none;
}

.privacy-shield {
    display: grid;
    width: 94px;
    height: 108px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 47% 47% 54% 54% / 37% 37% 63% 63%;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 52%),
        rgba(201, 139, 83, 0.24);
    box-shadow:
        inset 0 0 0 9px rgba(255, 255, 255, 0.045),
        0 14px 38px rgba(0, 0, 0, 0.16);
    color: #f2ca8b;
    font-size: 2rem;
}

.privacy-hero-card-copy {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: start;
    gap: 10px;
}

.privacy-hero-card-copy strong {
    max-width: 360px;
    font-size: clamp(1.45rem, 3vw, 2.15rem);
    line-height: 1.35;
}

.privacy-hero-card-copy p {
    max-width: 390px;
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.9;
}

.privacy-date-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-self: end;
}

.privacy-date-grid > div {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 12px 13px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
}

.privacy-date-grid span {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.72rem;
}

.privacy-date-grid strong {
    color: #fff;
    font-size: 0.82rem;
    line-height: 1.6;
}

.privacy-overview-section {
    padding-top: 74px;
}

.privacy-principles-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    margin-top: 30px;
}

.privacy-principle-card {
    display: grid;
    align-content: start;
    gap: 10px;
    min-height: 190px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.privacy-principle-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 14%, var(--surface-soft));
    color: var(--primary);
    font-size: 1.35rem;
    font-weight: 900;
}

.privacy-principle-card h3 {
    margin: 0;
    color: var(--primary-dark);
    line-height: 1.55;
}

.privacy-principle-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.9;
}

.privacy-policy-section {
    margin-top: 76px;
}

.privacy-policy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 30px;
}

.privacy-policy-card {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 240px;
    padding: 23px;
    border: 1px solid var(--line);
    border-radius: 21px;
    background: var(--surface);
    box-shadow: var(--shadow);
    scroll-margin-top: 24px;
}

.privacy-policy-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.privacy-policy-icon {
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    border-radius: 13px;
    background: color-mix(in srgb, #9f1239 12%, var(--surface-soft));
    color: #9f1239;
    font-size: 1.18rem;
    font-weight: 900;
}

.privacy-policy-anchor {
    color: var(--muted);
    direction: ltr;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.7rem;
    opacity: 0.7;
}

.privacy-policy-card h3 {
    margin: 0;
    color: var(--primary-dark);
    font-size: 1.12rem;
    line-height: 1.6;
}

.privacy-policy-body {
    margin: 0;
    color: var(--muted);
    line-height: 2;
    white-space: normal;
}

.privacy-faq-section {
    padding-top: 78px;
}

.privacy-final-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-top: 80px;
    margin-bottom: 80px;
    padding: 35px 40px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 27px;
    background:
        radial-gradient(circle at 10% 10%, rgba(201, 139, 83, 0.28), transparent 34%),
        linear-gradient(120deg, #3f241a, #1d120d);
    box-shadow: 0 28px 70px rgba(70, 39, 25, 0.2);
    color: #fff;
}

.privacy-final-cta h2 {
    margin: 8px 0;
    color: #fff;
    font-size: clamp(1.7rem, 4vw, 3rem);
}

.privacy-final-cta p:last-child {
    max-width: 650px;
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    line-height: 1.9;
}

.privacy-final-cta .eyebrow {
    color: #e9bd7a;
}

.privacy-final-cta .btn-secondary {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

html[data-theme="dark"] .privacy-hero {
    background:
        radial-gradient(circle at 88% 8%, rgba(201, 139, 83, 0.15), transparent 33%),
        linear-gradient(180deg, rgba(67, 42, 31, 0.35), transparent);
}

html[data-theme="dark"] .privacy-final-cta {
    background:
        radial-gradient(circle at 10% 10%, rgba(201, 139, 83, 0.22), transparent 34%),
        linear-gradient(120deg, #3c261e, #1c1411);
}

@media (max-width: 920px) {
    .privacy-hero-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .privacy-hero-copy {
        text-align: center;
    }

    .privacy-hero-copy > p {
        margin-inline: auto;
    }

    .privacy-hero-copy .landing-hero-actions {
        justify-content: center;
    }

    .privacy-hero-card {
        width: min(100%, 540px);
        margin-inline: auto;
    }

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

@media (max-width: 700px) {
    .privacy-hero {
        padding-top: 38px;
    }

    .privacy-hero-copy h1 {
        font-size: clamp(2.3rem, 12vw, 4rem);
    }

    .privacy-hero-copy > p {
        font-size: 0.95rem;
    }

    .privacy-principles-grid,
    .privacy-policy-grid {
        grid-template-columns: 1fr;
    }

    .privacy-overview-section,
    .privacy-policy-section,
    .privacy-faq-section {
        padding-top: 54px;
    }

    .privacy-policy-section {
        margin-top: 54px;
    }

    .privacy-final-cta {
        align-items: stretch;
        flex-direction: column;
        margin-top: 54px;
        margin-bottom: 54px;
        padding: 25px 20px;
        border-radius: 21px;
    }

    .privacy-final-cta .hero-actions {
        width: 100%;
        flex-direction: column;
    }

    .privacy-final-cta .btn {
        width: 100%;
    }
}

@media (max-width: 460px) {
    .privacy-hero-card {
        gap: 17px;
        min-height: 0;
        padding: 21px;
        border-radius: 24px;
    }

    .privacy-shield {
        width: 78px;
        height: 90px;
    }

    .privacy-date-grid {
        grid-template-columns: 1fr;
    }

    .privacy-policy-card,
    .privacy-principle-card {
        padding: 18px;
        border-radius: 17px;
    }
}

/* Player guide landing page. */
.guide-page {
    overflow: hidden;
}

.guide-hero {
    position: relative;
    padding: 64px 0 72px;
    background:
        radial-gradient(circle at 10% 10%, rgba(159, 18, 57, 0.11), transparent 30%),
        radial-gradient(circle at 88% 8%, rgba(201, 139, 83, 0.2), transparent 33%),
        linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 74%, transparent), transparent);
}

.guide-hero::before {
    position: absolute;
    top: -170px;
    right: -150px;
    width: 500px;
    height: 500px;
    border: 1px solid rgba(201, 139, 83, 0.17);
    border-radius: 50%;
    box-shadow:
        0 0 0 32px rgba(201, 139, 83, 0.05),
        0 0 0 74px rgba(201, 139, 83, 0.025);
    content: "";
    pointer-events: none;
}

.guide-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    align-items: center;
    gap: 64px;
}

.guide-hero-copy {
    position: relative;
    z-index: 1;
}

.guide-hero-copy h1 {
    max-width: 740px;
    margin: 0 0 22px;
    color: var(--primary-dark);
    font-size: clamp(2.55rem, 5.8vw, 5.2rem);
    letter-spacing: -0.045em;
    line-height: 1.16;
}

.guide-hero-copy > p {
    max-width: 680px;
    margin: 0 0 30px;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 2;
}

.guide-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 620px;
    margin-top: 28px;
}

.guide-hero-stat {
    display: grid;
    gap: 5px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.guide-hero-stat strong {
    color: var(--primary-dark);
    font-size: 1.05rem;
}

.guide-hero-stat span {
    color: var(--muted);
    font-size: 0.73rem;
    line-height: 1.65;
}

.guide-hero-card {
    position: relative;
    display: grid;
    gap: 18px;
    min-height: 430px;
    padding: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 31px;
    background:
        radial-gradient(circle at 80% 10%, rgba(230, 186, 124, 0.26), transparent 30%),
        linear-gradient(145deg, #4c2a21, #1d1210);
    box-shadow: 0 30px 80px rgba(70, 39, 25, 0.23);
    color: #fff;
}

.guide-hero-card::after {
    position: absolute;
    bottom: -150px;
    left: -90px;
    width: 320px;
    height: 320px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    box-shadow: 0 0 0 28px rgba(255, 255, 255, 0.025);
    content: "";
    pointer-events: none;
}

.guide-hero-card-topline {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.guide-hero-card-mark {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    color: #f2ca8b;
    font-weight: 900;
}

.guide-hero-compass {
    position: relative;
    display: grid;
    width: min(100%, 310px);
    aspect-ratio: 1;
    place-items: center;
    margin: 10px auto 4px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.1) 0 2px, transparent 3px),
        repeating-conic-gradient(
            from 0deg,
            rgba(255, 255, 255, 0.12) 0deg 1deg,
            transparent 1deg 30deg
        );
    box-shadow:
        0 0 0 14px rgba(255, 255, 255, 0.035),
        0 0 0 33px rgba(255, 255, 255, 0.02);
}

.guide-compass-ring {
    position: absolute;
    border: 1px solid rgba(242, 202, 139, 0.35);
    border-radius: 50%;
}

.guide-compass-ring-one {
    inset: 17%;
}

.guide-compass-ring-two {
    inset: 31%;
    border-color: rgba(255, 255, 255, 0.22);
}

.guide-compass-center {
    position: relative;
    z-index: 1;
    display: grid;
    width: 74px;
    height: 74px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 22px;
    background: linear-gradient(145deg, #d09a5c, #8d4c30);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 2rem;
    font-weight: 900;
}

.guide-compass-label {
    position: absolute;
    z-index: 1;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    font-weight: 800;
}

.guide-compass-label-top {
    top: 8%;
}

.guide-compass-label-right {
    right: 8%;
}

.guide-compass-label-bottom {
    bottom: 8%;
}

.guide-compass-label-left {
    left: 7%;
}

.guide-hero-card-copy {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 7px;
    margin-top: auto;
}

.guide-hero-card-copy strong {
    font-size: 1.25rem;
    line-height: 1.5;
}

.guide-hero-card-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.8;
}

.guide-overview-section {
    padding-top: 74px;
}

.guide-section-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 30px;
}

.guide-section-nav a {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--ink);
    text-decoration: none;
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.guide-section-nav a:hover,
.guide-section-nav a:focus-visible {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent);
    transform: translateY(-2px);
}

.guide-section-nav a > span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 14%, var(--surface-soft));
    color: var(--primary);
    font-size: 0.95rem;
    font-weight: 900;
}

.guide-section-nav strong {
    min-width: 0;
    overflow: hidden;
    color: var(--primary-dark);
    font-size: 0.82rem;
    line-height: 1.55;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guide-section-nav small {
    color: var(--muted);
    font-size: 0.7rem;
}

.guide-content-section {
    padding-top: 78px;
}

.guide-section-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 18px;
    max-width: 920px;
}

.guide-section-number {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 17px;
    background: linear-gradient(145deg, var(--primary), var(--accent));
    box-shadow: 0 12px 24px rgba(159, 18, 57, 0.18);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 900;
}

.guide-section-heading h2 {
    margin: 7px 0 12px;
    color: var(--primary-dark);
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    line-height: 1.25;
}

.guide-section-heading > div:last-child > p:last-child {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    line-height: 2;
}

.guide-step-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 30px;
}

.guide-step-card,
.guide-feature-card {
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.guide-step-card {
    position: relative;
    display: grid;
    align-content: start;
    gap: 10px;
    min-height: 215px;
    padding: 22px;
}

.guide-step-number {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
    border-radius: 11px;
    background: color-mix(in srgb, var(--accent) 12%, var(--surface-soft));
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 900;
}

.guide-step-card h3,
.guide-feature-card h3 {
    margin: 0;
    color: var(--primary-dark);
    line-height: 1.6;
}

.guide-step-card p,
.guide-feature-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.95;
}

.guide-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 30px;
}

.guide-feature-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 13px;
    min-height: 170px;
    padding: 20px;
}

.guide-feature-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    background: color-mix(in srgb, #9f1239 12%, var(--surface-soft));
    color: #9f1239;
    font-size: 0.8rem;
    font-weight: 900;
}

.guide-quick-section {
    margin-top: 78px;
}

.guide-quick-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    align-items: center;
    gap: 44px;
}

.guide-quick-copy h2 {
    max-width: 520px;
    margin: 10px 0 12px;
    color: var(--primary-dark);
    font-size: clamp(1.8rem, 4vw, 3.1rem);
    line-height: 1.25;
}

.guide-quick-copy > p:last-child {
    max-width: 520px;
    margin: 0;
    color: var(--muted);
    line-height: 1.95;
}

.guide-quick-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.guide-quick-list > div {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 61px;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

.guide-quick-list span {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 9px;
    background: color-mix(in srgb, var(--accent) 14%, var(--surface-soft));
    color: var(--primary);
    font-size: 0.76rem;
    font-weight: 900;
}

.guide-quick-list strong {
    color: var(--primary-dark);
    font-size: 0.83rem;
    line-height: 1.6;
}

.guide-faq-section {
    padding-top: 78px;
}

.guide-final-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-top: 80px;
    margin-bottom: 80px;
    padding: 35px 40px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 27px;
    background:
        radial-gradient(circle at 10% 10%, rgba(201, 139, 83, 0.28), transparent 34%),
        linear-gradient(120deg, #3f241a, #1d120d);
    box-shadow: 0 28px 70px rgba(70, 39, 25, 0.2);
    color: #fff;
}

.guide-final-cta h2 {
    margin: 8px 0;
    color: #fff;
    font-size: clamp(1.7rem, 4vw, 3rem);
}

.guide-final-cta p:last-child {
    max-width: 650px;
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    line-height: 1.9;
}

.guide-final-cta .eyebrow {
    color: #e9bd7a;
}

.guide-final-cta .btn-secondary {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

html[data-theme="dark"] .guide-hero {
    background:
        radial-gradient(circle at 10% 10%, rgba(159, 18, 57, 0.1), transparent 30%),
        radial-gradient(circle at 88% 8%, rgba(201, 139, 83, 0.15), transparent 33%),
        linear-gradient(180deg, rgba(67, 42, 31, 0.35), transparent);
}

html[data-theme="dark"] .guide-final-cta {
    background:
        radial-gradient(circle at 10% 10%, rgba(201, 139, 83, 0.22), transparent 34%),
        linear-gradient(120deg, #3c261e, #1c1411);
}

@media (max-width: 920px) {
    .guide-hero-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .guide-hero-copy {
        text-align: center;
    }

    .guide-hero-copy > p {
        margin-inline: auto;
    }

    .guide-hero-copy .landing-hero-actions,
    .guide-hero-stats {
        justify-content: center;
        margin-inline: auto;
    }

    .guide-hero-card {
        width: min(100%, 510px);
        margin-inline: auto;
    }

    .guide-section-nav,
    .guide-step-grid,
    .guide-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .guide-hero {
        padding-top: 38px;
    }

    .guide-hero-copy h1 {
        font-size: clamp(2.25rem, 11.5vw, 4rem);
    }

    .guide-hero-copy > p {
        font-size: 0.95rem;
    }

    .guide-section-nav,
    .guide-step-grid,
    .guide-feature-grid,
    .guide-quick-list {
        grid-template-columns: 1fr;
    }

    .guide-overview-section,
    .guide-content-section,
    .guide-faq-section {
        padding-top: 54px;
    }

    .guide-quick-section {
        margin-top: 54px;
    }

    .guide-quick-layout {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .guide-final-cta {
        align-items: stretch;
        flex-direction: column;
        margin-top: 54px;
        margin-bottom: 54px;
        padding: 25px 20px;
        border-radius: 21px;
    }

    .guide-final-cta .hero-actions {
        width: 100%;
        flex-direction: column;
    }

    .guide-final-cta .btn {
        width: 100%;
    }
}

@media (max-width: 460px) {
    .guide-hero-card {
        min-height: 0;
        padding: 19px;
        border-radius: 24px;
    }

    .guide-hero-compass {
        width: 250px;
    }

    .guide-hero-stats {
        grid-template-columns: 1fr;
        text-align: start;
    }

    .guide-section-heading {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .guide-section-number {
        width: 43px;
        height: 43px;
        border-radius: 13px;
    }

    .guide-step-card,
    .guide-feature-card {
        padding: 18px;
        border-radius: 17px;
    }
}

/* Chess matchmaking card and two-player room. */
.chess-room-entry {
    scroll-margin-top: 16px;
    display: grid;
    gap: 18px;
    padding: clamp(16px, 3vw, 24px);
    border: 1px solid color-mix(in srgb, #b36d32 35%, var(--line));
    border-radius: 22px;
    background:
        radial-gradient(
            circle at 100% 0,
            color-mix(in srgb, #b36d32 14%, transparent),
            transparent 40%
        ),
        var(--surface);
}

.chess-room-entry[hidden] {
    display: none !important;
}

.chess-room-entry-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.chess-room-entry-heading h2 {
    margin: 9px 0 4px;
}

.chess-room-entry-heading p {
    margin: 0;
    color: var(--muted);
}

.chess-room-entry-mark {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid color-mix(in srgb, #b36d32 48%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, #b36d32 12%, var(--surface-soft));
    color: #b36d32;
    font-size: 1.45rem;
}

.chess-room-entry-card {
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr) auto;
    align-items: center;
    gap: 17px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface-soft);
}

.chess-room-entry-card > img {
    display: block;
    width: 105px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 13px;
}

.chess-room-entry-card strong {
    color: var(--primary-dark);
    font-size: 1.06rem;
}

.chess-room-entry-card p {
    margin: 7px 0 0;
    color: var(--muted);
    line-height: 1.8;
}

.chess-room-entry-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}

.chess-room-entry-actions [hidden] {
    display: none !important;
}

.chess-room-entry-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.chess-room-entry-status p {
    flex: 1 1 280px;
    min-height: 22px;
    margin: 0;
}

.chess-room-entry-status span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.chess-room-entry-status p.is-error {
    color: var(--danger, #b42318);
}

.chess-room-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 12% 6%, rgba(159, 18, 57, 0.1), transparent 32%),
        var(--surface-soft);
    color: var(--text);
}

.chess-room-shell {
    width: min(1320px, 100%);
    min-height: 100vh;
    margin: 0 auto;
    padding: clamp(14px, 3vw, 30px);
}

.chess-room-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.chess-room-title {
    color: var(--primary-dark);
    font-size: 1.05rem;
    font-weight: 900;
}

.chess-app {
    display: grid;
    gap: 16px;
}

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

.chess-player-card {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: var(--surface);
    box-shadow: var(--shadow-sm, 0 10px 28px rgba(34, 24, 18, 0.08));
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.chess-player-card.is-active {
    border-color: color-mix(in srgb, var(--primary) 68%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}

.chess-player-card > div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.chess-player-card small {
    color: var(--muted);
    font-size: 0.72rem;
}

.chess-player-card strong {
    overflow: hidden;
    color: var(--primary-dark);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chess-player-color {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 13px;
    font-size: 1.75rem;
}

.chess-player-color-white {
    background: #f2e2c6;
    color: #684436;
}

.chess-player-color-black {
    background: #3b2525;
    color: #f4dfb5;
}

.chess-player-state {
    margin-inline-start: auto;
    color: var(--muted);
    font-size: 1rem;
}

.chess-player-state.is-joined {
    color: #16855b;
}

.chess-room-layout {
    display: grid;
    direction: ltr;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 310px);
    align-items: start;
    gap: 16px;
}

.chess-room-layout > * {
    direction: rtl;
}

.chess-board-panel,
.chess-room-sidebar {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 21px;
    background: var(--surface);
    box-shadow: var(--shadow-sm, 0 10px 28px rgba(34, 24, 18, 0.08));
}

.chess-board-panel {
    display: grid;
    gap: 15px;
    padding: clamp(12px, 2vw, 20px);
}

.chess-status-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px 14px;
}

.chess-status-bar strong {
    color: var(--primary-dark);
}

.chess-status-badge.is-in_progress {
    background: color-mix(in srgb, #16855b 14%, var(--surface-soft));
    color: #16855b;
}

.chess-status-badge.is-completed {
    background: color-mix(in srgb, #b36d32 14%, var(--surface-soft));
    color: #9b5b2d;
}

.chess-board-wrap {
    width: min(100%, 700px);
    margin: 0 auto;
    padding: 8px;
    border-radius: 17px;
    background: #3a2021;
    box-shadow: 0 18px 40px rgba(44, 23, 22, 0.2);
}

.chess-board {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 10px;
}

.chess-square {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 0;
    place-items: center;
    padding: 0;
    border: 0;
    font: inherit;
    cursor: pointer;
    transition: filter 120ms ease, box-shadow 120ms ease;
}

.chess-square.is-light {
    background: #e9c994;
}

.chess-square.is-dark {
    background: #8b4d42;
}

.chess-square:hover,
.chess-square:focus-visible {
    filter: brightness(1.08);
    outline: none;
}

.chess-square.is-selected {
    box-shadow: inset 0 0 0 4px rgba(245, 210, 113, 0.92);
}

.chess-square.is-target::after,
.chess-square.is-capture-target::after {
    position: absolute;
    width: 20%;
    height: 20%;
    border-radius: 50%;
    background: rgba(42, 105, 75, 0.75);
    content: "";
}

.chess-square.is-capture-target::after {
    width: 72%;
    height: 72%;
    border: 4px solid rgba(167, 44, 46, 0.76);
    background: transparent;
}

.chess-piece {
    position: relative;
    z-index: 1;
    font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif;
    font-size: clamp(1.55rem, 5.5vw, 4.3rem);
    line-height: 1;
    user-select: none;
    transform: translateY(-1px);
}

.chess-piece.is-white {
    color: #fff7df;
    text-shadow: 0 2px 0 #6b4033, 0 4px 7px rgba(36, 18, 16, 0.4);
}

.chess-piece.is-black {
    color: #3b2023;
    text-shadow: 0 1px 0 #e1b879, 0 4px 7px rgba(36, 18, 16, 0.32);
}

.chess-board-hint {
    min-height: 22px;
    color: var(--muted);
    text-align: center;
}

.chess-room-sidebar {
    display: grid;
    gap: 15px;
    padding: 15px;
}

.chess-room-actions {
    display: grid;
    gap: 9px;
}

.chess-room-actions [hidden] {
    display: none !important;
}

.chess-room-actions .btn {
    width: 100%;
}

.chess-move-panel {
    min-height: 320px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
}

.chess-move-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--line);
}

.chess-move-panel-heading span {
    color: var(--muted);
    font-size: 0.78rem;
}

.chess-move-list {
    display: grid;
    gap: 4px;
    max-height: 450px;
    margin: 0;
    padding: 10px 14px 13px;
    overflow: auto;
    list-style: none;
}

.chess-move-list li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 7px;
    padding: 5px 0;
    border-bottom: 1px dashed var(--line);
}

.chess-move-list li > span {
    color: var(--muted);
    font-size: 0.74rem;
}

.chess-move-list strong {
    direction: ltr;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.8rem;
    text-align: start;
}

.chess-result-modal[hidden] {
    display: none !important;
}

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

.chess-result-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(21, 13, 14, 0.68);
    backdrop-filter: blur(5px);
}

.chess-result-card {
    position: relative;
    display: grid;
    width: min(100%, 420px);
    gap: 12px;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--surface);
    box-shadow: 0 25px 80px rgba(20, 12, 12, 0.28);
    text-align: center;
}

.chess-result-icon {
    color: #b36d32;
    font-size: 3rem;
}

.chess-result-card h2 {
    margin: 0;
    color: var(--primary-dark);
}

.chess-result-card p {
    margin: 0 0 8px;
    color: var(--muted);
    line-height: 1.9;
}

html[data-theme="dark"] .chess-room-body {
    background:
        radial-gradient(circle at 12% 6%, rgba(159, 18, 57, 0.14), transparent 32%),
        #171112;
}

html[data-theme="dark"] .chess-square.is-light {
    background: #c39257;
}

html[data-theme="dark"] .chess-square.is-dark {
    background: #683b3b;
}

@media (max-width: 860px) {
    .chess-room-layout {
        grid-template-columns: 1fr;
    }

    .chess-room-sidebar {
        grid-template-columns: minmax(180px, 0.4fr) minmax(0, 1fr);
        align-items: start;
    }
}

@media (max-width: 600px) {
    .games-catalog {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .chess-room-entry-card {
        grid-template-columns: 76px minmax(0, 1fr);
    }

    .chess-room-entry-card > img {
        width: 76px;
    }

    .chess-room-entry-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .chess-room-entry-actions .btn {
        flex: 1 1 150px;
    }

    .chess-players {
        gap: 8px;
    }

    .chess-player-card {
        gap: 7px;
        padding: 9px;
        border-radius: 14px;
    }

    .chess-player-color {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        font-size: 1.35rem;
    }

    .chess-player-card strong {
        font-size: 0.82rem;
    }

    .chess-player-card small {
        font-size: 0.64rem;
    }

    .chess-room-sidebar {
        grid-template-columns: 1fr;
    }

    .chess-board-wrap {
        padding: 5px;
        border-radius: 13px;
    }
}

@media (max-width: 420px) {
    .chess-room-nav {
        align-items: stretch;
        flex-direction: column;
    }

    .chess-room-nav .btn {
        align-self: flex-start;
    }

    .chess-player-card {
        align-items: flex-start;
    }

    .chess-player-state {
        font-size: 0.82rem;
    }

    .chess-piece {
        font-size: clamp(1.35rem, 10vw, 2.55rem);
    }
}

/* Platform rules landing page. */
.rules-page {
    overflow: hidden;
}

.rules-hero {
    position: relative;
    padding: 64px 0 72px;
    background:
        radial-gradient(circle at 12% 8%, rgba(159, 18, 57, 0.12), transparent 31%),
        radial-gradient(circle at 88% 8%, rgba(201, 139, 83, 0.2), transparent 34%),
        linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 74%, transparent), transparent);
}

.rules-hero::before {
    position: absolute;
    right: -165px;
    top: -175px;
    width: 510px;
    height: 510px;
    border: 1px solid rgba(159, 18, 57, 0.12);
    border-radius: 50%;
    box-shadow:
        0 0 0 34px rgba(159, 18, 57, 0.04),
        0 0 0 78px rgba(159, 18, 57, 0.02);
    content: "";
    pointer-events: none;
}

.rules-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    align-items: center;
    gap: 64px;
}

.rules-hero-copy {
    position: relative;
    z-index: 1;
}

.rules-hero-copy h1 {
    max-width: 760px;
    margin: 0 0 22px;
    color: var(--primary-dark);
    font-size: clamp(2.55rem, 5.8vw, 5.15rem);
    letter-spacing: -0.045em;
    line-height: 1.16;
}

.rules-hero-copy > p {
    max-width: 680px;
    margin: 0 0 30px;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 2;
}

.rules-hero-card {
    position: relative;
    display: grid;
    gap: 18px;
    min-height: 430px;
    padding: 25px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 31px;
    background:
        radial-gradient(circle at 80% 8%, rgba(230, 186, 124, 0.26), transparent 30%),
        linear-gradient(145deg, #4c2a21, #1d1210);
    box-shadow: 0 30px 80px rgba(70, 39, 25, 0.23);
    color: #fff;
}

.rules-hero-card::after {
    position: absolute;
    bottom: -150px;
    left: -100px;
    width: 330px;
    height: 330px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    box-shadow: 0 0 0 28px rgba(255, 255, 255, 0.025);
    content: "";
    pointer-events: none;
}

.rules-hero-card-topline {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rules-hero-card-mark {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    color: #f2ca8b;
    font-size: 1.15rem;
    font-weight: 900;
}

.rules-seal {
    position: relative;
    z-index: 1;
    display: grid;
    width: 102px;
    height: 102px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.27);
    border-radius: 50%;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 54%),
        rgba(201, 139, 83, 0.24);
    box-shadow:
        inset 0 0 0 9px rgba(255, 255, 255, 0.045),
        0 14px 38px rgba(0, 0, 0, 0.16);
    color: #f2ca8b;
    font-size: 2.15rem;
}

.rules-seal::before,
.rules-seal::after {
    position: absolute;
    inset: 10px;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    content: "";
}

.rules-seal::after {
    inset: 21px;
    border-style: solid;
    opacity: 0.45;
}

.rules-hero-card-copy {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: start;
    gap: 10px;
}

.rules-hero-card-copy strong {
    max-width: 390px;
    font-size: clamp(1.45rem, 3vw, 2.15rem);
    line-height: 1.35;
}

.rules-hero-card-copy p {
    max-width: 410px;
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.9;
}

.rules-meta-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-self: end;
}

.rules-meta-grid > div {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 12px 13px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
}

.rules-meta-grid span {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.72rem;
}

.rules-meta-grid strong {
    color: #fff;
    font-size: 0.82rem;
    line-height: 1.6;
}

.rules-overview-section {
    padding-top: 74px;
}

.rules-principles-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    margin-top: 30px;
}

.rules-principle-card {
    display: grid;
    align-content: start;
    gap: 10px;
    min-height: 195px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.rules-principle-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 14%, var(--surface-soft));
    color: var(--primary);
    font-size: 1.35rem;
    font-weight: 900;
}

.rules-principle-card h3 {
    margin: 0;
    color: var(--primary-dark);
    line-height: 1.55;
}

.rules-principle-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.9;
}

.rules-policy-section {
    margin-top: 76px;
}

.rules-section-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 30px;
}

.rules-section-nav a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    color: var(--text);
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.rules-section-nav a:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 54%, var(--line));
    background: var(--surface);
}

.rules-section-nav a > span {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border-radius: 10px;
    background: color-mix(in srgb, #9f1239 12%, var(--surface-soft));
    color: #9f1239;
    font-size: 0.92rem;
    font-weight: 900;
}

.rules-section-nav strong {
    overflow: hidden;
    color: var(--primary-dark);
    font-size: 0.79rem;
    line-height: 1.55;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rules-section-nav small {
    color: var(--muted);
    direction: ltr;
    font-size: 0.7rem;
}

.rules-policy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 22px;
}

.rules-policy-card {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 240px;
    padding: 23px;
    border: 1px solid var(--line);
    border-radius: 21px;
    background: var(--surface);
    box-shadow: var(--shadow);
    scroll-margin-top: 24px;
}

.rules-policy-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.rules-policy-icon {
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    border-radius: 13px;
    background: color-mix(in srgb, #9f1239 12%, var(--surface-soft));
    color: #9f1239;
    font-size: 1.12rem;
    font-weight: 900;
}

.rules-policy-anchor {
    color: var(--muted);
    direction: ltr;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.7rem;
    opacity: 0.7;
}

.rules-policy-card h3 {
    margin: 0;
    color: var(--primary-dark);
    font-size: 1.12rem;
    line-height: 1.6;
}

.rules-policy-body {
    color: var(--muted);
    line-height: 2;
    white-space: normal;
}

.rules-faq-section {
    padding-top: 78px;
}

.rules-final-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-top: 80px;
    margin-bottom: 80px;
    padding: 35px 40px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 27px;
    background:
        radial-gradient(circle at 10% 10%, rgba(159, 18, 57, 0.3), transparent 34%),
        linear-gradient(120deg, #3f241a, #1d120d);
    box-shadow: 0 28px 70px rgba(70, 39, 25, 0.2);
    color: #fff;
}

.rules-final-cta h2 {
    margin: 8px 0;
    color: #fff;
    font-size: clamp(1.7rem, 4vw, 3rem);
}

.rules-final-cta p:last-child {
    max-width: 650px;
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    line-height: 1.9;
}

.rules-final-cta .eyebrow {
    color: #e9bd7a;
}

.rules-final-cta .btn-secondary {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

html[data-theme="dark"] .rules-hero {
    background:
        radial-gradient(circle at 12% 8%, rgba(159, 18, 57, 0.13), transparent 31%),
        radial-gradient(circle at 88% 8%, rgba(201, 139, 83, 0.15), transparent 34%),
        linear-gradient(180deg, rgba(67, 42, 31, 0.35), transparent);
}

html[data-theme="dark"] .rules-final-cta {
    background:
        radial-gradient(circle at 10% 10%, rgba(159, 18, 57, 0.24), transparent 34%),
        linear-gradient(120deg, #3c261e, #1c1411);
}

@media (max-width: 1100px) {
    .rules-section-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .rules-hero-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .rules-hero-copy {
        text-align: center;
    }

    .rules-hero-copy > p {
        margin-inline: auto;
    }

    .rules-hero-copy .landing-hero-actions {
        justify-content: center;
    }

    .rules-hero-card {
        width: min(100%, 540px);
        margin-inline: auto;
    }

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

    .rules-section-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .rules-hero {
        padding-top: 38px;
    }

    .rules-hero-copy h1 {
        font-size: clamp(2.3rem, 12vw, 4rem);
    }

    .rules-hero-copy > p {
        font-size: 0.95rem;
    }

    .rules-principles-grid,
    .rules-section-nav,
    .rules-policy-grid {
        grid-template-columns: 1fr;
    }

    .rules-overview-section,
    .rules-policy-section,
    .rules-faq-section {
        padding-top: 54px;
    }

    .rules-policy-section {
        margin-top: 54px;
    }

    .rules-final-cta {
        align-items: stretch;
        flex-direction: column;
        margin-top: 54px;
        margin-bottom: 54px;
        padding: 25px 20px;
        border-radius: 21px;
    }

    .rules-final-cta .hero-actions {
        width: 100%;
        flex-direction: column;
    }

    .rules-final-cta .btn {
        width: 100%;
    }
}

@media (max-width: 460px) {
    .rules-hero-card {
        gap: 17px;
        min-height: 0;
        padding: 19px;
        border-radius: 24px;
    }

    .rules-seal {
        width: 82px;
        height: 82px;
        font-size: 1.8rem;
    }

    .rules-meta-grid {
        grid-template-columns: 1fr;
    }

    .rules-policy-card,
    .rules-principle-card {
        padding: 18px;
        border-radius: 17px;
    }
}

/* User dashboard refresh: clear hierarchy, fast scanning, and touch-first cards. */
.dashboard-redesign {
    padding-top: clamp(28px, 4vw, 52px);
}

.dashboard-redesign .dashboard-hero-modern {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 34px;
    min-height: 258px;
    margin-bottom: 18px;
    padding: clamp(28px, 4vw, 46px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 30px;
    background:
        radial-gradient(circle at 8% 12%, rgba(226, 173, 112, 0.3), transparent 30%),
        radial-gradient(circle at 92% 100%, rgba(255, 255, 255, 0.11), transparent 32%),
        linear-gradient(135deg, #573326, #2f1d18);
    box-shadow: 0 24px 60px rgba(70, 39, 25, 0.22);
}

.dashboard-redesign .dashboard-hero-content {
    min-width: 0;
}

.dashboard-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: #f1c998;
    font-size: 0.8rem;
    font-weight: 800;
}

.dashboard-status-dot,
.dashboard-avatar-online {
    display: inline-block;
    width: 9px;
    height: 9px;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    background: #75d39a;
    box-shadow: 0 0 0 4px rgba(117, 211, 154, 0.16);
}

.dashboard-redesign .dashboard-hero-modern h1 {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(1.9rem, 4vw, 3.2rem);
    line-height: 1.35;
}

.dashboard-redesign .dashboard-hero-modern h1 strong {
    color: #fff;
}

.dashboard-redesign .dashboard-hero-modern h1 span {
    color: #f4d6b4;
    font-size: 0.62em;
    font-weight: 700;
}

.dashboard-redesign .dashboard-welcome-subtitle {
    max-width: 690px;
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.95;
}

.dashboard-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 24px;
}

.dashboard-hero-actions .btn-light {
    min-height: 44px;
    padding-inline: 20px;
    border: 0;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
}

.dashboard-hero-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #f5d7b7;
    font-size: 0.88rem;
    font-weight: 800;
}

.dashboard-hero-text-link:hover {
    color: #fff;
}

.dashboard-hero-profile {
    display: grid;
    justify-items: center;
    gap: 13px;
    min-width: 150px;
    color: #fff;
    text-align: center;
}

.dashboard-hero-profile > div:last-child {
    display: grid;
    gap: 2px;
}

.dashboard-hero-profile strong {
    font-size: 0.96rem;
}

.dashboard-hero-profile span {
    color: rgba(255, 255, 255, 0.62);
    direction: ltr;
    font-size: 0.76rem;
}

.dashboard-hero-avatar-wrap {
    position: relative;
}

.dashboard-hero-avatar-wrap .avatar-large {
    width: 92px;
    height: 92px;
    border: 4px solid rgba(255, 255, 255, 0.42);
    box-shadow: 0 13px 28px rgba(0, 0, 0, 0.22);
}

.dashboard-hero-avatar-wrap .dashboard-avatar-online {
    position: absolute;
    right: 4px;
    bottom: 5px;
    width: 14px;
    height: 14px;
    border-width: 3px;
    border-color: #3a241c;
}

.dashboard-redesign .dashboard-status-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.dashboard-status-card {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 10px 26px rgba(70, 39, 25, 0.055);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.dashboard-status-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
    box-shadow: var(--shadow);
}

.dashboard-status-icon {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    color: var(--accent);
    font-size: 1.2rem;
    font-weight: 900;
}

.dashboard-status-image {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--ui-card-accent, var(--accent)) 24%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--ui-card-accent, var(--accent)) 10%, var(--surface));
}

.dashboard-status-image img {
    width: 100%;
    height: 100%;
    object-fit: var(--ui-card-image-fit, contain);
}

.dashboard-status-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.dashboard-status-copy small {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-status-copy strong {
    overflow: hidden;
    color: var(--primary-dark);
    font-size: 0.94rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-status-copy em,
.dashboard-insight-card em {
    color: var(--muted);
    font-size: 0.67em;
    font-style: normal;
    font-weight: 700;
}

.dashboard-status-arrow {
    margin-inline-start: auto;
    color: var(--muted);
    font-size: 1rem;
    transition: transform 160ms ease, color 160ms ease;
}

.dashboard-status-card:hover .dashboard-status-arrow {
    color: var(--accent);
    transform: translateX(-3px);
}

.dashboard-daily-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(250px, 0.75fr);
    gap: 14px;
    margin-bottom: 34px;
}

.dashboard-redesign .daily-message-card {
    min-height: 112px;
    margin: 0;
    align-items: center;
    padding: 20px 22px;
}

.dashboard-redesign .daily-message-card > div {
    position: relative;
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
}

.dashboard-redesign .daily-message-card cite {
    align-self: flex-end;
    margin-top: 10px;
    text-align: left;
}

.dashboard-daily-tip {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 18px;
    border: 1px dashed color-mix(in srgb, var(--accent) 48%, var(--line));
    border-radius: 20px;
    background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.dashboard-daily-tip-icon {
    display: grid;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 11px;
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    color: var(--accent);
    font-size: 1.25rem;
    font-weight: 900;
}

.dashboard-daily-tip strong {
    color: var(--primary-dark);
    font-size: 0.9rem;
}

.dashboard-daily-tip p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.75;
}

.dashboard-insights,
.dashboard-access {
    margin-top: 28px;
}

.dashboard-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.dashboard-section-heading .eyebrow {
    margin-bottom: 5px;
}

.dashboard-section-heading h2 {
    margin: 0;
    color: var(--primary-dark);
    font-size: clamp(1.35rem, 2.2vw, 1.8rem);
}

.dashboard-section-heading > div > p:last-child {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.86rem;
}

.dashboard-section-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 800;
    white-space: nowrap;
}

.dashboard-section-link:hover {
    color: var(--primary-dark);
}

.dashboard-insights-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
}

.dashboard-insight-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 11px;
    align-items: center;
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 10px 26px rgba(70, 39, 25, 0.045);
}

.dashboard-insight-icon {
    display: grid;
    grid-row: span 3;
    width: 39px;
    height: 39px;
    place-items: center;
    border-radius: 13px;
    background: color-mix(in srgb, var(--accent) 13%, var(--surface));
    color: var(--accent);
    font-size: 1.08rem;
    font-weight: 900;
}

.dashboard-insight-image {
    display: grid;
    grid-row: span 3;
    width: 39px;
    height: 39px;
    place-items: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--ui-card-accent, var(--accent)) 24%, var(--line));
    border-radius: 13px;
    background: color-mix(in srgb, var(--ui-card-accent, var(--accent)) 10%, var(--surface));
}

.dashboard-insight-image img {
    width: 100%;
    height: 100%;
    object-fit: var(--ui-card-image-fit, contain);
}

.dashboard-insight-label {
    color: var(--muted);
    font-size: 0.74rem;
}

.dashboard-insight-card strong {
    color: var(--primary-dark);
    font-size: 1.35rem;
    line-height: 1.4;
}

.dashboard-insight-card small {
    color: var(--muted);
    font-size: 0.7rem;
}

.dashboard-access {
    padding-top: 8px;
}

.dashboard-access-heading {
    align-items: flex-end;
}

.dashboard-save-state {
    min-height: 25px;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
}

.dashboard-save-state::before {
    content: "چینش خودکار ذخیره می‌شود";
}

.dashboard-redesign.is-saving .dashboard-save-state::before {
    content: "در حال ذخیره چینش…";
}

.dashboard-redesign.is-saved .dashboard-save-state {
    color: var(--success);
}

.dashboard-redesign.is-saved .dashboard-save-state::before {
    content: "چینش ذخیره شد";
}

.dashboard-grid-modern {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.dashboard-card-modern {
    display: block;
    min-height: 224px;
    padding: 0;
    overflow: hidden;
    border-radius: 21px;
    background: var(--surface);
    box-shadow: 0 13px 34px rgba(70, 39, 25, 0.07);
}

.dashboard-card-modern::before {
    display: block;
    height: 4px;
    background: var(--accent);
    content: "";
}

.dashboard-card-modern[data-dashboard-tone="games"]::before,
.dashboard-card-modern[data-dashboard-tone="tournaments"]::before {
    background: #aa6341;
}

.dashboard-card-modern[data-dashboard-tone="wallet"]::before {
    background: #438166;
}

.dashboard-card-modern[data-dashboard-tone="friends"]::before,
.dashboard-card-modern[data-dashboard-tone="feedback"]::before {
    background: #6881a4;
}

.dashboard-card-modern[data-dashboard-tone="support"]::before,
.dashboard-card-modern[data-dashboard-tone="notifications"]::before {
    background: #9a70a0;
}

.dashboard-card-modern[data-dashboard-tone="admin"]::before {
    background: #bd8737;
}

.dashboard-card-modern .dashboard-card-tools {
    top: 15px;
    inset-inline-start: 15px;
}

.dashboard-card-modern .dashboard-card-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 220px;
    padding: 27px 20px 18px;
}

.dashboard-card-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    margin-bottom: 11px;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 11%, var(--surface));
    color: var(--accent);
    font-size: 0.67rem;
    font-weight: 800;
}

.dashboard-card-icon {
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 13%, var(--surface));
    color: var(--accent);
    font-size: 1.35rem;
    font-weight: 900;
}

.dashboard-card-modern h2 {
    margin: 12px 0 5px;
    color: var(--primary-dark);
    font-size: 1.08rem;
}

.dashboard-card-modern p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.8;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.dashboard-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    padding-top: 13px;
    color: var(--accent);
    font-size: 0.74rem;
    font-weight: 900;
}

.dashboard-card-cta b {
    font-size: 1rem;
    transition: transform 160ms ease;
}

.dashboard-card-modern:hover .dashboard-card-cta b {
    transform: translateX(-4px);
}

.dashboard-card-modern.is-pinned {
    border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent), var(--shadow);
}

html[data-theme="dark"] .dashboard-redesign .dashboard-hero-modern {
    background:
        radial-gradient(circle at 8% 12%, rgba(226, 173, 112, 0.22), transparent 30%),
        linear-gradient(135deg, #4c2b20, #1f1512);
}

html[data-theme="dark"] .dashboard-status-card,
html[data-theme="dark"] .dashboard-insight-card,
html[data-theme="dark"] .dashboard-card-modern {
    box-shadow: 0 13px 34px rgba(0, 0, 0, 0.2);
}

@media (max-width: 1100px) {
    .dashboard-redesign .dashboard-status-strip,
    .dashboard-insights-grid,
    .dashboard-grid-modern {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .dashboard-redesign .dashboard-hero-modern {
        grid-template-columns: 1fr;
        gap: 22px;
        min-height: 0;
    }

    .dashboard-hero-profile {
        grid-template-columns: auto 1fr;
        justify-items: start;
        align-items: center;
        min-width: 0;
        text-align: right;
    }

    .dashboard-hero-profile > div:last-child {
        text-align: right;
    }

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

@media (max-width: 560px) {
    .dashboard-redesign .dashboard-status-strip,
    .dashboard-insights-grid,
    .dashboard-grid-modern {
        grid-template-columns: 1fr;
    }

    .dashboard-redesign .dashboard-hero-modern {
        padding: 25px 20px;
        border-radius: 24px;
    }

    .dashboard-redesign .dashboard-hero-modern h1 {
        display: block;
        font-size: 1.85rem;
    }

    .dashboard-redesign .dashboard-hero-modern h1 span {
        display: block;
        margin-top: 5px;
        font-size: 0.56em;
    }

    .dashboard-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-hero-actions .btn,
    .dashboard-hero-text-link {
        justify-content: center;
        width: 100%;
    }

    .dashboard-redesign .daily-message-card {
        align-items: flex-start;
        padding: 17px;
    }

    .dashboard-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .dashboard-section-link {
        align-self: flex-start;
    }
}

/* Profile refresh: calm hierarchy, clear section navigation, and mobile-first forms. */
.profile-redesign {
    padding-top: clamp(28px, 4vw, 52px);
}

.profile-redesign .profile-page-heading {
    align-items: flex-end;
    margin-bottom: 22px;
}

.profile-redesign .profile-page-heading h1 {
    margin-bottom: 8px;
    font-size: clamp(2rem, 4vw, 3.2rem);
}

.profile-redesign .profile-page-heading p:last-child {
    max-width: 650px;
    margin: 0;
    color: var(--muted);
}

.profile-quick-nav {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 20px;
    padding: 7px;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    box-shadow: 0 10px 25px rgba(70, 39, 25, 0.045);
    scrollbar-width: none;
}

.profile-quick-nav::-webkit-scrollbar {
    display: none;
}

.profile-quick-nav a {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 13px;
    border-radius: 11px;
    color: var(--muted);
    font-size: 0.79rem;
    font-weight: 800;
    white-space: nowrap;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.profile-quick-nav a:hover,
.profile-quick-nav a:focus-visible,
.profile-quick-nav a.is-active {
    outline: none;
    background: var(--surface-contrast);
    color: var(--primary-dark);
    transform: translateY(-1px);
}

.profile-quick-nav a span {
    color: var(--accent);
    font-size: 1rem;
}

.dashboard-shell-body .profile-v3 .profile-quick-nav {
    position: sticky;
    z-index: 70;
    top: 0;
}

.profile-redesign .profile-layout {
    grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
    gap: 18px;
    align-items: start;
}

.profile-redesign .profile-layout .panel {
    padding: clamp(21px, 2.5vw, 30px);
    border-radius: 24px;
    box-shadow: 0 13px 35px rgba(70, 39, 25, 0.055);
}

.profile-redesign .profile-overview-panel {
    position: sticky;
    top: 20px;
    z-index: 3;
    align-self: start;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 14%, transparent), transparent 35%),
        var(--surface);
}

.profile-redesign .profile-layout > .panel:not(.profile-overview-panel) {
    grid-column: 2;
    border-color: var(--line);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, var(--accent) 4%), var(--surface)),
        var(--surface);
}

.profile-redesign .profile-layout > .panel:not(.profile-overview-panel) .panel-heading {
    padding-bottom: 17px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
}

.profile-redesign .profile-layout > .panel:not(.profile-overview-panel) .panel-heading h2 {
    letter-spacing: -0.01em;
}

.profile-redesign .profile-summary {
    position: relative;
    align-items: center;
    margin: -30px -30px 24px;
    padding: 30px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--primary) 96%, #000), var(--primary));
    color: #fff;
}

.profile-redesign .profile-summary::after {
    position: absolute;
    right: -36px;
    bottom: -60px;
    width: 170px;
    height: 170px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    content: "";
}

.profile-redesign .profile-summary h2 {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 1.28rem;
}

.profile-redesign .profile-summary p {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.7);
}

.profile-redesign .profile-summary .avatar-xl {
    position: relative;
    z-index: 1;
    width: 88px;
    height: 88px;
    border: 4px solid rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    box-shadow: 0 13px 26px rgba(0, 0, 0, 0.2);
}

.profile-redesign .profile-summary .status-pill {
    position: relative;
    z-index: 1;
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.13);
    color: #d8f7e5;
}

.profile-completion {
    position: relative;
    z-index: 1;
    max-width: 260px;
    margin-top: 19px;
}

.profile-completion-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.72rem;
}

.profile-completion-heading strong {
    color: #fff;
    font-size: 0.78rem;
}

.profile-completion-track {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

.profile-completion-track span {
    display: block;
    height: 100%;
    min-width: 7px;
    border-radius: inherit;
    background: linear-gradient(90deg, #f0b66d, #83d5a4);
    transition: width 260ms ease;
}

.profile-completion-items {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 9px;
}

.profile-completion-items span {
    padding: 3px 6px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.62rem;
}

.profile-completion-items span.is-complete {
    border-color: rgba(131, 213, 164, 0.38);
    background: rgba(131, 213, 164, 0.13);
    color: #bcefcf;
}

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

.profile-overview-heading .eyebrow {
    margin-bottom: 4px;
}

.profile-overview-heading h2 {
    margin: 0;
    color: var(--primary-dark);
    font-size: 1.1rem;
}

.profile-account-mark {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--success) 13%, var(--surface));
    color: var(--success);
    font-weight: 900;
}

.profile-redesign .account-details {
    gap: 0;
    margin: 0;
    border-top: 1px solid var(--line);
}

.profile-redesign .account-details > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 9px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
}

.profile-redesign .account-details dt {
    color: var(--muted);
    font-size: 0.76rem;
}

.profile-redesign .account-details dd {
    margin: 0;
    color: var(--primary-dark);
    font-size: 0.8rem;
    font-weight: 800;
    text-align: end;
}

.profile-redesign .profile-bio-preview {
    margin-top: 18px;
    padding: 14px 15px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface-soft);
}

.profile-redesign .profile-edit-panel {
    min-height: 100%;
}

.profile-redesign .panel-heading {
    margin-bottom: 23px;
}

.profile-redesign .panel-heading .badge {
    display: inline-flex;
    margin-bottom: 9px;
}

.profile-redesign .panel-heading h2 {
    margin-bottom: 5px;
    font-size: 1.35rem;
}

.profile-redesign .panel-heading p {
    max-width: 680px;
    line-height: 1.85;
}

.profile-redesign .field {
    margin-bottom: 16px;
}

.profile-redesign .field label:not(.checkbox-row):not(.gender-choice) {
    margin-bottom: 7px;
    color: var(--primary-dark);
    font-size: 0.8rem;
    font-weight: 800;
}

.profile-redesign .field input:not([type="checkbox"]):not([type="radio"]),
.profile-redesign .field select,
.profile-redesign .field textarea {
    min-height: 46px;
    border-radius: 13px;
    background: var(--surface-soft);
}

.profile-redesign .field textarea {
    min-height: 100px;
    resize: vertical;
}

.profile-redesign .field input:focus,
.profile-redesign .field select:focus,
.profile-redesign .field textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 13%, transparent);
}

.profile-redesign .email-field-row {
    align-items: start;
}

.profile-redesign .email-consent-row,
.profile-redesign .privacy-setting-row {
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface-soft);
    line-height: 1.75;
}

.profile-redesign .gender-choice-list {
    gap: 10px;
}

.profile-redesign .gender-choice {
    min-height: 46px;
    border-radius: 13px;
}

.profile-redesign .privacy-setting-row {
    align-items: flex-start;
    margin: 5px 0 3px;
}

.profile-redesign .profile-gift-panel,
.profile-redesign .profile-financial-panel,
.profile-redesign .profile-sessions-panel,
.profile-redesign .profile-security-panel {
    grid-column: 1 / -1;
}

.profile-redesign .profile-gift-panel {
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 12%, transparent), transparent 33%),
        var(--surface);
}

.profile-redesign .profile-financial-panel {
    border-color: color-mix(in srgb, #438166 28%, var(--line));
}

.profile-redesign .profile-security-panel {
    border-color: color-mix(in srgb, #6881a4 28%, var(--line));
}

.profile-redesign .bank-account-list {
    display: grid;
    gap: 11px;
    margin-bottom: 17px;
}

.profile-redesign .bank-account-item {
    padding: 16px 17px;
    border-radius: 16px;
    background: var(--surface-soft);
}

.profile-redesign .bank-account-heading strong {
    color: var(--primary-dark);
}

.profile-redesign .bank-account-details strong {
    font-size: 0.82rem;
}

.profile-redesign .session-settings-card .form-actions {
    margin-top: 5px;
}

.profile-redesign .password-strength {
    margin: 4px 0 12px;
    padding: 12px 13px;
    border-radius: 13px;
    background: var(--surface-soft);
}

html[data-theme="dark"] .profile-redesign .profile-summary {
    background:
        radial-gradient(circle at 100% 0, rgba(226, 173, 112, 0.18), transparent 34%),
        linear-gradient(135deg, #4c2b20, #211512);
}

html[data-theme="dark"] .profile-redesign .profile-layout .panel {
    box-shadow: 0 13px 35px rgba(0, 0, 0, 0.2);
}

@media (max-width: 820px) {
    .profile-redesign .profile-overview-panel {
        position: static;
        z-index: auto;
        max-height: none;
        overflow: hidden;
    }

    .profile-redesign .profile-layout > .panel:not(.profile-overview-panel) {
        grid-column: auto;
    }
}

@media (max-width: 620px) {
    .profile-redesign .profile-page-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
    }

    .profile-redesign .profile-page-heading .btn {
        width: 100%;
        justify-content: center;
    }

    .profile-redesign .profile-summary {
        align-items: flex-start;
        flex-direction: column;
        margin: -22px -22px 22px;
        padding: 24px 22px;
    }

    .profile-completion {
        width: min(100%, 290px);
    }

    .profile-redesign .profile-layout .panel {
        padding: 22px;
        border-radius: 21px;
    }

    .profile-redesign .account-details > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .profile-redesign .account-details dd {
        text-align: start;
    }

    .profile-redesign .email-field-row {
        grid-template-columns: 1fr;
    }

    .profile-redesign .form-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .profile-redesign .bank-account-item {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .profile-redesign .bank-account-delete-form,
    .profile-redesign .bank-account-delete-form .btn {
        width: 100%;
    }

    .profile-redesign .profile-quick-nav {
        position: sticky;
        top: 8px;
        z-index: 12;
        margin-inline: -4px;
        background: color-mix(in srgb, var(--surface) 92%, transparent);
        backdrop-filter: blur(14px);
    }
}

.profile-redesign [id] {
    scroll-margin-top: 24px;
}

.profile-redesign .profile-layout > .panel:target {
    border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent),
        0 16px 38px rgba(70, 39, 25, 0.08);
}

html[data-theme="dark"] .profile-redesign .profile-layout > .panel:target {
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent),
        0 16px 38px rgba(0, 0, 0, 0.24);
}

/* Profile phase 2: larger avatar, quiet completion indicator and achievements. */
.profile-redesign .profile-summary {
    align-items: flex-start;
}

.profile-redesign .profile-summary .profile-avatar-upload,
.profile-redesign .profile-summary .profile-avatar-upload .avatar-xl {
    width: 124px;
    height: 124px;
}

.profile-redesign .profile-summary .profile-avatar-upload .avatar-xl {
    border-width: 5px;
}

.profile-redesign .profile-completion {
    width: min(100%, 320px);
    max-width: none;
    margin-top: 15px;
}

.profile-redesign .profile-completion-heading,
.profile-redesign .profile-completion-items {
    display: none;
}

.profile-redesign .profile-completion-track {
    height: 8px;
}

.profile-avatar-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.username-change-counter {
    display: block;
    margin-top: 7px;
    color: var(--muted);
}

.username-change-counter strong {
    color: var(--accent);
    font-size: 0.9rem;
}

.profile-medals-panel {
    margin-top: 22px;
    padding-top: 19px;
    border-top: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
}

.profile-medals-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
}

.profile-medals-heading .eyebrow {
    margin-bottom: 3px;
}

.profile-medals-heading h3 {
    margin: 0;
    color: var(--primary-dark);
    font-size: 1rem;
}

.profile-medals-count {
    display: grid;
    min-width: 30px;
    min-height: 30px;
    padding: 4px 9px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    color: var(--accent);
    font-weight: 900;
}

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

.profile-medal-card {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
}

.profile-medal-icon {
    display: grid;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 11px;
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    font-size: 1.22rem;
}

.profile-medal-card div {
    min-width: 0;
}

.profile-medal-card strong,
.profile-medal-card small {
    display: block;
}

.profile-medal-card strong {
    overflow: hidden;
    color: var(--primary-dark);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-medal-card small {
    margin-top: 3px;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.65rem;
    line-height: 1.55;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-medals-empty {
    margin: 0;
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.8;
}

@media (max-width: 620px) {
    .profile-redesign .profile-summary .profile-avatar-upload,
    .profile-redesign .profile-summary .profile-avatar-upload .avatar-xl {
        width: 112px;
        height: 112px;
    }

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

.admin-profile-rules-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.admin-profile-rules-page .panel {
    min-width: 0;
}

.admin-profile-rules-page .panel + .panel {
    margin-top: 18px;
}

@media (max-width: 820px) {
    .admin-profile-rules-grid {
        grid-template-columns: 1fr;
    }
}

.landing-tournament-games {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: -10px 0 22px;
}

.landing-tournament-games span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 0.76rem;
}

.landing-tournament-games span.is-active {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    background: color-mix(in srgb, var(--accent) 9%, var(--surface));
    color: var(--primary-dark);
}

.landing-tournament-games img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.landing-casual-games-section {
    background:
        radial-gradient(circle at 88% 12%, rgba(201, 139, 83, 0.14), transparent 23rem),
        var(--surface-soft);
}

.landing-casual-games-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.landing-casual-game-card {
    display: grid;
    grid-template-columns: minmax(170px, 0.85fr) minmax(0, 1.15fr);
    overflow: hidden;
    min-height: 250px;
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
    border-radius: 25px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(250, 237, 224, 0.88)),
        var(--surface);
    box-shadow:
        0 18px 46px rgba(70, 39, 25, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    color: inherit;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.landing-casual-game-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent);
    box-shadow:
        0 26px 60px rgba(70, 39, 25, 0.16),
        0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}

.landing-casual-game-media {
    position: relative;
    display: grid;
    min-height: 250px;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 211, 158, 0.38), transparent 10rem),
        linear-gradient(145deg, #4a281d, #1e1310);
}

.landing-casual-game-media::after {
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(255, 220, 178, 0.28);
    border-radius: 19px;
    content: "";
    pointer-events: none;
}

.landing-casual-game-media img {
    position: relative;
    z-index: 1;
    width: 76%;
    height: 76%;
    object-fit: contain;
    filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.38));
    transform: perspective(600px) rotateY(-6deg) rotateX(3deg);
    transition: transform 220ms ease;
}

.landing-casual-game-card:hover .landing-casual-game-media img {
    transform: perspective(600px) rotateY(0) rotateX(0) scale(1.04);
}

.landing-game-status {
    position: absolute;
    z-index: 2;
    top: 15px;
    right: 15px;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(24, 14, 11, 0.68);
    color: #ffe6c7;
    font-size: 0.72rem;
    font-weight: 800;
}

.landing-casual-game-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    padding: 26px;
}

.landing-casual-game-copy h3 {
    margin: 0;
    color: var(--primary-dark);
    font-size: 1.45rem;
}

.landing-casual-game-copy p {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.9;
}

/* Keep one clear title per page and panel. Status badges outside headings remain visible. */
.page-heading > div > .eyebrow,
.panel-heading > .badge {
    display: none !important;
}

.panel-heading > h1:first-child,
.panel-heading > h2:first-child,
.panel-heading > h3:first-child {
    margin-top: 0;
}

/* Dashboard cards use their main heading as the only visible title. */
.dashboard-card-badge {
    display: none !important;
}

/* The global header help has its own dedicated placement. */
.site-header .help-widget {
    display: none !important;
}

/* Dashboard cards keep one title; navigation copy and the three-dot handle are removed. */
.dashboard-card-badge,
.dashboard-card-cta,
.dashboard-drag-handle {
    display: none !important;
}

.dashboard-sortable-card {
    cursor: grab;
    touch-action: pan-y;
}

.dashboard-sortable-card.is-dragging {
    cursor: grabbing;
    transform: scale(0.985);
    transition: transform 140ms ease, opacity 140ms ease;
}

.dashboard-sortable-card .dashboard-card-tools {
    inset-inline-start: 14px;
}

.dashboard-sortable-card .dashboard-card-link {
    padding-top: 62px;
}

/* Contextual help for user and admin panel sections. */
.has-section-help {
    position: relative;
    padding-left: 46px;
}

.section-help-widget {
    position: absolute;
    z-index: 20;
    top: 0;
    left: 0;
}

.section-help-trigger {
    width: 32px;
    height: 32px;
    border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
    background: color-mix(in srgb, var(--accent) 9%, var(--surface));
    color: var(--accent);
    font-size: 0.9rem;
}

.section-help-trigger:hover,
.section-help-widget.is-open .section-help-trigger {
    border-color: var(--accent);
    background: var(--surface-contrast);
    color: var(--primary-dark);
}

.section-help-popover {
    top: calc(100% + 9px);
    right: auto;
    left: 0;
    width: min(360px, calc(100vw - 34px));
    padding: 17px;
    text-align: right;
}

.section-help-popover strong {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: var(--primary-dark);
    font-size: 0.88rem;
}

.section-help-popover strong::before {
    display: inline-grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    color: var(--accent);
    content: "?";
    font-family: Arial, sans-serif;
    font-size: 0.72rem;
}

.section-help-popover p {
    max-height: 260px;
    overflow-y: auto;
    color: var(--muted);
    line-height: 1.9;
}

.section-help-source {
    display: none !important;
}

.has-section-help > .panel-heading-row,
.has-section-help > .admin-monitoring-heading {
    min-width: 0;
}

@media (max-width: 560px) {
    .has-section-help {
        padding-left: 40px;
    }

    .section-help-widget {
        top: -2px;
    }

    .section-help-popover {
        left: -4px;
        width: min(320px, calc(100vw - 28px));
    }
}

/* Card-level contextual help. */
.has-card-help {
    position: relative;
}

.card-help-widget {
    position: absolute;
    z-index: 25;
    top: 12px;
    left: 12px;
}

.card-help-trigger {
    display: inline-grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    color: var(--accent);
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1;
    outline: none;
}

.card-help-trigger:hover,
.card-help-trigger:focus-visible,
.card-help-widget.is-open .card-help-trigger {
    border-color: var(--accent);
    background: var(--surface-contrast);
    color: var(--primary-dark);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent);
}

.card-help-popover {
    top: calc(100% + 8px);
    right: auto;
    left: 0;
    width: min(320px, calc(100vw - 30px));
    padding: 15px;
    text-align: right;
}

.card-help-popover strong {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: var(--primary-dark);
    font-size: 0.82rem;
}

.card-help-popover strong::before {
    display: inline-grid;
    width: 19px;
    height: 19px;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    color: var(--accent);
    content: "?";
    font-family: Arial, sans-serif;
    font-size: 0.7rem;
}

.card-help-popover p {
    max-height: 220px;
    overflow-y: auto;
    margin: 0;
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.85;
}

.card-help-source {
    display: none !important;
}

.game-tile .card-help-widget,
.mafia-scenario-card .card-help-widget {
    top: 9px;
    left: 9px;
}

.game-tile .card-help-trigger,
.mafia-scenario-card .card-help-trigger {
    width: 27px;
    height: 27px;
}

@media (max-width: 560px) {
    .card-help-widget {
        top: 9px;
        left: 9px;
    }

    .card-help-popover {
        left: -3px;
        width: min(300px, calc(100vw - 26px));
    }
}

body.modal-open {
    overflow: hidden;
}

.profile-avatar-upload {
    position: relative;
    z-index: 2;
    display: block;
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.profile-avatar-upload:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.78);
    outline-offset: 4px;
}

.profile-avatar-upload .avatar-xl {
    display: block;
    width: 88px;
    height: 88px;
}

.profile-avatar-upload-overlay {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border: 2px solid var(--primary);
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 0.88rem;
    font-weight: 900;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
    transition: transform 160ms ease, background 160ms ease;
}

.profile-avatar-upload:hover .profile-avatar-upload-overlay {
    background: var(--primary-dark);
    transform: scale(1.08);
}

.jalali-date-field {
    position: relative;
}

.jalali-date-field > input[data-jalali-display] {
    width: 100%;
    padding-inline-end: 50px;
    cursor: pointer;
}

.jalali-date-trigger {
    position: absolute;
    top: 50%;
    right: 9px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: var(--surface-contrast);
    color: var(--accent);
    cursor: pointer;
    transform: translateY(-50%);
}

.jalali-datepicker {
    position: absolute;
    z-index: 80;
    top: calc(100% + 8px);
    right: 0;
    width: min(330px, calc(100vw - 44px));
    padding: 15px;
    border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 22px 60px rgba(47, 25, 17, 0.2);
}

.jalali-datepicker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.jalali-datepicker-header strong {
    color: var(--primary-dark);
    font-size: 0.9rem;
}

.jalali-datepicker-header button,
.jalali-datepicker-today {
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface-soft);
    color: var(--primary);
    cursor: pointer;
}

.jalali-datepicker-header button {
    width: 30px;
    height: 30px;
    font-size: 1.3rem;
    line-height: 1;
}

.jalali-datepicker-weekdays,
.jalali-datepicker-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    text-align: center;
}

.jalali-datepicker-weekdays {
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 0.65rem;
    font-weight: 800;
}

.jalali-datepicker-day,
.jalali-datepicker-empty {
    display: grid;
    min-height: 34px;
    place-items: center;
}

.jalali-datepicker-day {
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
}

.jalali-datepicker-day:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.jalali-datepicker-day.is-selected {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
    font-weight: 900;
}

.jalali-datepicker-today {
    width: 100%;
    min-height: 34px;
    margin-top: 12px;
    font-size: 0.75rem;
    font-weight: 800;
}

.profile-avatar-crop-modal {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    overflow-y: auto;
    place-items: center;
    padding: 20px;
    background: rgba(20, 11, 8, 0.78);
    backdrop-filter: blur(8px);
}

.profile-avatar-crop-modal[hidden] {
    display: none !important;
}

.profile-avatar-crop-dialog {
    position: relative;
    width: min(100%, 520px);
    padding: 26px;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
    border-radius: 24px;
    background: var(--surface);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.4);
}

.profile-avatar-crop-dialog .panel-heading {
    margin-bottom: 18px;
    padding-inline-end: 28px;
}

.profile-avatar-crop-dialog .panel-heading h2 {
    margin: 4px 0 5px;
    color: var(--primary-dark);
    font-size: 1.35rem;
}

.profile-avatar-crop-dialog .panel-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
}

.profile-avatar-crop-close {
    position: absolute;
    z-index: 2;
    top: 14px;
    left: 14px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface-soft);
    color: var(--primary);
    cursor: pointer;
    font-size: 1.35rem;
}

.profile-avatar-crop-stage {
    position: relative;
    width: min(100%, 360px);
    height: min(82vw, 360px);
    min-height: 260px;
    margin: 0 auto 18px;
    overflow: hidden;
    border-radius: 18px;
    background:
        linear-gradient(45deg, #eadfd4 25%, transparent 25%),
        linear-gradient(-45deg, #eadfd4 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #eadfd4 75%),
        linear-gradient(-45deg, transparent 75%, #eadfd4 75%),
        #f8f1eb;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
    touch-action: none;
    user-select: none;
}

.profile-avatar-crop-stage img {
    position: absolute;
    max-width: none;
    pointer-events: none;
    user-select: none;
}

.profile-avatar-crop-frame {
    position: absolute;
    top: 21px;
    left: 21px;
    width: calc(100% - 42px);
    aspect-ratio: 1;
    border: 2px solid #fff;
    border-radius: 0;
    box-shadow: 0 0 0 999px rgba(15, 8, 5, 0.48);
    pointer-events: none;
}

.profile-avatar-crop-frame.is-circle {
    border-radius: 50%;
}

.profile-avatar-crop-controls {
    display: grid;
    gap: 13px;
    margin-bottom: 16px;
}

.profile-avatar-crop-controls label {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.profile-avatar-crop-controls input[type="range"] {
    width: 100%;
    accent-color: var(--accent);
}

.profile-avatar-shape-toggle {
    display: flex;
    gap: 8px;
}

.profile-avatar-shape-toggle .btn {
    border-color: var(--line);
    background: var(--surface-soft);
    color: var(--primary);
}

.profile-avatar-shape-toggle .btn.is-active {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.dashboard-profile-reward {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 18px 0;
    padding: 17px 20px;
    border: 1px solid color-mix(in srgb, var(--success) 36%, var(--line));
    border-radius: 18px;
    background:
        linear-gradient(110deg, color-mix(in srgb, var(--success) 9%, var(--surface)), var(--surface)),
        var(--surface);
    box-shadow: 0 13px 32px rgba(55, 111, 80, 0.08);
}

.dashboard-profile-reward > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dashboard-profile-reward-mark {
    display: grid;
    width: 35px;
    height: 35px;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--success) 16%, var(--surface));
    color: var(--success);
    font-weight: 900;
}

.dashboard-profile-reward strong {
    color: var(--primary-dark);
    font-size: 0.95rem;
}

.dashboard-profile-reward p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.78rem;
}

@media (max-width: 560px) {
    .profile-avatar-crop-dialog {
        padding: 21px 16px;
        border-radius: 20px;
    }

    .dashboard-profile-reward {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-profile-reward .btn {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .landing-casual-games-grid {
        grid-template-columns: 1fr;
    }

    .landing-casual-game-card {
        grid-template-columns: minmax(135px, 0.72fr) minmax(0, 1.28fr);
    }

    .landing-casual-game-media {
        min-height: 220px;
    }

    .landing-casual-game-copy {
        padding: 20px;
    }

    .landing-casual-game-copy h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 520px) {
    .landing-casual-game-card {
        grid-template-columns: 1fr;
    }

    .landing-casual-game-media {
        min-height: 170px;
    }

    .landing-casual-game-media img {
        width: 48%;
        height: 78%;
    }

    .landing-casual-game-copy {
        padding: 18px;
    }

    .content-editor-faq-actions {
        align-items: flex-start;
        flex-direction: column;
    }
}

.dashboard-wallet-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 4px 7px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    min-width: 0;
    color: inherit;
    text-decoration: none;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.dashboard-wallet-button:hover,
.dashboard-wallet-button:focus-visible {
    border-color: var(--accent);
    background: var(--surface-soft);
    color: var(--primary-dark);
    outline: none;
    transform: translateY(-1px);
}

.dashboard-wallet-amount {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: var(--primary-dark);
    font-size: .82rem;
    white-space: nowrap;
}

.dashboard-wallet-amount small {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 700;
}

.logout-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.header-control-icon,
.theme-toggle-icon svg,
.notification-bell svg,
.dashboard-topbar-icon svg {
    display: block;
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.header-control-icon {
    flex: 0 0 1.15rem;
}

.notification-toggle-label {
    display: none !important;
}

.dashboard-site-header .nav-links > .nav-user {
    order: 7;
    max-width: 13rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-site-header .nav-links > .logout-button {
    order: 8;
    width: 42px;
    height: 42px;
    justify-content: center;
    padding: 0;
}

.dashboard-site-header .nav-links > .dashboard-admin-button,
.dashboard-site-header .nav-links > .dashboard-settings-button {
    order: 1;
}

.dashboard-site-header .nav-links > .theme-toggle {
    order: 2;
}

.dashboard-site-header .nav-links > .notification-widget {
    order: 5;
}

.dashboard-site-header .nav-links > .dashboard-wallet-button {
    order: 4;
}

.dashboard-site-header .nav-links > .language-switcher {
    order: 3;
}

.dashboard-site-header .nav-links > .help-widget,
.dashboard-site-header .nav-links > .install-app-button {
    order: 9;
}

.dashboard-site-header .nav-links > .dashboard-settings-button {
    order: 6;
}

.dashboard-site-header .nav-links > .dashboard-admin-button {
    order: 1;
}

.dashboard-site-header .logout-button > span:last-child {
    display: none;
}

.dashboard-wallet-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.15rem;
}

.dashboard-wallet-amount {
    direction: rtl;
}

.dashboard-wallet-amount small {
    white-space: nowrap;
}

@media (max-width: 640px) {
    .dashboard-wallet-amount {
        display: none;
    }

    .dashboard-site-header .nav-links > .nav-user {
        max-width: 6.2rem;
        font-size: .78rem;
    }
}

/* Tournament status navigation: three equal, touch-friendly in-page tabs. */
.tournament-status-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin: 0 0 18px;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}

.tournament-status-tab {
    min-width: 0;
    min-height: 54px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.tournament-status-tab:hover,
.tournament-status-tab:focus-visible {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
    outline: none;
    transform: translateY(-1px);
}

.tournament-status-tab.is-active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 25%, transparent);
}

[data-dashboard-shell].is-minimal-view .dashboard-header-context {
    display: none;
}

[data-tournament-status][hidden] {
    display: none !important;
}

.tournament-game-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin: 0 0 18px;
}

.tournament-game-tab {
    min-width: 0;
    min-height: 54px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.tournament-game-tab:hover,
.tournament-game-tab:focus-visible {
    border-color: var(--accent);
    color: var(--primary);
    outline: none;
    transform: translateY(-1px);
}

.tournament-game-tab.is-active {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 22%, transparent);
}

@media (max-width: 520px) {
    .tournament-status-tabs {
        gap: 5px;
        padding: 4px;
    }

    .tournament-status-tab {
        min-height: 48px;
        padding-inline: 6px;
        font-size: .86rem;
    }

    .tournament-game-tab {
        min-height: 48px;
        padding-inline: 6px;
        font-size: .86rem;
    }
}

/* In-board controls and player-specific dice. */

/* Final no-scroll guard for the standalone room on touch screens. */

/*
 * Mobile board bar layout
 *
 * The bar belongs to the board surface on touch screens. Keep it on the
 * right edge, with the opponent's captured checkers above and the viewer's
 * captured checkers below. The logical side mapping remains in JavaScript;
 * these rules only define its physical mobile position.
 */

/*
 * Final compact room layout.
 * The close action lives outside the player header, while equal inline
 * reservation keeps both player cards visually symmetrical.
 */

/*
 * Dynamic login and registration theme.
 * The values are provided by authPageCssVariables() and remain inherited by
 * the real auth page as well as the administrator's live preview.
 */
body.auth-customized-body {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    overflow-x: hidden;
    background-color: var(--auth-bg-color, #241612);
    background-image:
        var(--auth-bg-image, none),
        var(--auth-bg-gradient, none);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

body.auth-customized-body::before {
    position: fixed;
    z-index: 0;
    inset: 0;
    background: #090605;
    content: '';
    opacity: var(--auth-overlay-opacity, 0.25);
    pointer-events: none;
}

body.auth-customized-body > * {
    position: relative;
    z-index: 1;
}

body.auth-customized-body .auth-page {
    min-height: 100vh;
}

body.auth-customized-body .auth-card {
    border-color: rgba(238, 204, 171, 0.28);
    border-radius: var(--auth-card-radius, 28px);
    background: var(--auth-card-bg, rgba(255, 255, 255, 0.92));
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.36),
        0 0 0 1px rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(var(--auth-card-blur, 16px));
    -webkit-backdrop-filter: blur(var(--auth-card-blur, 16px));
}

body.auth-customized-body .auth-card .btn-primary {
    border-color: transparent;
    background: var(--auth-primary-button-color, var(--primary));
    color: var(--auth-primary-button-text-color, #fff);
}

.auth-brand {
    display: flex;
    width: 100%;
    margin: 0 0 22px;
}

.auth-logo-position-left {
    justify-content: flex-start;
}

.auth-logo-position-center {
    justify-content: center;
}

.auth-logo-position-right {
    justify-content: flex-end;
}

.auth-brand img {
    display: block;
    width: var(--auth-logo-width, 150px);
    max-width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 22px;
    background: radial-gradient(circle, rgba(223, 164, 62, 0.42) 0%, rgba(102, 50, 18, 0.24) 42%, transparent 74%);
    filter: drop-shadow(0 0 16px rgba(223, 164, 62, 0.42));
}

.auth-brand-link {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: transform 180ms ease, filter 180ms ease;
}

.auth-brand-link:hover {
    filter: drop-shadow(0 8px 18px rgba(209, 158, 86, 0.22));
    transform: translateY(-2px);
}

.auth-brand-link:focus-visible {
    border-radius: 14px;
    outline: 3px solid color-mix(in srgb, var(--primary) 72%, transparent);
    outline-offset: 6px;
}

.auth-terms-row {
    align-items: flex-start;
    line-height: 1.8;
}

.auth-terms-row input[type='checkbox'] {
    flex: 0 0 17px;
    margin-top: 4px;
}

/* Admin editor for the login/register theme. */
.auth-settings-locale-panel {
    margin-bottom: 22px;
}

.auth-settings-locale-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.auth-settings-locale-link {
    display: inline-flex;
    min-width: 100px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.auth-settings-locale-link:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
}

.auth-settings-locale-link.is-active {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.auth-settings-locale-link small {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.admin-auth-settings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    align-items: start;
    gap: 22px;
}

.admin-auth-settings-form,
.auth-settings-preview-panel {
    min-width: 0;
}

.auth-settings-tabs {
    display: flex;
    gap: 7px;
    margin: -4px -4px 26px;
    padding: 4px;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
}

.auth-settings-tab {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 9px 14px;
    border: 0;
    border-radius: 12px 12px 0 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    white-space: nowrap;
}

.auth-settings-tab:hover,
.auth-settings-tab.is-active {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.auth-settings-tab-panel[hidden] {
    display: none;
}

.auth-settings-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.auth-settings-field-grid + .auth-settings-field-grid {
    margin-top: 8px;
}

.auth-upload-dropzone {
    display: flex;
    min-height: 110px;
    align-items: center;
    gap: 15px;
    margin: 0 0 18px;
    padding: 16px;
    border: 1px dashed color-mix(in srgb, var(--primary) 48%, var(--line));
    border-radius: 18px;
    background: color-mix(in srgb, var(--primary-soft) 55%, transparent);
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.auth-upload-dropzone:hover,
.auth-upload-dropzone.is-dragging {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary-soft) 90%, transparent);
    transform: translateY(-1px);
}

.auth-upload-dropzone > div:last-child {
    display: grid;
    gap: 5px;
}

.auth-upload-dropzone strong {
    color: var(--primary-dark);
}

.auth-upload-dropzone small,
.auth-upload-dropzone span {
    color: var(--muted);
    font-size: 0.82rem;
}

.auth-upload-current-logo {
    width: 82px;
    height: 68px;
    flex: 0 0 82px;
    object-fit: contain;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.76);
}

.auth-upload-background-icon {
    display: grid;
    width: 82px;
    height: 68px;
    flex: 0 0 82px;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #3d2118, #bc8051);
    color: #fff;
    font-size: 2rem;
}

.auth-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.auth-color-field {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.auth-color-field input[type='color'] {
    width: 54px;
    height: 44px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    cursor: pointer;
}

.admin-auth-settings-form output {
    float: inline-end;
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 800;
}

.auth-settings-actions {
    align-items: center;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.auth-settings-actions .field-hint {
    margin: 0;
}

.auth-settings-preview-panel {
    position: sticky;
    top: 22px;
}

.auth-preview-mode-switch {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 0 0 15px;
}

.auth-preview-mode-switch button {
    min-height: 36px;
    padding: 7px 13px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
}

.auth-preview-mode-switch button.is-active {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.auth-preview-page-switch {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: -7px 0 15px;
}

.auth-preview-page-switch button {
    padding: 5px 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
}

.auth-preview-page-switch button.is-active {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.auth-live-preview {
    position: relative;
    display: grid;
    min-height: 560px;
    place-items: center;
    overflow: hidden;
    padding: 26px;
    border: 1px solid rgba(238, 204, 171, 0.32);
    border-radius: 24px;
    background-color: var(--auth-bg-color, #241612);
    background-image:
        var(--auth-bg-image, none),
        var(--auth-bg-gradient, none);
    background-position: center;
    background-size: cover;
    isolation: isolate;
}

.auth-live-preview::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    background: #090605;
    content: '';
    opacity: var(--auth-overlay-opacity, 0.25);
}

.auth-preview-device {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(100%, 420px);
    gap: 13px;
}

.auth-preview-brand {
    display: flex;
    min-height: 48px;
    align-items: center;
}

.auth-preview-brand img {
    width: var(--auth-logo-width, 150px);
    max-width: 70%;
    height: auto;
    max-height: 74px;
    object-fit: contain;
}

.auth-preview-card {
    padding: 25px;
    border: 1px solid rgba(238, 204, 171, 0.28);
    border-radius: var(--auth-card-radius, 28px);
    background: var(--auth-card-bg, rgba(255, 255, 255, 0.92));
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(var(--auth-card-blur, 16px));
    -webkit-backdrop-filter: blur(var(--auth-card-blur, 16px));
}

.auth-preview-card h3 {
    margin: 15px 0 8px;
    color: var(--primary-dark);
    font-size: 1.25rem;
}

.auth-preview-card p {
    min-height: 42px;
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.8;
}

.auth-preview-input {
    height: 38px;
    margin-top: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.65);
}

.auth-preview-terms {
    margin-top: 12px;
    color: var(--muted);
    font-size: 0.7rem;
    line-height: 1.7;
}

.auth-preview-button {
    display: grid;
    height: 42px;
    margin-top: 16px;
    place-items: center;
    border-radius: 11px;
    background: var(--auth-primary-button-color, #8f5035);
    color: var(--auth-primary-button-text-color, #fff);
    font-size: 0.84rem;
    font-weight: 800;
}

.auth-live-preview.auth-preview-mobile {
    min-height: 540px;
}

.auth-live-preview.auth-preview-mobile .auth-preview-device {
    width: min(100%, 300px);
}

.auth-live-preview.auth-preview-mobile .auth-preview-card {
    padding: 20px;
}

.auth-settings-reset-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 22px;
}

.auth-settings-reset-panel h2 {
    margin: 9px 0 6px;
}

.auth-settings-reset-panel p {
    max-width: 780px;
    margin: 0;
    color: var(--muted);
    line-height: 1.9;
}

.auth-settings-reset-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}

.auth-settings-reset-actions form {
    margin: 0;
}

@media (max-width: 980px) {
    .admin-auth-settings-layout {
        grid-template-columns: 1fr;
    }

    .auth-settings-preview-panel {
        position: static;
    }

    .auth-live-preview {
        min-height: 470px;
    }
}

@media (max-width: 620px) {
    .auth-settings-field-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .auth-settings-tabs {
        margin-bottom: 20px;
    }

    .auth-upload-dropzone {
        align-items: flex-start;
    }

    .auth-settings-reset-panel {
        display: grid;
    }

    .auth-settings-reset-actions {
        justify-content: flex-start;
    }

    .auth-live-preview {
        min-height: 440px;
        padding: 18px;
        border-radius: 18px;
    }
}

.admin-subscriptions-panel {
    overflow: hidden;
}

.admin-subscription-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 1.25rem;
}

.admin-subscription-stats .panel {
    display: grid;
    gap: 8px;
    padding: 18px;
}

.admin-subscription-stats span {
    color: var(--muted);
    font-size: .85rem;
    font-weight: 700;
}

.admin-subscription-stats strong {
    color: var(--primary);
    font-size: 1.75rem;
}

.admin-subscription-management-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    align-items: start;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.admin-subscription-plan-form,
.admin-subscription-plan-editor,
.admin-subscription-plans-list {
    min-width: 0;
}

.admin-subscription-plan-form {
    display: grid;
    gap: 1.1rem;
}

.admin-subscription-plan-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.admin-subscription-plan-form > label,
.admin-subscription-plan-fields > label,
.admin-subscription-grant-form label {
    display: grid;
    gap: 6px;
    font-weight: 700;
}

.admin-subscription-plan-form input,
.admin-subscription-plan-form select,
.admin-subscription-plan-form textarea,
.admin-subscription-grant-form input,
.admin-subscription-grant-form select {
    width: 100%;
}

.admin-subscription-plan-switches {
    display: grid;
    align-content: center;
    gap: 8px;
}

.admin-subscription-plan-switches label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.admin-subscription-plan-switches input {
    width: auto;
}

.admin-subscription-access-fieldset {
    margin: 0;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 16px;
}

.admin-subscription-access-fieldset legend {
    padding: 0 8px;
    font-weight: 800;
}

.admin-subscription-access-group + .admin-subscription-access-group {
    margin-top: 14px;
}

.admin-subscription-access-group h4 {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: .85rem;
}

.admin-subscription-access-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.admin-subscription-access-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface-soft);
    cursor: pointer;
}

.admin-subscription-access-option input {
    width: auto;
    margin-top: 4px;
}

.admin-subscription-access-option span {
    display: grid;
    gap: 3px;
}

.admin-subscription-access-option small {
    color: var(--muted);
    line-height: 1.6;
}

.admin-subscription-plan-cards {
    display: grid;
    gap: 12px;
}

.admin-subscription-plan-summary {
    display: grid;
    gap: 8px;
    padding: 15px;
    border: 1px solid var(--line);
    border-right: 4px solid var(--subscription-plan-color);
    border-radius: 15px;
    background: var(--surface-soft);
}

.admin-subscription-plan-summary.is-featured {
    box-shadow: inset 0 0 0 1px var(--subscription-plan-color);
}

.admin-subscription-plan-summary h3,
.admin-subscription-plan-summary p {
    margin: 0;
}

.admin-subscription-plan-summary > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.admin-subscription-grant-panel {
    margin-bottom: 1.25rem;
}

.admin-subscription-grant-form {
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr auto;
    align-items: end;
    gap: 12px;
}

.admin-subscription-bulk-panel {
    margin-top: 1.25rem;
}

.admin-bulk-subscription-form {
    display: grid;
    gap: 1rem;
}

.admin-bulk-subscription-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.admin-bulk-subscription-form label {
    display: grid;
    gap: .4rem;
    font-weight: 700;
}

.admin-bulk-subscription-form input,
.admin-bulk-subscription-form select,
.admin-bulk-subscription-form textarea {
    width: 100%;
}

.admin-bulk-subscription-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.admin-bulk-subscription-actions small {
    color: var(--muted);
}

.admin-bulk-subscription-history {
    display: grid;
    gap: .75rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}

.admin-bulk-subscription-history h3 {
    margin: 0;
}

.admin-bulk-subscription-history table {
    min-width: 820px;
}

.admin-bulk-subscription-history td {
    vertical-align: top;
}

@media (max-width: 900px) {
    .admin-subscription-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-subscription-management-grid {
        grid-template-columns: 1fr;
    }

    .admin-subscription-grant-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-bulk-subscription-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .admin-subscription-stats,
    .admin-subscription-plan-fields,
    .admin-subscription-access-grid,
    .admin-subscription-grant-form {
        grid-template-columns: 1fr;
    }

    .admin-bulk-subscription-grid {
        grid-template-columns: 1fr;
    }

    .admin-bulk-subscription-actions {
        align-items: stretch;
        flex-direction: column;
    }
}

.admin-subscription-table {
    min-width: 1120px;
}

.admin-subscription-table td {
    vertical-align: top;
}

.subscription-remaining-days {
    color: var(--primary);
    font-size: 1.1rem;
}

.admin-subscription-actions {
    display: grid;
    min-width: 285px;
    gap: 9px;
}

.admin-subscription-actions form {
    display: grid;
    gap: 6px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-soft);
}

.admin-subscription-actions label {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.admin-subscription-actions input,
.admin-subscription-actions select {
    min-height: 38px;
    min-width: 0;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 9px;
    outline: 0;
    background: var(--surface);
    color: var(--ink);
}

.admin-subscription-actions input:focus,
.admin-subscription-actions select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(201, 139, 83, 0.14);
}

.admin-subscription-inline {
    display: grid;
    grid-template-columns: minmax(75px, 1fr) auto;
    gap: 7px;
}

@media (max-width: 620px) {
    .wallet-gift-actions .inline-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        min-width: 0;
        width: 100%;
    }

    .wallet-gift-actions .inline-form input,
    .wallet-gift-actions .inline-form select,
    .wallet-gift-actions .inline-form .btn {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .wallet-gift-actions .inline-form input,
    .wallet-gift-actions .inline-form select {
        font-size: 16px;
    }

    .wallet-gift-actions .inline-form .btn {
        min-height: 44px;
        white-space: normal;
    }

    .wallet-gift-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-subscription-actions {
        min-width: 240px;
    }
}

/* Phase 5: dynamic cards, brand characters and responsive visual system. */
.ui-card-custom {
    --ui-card-accent: var(--accent);
    border-radius: var(--ui-card-radius, 22px);
    border-color: var(--ui-card-border, var(--line));
}

.ui-card-custom:hover,
.ui-card-custom:focus-visible {
    border-color: var(--ui-card-border, var(--ui-card-accent, var(--accent)));
}

.ui-card-custom[style*="--ui-card-has-background:1"] {
    background: var(--ui-card-bg) !important;
}

.dashboard-card-modern.ui-card-custom,
.admin-card-grid .ui-card-custom,
.admin-stat-card.ui-card-custom,
.game-tile.ui-card-custom,
.mafia-scenario-card.ui-card-custom,
.chess-room-entry-card.ui-card-custom,
.tournament-card.ui-card-custom,
.landing-casual-game-card.ui-card-custom,
.landing-brand-card.ui-card-custom,
.landing-dynamic-intro.ui-card-custom,
.landing-hero.ui-card-custom,
.landing-visual-card.ui-card-custom {
    background-color: var(--ui-card-bg, var(--surface));
    color: var(--ui-card-text, inherit);
}

.admin-stat-card.ui-card-custom {
    border-color: var(--ui-card-border, var(--line));
    background-color: var(--ui-card-bg, var(--surface));
    color: var(--ui-card-text, var(--ink));
}

.admin-stat-card-image {
    display: block;
    width: 100%;
    height: 38px;
    margin: -2px 0 8px;
    overflow: hidden;
    border-radius: max(10px, calc(var(--ui-card-radius, 22px) - 12px));
    background: color-mix(in srgb, var(--ui-card-accent, var(--accent)) 10%, var(--surface-soft));
}

.admin-stat-card-image img {
    width: 100%;
    height: 100%;
    object-fit: var(--ui-card-image-fit, contain);
}

.dashboard-card-image {
    display: block;
    width: 100%;
    height: 56px;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: max(12px, calc(var(--ui-card-radius, 22px) - 8px));
    background: color-mix(in srgb, var(--ui-card-accent, var(--accent)) 12%, var(--surface));
}

.dashboard-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: var(--ui-card-image-fit, cover);
}

.dashboard-card-modern .dashboard-card-link {
    padding-top: 28px;
}

.dashboard-card-modern .dashboard-card-image {
    margin-top: 10px;
}

.dashboard-card-modern .dashboard-card-icon {
    width: 37px;
    height: 37px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--ui-card-accent, var(--accent)) 14%, var(--surface));
    color: var(--ui-card-accent, var(--accent));
    font-size: 1.1rem;
}

.dashboard-card-modern h2 {
    color: var(--ui-card-text, var(--primary-dark));
}

.admin-card-grid .dashboard-card-link {
    display: flex;
    min-height: 190px;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 20px 19px;
}

.admin-card-grid .dashboard-card-link h2 {
    color: var(--ui-card-text, var(--primary-dark));
}

.admin-tool-button.ui-card-custom {
    border-color: var(--ui-card-border, var(--line));
    background: var(--ui-card-bg, var(--surface));
    color: var(--ui-card-text, var(--ink));
}

.admin-tool-button-image {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    object-fit: var(--ui-card-image-fit, contain);
    border-radius: 7px;
}

.game-tile.ui-card-custom,
.mafia-scenario-card.ui-card-custom {
    border-color: var(--ui-card-border, var(--line));
    background-color: var(--ui-card-bg, var(--surface));
}

.game-tile.ui-card-custom > img,
.mafia-scenario-card.ui-card-custom > img {
    object-fit: var(--ui-card-image-fit, contain);
}

.mafia-scenario-card.ui-card-custom strong {
    color: var(--ui-card-text, var(--primary-dark));
}

.mafia-scenario-card.ui-card-custom small {
    color: var(--ui-card-text, var(--muted));
}

.tournament-card.ui-card-custom {
    border-color: var(--ui-card-border, var(--line));
    background-color: var(--ui-card-bg, var(--surface));
}

.tournament-card-media {
    display: grid;
    height: 82px;
    overflow: hidden;
    place-items: center;
    border-radius: max(14px, calc(var(--ui-card-radius, 22px) - 8px));
    background:
        radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--ui-card-accent, var(--accent)) 30%, transparent), transparent 58%),
        color-mix(in srgb, var(--ui-card-accent, var(--accent)) 8%, var(--surface-soft));
}

.tournament-card-media img {
    width: 100%;
    height: 100%;
    object-fit: var(--ui-card-image-fit, contain);
}

.landing-dynamic-intro {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    margin-top: 18px;
    padding: 12px;
    border: 1px solid var(--ui-card-border, color-mix(in srgb, var(--accent) 28%, var(--line)));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--ui-card-accent, var(--accent)) 9%, transparent), transparent),
        var(--ui-card-bg, var(--surface));
    text-align: start;
}

.landing-dynamic-intro-media {
    display: grid;
    height: 70px;
    overflow: hidden;
    place-items: center;
    border-radius: 15px;
    background: color-mix(in srgb, var(--ui-card-accent, var(--accent)) 12%, var(--surface-soft));
}

.landing-dynamic-intro-media img {
    width: 100%;
    height: 100%;
    object-fit: var(--ui-card-image-fit, contain);
}

.landing-dynamic-intro strong,
.landing-dynamic-intro small {
    display: block;
}

.landing-dynamic-intro strong {
    color: var(--ui-card-text, var(--primary-dark));
    font-size: 1.05rem;
}

.landing-dynamic-intro small {
    margin-top: 5px;
    color: var(--ui-card-text, var(--muted));
    font-size: 0.82rem;
    line-height: 1.8;
}

.landing-hero-custom-image {
    display: grid;
    width: min(100%, 220px);
    height: 62px;
    margin: 13px auto 0;
    overflow: hidden;
    place-items: center;
    border: 1px solid rgba(255, 220, 178, 0.24);
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.15);
}

.landing-hero-custom-image img {
    width: 100%;
    height: 100%;
    object-fit: var(--ui-card-image-fit, contain);
}

.landing-dynamic-card-media {
    display: grid;
    height: 62px;
    margin: -2px 0 14px;
    overflow: hidden;
    place-items: center;
    border-radius: max(13px, calc(var(--ui-card-radius, 22px) - 8px));
    background: color-mix(in srgb, var(--ui-card-accent, var(--accent)) 12%, var(--surface-soft));
}

.landing-dynamic-card-media img {
    width: 100%;
    height: 100%;
    object-fit: var(--ui-card-image-fit, contain);
}

.landing-brand-section {
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 18%, rgba(201, 139, 83, 0.13), transparent 22rem),
        radial-gradient(circle at 88% 75%, rgba(159, 18, 57, 0.08), transparent 24rem),
        var(--surface);
}

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

.landing-brand-card {
    display: grid;
    grid-template-columns: minmax(150px, 0.72fr) minmax(0, 1.28fr);
    min-height: 220px;
    overflow: hidden;
    border: 1px solid var(--ui-card-border, color-mix(in srgb, var(--accent) 28%, var(--line)));
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--ui-card-accent, var(--accent)) 10%, var(--surface)), var(--ui-card-bg, var(--surface)));
    box-shadow: var(--shadow);
}

.landing-brand-card-media {
    display: grid;
    min-height: 220px;
    place-items: end center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--ui-card-accent, var(--accent)) 35%, transparent), transparent 55%),
        linear-gradient(145deg, #4a281d, #1e1310);
}

.landing-brand-card-media img {
    width: 100%;
    height: 100%;
    object-fit: var(--ui-card-image-fit, contain);
}

.landing-brand-card-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 24px;
}

.landing-brand-card-copy h3 {
    margin: 10px 0 5px;
    color: var(--ui-card-text, var(--primary-dark));
    font-size: 1.35rem;
}

.landing-brand-card-copy p {
    margin: 0;
    color: var(--ui-card-text, var(--muted));
    line-height: 1.9;
}

.guide-brand-strip {
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(135deg, rgba(54, 31, 23, 0.96), rgba(31, 20, 17, 0.98)),
        var(--surface);
}

.guide-brand-strip-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 15px;
}

.guide-brand-strip-heading h2 {
    margin: 5px 0 0;
    color: #fff;
    font-size: clamp(1.2rem, 2.7vw, 1.8rem);
}

.guide-brand-strip-heading > span {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.8rem;
}

.guide-brand-strip-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.guide-brand-card {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    min-height: 130px;
    overflow: hidden;
    border: 1px solid rgba(255, 220, 178, 0.18);
    background: rgba(255, 255, 255, 0.07);
}

.guide-brand-card img {
    width: 100%;
    height: 100%;
    object-fit: var(--ui-card-image-fit, contain);
    background: rgba(0, 0, 0, 0.12);
}

.guide-brand-card > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 15px 16px;
}

.guide-brand-card h3 {
    margin: 7px 0 3px;
    color: #fff;
    font-size: 1rem;
}

.guide-brand-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.78rem;
    line-height: 1.8;
}

.ui-card-admin-page {
    --ui-admin-column-gap: 18px;
}

.ui-card-admin-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 22px;
}

.ui-card-admin-intro .panel-heading {
    margin-bottom: 0;
}

.ui-card-admin-controls {
    display: grid;
    gap: 10px;
    justify-items: end;
}

.ui-card-context-tabs,
.ui-card-locale-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.ui-card-context-tabs a,
.ui-card-locale-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 800;
    text-decoration: none;
}

.ui-card-context-tabs a:hover,
.ui-card-context-tabs a:focus-visible,
.ui-card-context-tabs a.is-active,
.ui-card-locale-tabs a:hover,
.ui-card-locale-tabs a:focus-visible,
.ui-card-locale-tabs a.is-active {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
    outline: none;
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    color: var(--primary-dark);
}

.ui-card-locale-tabs small {
    opacity: 0.65;
    font-family: Arial, sans-serif;
    font-size: 0.63rem;
}

.ui-card-admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ui-admin-column-gap);
    margin-top: 18px;
}

.ui-card-admin-editor {
    min-width: 0;
    padding: 20px;
}

.ui-card-admin-editor.is-hidden-card {
    opacity: 0.68;
}

.ui-card-admin-editor-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.ui-card-admin-editor-heading h2 {
    margin: 8px 0 2px;
    overflow-wrap: anywhere;
    font-size: 1rem;
}

.ui-card-admin-editor-heading small {
    color: var(--muted);
    font-size: 0.7rem;
}

.ui-card-visibility-state {
    flex: 0 0 auto;
    padding: 6px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--success) 12%, var(--surface));
    color: var(--success);
    font-size: 0.68rem;
    font-weight: 800;
}

.is-hidden-card .ui-card-visibility-state {
    background: color-mix(in srgb, var(--muted) 12%, var(--surface));
    color: var(--muted);
}

.ui-card-live-preview {
    display: grid;
    grid-template-columns: 102px minmax(0, 1fr);
    min-height: 132px;
    overflow: hidden;
    border: 1px solid var(--ui-card-border, var(--line));
    border-radius: var(--ui-card-radius, 22px);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--ui-card-accent, var(--accent)) 11%, transparent), transparent),
        var(--ui-card-bg, var(--surface-soft));
    color: var(--ui-card-text, var(--ink));
    transition: opacity 160ms ease, filter 160ms ease;
}

.ui-card-live-preview.is-hidden-preview {
    opacity: 0.45;
    filter: grayscale(0.55);
}

.ui-card-live-preview-media {
    position: relative;
    display: grid;
    min-height: 132px;
    place-items: center;
    overflow: hidden;
    background: color-mix(in srgb, var(--ui-card-accent, var(--accent)) 16%, var(--surface-contrast));
}

.ui-card-live-preview-media::after {
    position: absolute;
    inset: 0;
    background: #000;
    content: "";
    opacity: var(--ui-card-overlay, 0);
    pointer-events: none;
}

.ui-card-live-preview-media img {
    width: 100%;
    height: 100%;
    object-fit: var(--ui-card-image-fit, cover);
}

.ui-card-live-preview-media span {
    color: var(--ui-card-accent, var(--accent));
    font-size: 1.6rem;
    font-weight: 900;
}

.ui-card-live-preview-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 15px 17px;
}

.ui-card-live-preview-copy > span:first-child {
    color: var(--ui-card-accent, var(--accent));
    font-size: 0.68rem;
    font-weight: 800;
}

.ui-card-live-preview-copy strong {
    margin-top: 6px;
    color: var(--ui-card-text, var(--primary-dark));
    font-size: 1rem;
}

.ui-card-live-preview-copy p {
    display: -webkit-box;
    overflow: hidden;
    margin: 5px 0 0;
    color: var(--ui-card-text, var(--muted));
    font-size: 0.74rem;
    line-height: 1.75;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.ui-card-live-preview-link {
    margin-top: 8px;
    color: var(--ui-card-accent, var(--accent));
    font-size: 0.68rem;
    font-weight: 800;
}

.ui-card-admin-form {
    display: grid;
    gap: 12px;
    margin-top: 15px;
}

.ui-card-admin-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.ui-card-color-fields {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ui-card-range-fields {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ui-card-admin-form .field {
    min-width: 0;
}

.ui-card-admin-form input[type="color"] {
    width: 100%;
    min-height: 40px;
    padding: 3px;
}

.ui-card-visible-row {
    margin-top: 0;
}

.ui-card-admin-actions {
    margin-top: 0;
}

body {
    font-size: clamp(0.94rem, 0.9rem + 0.14vw, 1rem);
}

button,
.btn,
input,
select,
textarea {
    font-family: inherit;
}

.landing-page .landing-section-heading h2,
.landing-page .guide-section-heading h2 {
    font-size: clamp(1.55rem, 3vw, 2.35rem);
    line-height: 1.45;
}

@media (max-width: 980px) {
    .ui-card-admin-intro {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .ui-card-admin-controls,
    .ui-card-context-tabs,
    .ui-card-locale-tabs {
        justify-items: start;
        justify-content: flex-start;
    }

    .ui-card-admin-grid {
        grid-template-columns: 1fr;
    }

    .ui-card-color-fields,
    .ui-card-range-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .landing-brand-grid,
    .guide-brand-strip-grid {
        grid-template-columns: 1fr;
    }

    .landing-brand-card {
        grid-template-columns: minmax(125px, 0.7fr) minmax(0, 1.3fr);
    }

    .landing-brand-card-media {
        min-height: 190px;
    }

    .guide-brand-strip-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .ui-card-admin-fields,
    .ui-card-color-fields,
    .ui-card-range-fields {
        grid-template-columns: 1fr;
    }

    .ui-card-live-preview {
        grid-template-columns: 86px minmax(0, 1fr);
    }

    .ui-card-live-preview-media {
        min-height: 120px;
    }

    .ui-card-live-preview-copy {
        padding: 13px;
    }

    .landing-dynamic-intro {
        grid-template-columns: 65px minmax(0, 1fr);
        gap: 11px;
    }

    .landing-dynamic-intro-media {
        height: 62px;
    }

    .landing-dynamic-intro strong {
        font-size: 0.93rem;
    }

    .landing-dynamic-intro small {
        font-size: 0.74rem;
    }
}

@media (max-width: 520px) {
    .landing-brand-card {
        grid-template-columns: 1fr;
    }

    .landing-brand-card-media {
        min-height: 155px;
        max-height: 190px;
    }

    .landing-brand-card-copy {
        padding: 19px;
    }

    .guide-brand-card {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .tournament-card-media {
        height: 70px;
    }

    .ui-card-admin-editor {
        padding: 15px;
    }

    .ui-card-admin-editor-heading {
        flex-direction: column;
        gap: 7px;
    }

    .ui-card-visibility-state {
        align-self: flex-start;
    }
}

/* Stable image frames for dynamic cards. */
.ui-card-custom {
    --ui-card-image-ratio: 3 / 2;
}

.game-tile.ui-card-custom > img,
.mafia-scenario-card.ui-card-custom > img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: var(--ui-card-image-ratio, 3 / 2);
    object-fit: var(--ui-card-image-fit, cover);
    object-position: center;
}

.chess-room-entry-card.ui-card-custom > img {
    display: block;
    width: 105px;
    height: auto;
    min-height: 0;
    aspect-ratio: var(--ui-card-image-ratio, 3 / 2);
    object-fit: var(--ui-card-image-fit, cover);
    object-position: center;
}

.tournament-card-media,
.landing-dynamic-card-media,
.landing-dynamic-intro-media,
.landing-hero-custom-image {
    height: auto;
    min-height: 0;
    aspect-ratio: var(--ui-card-image-ratio, 3 / 2);
}

.tournament-card-media img,
.landing-dynamic-card-media img,
.landing-dynamic-intro-media img,
.landing-hero-custom-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: var(--ui-card-image-fit, cover);
    object-position: center;
}

.landing-casual-game-media {
    min-height: 0;
    aspect-ratio: var(--ui-card-image-ratio, 3 / 2);
}

.landing-casual-game-media img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: var(--ui-card-image-fit, cover);
    object-position: center;
    transform: none;
}

.landing-casual-game-card:hover .landing-casual-game-media img {
    transform: scale(1.03);
}

.landing-brand-card-media {
    height: auto;
    min-height: 0;
    aspect-ratio: var(--ui-card-image-ratio, 4 / 5);
}

.landing-brand-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: var(--ui-card-image-fit, contain);
    object-position: center bottom;
}

.guide-brand-card img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: var(--ui-card-image-ratio, 4 / 5);
    object-fit: var(--ui-card-image-fit, contain);
    object-position: center;
}

.dashboard-card-image,
.admin-stat-card-image {
    height: auto;
    min-height: 0;
    aspect-ratio: var(--ui-card-image-ratio, 8 / 5);
}

.dashboard-card-image img,
.admin-stat-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: var(--ui-card-image-fit, cover);
    object-position: center;
}

.dashboard-status-image {
    width: 38px;
    height: 38px;
    aspect-ratio: 1 / 1;
}

.dashboard-status-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: var(--ui-card-image-fit, contain);
    object-position: center;
}

.dashboard-insight-image {
    width: 39px;
    height: 39px;
    aspect-ratio: 1 / 1;
}

.dashboard-insight-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: var(--ui-card-image-fit, contain);
    object-position: center;
}

.ui-card-live-preview-media {
    min-height: 0;
    aspect-ratio: var(--ui-card-image-ratio, 3 / 2);
    align-self: start;
}

.ui-card-live-preview-media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: var(--ui-card-image-fit, cover);
    object-position: center;
}

.ui-card-image-guidance {
    display: grid;
    gap: 7px;
    margin-top: 10px;
    padding: 11px 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 23%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 7%, var(--surface-soft));
}

.ui-card-image-guidance-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    color: var(--muted);
    font-size: 0.74rem;
}

.ui-card-image-guidance-head strong {
    color: var(--primary-dark);
    font-size: 0.82rem;
}

.ui-card-image-guidance-head b {
    padding: 3px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 13%, transparent);
    color: var(--accent);
    font-size: 0.68rem;
}

.ui-card-image-guidance p {
    margin: 0;
    color: var(--muted);
    font-size: 0.7rem;
    line-height: 1.8;
}

.ui-card-image-meta {
    display: block;
    color: var(--success, #25805d);
    font-size: 0.68rem;
    line-height: 1.8;
}

.ui-card-image-meta.is-warning {
    color: var(--warning, #c56a1a);
}

.ui-card-live-preview {
    min-height: 0;
}

@media (max-width: 760px) {
    .chess-room-entry-card.ui-card-custom {
        grid-template-columns: 92px minmax(0, 1fr);
    }

    .chess-room-entry-card.ui-card-custom > img {
        width: 92px;
    }

    .chess-room-entry-card.ui-card-custom .chess-room-entry-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .landing-casual-game-media {
        min-height: 190px;
    }
}

@media (max-width: 520px) {
    .game-tile.ui-card-custom > img,
    .mafia-scenario-card.ui-card-custom > img {
        aspect-ratio: var(--ui-card-image-ratio, 3 / 2);
    }

    .landing-casual-game-media {
        min-height: 170px;
    }

    .ui-card-image-guidance {
        padding: 10px;
    }
}

/* Games view: keep every section in a predictable vertical flow. */
.games-page {
    align-content: start;
    gap: 8px;
}

.game-subscription-bar + .games-page {
    margin-top: clamp(20px, 3vw, 32px);
}

.games-page > .games-mode-tabs,
.games-page > .games-mode-panel {
    min-width: 0;
}

.games-page > .games-mode-tabs {
    margin-bottom: 2px;
}

.games-page > .games-mode-panel {
    display: grid;
    gap: 8px;
}

.games-page > .games-mode-panel[hidden] {
    display: none !important;
}

.games-page .games-mode-offline-panel {
    padding: 0;
    border: 0;
    background: transparent;
}

.games-page .chess-room-entry {
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
}

.games-page .chess-room-entry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 8px;
    min-width: 0;
}

/* The online chess entry uses the same card language as game variants. */
.games-page .chess-online-entry-card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    padding: 0;
}

.games-page .chess-online-entry-card > img {
    width: 100%;
    max-width: none;
    aspect-ratio: 1.55 / 1;
    border-radius: max(14px, calc(var(--ui-card-radius, 17px) - 5px));
    object-fit: cover;
}

.games-page .chess-online-entry-body {
    min-width: 0;
}

.games-page .chess-online-entry-body small {
    line-height: 1.8;
}

.games-page .chess-online-entry-actions {
    justify-content: flex-start;
    padding: 0 13px 14px;
}

.games-page .chess-room-entry-card {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
    padding: 14px;
}

.games-page .chess-room-entry-card.ui-card-custom {
    grid-template-columns: 1fr;
}

.games-page .chess-room-entry-card.ui-card-custom > img {
    width: 100%;
    max-width: none;
    aspect-ratio: 16 / 8;
    border-radius: 14px;
    object-fit: cover;
}

.games-page .chess-room-entry-card > div {
    min-width: 0;
}

.games-page .chess-room-entry-card p {
    max-width: 68ch;
}

.games-page .chess-room-entry-actions {
    justify-content: flex-start;
}

.games-page .mafia-scenarios,
.games-page .chess-room-entry {
    width: 100%;
    min-width: 0;
    margin: 0;
}

.games-page .games-catalog {
    align-items: stretch;
    grid-auto-rows: 1fr;
}

.games-page .game-tile {
    height: 100%;
    grid-template-rows: auto 1fr;
}

.games-page .game-tile > img {
    aspect-ratio: 1.52 / 1;
}

/* Keep the online game tiles visually identical, including custom card images. */
.games-page .games-catalog .game-tile > img {
    aspect-ratio: 1.52 / 1;
    object-fit: cover;
    object-position: center;
}

.games-page .games-catalog-offline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.games-page .game-tile-spy { text-decoration: none; cursor: pointer; }
.games-page .game-tile-spy:not([aria-disabled]):is(:hover, :focus-visible) {
    border-color: color-mix(in srgb, var(--primary) 58%, var(--line));
    box-shadow: 0 16px 36px color-mix(in srgb, var(--primary) 15%, transparent);
    transform: translateY(-2px);
}
.games-page .game-tile-spy[aria-disabled] { cursor: not-allowed; opacity: .65; }
.games-page .game-tile-spy .game-tile-title small { color: var(--muted); line-height: 1.65; }

.games-page .games-catalog-bot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.games-page .bot-game-variants {
    scroll-margin-top: 18px;
}

/* Chess bot levels are a catalogue of independent cards, like the game tiles. */
.games-page .bot-game-variants-chess {
    padding: 0;
    border: 0;
    background: transparent;
}

.games-page .game-variant-disabled {
    cursor: not-allowed;
    opacity: 0.72;
}

.games-page .game-variant-disabled:hover {
    transform: none;
    border-color: var(--line);
    box-shadow: var(--shadow-sm, 0 10px 28px rgba(34, 24, 18, 0.08));
}

@media (max-width: 760px) {
    .games-page .chess-room-entry-card.ui-card-custom {
        grid-template-columns: 1fr;
    }

    .games-page .chess-room-entry-card.ui-card-custom > img {
        aspect-ratio: 16 / 9;
        width: 100%;
    }
}

@media (max-width: 540px) {
    .games-page .games-catalog-offline {
        grid-template-columns: minmax(0, 1fr);
    }

    .games-page .games-catalog-bot {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Shared tab navigation component used by friends, tournaments, games and support. */
.unified-tabs {
    display: grid !important;
    width: 100%;
    min-width: 0;
    gap: 8px;
    padding: 6px;
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
    border-radius: 16px;
    background: color-mix(in srgb, var(--primary) 5%, var(--surface-soft));
    box-sizing: border-box;
}

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

.unified-tabs-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.unified-tabs.unified-tabs-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.games-page .game-tile-dice,
.games-page .game-tile-spin,
.games-page .game-tile-coin,
.games-page .game-tile-hourglass,
.games-page .game-tile-bottle,
.games-page .game-tile-stopwatch,
.games-page .game-tile-game-clock,
.games-page .game-tile-scoreboard {
    text-decoration: none;
}

.games-page .game-tile-dice:is(:hover, :focus-visible),
.games-page .game-tile-spin:is(:hover, :focus-visible),
.games-page .game-tile-coin:is(:hover, :focus-visible),
.games-page .game-tile-hourglass:is(:hover, :focus-visible),
.games-page .game-tile-bottle:is(:hover, :focus-visible),
.games-page .game-tile-stopwatch:is(:hover, :focus-visible),
.games-page .game-tile-game-clock:is(:hover, :focus-visible),
.games-page .game-tile-scoreboard:is(:hover, :focus-visible) {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.games-page .game-tile-dice:focus-visible,
.games-page .game-tile-spin:focus-visible,
.games-page .game-tile-coin:focus-visible,
.games-page .game-tile-hourglass:focus-visible,
.games-page .game-tile-bottle:focus-visible,
.games-page .game-tile-stopwatch:focus-visible,
.games-page .game-tile-game-clock:focus-visible,
.games-page .game-tile-scoreboard:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}

@media (max-width: 540px) {
    .games-mode-tabs.unified-tabs-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .games-page .games-catalog-tools {
        grid-template-columns: 1fr;
    }
}

.unified-tabs > .unified-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 48px;
    margin: 0 !important;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: clamp(0.78rem, 1.6vw, 0.94rem);
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        color 160ms ease,
        transform 160ms ease;
}

.unified-tabs > .unified-tab:hover,
.unified-tabs > .unified-tab:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
    color: var(--primary-dark);
    outline: none;
}

.unified-tabs > .unified-tab:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.unified-tabs > .unified-tab.is-active,
.unified-tabs > .unified-tab[aria-selected="true"] {
    border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
    background: var(--primary);
    color: var(--on-primary, #fffaf5);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 18%, transparent);
}

.unified-tabs > .unified-tab:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

@media (max-width: 540px) {
    .unified-tabs {
        gap: 4px;
        padding: 4px;
    }

    .unified-tabs > .unified-tab {
        min-height: 44px;
        padding-inline: 6px;
        font-size: 0.74rem;
    }
}

/* In-page support workspace and its lightweight accessible modals. */
.support-inpage {
    display: grid;
    gap: clamp(18px, 2.4vw, 28px);
    min-width: 0;
}

.support-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
}

.support-tab {
    min-width: 0;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: clamp(0.78rem, 1.6vw, 0.92rem);
    font-weight: 800;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.support-tab:hover,
.support-tab:focus-visible {
    color: var(--primary-dark);
    outline: none;
}

.support-tab.is-active {
    border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
    background: var(--surface);
    color: var(--primary-dark);
    box-shadow: var(--shadow-sm, 0 6px 16px rgba(34, 24, 18, 0.08));
}

.support-inpage [data-support-panel] {
    min-width: 0;
    animation: games-mode-enter 180ms ease both;
}

.support-inpage [data-support-panel][hidden] {
    display: none !important;
}

.support-inpage.is-ticket-open > .support-tabs,
.support-inpage.is-ticket-open > [data-support-panel] {
    display: none !important;
}

.support-ticket-view {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 18px;
    scroll-margin-top: calc(var(--dashboard-header-offset, 0px) + 12px);
    animation: games-mode-enter 180ms ease both;
}

.support-ticket-view[hidden] {
    display: none !important;
}

.support-page {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.support-create-button {
    justify-self: start;
}

.support-page .ticket-layout {
    margin-top: 0;
}

.ticket-history-panel .panel-heading.has-section-help {
    padding-right: 46px;
    padding-left: 0;
}

.ticket-history-panel .panel-heading .section-help-widget {
    right: 0;
    left: auto;
}

.ticket-history-panel .panel-heading .section-help-popover {
    right: 0;
    left: auto;
}

@media (max-width: 640px) {
    .ticket-history-panel .panel-heading-row > .badge {
        display: none;
    }

    .ticket-history-panel .panel-heading {
        margin-bottom: 8px;
    }

    .ticket-history-panel .panel-heading.has-section-help {
        padding-right: 40px;
    }

    .ticket-history-panel .ticket-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 12px;
    }

    .ticket-history-panel .ticket-filters input,
    .ticket-history-panel .ticket-filters .btn {
        grid-column: 1 / -1;
    }

    .ticket-history-panel .ticket-filters input,
    .ticket-history-panel .ticket-filters select,
    .ticket-history-panel .ticket-filters .btn {
        min-height: 38px;
        height: 38px;
        padding-block: 5px;
    }
}

@media (max-width: 760px) {
    .section-help-widget,
    .card-help-widget {
        display: none;
    }

    .has-section-help {
        padding-left: 0;
    }

    .ticket-history-panel .panel-heading.has-section-help {
        padding-right: 0;
    }
}

.support-inpage .ticket-layout {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
}

.support-inpage .ticket-history-panel,
.support-inpage .ticket-list {
    width: 100%;
    min-width: 0;
}

.support-inpage .ticket-list-item {
    width: 100%;
    min-width: 0;
}

.support-inpage .ticket-list-main {
    flex: 1 1 auto;
    min-width: 0;
}

.support-inpage .ticket-list-badges {
    flex: 0 0 auto;
}

@media (max-width: 640px) {
    .support-inpage .ticket-list-item {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .support-inpage .ticket-list-title {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 8px;
    }

    .support-inpage .ticket-list-title strong {
        white-space: normal;
    }

    .support-inpage .ticket-meta,
    .support-inpage .ticket-list-badges {
        flex-wrap: wrap;
        gap: 8px;
    }
}

.support-modal[hidden] {
    display: none !important;
}

.support-modal {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    place-items: center;
    grid-template-areas: "support-modal-stack";
    padding: 20px;
}

.support-modal-backdrop {
    grid-area: support-modal-stack;
    width: 100%;
    height: 100%;
    background: rgba(35, 22, 15, 0.58);
    backdrop-filter: blur(4px);
}

.support-modal-dialog {
    display: grid;
    gap: 14px;
    grid-area: support-modal-stack;
    position: relative;
    z-index: 1;
    width: min(720px, 100%);
    max-height: min(92vh, 820px);
    overflow: auto;
    margin: 0;
    padding: clamp(18px, 3vw, 28px);
}

.support-modal-close {
    display: grid;
    width: 36px;
    height: 36px;
    justify-self: start;
    margin: 0;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-soft);
    color: var(--muted);
    font: inherit;
    font-size: 1.25rem;
    cursor: pointer;
}

.support-modal-close:hover,
.support-modal-close:focus-visible {
    border-color: var(--accent);
    color: var(--primary-dark);
    outline: none;
}

body.support-modal-open {
    overflow: hidden;
}

/* Support forms are inline subviews, not viewport modals. */
.support-inline-form[hidden] {
    display: none !important;
}

.support-inline-form {
    display: block;
    width: 100%;
    min-width: 0;
}

.support-inline-form-card {
    width: 100%;
    min-width: 0;
    margin: 0;
}

@media (max-width: 540px) {
    .support-tabs {
        gap: 8px;
        padding: 4px;
    }

    .support-tab {
        min-height: 44px;
        padding-inline: 6px;
    }

    .support-create-button {
        width: 100%;
    }

    .support-modal {
        align-items: end;
        padding: 0;
    }

    .support-modal-dialog {
        width: 100%;
        max-height: 92vh;
        border-radius: 22px 22px 0 0;
    }
}

/* Unified card language: use the games lobby visual system across the site. */
:root {
    --game-card-radius: 22px;
    --game-card-shadow: var(--shadow-sm, 0 10px 28px rgba(34, 24, 18, 0.08));
    --game-card-hover-shadow: 0 16px 36px color-mix(in srgb, var(--accent) 16%, transparent);
}

html[data-theme="dark"] {
    --game-card-shadow: var(--shadow-sm, 0 12px 30px rgba(0, 0, 0, 0.28));
    --game-card-hover-shadow: 0 18px 40px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Main panels now share the same calm surface, border and radius as game cards. */
.panel:not([data-bg-board-panel]):not(.chess-board-panel):not(.auth-card) {
    border: 1px solid var(--line);
    border-radius: var(--game-card-radius);
    background: var(--surface);
    box-shadow: var(--game-card-shadow);
}

/* Branded hero cards keep their dark visual treatment but use the same shell. */
.wallet-balance-card,
.landing-visual-card {
    border: 1px solid var(--ui-card-border, var(--line));
    border-radius: var(--ui-card-radius, var(--game-card-radius));
    box-shadow: var(--game-card-shadow);
}

/*
 * Keep the selector list explicit. It prevents modal, board and form internals
 * from accidentally inheriting card hover behaviour while covering the site's
 * reusable information cards.
 */
.game-card-style,
.game-tile,
.mafia-scenario-card,
.chess-room-entry-card,
.content-page-picker-card,
.game-card,
.matchmaking-card,
.dashboard-card,
.dashboard-overview-card,
.dashboard-status-card,
.dashboard-insight-card,
.dashboard-card-modern,
.tournament-card,
.tournament-plan-card,
.admin-note-card,
.friend-card,
.user-result,
.game-invite-item,
.notification-page-item,
.admin-stat-card,
.feedback-history-item,
.feedback-admin-item,
.gateway-admin-card,
.maintenance-card,
.role-list-item,
.accounting-summary-card,
.session-card,
.ticket-list-item,
.ticket-detail-card,
.ticket-event-item,
.ticket-rating-report-panel,
.admin-user-rating-panel,
.landing-proof-item,
.landing-dynamic-intro,
.landing-casual-game-card,
.landing-brand-card,
.landing-process-step,
.landing-faq-item,
.landing-feature-card,
.landing-mission-card,
.admin-branding-card,
.admin-selected-site-card,
.daily-message-history-item,
.admin-template-card,
.admin-cloud-file-card,
.daily-message-card,
.admin-training-card,
.admin-contact-card,
.investigator-role-dialog-card,
.subscription-current-card,
.subscription-wallet-summary,
.subscription-plan-card,
.privacy-principle-card,
.privacy-policy-card,
.guide-step-card,
.guide-feature-card,
.guide-brand-card,
.chess-player-card,
.chess-result-card,
.rules-principle-card,
.rules-policy-card,
.profile-medal-card,
.bank-account-item,
.content-editor-item,
.auth-preview-card {
    border: 1px solid var(--ui-card-border, var(--line));
    border-radius: var(--ui-card-radius, var(--game-card-radius));
    background: var(--ui-card-bg, var(--surface));
    box-shadow: var(--game-card-shadow);
    color: var(--ui-card-text, var(--ink));
}

/* Game cards are compact, elevated and clearly interactive. */
.game-card-style,
.game-tile,
.mafia-scenario-card,
.chess-room-entry-card,
.content-page-picker-card,
.game-card,
.matchmaking-card,
.tournament-card,
.tournament-plan-card,
.friend-card,
.user-result,
.game-invite-item,
.notification-page-item,
.ticket-list-item,
.feedback-history-item,
.role-list-item,
.landing-casual-game-card,
.landing-brand-card,
.landing-process-step,
.landing-faq-item,
.landing-feature-card,
.subscription-plan-card,
.profile-medal-card,
.bank-account-item,
.content-editor-item,
.auth-preview-card {
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease,
        background-color 160ms ease;
}

.game-card-style:hover,
.game-tile:not(.game-tile-disabled):hover,
.mafia-scenario-card:hover,
.chess-room-entry-card:hover,
.content-page-picker-card:hover,
.game-card:hover,
.matchmaking-card:hover,
.tournament-card:hover,
.tournament-plan-card:hover,
.friend-card:hover,
.user-result:hover,
.game-invite-item:hover,
.notification-page-item:hover,
.ticket-list-item:hover,
.feedback-history-item:hover,
.role-list-item:hover,
.landing-casual-game-card:hover,
.landing-brand-card:hover,
.landing-process-step:hover,
.landing-faq-item:hover,
.landing-feature-card:hover,
.subscription-plan-card:hover,
.profile-medal-card:hover,
.bank-account-item:hover {
    border-color: color-mix(in srgb, var(--ui-card-accent, var(--accent)) 58%, var(--line));
    box-shadow: var(--game-card-hover-shadow);
    transform: translateY(-2px);
}

.game-card-style:focus-visible,
.game-tile:focus-visible,
.mafia-scenario-card:focus-visible,
.chess-room-entry-card:focus-visible,
.content-page-picker-card:focus-visible,
.game-card:focus-within,
.matchmaking-card:focus-within,
.tournament-card:focus-visible,
.tournament-plan-card:focus-visible,
.friend-card:focus-within,
.user-result:focus-within,
.game-invite-item:focus-within,
.notification-page-item:focus-within,
.ticket-list-item:focus-within,
.feedback-history-item:focus-within,
.role-list-item:focus-within,
.landing-casual-game-card:focus-visible,
.landing-brand-card:focus-within,
.landing-process-step:focus-within,
.landing-faq-item:focus-within,
.landing-feature-card:focus-within,
.subscription-plan-card:focus-within,
.profile-medal-card:focus-within,
.bank-account-item:focus-within {
    border-color: color-mix(in srgb, var(--ui-card-accent, var(--accent)) 68%, var(--line));
    outline: 3px solid color-mix(in srgb, var(--ui-card-accent, var(--accent)) 18%, transparent);
    outline-offset: 2px;
}

/* Remove the remaining one-off white card fills so dark mode follows the same rule. */
.admin-stat-card,
.accounting-summary-card,
.dashboard-overview-card,
.dashboard-status-card,
.dashboard-insight-card,
.session-card,
.friend-card,
.user-result,
.notification-page-item,
.ticket-list-item,
.landing-proof-item,
.landing-feature-card,
.landing-mission-card,
.admin-note-card,
.admin-training-card,
.admin-contact-card,
.admin-template-card,
.admin-cloud-file-card,
.daily-message-history-item,
.feedback-history-item,
.role-list-item,
.content-editor-item,
.auth-preview-card,
.subscription-plan-card,
.profile-medal-card,
.bank-account-item {
    background-color: var(--ui-card-bg, var(--surface));
}

/* Titles and supporting copy use the same hierarchy as the games lobby. */
.game-tile-title > strong,
.mafia-scenario-card-body strong,
.chess-room-entry-card strong,
.game-card h2,
.matchmaking-card h2,
.dashboard-card h2,
.dashboard-overview-card strong,
.dashboard-status-copy strong,
.dashboard-insight-card strong,
.tournament-card h2,
.tournament-plan-card h3,
.admin-stat-card strong,
.accounting-summary-card strong,
.subscription-plan-card h3,
.profile-medal-card strong,
.landing-feature-card h3,
.landing-process-step h3,
.landing-mission-card strong,
.admin-note-card h3,
.admin-training-card h3,
.admin-contact-card h3,
.admin-template-card h3,
.admin-cloud-file-card h3,
.daily-message-history-item strong,
.feedback-history-item strong,
.role-list-item strong,
.content-editor-item strong,
.auth-preview-card strong,
.bank-account-item strong {
    color: var(--ui-card-text, var(--primary-dark));
}

.game-tile-wins,
.mafia-scenario-card-body small,
.chess-room-entry-card p,
.game-card p,
.matchmaking-card p,
.dashboard-card p,
.dashboard-overview-card span,
.dashboard-overview-card small,
.dashboard-status-copy small,
.dashboard-insight-card small,
.tournament-card-header p,
.tournament-plan-card p,
.admin-stat-card span,
.admin-stat-card small,
.accounting-summary-card span,
.accounting-summary-card small,
.subscription-plan-card p,
.landing-feature-card p,
.landing-process-step p,
.admin-note-card p,
.admin-training-card p,
.admin-contact-card p,
.admin-template-card p,
.daily-message-history-item p,
.feedback-history-item p,
.role-list-item small,
.content-editor-item p,
.auth-preview-card p,
.bank-account-details span {
    color: var(--ui-card-text, var(--muted));
}

/* Inner statistic cells remain soft surfaces instead of becoming competing cards. */
.tournament-meta-grid > div,
.tournament-summary-grid > div,
.plan-prize-grid > div,
.dashboard-daily-tip,
.subscription-wallet-summary,
.bank-account-details,
.landing-trust-item,
.landing-proof-item {
    border-color: color-mix(in srgb, var(--ui-card-accent, var(--accent)) 18%, var(--line));
    background: color-mix(in srgb, var(--ui-card-accent, var(--accent)) 5%, var(--surface));
}

@media (max-width: 760px) {
    .panel:not([data-bg-board-panel]):not(.chess-board-panel):not(.auth-card),
    .game-card-style,
    .game-tile,
    .mafia-scenario-card,
    .chess-room-entry-card,
    .content-page-picker-card,
    .dashboard-card,
    .dashboard-overview-card,
    .dashboard-status-card,
    .dashboard-insight-card,
    .dashboard-card-modern,
    .game-card,
    .matchmaking-card,
    .tournament-card,
    .tournament-plan-card,
    .wallet-balance-card,
    .admin-stat-card,
    .accounting-summary-card,
    .session-card,
    .ticket-detail-card,
    .landing-casual-game-card,
    .landing-brand-card,
    .subscription-current-card,
    .subscription-plan-card,
    .profile-medal-card,
    .bank-account-item {
        border-radius: 18px;
    }

    .game-card-style:hover,
    .game-tile:not(.game-tile-disabled):hover,
    .mafia-scenario-card:hover,
    .chess-room-entry-card:hover,
    .content-page-picker-card:hover,
    .tournament-card:hover,
    .tournament-plan-card:hover,
    .friend-card:hover,
    .user-result:hover,
    .game-invite-item:hover,
    .notification-page-item:hover,
    .ticket-list-item:hover,
    .landing-casual-game-card:hover,
    .landing-brand-card:hover,
    .landing-process-step:hover,
    .landing-faq-item:hover,
    .landing-feature-card:hover,
    .subscription-plan-card:hover,
    .profile-medal-card:hover,
    .bank-account-item:hover {
        transform: translateY(-1px);
    }
}

/*
 * Global card template.
 *
 * The games lobby is the single visual source of truth for reusable cards.
 * Per-card content can still change, but the shell, colors, spacing, radius,
 * shadow and grid density are controlled by the global admin settings.
 */
:root {
    --site-card-bg: var(--surface);
    --site-card-border: var(--line);
    --site-card-accent: var(--primary);
    --site-card-text: var(--ink);
    --site-card-radius: 22px;
    --site-card-gap: 18px;
    --site-card-shadow: var(--shadow-sm, 0 10px 28px rgba(34, 24, 18, 0.08));
    --site-card-hover-shadow: 0 16px 36px color-mix(in srgb, var(--site-card-accent) 15%, transparent);
    --site-card-hover-lift: -2px;
    --site-card-columns-desktop: 3;
    --site-card-columns-tablet: 2;
    --site-card-columns-mobile: 1;
    --site-card-columns: var(--site-card-columns-desktop);
}

html[data-card-style="soft"] {
    --site-card-shadow: 0 8px 24px rgba(70, 39, 25, 0.06);
    --site-card-hover-shadow: 0 12px 28px color-mix(in srgb, var(--site-card-accent) 12%, transparent);
    --site-card-hover-lift: -1px;
}

html[data-card-style="flat"] {
    --site-card-shadow: none;
    --site-card-hover-shadow: 0 0 0 3px color-mix(in srgb, var(--site-card-accent) 14%, transparent);
    --site-card-hover-lift: 0;
}

html[data-theme="dark"][data-card-style="soft"] {
    --site-card-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

html[data-theme="dark"][data-card-style="game"] {
    --site-card-shadow: var(--shadow-sm, 0 12px 30px rgba(0, 0, 0, 0.28));
}

html[data-theme="dark"][data-card-style="flat"] {
    --site-card-shadow: none;
}

html[data-card-shadow="soft"] {
    --site-card-shadow: 0 8px 24px rgba(70, 39, 25, 0.06);
    --site-card-hover-shadow: 0 12px 28px color-mix(in srgb, var(--site-card-accent) 12%, transparent);
    --site-card-hover-lift: -1px;
}

html[data-card-shadow="medium"] {
    --site-card-shadow: 0 13px 34px rgba(70, 39, 25, 0.1);
    --site-card-hover-shadow: 0 16px 36px color-mix(in srgb, var(--site-card-accent) 15%, transparent);
    --site-card-hover-lift: -2px;
}

html[data-card-shadow="none"] {
    --site-card-shadow: none;
    --site-card-hover-shadow: 0 0 0 3px color-mix(in srgb, var(--site-card-accent) 14%, transparent);
    --site-card-hover-lift: 0;
}

html[data-theme="dark"][data-card-shadow="soft"] {
    --site-card-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

html[data-theme="dark"][data-card-shadow="medium"] {
    --site-card-shadow: 0 13px 34px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"][data-card-shadow="none"] {
    --site-card-shadow: none;
}

:is(
    .session-limit-card,
    .session-settings-card,
    .admin-tool-button
) {
    border: 1px solid var(--site-card-border) !important;
    border-radius: var(--site-card-radius) !important;
    background: var(--site-card-bg) !important;
    color: var(--site-card-text) !important;
    box-shadow: var(--site-card-shadow) !important;
}

:is(
    .session-limit-card,
    .session-settings-card,
    .admin-tool-button
):is(:hover, :focus-within, :focus-visible) {
    border-color: color-mix(in srgb, var(--site-card-accent) 62%, var(--site-card-border)) !important;
    box-shadow: var(--site-card-hover-shadow) !important;
    transform: translateY(var(--site-card-hover-lift));
}

:is(
    .dashboard-card-modern,
    .admin-stat-card
) :is(.dashboard-card-icon, .dashboard-card-badge) {
    background: color-mix(
        in srgb,
        var(--site-card-accent) 13%,
        var(--site-card-bg)
    ) !important;
}

.wallet-balance-card :is(span, small, .wallet-balance-secondary) {
    color: color-mix(in srgb, var(--site-card-text) 68%, transparent) !important;
}

.wallet-balance-card .wallet-balance-meta {
    border-color: color-mix(
        in srgb,
        var(--site-card-accent) 20%,
        var(--site-card-border)
    ) !important;
    background: color-mix(
        in srgb,
        var(--site-card-accent) 6%,
        var(--site-card-bg)
    ) !important;
}

:is(.dashboard-card-modern, .admin-stat-card)::before {
    background: var(--site-card-accent) !important;
}

/*
 * Card grids use the same density controls everywhere. Special layouts such
 * as boards, chat rows and form fields are intentionally not grids here.
 */

/* Global-card settings screen. */
.ui-card-global-settings {
    margin-bottom: var(--site-card-gap, 18px);
}

.ui-card-legacy-style-fields {
    display: none !important;
}

.ui-card-global-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(290px, 0.8fr);
    align-items: start;
    gap: var(--site-card-gap, 18px);
}

.ui-card-global-form {
    display: grid;
    gap: 16px;
}

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

.ui-card-global-color-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ui-card-global-range-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ui-card-global-columns {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--site-card-border);
    border-radius: max(14px, calc(var(--site-card-radius) - 6px));
    background: color-mix(in srgb, var(--site-card-accent) 4%, var(--site-card-bg));
}

.ui-card-global-columns legend {
    padding: 0 6px;
    color: var(--site-card-text);
    font-size: 0.86rem;
    font-weight: 800;
}

.ui-card-global-form input,
.ui-card-global-form select {
    border-color: var(--site-card-border);
}

.ui-card-global-form output {
    float: inline-end;
    color: var(--site-card-accent);
    font-size: 0.78rem;
    font-weight: 800;
}

.ui-card-global-actions {
    margin-top: 0;
}

.ui-card-global-preview-panel {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.ui-card-global-preview-heading {
    display: grid;
    gap: 7px;
}

.ui-card-global-preview-heading small {
    color: var(--muted);
    line-height: 1.8;
}

.ui-card-global-preview {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--site-card-radius);
    background: var(--surface-soft);
    overflow: hidden;
}

.ui-card-global-preview[data-card-style="soft"] {
    --site-card-shadow: 0 8px 24px rgba(70, 39, 25, 0.06);
    --site-card-hover-shadow: 0 12px 28px color-mix(in srgb, var(--site-card-accent) 12%, transparent);
    --site-card-hover-lift: -1px;
}

.ui-card-global-preview[data-card-style="flat"] {
    --site-card-shadow: none;
    --site-card-hover-shadow: 0 0 0 3px color-mix(in srgb, var(--site-card-accent) 14%, transparent);
    --site-card-hover-lift: 0;
}

.ui-card-global-preview[data-card-shadow="soft"] {
    --site-card-shadow: 0 8px 24px rgba(70, 39, 25, 0.06);
    --site-card-hover-shadow: 0 12px 28px color-mix(in srgb, var(--site-card-accent) 12%, transparent);
    --site-card-hover-lift: -1px;
}

.ui-card-global-preview[data-card-shadow="medium"] {
    --site-card-shadow: 0 13px 34px rgba(70, 39, 25, 0.1);
    --site-card-hover-shadow: 0 16px 36px color-mix(in srgb, var(--site-card-accent) 15%, transparent);
    --site-card-hover-lift: -2px;
}

.ui-card-global-preview[data-card-shadow="none"] {
    --site-card-shadow: none;
    --site-card-hover-shadow: 0 0 0 3px color-mix(in srgb, var(--site-card-accent) 14%, transparent);
    --site-card-hover-lift: 0;
}

.ui-card-global-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--site-card-gap);
}

.ui-card-global-preview-card {
    display: grid;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--site-card-border);
    border-radius: var(--site-card-radius);
    background: var(--site-card-bg);
    color: var(--site-card-text);
    box-shadow: var(--site-card-shadow);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.ui-card-global-preview-card:hover {
    border-color: var(--site-card-accent);
    box-shadow: var(--site-card-hover-shadow);
    transform: translateY(var(--site-card-hover-lift));
}

.ui-card-global-preview-media {
    aspect-ratio: 1.52 / 1;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--site-card-accent) 48%, transparent),
            color-mix(in srgb, var(--site-card-accent) 10%, var(--site-card-bg))
        );
}

.ui-card-global-preview-card > div:last-child {
    display: grid;
    gap: 5px;
    padding: 12px;
}

.ui-card-global-preview-card small {
    color: color-mix(in srgb, var(--site-card-text) 64%, transparent);
    font-size: 0.68rem;
}

.ui-card-global-preview-card strong {
    color: var(--site-card-text);
    font-size: 0.82rem;
}

.ui-card-global-preview-card p {
    margin: 0;
    color: color-mix(in srgb, var(--site-card-text) 68%, transparent);
    font-size: 0.68rem;
    line-height: 1.7;
}

.ui-card-global-preview[data-card-shadow="none"] .ui-card-global-preview-card {
    box-shadow: none;
}

.ui-card-global-preview[data-card-shadow="medium"] .ui-card-global-preview-card {
    box-shadow: 0 16px 36px color-mix(in srgb, var(--site-card-accent) 15%, transparent);
}

.ui-card-settings-reset-form {
    display: flex;
    justify-content: flex-start;
    margin: 0;
}

@media (max-width: 980px) {
    :root {
        --site-card-columns: var(--site-card-columns-tablet);
    }

    .ui-card-global-layout {
        grid-template-columns: 1fr;
    }

    .ui-card-global-color-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    :root {
        --site-card-columns: var(--site-card-columns-mobile);
    }

    .ui-card-global-field-grid,
    .ui-card-global-color-grid,
    .ui-card-global-range-grid {
        grid-template-columns: 1fr;
    }

    .ui-card-global-preview-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Lightweight card-management surface. Keep the list scannable and reveal
 * advanced fields only when the administrator edits a specific card. */
.ui-card-admin-hero {
    align-items: center;
}

.ui-card-admin-hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ui-card-admin-summary {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    color: var(--muted);
    font-size: 0.78rem;
}

.ui-card-admin-summary strong {
    color: var(--primary-dark);
    font-size: 1.25rem;
}

.ui-card-admin-editor {
    content-visibility: auto;
    contain-intrinsic-size: 420px;
}

.ui-card-global-details {
    padding: 0;
}

.ui-card-global-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    cursor: pointer;
    list-style: none;
}

.ui-card-global-summary::-webkit-details-marker,
.ui-card-editor-details > summary::-webkit-details-marker {
    display: none;
}

.ui-card-global-summary > span:nth-child(2) {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.ui-card-global-summary strong {
    color: var(--primary-dark);
    font-size: 0.96rem;
}

.ui-card-global-summary small {
    color: var(--muted);
    font-size: 0.72rem;
}

.ui-card-disclosure {
    margin-inline-start: auto;
    color: var(--muted);
    font-size: 1.15rem;
    transition: transform 160ms ease;
}

.ui-card-global-details[open] .ui-card-disclosure {
    transform: rotate(180deg);
}

.ui-card-global-details > .ui-card-global-layout {
    padding: 0 20px 20px;
}

.ui-card-admin-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px 10px;
}

.ui-card-admin-toolbar h2 {
    margin: 7px 0 0;
    font-size: 1.05rem;
}

.ui-card-search input {
    width: min(280px, 42vw);
    min-height: 40px;
    border-color: var(--line);
    background: var(--surface-soft);
}

.ui-card-admin-controls {
    padding: 0 20px 18px;
}

.ui-card-assignment-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
    align-items: end;
    gap: 20px;
    margin-bottom: 18px;
    padding: 20px;
}

.ui-card-assignment-panel h2 {
    margin: 7px 0 5px;
    font-size: 1.05rem;
}

.ui-card-assignment-panel p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    font-size: .84rem;
    line-height: 1.8;
}

.ui-card-assignment-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
}

.ui-card-assignment-form .field {
    display: grid;
    gap: 6px;
    margin: 0;
}

.ui-card-assignment-form .field > span {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 700;
}

.ui-card-assignment-form select {
    width: 100%;
    min-height: 42px;
}

.ui-card-assignment-empty {
    align-self: center;
    padding: 12px 14px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    color: var(--muted);
    background: var(--surface-soft);
}

.ui-card-editor-details {
    margin-top: 14px;
    border-top: 1px solid var(--line);
}

.ui-card-editor-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 0 0;
    cursor: pointer;
    color: var(--primary-dark);
    font-size: 0.8rem;
    font-weight: 800;
    list-style: none;
}

.ui-card-editor-details > summary::after {
    content: '⌄';
    color: var(--muted);
    font-size: 1rem;
    transition: transform 160ms ease;
}

.ui-card-editor-details[open] > summary::after {
    transform: rotate(180deg);
}

.ui-card-editor-details > summary small {
    margin-inline-start: auto;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 600;
}

.ui-card-editor-details[open] .ui-card-admin-form {
    animation: ui-card-editor-reveal 160ms ease-out;
}

.ui-card-live-preview-media img[hidden] + span {
    display: inline-flex;
}

@keyframes ui-card-editor-reveal {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 620px) {
    .ui-card-admin-hero,
    .ui-card-admin-hero-actions,
    .ui-card-admin-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .ui-card-search,
    .ui-card-search input {
        width: 100%;
    }

    .ui-card-global-summary {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .ui-card-assignment-panel,
    .ui-card-assignment-form {
        grid-template-columns: 1fr;
    }
}

/*
 * Strict unified card surface.
 *
 * The games lobby (.game-tile) is the only visual reference for information
 * cards across the site. Older page-specific rules are intentionally
 * overridden here so a newly added page cannot reintroduce a different
 * gradient, radius, border or shadow.
 */
:root {
    --site-card-inner-radius: max(14px, calc(var(--site-card-radius) - 8px));
    --site-card-muted: color-mix(in srgb, var(--site-card-text) 68%, transparent);
}

/* The game lobby has no colored card variants; keep all card copy consistent. */

/* Remove the remaining colored variants inside cards. */
:is(
    .tournament-plan-card,
    .landing-proof-item,
    .landing-trust-item,
    .landing-process-step,
    .landing-faq-item,
    .landing-feature-card,
    .landing-mission-card,
    .daily-message-card,
    .admin-note-card,
    .admin-training-card,
    .admin-contact-card,
    .admin-template-card,
    .admin-cloud-file-card,
    .guide-hero-card,
    .guide-hero-stat,
    .privacy-hero-card,
    .rules-hero-card
) :is(.plan-price, .plan-prize-grid > div, .proof-icon, .feature-icon, .process-number, .daily-message-mark) {
    border-color: color-mix(in srgb, var(--site-card-accent) 18%, var(--site-card-border)) !important;
    background: color-mix(in srgb, var(--site-card-accent) 6%, var(--site-card-bg)) !important;
    color: var(--site-card-accent) !important;
}

:is(
    .tournament-plan-card,
    .landing-proof-item,
    .landing-trust-item,
    .landing-process-step,
    .landing-faq-item,
    .landing-feature-card,
    .landing-mission-card,
    .daily-message-card,
    .admin-note-card,
    .admin-training-card,
    .admin-contact-card,
    .admin-template-card,
    .admin-cloud-file-card,
    .guide-hero-card,
    .guide-hero-stat,
    .privacy-hero-card,
    .rules-hero-card
) :is(.plan-frequency, .plan-price span, .plan-price small, .plan-prize-grid span, .plan-prize-grid small, .landing-proof-item small, .landing-trust-item small) {
    color: var(--site-card-muted) !important;
}

/* Every card grid uses the same spacing; special board/chat layouts stay out. */

/* Interactive cards retain the games-lobby hover/focus behavior. */

/* Standalone visual tiles that do not use the standard card class name. */
:is(
    .landing-visual-card,
    .guide-section-nav a,
    .rules-section-nav a,
    .guide-quick-list > div,
    .landing-tournament-games span
) {
    box-sizing: border-box;
    border: 1px solid var(--site-card-border) !important;
    border-radius: var(--site-card-radius) !important;
    background: var(--site-card-bg) !important;
    background-image: none !important;
    color: var(--site-card-text) !important;
    box-shadow: var(--site-card-shadow) !important;
}

:is(
    .landing-visual-card,
    .guide-section-nav a,
    .rules-section-nav a,
    .guide-quick-list > div,
    .landing-tournament-games span
):is(:hover, :focus-visible, :focus-within) {
    border-color: color-mix(in srgb, var(--site-card-accent) 62%, var(--site-card-border)) !important;
    box-shadow: var(--site-card-hover-shadow) !important;
    transform: translateY(var(--site-card-hover-lift));
}

.landing-visual-card {
    transform: none !important;
}

.landing-visual-card :is(.landing-live-status, .landing-visual-footer span) {
    color: var(--site-card-muted) !important;
}

.landing-visual-card .landing-visual-footer div {
    border-color: color-mix(in srgb, var(--site-card-accent) 18%, var(--site-card-border)) !important;
    background: color-mix(in srgb, var(--site-card-accent) 6%, var(--site-card-bg)) !important;
}

.landing-visual-card .landing-visual-footer strong {
    color: var(--site-card-text) !important;
}

:is(
    .guide-section-nav a,
    .rules-section-nav a,
    .guide-quick-list > div,
    .landing-tournament-games span
) :is(strong, small) {
    color: var(--site-card-text) !important;
}

:is(
    .guide-section-nav a,
    .rules-section-nav a,
    .guide-quick-list > div,
    .landing-tournament-games span
) :is(small) {
    color: var(--site-card-muted) !important;
}

/* Reusable information cells follow the same card language at a smaller scale. */
:is(
    .notification-preference-option,
    .permission-option,
    .referral-code-box,
    .bank-destination,
    .account-details > div,
    .financial-summary > div,
    .tournament-meta-grid > div,
    .tournament-summary-grid > div,
    .plan-prize-grid > div,
    .dashboard-daily-tip,
    .subscription-wallet-summary,
    .bank-account-details
) {
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--site-card-accent) 18%, var(--site-card-border)) !important;
    border-radius: var(--site-card-inner-radius) !important;
    background: color-mix(in srgb, var(--site-card-accent) 5%, var(--site-card-bg)) !important;
    box-shadow: none !important;
}

:is(
    .notification-preference-option,
    .permission-option,
    .referral-code-box,
    .bank-destination,
    .account-details > div,
    .financial-summary > div,
    .tournament-meta-grid > div,
    .tournament-summary-grid > div,
    .plan-prize-grid > div,
    .dashboard-daily-tip,
    .subscription-wallet-summary,
    .bank-account-details
) :is(strong, dt, dd, label) {
    color: var(--site-card-text) !important;
}

:is(
    .notification-preference-option,
    .permission-option,
    .referral-code-box,
    .bank-destination,
    .account-details > div,
    .financial-summary > div,
    .tournament-meta-grid > div,
    .tournament-summary-grid > div,
    .plan-prize-grid > div,
    .dashboard-daily-tip,
    .subscription-wallet-summary,
    .bank-account-details
) :is(p, small, span, .field-hint, .muted-text) {
    color: var(--site-card-muted) !important;
}

@media (max-width: 760px) {
    :is(
        .landing-visual-card,
        .guide-section-nav a,
        .rules-section-nav a,
        .guide-quick-list > div,
        .landing-tournament-games span
    ) {
        border-radius: max(16px, calc(var(--site-card-radius) - 4px)) !important;
    }
}

/* Profile v3: one compact visual language, mobile-first layout, and clear states. */
.profile-v3 {
    --profile-gap: clamp(14px, 2vw, 22px);
    --profile-radius: clamp(18px, 2.4vw, 26px);
    max-width: 1180px;
    padding-top: clamp(22px, 4vw, 48px);
    padding-bottom: clamp(30px, 5vw, 70px);
    overflow-x: clip;
}

.profile-v3 [hidden] {
    display: none !important;
}

.profile-v3 .profile-section-anchor {
    display: block;
    height: 0;
    scroll-margin-top: 88px;
}

.profile-v3 [id] {
    scroll-margin-top: 88px;
}

.profile-v3 .profile-page-header,
.profile-v3 .profile-section-heading,
.profile-v3 .profile-section-heading-split,
.profile-v3 .profile-identity-title,
.profile-v3 .profile-avatar-actions,
.profile-v3 .profile-form-actions {
    display: flex;
    align-items: center;
}

.profile-v3 .profile-page-header {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.profile-v3 .profile-page-header h1 {
    margin: 0;
    color: var(--primary-dark);
    font-size: clamp(1.7rem, 4vw, 2.65rem);
    letter-spacing: -0.035em;
}

.profile-v3 .profile-page-header p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.profile-live-message,
.profile-reward-message {
    margin: 0 0 14px;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 0.78rem;
}

.profile-live-message.is-success,
.profile-reward-message.is-success {
    border-color: color-mix(in srgb, var(--success) 40%, var(--line));
    background: color-mix(in srgb, var(--success) 9%, var(--surface));
    color: var(--success);
}

.profile-live-message.is-error,
.profile-reward-message.is-error {
    border-color: color-mix(in srgb, var(--danger) 40%, var(--line));
    background: color-mix(in srgb, var(--danger) 8%, var(--surface));
    color: var(--danger);
}

.profile-v3 .profile-quick-nav {
    position: sticky;
    top: 10px;
    z-index: 20;
    margin-bottom: var(--profile-gap);
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow: 0 10px 28px rgba(52, 28, 18, 0.07);
    backdrop-filter: blur(15px);
}

.profile-v3 .profile-quick-nav a {
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 11px;
    font-size: 0.76rem;
}

.profile-v3 .profile-quick-nav a.is-active {
    background: var(--primary);
    color: #fff;
}

.profile-v3 .profile-primary-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
    gap: var(--profile-gap);
    align-items: start;
}

.profile-v3 .profile-primary-grid > .panel,
.profile-v3 .profile-achievements-panel,
.profile-v3 .profile-rewards-panel,
.profile-v3 .profile-secondary-grid > .panel,
.profile-v3 .profile-security-stack > .panel {
    min-width: 0;
    margin: 0;
    padding: clamp(17px, 2.3vw, 28px);
    border-radius: var(--profile-radius);
    border-color: var(--ui-card-border, var(--line));
    background: var(--ui-card-bg, var(--surface));
    box-shadow: var(--game-card-shadow);
}

.profile-v3 .profile-identity-card {
    position: sticky;
    top: 82px;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 19%, transparent), transparent 42%),
        var(--ui-card-bg, var(--surface));
}

.profile-v3 .profile-avatar-zone {
    display: grid;
    justify-items: center;
    gap: 10px;
    margin: calc(clamp(17px, 2.3vw, 28px) * -1);
    margin-bottom: 22px;
    padding: clamp(24px, 3vw, 36px) 18px 23px;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--primary) 96%, #000), var(--primary));
}

.profile-v3 .profile-avatar-upload {
    position: relative;
    display: block;
    width: clamp(92px, 11vw, 128px);
    height: clamp(92px, 11vw, 128px);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.profile-v3 .profile-avatar-upload:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.9);
    outline-offset: 5px;
}

.profile-v3 .profile-avatar-upload .avatar-xl {
    display: block;
    width: 100%;
    height: 100%;
    border: 4px solid rgba(255, 255, 255, 0.52);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3);
}

.profile-v3 .profile-avatar-display {
    width: clamp(92px, 11vw, 128px);
    height: clamp(92px, 11vw, 128px);
    border-radius: 50%;
}

.profile-v3 .profile-avatar-display .avatar-xl {
    display: block;
    width: 100%;
    height: 100%;
    border: 4px solid rgba(255, 255, 255, 0.52);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3);
}

.profile-v3 .profile-avatar-upload .avatar-xl.avatar-placeholder,
.profile-v3 .profile-avatar-display .avatar-xl.avatar-placeholder {
    display: grid;
    place-items: center;
    font-size: clamp(2.75rem, 5vw, 4rem);
}

.profile-v3 .profile-avatar-safe-note {
    max-width: 240px;
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.72rem;
    line-height: 1.8;
    text-align: center;
}

.profile-v3 .profile-avatar-upload-overlay {
    position: absolute;
    right: -2px;
    bottom: 0;
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border: 2px solid var(--primary);
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 0.9rem;
    font-weight: 900;
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.3);
    transition: transform 160ms ease, background 160ms ease;
}

.profile-v3 .profile-avatar-upload:hover .profile-avatar-upload-overlay {
    background: var(--primary-dark);
    transform: scale(1.08);
}

.profile-v3 .profile-avatar-upload-spinner {
    position: absolute;
    inset: 7px;
    display: none;
    border: 3px solid rgba(255, 255, 255, 0.28);
    border-top-color: #fff;
    border-radius: 50%;
    animation: profile-avatar-spin 700ms linear infinite;
}

.profile-v3.is-avatar-busy .profile-avatar-upload-spinner {
    display: block;
}

@keyframes profile-avatar-spin {
    to {
        transform: rotate(360deg);
    }
}

.profile-v3 .profile-avatar-actions {
    justify-content: center;
    gap: 8px;
}

.profile-v3 .profile-avatar-zone .btn-secondary,
.profile-v3 .profile-avatar-zone .btn-ghost {
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.11);
    color: #fff;
}

.profile-v3 .profile-avatar-zone .btn:hover,
.profile-v3 .profile-avatar-zone .btn:focus-visible {
    border-color: rgba(255, 255, 255, 0.56);
    background: rgba(255, 255, 255, 0.2);
}

.profile-v3 .profile-avatar-status {
    min-height: 18px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.7rem;
    text-align: center;
}

.profile-v3 .profile-avatar-status.is-loading {
    color: #ffe5bc;
}

.profile-v3 .profile-avatar-status.is-success {
    color: #baf1ce;
}

.profile-v3 .profile-avatar-status.is-error {
    color: #ffd0c9;
}

.profile-v3 .profile-identity-title {
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 17px;
}

.profile-v3 .profile-identity-title h2 {
    margin: 0 0 4px;
    color: var(--primary-dark);
    font-size: 1.18rem;
}

.profile-v3 .profile-identity-title span:not(.status-pill) {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.profile-v3 .profile-identity-title .status-pill {
    flex: 0 0 auto;
}

.profile-v3 .profile-completion {
    width: 100%;
    margin: 0 0 18px;
}

.profile-v3 .profile-completion-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.profile-v3 .profile-completion-meta strong {
    color: var(--accent);
    font-size: 0.78rem;
}

.profile-v3 .profile-completion-track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 13%, var(--surface-soft));
}

.profile-v3 .profile-completion-track span {
    display: block;
    height: 100%;
    min-width: 4px;
    border-radius: inherit;
    background: linear-gradient(90deg, #d5823b, #69bd86);
    transition: width 260ms ease;
}

.profile-v3 .profile-account-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.profile-v3 .profile-account-facts > div {
    min-width: 0;
    padding: 11px;
    border: 1px solid color-mix(in srgb, var(--accent) 17%, var(--line));
    border-radius: 13px;
    background: color-mix(in srgb, var(--accent) 4%, var(--surface-soft));
}

.profile-v3 .profile-account-facts dt,
.profile-v3 .profile-account-facts dd {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-v3 .profile-account-facts dt {
    color: var(--muted);
    font-size: 0.64rem;
}

.profile-v3 .profile-account-facts dd {
    margin: 5px 0 0;
    color: var(--primary-dark);
    font-size: 0.73rem;
    font-weight: 800;
}

.profile-v3 .profile-summary-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.profile-v3 .profile-summary-stats > div {
    display: grid;
    gap: 2px;
    padding: 12px;
    border-radius: 13px;
    background: var(--primary);
    color: #fff;
    text-align: center;
}

.profile-v3 .profile-summary-stats strong {
    font-size: 1.15rem;
}

.profile-v3 .profile-summary-stats span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.65rem;
}

.profile-v3 .profile-section-heading {
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 19px;
}

.profile-v3 .profile-section-heading-split {
    justify-content: space-between;
}

.profile-v3 .profile-section-heading h2 {
    margin: 0;
    color: var(--primary-dark);
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    letter-spacing: -0.02em;
}

.profile-v3 .profile-section-heading span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.7rem;
}

.profile-v3 .field {
    min-width: 0;
    margin-bottom: 14px;
}

.profile-v3 .field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.profile-v3 .field label:not(.profile-switch-row):not(.gender-choice),
.profile-v3 .profile-fieldset legend {
    display: block;
    margin-bottom: 7px;
    padding: 0;
    color: var(--primary-dark);
    font-size: 0.77rem;
    font-weight: 850;
}

.profile-v3 .field-counter {
    color: var(--muted);
    font-size: 0.65rem;
    font-weight: 700;
}

.profile-v3 .field input:not([type="checkbox"]):not([type="radio"]),
.profile-v3 .field select,
.profile-v3 .field textarea {
    width: 100%;
    min-height: 45px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-soft);
}

.profile-v3 .field textarea {
    min-height: 96px;
    resize: vertical;
}

.profile-v3 .field input:focus-visible,
.profile-v3 .field select:focus-visible,
.profile-v3 .field textarea:focus-visible,
.profile-v3 button:focus-visible,
.profile-v3 a:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 30%, transparent);
    outline-offset: 2px;
}

.profile-v3 .profile-personal-choice-grid {
    align-items: start;
}

.profile-v3 .profile-fieldset {
    min-width: 0;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}

.profile-v3 .gender-choice-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.profile-v3 .gender-choice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 45px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-soft);
    color: var(--muted);
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 800;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.profile-v3 .gender-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.profile-v3 .gender-choice.is-selected,
.profile-v3 .gender-choice:has(input:checked) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    color: var(--primary-dark);
}

.profile-v3 .gender-choice:focus-within,
.profile-v3 .profile-switch-row:focus-within {
    outline: 3px solid color-mix(in srgb, var(--accent) 30%, transparent);
    outline-offset: 2px;
}

.profile-v3 .gender-choice-icon {
    color: var(--accent);
    font-family: Arial, sans-serif;
    font-size: 1.1rem;
}

.profile-v3 .phone-input,
.profile-v3 .sheba-input {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-soft);
}

.profile-v3 .phone-input:focus-within,
.profile-v3 .sheba-input:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

.profile-v3 .phone-input input,
.profile-v3 .sheba-input input {
    min-width: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.profile-v3 .phone-prefix,
.profile-v3 .sheba-prefix {
    display: grid;
    flex: 0 0 auto;
    min-width: 45px;
    place-items: center;
    border-inline-end: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 850;
}

.profile-v3 .profile-preferences {
    display: grid;
    gap: 8px;
    margin: 3px 0 17px;
}

.profile-v3 .profile-switch-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 55px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface-soft);
    cursor: pointer;
}

.profile-v3 .profile-switch-row > span:first-child {
    min-width: 0;
}

.profile-v3 .profile-switch-row strong,
.profile-v3 .profile-switch-row small {
    display: block;
}

.profile-v3 .profile-switch-row strong {
    color: var(--primary-dark);
    font-size: 0.75rem;
}

.profile-v3 .profile-switch-row small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.65rem;
}

.profile-v3 .profile-switch-row input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.profile-v3 .profile-switch {
    position: relative;
    flex: 0 0 auto;
    width: 39px;
    height: 22px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 25%, var(--surface));
    transition: background 160ms ease;
}

.profile-v3 .profile-switch::after {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
    content: "";
    transition: transform 160ms ease;
}

.profile-v3 .profile-switch-row input:checked + .profile-switch {
    background: var(--accent);
}

.profile-v3 .profile-switch-row input:checked + .profile-switch::after {
    transform: translateX(-17px);
}

.profile-v3 .profile-form-actions {
    justify-content: flex-end;
    margin-top: 4px;
}

.profile-v3 .btn:disabled,
.profile-v3 button:disabled {
    cursor: wait;
    opacity: 0.58;
}

.profile-v3 .profile-achievements-panel,
.profile-v3 .profile-rewards-panel {
    margin-top: var(--profile-gap);
}

.profile-v3 .profile-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.profile-v3 .profile-filter-tabs button {
    min-height: 32px;
    padding: 5px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.68rem;
    font-weight: 800;
}

.profile-v3 .profile-filter-tabs button.is-active {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.profile-v3 .profile-achievements-grid,
.profile-v3 .profile-rewards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.profile-v3 .profile-achievement-card,
.profile-v3 .profile-reward-card {
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface-soft);
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.profile-v3 .profile-achievement-card:hover,
.profile-v3 .profile-reward-card:hover {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
    box-shadow: var(--game-card-hover-shadow);
    transform: translateY(-2px);
}

.profile-v3 .profile-achievement-card.is-locked {
    opacity: 0.62;
    filter: saturate(0.45);
}

.profile-v3 .profile-achievement-icon {
    display: grid;
    width: 40px;
    height: 40px;
    margin-bottom: 9px;
    place-items: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    font-size: 1.35rem;
}

.profile-v3 .profile-achievement-copy h3,
.profile-v3 .profile-reward-card h3 {
    margin: 0;
    overflow: hidden;
    color: var(--primary-dark);
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-v3 .profile-achievement-copy > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
}

.profile-v3 .profile-achievement-state {
    flex: 0 0 auto;
    color: var(--accent);
    font-size: 0.6rem !important;
    font-weight: 850;
}

.profile-v3 .profile-achievement-copy p {
    display: -webkit-box;
    min-height: 32px;
    margin: 6px 0 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.67rem;
    line-height: 1.65;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.profile-v3 .profile-achievement-copy time {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 0.62rem;
}

.profile-v3 .profile-reward-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 9px;
}

.profile-v3 .profile-reward-card-head > strong {
    flex: 0 0 auto;
    color: var(--accent);
    font-size: 0.75rem;
    white-space: nowrap;
}

.profile-v3 .profile-reward-card-head .status-pill {
    margin-top: 7px;
    font-size: 0.61rem;
}

.profile-v3 .profile-reward-code-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 13px;
}

.profile-v3 .profile-reward-code-row code {
    min-width: 0;
    flex: 1 1 auto;
    padding: 9px 10px;
    overflow: hidden;
    border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 6%, var(--surface));
    color: var(--primary-dark);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-overflow: ellipsis;
}

.profile-v3 .profile-copy-button {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    color: var(--primary);
    cursor: pointer;
    font: inherit;
    font-size: 0.66rem;
    font-weight: 850;
}

.profile-v3 .profile-copy-button.is-copied {
    border-color: var(--success);
    color: var(--success);
}

.profile-v3 .profile-reward-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 11px 0;
}

.profile-v3 .profile-reward-meta dt {
    color: var(--muted);
    font-size: 0.61rem;
}

.profile-v3 .profile-reward-meta dd {
    margin: 3px 0 0;
    color: var(--primary-dark);
    font-size: 0.65rem;
    font-weight: 750;
}

.profile-v3 .profile-reward-redeem {
    width: 100%;
    justify-content: center;
}

.profile-v3 .profile-empty-state {
    display: grid;
    min-height: 110px;
    place-items: center;
    gap: 5px;
    padding: 17px;
    border: 1px dashed var(--line);
    border-radius: 15px;
    color: var(--muted);
    font-size: 0.75rem;
    text-align: center;
}

.profile-v3 .profile-empty-state > span {
    color: var(--accent);
    font-size: 1.5rem;
}

.profile-v3 .profile-empty-state-compact {
    min-height: 74px;
}

.profile-v3 .profile-secondary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(280px, 0.82fr);
    gap: var(--profile-gap);
    align-items: start;
    margin-top: var(--profile-gap);
}

.profile-v3 .profile-security-stack {
    display: grid;
    gap: var(--profile-gap);
    min-width: 0;
}

.profile-v3 .bank-account-list {
    display: grid;
    gap: 9px;
    margin-bottom: 13px;
}

.profile-v3 .bank-account-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
}

.profile-v3 .bank-account-main {
    min-width: 0;
}

.profile-v3 .bank-account-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.profile-v3 .bank-account-heading strong {
    overflow: hidden;
    color: var(--primary-dark);
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-v3 .bank-account-details {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
    margin-inline-end: 12px;
}

.profile-v3 .bank-account-details span {
    color: var(--muted);
    font-size: 0.63rem;
}

.profile-v3 .bank-account-details strong {
    color: var(--primary-dark);
    font-size: 0.68rem;
}

.profile-v3 .bank-account-delete-form {
    flex: 0 0 auto;
}

.profile-v3 .bank-account-form-wrapper {
    margin-top: 13px;
    padding-top: 15px;
    border-top: 1px solid var(--line);
}

.profile-v3 .password-strength {
    margin: 5px 0 14px;
    padding: 11px 12px;
    border-radius: 12px;
    background: var(--surface-soft);
}

.profile-v3 .password-strength-track {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
}

.profile-v3 .password-strength-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.profile-v3 .password-strength small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.65rem;
}

.profile-v3 .profile-avatar-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    opacity: 0;
}

.profile-v3 .profile-avatar-presets {
    min-width: 0;
    margin: 0 0 22px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface-soft) 88%, var(--primary) 12%);
}

.profile-v3 .profile-avatar-presets legend {
    padding: 0 7px;
    color: var(--primary-dark);
    font-size: 0.87rem;
    font-weight: 900;
}

.profile-v3 .profile-avatar-presets > p {
    margin: 0 0 13px;
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.8;
}

.profile-v3 .profile-avatar-preset-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 11px;
}

.profile-v3 .profile-avatar-more-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.profile-v3 [data-avatar-more-item] {
    display: none;
}

.profile-v3 .profile-avatar-more-toggle:checked ~ .profile-avatar-preset-grid [data-avatar-more-item] {
    display: flex;
}

.profile-v3 .profile-avatar-preset-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 0;
    padding: 12px 8px 10px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface);
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.profile-v3 .profile-avatar-preset-card:hover {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
    transform: translateY(-1px);
}

.profile-v3 .profile-avatar-more-card {
    display: flex;
    min-width: 0;
    min-height: 125px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 12px 8px 10px;
    border: 1px dashed color-mix(in srgb, var(--primary) 55%, var(--line));
    border-radius: 15px;
    background: color-mix(in srgb, var(--surface) 86%, var(--primary) 14%);
    color: var(--primary-dark);
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.profile-v3 .profile-avatar-more-card:hover {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--surface) 76%, var(--primary) 24%);
    transform: translateY(-1px);
}

.profile-v3 .profile-avatar-more-card:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary) 28%, transparent);
    outline-offset: 2px;
}

.profile-v3 .profile-avatar-more-icon {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1;
}

.profile-v3 .profile-avatar-more-card strong {
    font-size: 0.78rem;
}

.profile-v3 .profile-avatar-more-card small {
    color: var(--muted);
    font-size: 0.6rem;
}

.profile-v3 .profile-avatar-more-close {
    display: none;
}

.profile-v3 .profile-avatar-more-toggle:checked ~ .profile-avatar-preset-grid .profile-avatar-more-open {
    display: none;
}

.profile-v3 .profile-avatar-more-toggle:checked ~ .profile-avatar-preset-grid .profile-avatar-more-close {
    display: inline;
}

.profile-v3 .profile-avatar-more-toggle:focus-visible ~ .profile-avatar-preset-grid .profile-avatar-more-card {
    outline: 3px solid color-mix(in srgb, var(--primary) 28%, transparent);
    outline-offset: 2px;
}

.profile-v3 .profile-avatar-preset-card:has(input:checked) {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}

.profile-v3 .profile-avatar-preset-card:has(input:focus-visible) {
    outline: 3px solid color-mix(in srgb, var(--primary) 28%, transparent);
    outline-offset: 2px;
}

.profile-v3 .profile-avatar-preset-card > input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.profile-v3 .profile-avatar-preset-visual {
    position: relative;
    flex: 0 0 auto;
}

.profile-v3 .profile-avatar-preset-visual img {
    display: block;
    width: 72px;
    height: 72px;
    border: 2px solid color-mix(in srgb, var(--primary) 20%, var(--line));
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-soft);
}

.profile-v3 .profile-avatar-preset-check {
    position: absolute;
    right: -2px;
    bottom: -1px;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 900;
    opacity: 0;
    transform: scale(.72);
    transition: opacity 160ms ease, transform 160ms ease;
}

.profile-v3 .profile-avatar-preset-card:has(input:checked) .profile-avatar-preset-check {
    opacity: 1;
    transform: scale(1);
}

.profile-v3 .profile-avatar-preset-copy {
    display: grid;
    min-width: 0;
    gap: 4px;
    text-align: center;
}

.profile-v3 .profile-avatar-preset-copy strong {
    color: var(--primary-dark);
    font-size: 0.78rem;
}

.profile-v3 .profile-avatar-preset-copy small {
    color: var(--muted);
    font-size: 0.6rem;
    line-height: 1.55;
}

@media (max-width: 560px) {
    .profile-v3 .profile-avatar-preset-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
    }

    .profile-v3 .profile-avatar-preset-card {
        gap: 5px;
        padding: 8px 2px;
    }

    .profile-v3 .profile-avatar-preset-visual img {
        width: 48px;
        height: 48px;
    }

    .profile-v3 .profile-avatar-preset-copy strong {
        font-size: 0.62rem;
    }

    .profile-v3 .profile-avatar-preset-copy small {
        display: none;
    }

    .profile-v3 .profile-avatar-more-card {
        min-height: 87px;
        gap: 4px;
        padding: 8px 2px;
    }

    .profile-v3 .profile-avatar-more-icon {
        width: 42px;
        height: 42px;
        font-size: 1.55rem;
    }

    .profile-v3 .profile-avatar-more-card strong {
        font-size: 0.62rem;
    }

    .profile-v3 .profile-avatar-more-card small {
        display: none;
    }
}

.admin-avatar-upload-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: 14px;
}

.admin-avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
}

.admin-avatar-card {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    text-align: center;
}

.admin-avatar-card.is-inactive {
    opacity: .55;
}

.admin-avatar-card > img {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-soft);
}

.admin-avatar-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

@media (max-width: 720px) {
    .admin-avatar-upload-form {
        grid-template-columns: 1fr;
    }
}

/* Jalali picker with direct month/year controls. */
.profile-v3 .jalali-date-field {
    position: relative;
}

.profile-v3 .jalali-date-field > input[data-jalali-display] {
    padding-inline-end: 48px;
    cursor: pointer;
}

.profile-v3 .jalali-date-trigger {
    position: absolute;
    top: 50%;
    right: 8px;
    display: grid;
    width: 33px;
    height: 33px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: var(--surface-contrast);
    color: var(--accent);
    cursor: pointer;
    transform: translateY(-50%);
}

.profile-v3 .profile-quick-nav {
    display: flex;
    flex-wrap: wrap;
    overflow-x: hidden;
}

.profile-v3 .profile-quick-nav a {
    flex: 0 1 auto;
    white-space: nowrap;
}

.profile-v3 .jalali-datepicker {
    position: absolute;
    z-index: 80;
    top: calc(100% + 8px);
    right: 0;
    width: min(345px, calc(100vw - 36px));
    padding: 13px;
    border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
    border-radius: 17px;
    background: var(--surface);
    box-shadow: 0 24px 60px rgba(47, 25, 17, 0.2);
}

.profile-v3 .jalali-datepicker-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(90px, 0.68fr);
    gap: 7px;
    margin-bottom: 9px;
}

.profile-v3 .jalali-datepicker-toolbar select {
    width: 100%;
    min-height: 36px;
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface-soft);
    color: var(--primary-dark);
    font: inherit;
    font-size: 0.7rem;
    font-weight: 800;
}

.profile-v3 .jalali-datepicker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.profile-v3 .jalali-datepicker-header strong {
    color: var(--primary-dark);
    font-size: 0.82rem;
}

.profile-v3 .jalali-datepicker-header button,
.profile-v3 .jalali-datepicker-footer button {
    min-width: 32px;
    min-height: 32px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface-soft);
    color: var(--primary);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}

.profile-v3 .jalali-datepicker-weekdays,
.profile-v3 .jalali-datepicker-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    text-align: center;
}

.profile-v3 .jalali-datepicker-weekdays {
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 0.61rem;
    font-weight: 850;
}

.profile-v3 .jalali-datepicker-day,
.profile-v3 .jalali-datepicker-empty {
    display: grid;
    min-height: 36px;
    place-items: center;
}

.profile-v3 .jalali-datepicker-day {
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
}

.profile-v3 .jalali-datepicker-day:hover:not(:disabled),
.profile-v3 .jalali-datepicker-day:focus-visible {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.profile-v3 .jalali-datepicker-day.is-selected {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
    font-weight: 900;
}

.profile-v3 .jalali-datepicker-day.is-disabled {
    cursor: not-allowed;
    opacity: 0.3;
}

.profile-v3 .jalali-datepicker-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 10px;
}

.profile-v3 .jalali-datepicker-footer .jalali-datepicker-today {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.profile-v3 .profile-avatar-crop-modal {
    z-index: 1000;
}

.profile-v3 .profile-avatar-crop-dialog {
    width: min(100%, 500px);
    padding: clamp(18px, 3vw, 27px);
    border-radius: var(--profile-radius);
}

.profile-v3 .profile-avatar-crop-dialog .profile-section-heading {
    padding-inline-end: 28px;
}

.profile-v3 .profile-avatar-crop-dialog .profile-avatar-crop-stage {
    width: min(100%, 350px);
    height: min(82vw, 350px);
    min-height: 240px;
    margin: 0 auto 15px;
    border-radius: 17px;
}

.profile-v3 .profile-avatar-crop-dialog .profile-avatar-crop-frame {
    border-radius: 50%;
}

.profile-v3 .profile-avatar-zoom {
    display: grid;
    gap: 7px;
    margin-bottom: 14px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.profile-v3 .profile-avatar-zoom input[type="range"] {
    width: 100%;
    accent-color: var(--accent);
}

@media (max-width: 940px) {
    .profile-v3 .profile-primary-grid,
    .profile-v3 .profile-secondary-grid {
        grid-template-columns: 1fr;
    }

    .profile-v3 .profile-identity-card {
        position: static;
    }

    .profile-v3 .profile-achievements-grid,
    .profile-v3 .profile-rewards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .profile-v3 {
        padding-inline: 13px;
    }

    .profile-v3 .profile-page-header {
        align-items: flex-start;
    }

    .profile-v3 .profile-page-header h1 {
        font-size: 1.65rem;
    }

    .profile-v3 .profile-page-header .btn {
        flex: 0 0 auto;
    }

    .profile-v3 .profile-quick-nav {
        margin-inline: -2px;
    }

    .profile-v3 .profile-primary-grid > .panel,
    .profile-v3 .profile-achievements-panel,
    .profile-v3 .profile-rewards-panel,
    .profile-v3 .profile-secondary-grid > .panel,
    .profile-v3 .profile-security-stack > .panel {
        padding: 17px;
        border-radius: 19px;
    }

    .profile-v3 .profile-avatar-zone {
        margin: -17px -17px 18px;
    }

    .profile-v3 .profile-achievements-grid,
    .profile-v3 .profile-rewards-grid {
        grid-template-columns: 1fr;
    }

    .profile-v3 .profile-section-heading-split {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-v3 .profile-section-heading-split > .btn,
    .profile-v3 .profile-section-heading-split > [data-reward-claim] {
        width: 100%;
        justify-content: center;
    }

    .profile-v3 .profile-filter-tabs {
        width: 100%;
    }

    .profile-v3 .profile-filter-tabs button {
        flex: 1 1 0;
    }

    .profile-v3 .profile-personal-choice-grid,
    .profile-v3 .form-grid {
        grid-template-columns: 1fr;
    }

    .profile-v3 .bank-account-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-v3 .bank-account-delete-form,
    .profile-v3 .bank-account-delete-form .btn {
        width: 100%;
        justify-content: center;
    }

    .profile-v3 .profile-form-actions,
    .profile-v3 .profile-form-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .profile-v3 .jalali-datepicker {
        position: fixed;
        top: 50%;
        right: 50%;
        transform: translate(50%, -50%);
    }

    .profile-v3 .profile-avatar-crop-dialog .profile-avatar-crop-stage {
        height: min(62vh, 300px);
        min-height: 180px;
    }
}

@media (max-width: 390px) {
    .profile-v3 .profile-page-header .btn {
        padding-inline: 9px;
    }

    .profile-v3 .profile-account-facts {
        grid-template-columns: 1fr;
    }
}

html[data-theme="dark"] .profile-v3 .profile-identity-card {
    background:
        radial-gradient(circle at 100% 0, rgba(226, 173, 112, 0.18), transparent 42%),
        var(--ui-card-bg, var(--surface));
}

.profile-v3 .status-redeemed {
    background: color-mix(in srgb, var(--success) 12%, var(--surface));
    color: var(--success);
}

.profile-v3 .status-expired,
.profile-v3 .status-unknown,
.profile-v3 .status-pending {
    background: color-mix(in srgb, var(--muted) 13%, var(--surface));
    color: var(--muted);
}

/*
 * The crop dialog is mounted under <body> by app.js so it can sit above every
 * page layer. Keep the v3 sizing active independently of the profile main.
 */
.profile-avatar-crop-modal[data-avatar-crop-modal] {
    z-index: 1000;
}

.profile-avatar-crop-modal[data-avatar-crop-modal] .profile-avatar-crop-dialog {
    width: min(100%, 500px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    padding: clamp(18px, 3vw, 27px);
    border-radius: clamp(18px, 2.4vw, 26px);
}

.profile-avatar-crop-modal[data-avatar-crop-modal]
    .profile-avatar-crop-dialog .profile-section-heading {
    margin-bottom: 15px;
    padding-inline-end: 28px;
}

.profile-avatar-crop-modal[data-avatar-crop-modal]
    .profile-avatar-crop-dialog .profile-avatar-crop-stage {
    width: min(100%, 350px);
    height: min(82vw, 350px);
    min-height: 240px;
    margin: 0 auto 15px;
    border-radius: 17px;
}

.profile-avatar-crop-modal[data-avatar-crop-modal]
    .profile-avatar-crop-dialog .profile-avatar-crop-frame {
    border-radius: 50%;
}

.profile-avatar-crop-modal[data-avatar-crop-modal] .profile-avatar-zoom {
    display: grid;
    gap: 7px;
    margin-bottom: 14px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.profile-avatar-crop-modal[data-avatar-crop-modal]
    .profile-avatar-zoom input[type="range"] {
    width: 100%;
    accent-color: var(--accent);
}

@media (max-width: 620px) {
    .profile-avatar-crop-modal[data-avatar-crop-modal] {
        padding: 12px;
    }

    .profile-avatar-crop-modal[data-avatar-crop-modal]
        .profile-avatar-crop-dialog {
        max-height: calc(100dvh - 24px);
    }

    .profile-avatar-crop-modal[data-avatar-crop-modal]
        .profile-avatar-crop-dialog .profile-avatar-crop-stage {
        width: min(100%, 300px);
        height: min(62vh, 300px);
        min-height: 180px;
    }
}

/*
 * Profile v3 final responsive hardening.
 * Keep every grid/flex child shrinkable and use one shared control language
 * for the bank form so long RTL/LTR values cannot enlarge the viewport.
 */
.profile-v3,
.profile-v3 *,
.profile-avatar-crop-modal[data-avatar-crop-modal],
.profile-avatar-crop-modal[data-avatar-crop-modal] * {
    box-sizing: border-box;
}

.profile-v3 {
    width: 100%;
    min-width: 0;
    max-width: 1180px;
}

.profile-v3 > *,
.profile-v3 .profile-primary-grid,
.profile-v3 .profile-secondary-grid,
.profile-v3 .profile-security-stack,
.profile-v3 .profile-primary-grid > *,
.profile-v3 .profile-secondary-grid > *,
.profile-v3 .profile-security-stack > *,
.profile-v3 .form-grid > *,
.profile-v3 .field,
.profile-v3 .profile-page-header > *,
.profile-v3 .profile-section-heading > * {
    min-width: 0;
    max-width: 100%;
}

.profile-v3 img,
.profile-v3 svg,
.profile-v3 video,
.profile-v3 canvas,
.profile-v3 iframe {
    max-width: 100%;
}

.profile-v3 input,
.profile-v3 select,
.profile-v3 textarea,
.profile-v3 button,
.profile-v3 a {
    max-width: 100%;
}

.profile-v3 .profile-page-header h1,
.profile-v3 .profile-page-header p,
.profile-v3 .profile-section-heading h2,
.profile-v3 .profile-section-heading span {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.profile-v3 .profile-account-facts,
.profile-v3 .profile-account-facts > div,
.profile-v3 .profile-account-facts dt,
.profile-v3 .profile-account-facts dd,
.profile-v3 .profile-achievement-copy,
.profile-v3 .profile-achievement-copy h3,
.profile-v3 .profile-achievement-copy p,
.profile-v3 .profile-reward-card-head {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/*
 * The former two-column secondary grid constrained the security stack to a
 * narrow right column. Let the stack span the complete profile container.
 */
.profile-v3 .profile-secondary-grid {
    grid-template-columns: minmax(0, 1fr);
}

.profile-v3 .profile-security-stack {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
}

.profile-v3 .profile-security-stack > .panel {
    width: 100%;
    height: 100%;
}

/* One control size and focus/error treatment for all bank fields. */
.profile-v3 .bank-account-form-wrapper .field > input.bank-field-control,
.profile-v3 .bank-account-form-wrapper .bank-field-control-sheba {
    width: 100%;
    height: 48px;
    min-height: 46px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-soft);
    color: var(--ink);
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.profile-v3 .bank-account-form-wrapper .field > input.bank-field-control {
    display: block;
    padding: 11px 13px;
}

.profile-v3 .bank-account-form-wrapper .bank-field-control-sheba {
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

.profile-v3 .bank-account-form-wrapper .bank-field-control-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    padding: 10px 12px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    direction: ltr;
    text-align: left;
    unicode-bidi: plaintext;
    font-family: Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
}

.profile-v3 .bank-account-form-wrapper .field > input.bank-field-control:focus,
.profile-v3 .bank-account-form-wrapper .bank-field-control-sheba:focus-within {
    border-color: var(--accent);
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent);
}

.profile-v3 .field.has-error > input,
.profile-v3 .field.has-error .bank-field-control-sheba,
.profile-v3 input[aria-invalid="true"] {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 13%, transparent);
}

.profile-v3 .field-error {
    margin: 6px 0 0;
    color: var(--danger);
    font-size: 0.72rem;
    line-height: 1.65;
}

.profile-v3 .bank-account-item {
    flex-wrap: wrap;
}

.profile-v3 .bank-account-main {
    flex: 1 1 240px;
    min-width: 0;
    max-width: 100%;
}

.profile-v3 .bank-account-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    margin-inline-end: 0;
    padding: 8px 10px;
}

.profile-v3 .bank-account-details strong {
    min-width: 0;
    max-width: 100%;
    text-align: end;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.profile-v3 .bank-account-details strong[dir="ltr"] {
    direction: ltr;
    text-align: left;
    unicode-bidi: plaintext;
    font-variant-numeric: tabular-nums;
}

.profile-v3 .bank-account-heading,
.profile-v3 .bank-account-heading strong,
.profile-v3 .profile-identity-title,
.profile-v3 .profile-identity-title > div,
.profile-v3 .profile-identity-title span {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.profile-v3 .bank-account-delete-form {
    max-width: 100%;
}

.profile-v3 .profile-reward-card-head > strong,
.profile-v3 .profile-reward-code-row code {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.profile-v3 .profile-quick-nav a,
.profile-v3 .profile-filter-tabs button {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* The profile modal is mounted under <body>; constrain it independently. */
.profile-avatar-crop-modal[data-avatar-crop-modal] {
    width: 100%;
    max-width: 100vw;
    overflow-x: clip;
}

.profile-avatar-crop-modal[data-avatar-crop-modal]
    .profile-avatar-crop-dialog {
    min-width: 0;
    max-width: calc(100vw - 24px);
}

.profile-v3 .jalali-datepicker {
    max-width: calc(100vw - 24px);
}

/* Final guard after the overflow sources above have been constrained. */
html:has(.profile-v3),
body:has(.profile-v3) {
    overflow-x: clip;
}

@media (max-width: 760px) {
    .profile-v3 .profile-security-stack {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 480px) {
    .profile-v3 {
        padding-inline: 12px;
    }

    .profile-v3 .profile-page-header > div {
        flex: 1 1 170px;
    }

    .profile-v3 .profile-quick-nav {
        margin-inline: 0;
    }

    .profile-v3 .profile-filter-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .profile-v3 .profile-filter-tabs button {
        padding-inline: 5px;
    }

    .profile-v3 .bank-account-details {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
        margin-inline-end: 0;
    }

    .profile-v3 .bank-account-delete-form,
    .profile-v3 .bank-account-delete-form .btn {
        width: 100%;
        justify-content: center;
    }

    .profile-avatar-crop-modal[data-avatar-crop-modal]
        .profile-avatar-crop-dialog {
        max-width: calc(100vw - 20px);
    }
}

/* Full-screen chess room layout. The center column owns the board while the
 * side rails stay available for player details, controls and future widgets. */
html.chess-room-document,
html.chess-room-document body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.chess-room-body {
    min-height: 100vh;
    min-height: 100dvh;
    min-width: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.chess-room-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    max-width: none;
    padding: clamp(10px, 1.5vw, 20px);
    overflow: hidden;
}

.chess-room-nav {
    margin-bottom: clamp(8px, 1vw, 14px);
}

.chess-app {
    min-height: 0;
    height: 100%;
}

.chess-room-layout {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(0, min(74dvh, 820px, calc(100vw - 430px))) minmax(220px, 1fr);
    align-items: stretch;
    justify-content: center;
    gap: clamp(10px, 1.4vw, 18px);
    min-height: 0;
    height: 100%;
}

.chess-room-rail,
.chess-board-panel,
.chess-room-sidebar {
    min-height: 0;
}

.chess-room-rail {
    display: grid;
    align-content: start;
    gap: 14px;
}

.chess-room-rail-left .chess-players {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.chess-side-slot {
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 18px;
    background: transparent;
}

.chess-board-panel {
    align-content: center;
    justify-items: center;
    width: 100%;
    padding: clamp(10px, 1.5vw, 18px);
    overflow: hidden;
}

.chess-status-bar,
.chess-board-hint {
    width: min(100%, calc(100dvh - 190px));
}

.chess-board-wrap {
    width: min(100%, calc(100dvh - 190px));
    max-width: none;
    aspect-ratio: 1 / 1;
    padding: clamp(5px, .8vw, 9px);
}

.chess-board {
    width: 100%;
    height: 100%;
    direction: ltr;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-template-rows: repeat(8, minmax(0, 1fr));
}

.chess-piece {
    display: block;
    font-family: "Noto Sans Symbols 2", "Segoe UI Symbol", "DejaVu Sans", sans-serif;
    font-size: clamp(1.8rem, 6.2vw, 5rem);
    font-weight: 700;
    line-height: .92;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    transform: translateY(-2%);
}

.chess-room-sidebar {
    overflow: hidden;
}

.chess-move-list {
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

@media (max-width: 980px) {
    .chess-room-layout {
        grid-template-columns: minmax(150px, .7fr) minmax(0, min(70dvh, 700px, calc(100vw - 386px))) minmax(190px, .9fr);
    }
}

@media (max-width: 760px) {
    html.chess-room-document,
    html.chess-room-document body {
        overflow-y: auto;
    }

    .chess-room-body,
    .chess-room-shell {
        height: auto;
        min-height: 100dvh;
        overflow: visible;
    }

    .chess-room-layout {
        grid-template-columns: 1fr;
        height: auto;
        overflow: visible;
    }

    .chess-room-rail-left {
        order: 2;
    }

    .chess-board-panel {
        order: 1;
        overflow: visible;
    }

    .chess-room-sidebar {
        order: 3;
        overflow: visible;
    }

    .chess-room-rail-left .chess-players {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .chess-side-slot {
        display: none;
    }

    .chess-status-bar,
    .chess-board-hint,
    .chess-board-wrap {
        width: min(100%, calc(100vw - 28px));
    }
}

/*
 * Dashboard application shell
 * ---------------------------
 * A single, touch-first workspace for authenticated users. The rules below
 * intentionally live at the end of the stylesheet so the shell can compose
 * the existing domain templates without changing their visual language.
 */
.dashboard-shell-body {
    --dashboard-bottom-nav-height: 78px;
    padding-bottom: calc(
        var(--dashboard-bottom-nav-height) + env(safe-area-inset-bottom)
    );
}

.dashboard-site-header {
    position: sticky;
    z-index: 900;
    top: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 12px max(14px, calc((100vw - var(--page-max)) / 2));
    border-bottom: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    box-shadow: 0 10px 28px rgba(52, 29, 20, 0.06);
    backdrop-filter: blur(18px) saturate(130%);
}

.dashboard-site-header .nav {
    width: 100%;
    max-width: var(--page-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
}

.dashboard-site-header .brand {
    min-width: 0;
    white-space: nowrap;
}

.dashboard-section-tabs {
    width: 100%;
    max-width: none;
    margin: 0 0 20px;
}

.dashboard-section-tabs[hidden] {
    display: none !important;
}

.dashboard-blog {
    padding-block: 8px;
}

.dashboard-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.dashboard-blog-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: 0 12px 36px rgba(15, 23, 42, .07);
}

.dashboard-blog-card-link {
    display: flex;
    height: 100%;
    flex-direction: column;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}

.dashboard-blog-card-media {
    position: relative;
    display: block;
    height: 9rem;
    overflow: hidden;
    background: var(--surface-soft);
}

.dashboard-blog-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}

.dashboard-blog-card-link:hover .dashboard-blog-card-media img {
    transform: scale(1.035);
}

.dashboard-blog-card-media > span {
    position: absolute;
    inset-inline-start: 14px;
    bottom: 14px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .82);
    color: #fff;
    font-size: .78rem;
}

.dashboard-blog-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 7px;
    padding: 15px;
}

.dashboard-blog-card-content > strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 1.08rem;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.dashboard-blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    color: var(--muted);
    font-size: .8rem;
}

.dashboard-blog-excerpt {
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted);
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.dashboard-blog-toolbar {
    display: flex;
    justify-content: stretch;
    margin-bottom: 8px;
}

.dashboard-blog-search {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    color: var(--muted);
}

.dashboard-blog-search:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}

.dashboard-blog-search input {
    width: 100%;
    min-height: 46px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
}

.dashboard-blog-no-results {
    padding: 32px 20px;
    color: var(--muted);
    text-align: center;
}

.dashboard-blog-pagination {
    margin-top: 24px;
    justify-content: center;
}

.dashboard-blog-read-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    color: var(--primary);
    font-weight: 700;
}

.dashboard-blog-detail[hidden] {
    display: none !important;
}

.dashboard-blog-post {
    width: min(100%, 1000px);
    margin-inline: auto;
    animation: dashboard-blog-post-enter .22s ease-out both;
}

.dashboard-blog-post-header {
    width: min(100%, 800px);
    margin: 0 auto 24px;
}

.dashboard-blog-post-category {
    display: inline-flex;
    margin-bottom: 12px;
    padding: 6px 11px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
    font-size: .82rem;
    font-weight: 800;
}

.dashboard-blog-post-header h1 {
    margin: 0 0 12px;
    font-size: clamp(1.7rem, 4vw, 2.65rem);
    line-height: 1.55;
}

.dashboard-blog-post-header > p {
    max-width: 760px;
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 2;
}

.dashboard-blog-post-cover {
    width: min(100%, 920px);
    overflow: hidden;
    margin: 0 auto 32px;
    border-radius: 24px;
    background: var(--surface-soft);
    box-shadow: 0 18px 48px rgba(15, 23, 42, .1);
}

.dashboard-blog-post-cover img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.dashboard-blog-post-body {
    width: min(100%, 760px);
    max-width: 760px;
    margin-inline: auto;
    font-size: clamp(1rem, 1.35vw, 1.075rem);
    line-height: 2.1;
    text-align: start;
    overflow-wrap: anywhere;
}

.dashboard-blog-post-body p {
    margin: 0 0 18px;
}

.blog-article-body,
.dashboard-blog-post-body {
    line-height: 2.1;
}

.blog-article-body > *,
.dashboard-blog-post-body > * {
    max-width: 100%;
    box-sizing: border-box;
}

.blog-article-body > :first-child,
.dashboard-blog-post-body > :first-child {
    margin-top: 0;
}

.blog-content-heading {
    margin: 2.35rem 0 .8rem;
    color: var(--primary-dark);
    font-size: clamp(1.4rem, 3vw, 2rem);
    line-height: 1.5;
}

.blog-content-subheading {
    margin: 1.75rem 0 .65rem;
    color: var(--ink);
    font-size: clamp(1.12rem, 2.2vw, 1.4rem);
    line-height: 1.65;
}

.blog-content-image {
    display: grid;
    justify-items: center;
    margin: 2rem 0 2.2rem;
}

.blog-content-image img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(72vh, 720px);
    object-fit: contain;
    border-radius: 18px;
    box-shadow: var(--shadow);
}

.blog-content-image figcaption {
    width: min(100%, 680px);
    margin-top: 9px;
    color: var(--muted);
    font-size: .86rem;
    text-align: center;
}

.blog-content-quote {
    margin: 1.8rem 0;
    padding: 18px 20px;
    border-inline-start: 4px solid var(--accent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 9%, var(--surface-soft));
    overflow-wrap: anywhere;
}

.blog-content-quote p {
    margin: 0;
    font-size: 1.06em;
    font-weight: 650;
}

.blog-content-quote cite {
    display: block;
    margin-top: 9px;
    color: var(--muted);
    font-size: .85rem;
    font-style: normal;
}

.blog-content-list {
    display: grid;
    gap: 8px;
    margin: 1.2rem 0 1.6rem;
    padding-inline-start: 1.5rem;
}

.blog-content-list li::marker {
    color: var(--accent);
}

.blog-content-divider {
    width: min(100%, 520px);
    margin: 2.5rem auto;
    border: 0;
    border-top: 1px solid var(--line);
}

@keyframes dashboard-blog-post-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dashboard-blog-empty {
    padding: 48px 24px;
    border: 1px dashed var(--line);
    border-radius: 20px;
    color: var(--muted);
    text-align: center;
}

@media (max-width: 980px) {
    .dashboard-blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .dashboard-blog-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-blog-post-header h1 {
        font-size: clamp(1.55rem, 7.5vw, 2rem);
        line-height: 1.5;
    }

    .dashboard-blog-post-cover {
        margin: 0 0 22px;
        border-radius: 16px;
    }

    .dashboard-blog-post-header > p {
        font-size: .95rem;
        line-height: 1.85;
    }

    .dashboard-blog-post-body {
        font-size: .98rem;
        line-height: 2;
    }

    .blog-content-heading {
        margin-top: 1.8rem;
        font-size: 1.38rem;
        line-height: 1.55;
    }

    .blog-content-subheading {
        margin-top: 1.4rem;
        font-size: 1.12rem;
    }

    .blog-content-image {
        margin: 1.4rem 0 1.6rem;
    }

    .blog-content-image img {
        max-height: none;
        border-radius: 14px;
    }

    .blog-content-quote {
        margin: 1.35rem 0;
        padding: 14px 15px;
    }

    .blog-content-list {
        padding-inline-start: 1.25rem;
    }
}

@media (max-width: 540px) {
    .dashboard-blog-grid {
        gap: 8px;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 17px;
        background: var(--surface);
    }

    .dashboard-blog-card {
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .dashboard-blog-card + .dashboard-blog-card {
        border-block-start: 1px solid var(--line);
    }

    .dashboard-blog-card-link {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        padding-block: 12px;
    }

    .dashboard-blog-card-media {
        width: 72px;
        height: 72px;
        border-radius: 10px;
    }

    .dashboard-blog-card-media > span,
    .dashboard-blog-excerpt,
    .dashboard-blog-read-label {
        display: none;
    }

    .dashboard-blog-card-content {
        min-width: 0;
        gap: 4px;
        padding: 0;
    }

    .dashboard-blog-card-content > strong {
        font-size: 0.86rem;
        line-height: 1.3;
    }

    .dashboard-blog-meta {
        font-size: 0.67rem;
    }
}

@media (max-width: 640px) {
    .dashboard-section-tabs {
        margin-bottom: 14px;
    }
}

.dashboard-header-context {
    display: grid;
    min-width: 0;
    gap: 0;
    justify-self: start;
    padding-inline-start: 18px;
    border-inline-start: 1px solid var(--line);
}

.dashboard-header-context span {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.3;
}

.dashboard-header-context strong {
    overflow: hidden;
    color: var(--primary-dark);
    font-size: 0.93rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Wallet-related views start with their own contextual heading or balance
 * banner. Keep the shell header persistent while suppressing duplicate
 * context titles in those views.
 */
.dashboard-wallet-view .dashboard-header-context {
    display: none;
}

.dashboard-wallet-view .dashboard-site-header .nav {
    grid-template-columns: auto minmax(0, 1fr);
}

.dashboard-wallet-view .dashboard-site-header .nav-links {
    grid-column: 2;
}

.dashboard-site-header[data-dashboard-current-view="admin"] .dashboard-header-context {
    display: none;
}

.dashboard-site-header .nav-links {
    min-width: 0;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 7px;
}

.dashboard-settings-button {
    display: inline-grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--primary);
    cursor: pointer;
    font-size: 1.02rem;
    transition:
        border-color 160ms ease,
        background 160ms ease,
        color 160ms ease,
        transform 160ms ease;
}

.dashboard-settings-button:hover,
.dashboard-settings-button:focus-visible,
.dashboard-settings-button.is-active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 13%, var(--surface));
    color: var(--primary-dark);
    outline: none;
    transform: translateY(-1px);
}

.dashboard-app-shell {
    width: min(var(--page-max), calc(100% - (var(--page-gutter) * 2)));
    min-width: 0;
    max-width: var(--page-max);
    /*
     * Embedded views are rendered directly below the persistent header.
     * Their standalone page-shell padding is reset below. Keep only a small
     * shell gap so the first card does not touch the sticky header.
     */
    padding-top: clamp(12px, 2vw, 20px);
    padding-bottom: 28px;
}

/*
 * The startup handoff focuses the dashboard shell so keyboard and screen
 * reader users land inside the application. Chrome otherwise paints its
 * default focus ring around this programmatically focused main element; on
 * phones the clipped full-width ring appears as blue lines at the top and
 * bottom of the workspace.
 */
.dashboard-app-shell[tabindex="-1"]:focus {
    outline: none;
}

.dashboard-app-shell.is-admin-view {
    padding-top: 0;
}

.dashboard-app-shell,
.dashboard-app-shell *,
.dashboard-bottom-nav,
.dashboard-bottom-nav * {
    min-width: 0;
}

.dashboard-view {
    width: 100%;
    min-width: 0;
    animation: dashboard-view-in 180ms ease both;
}

.dashboard-view[hidden] {
    display: none !important;
}

.dashboard-view-content {
    width: 100%;
    min-width: 0;
}

.dashboard-view-content > main.container.page-shell,
.dashboard-view-content .container.page-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.dashboard-view-content > .container.page-shell {
    min-width: 0;
}

.dashboard-view-content .panel,
.dashboard-view-content .card,
.dashboard-view-content .table-wrap,
.dashboard-view-content .friends-layout,
.dashboard-view-content .tickets-layout,
.dashboard-view-content .profile-layout {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.dashboard-view-content img,
.dashboard-view-content svg,
.dashboard-view-content canvas,
.dashboard-view-content video {
    max-width: 100%;
}

.dashboard-view-content input,
.dashboard-view-content select,
.dashboard-view-content textarea,
.dashboard-view-content button {
    max-width: 100%;
}

.dashboard-view-content table {
    max-width: 100%;
}

.dashboard-view-content :is(
    h1,
    h2,
    h3,
    p,
    small,
    label,
    strong,
    span,
    a
) {
    overflow-wrap: anywhere;
}

.dashboard-site-header .notification-dropdown {
    max-width: min(380px, calc(100vw - 28px));
}

.dashboard-site-header .notification-dropdown-header a {
    flex: 0 0 auto;
    white-space: nowrap;
}

.dashboard-bottom-nav {
    overflow: clip;
}

.dashboard-nav-item {
    overflow: hidden;
}

.dashboard-view-content > main.container.page-shell > .page-heading {
    margin-top: 0;
}

.dashboard-view-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    padding: 2px 0 16px;
    border-bottom: 1px solid var(--line);
}

.dashboard-view-toolbar .eyebrow {
    margin: 0 0 2px;
}

.dashboard-view-toolbar h2 {
    margin: 0;
    color: var(--primary-dark);
    font-size: clamp(1.35rem, 3vw, 2rem);
}

.dashboard-view-back {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 8px 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--primary);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 800;
}

.dashboard-view-back:hover,
.dashboard-view-back:focus-visible {
    border-color: var(--accent);
    background: var(--surface-soft);
    outline: none;
}

.dashboard-view-content .page-heading h1 {
    font-size: clamp(1.55rem, 3vw, 2.45rem);
}

.dashboard-view-content .page-heading > a[href="index.php"],
.dashboard-view-content .page-heading-actions > a[href="index.php"] {
    display: none;
}

.dashboard-community-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 30px;
}

.dashboard-community-card {
    min-width: 0;
    padding: clamp(16px, 2vw, 22px);
    border: 1px solid var(--line);
    border-radius: 21px;
    background:
        radial-gradient(
            circle at 100% 0,
            color-mix(in srgb, var(--accent) 9%, transparent),
            transparent 44%
        ),
        var(--surface);
    box-shadow: 0 12px 32px rgba(70, 39, 25, 0.055);
}

.dashboard-community-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
}

.dashboard-community-heading .eyebrow {
    margin: 0 0 2px;
}

.dashboard-community-heading h2 {
    margin: 0;
    color: var(--primary-dark);
    font-size: clamp(1.15rem, 2vw, 1.45rem);
}

.dashboard-feed-state {
    min-width: 18px;
    color: var(--muted);
    font-size: 0.9rem;
}

.dashboard-leaderboard-mark {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 13px;
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    color: var(--accent);
    font-size: 1.3rem;
}

.dashboard-feed-list,
.dashboard-leaderboard-list {
    display: grid;
    gap: 8px;
}

.dashboard-winner-item,
.dashboard-leader-item {
    display: grid;
    align-items: center;
    min-width: 0;
    gap: 10px;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-soft) 78%, transparent);
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.dashboard-winner-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.dashboard-leader-item {
    grid-template-columns: 28px auto minmax(0, 1fr) auto;
}

.dashboard-winner-item:hover,
.dashboard-leader-item:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
    background: var(--surface-soft);
    transform: translateY(-1px);
}

.dashboard-feed-avatar {
    display: block;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    overflow: hidden;
    border: 2px solid color-mix(in srgb, var(--accent) 45%, var(--line));
    border-radius: 50%;
    background: var(--surface-contrast);
    color: var(--primary);
    object-fit: cover;
    text-align: center;
}

.dashboard-feed-avatar-trigger {
    display: block;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.dashboard-feed-avatar-trigger:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}

.dashboard-feed-avatar-placeholder {
    display: grid;
    place-items: center;
    text-transform: uppercase;
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
}

.dashboard-feed-copy,
.dashboard-leader-copy,
.dashboard-feed-value {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.dashboard-feed-copy strong,
.dashboard-leader-copy strong,
.dashboard-feed-value strong {
    overflow: hidden;
    color: var(--primary-dark);
    font-size: 0.82rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-feed-copy small,
.dashboard-leader-copy small,
.dashboard-feed-value time {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.69rem;
    line-height: 1.55;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-feed-value {
    justify-items: end;
    text-align: end;
}

.dashboard-feed-value strong {
    color: var(--success);
    font-size: 0.78rem;
}

.dashboard-leader-rank {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 900;
}

.dashboard-crown {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 10px;
    font-size: 1rem;
    line-height: 1;
}

.dashboard-crown.crown-gold {
    color: #a76b15;
    background: rgba(236, 186, 78, 0.2);
}

.dashboard-crown.crown-silver {
    color: #68747d;
    background: rgba(156, 170, 181, 0.23);
}

.dashboard-crown.crown-bronze {
    color: #9a5b35;
    background: rgba(181, 112, 72, 0.2);
}

.dashboard-leader-item.rank-1 {
    border-color: color-mix(in srgb, #d7a536 42%, var(--line));
    background: color-mix(in srgb, #d7a536 8%, var(--surface));
}

.dashboard-leader-item.rank-2 {
    background: color-mix(in srgb, #aab8c2 7%, var(--surface));
}

.dashboard-leader-item.rank-3 {
    background: color-mix(in srgb, #b8794c 7%, var(--surface));
}

.dashboard-leader-score {
    display: grid;
    justify-items: end;
    color: var(--primary-dark);
    font-size: 0.83rem;
    line-height: 1.25;
}

.dashboard-feed-empty {
    padding: 25px 12px;
    color: var(--muted);
    font-size: 0.82rem;
    text-align: center;
}

.dashboard-feed-loading {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.dashboard-animated-loader{position:fixed;inset:0;z-index:2147483647;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;margin:0;padding:0;border:0;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--muted);font-size:.9rem;text-align:center;animation:dashboard-loader-in .35s ease both}.dashboard-loader-orbit{position:relative;display:block;width:58px;height:58px;border:2px solid color-mix(in srgb,var(--primary) 18%,transparent);border-radius:50%;animation:dashboard-loader-spin 2.2s linear infinite}.dashboard-loader-orbit:before,.dashboard-loader-orbit:after{content:"";position:absolute;inset:8px;border:2px solid color-mix(in srgb,var(--accent,var(--primary)) 35%,transparent);border-top-color:var(--accent,var(--primary));border-radius:50%;animation:dashboard-loader-spin-reverse 1.5s linear infinite}.dashboard-loader-orbit:after{inset:17px;border:0;background:radial-gradient(circle,var(--primary) 0 28%,color-mix(in srgb,var(--primary) 30%,transparent) 30% 100%);box-shadow:0 0 22px color-mix(in srgb,var(--primary) 45%,transparent);animation:dashboard-loader-pulse 1.3s ease-in-out infinite}.dashboard-loader-orbit i{position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--accent,var(--primary));box-shadow:0 0 10px color-mix(in srgb,var(--accent,var(--primary)) 60%,transparent)}.dashboard-loader-orbit i:nth-child(2){top:auto;bottom:2px;left:9px;transform:scale(.7);opacity:.7}.dashboard-loader-orbit i:nth-child(3){top:18px;left:auto;right:-3px;transform:scale(.55);opacity:.55}.dashboard-loader-label{font-weight:700}.dashboard-loader-dots{letter-spacing:4px;color:var(--primary);animation:dashboard-loader-dots 1.2s steps(4,end) infinite}@keyframes dashboard-loader-spin{to{transform:rotate(360deg)}}@keyframes dashboard-loader-spin-reverse{to{transform:rotate(-360deg)}}@keyframes dashboard-loader-pulse{50%{transform:scale(.72);opacity:.65}}@keyframes dashboard-loader-dots{0%{opacity:.2}50%{opacity:1}100%{opacity:.2}}@keyframes dashboard-loader-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.dashboard-feed-loading span {
    display: block;
    height: 42px;
    border-radius: 13px;
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--surface-contrast) 80%, transparent),
            color-mix(in srgb, var(--surface) 90%, transparent),
            color-mix(in srgb, var(--surface-contrast) 80%, transparent)
        );
    background-size: 220% 100%;
    animation: dashboard-skeleton 1.2s linear infinite;
}

.dashboard-feed-error,
.dashboard-view-error {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--line));
    border-radius: 11px;
    background: color-mix(in srgb, var(--danger) 7%, var(--surface));
    color: var(--danger);
    font-size: 0.76rem;
}

.dashboard-feed-more {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 13px;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
    border-radius: 13px;
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
    color: var(--primary-dark);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 900;
    cursor: pointer;
    transition:
        border-color 160ms ease,
        background 160ms ease,
        transform 160ms ease;
}

.dashboard-feed-more:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    transform: translateY(-1px);
}

.dashboard-winners-directory {
    width: 100%;
    margin-bottom: 30px;
}

.dashboard-winners-directory-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

@media (max-width: 760px) {
    .dashboard-winners-directory-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

.dashboard-games-paywall {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 230px;
    margin: 0;
    background:
        radial-gradient(
            circle at 0 100%,
            color-mix(in srgb, var(--accent) 14%, transparent),
            transparent 42%
        ),
        var(--surface);
}

.dashboard-paywall-mark {
    display: grid;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    place-items: center;
    border-radius: 20px;
    background: color-mix(in srgb, var(--accent) 15%, var(--surface));
    color: var(--accent);
    font-size: 1.8rem;
}

.dashboard-games-paywall h1 {
    margin: 0 0 5px;
    color: var(--primary-dark);
    font-size: clamp(1.35rem, 3vw, 2rem);
}

.dashboard-games-paywall p:not(.eyebrow) {
    margin: 0 0 16px;
    color: var(--muted);
}

.dashboard-bottom-nav {
    position: fixed;
    z-index: 1000;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    width: 100%;
    height: var(--dashboard-bottom-nav-height);
    min-height: 0;
    box-sizing: border-box;
    padding: 3px max(10px, calc((100vw - var(--page-max)) / 2))
        calc(3px + env(safe-area-inset-bottom));
    border-top: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
    border-radius: 20px 20px 0 0;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: 0 -12px 32px rgba(52, 29, 20, 0.08);
    direction: rtl;
    backdrop-filter: blur(18px) saturate(130%);
}

.dashboard-nav-item {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    min-width: 0;
    min-height: 0;
    gap: 2px;
    padding: 2px 3px;
    border-radius: 14px;
    color: var(--muted);
    font-size: clamp(0.63rem, 1.5vw, 0.74rem);
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
    transition:
        color 240ms cubic-bezier(.22, 1, .36, 1),
        background 240ms cubic-bezier(.22, 1, .36, 1),
        transform 240ms cubic-bezier(.22, 1, .36, 1),
        opacity 240ms cubic-bezier(.22, 1, .36, 1);
    will-change: color, background, transform;
}

.dashboard-nav-item:hover,
.dashboard-nav-item:focus-visible {
    color: var(--primary);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    transform: translateY(-1px);
    outline: none;
}

.dashboard-nav-item.is-active {
    color: var(--primary-dark);
    background: color-mix(in srgb, var(--accent) 15%, var(--surface));
}

.dashboard-nav-item.is-disabled,
.dashboard-nav-item.is-disabled:hover,
.dashboard-nav-item.is-disabled:focus-visible {
    color: var(--muted);
    opacity: 0.45;
    cursor: not-allowed;
    background: transparent;
}

.dashboard-nav-item.is-disabled::before {
    opacity: 0;
}

.dashboard-nav-item.is-active.is-disabled::before {
    opacity: 0;
}

.dashboard-nav-item::before {
    position: absolute;
    left: 50%;
    top: 3px;
    width: 25px;
    height: 3px;
    border-radius: 999px;
    background: var(--accent);
    content: "";
    opacity: 0;
    transform: translateX(-50%) translateY(-4px) scaleX(.65);
    transform-origin: center;
    transition:
        opacity 240ms cubic-bezier(.22, 1, .36, 1),
        transform 280ms cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}

.dashboard-nav-item.is-active::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scaleX(1);
}

.dashboard-nav-icon {
    display: grid;
    width: 29px;
    height: 25px;
    place-items: center;
    color: currentColor;
    font-size: 1.08rem;
    line-height: 1;
    transition: transform 240ms cubic-bezier(.22, 1, .36, 1), color 240ms cubic-bezier(.22, 1, .36, 1);
}

.dashboard-nav-badge {
    position: absolute;
    top: 5px;
    inset-inline-end: calc(50% - 24px);
    display: inline-grid;
    min-width: 18px;
    min-height: 18px;
    place-items: center;
    padding: 1px 4px;
    border: 2px solid var(--surface);
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 0.61rem;
    font-weight: 900;
    line-height: 1;
}

html[data-theme="dark"] .dashboard-site-header,
html[data-theme="dark"] .dashboard-bottom-nav {
    background: color-mix(in srgb, var(--surface) 93%, transparent);
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .dashboard-community-card,
html[data-theme="dark"] .dashboard-status-card,
html[data-theme="dark"] .dashboard-insight-card,
html[data-theme="dark"] .dashboard-card-modern {
    box-shadow: 0 13px 34px rgba(0, 0, 0, 0.18);
}

@keyframes dashboard-view-in {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dashboard-skeleton {
    from {
        background-position: 200% 0;
    }
    to {
        background-position: -20% 0;
    }
}

@media (max-width: 900px) {
    .dashboard-site-header .nav {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 11px;
    }

    .dashboard-site-header .nav-links {
        gap: 5px;
    }

    .dashboard-site-header .nav-user {
        max-width: 130px;
    }
}

@media (max-width: 760px) {
    .dashboard-shell-body {
        --dashboard-bottom-nav-height: 74px;
    }

    .dashboard-wallet-view .dashboard-site-header .nav {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .dashboard-site-header {
        padding-top: 9px;
        padding-bottom: 9px;
    }

    .dashboard-site-header .nav {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "brand actions"
            "context actions";
        align-items: center;
        gap: 2px 10px;
    }

    .dashboard-site-header .brand {
        grid-area: brand;
        max-width: 100%;
    }

    .dashboard-header-context {
        grid-area: context;
        justify-self: start;
        padding-inline-start: 0;
        border-inline-start: 0;
    }

    .dashboard-header-context span {
        display: none;
    }

    .dashboard-header-context strong {
        font-size: 0.76rem;
    }

    .dashboard-site-header .nav-links {
        grid-area: actions;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        max-width: 48vw;
    }

    .dashboard-site-header .nav-user,
    .dashboard-site-header .help-widget,
    .dashboard-site-header .install-app-button {
        display: none;
    }

    .dashboard-site-header .language-switcher-toggle {
        min-height: 38px;
        padding-inline: 8px;
        font-size: 0.7rem;
    }

    .dashboard-site-header .theme-toggle,
    .dashboard-site-header .dashboard-settings-button,
    .dashboard-site-header .notification-toggle {
        width: 38px;
        height: 38px;
        min-height: 38px;
    }

    .dashboard-site-header .notification-toggle {
        padding: 5px;
    }

    .dashboard-site-header .notification-toggle-label {
        display: none;
    }

    .dashboard-site-header .btn {
        min-height: 38px;
        padding: 6px 9px;
        font-size: 0.72rem;
    }

    .dashboard-app-shell {
        width: calc(100% - 28px);
        padding-top: 12px;
    }

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

    .dashboard-view-toolbar {
        align-items: flex-start;
    }
}

/*
 * Compact dashboard header on phones.
 * Keep the brand/context in predictable rows and place every control in an
 * equal-width grid. The previous flex-wrap layout changed row breaks
 * depending on the user's name and wallet amount.
 */
@media (max-width: 760px) {
    .dashboard-site-header {
        padding: 8px 12px 10px;
    }

    .dashboard-site-header .nav {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "brand"
            "context"
            "actions";
        gap: 6px;
    }

    .dashboard-site-header .brand {
        grid-area: brand;
        justify-self: center;
        gap: 8px;
        max-width: 100%;
        font-size: 1rem;
    }

    .dashboard-site-header .brand-mark {
        width: 44px;
        height: 44px;
    }

    .dashboard-site-header .dashboard-header-context {
        grid-area: context;
        display: none;
    }

    .dashboard-site-header .dashboard-header-context strong {
        max-width: min(76vw, 280px);
        font-size: 0.74rem;
    }

    .dashboard-site-header .nav-links {
        grid-area: actions;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: center;
        justify-content: stretch;
        width: 100%;
        max-width: none;
        gap: 6px;
    }

    .dashboard-site-header .nav-links > * {
        min-width: 0;
        width: 100%;
        justify-self: stretch;
    }

    .dashboard-site-header .nav-links > [data-shortcuts-open] {
        display: none;
    }

    .dashboard-site-header .nav-links > .nav-user {
        grid-column: span 2;
        display: flex;
        min-height: 38px;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: 0 8px;
        border: 1px solid var(--line);
        border-radius: 11px;
        background: var(--surface);
        font-size: 0.72rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dashboard-site-header .nav-links > .dashboard-wallet-button {
        grid-column: span 2;
        justify-content: center;
        height: 40px;
        min-height: 40px;
        padding-inline: 8px;
        border-radius: 11px;
    }

    .dashboard-site-header .dashboard-wallet-amount {
        max-width: 100%;
        overflow: hidden;
        font-size: 0.69rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dashboard-site-header .dashboard-wallet-amount small {
        font-size: 0.58rem;
    }

    .dashboard-site-header .nav-links > .language-switcher,
    .dashboard-site-header .nav-links > .notification-widget,
    .dashboard-site-header .nav-links > .dashboard-settings-button,
    .dashboard-site-header .nav-links > .theme-toggle,
    .dashboard-site-header .nav-links > .logout-button {
        display: inline-grid;
        min-height: 40px;
        height: 40px;
        place-items: center;
        justify-self: stretch;
    }

    .dashboard-site-header .nav-links > .dashboard-admin-button {
        display: none !important;
    }

    .dashboard-site-header .nav-links > .language-switcher {
        display: block;
    }

    .dashboard-site-header .language-switcher-toggle,
    .dashboard-site-header .notification-toggle,
    .dashboard-site-header .dashboard-settings-button,
    .dashboard-site-header .dashboard-admin-button,
    .dashboard-site-header .theme-toggle,
    .dashboard-site-header .logout-button {
        width: 100%;
        min-width: 0;
        height: 40px;
        min-height: 40px;
        padding: 0;
        border-radius: 11px;
    }

    .dashboard-site-header .notification-widget {
        position: relative;
    }

    .dashboard-site-header .notification-dropdown {
        position: fixed;
        z-index: 1100;
        top: 116px;
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
        max-height: min(62vh, 440px);
        overflow-y: auto;
    }

    .dashboard-site-header .logout-button > span:last-child,
    .dashboard-site-header .notification-toggle-label {
        display: none;
    }
}

/* Collapsed mobile header: controls are revealed only on user request. */
.dashboard-mobile-header-toggle {
    display: none;
}

@media (max-width: 760px) {
    .dashboard-site-header .nav {
        grid-template-columns: minmax(0, 1fr) 42px;
        grid-template-areas:
            "brand toggle"
            "context context"
            "actions actions";
        align-items: center;
    }

    .dashboard-site-header .brand {
        grid-area: brand;
        justify-self: start;
    }

    .dashboard-site-header .dashboard-header-context {
        grid-area: context;
        justify-self: start;
        text-align: start;
    }

    .dashboard-mobile-header-toggle {
        grid-area: toggle;
        display: inline-grid;
        width: 42px;
        height: 42px;
        place-items: center;
        align-content: center;
        gap: 2px;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--surface);
        color: var(--primary);
        cursor: pointer;
        transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
    }

    .dashboard-mobile-header-toggle:hover,
    .dashboard-mobile-header-toggle:focus-visible,
    .dashboard-mobile-header-toggle.is-open {
        border-color: var(--accent);
        background: color-mix(in srgb, var(--accent) 12%, var(--surface));
        outline: none;
    }

    .dashboard-mobile-header-toggle-icon {
        display: grid;
        gap: 3px;
        width: 18px;
    }

    .dashboard-mobile-header-toggle-icon span {
        display: block;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
    }

    .dashboard-site-header .nav-links {
        display: none;
        grid-area: actions;
        width: 100%;
        max-width: none;
        padding-top: 6px;
        border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    }

    .dashboard-site-header .nav-links.is-mobile-open {
        display: grid;
    }
}

@media (max-width: 540px) {
    .dashboard-shell-body {
        --dashboard-bottom-nav-height: 72px;
    }

    .dashboard-site-header .language-switcher {
        min-width: 0;
    }

    .dashboard-site-header .language-switcher-toggle {
        width: 38px;
        overflow: hidden;
        font-size: 0;
    }

    .dashboard-site-header .language-switcher-toggle::before {
        content: "文";
        color: var(--primary);
        font-size: 0.85rem;
        font-weight: 900;
    }

    .dashboard-view-toolbar {
        flex-direction: column;
        gap: 10px;
        padding-bottom: 12px;
    }

    .dashboard-view-back {
        width: 100%;
        justify-content: center;
    }

    .dashboard-winner-item {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .dashboard-winner-item .dashboard-feed-value {
        grid-column: auto;
        justify-items: end;
        text-align: end;
    }

    .dashboard-winner-item .dashboard-feed-copy small {
        overflow: visible;
        line-height: 1.45;
        text-overflow: clip;
        white-space: normal;
    }

    .dashboard-feed-copy strong,
    .dashboard-leader-copy strong {
        font-size: 0.78rem;
    }

    .dashboard-feed-copy small,
    .dashboard-leader-copy small,
    .dashboard-feed-value time {
        font-size: 0.65rem;
    }

    .dashboard-games-paywall {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
    }

    .dashboard-games-paywall .btn {
        width: 100%;
    }

    .dashboard-bottom-nav {
        padding-inline: 5px;
    }

    .dashboard-nav-item {
        min-height: 54px;
        font-size: 0.61rem;
    }

    .dashboard-nav-icon {
        height: 23px;
        font-size: 1rem;
    }

    .dashboard-nav-badge {
        inset-inline-end: calc(50% - 21px);
    }
}

@media (max-width: 360px) {
    .dashboard-site-header .theme-toggle {
        display: none;
    }

    .dashboard-site-header .nav-links {
        max-width: 52vw;
    }

    .dashboard-site-header .btn {
        padding-inline: 7px;
    }

    .dashboard-app-shell {
        width: calc(100% - 20px);
        padding-top: 10px;
    }

    .dashboard-community-card {
        padding: 14px 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-view,
    .dashboard-feed-loading span,
    .dashboard-nav-item,
    .dashboard-settings-button,
    .dashboard-winner-item,
    .dashboard-leader-item {
        animation: none;
        transition: none;
    }
}

/* Dashboard top actions and the compact account monitoring module. */
.dashboard-topbar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 2.35rem;
    border: 1px solid var(--border-color, rgba(89, 66, 46, .16));
    border-radius: 50%;
    color: var(--text-color, #3b2a20);
    background: var(--surface-color, rgba(255, 255, 255, .72));
    text-decoration: none;
    transition: transform .18s ease, color .18s ease, background-color .18s ease;
}

.dashboard-topbar-icon:hover,
.dashboard-topbar-icon:focus-visible {
    color: var(--accent-color, #9a6b2f);
    background: var(--surface-hover, #fff);
    transform: translateY(-1px);
}

.dashboard-topbar-icon:focus-visible,
.dashboard-settings-button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent-color, #9a6b2f) 38%, transparent);
    outline-offset: 2px;
}

.dashboard-monitoring {
    margin: 1.4rem 0 1.8rem;
}

.dashboard-daily-layout-single {
    grid-template-columns: minmax(0, 1fr);
}

.dashboard-monitoring-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.dashboard-monitoring-grid-six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 1.4rem 0 1.8rem;
}

.dashboard-redesign .dashboard-hero-modern {
    min-height: 0;
    padding: clamp(1rem, 2.2vw, 1.5rem) clamp(1rem, 3vw, 2rem);
    gap: 1rem;
}

.dashboard-redesign .dashboard-hero-modern h1 {
    margin-block: .35rem 0;
    font-size: clamp(1.15rem, 2.5vw, 1.75rem);
}

.dashboard-redesign .dashboard-hero-kicker {
    margin-bottom: .25rem;
}

.dashboard-redesign .dashboard-hero-actions {
    margin-top: .55rem;
}

.dashboard-monitoring-grid-six .dashboard-monitoring-card {
    min-height: 6.25rem;
}

.dashboard-monitoring-grid-six .dashboard-monitoring-copy {
    flex: 1 1 auto;
}

.dashboard-monitoring-card {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
    padding: 1rem 1.1rem;
    color: inherit;
    text-decoration: none;
    border: 1px solid var(--border-color, rgba(89, 66, 46, .16));
    border-radius: var(--card-radius, 1.15rem);
    background: var(--surface-color, rgba(255, 255, 255, .72));
    box-shadow: var(--card-shadow, 0 10px 28px rgba(50, 32, 18, .07));
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.dashboard-monitoring-card:hover,
.dashboard-monitoring-card:focus-visible {
    border-color: color-mix(in srgb, var(--accent-color, #9a6b2f) 55%, transparent);
    box-shadow: 0 14px 30px rgba(50, 32, 18, .12);
    transform: translateY(-2px);
}

.dashboard-monitoring-copy {
    display: grid;
    gap: .2rem;
    min-width: 0;
}

.dashboard-monitoring-card small {
    color: var(--muted-color, #796b61);
}

.dashboard-monitoring-card strong {
    overflow-wrap: anywhere;
    font-size: clamp(.95rem, 1.8vw, 1.15rem);
}

.dashboard-monitoring-icon {
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    flex: 0 0 2.6rem;
    border-radius: .85rem;
    color: var(--accent-color, #9a6b2f);
    background: color-mix(in srgb, var(--accent-color, #9a6b2f) 12%, transparent);
    font-size: 1.2rem;
}

.dashboard-monitoring-icon .site-icon {
    width: 1.2em;
    height: 1.2em;
    max-width: 1.2em;
    max-height: 1.2em;
}

.dashboard-monitoring-arrow {
    margin-inline-start: auto;
    color: var(--muted-color, #796b61);
}

html[data-theme="dark"] .dashboard-topbar-icon,
html[data-theme="dark"] .dashboard-monitoring-card {
    color: var(--text-color, #f5eee7);
    background: var(--surface-color, rgba(38, 29, 24, .9));
    border-color: rgba(255, 255, 255, .12);
}

@media (max-width: 540px) {
    .dashboard-monitoring-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .dashboard-monitoring-grid-six {
        margin: 12px 0 20px;
    }

    .dashboard-monitoring-grid-six .dashboard-monitoring-card,
    .dashboard-monitoring-card {
        min-height: 60px;
        gap: 9px;
        padding: 9px 11px;
        border-radius: 14px;
    }

    .dashboard-monitoring-copy {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .dashboard-monitoring-card small {
        overflow: hidden;
        font-size: 0.68rem;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dashboard-monitoring-card strong {
        flex: 0 0 auto;
        font-size: 0.82rem;
        line-height: 1.35;
        text-align: left;
        white-space: nowrap;
    }

    .dashboard-monitoring-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        border-radius: 10px;
        font-size: 1rem;
    }

    .dashboard-topbar-icon {
        width: 2.15rem;
        height: 2.15rem;
        flex-basis: 2.15rem;
    }
}

/* Final layout overrides: keep friends/profile tabs equal and predictable. */
[data-chat-app] {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2.4vw, 24px);
}

[data-chat-app] > .friends-invite-panel {
    order: -1;
}

[data-chat-app] > .friends-tabs {
    order: 0;
}

[data-chat-app] > [data-friends-section],
[data-chat-app] > .friends-layout {
    order: 1;
    min-width: 0;
}

.friends-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    overflow: visible;
    padding: 7px;
}

.friends-tab {
    width: 100%;
    min-width: 0;
    min-height: 54px;
    flex: initial;
    justify-content: center;
    padding: 10px 12px;
    font-size: clamp(.92rem, 1.6vw, 1.08rem);
    font-weight: 800;
    white-space: nowrap;
}

.profile-quick-nav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px !important;
    width: 100%;
    overflow: visible !important;
}

.profile-quick-nav a {
    min-width: 0;
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    font-size: clamp(.92rem, 1.6vw, 1.08rem) !important;
    font-weight: 800;
    white-space: nowrap;
}

@media (max-width: 520px) {
    .friends-tabs,
    .profile-quick-nav {
        gap: 5px !important;
        padding: 4px;
    }

    .friends-tab,
    .profile-quick-nav a {
        min-height: 48px;
        padding-inline: 6px !important;
        font-size: .83rem !important;
    }
}

/* Final shared-tab contract: one visual system across all four modules. */
.unified-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding: 6px !important;
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line)) !important;
    border-radius: 16px !important;
    background: color-mix(in srgb, var(--primary) 5%, var(--surface-soft)) !important;
}

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

.unified-tabs > .unified-tab {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    flex: initial !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    background: transparent !important;
    color: var(--muted) !important;
    font: inherit;
    font-size: clamp(.82rem, 1.55vw, .96rem) !important;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
    white-space: normal !important;
    overflow-wrap: anywhere;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.unified-tabs > .unified-tab:hover,
.unified-tabs > .unified-tab:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line)) !important;
    color: var(--primary-dark) !important;
    outline: none;
}

.unified-tabs > .unified-tab.is-active,
.unified-tabs > .unified-tab[aria-selected="true"] {
    border-color: color-mix(in srgb, var(--primary) 42%, var(--line)) !important;
    background: var(--primary) !important;
    color: var(--on-primary, #fffaf5) !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 18%, transparent);
}

@media (max-width: 540px) {
    .unified-tabs {
        gap: 4px !important;
        padding: 4px !important;
    }

    .unified-tabs > .unified-tab {
        min-height: 46px !important;
        padding-inline: 6px !important;
        font-size: .76rem !important;
    }
}

/*
 * Wallet balance is the page's primary banner. Keep its branded treatment
 * intact after the global card-style overrides are applied.
 */
#wallet-balance-banner {
    background: linear-gradient(140deg, #3d2018, #7a432d) !important;
    color: #fff !important;
}

#wallet-balance-banner :is(span, small, .wallet-balance-secondary) {
    color: rgba(255, 255, 255, 0.72) !important;
}

#wallet-balance-banner strong {
    color: #fff !important;
}

#wallet-balance-banner .wallet-balance-meta {
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

html[data-theme="dark"] #wallet-balance-banner {
    background: linear-gradient(140deg, #4a291e, #251512) !important;
}

/*
 * Auth v2 — a self-contained, mobile-first authentication shell.
 *
 * This block intentionally comes last so the auth experience remains stable
 * while older pages continue to use the shared field/card primitives above.
 */
html.auth-v2-document {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

body.auth-v2-body {
    --auth-espresso: #24130e;
    --auth-espresso-deep: #160b08;
    --auth-copper: #9b5935;
    --auth-copper-dark: #6d3625;
    --auth-gold: #e4ad68;
    --auth-gold-soft: #f3d5a4;
    --auth-cream: #fffaf4;
    --auth-cream-muted: #f3e7da;
    --auth-ink: #2c1a14;
    --auth-muted: #806c60;
    --auth-line: rgba(120, 72, 45, 0.2);
    --auth-error: #a83d32;
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    background-color: var(--auth-espresso-deep);
    background-image:
        radial-gradient(circle at 8% 8%, rgba(226, 164, 92, 0.2), transparent 30%),
        radial-gradient(circle at 92% 88%, rgba(137, 68, 45, 0.34), transparent 34%),
        linear-gradient(145deg, #1a0c09 0%, #3b1d14 48%, #160b08 100%);
    color: var(--auth-ink);
}

body.auth-v2-body::before,
body.auth-v2-body::after {
    position: fixed;
    z-index: 0;
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

body.auth-v2-body:not(.auth-customized-body)::before {
    top: -180px;
    inset-inline-end: -130px;
    width: min(380px, 100vw);
    height: min(380px, 100vw);
    max-width: 100vw;
    max-height: 100vh;
    border: 1px solid rgba(236, 186, 113, 0.18);
    box-shadow:
        0 0 0 26px rgba(236, 186, 113, 0.04),
        0 0 0 68px rgba(236, 186, 113, 0.025);
}

body.auth-v2-body::after {
    bottom: -230px;
    inset-inline-start: -170px;
    width: min(470px, 100vw);
    height: min(470px, 100vw);
    max-width: 100vw;
    max-height: 100vh;
    background: radial-gradient(circle, rgba(174, 87, 51, 0.24), transparent 68%);
}

body.auth-v2-body.auth-customized-body {
    background-color: var(--auth-bg-color, var(--auth-espresso-deep));
    background-image:
        radial-gradient(circle at 8% 8%, rgba(226, 164, 92, 0.16), transparent 30%),
        radial-gradient(circle at 92% 88%, rgba(137, 68, 45, 0.26), transparent 34%),
        var(--auth-bg-image, none),
        var(--auth-bg-gradient, linear-gradient(145deg, #1a0c09, #3b1d14 48%, #160b08));
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

body.auth-v2-body.auth-customized-body::before {
    z-index: 0;
    inset: 0;
    border-radius: 0;
    background: #090605;
    content: "";
    opacity: var(--auth-overlay-opacity, 0.25);
}

body.auth-v2-body > * {
    position: relative;
    z-index: 1;
}

body.auth-v2-body .auth-v2-page {
    position: relative;
    isolation: isolate;
    display: flex;
    width: 100%;
    max-width: 800px;
    min-height: 100vh;
    min-height: 100svh;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    padding: clamp(18px, 5vw, 52px) clamp(16px, 4vw, 28px);
    overflow: hidden;
}

body.auth-v2-body .auth-v2-card {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: min(500px, 100%);
    min-width: 0;
    margin: 0 auto;
    padding: clamp(20px, 4vw, 38px);
    overflow: hidden;
    border: 1px solid rgba(255, 222, 179, 0.28);
    border-radius: var(--auth-card-radius, 30px);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.7), transparent 32%),
        var(--auth-card-bg, linear-gradient(160deg, rgba(255, 250, 244, 0.98), rgba(246, 231, 216, 0.96)));
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.42),
        0 8px 26px rgba(30, 12, 7, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
    color: var(--auth-ink);
    backdrop-filter: blur(var(--auth-card-blur, 18px));
    -webkit-backdrop-filter: blur(var(--auth-card-blur, 18px));
    transition: opacity 180ms ease, transform 180ms ease;
}

body.auth-v2-body .auth-v2-card-wide {
    max-width: 760px;
}

body.auth-v2-body .auth-v2-card::before {
    position: absolute;
    z-index: -1;
    top: -110px;
    inset-inline-end: -90px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(228, 173, 104, 0.18), transparent 68%);
    content: "";
    pointer-events: none;
}

body.auth-v2-body .auth-v2-page.is-route-switching .auth-v2-card {
    opacity: 0.62;
    transform: translateY(3px);
}

body.auth-v2-body [data-auth-page].is-route-entering {
    animation: auth-v2-route-in 220ms ease both;
}

@keyframes auth-v2-route-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body.auth-v2-body .auth-v2-decoration {
    position: absolute;
    z-index: -1;
    display: block;
    max-width: 100%;
    max-height: 100%;
    border: 1px solid rgba(241, 195, 127, 0.14);
    border-radius: 50%;
    pointer-events: none;
}

body.auth-v2-body .auth-v2-decoration-one {
    top: 8%;
    inset-inline-start: -65px;
    width: 130px;
    height: 130px;
}

body.auth-v2-body .auth-v2-decoration-two {
    bottom: 8%;
    inset-inline-end: -36px;
    width: 78px;
    height: 78px;
    border-color: rgba(221, 151, 87, 0.18);
}

body.auth-v2-body .auth-v2-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    margin-bottom: 20px;
}

body.auth-v2-body .auth-v2-back-link,
body.auth-v2-body .auth-v2-secure-note {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    color: var(--auth-muted);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
}

body.auth-v2-body .auth-v2-back-link {
    transition: color 160ms ease, transform 160ms ease;
}

body.auth-v2-body .auth-v2-back-link:hover,
body.auth-v2-body .auth-v2-back-link:focus-visible {
    color: var(--auth-copper-dark);
    outline: none;
    transform: translateX(-2px);
}

body.auth-v2-body .auth-v2-back-link svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

body.auth-v2-body .auth-v2-secure-note {
    color: #9a704c;
}

body.auth-v2-body .auth-v2-secure-note svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

body.auth-v2-body .auth-v2-brand {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    margin-bottom: 18px;
}

body.auth-v2-body .auth-v2-brand.auth-logo-position-left {
    align-items: flex-start;
}

body.auth-v2-body .auth-v2-brand.auth-logo-position-right {
    align-items: flex-end;
}

body.auth-v2-body .auth-v2-brand .auth-brand {
    width: auto;
    max-width: 100%;
    margin: 0;
}

body.auth-v2-body .auth-v2-brand .auth-brand img {
    display: block;
    width: min(var(--auth-logo-width, 180px), 48vw);
    max-width: 100%;
    height: auto;
    max-height: 128px;
    object-fit: contain;
}

body.auth-v2-body .auth-v2-brand-caption {
    margin-top: 7px;
    color: #a17f62;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

body.auth-v2-body .auth-route-tabs {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 0 28px;
    padding: 4px;
    border: 1px solid rgba(121, 74, 45, 0.18);
    border-radius: 16px;
    background: rgba(115, 65, 39, 0.09);
}

body.auth-v2-body .auth-route-indicator {
    position: absolute;
    z-index: 0;
    inset-block: 4px;
    inset-inline-start: 4px;
    width: calc(50% - 5px);
    border: 1px solid rgba(255, 211, 157, 0.32);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--auth-copper), var(--auth-copper-dark));
    box-shadow: 0 7px 16px rgba(111, 54, 36, 0.2);
    transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.auth-v2-body .auth-route-tabs[data-active-route="register"] .auth-route-indicator {
    transform: translateX(100%);
}

html[dir="rtl"] body.auth-v2-body .auth-route-tabs[data-active-route="register"] .auth-route-indicator {
    transform: translateX(-100%);
}

body.auth-v2-body .auth-route-tab {
    position: relative;
    z-index: 1;
    display: inline-flex;
    min-width: 0;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 0;
    border-radius: 12px;
    color: #8b7568;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.35;
    text-decoration: none;
    white-space: nowrap;
    transition: color 180ms ease;
}

body.auth-v2-body .auth-route-tab:hover,
body.auth-v2-body .auth-route-tab:focus-visible {
    color: var(--auth-copper-dark);
    outline: none;
}

body.auth-v2-body .auth-route-tab.is-active,
body.auth-v2-body .auth-route-tabs[data-active-route="register"] .auth-route-tab[data-auth-route-link="register"],
body.auth-v2-body .auth-route-tabs[data-active-route="login"] .auth-route-tab[data-auth-route-link="login"] {
    color: #fffaf3;
}

body.auth-v2-body .auth-v2-heading {
    margin-bottom: 21px;
    text-align: start;
}

body.auth-v2-body .auth-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--auth-copper);
    font-size: 0.76rem;
    font-weight: 900;
}

body.auth-v2-body .auth-eyebrow-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--auth-gold);
    box-shadow: 0 0 0 4px rgba(228, 173, 104, 0.16);
}

body.auth-v2-body .auth-v2-heading h1 {
    max-width: 100%;
    margin: 9px 0 6px;
    overflow-wrap: anywhere;
    color: var(--auth-espresso);
    font-size: clamp(1.55rem, 4vw, 2.15rem);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.35;
}

body.auth-v2-body .auth-v2-heading p {
    max-width: 62ch;
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--auth-muted);
    font-size: 0.88rem;
    line-height: 1.95;
}

body.auth-v2-body .auth-server-alert {
    max-height: 160px;
    margin: 0 0 16px;
    overflow: auto;
    overflow-wrap: anywhere;
    border: 1px solid rgba(168, 61, 50, 0.16);
    background: rgba(168, 61, 50, 0.08);
    color: var(--auth-error);
    line-height: 1.75;
    transition: opacity 180ms ease, max-height 180ms ease, margin 180ms ease, padding 180ms ease;
}

body.auth-v2-body .auth-server-alert.is-dismissed {
    max-height: 0;
    margin-block: 0;
    padding-block: 0;
    border-width: 0;
    opacity: 0;
    pointer-events: none;
}

body.auth-v2-body .auth-method-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-bottom: 20px;
    padding: 4px;
    border: 1px solid rgba(121, 74, 45, 0.15);
    border-radius: 14px;
    background: rgba(121, 74, 45, 0.06);
}

body.auth-v2-body .auth-method-tab {
    display: inline-flex;
    min-width: 0;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #8a7466;
    cursor: pointer;
    font: inherit;
    font-size: 0.79rem;
    font-weight: 800;
    line-height: 1.35;
    white-space: nowrap;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

body.auth-v2-body .auth-method-tab svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

body.auth-v2-body .auth-method-tab:hover,
body.auth-v2-body .auth-method-tab:focus-visible {
    border-color: rgba(155, 89, 53, 0.3);
    color: var(--auth-copper-dark);
    outline: none;
}

body.auth-v2-body .auth-method-tab.is-active {
    border-color: rgba(155, 89, 53, 0.18);
    background: rgba(255, 250, 244, 0.92);
    color: var(--auth-copper-dark);
    box-shadow: 0 5px 12px rgba(106, 54, 34, 0.08);
}

body.auth-v2-body .auth-form[hidden] {
    display: none;
}

body.auth-v2-body .auth-form {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

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

body.auth-v2-body .auth-field {
    min-width: 0;
    margin-bottom: 13px;
}

body.auth-v2-body .auth-input-shell {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 58px;
    align-items: center;
    border: 1px solid var(--auth-line);
    border-radius: 15px;
    background: rgba(255, 253, 249, 0.76);
    transition: border-color 170ms ease, box-shadow 170ms ease, background 170ms ease, transform 170ms ease;
}

body.auth-v2-body .auth-input-shell:focus-within {
    border-color: rgba(155, 89, 53, 0.88);
    background: #fffdf9;
    box-shadow:
        0 0 0 3px rgba(228, 173, 104, 0.2),
        0 8px 22px rgba(102, 53, 35, 0.08);
}

body.auth-v2-body .auth-field.has-error .auth-input-shell {
    border-color: rgba(168, 61, 50, 0.72);
    box-shadow: 0 0 0 3px rgba(168, 61, 50, 0.1);
}

body.auth-v2-body .auth-field.has-success .auth-input-shell {
    border-color: rgba(67, 132, 86, 0.48);
}

body.auth-v2-body .auth-field-icon {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    margin-inline-start: 14px;
    fill: none;
    stroke: #9d7a61;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.65;
    pointer-events: none;
}

body.auth-v2-body .auth-input-shell input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 56px;
    padding: 22px 13px 7px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--auth-ink);
    font-size: 0.93rem;
    line-height: 1.4;
    text-overflow: ellipsis;
}

body.auth-v2-body .auth-input-shell input::placeholder {
    color: transparent;
}

body.auth-v2-body .auth-input-shell label {
    position: absolute;
    top: 50%;
    inset-inline-start: 46px;
    max-width: calc(100% - 64px);
    inset-inline-end: 52px;
    overflow: hidden;
    color: #987f70;
    font-size: 0.84rem;
    line-height: 1.3;
    pointer-events: none;
    text-overflow: ellipsis;
    transform: translateY(-50%);
    transform-origin: center;
    transition: color 160ms ease, font-size 160ms ease, top 160ms ease, transform 160ms ease;
    white-space: nowrap;
}

body.auth-v2-body .auth-input-shell input:focus ~ label,
body.auth-v2-body .auth-input-shell input:not(:placeholder-shown) ~ label,
body.auth-v2-body .auth-input-shell input:-webkit-autofill ~ label {
    top: 9px;
    color: var(--auth-copper-dark);
    font-size: 0.67rem;
    font-weight: 800;
    transform: translateY(0);
}

body.auth-v2-body .auth-input-shell:focus-within .auth-field-icon {
    stroke: var(--auth-copper);
}

body.auth-v2-body .auth-password-toggle {
    display: inline-grid;
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    place-items: center;
    margin-inline-end: 9px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #9d7a61;
    cursor: pointer;
}

body.auth-v2-body .auth-password-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.65;
}

body.auth-v2-body .auth-password-toggle:hover,
body.auth-v2-body .auth-password-toggle:focus-visible,
body.auth-v2-body .auth-password-toggle.is-visible {
    background: rgba(155, 89, 53, 0.11);
    color: var(--auth-copper-dark);
    outline: none;
}

body.auth-v2-body .auth-phone-shell {
    direction: ltr;
}

body.auth-v2-body .auth-phone-shell .auth-field-icon {
    margin-inline: 14px 10px;
}

body.auth-v2-body .auth-inline-prefix {
    display: inline-flex;
    min-width: 35px;
    align-items: center;
    justify-content: center;
    padding-inline-end: 9px;
    border-inline-end: 1px solid rgba(121, 74, 45, 0.16);
    color: #9a785f;
    direction: ltr;
    font-family: Arial, sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
}

body.auth-v2-body .auth-phone-shell input {
    padding-inline-start: 11px;
    text-align: left;
}

body.auth-v2-body .auth-phone-shell label {
    inset-inline-start: 104px;
    inset-inline-end: 12px;
    max-width: calc(100% - 116px);
    direction: rtl;
    text-align: start;
}

html[dir="ltr"] body.auth-v2-body .auth-phone-shell label {
    direction: ltr;
}

body.auth-v2-body .auth-field-help,
body.auth-v2-body .auth-password-help {
    min-height: 20px;
    margin: 5px 4px 0;
    color: #927b6d;
    font-size: 0.69rem;
    line-height: 1.65;
}

body.auth-v2-body .auth-field-error {
    min-height: 19px;
    margin: 3px 4px 0;
    overflow-wrap: anywhere;
    color: var(--auth-error);
    font-size: 0.7rem;
    line-height: 1.55;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-2px);
    transition: opacity 150ms ease, visibility 150ms ease, transform 150ms ease;
}

body.auth-v2-body .auth-field-error.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

body.auth-v2-body .auth-form-meta {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 1px 3px 18px;
    color: #987e6f;
    font-size: 0.69rem;
    line-height: 1.6;
}

body.auth-v2-body .auth-form-meta span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.auth-v2-body .auth-form-meta a,
body.auth-v2-body .auth-v2-footer a,
body.auth-v2-body .auth-terms-row a {
    color: var(--auth-copper-dark);
    font-weight: 800;
    text-decoration: none;
}

body.auth-v2-body .auth-form-meta a:hover,
body.auth-v2-body .auth-form-meta a:focus-visible,
body.auth-v2-body .auth-v2-footer a:hover,
body.auth-v2-body .auth-v2-footer a:focus-visible,
body.auth-v2-body .auth-terms-row a:hover,
body.auth-v2-body .auth-terms-row a:focus-visible {
    color: var(--auth-copper);
    text-decoration: underline;
    outline: none;
}

body.auth-v2-body .auth-form-note {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 9px;
    margin: 0 2px 18px;
    padding: 11px 12px;
    border: 1px solid rgba(201, 139, 83, 0.2);
    border-radius: 13px;
    background: rgba(228, 173, 104, 0.1);
    color: #856b58;
}

body.auth-v2-body .auth-form-note svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    margin-top: 2px;
    fill: none;
    stroke: var(--auth-copper);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
}

body.auth-v2-body .auth-form-note p {
    min-width: 0;
    margin: 0;
    font-size: 0.7rem;
    line-height: 1.75;
}

body.auth-v2-body .auth-password-strength {
    margin: 0 3px 0;
}

body.auth-v2-body .auth-password-strength .password-strength-track {
    height: 7px;
    background: rgba(129, 94, 72, 0.17);
}

body.auth-v2-body .auth-password-strength .password-strength-fill {
    background: linear-gradient(90deg, #a83d32, #d39842, #4b8d5c);
}

body.auth-v2-body .auth-password-strength small {
    min-height: 19px;
    margin-top: 5px;
    color: #927b6d;
    font-size: 0.69rem;
}

body.auth-v2-body .auth-terms-row {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 9px;
    margin: 8px 3px 0;
    color: #806b5d;
    font-size: 0.72rem;
    line-height: 1.75;
}

body.auth-v2-body .auth-terms-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin: 2px 0 0;
    accent-color: var(--auth-copper);
}

body.auth-v2-body .auth-terms-row span {
    min-width: 0;
}

body.auth-v2-body .auth-terms-links {
    display: inline;
    margin-inline-start: 3px;
    white-space: nowrap;
}

body.auth-v2-body .auth-terms-error {
    min-height: 19px;
    margin-top: 2px;
}

body.auth-v2-body .auth-form-actions {
    margin-top: 16px;
}

body.auth-v2-body .auth-v2-card .auth-submit {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 56px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 18px;
    border: 1px solid rgba(255, 220, 172, 0.2);
    border-radius: 15px;
    background: linear-gradient(135deg, #bd7843 0%, #965330 52%, #713721 100%);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--auth-primary-button-color, #bd7843) 78%, #fff 22%) 0%,
        var(--auth-primary-button-color, #965330) 52%,
        color-mix(in srgb, var(--auth-primary-button-color, #713721) 78%, #000 22%) 100%
    );
    box-shadow:
        0 13px 24px rgba(112, 54, 33, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    color: var(--auth-primary-button-text-color, #fffaf4);
    font-size: 0.91rem;
    font-weight: 900;
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

body.auth-v2-body .auth-submit-label {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

body.auth-v2-body .auth-submit:hover {
    filter: saturate(1.08) brightness(1.04);
    box-shadow:
        0 16px 30px rgba(112, 54, 33, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

body.auth-v2-body .auth-submit:active {
    box-shadow: 0 7px 14px rgba(112, 54, 33, 0.22);
    transform: translateY(0);
}

body.auth-v2-body .auth-submit:focus-visible {
    outline: 3px solid rgba(228, 173, 104, 0.45);
    outline-offset: 3px;
}

body.auth-v2-body .auth-submit:disabled {
    cursor: wait;
    opacity: 0.82;
    transform: none;
}

body.auth-v2-body .auth-spinner {
    display: none;
    width: 17px;
    height: 17px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: auth-v2-spin 700ms linear infinite;
}

body.auth-v2-body .auth-submit[data-auth-loading="1"] .auth-spinner {
    display: inline-block;
}

@keyframes auth-v2-spin {
    to {
        transform: rotate(360deg);
    }
}

body.auth-v2-body .auth-v2-footer {
    margin-top: 22px;
    text-align: center;
}

body.auth-v2-body .auth-switch-prompt {
    margin: 0;
    color: #816d60;
    font-size: 0.78rem;
    line-height: 1.7;
}

body.auth-v2-body .auth-legal-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    color: #a48b7b;
    font-size: 0.67rem;
}

body.auth-v2-body .auth-legal-links a {
    color: inherit;
    font-weight: 700;
}

@media (max-width: 640px) {
    body.auth-v2-body .auth-v2-page {
        align-items: flex-start;
        padding-top: max(18px, env(safe-area-inset-top));
        padding-bottom: max(24px, env(safe-area-inset-bottom));
    }

    body.auth-v2-body .auth-v2-card,
    body.auth-v2-body .auth-v2-card-wide {
        max-width: 100%;
        border-radius: 24px;
    }

    body.auth-v2-body .auth-v2-topline {
        margin-bottom: 16px;
    }

    body.auth-v2-body .auth-form-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    body.auth-v2-body .auth-input-shell input {
        font-size: 1rem;
    }

    body.auth-v2-body .auth-field-error {
        min-height: 2.8em;
    }
}

@media (max-width: 380px) {
    body.auth-v2-body .auth-v2-page {
        padding-inline: 12px;
    }

    body.auth-v2-body .auth-v2-card {
        padding: 18px 15px 20px;
        border-radius: 21px;
    }

    body.auth-v2-body .auth-v2-heading h1 {
        font-size: 1.42rem;
    }

    body.auth-v2-body .auth-v2-heading p {
        font-size: 0.81rem;
    }

    body.auth-v2-body .auth-route-tab {
        min-height: 42px;
        padding-inline: 8px;
        font-size: 0.83rem;
    }

    body.auth-v2-body .auth-method-tab {
        gap: 5px;
        padding-inline: 6px;
        font-size: 0.73rem;
    }

    body.auth-v2-body .auth-method-tab svg {
        width: 15px;
        height: 15px;
        flex-basis: 15px;
    }

    body.auth-v2-body .auth-form-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    body.auth-v2-body .auth-form-meta span {
        max-width: 100%;
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.auth-v2-body *,
    body.auth-v2-body *::before,
    body.auth-v2-body *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

html[data-theme="dark"] body.auth-v2-body .auth-v2-card {
    border-color: rgba(236, 185, 118, 0.24);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.06), transparent 32%),
        linear-gradient(160deg, rgba(51, 30, 22, 0.98), rgba(34, 19, 14, 0.98));
    color: #f9ede3;
}

html[data-theme="dark"] body.auth-v2-body .auth-v2-heading h1,
html[data-theme="dark"] body.auth-v2-body .auth-input-shell input {
    color: #fff4e9;
}

html[data-theme="dark"] body.auth-v2-body .auth-v2-heading p,
html[data-theme="dark"] body.auth-v2-body .auth-switch-prompt,
html[data-theme="dark"] body.auth-v2-body .auth-form-meta,
html[data-theme="dark"] body.auth-v2-body .auth-field-help,
html[data-theme="dark"] body.auth-v2-body .auth-password-strength small,
html[data-theme="dark"] body.auth-v2-body .auth-terms-row,
html[data-theme="dark"] body.auth-v2-body .auth-legal-links {
    color: #cdb8aa;
}

html[data-theme="dark"] body.auth-v2-body .auth-input-shell,
html[data-theme="dark"] body.auth-v2-body .auth-method-tab.is-active {
    background: rgba(42, 24, 18, 0.88);
}

html[data-theme="dark"] body.auth-v2-body .auth-input-shell:focus-within {
    background: rgba(52, 29, 21, 0.98);
}

html[data-theme="dark"] body.auth-v2-body .auth-route-tabs,
html[data-theme="dark"] body.auth-v2-body .auth-method-tabs {
    background: rgba(255, 210, 159, 0.07);
}

html[data-theme="dark"] body.auth-v2-body .auth-method-tab {
    color: #c5aa98;
}

/*
 * Mobile application shell
 * ------------------------
 * On phones the authenticated platform behaves like an installed app:
 * compact top chrome, a floating bottom tab bar, thumb-sized controls and
 * horizontally scrollable dashboard summaries. Desktop layout is unchanged.
 */
@media (max-width: 760px) {
    html:has(.dashboard-shell-body) {
        min-height: 100%;
        background: var(--bg);
        overscroll-behavior-y: none;
    }

    .dashboard-shell-body {
        --dashboard-mobile-gutter: 12px;
        --dashboard-bottom-nav-height: 78px;
        min-height: 100dvh;
        padding-bottom: calc(
            var(--dashboard-bottom-nav-height) + env(safe-area-inset-bottom) + 10px
        );
        overflow-x: hidden;
        background:
            radial-gradient(
                circle at 50% -10%,
                color-mix(in srgb, var(--accent) 8%, transparent),
                transparent 34rem
            ),
            var(--bg);
        overscroll-behavior-y: contain;
        -webkit-tap-highlight-color: transparent;
    }

    .dashboard-site-header {
        min-height: calc(62px + env(safe-area-inset-top));
        padding: max(8px, env(safe-area-inset-top)) var(--dashboard-mobile-gutter) 8px;
        border-bottom-color: color-mix(in srgb, var(--line) 62%, transparent);
        background: color-mix(in srgb, var(--bg) 86%, transparent);
        box-shadow: 0 8px 24px rgba(52, 29, 20, 0.07);
        -webkit-backdrop-filter: blur(22px) saturate(145%);
        backdrop-filter: blur(22px) saturate(145%);
    }

    .dashboard-site-header .nav {
        grid-template-columns: minmax(0, 1fr) 44px;
        grid-template-areas:
            "brand toggle"
            "context context"
            "actions actions";
        gap: 0 10px;
    }

    .dashboard-site-header .brand {
        justify-self: start;
        gap: 7px;
        font-size: 0.94rem;
    }

    .dashboard-site-header .brand-mark {
        width: 38px;
        height: 38px;
    }

    .dashboard-site-header .dashboard-header-context {
        display: grid;
        position: absolute;
        inset-inline-start: 57px;
        top: max(33px, calc(env(safe-area-inset-top) + 25px));
        max-width: calc(100vw - 126px);
        pointer-events: none;
    }

    .dashboard-site-header .dashboard-header-context strong {
        max-width: 100%;
        color: var(--muted);
        font-size: 0.66rem;
        font-weight: 700;
    }

    .dashboard-mobile-header-toggle {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        box-shadow: 0 5px 14px rgba(52, 29, 20, 0.06);
    }

    .dashboard-site-header .nav-links,
    .dashboard-site-header .nav-links.is-mobile-open {
        position: fixed;
        z-index: 1080;
        top: calc(64px + env(safe-area-inset-top));
        right: var(--dashboard-mobile-gutter);
        left: var(--dashboard-mobile-gutter);
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        width: auto;
        padding: 12px;
        border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
        border-radius: 20px;
        background: color-mix(in srgb, var(--surface) 96%, transparent);
        box-shadow: 0 18px 55px rgba(38, 20, 14, 0.2);
        -webkit-backdrop-filter: blur(24px) saturate(145%);
        backdrop-filter: blur(24px) saturate(145%);
    }

    .dashboard-site-header .nav-links {
        display: none;
    }

    .dashboard-site-header .nav-links.is-mobile-open {
        display: grid;
    }

    .dashboard-site-header .nav-links > .nav-user,
    .dashboard-site-header .nav-links > .dashboard-wallet-button {
        min-height: 44px;
        height: 44px;
        border-radius: 13px;
    }

    .dashboard-site-header .language-switcher-toggle,
    .dashboard-site-header .notification-toggle,
    .dashboard-site-header .dashboard-settings-button,
    .dashboard-site-header .theme-toggle,
    .dashboard-site-header .logout-button {
        min-height: 44px;
        height: 44px;
        border-radius: 13px;
    }

    .dashboard-site-header .notification-dropdown {
        top: calc(66px + env(safe-area-inset-top));
        right: var(--dashboard-mobile-gutter);
        left: var(--dashboard-mobile-gutter);
        max-height: calc(100dvh - 160px - env(safe-area-inset-bottom));
        border-radius: 20px;
    }

    .dashboard-app-shell {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 12px var(--dashboard-mobile-gutter) 20px;
    }

    .dashboard-app-shell.is-admin-view {
        padding-top: 8px;
    }

    .dashboard-view {
        scroll-margin-top: calc(70px + env(safe-area-inset-top));
    }

    .dashboard-section-tabs {
        position: sticky;
        z-index: 30;
        top: calc(62px + env(safe-area-inset-top));
        margin: -2px 0 12px;
        border-color: transparent !important;
        background: color-mix(in srgb, var(--bg) 90%, transparent) !important;
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
    }

    .dashboard-redesign {
        /* Keep the first navigation/toolbar separated from the sticky header. */
        padding-top: 12px;
    }

    .dashboard-redesign .dashboard-hero-modern {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        margin-bottom: 12px;
        padding: 18px 16px;
        border-radius: 22px;
        box-shadow: 0 16px 38px rgba(70, 39, 25, 0.18);
    }

    .dashboard-redesign .dashboard-hero-modern h1 {
        display: block;
        margin-bottom: 6px;
        font-size: clamp(1.18rem, 5.6vw, 1.55rem);
        line-height: 1.5;
    }

    .dashboard-redesign .dashboard-hero-modern h1 span {
        display: block;
        margin-top: 2px;
        font-size: 0.55em;
    }

    .dashboard-hero-kicker {
        margin-bottom: 5px;
        font-size: 0.67rem;
    }

    .dashboard-hero-actions {
        margin-top: 8px;
    }

    .dashboard-hero-text-link {
        justify-content: flex-start;
        width: auto;
        font-size: 0.72rem;
    }

    .dashboard-hero-profile {
        display: grid;
        grid-template-columns: 1fr;
        min-width: 60px;
        gap: 5px;
        justify-items: center;
        text-align: center;
    }

    .dashboard-hero-profile > div:last-child {
        display: none;
    }

    .dashboard-hero-avatar-wrap .avatar-large {
        width: 58px;
        height: 58px;
        border-width: 3px;
    }

    .dashboard-redesign .dashboard-status-strip,
    .dashboard-insights-grid {
        display: flex;
        grid-template-columns: none;
        gap: 10px;
        margin-inline: calc(var(--dashboard-mobile-gutter) * -1);
        padding: 1px var(--dashboard-mobile-gutter) 8px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-padding-inline: var(--dashboard-mobile-gutter);
        scroll-snap-type: inline mandatory;
        scrollbar-width: none;
    }

    .dashboard-redesign .dashboard-status-strip::-webkit-scrollbar,
    .dashboard-insights-grid::-webkit-scrollbar {
        display: none;
    }

    .dashboard-status-card,
    .dashboard-insight-card {
        flex: 0 0 min(76vw, 270px);
        min-height: 74px;
        padding: 13px;
        border-radius: 18px;
        scroll-snap-align: start;
    }

    .dashboard-daily-layout {
        gap: 10px;
        margin-bottom: 24px;
    }

    .dashboard-grid-modern {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .dashboard-card-modern {
        min-height: 170px;
        border-radius: 19px;
    }

    .dashboard-card-modern .dashboard-card-link {
        min-height: 166px;
        padding: 20px 14px 14px;
    }

    .dashboard-card-modern .dashboard-card-tools {
        top: 10px;
        inset-inline-start: 10px;
    }

    .dashboard-card-icon {
        width: 39px;
        height: 39px;
        border-radius: 12px;
        font-size: 1.15rem;
    }

    .dashboard-card-modern h2 {
        margin-top: 9px;
        font-size: 0.94rem;
    }

    .dashboard-card-modern p {
        font-size: 0.69rem;
        line-height: 1.65;
    }

    .dashboard-card-badge {
        max-width: calc(100% - 30px);
        overflow: hidden;
        font-size: 0.6rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dashboard-card-cta {
        font-size: 0.67rem;
    }

    .dashboard-view-content :is(input, select, textarea) {
        font-size: max(16px, 1rem);
    }

    .dashboard-view-content :is(.btn, button, [role="button"]),
    .dashboard-view-back {
        touch-action: manipulation;
    }

    .dashboard-view-content .table-wrap {
        margin-inline: 0;
        overflow-x: auto;
        border-radius: 16px;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .dashboard-view-content :is(.panel, .card) {
        border-radius: clamp(16px, 4vw, 21px);
    }

    .dashboard-bottom-nav {
        right: 8px;
        bottom: max(8px, env(safe-area-inset-bottom));
        left: 8px;
        width: auto;
        min-height: 68px;
        padding: 5px;
        border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
        border-radius: 22px;
        background: color-mix(in srgb, var(--surface) 94%, transparent);
        box-shadow: 0 12px 38px rgba(38, 20, 14, 0.2);
        -webkit-backdrop-filter: blur(24px) saturate(150%);
        backdrop-filter: blur(24px) saturate(150%);
    }

    .dashboard-nav-item {
        min-height: 56px;
        padding: 5px 2px 4px;
        border-radius: 17px;
        font-size: clamp(0.55rem, 2.5vw, 0.65rem);
        touch-action: manipulation;
    }

    .dashboard-nav-item.is-active {
        background: color-mix(in srgb, var(--accent) 16%, var(--surface));
    }

    .dashboard-nav-item.is-active::before {
        top: auto;
        bottom: 3px;
        width: 18px;
        height: 3px;
    }

    .dashboard-nav-icon {
        width: 28px;
        height: 26px;
        font-size: 1.05rem;
        transition: transform 160ms ease;
    }

    .dashboard-nav-item.is-active .dashboard-nav-icon {
        transform: translateY(-1px) scale(1.08);
    }
}

@media (max-width: 380px) {
    .dashboard-shell-body {
        --dashboard-mobile-gutter: 9px;
    }

    .dashboard-grid-modern {
        gap: 8px;
    }

    .dashboard-card-modern .dashboard-card-link {
        padding-inline: 11px;
    }

    .dashboard-card-modern p {
        -webkit-line-clamp: 1;
    }

    .dashboard-nav-item {
        font-size: 0.53rem;
    }
}

/* Immediate matchmaking board state: keep the board visible while FIFO
 * matching completes, with a dark ParokLand gaming overlay. */

@keyframes parokland-match-spin {
    to { transform: rotate(360deg); }
}

/* Mobile-first room chrome: a compact, thumb-friendly close control keeps
 * the board unobstructed on narrow screens. */

/* Final room geometry overrides: keep the board flush with the viewport. */

/* Center dice and controls on the board's middle bar. */

/* Keep every authenticated header control on the same vertical rhythm. */
.dashboard-site-header {
    --dashboard-header-control-height: 40px;
}

.dashboard-site-header .nav-links > .dashboard-wallet-button,
.dashboard-site-header .nav-links > .notification-widget,
.dashboard-site-header .nav-links > .language-switcher,
.dashboard-site-header .nav-links > .theme-toggle,
.dashboard-site-header .nav-links > .dashboard-settings-button,
.dashboard-site-header .nav-links > .dashboard-admin-button,
.dashboard-site-header .nav-links > .logout-button {
    height: var(--dashboard-header-control-height);
    min-height: var(--dashboard-header-control-height);
    box-sizing: border-box;
    align-self: center;
}

.dashboard-site-header .nav-links > .notification-widget {
    display: inline-flex;
}

.dashboard-site-header .nav-links > .notification-widget .notification-toggle,
.dashboard-site-header .nav-links > .language-switcher .language-switcher-toggle {
    height: var(--dashboard-header-control-height);
    min-height: var(--dashboard-header-control-height);
    box-sizing: border-box;
}

.dashboard-site-header .nav-links > .dashboard-wallet-button {
    padding-block: 0;
}

.dashboard-site-header .nav-links > .theme-toggle,
.dashboard-site-header .nav-links > .dashboard-settings-button,
.dashboard-site-header .nav-links > .dashboard-admin-button,
.dashboard-site-header .nav-links > .logout-button {
    width: var(--dashboard-header-control-height);
    padding-block: 0;
}

/* Public profile modal shared by friends, activity feeds and leaderboards. */
/* Public player profile: compact dialog, shared theme tokens and RTL layout. */
.public-profile-modal {
    position: fixed;
    z-index: 1100;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
}
.public-profile-modal [hidden], .public-profile-modal[hidden] {
    display: none !important;
}
.public-profile-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(12 15 23 / 62%);
    -webkit-backdrop-filter: blur(12px) saturate(82%);
    backdrop-filter: blur(12px) saturate(82%);
}
.public-profile-dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(100%, 560px);
    max-height: calc(100dvh - 48px);
    min-height: 280px;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 24px 80px rgb(0 0 0 / 25%);
    animation: public-profile-dialog-in 180ms ease both;
}
.public-profile-scroll {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    margin: 0 8px 14px;
    padding: 0 20px 10px;
}
.public-profile-topline {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    min-height: 76px;
    margin: 0;
    padding: 20px 28px;
    padding-inline-end: 82px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
    color: var(--muted);
    font-size: .8rem;
    font-weight: 600;
}
.public-profile-topline-mark {
    color: var(--primary);
    font-size: 1.3rem;
}
.public-profile-close {
    position: absolute;
    z-index: 3;
    top: 16px;
    inset-inline-end: 20px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 1.5rem;
    cursor: pointer;
}
.public-profile-close:hover {
    background: var(--surface-soft);
    color: var(--primary);
}
.public-profile-dialog :focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}
.public-profile-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 26px 0 20px;
}
.public-profile-avatar {
    display: grid;
    place-items: center;
    text-transform: uppercase;
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    overflow: hidden;
    border: 4px solid var(--surface);
    outline: 1px solid var(--line);
    border-radius: 24px;
    background: var(--surface-soft);
    color: var(--primary);
    font-size: 2.5rem;
    font-weight: 800;
}
.public-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.public-profile-identity {
    min-width: 0;
}
.identity-verified-badge,
.public-profile-identity .identity-verified-badge {
    display: inline-flex;
    width: 1.25em;
    height: 1.25em;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #1684e8;
    color: #fff !important;
    font-family: Arial, sans-serif;
    font-size: .8em !important;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
    margin-inline-start: .3em;
    flex: none;
}
.identity-verified-badge[hidden] { display: none; }
.identity-checklist-items {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}
.identity-checklist-items li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--border, #ddd);
}
.public-profile-identity h2 {
    margin: 0 0 7px;
    font-size: clamp(1.15rem, 3vw, 1.5rem);
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.public-profile-identity span {
    display: inline-block;
    color: var(--muted);
    font-size: .85rem;
    overflow-wrap: anywhere;
}
.public-profile-bio {
    margin: 0 0 22px;
    color: var(--muted);
    line-height: 1.9;
    font-size: .9rem;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.public-profile-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 18px 0;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface-soft);
}
.public-profile-stat {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 0 8px;
    text-align: center;
}
.public-profile-stat + .public-profile-stat {
    border-inline-start: 1px solid var(--line);
}
.public-profile-stat strong {
    color: var(--ink);
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}
.public-profile-stat span {
    color: var(--muted);
    font-size: .75rem;
}
.public-profile-section {
    margin-top: 26px;
}
.public-profile-section h3 {
    margin: 0 0 12px;
    font-size: .9rem;
    font-weight: 700;
}
.public-profile-game-stats {
    display: grid;
    gap: 0;
}
.public-profile-game-stat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(72px, auto);
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}
.public-profile-game-stat:last-child {
    border-bottom: 0;
}
.public-profile-game-stat > span {
    font-size: .85rem;
}
.public-profile-game-stat strong {
    color: var(--primary);
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
}
.public-profile-game-stat small {
    padding: 4px 9px;
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--muted);
    text-align: center;
    font-size: .75rem;
}
.public-profile-game-stat small:empty {
    visibility: hidden;
}
.public-profile-medals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.public-profile-medal {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
}
.public-profile-medal > span {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--surface-soft);
    color: var(--primary);
    font-size: 1.2rem;
}
.public-profile-medal div {
    display: grid;
    gap: 5px;
    min-width: 0;
    overflow-wrap: anywhere;
}
.public-profile-medal strong {
    font-size: .8rem;
}
.public-profile-medal small {
    color: var(--muted);
    font-size: .74rem;
    line-height: 1.7;
}
.public-profile-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 16px;
    border: 1px dashed var(--line);
    border-radius: 14px;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.8;
}
.public-profile-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}
.public-profile-actions:has(> :not([hidden])) {
    padding-top: 20px;
    border-top: 1px solid var(--line);
}
.public-profile-actions .btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    border-radius: 14px;
}
.public-profile-status {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: .85rem;
    line-height: 1.8;
    text-align: center;
}
.public-profile-report {
    padding: 22px 0 8px;
}
.public-profile-report-heading {
    display: grid;
    gap: 16px;
    margin-bottom: 14px;
}
.public-profile-report-heading h2 {
    margin: 3px 0 0;
    font-size: 1.12rem;
    line-height: 1.7;
}
.public-profile-report-kicker {
    color: var(--primary);
    font-size: .74rem;
    font-weight: 800;
}
.public-profile-report-back {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}
.public-profile-report-back:hover {
    color: var(--primary);
}
.public-profile-report-note {
    margin: 0 0 18px;
    padding: 11px 13px;
    border-inline-start: 3px solid var(--primary);
    border-radius: 10px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.9;
}
.public-profile-report-form {
    display: grid;
    gap: 16px;
}
.public-profile-report-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.public-profile-report-field {
    display: grid;
    gap: 7px;
    min-width: 0;
    color: var(--ink);
    font-size: .8rem;
    font-weight: 700;
}
.public-profile-report-field select,
.public-profile-report-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-weight: 400;
}
.public-profile-report-field select {
    min-height: 46px;
    padding: 8px 10px;
}
.public-profile-report-field textarea {
    min-height: 104px;
    padding: 11px 12px;
    resize: vertical;
    line-height: 1.8;
}
.public-profile-report-field small {
    color: var(--muted);
    font-size: .7rem;
    font-weight: 400;
}
.public-profile-report-evidence {
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: var(--surface-soft);
}
.public-profile-report-evidence summary {
    padding: 11px 13px;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}
.public-profile-report-evidence summary span {
    font-size: .68rem;
    font-weight: 400;
}
.public-profile-report-evidence[open] summary {
    border-bottom: 1px solid var(--line);
}
.public-profile-report-evidence .public-profile-report-field {
    padding: 12px;
}
.public-profile-report-feedback {
    padding: 11px 13px;
    border-radius: 10px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.8;
}
.public-profile-report-feedback.is-error {
    color: var(--danger);
}
.public-profile-report-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}
.public-profile-report-actions .btn {
    min-height: 46px;
    justify-content: center;
    border-radius: 12px;
}
.public-profile-report-success {
    display: grid;
    justify-items: center;
    gap: 9px;
    padding: 34px 18px;
    text-align: center;
}
.public-profile-report-success > span {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--success) 14%, transparent);
    color: var(--success);
    font-size: 1.5rem;
    font-weight: 800;
}
.public-profile-report-success strong {
    font-size: 1rem;
}
.public-profile-report-success p {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: .82rem;
}
.public-profile-loading {
    min-height: 220px;
    margin-top: 0;
    color: var(--muted);
}
.public-profile-scroll > .public-profile-loading {
    position: relative;
    inset: auto;
}
.public-profile-error {
    margin-top: 24px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--danger);
    background: var(--surface-soft);
    line-height: 1.8;
    text-align: center;
}
.public-profile-retry {
    display: block;
    min-height: 44px;
    margin: 16px auto 0;
}
[data-public-profile-user-id] {
    cursor: pointer;
}
[data-public-profile-user-id]:hover, [data-public-profile-user-id]:focus-visible {
    color: var(--primary);
}
@keyframes public-profile-dialog-in {
    from {
    opacity: 0;
    transform: translateY(12px);
} to {
    opacity: 1;
    transform: translateY(0);
} }
@media (max-width: 760px) {
 .public-profile-modal {
    place-items: center;
    padding:
        calc(14px + env(safe-area-inset-top))
        calc(12px + env(safe-area-inset-right))
        calc(14px + env(safe-area-inset-bottom))
        calc(12px + env(safe-area-inset-left));
}
 .public-profile-dialog {
    width: min(100%, 440px);
    min-height: 0;
    max-height: calc(100vh - 28px);
    max-height: calc(
        100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)
    );
    padding: 0;
    border-radius: 22px;
    box-shadow: 0 24px 70px rgb(0 0 0 / 36%);
}
 .public-profile-topline {
    min-height: 64px;
    padding: 14px 18px;
    padding-inline-end: 68px;
}
 .public-profile-close {
    top: 11px;
    inset-inline-end: 14px;
    width: 40px;
    height: 40px;
}
 .public-profile-scroll {
    margin: 0 6px 10px;
    padding-inline: 12px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}
 .public-profile-hero {
    gap: 14px;
    padding: 18px 0 14px;
}
 .public-profile-avatar {
    flex-basis: 64px;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    font-size: 2rem;
}
 .public-profile-identity h2 {
    margin-bottom: 0;
    font-size: 1.1rem;
}
 .public-profile-bio {
    margin-bottom: 16px;
    font-size: .82rem;
}
 .public-profile-stats {
    padding: 14px 0;
    border-radius: 15px;
}
 .public-profile-stat {
    padding-inline: 5px;
}
 .public-profile-medals {
    grid-template-columns: 1fr;
}
 .public-profile-stat strong {
    font-size: .94rem;
}
 .public-profile-stat span {
    font-size: .68rem;
}
 .public-profile-section {
    margin-top: 20px;
}
 .public-profile-game-stat {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 10px;
    padding: 11px 0;
}
 .public-profile-game-stat small {
    grid-column: 1 / -1;
    justify-self: start;
}
 .public-profile-actions {
    gap: 9px;
    margin-top: 18px;
}
 .public-profile-actions:has(> :not([hidden])) {
    padding-top: 16px;
}
 .public-profile-actions .btn {
    min-height: 44px;
}
 .public-profile-report {
    padding-top: 18px;
}
 .public-profile-report-grid,
 .public-profile-report-actions {
    grid-template-columns: 1fr;
}
 .public-profile-report-actions .btn {
    width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
    .public-profile-dialog {
    animation: none;
} }

/* Full site and database backup management */
.admin-backups-page [data-dashboard-admin-page-content] {
    display: grid;
    gap: 20px;
    width: 100%;
}

.admin-backup-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px 24px;
    overflow: hidden;
}

.admin-backup-hero-copy {
    min-width: 0;
}

.admin-backup-hero-copy h1 {
    margin: 10px 0 8px;
    font-size: clamp(1.25rem, 2vw, 1.8rem);
}

.admin-backup-hero-copy p,
.admin-backup-info-grid p {
    margin: 0;
    color: var(--muted);
    line-height: 1.9;
}

.admin-backup-create {
    min-width: 190px;
}

.admin-backup-create.is-loading {
    cursor: wait;
    opacity: 0.72;
}

.admin-backup-status {
    grid-column: 1 / -1;
    min-height: 24px;
    border-radius: 12px;
    font-size: 0.92rem;
}

.admin-backup-status:empty {
    display: none;
}

.admin-backup-status.is-loading,
.admin-backup-status.is-success,
.admin-backup-status.is-error {
    padding: 10px 12px;
}

.admin-backup-status.is-loading {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.admin-backup-status.is-success {
    color: var(--success);
    background: color-mix(in srgb, var(--success) 10%, transparent);
}

.admin-backup-status.is-error {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.admin-backup-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.admin-backup-info-grid .panel {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
}

.admin-backup-info-grid strong {
    overflow-wrap: anywhere;
}

.admin-backup-list-panel {
    width: 100%;
    min-width: 0;
}

.admin-backup-empty {
    padding: 24px;
    border: 1px dashed var(--border);
    border-radius: 16px;
    color: var(--muted);
    text-align: center;
}

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

.admin-backup-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    transition: border-color 180ms ease, transform 180ms ease;
}

.admin-backup-row:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    transform: translateY(-1px);
}

.admin-backup-file-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.admin-backup-file-copy {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.admin-backup-file-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}

.admin-backup-file-copy span {
    color: var(--muted);
    font-size: 0.88rem;
}

.admin-backup-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 900px) {
    .admin-backup-info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .admin-backup-hero {
        grid-template-columns: 1fr;
    }

    .admin-backup-create {
        width: 100%;
        min-width: 0;
    }

    .admin-backup-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .admin-backup-actions {
        grid-column: 1 / -1;
        width: 100%;
    }

    .admin-backup-actions .btn {
        flex: 1;
    }
}

/* Wallet actions: keep the primary balance controls easy to tap and mobile-safe. */
.wallet-balance-actions {
    gap: 12px;
}

.wallet-balance-actions .btn {
    min-width: 178px;
    min-height: 56px;
    padding: 13px 24px;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 800;
}

@media (max-width: 820px) {
    .wallet-balance-card {
        align-items: stretch;
        flex-direction: column;
        gap: 20px;
    }

    .wallet-balance-copy {
        width: 100%;
        text-align: center;
    }

    .wallet-balance-side {
        width: 100%;
        align-items: stretch;
        justify-items: stretch;
    }

    .wallet-balance-meta {
        width: 100%;
        box-sizing: border-box;
    }

    .wallet-balance-actions {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: initial;
    }

    .wallet-balance-actions .btn {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .wallet-balance-card {
        padding: 24px 20px;
    }

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

    .wallet-balance-actions .btn {
        min-height: 58px;
    }
}
/* Media library */
.admin-media-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.admin-media-view-toggle{display:flex;gap:6px;padding:4px;border-radius:12px;background:color-mix(in srgb,var(--primary) 9%,var(--surface-soft))}.admin-media-view-toggle button,.admin-media-filters a{border:1px solid color-mix(in srgb,var(--primary) 20%,var(--line));background:color-mix(in srgb,var(--surface) 92%,var(--primary));color:var(--ink);font:inherit;font-size:.84rem;font-weight:700;cursor:pointer}.admin-media-view-toggle button{padding:7px 10px;border-radius:9px}.admin-media-view-toggle button.is-active,.admin-media-filters a.is-active{border-color:var(--primary);background:var(--primary);color:#fff;box-shadow:0 5px 14px color-mix(in srgb,var(--primary) 28%,transparent)}.admin-media-grid.is-list{display:flex;flex-direction:column}.admin-media-grid.is-list .admin-media-item{display:grid;grid-template-columns:120px minmax(0,1fr) auto;align-items:center;gap:14px}.admin-media-grid.is-list .admin-media-select{display:contents}.admin-media-grid.is-list .admin-media-select img,.admin-media-grid.is-list .admin-media-select video{grid-row:1/3;width:120px;height:72px}.admin-media-grid.is-list .admin-media-select audio{grid-row:1/3;width:120px}.admin-media-grid.is-list .admin-media-select strong{grid-column:2}.admin-media-grid.is-list .admin-media-select small{grid-column:2}.admin-media-grid.is-list .admin-media-item form{grid-column:3;grid-row:1/3}.admin-media-select video{width:100%;height:130px;object-fit:cover;border-radius:10px;background:#0f172a}@media(max-width:620px){.admin-media-heading{align-items:flex-start;flex-direction:column}.admin-media-grid.is-list .admin-media-item{grid-template-columns:84px minmax(0,1fr)}.admin-media-grid.is-list .admin-media-select img,.admin-media-grid.is-list .admin-media-select video{width:84px;height:60px}.admin-media-grid.is-list .admin-media-item form{grid-column:1/-1;grid-row:auto}}
.media-library-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:3vw}.media-library-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.7);backdrop-filter:blur(3px)}.media-library-modal-dialog{position:relative;z-index:1;width:min(1180px,96vw);height:min(820px,94vh);background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 25px 80px rgba(0,0,0,.3)}.media-library-modal-dialog iframe{border:0;width:100%;height:100%;background:#fff}.media-library-modal-close{position:absolute;z-index:2;top:8px;left:10px;width:34px;height:34px;border:0;border-radius:50%;background:#fff;color:#334155;font-size:24px;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.admin-media-filters{display:flex;gap:.5rem;margin:1rem 0;flex-wrap:wrap}.admin-media-filters a{padding:.45rem .8rem;border-radius:999px;background:var(--surface-muted,#f1f5f9);text-decoration:none}.admin-media-filters a.is-active{background:var(--primary,#2563eb);color:#fff}.admin-media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem}.admin-media-item{display:flex;flex-direction:column;gap:.5rem;border:1px solid var(--border,#e2e8f0);border-radius:14px;padding:.65rem}.admin-media-select{border:0;background:transparent;cursor:pointer;text-align:inherit;display:flex;flex-direction:column;gap:.4rem;min-width:0}.admin-media-select img{width:100%;height:130px;object-fit:cover;border-radius:10px;background:#f8fafc}.admin-media-select strong,.admin-media-select small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-media-icon{height:130px;display:grid;place-items:center;border-radius:10px;background:#f1f5f9;font-size:3rem;color:#64748b}.admin-media-page .admin-media-filters a{border:1px solid color-mix(in srgb,var(--primary) 20%,var(--line));background:color-mix(in srgb,var(--surface) 92%,var(--primary));color:var(--ink);font-weight:700}.admin-media-page .admin-media-filters a.is-active{border-color:var(--primary);background:var(--primary);color:#fff;box-shadow:0 5px 14px color-mix(in srgb,var(--primary) 28%,transparent)}
.admin-media-library-item{position:relative}.admin-media-delete-form{position:absolute;top:12px;inset-inline-end:12px;z-index:2;opacity:0;transform:translateY(-5px);transition:opacity .18s ease,transform .18s ease}.admin-media-library-item:hover .admin-media-delete-form,.admin-media-library-item:focus-within .admin-media-delete-form{opacity:1;transform:none}.admin-media-delete-button{display:grid;width:38px;height:38px;place-items:center;border:1px solid color-mix(in srgb,var(--danger) 38%,#fff);border-radius:11px;background:color-mix(in srgb,#fff 90%,var(--danger));color:var(--danger);cursor:pointer;box-shadow:0 7px 18px rgba(15,23,42,.18)}.admin-media-delete-button:hover,.admin-media-delete-button:focus-visible{background:var(--danger);color:#fff;outline:none;transform:scale(1.06)}.admin-media-delete-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.admin-media-grid.is-list .admin-media-delete-form{position:static;opacity:1;transform:none;grid-column:3;grid-row:1/3}
.admin-media-heading-actions{display:flex;align-items:center;gap:12px}.admin-media-add-button{display:grid;place-items:center;width:42px;height:42px;padding:0;font-size:1.8rem;line-height:1}.admin-media-delete-form{opacity:1;transform:none}.admin-media-library-item .admin-media-select{padding-inline-end:40px}.media-picker-card.admin-media-library-item > button{padding-inline-end:0}.media-picker-card.admin-media-library-item strong,.media-picker-card.admin-media-library-item small{padding-inline-end:48px}@media(max-width:620px){.admin-media-heading-actions{width:100%;justify-content:space-between}}
.admin-blog-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.36fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.admin-blog-list-panel {
    position: sticky;
    top: 92px;
    max-height: calc(100vh - 112px);
    overflow: auto;
}

.admin-blog-list-heading,
.admin-blog-list-item,
.admin-blog-featured-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.admin-blog-list {
    display: grid;
    gap: 7px;
}

.admin-blog-list-item {
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface-soft);
}

.admin-blog-list-item.is-selected {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.admin-blog-list-item > span:first-child {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.admin-blog-list-item strong,
.admin-blog-list-item small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-blog-list-item small {
    color: var(--muted);
}

.admin-blog-editor,
.admin-blog-settings-grid,
.admin-blog-seo-fields {
    display: grid;
    gap: 14px;
}

.admin-blog-settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-blog-cover-field,
.admin-blog-featured-option {
    grid-column: 1 / -1;
}

.admin-blog-cover-picker {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
}

.admin-blog-cover-preview {
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border: 1px solid color-mix(in srgb, var(--primary) 15%, var(--line));
    border-radius: 13px;
    background: var(--surface);
}

.admin-blog-cover-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-blog-cover-controls {
    display: grid;
    min-width: 0;
    gap: 8px;
}

.admin-blog-cover-controls > small {
    overflow: hidden;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-blog-block-editor {
    display: grid;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    gap: 14px;
    margin-top: 8px;
}

.admin-blog-page,
.admin-blog-editor,
.admin-blog-language-panel {
    min-width: 0;
    max-width: 100%;
}

.admin-blog-block-editor-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.admin-blog-block-editor-heading > div {
    display: grid;
    gap: 4px;
}

.admin-blog-block-editor-heading small,
.admin-blog-block-image-controls small {
    color: var(--muted);
}

.admin-blog-add-toggle {
    flex: 0 0 auto;
}

.admin-blog-add-toggle span {
    font-size: 1.2em;
}

.admin-blog-block-palette {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
    gap: 8px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
    border-radius: 15px;
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.admin-blog-block-palette[hidden] {
    display: none;
}

.admin-blog-block-palette button {
    display: grid;
    min-height: 76px;
    place-items: center;
    gap: 4px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    cursor: pointer;
}

.admin-blog-block-palette button:hover,
.admin-blog-block-palette button:focus-visible {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.admin-blog-block-palette strong {
    color: var(--primary-dark);
    font-size: 1.25rem;
}

.admin-blog-block-palette span {
    font-size: .78rem;
    font-weight: 700;
}

.admin-blog-block-list {
    display: grid;
    min-width: 0;
    gap: 12px;
}

.admin-blog-content-block {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 7px 22px color-mix(in srgb, var(--ink) 6%, transparent);
}

.admin-blog-content-block:focus-within {
    border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 11%, transparent);
}

.admin-blog-content-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
}

.admin-blog-content-block-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

.admin-blog-content-block-identity > span {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 9px;
    background: color-mix(in srgb, var(--accent) 14%, var(--surface));
    color: var(--primary-dark);
    font-weight: 900;
}

.admin-blog-content-block-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 5px;
}

.admin-blog-content-block-actions button {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    cursor: pointer;
}

.admin-blog-content-block-actions button:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--primary-dark);
}

.admin-blog-content-block-actions button[data-blog-block-action="remove"]:hover {
    border-color: var(--danger);
    color: var(--danger);
}

.admin-blog-content-block-actions button:disabled {
    opacity: .35;
    cursor: default;
}

.admin-blog-content-block-body {
    display: grid;
    min-width: 0;
    gap: 12px;
    padding: 14px;
}

.admin-blog-block-field {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.admin-blog-block-field > span {
    font-size: .8rem;
    font-weight: 800;
}

.admin-blog-block-field textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 110px;
    line-height: 1.9;
}

.admin-blog-block-field input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.admin-blog-block-image {
    display: grid;
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    min-width: 0;
    gap: 14px;
    align-items: center;
}

.admin-blog-block-image-preview {
    display: grid;
    overflow: hidden;
    min-height: 140px;
    aspect-ratio: 16 / 10;
    place-items: center;
    border: 1px dashed var(--line);
    border-radius: 13px;
    background: var(--surface-soft);
    color: var(--muted);
}

.admin-blog-block-image-preview img {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.admin-blog-block-image-controls {
    display: grid;
    min-width: 0;
    justify-items: start;
    gap: 10px;
}

.admin-blog-block-image-controls small {
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-blog-block-divider-preview {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    color: var(--muted);
}

.admin-blog-block-divider-preview span {
    height: 1px;
    background: var(--line);
}

.admin-blog-block-empty {
    padding: 30px;
    border: 1px dashed var(--line);
    border-radius: 15px;
    color: var(--muted);
    text-align: center;
}

.admin-blog-featured-option {
    justify-content: flex-start;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface-soft);
}

.admin-blog-featured-option > span {
    display: grid;
}

.admin-blog-featured-option small {
    color: var(--muted);
}

.admin-blog-language-panel textarea {
    resize: vertical;
}

.admin-blog-seo-fields {
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.admin-blog-seo-fields summary {
    cursor: pointer;
    font-weight: 800;
}

.admin-blog-actions {
    position: sticky;
    z-index: 5;
    bottom: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
}

@media (max-width: 900px) {
    .admin-blog-layout {
        grid-template-columns: 1fr;
    }

    .admin-blog-list-panel {
        position: static;
        max-height: 25rem;
    }
}

@media (max-width: 620px) {
    .admin-blog-settings-grid {
        grid-template-columns: 1fr;
    }

    .admin-blog-cover-picker {
        grid-template-columns: 1fr;
    }

    .admin-blog-block-editor-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-blog-block-palette {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 8px;
    }

    .admin-blog-block-image {
        grid-template-columns: 1fr;
    }

    .admin-blog-content-block-head {
        align-items: flex-start;
        padding: 9px 10px;
    }

    .admin-blog-content-block-actions {
        width: 100%;
        justify-content: flex-end;
        padding-top: 8px;
        border-top: 1px solid var(--line);
    }

    .admin-blog-content-block-body {
        padding: 12px;
    }

    .admin-blog-block-image-controls,
    .admin-blog-block-image-controls .btn {
        width: 100%;
    }

    .admin-blog-block-image-controls .btn {
        justify-content: center;
    }
}

/* Blog management is a list; writing happens on admin_blog_editor.php. */
.admin-blog-management-panel {
    display: grid;
    gap: 16px;
}

.admin-blog-management-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.admin-blog-management-heading > div {
    display: grid;
    gap: 5px;
}

.admin-blog-management-list {
    display: grid;
    gap: 10px;
}

.admin-blog-management-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
}

.admin-blog-management-main {
    min-width: 0;
}

.admin-blog-management-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.admin-blog-management-title-row h3 {
    margin: 0;
    font-size: 1.04rem;
}

.admin-blog-management-main > p {
    display: -webkit-box;
    overflow: hidden;
    margin: 6px 0 8px;
    color: var(--muted);
    font-size: .86rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.admin-blog-management-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--muted);
    font-size: .76rem;
}

.admin-blog-management-meta code {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-blog-featured-badge {
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    font-weight: 800;
}

.admin-blog-management-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.admin-blog-management-actions form {
    margin: 0;
}

.admin-blog-empty {
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: 42px 16px;
    border: 1px dashed var(--line);
    border-radius: 14px;
    color: var(--muted);
    text-align: center;
}

.admin-blog-editor-standalone {
    max-width: 980px;
    margin-inline: auto;
}

@media (max-width: 760px) {
    .admin-blog-management-item {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-blog-management-actions {
        justify-content: flex-start;
    }
}

/* Compact authentication spacing; registration can grow beyond the viewport. */
body.auth-login-body,
body.auth-register-body {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

body.auth-login-body .auth-v2-page,
body.auth-register-body .auth-v2-page {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    max-height: 100dvh;
    padding: clamp(8px, 1.8vh, 18px) clamp(10px, 2.5vw, 24px);
    overflow: hidden;
}

/* Registration grows with its fields and regulations on desktop as well as mobile. */
body.auth-register-body {
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
}

body.auth-register-body .auth-v2-page {
    height: auto;
    min-height: 100dvh;
    max-height: none;
    overflow: visible;
}

body.auth-register-body .registration-game-terms .game-terms-scroll {
    max-height: clamp(9rem, 25dvh, 16rem);
}

body.auth-login-body .auth-v2-card,
body.auth-register-body .auth-v2-card {
    padding: clamp(16px, 2.2vh, 24px) clamp(16px, 2.5vw, 28px);
}

body.auth-login-body .auth-v2-topline,
body.auth-register-body .auth-v2-topline {
    margin-bottom: clamp(7px, 1.2vh, 12px);
}

body.auth-login-body .auth-v2-brand,
body.auth-register-body .auth-v2-brand {
    margin-bottom: clamp(6px, 1vh, 10px);
}

body.auth-login-body .auth-v2-brand .auth-brand img,
body.auth-register-body .auth-v2-brand .auth-brand img {
    width: min(var(--auth-logo-width, 180px), 46vw);
    max-height: clamp(88px, 15vh, 128px);
}

body.auth-login-body .auth-v2-brand-caption,
body.auth-register-body .auth-v2-brand-caption {
    margin-top: 3px;
    font-size: 0.62rem;
}

body.auth-login-body .auth-route-tabs,
body.auth-register-body .auth-route-tabs {
    margin-bottom: clamp(8px, 1.4vh, 14px);
}

body.auth-login-body .auth-route-tab,
body.auth-register-body .auth-route-tab {
    min-height: clamp(38px, 5.2vh, 42px);
    padding-block: 6px;
}

body.auth-login-body .auth-v2-heading,
body.auth-register-body .auth-v2-heading {
    margin-bottom: clamp(7px, 1.3vh, 13px);
}

body.auth-login-body .auth-v2-heading h1,
body.auth-register-body .auth-v2-heading h1 {
    margin-block: 4px 2px;
    font-size: clamp(1.32rem, 3vh, 1.75rem);
    line-height: 1.25;
}

body.auth-login-body .auth-v2-heading p,
body.auth-register-body .auth-v2-heading p {
    font-size: 0.8rem;
    line-height: 1.55;
}

body.auth-login-body .auth-server-alert,
body.auth-register-body .auth-server-alert {
    max-height: min(64px, 9vh);
    margin-bottom: 8px;
    padding-block: 7px;
}

body.auth-login-body .auth-method-tabs {
    margin-bottom: clamp(7px, 1.2vh, 12px);
}

body.auth-login-body .auth-method-tab {
    min-height: clamp(38px, 5.2vh, 42px);
    padding-block: 5px;
}

body.auth-login-body .auth-field,
body.auth-register-body .auth-field {
    margin-bottom: clamp(4px, 0.8vh, 8px);
}

body.auth-login-body .auth-input-shell,
body.auth-register-body .auth-input-shell {
    min-height: clamp(48px, 6.5vh, 54px);
}

body.auth-login-body .auth-input-shell input,
body.auth-register-body .auth-input-shell input {
    min-height: clamp(46px, 6.3vh, 52px);
}

body.auth-login-body .auth-field-error,
body.auth-register-body .auth-field-error {
    max-height: 0;
    min-height: 0;
    margin-top: 0;
    overflow: hidden;
}

body.auth-login-body .auth-field-error.is-visible,
body.auth-register-body .auth-field-error.is-visible {
    max-height: 3.2em;
    margin-top: 3px;
}

body.auth-login-body .auth-form-meta {
    margin-bottom: clamp(7px, 1.2vh, 12px);
}

body.auth-login-body .auth-form-note {
    margin-bottom: clamp(7px, 1.2vh, 12px);
    padding-block: 8px;
}

body.auth-login-body .auth-form-actions,
body.auth-register-body .auth-form-actions {
    margin-top: clamp(7px, 1.2vh, 12px);
}

body.auth-login-body .auth-v2-card .auth-submit,
body.auth-register-body .auth-v2-card .auth-submit {
    min-height: clamp(46px, 6.2vh, 52px);
    padding-block: 9px;
}

body.auth-login-body .auth-v2-footer,
body.auth-register-body .auth-v2-footer {
    margin-top: clamp(8px, 1.4vh, 14px);
}

body.auth-login-body .auth-legal-links,
body.auth-register-body .auth-legal-links {
    margin-top: 4px;
}

@media (min-width: 641px) {
    body.auth-login-body .auth-v2-card {
        max-width: 470px;
        zoom: 0.94;
    }

    body.auth-register-body .auth-v2-card-wide {
        max-width: 780px;
        zoom: 0.94;
    }

    body.auth-register-body #auth-register-panel {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 12px;
    }

    body.auth-register-body #auth-register-panel > .auth-form-grid {
        display: contents;
    }

    body.auth-register-body #auth-register-panel > [data-auth-rule="referral"],
    body.auth-register-body #auth-register-panel > :not(.auth-field):not(.auth-form-grid) {
        grid-column: 1 / -1;
    }
}

@media (min-width: 641px) and (max-height: 760px) {
    body.auth-login-body .auth-v2-card {
        zoom: 0.88;
    }

    body.auth-register-body .auth-v2-card-wide {
        zoom: 0.86;
    }

    body.auth-login-body .auth-v2-brand-caption,
    body.auth-register-body .auth-v2-brand-caption {
        display: none;
    }
}

@media (min-width: 641px) and (max-height: 640px) {
    body.auth-login-body .auth-v2-card {
        zoom: 0.8;
    }

    body.auth-register-body .auth-v2-card-wide {
        zoom: 0.76;
    }
}

@media (max-width: 640px) {
    body.auth-login-body .auth-v2-page {
        align-items: center;
        padding: max(6px, env(safe-area-inset-top)) 8px max(6px, env(safe-area-inset-bottom));
    }

    body.auth-login-body .auth-v2-card {
        padding: clamp(12px, 2.2vh, 18px) clamp(13px, 4vw, 18px);
        zoom: 0.94;
    }

    body.auth-login-body .auth-v2-brand-caption {
        display: none;
    }

    body.auth-register-body {
        height: auto;
        min-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    body.auth-register-body .auth-v2-page {
        height: auto;
        min-height: 100dvh;
        max-height: none;
        align-items: flex-start;
        padding: max(10px, env(safe-area-inset-top)) 8px max(16px, env(safe-area-inset-bottom));
        overflow: visible;
    }

    body.auth-register-body .auth-v2-card {
        padding: 16px 14px 18px;
    }
}

@media (max-width: 640px) and (max-height: 680px) {
    body.auth-login-body .auth-v2-card {
        zoom: 0.86;
    }

    body.auth-login-body .auth-eyebrow,
    body.auth-login-body .auth-legal-links {
        display: none;
    }
}

.admin-game-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}.admin-game-summary div{padding:16px;border-radius:16px;background:linear-gradient(135deg,rgba(40,52,80,.08),rgba(184,137,72,.12));display:flex;flex-direction:column;gap:4px}.admin-game-summary strong{font-size:1.25rem}.admin-game-summary span{opacity:.7}.admin-game-card{margin-bottom:18px}.admin-game-card-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid rgba(127,127,127,.18);padding-bottom:16px;margin-bottom:16px}.admin-game-card-heading>div{display:flex;align-items:center;gap:12px}.admin-game-card-heading h2{margin:0}.admin-game-icon{font-size:2rem}.admin-game-card-heading label{min-width:220px}.admin-mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.admin-mode-card{padding:15px;border:1px solid rgba(127,127,127,.2);border-radius:14px;background:rgba(127,127,127,.04);display:grid;gap:10px}.admin-mode-card-title{display:flex;align-items:center;gap:8px;font-size:1.02rem}.admin-mode-card label{display:grid;gap:5px;font-size:.86rem}.admin-mode-card textarea{resize:vertical}.admin-game-controls-page select,.admin-game-controls-page input,.admin-game-controls-page textarea{width:100%}@media(max-width:700px){.admin-game-summary{grid-template-columns:1fr}.admin-game-card-heading{align-items:stretch;flex-direction:column}.admin-game-card-heading label{min-width:0}}
.admin-override-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;align-items:end}.admin-override-form label{display:grid;gap:5px;font-size:.86rem}.admin-overrides-list{display:grid;gap:8px;margin-top:16px}.admin-overrides-list>div{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:10px 12px;border-radius:10px;background:rgba(127,127,127,.06)}.admin-overrides-list strong{margin-inline-start:auto}

/* Keep the app-shell touch targets above the global header sizing rules. */
@media (max-width: 760px) {
    .dashboard-site-header {
        --dashboard-header-control-height: 44px;
    }
}

/*
 * Phone chrome: keep the taskbar flush with the viewport edge and echo its
 * two rounded top corners at the bottom of the header.
 */
@media (max-width: 760px) {
    .dashboard-shell-body {
        /* The shared header is 48px of navigation + 8px padding + 1px border. */
        --dashboard-bottom-nav-height: calc(57px + env(safe-area-inset-bottom));
        padding-bottom: var(--dashboard-bottom-nav-height);
    }

    .dashboard-site-header {
        min-height: calc(62px + env(safe-area-inset-top));
        padding:
            calc(7px + env(safe-area-inset-top))
            max(var(--dashboard-mobile-gutter, 12px), env(safe-area-inset-right))
            7px
            max(var(--dashboard-mobile-gutter, 12px), env(safe-area-inset-left));
        border-bottom: 1px solid var(--line);
        border-radius: 0 0 20px 20px;
        background: var(--surface);
        box-shadow: 0 3px 12px rgba(52, 29, 20, 0.08);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .dashboard-site-header .nav {
        min-height: 48px;
    }

    .dashboard-site-header .brand {
        align-self: center;
        min-height: 46px;
        padding-inline-end: 4px;
    }

    .dashboard-site-header .brand-mark {
        flex: 0 0 38px;
    }

    .dashboard-site-header .dashboard-header-context {
        position: absolute;
        top: calc(31px + env(safe-area-inset-top));
        inset-inline-start: 57px;
        display: grid;
        width: auto;
        max-width: calc(100vw - 126px);
        z-index: 1;
    }

    .dashboard-mobile-header-toggle {
        position: relative;
        z-index: 2;
        align-self: center;
        border-color: color-mix(in srgb, var(--primary) 22%, var(--line));
        background: var(--surface-soft);
        box-shadow: none;
    }

    .dashboard-site-header .nav-links,
    .dashboard-site-header .nav-links.is-mobile-open {
        top: calc(62px + env(safe-area-inset-top));
        background: var(--surface);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .dashboard-section-tabs {
        position: static;
        margin-top: 0;
        background: var(--surface-soft) !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .dashboard-bottom-nav {
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        height: var(--dashboard-bottom-nav-height);
        min-height: 0;
        padding: 2px 4px calc(2px + env(safe-area-inset-bottom));
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 20px 20px 0 0;
        background: var(--surface);
        box-shadow: 0 -6px 24px rgba(38, 20, 14, 0.13);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .dashboard-bottom-nav .dashboard-nav-item {
        min-height: 44px;
        gap: 0;
        padding: 2px 1px;
        border-radius: 14px;
    }

    .dashboard-bottom-nav .dashboard-nav-icon {
        width: 24px;
        height: 20px;
        font-size: 0.98rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-nav-icon {
        animation: none;
        transition: none;
    }
}

/* Final wallet placeholder override for standalone and embedded wallet views. */
input.wallet-placeholder::placeholder {
    color: var(--muted) !important;
    -webkit-text-fill-color: var(--muted);
    font-weight: 500;
    opacity: 0.78 !important;
}

input.wallet-placeholder:focus::placeholder {
    opacity: 0.5 !important;
}

/* Versioned game regulations: readable with keyboard, touch and without JavaScript. */
.game-terms-page { max-width: 56rem; padding-block: 2rem; }
.dashboard-view-terms .game-terms-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}
.dashboard-view-terms .game-terms-document {
    max-width: 56rem;
}
.game-terms-document { text-align: start; line-height: 2; overflow-wrap: anywhere; }
.game-terms-document h3 { margin-block: 1.5rem .5rem; font-size: 1.1rem; }
.game-terms-document p { margin-block: .65rem; }
.game-terms-document section p { white-space: pre-line; }
.terms-admin-page { max-width: 1100px; }
.terms-admin-page > .panel { margin-block: 1.5rem; padding: clamp(1rem, 3vw, 2rem); }
.terms-admin-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.25rem; }
.terms-admin-status strong, .terms-admin-status span { display: block; overflow-wrap: anywhere; }
.terms-admin-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.terms-admin-section { padding-block: 1.25rem; border-block-end: 1px solid #94a3b8; }
.terms-admin-section-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.terms-admin-section-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.terms-admin-page [hidden] { display: none !important; }
.terms-admin-page .field { margin-block: 1rem; }
.terms-admin-page input:not([type="checkbox"]):not([type="hidden"]), .terms-admin-page textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
.terms-admin-page textarea { resize: vertical; line-height: 1.9; min-height: 9rem; }
.terms-admin-page summary { cursor: pointer; padding-block: .85rem; font-weight: 700; }
.terms-admin-mandatory, .terms-admin-preview-details { padding: 1rem; border: 1px solid #94a3b8; border-radius: .75rem; margin-block: 1rem; }
.terms-admin-preview-details .game-terms-document { max-width: 52rem; margin-inline: auto; }
.terms-admin-table-wrap { overflow-x: auto; }
.terms-admin-history table { width: 100%; border-collapse: collapse; text-align: start; }
.terms-admin-history th, .terms-admin-history td { padding: .85rem; border-block-end: 1px solid #94a3b8; text-align: start; }
.terms-admin-page .form-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.terms-admin-page :is(button, a, summary, input, textarea):focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
.game-terms-scroll { max-height: 24rem; overflow: auto; border: 1px solid #94a3b8; border-radius: .75rem; padding: 1rem; }
.game-terms-scroll:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
.game-terms-consent { margin-block: 2rem; }
.game-terms-consent .checkbox-row { min-height: 44px; gap: .75rem; }
.game-terms-consent .form-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-block-start: 1rem; }
.game-terms-accepted-notice { display: flex; align-items: center; gap: .65rem; }
.game-terms-accepted-icon { flex: 0 0 1.35rem; width: 1.35rem; height: 1.35rem; }
@media print {
    .game-terms-scroll,
    body.auth-register-body .registration-game-terms .game-terms-scroll {
        max-height: none;
        overflow: visible;
    }
}

/* Compact regulations status in the header replaces the two long legal links. */
.game-terms-status-link {
    display: inline-grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: var(--surface);
    box-sizing: border-box;
    transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.game-terms-status-link.is-accepted { color: var(--success); }
.game-terms-status-link.is-pending { color: var(--danger, #b42318); }
.game-terms-status-link:hover,
.game-terms-status-link:focus-visible {
    background: color-mix(in srgb, currentColor 10%, var(--surface));
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 13%, transparent);
    outline: none;
    transform: translateY(-1px);
}
.game-terms-status-icon { width: 1.25rem; height: 1.25rem; stroke-width: 2.6; }
.dashboard-site-header .nav-links > .game-terms-status-link { order: 0; }

@media (max-width: 760px) {
    .dashboard-site-header .nav-links > .game-terms-status-link {
        width: 100%;
        min-height: 44px;
        height: 44px;
        border-radius: 13px;
    }
}

/* Chat safety: persistent compact disclosure and accessible message reporting. */
.chat-safety-notice {
    flex: 0 0 auto;
    margin: 10px 18px 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--primary) 5%, var(--surface-soft));
    font-size: .78rem;
    line-height: 1.7;
}
.chat-safety-toggle {
    display: flex;
    width: 100%;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 12px;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    text-align: start;
}
.chat-safety-toggle:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary) 38%, transparent);
    outline-offset: -3px;
}
.chat-safety-toggle-icon {
    display: grid;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 9px;
    background: var(--surface);
    color: var(--primary);
    font-size: 1.25rem;
    line-height: 1;
    transition: transform 160ms ease;
}
.chat-safety-notice.is-collapsed .chat-safety-toggle-icon {
    transform: rotate(180deg);
}
.chat-safety-content[hidden] {
    display: none;
}
.chat-safety-content p {
    margin: 0;
    padding: 0 12px 10px;
    color: var(--muted);
}
.chat-safety-content a {
    color: var(--primary);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.chat-message-report { display: inline-flex; align-items: center; min-height: 32px; text-decoration: underline; padding: 4px 8px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.chat-modal-header { flex-shrink: 0; }
.chat-report-panel { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px; }
.chat-report-form { display: grid; gap: 14px; }
.chat-report-form .field { margin: 0; min-width: 0; }
.chat-report-form select, .chat-report-form textarea { width: 100%; }
.chat-report-preview { margin: 12px 0; padding: 12px; max-height: 130px; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-soft); border-inline-start: 3px solid var(--primary); }
.chat-report-panel[hidden], .chat-report-panel [hidden],
.chat-modal.is-reporting > .chat-messages,
.chat-modal.is-reporting > .chat-error,
.chat-modal.is-reporting > .chat-safety-notice,
.chat-modal.is-reporting > .chat-form { display: none; }

/* Keep chat inside the dashboard viewport at every responsive breakpoint. */
.dashboard-shell-body > .chat-modal-backdrop {
    top: var(--chat-shell-top, 0px);
    bottom: var(--chat-shell-bottom, 0px);
}

.dashboard-shell-body > .chat-modal-backdrop > .chat-modal {
    max-height: 100%;
}

.dashboard-shell-body > .chat-modal-backdrop .chat-messages {
    min-height: 0;
    max-height: none;
}

/* Desktop chrome occupies its own rows; only PHP page content scrolls. */
@media (min-width: 761px) {
    .dashboard-shell-body > .chat-modal-backdrop {
        padding: 12px 24px;
    }

    .dashboard-shell-body > .public-profile-modal {
        top: var(--profile-shell-top, 0px);
        bottom: var(--profile-shell-bottom, 0px);
        grid-template-rows: minmax(0, 1fr);
        padding: 12px 24px;
    }

    .dashboard-shell-body > .public-profile-modal > .public-profile-dialog {
        min-height: 0;
        max-height: 100%;
    }

    .dashboard-shell-body {
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        padding-bottom: 0;
        overflow: hidden;
    }

    .dashboard-shell-body > .dashboard-site-header,
    .dashboard-shell-body > .flash-stack {
        flex: 0 0 auto;
    }

    .dashboard-shell-body > .dashboard-app-shell {
        display: flex;
        flex-direction: column;
        flex: 1 1 0;
        width: 100%;
        max-width: none;
        min-height: 0;
        margin: 0;
        padding: 0;
    }

    .dashboard-page-viewport {
        flex: 1 1 0;
        min-height: 0;
        overflow: auto;
        overscroll-behavior: contain;
        /* Balance the scrollbar space so page edges stay centered under the header. */
        scrollbar-gutter: stable both-edges;
        padding: clamp(12px, 2vw, 20px)
            max(var(--page-gutter), calc((100% - var(--page-max)) / 2)) 28px;
    }

    .dashboard-app-shell.is-admin-view > .dashboard-page-viewport {
        padding-top: 0;
    }

    .dashboard-app-shell > .dashboard-bottom-nav {
        position: relative;
        inset: auto;
        flex: 0 0 auto;
    }
}

/*
 * Mobile app frame: only the page content scrolls. The taskbar is anchored
 * directly to the viewport because iOS standalone mode can leave a flex-row
 * taskbar above the physical bottom edge.
 */
@media (max-width: 760px) {
    html:has(.dashboard-shell-body) {
        background: var(--surface);
    }

    .dashboard-shell-body {
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100svh;
        height: 100dvh;
        min-height: 0;
        padding-bottom: 0;
        overflow: hidden;
        overscroll-behavior: none;
    }

    .dashboard-shell-body > .dashboard-site-header,
    .dashboard-shell-body > .flash-stack {
        flex: 0 0 auto;
    }

    .dashboard-shell-body > .dashboard-site-header {
        position: relative;
        inset: auto;
    }

    .dashboard-shell-body > .dashboard-app-shell {
        display: flex;
        flex-direction: column;
        flex: 1 1 0;
        width: 100%;
        max-width: none;
        min-height: 0;
        margin: 0;
        padding: 0;
    }

    .dashboard-page-viewport {
        flex: 1 1 0;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        padding: 12px 14px calc(18px + var(--dashboard-bottom-nav-height));
        scroll-padding-block: 12px calc(18px + var(--dashboard-bottom-nav-height));
    }

    .dashboard-app-shell.is-admin-view > .dashboard-page-viewport {
        padding-top: 0;
    }

    .dashboard-app-shell > .dashboard-bottom-nav {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        border-radius: 20px 20px 0 0;
        background: var(--surface);
    }

    html[data-theme="dark"] .dashboard-app-shell > .dashboard-bottom-nav {
        background: var(--surface);
    }

}

/* Shared scrollbar theme for document, dialogs, tables and form controls.
 * Keep in sync with the standalone home stylesheet. Low specificity preserves
 * intentionally hidden navigation scrollbars.
 */
:root {
    --platform-scrollbar-thumb: color-mix(in srgb, var(--accent, var(--home-accent, #c98b53)) 65%, var(--muted, var(--home-muted, #806f67)));
    --platform-scrollbar-hover: var(--accent, var(--home-accent, #c98b53));
}
:where(html, body, body *) {
    scrollbar-width: thin;
    scrollbar-color: var(--platform-scrollbar-thumb) transparent;
}
:where(html, body, body *)::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
:where(html, body, body *)::-webkit-scrollbar-track {
    background: transparent;
    margin-block: 8px;
    margin-inline: 8px;
}
:where(html, body, body *)::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--platform-scrollbar-thumb);
}
:where(html, body, body *)::-webkit-scrollbar-thumb:hover {
    background: var(--platform-scrollbar-hover);
}
:where(html, body, body *)::-webkit-scrollbar-corner {
    background: transparent;
}
.platform-scroll-right {
    direction: rtl;
}
@media (forced-colors: active) {
    :where(html, body, body *) {
        scrollbar-color: auto;
    }
}

/* Ordered, touch-friendly account menu for the dashboard hamburger on phones. */
.dashboard-mobile-menu-label {
    display: none;
}

@media (max-width: 760px) {
    .dashboard-mobile-header-toggle-icon span {
        transform-origin: center;
        transition: transform 160ms ease, opacity 160ms ease;
    }

    .dashboard-mobile-header-toggle.is-open .dashboard-mobile-header-toggle-icon span:first-child {
        transform: translateY(5px) rotate(45deg);
    }

    .dashboard-mobile-header-toggle.is-open .dashboard-mobile-header-toggle-icon span:nth-child(2) {
        opacity: 0;
    }

    .dashboard-mobile-header-toggle.is-open .dashboard-mobile-header-toggle-icon span:last-child {
        transform: translateY(-5px) rotate(-45deg);
    }

    .dashboard-site-header .nav-links,
    .dashboard-site-header .nav-links.is-mobile-open {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 8px;
        max-height: calc(100dvh - 86px - env(safe-area-inset-top));
        padding: 10px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .dashboard-site-header .nav-links:has(.notification-dropdown:not([hidden])) {
        overflow: visible;
    }

    .dashboard-site-header .nav-links > * {
        grid-column: auto;
        grid-row: auto;
        width: 100%;
        min-width: 0;
        max-width: none;
        margin: 0;
    }

    .dashboard-site-header .nav-links > .nav-user {
        grid-column: 1 / -1;
        order: 0;
        width: 100%;
        max-width: none;
        min-height: 46px;
        padding-inline: 14px;
        justify-content: flex-start;
        justify-self: stretch;
        border-radius: 14px;
        background: var(--surface-soft);
        box-sizing: border-box;
        text-align: start;
    }

    .dashboard-site-header .nav-links > .dashboard-wallet-button {
        grid-column: 1 / -1;
        order: 1;
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr);
        min-height: 52px;
        height: 52px;
        gap: 8px;
        justify-content: start;
        padding: 5px 10px;
        border-radius: 14px;
    }

    .dashboard-site-header .nav-links > .game-terms-status-link { order: 2; }
    .dashboard-site-header .nav-links > .language-switcher { order: 3; }
    .dashboard-site-header .nav-links > .notification-widget { order: 4; }
    .dashboard-site-header .nav-links > .dashboard-settings-button { order: 5; }
    .dashboard-site-header .nav-links > .theme-toggle { order: 6; }
    .dashboard-site-header .nav-links > .logout-button {
        grid-column: auto;
        grid-row: auto;
        order: 7;
    }

    .dashboard-site-header .nav-links > .game-terms-status-link,
    .dashboard-site-header .nav-links > .language-switcher,
    .dashboard-site-header .nav-links > .notification-widget,
    .dashboard-site-header .nav-links > .dashboard-settings-button,
    .dashboard-site-header .nav-links > .theme-toggle,
    .dashboard-site-header .nav-links > .logout-button {
        min-height: 52px;
        height: 52px;
        border-radius: 14px;
    }

    .dashboard-site-header .language-switcher-toggle,
    .dashboard-site-header .notification-toggle,
    .dashboard-site-header .nav-links > .dashboard-settings-button,
    .dashboard-site-header .nav-links > .theme-toggle,
    .dashboard-site-header .nav-links > .logout-button,
    .dashboard-site-header .nav-links > .game-terms-status-link {
        display: flex;
        width: 100%;
        min-width: 0;
        min-height: 52px;
        height: 52px;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 6px 8px;
        border-radius: 14px;
    }

    .dashboard-site-header .language-switcher-toggle {
        font-size: 0.72rem;
    }

    .dashboard-site-header .language-switcher-toggle::before {
        content: none;
    }

    .dashboard-site-header .language-switcher-toggle [data-language-current] {
        display: inline;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dashboard-site-header .dashboard-mobile-menu-label,
    .dashboard-site-header .logout-button > span.dashboard-mobile-menu-label {
        display: inline;
        overflow: hidden;
        color: currentColor;
        font-size: 0.7rem;
        font-weight: 800;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dashboard-site-header .dashboard-wallet-button > .dashboard-mobile-menu-label {
        justify-self: start;
    }

    .dashboard-site-header .dashboard-wallet-amount {
        display: inline-flex;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        justify-self: end;
        text-align: end;
        text-overflow: ellipsis;
    }

    .dashboard-site-header .notification-toggle {
        position: relative;
        padding-inline: 8px;
    }

    .dashboard-site-header .notification-dropdown {
        z-index: 1200;
    }

    .dashboard-site-header .notification-badge {
        position: absolute;
        top: 4px;
        inset-inline-start: 4px;
    }

    .dashboard-site-header .language-menu {
        right: 0;
        left: 0;
        width: auto;
        min-width: 0;
    }
}

@media (max-width: 360px) {
    .dashboard-site-header .theme-toggle {
        display: flex;
    }

    .dashboard-site-header .nav-links {
        max-width: none;
    }
}

/* Keep the mobile header focused on the brand and menu toggle. */
@media (max-width: 760px) {
    .dashboard-site-header .nav {
        grid-template-columns: minmax(0, 1fr) 44px;
        grid-template-areas:
            "brand toggle"
            "actions actions";
        column-gap: 10px;
        row-gap: 0;
    }

    .dashboard-site-header .brand {
        min-width: 0;
        max-width: 100%;
    }

    .dashboard-site-header .brand > span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dashboard-site-header .dashboard-header-context {
        display: none;
    }
}

/*
 * Compact mobile context navigation
 * ---------------------------------
 * Every dashboard subsection uses the same sticky tab bar directly below the
 * header. The content viewport scrolls independently, so these controls stay
 * visible while the selected panel moves beneath them.
 */
@media (max-width: 760px) {
    .dashboard-page-viewport {
        scroll-padding-top: 56px;
    }

    .dashboard-shell-body :is([data-dashboard-context-tabs="true"], .dashboard-context-tabs, .support-tabs, .tournament-game-tabs) {
        position: sticky !important;
        z-index: 70 !important;
        top: 0 !important;
        order: -100;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 0 9px !important;
        padding: 3px !important;
        gap: 3px !important;
        border: 1px solid color-mix(in srgb, var(--line) 82%, transparent) !important;
        border-radius: 12px !important;
        background: color-mix(in srgb, var(--surface) 94%, transparent) !important;
        box-shadow: 0 7px 20px rgba(42, 23, 16, 0.1) !important;
        -webkit-backdrop-filter: blur(18px) saturate(135%);
        backdrop-filter: blur(18px) saturate(135%);
    }

    .dashboard-shell-body :is([data-dashboard-context-tabs="true"], .dashboard-context-tabs, .support-tabs, .tournament-game-tabs) > .unified-tab,
    .dashboard-shell-body :is([data-dashboard-context-tabs="true"], .dashboard-context-tabs, .support-tabs, .tournament-game-tabs) > .notification-section-tab,
    .dashboard-shell-body :is([data-dashboard-context-tabs="true"], .dashboard-context-tabs, .support-tabs, .tournament-game-tabs) > a {
        display: inline-flex !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 38px !important;
        height: 38px !important;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        padding: 4px 6px !important;
        overflow: hidden;
        border: 1px solid transparent !important;
        border-radius: 9px !important;
        background: transparent !important;
        color: var(--muted) !important;
        font-size: 0.7rem !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        text-align: center;
        white-space: normal !important;
        overflow-wrap: anywhere;
        transform: none !important;
        transition:
            background-color 180ms ease,
            border-color 180ms ease,
            box-shadow 180ms ease,
            color 180ms ease,
            transform 180ms ease !important;
    }

    .dashboard-shell-body :is([data-dashboard-context-tabs="true"], .dashboard-context-tabs, .support-tabs, .tournament-game-tabs) > .unified-tab:hover,
    .dashboard-shell-body :is([data-dashboard-context-tabs="true"], .dashboard-context-tabs, .support-tabs, .tournament-game-tabs) > .unified-tab:focus-visible,
    .dashboard-shell-body :is([data-dashboard-context-tabs="true"], .dashboard-context-tabs, .support-tabs, .tournament-game-tabs) > .notification-section-tab:hover,
    .dashboard-shell-body :is([data-dashboard-context-tabs="true"], .dashboard-context-tabs, .support-tabs, .tournament-game-tabs) > .notification-section-tab:focus-visible,
    .dashboard-shell-body :is([data-dashboard-context-tabs="true"], .dashboard-context-tabs, .support-tabs, .tournament-game-tabs) > a:hover,
    .dashboard-shell-body :is([data-dashboard-context-tabs="true"], .dashboard-context-tabs, .support-tabs, .tournament-game-tabs) > a:focus-visible {
        border-color: color-mix(in srgb, var(--accent) 44%, var(--line)) !important;
        background: color-mix(in srgb, var(--accent) 9%, var(--surface)) !important;
        color: var(--primary-dark) !important;
        outline: none;
    }

    .dashboard-shell-body :is([data-dashboard-context-tabs="true"], .dashboard-context-tabs, .support-tabs, .tournament-game-tabs) > :is(
        .unified-tab,
        .notification-section-tab,
        a
    ).is-active,
    .dashboard-shell-body :is([data-dashboard-context-tabs="true"], .dashboard-context-tabs, .support-tabs, .tournament-game-tabs) > [aria-selected="true"] {
        border-color: color-mix(in srgb, var(--primary) 50%, var(--line)) !important;
        background: var(--primary) !important;
        color: var(--on-primary, #fffaf5) !important;
        box-shadow: 0 5px 13px color-mix(in srgb, var(--primary) 20%, transparent) !important;
        transform: translateY(-1px) !important;
    }

    .dashboard-shell-body :is([data-dashboard-context-secondary="true"], .dashboard-context-tabs-secondary, .tournament-game-tabs) {
        z-index: 69 !important;
        top: 47px !important;
        margin-top: 0 !important;
    }

    .friends-tabs .friends-tab > [aria-hidden="true"] {
        display: none;
    }

    .support-inpage.is-ticket-open > .support-tabs {
        display: grid !important;
    }

    .support-inpage.is-ticket-open > [data-support-panel] {
        display: none !important;
    }

    .dashboard-view.is-active,
    [data-friends-section]:not([hidden]),
    [data-tournament-panel]:not([hidden]),
    [data-available-game]:not([hidden]),
    [data-games-mode-panel]:not([hidden]),
    [data-support-panel]:not([hidden]),
    [data-wallet-panel]:not([hidden]),
    [data-notification-panel]:not([hidden]) {
        animation: dashboard-context-panel-in 220ms cubic-bezier(.2, .75, .25, 1) both;
    }

    .profile-v3 :is(#profile-overview, #achievements, #security) {
        scroll-margin-top: 54px;
    }
}

@media (max-width: 380px) {
    .dashboard-shell-body :is([data-dashboard-context-tabs="true"], .dashboard-context-tabs, .support-tabs, .tournament-game-tabs) > .unified-tab,
    .dashboard-shell-body :is([data-dashboard-context-tabs="true"], .dashboard-context-tabs, .support-tabs, .tournament-game-tabs) > .notification-section-tab,
    .dashboard-shell-body :is([data-dashboard-context-tabs="true"], .dashboard-context-tabs, .support-tabs, .tournament-game-tabs) > a {
        min-height: 36px !important;
        height: 36px !important;
        padding-inline: 4px !important;
        font-size: 0.65rem !important;
    }

    .dashboard-shell-body :is([data-dashboard-context-secondary="true"], .dashboard-context-tabs-secondary, .tournament-game-tabs) {
        top: 45px !important;
    }
}

@keyframes dashboard-context-panel-in {
    from {
        opacity: 0;
        transform: translateY(7px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-view.is-active,
    [data-friends-section]:not([hidden]),
    [data-tournament-panel]:not([hidden]),
    [data-available-game]:not([hidden]),
    [data-games-mode-panel]:not([hidden]),
    [data-support-panel]:not([hidden]),
    [data-wallet-panel]:not([hidden]),
    [data-notification-panel]:not([hidden]) {
        animation: none !important;
    }
}

/* Profile settings scroll contract: keep the section tabs below the app
 * header and prevent the settings page's top padding from becoming a second
 * scroll layer. */
.dashboard-page-viewport:has(.profile-v3) {
    padding-top: 0;
}

.profile-v3 {
    padding-top: clamp(12px, 2vw, 20px);
}

.dashboard-view-content .profile-v3 {
    padding-top: clamp(12px, 2vw, 20px) !important;
}

.dashboard-view-content > .container.page-shell.profile-v3 {
    padding-top: clamp(12px, 2vw, 20px);
}

.profile-v3 .profile-quick-nav {
    top: 0;
}

/* The generic preset-card rule comes later than the first hide rule in the
 * profile stylesheet. Keep the collapsed state authoritative so the +/−
 * control actually reveals and hides the extra avatars. */
.profile-v3 .profile-avatar-preset-grid > [data-avatar-more-item] {
    display: none;
}

.profile-v3 .profile-avatar-more-toggle:checked ~ .profile-avatar-preset-grid > [data-avatar-more-item] {
    display: flex;
}
/* Tax dossier editor: shared by admin and user views. */
.tax-dossier-page { direction: rtl; padding-bottom: 3rem; }
.tax-dossier-page [hidden] { display: none !important; }

.tax-page-heading p { max-width: 54rem; }
.tax-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-block: 1rem 1.5rem; }
.tax-stat { display: grid; gap: .25rem; padding: 1rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface-soft); }
.tax-stat span, .tax-help, .tax-record small, .tax-overview-meta { color: var(--muted); }
.tax-stat strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.tax-notice { margin-block: 1rem; }
.tax-list-panel, .tax-overview, .tax-section, .tax-editor { margin-block: 1.25rem; }
.tax-filter-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: .75rem; margin-block: 1rem; }
.tax-filter-grid .btn { align-self: end; }
.tax-dossier-page .field { display: grid; gap: .4rem; min-width: 0; margin-block: .55rem; }
.tax-dossier-page .field > span:first-child { font-weight: 650; }
.tax-dossier-page .field input:not([type="checkbox"]), .tax-dossier-page .field select,
.tax-dossier-page .field textarea { width: 100%; max-width: 100%; box-sizing: border-box; min-height: 2.6rem; }
.tax-dossier-page .field textarea { min-height: 5.5rem; resize: vertical; }
.tax-dossier-page .field small { font-size: .78rem; color: var(--muted); }
.tax-dossier-page .field [aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 20%, transparent); }
.tax-dossier-page .tax-field-error { color: var(--danger) !important; font-weight: 600; }
.tax-clear, .tax-checkbox { display: flex !important; align-items: center; gap: .5rem; }
.tax-clear input, .tax-checkbox input { width: auto; }
.tax-table-wrap { overflow-x: auto; }
.tax-table { width: 100%; border-collapse: collapse; min-width: 42rem; }
.tax-table th, .tax-table td { padding: .7rem .55rem; text-align: right; border-bottom: 1px solid var(--line); vertical-align: top; }
.tax-table td small { display: block; color: var(--muted); }
.tax-status { display: inline-flex; padding: .2rem .65rem; border-radius: 2rem; background: color-mix(in srgb, var(--accent) 12%, transparent); font-size: .85rem; }
.tax-status[data-status="needs_correction"], .tax-status[data-status="incomplete"] { background: #ffedd5; color: #7c2d12; }
.tax-status[data-status="approved"], .tax-status[data-status="complete"] { background: #dcfce7; color: #14532d; }
.tax-status[data-status="under_review"] { background: #dbeafe; color: #1e3a8a; }
.tax-overview-top { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 1rem; }
.tax-overview-top h2 { margin-block: .2rem .5rem; }
.tax-overview-meta { display: grid; gap: .45rem; }
.tax-progress { margin-block: 1.25rem; }
.tax-progress > div { display: flex; justify-content: space-between; gap: 1rem; }
.tax-progress progress { display: block; width: 100%; height: .9rem; margin-top: .5rem; accent-color: var(--accent); }
.tax-masked-grid { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; }
.tax-reveal-button { margin-top: .8rem; }
.tax-revealed { display: grid; gap: .4rem; width: fit-content; margin-top: .6rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--surface-soft); direction: ltr; text-align: right; }
.tax-print-summary { display: none; }
.tax-warning { border-inline-start: .25rem solid #d97706; border-radius: .35rem; padding: .8rem 1rem; background: #fffbeb; color: #713f12; margin-block: 1rem; }
.tax-workflow, .tax-form-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }
.tax-tabs { display: flex; gap: .4rem; overflow-x: auto; padding-block: .5rem; margin-block: 1rem; }
.tax-tabs button { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 2rem; background: var(--surface-soft); padding: .55rem .9rem; color: inherit; cursor: pointer; }
.tax-tabs button.is-active, .tax-tabs button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: white; }
.tax-form fieldset { border: 0; padding: 0; min-width: 0; }
.tax-form fieldset:disabled { opacity: .78; }
.tax-dossier-page .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem 1rem; }
.tax-activity-row { border: 1px solid var(--line); border-radius: 1rem; padding: 1rem; margin-block: .8rem; background: var(--surface-soft); }
.tax-record-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: .75rem; margin-block: 1rem; }
.tax-record { display: grid; gap: .4rem; padding: .9rem; border: 1px solid var(--line); border-radius: .85rem; overflow-wrap: anywhere; }
.tax-dossier-page .tax-report-links { display: flex; flex-wrap: wrap; gap: .6rem; }
.tax-dossier-page [data-tax-report-result] .tax-table-wrap { margin-block: .6rem 1.4rem; }
.tax-dossier-page [data-tax-document-list] { display: grid; gap: .7rem; margin-block: 1rem; }
.tax-dossier-page [data-tax-document-list] .tax-record { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.tax-dossier-page [data-tax-document-list] .tax-record strong { flex-basis: 100%; }
.tax-history { display: grid; gap: 1rem; padding-inline-start: 1.5rem; }
.tax-history time { color: var(--muted); margin-inline-start: .7rem; }
@media (max-width: 900px) { .tax-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tax-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tax-stat-grid, .tax-filter-grid, .tax-dossier-page .form-grid { grid-template-columns: 1fr; } .tax-overview-top { display: grid; } }
@media print { .tax-tabs, .tax-workflow, .tax-list-panel, .tax-form-actions, .tax-dossier-page form, .tax-print, .tax-reveal-button, .tax-revealed, .page-heading-actions { display: none !important; } .tax-print-summary { display: block; } .tax-dossier-page [data-tax-panel] { display: block !important; } .tax-dossier-page .panel { break-inside: avoid; box-shadow: none; } }

/* Modern multi-mailbox workspace */
.mailbox-heading-actions,
.mailbox-settings-actions,
.mailbox-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
}
.mailbox-switcher {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: .8rem;
    margin-bottom: 1rem;
}
.mailbox-switcher-item {
    display: grid;
    gap: .25rem;
    padding: .9rem 1rem;
    color: inherit;
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--surface);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.mailbox-switcher-item:hover,
.mailbox-switcher-item.is-active {
    border-color: var(--primary);
    box-shadow: 0 10px 28px rgba(47, 29, 21, .08);
    transform: translateY(-1px);
}
.mailbox-switcher-item.is-disabled { opacity: .62; }
.mailbox-switcher-item span,
.mailbox-switcher-item small,
.mailbox-server-meta { color: var(--muted); }
.mailbox-console {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: clamp(18px, 2vw, 26px);
    background: var(--surface);
    box-shadow: 0 22px 60px rgba(47, 29, 21, .1);
}
.mailbox-console svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}
.mailbox-console-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 88px;
    padding: 1rem clamp(1rem, 2.5vw, 1.65rem);
    border-bottom: 1px solid var(--line);
    background:
        radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--primary) 11%, transparent), transparent 31%),
        var(--surface);
}
.mailbox-console-identity,
.mailbox-console-title-row,
.mailbox-console-actions,
.mailbox-readonly-chip,
.mailbox-sender-card {
    display: flex;
    align-items: center;
}
.mailbox-console-identity { gap: .85rem; min-width: 0; }
.mailbox-console-icon {
    display: grid;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(145deg, var(--primary), color-mix(in srgb, var(--primary) 72%, #bd8155));
    box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 25%, transparent);
}
.mailbox-console-title-row { flex-wrap: wrap; gap: .55rem; }
.mailbox-console-title-row h2 { margin: 0; color: var(--ink); font-size: clamp(1.05rem, 2vw, 1.32rem); }
.mailbox-console-identity p { margin: .2rem 0 0; color: var(--muted); overflow-wrap: anywhere; }
.mailbox-online-status,
.mailbox-readonly-chip {
    gap: .38rem;
    width: max-content;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
}
.mailbox-online-status {
    padding: .26rem .58rem;
    color: #24784a;
    background: color-mix(in srgb, #32a667 12%, var(--surface));
}
.mailbox-online-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2ba866;
    box-shadow: 0 0 0 3px color-mix(in srgb, #2ba866 16%, transparent);
}
.mailbox-console-actions { gap: .55rem; }
.mailbox-readonly-chip {
    min-height: 38px;
    padding: .45rem .72rem;
    border: 1px solid var(--line);
    color: var(--muted);
    background: var(--surface-soft);
}
.mailbox-icon-button {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    background: var(--surface);
    transition: border-color .18s ease, color .18s ease, transform .18s ease;
}
.mailbox-icon-button:hover { color: var(--primary); border-color: var(--primary); transform: rotate(-18deg); }
.mailbox-folder-nav {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--line);
    scrollbar-width: thin;
}
.mailbox-folder-item {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .4rem;
    padding: .45rem .8rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    background: var(--surface);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 750;
}
.mailbox-folder-item small { color: var(--muted); font-size: .72rem; }
.mailbox-folder-item:hover,
.mailbox-folder-item.is-active {
    border-color: var(--primary);
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 9%, var(--surface));
}
.mailbox-workspace {
    display: grid;
    grid-template-columns: minmax(290px, 36%) minmax(0, 1fr);
    min-height: min(680px, 72vh);
    max-height: 760px;
}
.mailbox-inbox-pane {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    border-inline-end: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-soft) 62%, var(--surface));
}
.mailbox-pane-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--line);
}
.mailbox-pane-heading h3 { margin: .15rem 0 0; color: var(--ink); font-size: 1.02rem; }
.mailbox-pane-kicker { color: var(--muted); font-size: .75rem; font-weight: 700; }
.mailbox-count {
    display: grid;
    min-width: 2rem;
    height: 2rem;
    padding-inline: .45rem;
    place-items: center;
    border-radius: 10px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    font-weight: 900;
}
.mailbox-message-list {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
.mailbox-message-row {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 8px;
    align-items: start;
    gap: .72rem;
    min-height: 96px;
    padding: .9rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    color: inherit;
    text-decoration: none;
    background: transparent;
    transition: background .16s ease, box-shadow .16s ease;
}
.mailbox-message-row:hover { background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.mailbox-message-row.is-selected {
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    box-shadow: inset -3px 0 var(--primary);
}
.mailbox-message-row.is-unread .mailbox-message-subject,
.mailbox-message-row.is-unread .mailbox-message-meta strong { font-weight: 950; color: var(--ink); }
.mailbox-sender-avatar {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 14px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    font-size: 1.05rem;
    font-weight: 900;
    text-transform: uppercase;
}
.mailbox-sender-avatar.is-large { flex: 0 0 50px; width: 50px; height: 50px; border-radius: 17px; font-size: 1.2rem; }
.mailbox-message-summary { display: grid; min-width: 0; gap: .22rem; }
.mailbox-message-meta { display: flex; align-items: center; justify-content: space-between; gap: .55rem; min-width: 0; }
.mailbox-message-meta strong,
.mailbox-message-subject,
.mailbox-message-address {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mailbox-message-meta strong { font-size: .9rem; }
.mailbox-message-meta time { flex: 0 0 auto; color: var(--muted); font-size: .72rem; }
.mailbox-message-subject { font-size: .86rem; font-weight: 700; }
.mailbox-message-address { color: var(--muted); font-size: .73rem; text-align: right; }
.mailbox-unread-dot { align-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.mailbox-reader-pane { min-width: 0; min-height: 0; overflow: auto; background: var(--surface); }
.mailbox-reader-toolbar {
    position: sticky;
    z-index: 2;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 52px;
    padding: .65rem clamp(1rem, 2.5vw, 1.6rem);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(14px);
    font-size: .78rem;
}
.mailbox-reader-back { color: var(--primary); text-decoration: none; font-weight: 850; }
.mailbox-reader-back span { display: none; }
.mailbox-reader-content { padding: clamp(1.15rem, 3vw, 2rem); }
.mailbox-reader-header { padding-bottom: 1.3rem; border-bottom: 1px solid var(--line); }
.mailbox-reader-label { color: var(--primary); font-size: .76rem; font-weight: 900; }
.mailbox-reader-header h1 {
    max-width: 780px;
    margin: .55rem 0 1.2rem;
    color: var(--ink);
    font-size: clamp(1.25rem, 3vw, 1.85rem);
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.mailbox-sender-card { gap: .78rem; }
.mailbox-sender-details { display: grid; min-width: 0; gap: .12rem; }
.mailbox-sender-details strong { font-size: .96rem; }
.mailbox-sender-details span,
.mailbox-sender-details small { color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; }
.mailbox-sender-card time { margin-inline-start: auto; color: var(--muted); font-size: .78rem; white-space: nowrap; }
.mailbox-message-paper {
    max-width: 820px;
    min-height: 180px;
    margin: 1.35rem auto 0;
    padding: clamp(1.1rem, 3vw, 1.75rem);
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface-soft) 50%, var(--surface));
    box-shadow: 0 10px 30px rgba(47, 29, 21, .045);
}
.mailbox-message-body {
    color: var(--ink);
    font-size: .96rem;
    line-height: 2.05;
    overflow-wrap: anywhere;
    unicode-bidi: plaintext;
}
.mailbox-body-empty { display: grid; min-height: 140px; place-items: center; color: var(--muted); }
.mailbox-reader-footer { max-width: 820px; margin: 1rem auto 0; color: var(--muted); font-size: .75rem; text-align: center; }
.mailbox-reader-placeholder,
.mailbox-empty-state {
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
    color: var(--muted);
}
.mailbox-reader-placeholder { min-height: 100%; padding: 2rem; }
.mailbox-reader-placeholder h3,
.mailbox-empty-state strong { margin: .75rem 0 .2rem; color: var(--ink); }
.mailbox-reader-placeholder p,
.mailbox-empty-state p { max-width: 320px; margin: 0; }
.mailbox-placeholder-art { width: 120px; color: color-mix(in srgb, var(--primary) 30%, var(--line)); }
.mailbox-placeholder-art svg { width: 120px; height: 100px; }
.mailbox-placeholder-art path { fill: color-mix(in srgb, var(--primary) 6%, var(--surface)); stroke: currentColor; stroke-width: 3; }
.mailbox-placeholder-art circle { fill: var(--primary); stroke: var(--surface); stroke-width: 5; }
.mailbox-empty-state { min-height: 240px; padding: 1.5rem; }
.mailbox-empty-state > span { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 17px; background: var(--surface); font-size: 1.4rem; }
.mailbox-admin-page > .alert-success {
    border-color: color-mix(in srgb, #2ba866 30%, var(--line));
    box-shadow: 0 10px 28px color-mix(in srgb, #2ba866 8%, transparent);
}
.mailbox-settings-list {
    display: grid;
    gap: .75rem;
    margin: 1rem 0 1.5rem;
}
.mailbox-settings-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--surface-soft);
}
.mailbox-settings-card > div:first-child {
    display: grid;
    gap: .2rem;
    min-width: 0;
}
.mailbox-settings-card span,
.mailbox-settings-card small { overflow-wrap: anywhere; }
.mailbox-settings-actions form { margin: 0; }
.deposit-cards-panel { scroll-margin-top: 24px; }
.deposit-cards-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 22px; }
.deposit-cards-heading .panel-heading { margin: 0; }
.deposit-cards-heading h2 { margin: 10px 0 7px; }
.deposit-cards-count { flex: 0 0 auto; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .85rem; }
.deposit-cards-feedback { margin-bottom: 20px; }
.deposit-cards-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); align-items: start; gap: 22px; }
.deposit-cards-list, .deposit-card-create { min-width: 0; }
.deposit-cards-list h3, .deposit-card-create h3 { margin: 0 0 14px; color: var(--primary-dark); font-size: 1.08rem; }
.deposit-cards-list { display: grid; align-content: start; gap: 12px; }
.deposit-cards-list h3 { margin-bottom: 2px; }
.deposit-card-item { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-soft); }
.deposit-card-item.is-primary { border-color: var(--accent); }
.deposit-card-item-head, .deposit-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.deposit-card-bank { font-weight: 800; color: var(--primary-dark); }
.deposit-card-number { margin: 18px 0; font-size: clamp(1.04rem, 2.2vw, 1.42rem); font-weight: 800; letter-spacing: .08em; text-align: center; white-space: nowrap; }
.deposit-card-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px 13px; align-items: baseline; font-size: .88rem; }
.deposit-card-meta span { color: var(--muted); }
.deposit-card-meta strong { overflow-wrap: anywhere; }
.deposit-card-actions { justify-content: flex-start; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.deposit-card-actions form { margin: 0; }
.deposit-card-actions .btn { min-height: 38px; padding: 7px 12px; font-size: .84rem; }
.deposit-card-delete { color: var(--danger, #ad3038); background: transparent; border: 1px solid var(--line); }
.deposit-cards-empty { padding: 22px; border: 1px dashed var(--line); border-radius: 16px; color: var(--muted); line-height: 1.8; }
.deposit-card-create { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-soft); }
.deposit-card-create > p { margin: -5px 0 20px; color: var(--muted); font-size: .88rem; }
.deposit-card-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.deposit-card-create .field { min-width: 0; margin-bottom: 16px; }
.deposit-card-create .field label { font-size: .88rem; }
.deposit-card-create .field label small { color: var(--muted); font-weight: 400; }
.deposit-card-create .field input { min-height: 48px; background: var(--surface); }
.deposit-card-primary-choice { display: flex; gap: 9px; align-items: flex-start; margin: 4px 0 19px; line-height: 1.6; cursor: pointer; }
.deposit-card-primary-choice input { width: 18px; height: 18px; margin-top: 4px; accent-color: var(--accent); }
.deposit-card-submit { width: 100%; }
@media (max-width: 920px) { .deposit-cards-layout { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .deposit-cards-heading { flex-direction: column; } .deposit-card-form-grid { grid-template-columns: 1fr; } .deposit-card-number { letter-spacing: .02em; } }
.mailbox-settings-form {
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}
.mailbox-form-grid { align-items: start; }
.mailbox-check-options {
    display: grid;
    gap: .6rem;
    align-content: center;
}
.mailbox-check-options .check-row {
    display: flex;
    align-items: center;
    gap: .55rem;
}
.mailbox-form-actions { margin-top: 1rem; }
@media (max-width: 760px) {
    .mailbox-heading-actions { width: 100%; }
    .mailbox-heading-actions .btn { flex: 1 1 auto; }
    .mailbox-console-header { align-items: flex-start; }
    .mailbox-readonly-chip { display: none; }
    .mailbox-workspace { display: block; min-height: auto; max-height: none; }
    .mailbox-inbox-pane { border-inline-end: 0; }
    .mailbox-workspace.has-open-message .mailbox-inbox-pane { display: none; }
    .mailbox-workspace:not(.has-open-message) .mailbox-reader-pane { display: none; }
    .mailbox-reader-pane { overflow: visible; }
    .mailbox-reader-toolbar { position: static; }
    .mailbox-reader-back span { display: inline; }
    .mailbox-reader-content { padding: 1rem; }
    .mailbox-sender-card { align-items: flex-start; }
    .mailbox-sender-card time { margin-inline-start: 0; }
    .mailbox-sender-card { flex-wrap: wrap; }
    .mailbox-sender-details { flex: 1 1 calc(100% - 65px); }
    .mailbox-sender-card time { width: 100%; padding-inline-start: 64px; }
    .mailbox-message-paper { margin-top: 1rem; padding: 1rem; border-radius: 14px; }
    .mailbox-settings-card { grid-template-columns: 1fr; }
    .mailbox-settings-actions { align-items: stretch; }
    .mailbox-settings-actions .btn { width: 100%; }
}
@media (max-width: 480px) {
    .mailbox-console { border-radius: 16px; }
    .mailbox-console-header { min-height: 76px; padding: .85rem; }
    .mailbox-console-icon { flex-basis: 42px; width: 42px; height: 42px; border-radius: 13px; }
    .mailbox-online-status { display: none; }
    .mailbox-message-row { grid-template-columns: 38px minmax(0, 1fr) 7px; padding-inline: .8rem; }
    .mailbox-sender-avatar { width: 38px; height: 38px; border-radius: 12px; }
    .mailbox-message-meta { align-items: flex-start; }
    .mailbox-message-meta time { max-width: 74px; white-space: normal; text-align: left; line-height: 1.4; }
}

.keyboard-shortcuts-overlay[hidden] { display: none; }
.keyboard-shortcuts-overlay { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 20px; }
.keyboard-shortcuts-backdrop { position: absolute; inset: 0; background: rgba(12, 18, 28, .65); }
.keyboard-shortcuts-dialog { position: relative; width: min(100%, 480px); max-height: min(85vh, 740px); overflow: auto; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 80px rgba(0, 0, 0, .25); }
.keyboard-shortcuts-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.keyboard-shortcuts-heading h2 { margin: 0; font-size: 1.3rem; }
.keyboard-shortcuts-heading button { min-width: 40px; min-height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); color: inherit; font-size: 1.5rem; cursor: pointer; }
.keyboard-shortcuts-dialog p { margin: 12px 0 18px; color: var(--muted); }
.keyboard-shortcuts-dialog dl { margin: 0; }
.keyboard-shortcuts-dialog dl > div { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.keyboard-shortcuts-dialog dt { display: flex; gap: 5px; direction: ltr; }
.keyboard-shortcuts-dialog dd { margin: 0; text-align: end; }
.keyboard-shortcuts-dialog kbd { min-width: 28px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-soft); font: inherit; text-align: center; }
body.keyboard-shortcuts-open { overflow: hidden; }

/* Current brand artwork: square photographic mark with an integrated dark
 * background. Keep it large enough to remain recognizable at navigation and
 * authentication sizes, without adding the glow used by the previous mark. */
.brand-mark,
.maintenance-logo,
.auth-brand img,
.auth-upload-current-logo,
.auth-preview-brand img,
.admin-branding-preview {
    background: #241f1a;
    object-fit: contain;
    filter: none;
    box-shadow: 0 8px 22px rgba(24, 16, 11, 0.24);
}

.brand-mark {
    width: 58px;
    height: 58px;
    border-radius: 17px;
}


.maintenance-logo {
    width: 112px;
    height: 112px;
    padding: 0;
    border-radius: 28px;
}

.auth-brand img {
    border-radius: 24px;
}

body.auth-v2-body .auth-v2-brand .auth-brand img,
body.auth-login-body .auth-v2-brand .auth-brand img,
body.auth-register-body .auth-v2-brand .auth-brand img {
    width: min(clamp(150px, var(--auth-logo-width, 176px), 210px), 48vw);
    height: auto;
    max-height: none;
    aspect-ratio: 1;
}

.auth-upload-current-logo {
    width: 82px;
    height: 82px;
    flex-basis: 82px;
}

.auth-preview-brand img {
    width: min(clamp(96px, var(--auth-logo-width, 176px), 150px), 70%);
    max-height: none;
    border-radius: 18px;
}

.admin-branding-preview {
    border-radius: 22px;
}

@media (max-width: 760px) {
    .brand-mark,
    .dashboard-site-header .brand-mark {
        width: 48px;
        height: 48px;
        border-radius: 15px;
    }
}

/* Keep every wallet history field visible without horizontal scrolling on phones. */
@media (max-width: 700px) {
    .wallet-transaction-section .table-wrap {
        width: 100%;
        margin-inline: 0;
        padding-inline: 0;
        overflow-x: visible;
    }

    .wallet-responsive-table,
    .wallet-responsive-table tbody,
    .wallet-responsive-table tr {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .wallet-responsive-table thead {
        display: none;
    }

    .wallet-responsive-table tbody {
        padding: 0 12px 14px;
    }

    .wallet-responsive-table tr {
        margin-top: 12px;
        padding: 4px 12px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--surface-soft);
    }

    .wallet-responsive-table tr[hidden],
    .wallet-transaction-section .table-wrap[hidden] {
        display: none !important;
    }

    .wallet-responsive-table td {
        display: grid;
        grid-template-columns: minmax(0, 112px) minmax(0, 1fr);
        gap: 4px 10px;
        align-items: start;
        width: 100%;
        min-width: 0;
        padding: 9px 0;
        border-top: 0;
        border-bottom: 1px solid var(--line);
        font-size: 0.85rem;
        text-align: start;
        overflow-wrap: anywhere;
    }

    .wallet-responsive-table td:last-child {
        border-bottom: 0;
    }

    .wallet-responsive-table td::before {
        grid-column: 1;
        content: attr(data-label);
        color: var(--muted);
        font-weight: 700;
    }

    .wallet-responsive-table td > * {
        grid-column: 2;
        min-width: 0;
        justify-self: start;
    }

    .wallet-responsive-table td > [dir="ltr"] {
        max-width: 100%;
        text-align: start;
        unicode-bidi: isolate;
        overflow-wrap: anywhere;
    }
}

/* Back navigation for the withdrawal view in the mobile header. */
.dashboard-header-back {
    display: none;
}

@media (max-width: 760px) {
    .dashboard-site-header[data-dashboard-current-view="withdraw"] .nav {
        grid-template-columns: minmax(0, 1fr) 44px 44px;
        grid-template-areas:
            "brand back toggle"
            "context context context"
            "actions actions actions";
    }

    .dashboard-site-header[data-dashboard-current-view="withdraw"] .dashboard-header-back {
        grid-area: back;
        display: inline-grid;
        width: 44px;
        height: 44px;
        place-items: center;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--surface);
        color: var(--primary);
        box-shadow: 0 5px 14px rgba(52, 29, 20, 0.06);
        cursor: pointer;
    }

    .dashboard-site-header .dashboard-header-back:hover,
    .dashboard-site-header .dashboard-header-back:focus-visible {
        border-color: var(--accent);
        background: color-mix(in srgb, var(--accent) 12%, var(--surface));
        outline: none;
    }
}

.dashboard-admin-messages,
.admin-dashboard-message-list {
    display: grid;
    gap: 14px;
}

.dashboard-admin-messages { margin: 18px 0; }

.dashboard-admin-message,
.admin-dashboard-message-item {
    padding: 20px 24px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 8px 22px rgba(52, 29, 20, 0.06);
}

.dashboard-admin-message-heading,
.admin-dashboard-message-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    justify-content: space-between;
}

.dashboard-admin-message h2 { margin: 5px 0 0; font-size: 1.2rem; }
.optimistic-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .88rem; line-height: 1.8; overflow-wrap: anywhere; }
.optimistic-status.is-error { color: var(--danger, #c2413c); }
.chat-message.is-pending { opacity: .7; }
.chat-message.is-failed, .chat-message.is-unknown { outline: 1px dashed var(--danger, #c2413c); }
[data-chess-board][aria-busy="true"], [data-bg-board][aria-busy="true"] { opacity: .85; cursor: progress; }
.dashboard-admin-message p,
.admin-dashboard-message-item p { margin: 14px 0; white-space: normal; line-height: 1.8; overflow-wrap: anywhere; }
.admin-dashboard-message-item small { display: block; margin: 8px 0; overflow-wrap: anywhere; }

/* Prevent iOS from zooming the page when a text field receives focus. */
@media (max-width: 900px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
    textarea,
    select {
        font-size: max(16px, 1rem) !important;
    }
}
.admin-avatar-remove-dialog {
    width: min(92vw, 560px);
    border: 0;
    border-radius: 18px;
    padding: 24px;
    color: inherit;
    background: var(--surface, #fff);
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.3);
}

.admin-avatar-remove-dialog::backdrop {
    background: rgba(15, 23, 42, 0.68);
    backdrop-filter: blur(3px);
}

.admin-avatar-remove-form textarea {
    width: 100%;
    resize: vertical;
}

/* Notification center: use the same compact 8px rhythm as the other dashboard views. */
#notifications-page .notification-section-nav,
#notifications-page .notification-panel-view,
#notifications-page .notification-page-list,
#notifications-page .notification-preferences-form,
#notifications-page .notification-preferences-grid,
#notifications-page .push-notification-panel,
#notifications-page .push-notification-copy,
#notifications-page .push-notification-actions,
#notifications-page .notification-page-actions {
    gap: 8px !important;
}

#notifications-page .notification-section-nav {
    margin: 0 0 8px !important;
}

#notifications-page .notification-page-title-row {
    gap: 8px;
}

#notifications-page .notification-page-content > p {
    margin: 8px 0;
}

/* Friends, challenges and messages use the same compact 8px rhythm. */
[data-chat-app] {
    gap: 8px !important;
}

[data-chat-app] > .friends-tabs,
[data-chat-app] .friends-layout,
[data-chat-app] .friend-results,
[data-chat-app] .friend-list,
[data-chat-app] .game-invite-list,
[data-chat-app] .chat-messages {
    gap: 8px !important;
}

[data-chat-app] > .friends-tabs {
    margin-bottom: 0 !important;
}

[data-chat-app] .friends-layout {
    margin-bottom: 0 !important;
}

[data-chat-app] .friend-search-form,
[data-chat-app] .friends-message-search {
    gap: 8px !important;
    margin-bottom: 8px !important;
}

[data-chat-app] .referral-panel,
[data-chat-app] .tournament-game-tabs {
    margin-bottom: 0 !important;
}