* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Hide the join screen from members who already joined */
html:not(.member-ready) .join-screen,
html:not(.member-ready) .community-screen {
    visibility: hidden;
}

.join-screen,
.community-screen {
    width: 90%;
    max-width: 420px;
    background-color: white;
    padding: 32px 24px;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.join-screen h1 {
    font-size: 32px;
    margin-bottom: 16px;
}

.join-screen p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 24px;
}

.join-screen button {
    width: 100%;
    padding: 14px;
    margin-bottom: 12px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
}

#googleJoinButton {
    background-color: #ffffff;
    border: 1px solid #cccccc;
}

#otherJoinButton {
    background-color: #111111;
    color: white;
}
#loginLink {
    color: #111111;
    font-weight: bold;
    text-decoration: none;
}

#loginLink:hover {
    text-decoration: underline;
}
.hidden {
    display: none;
}
.community-screen {
    text-align: left;
}

.community-screen h1 {
    font-size: 30px;
    margin-bottom: 10px;
}

.community-screen h2 {
    font-size: 20px;
    margin-bottom: 20px;
}

.vip-post {
    border: 1px solid #dddddd;
    border-radius: 14px;
    padding: 20px;
}

.vip-post h3 {
    font-size: 22px;
    margin-bottom: 10px;
}

.vip-post p {
    margin-bottom: 12px;
}
.community-screen {
    width: 90%;
    max-width: 420px;
    background-color: white;
    padding: 28px 20px;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.community-screen h1 {
    font-size: 30px;
    margin-bottom: 24px;
}

.community-screen h2 {
    font-size: 22px;
    margin-bottom: 16px;
}

.vip-post {
    border: 1px solid #dddddd;
    border-radius: 14px;
    padding: 20px;
}

.vip-post h3 {
    font-size: 22px;
    margin-bottom: 10px;
}

.vip-post p {
    margin-bottom: 14px;
    line-height: 1.5;
}

.vip-post button {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 10px;
    background-color: #111111;
    color: white;
    font-size: 16px;
    cursor: pointer;
}
.vip-post {
    margin-bottom: 16px;
}
.bottom-nav {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 20px;
}

.bottom-nav {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #dddddd;
}

.account-card {
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 16px;
    margin-top: 15px;
}
.account-card h3 {
    margin-bottom: 5px;
}

.account-card p {
    margin-top: 0;
    margin-bottom: 18px;
}

.account-card p:last-child {
    margin-bottom: 0;
}
.results-empty {
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 16px;
    margin-top: 15px;
}
.result-card {
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 16px;
    margin-top: 15px;
}
.result-images {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.result-images img {
    width: 100%;
    border-radius: 10px;
    display: block;
}
.result-card .won {
    color: green;
    font-weight: bold;
}

.result-card .lost {
    color: red;
    font-weight: bold;
}
#halftimeClosingMessage {
    margin-top: 18px;
    padding: 12px;
    border-left: 4px solid currentColor;
    font-weight: 600;
    font-style: italic;
}

.admin-container {
    width: 90%;
    max-width: 520px;
    margin: 40px auto;
    padding: 20px;
}

.admin-container section {
    background: white;
    border: 1px solid #ddd;
    border-radius: 16px;
    padding: 20px;
}

.admin-container label {
    display: block;
    margin-top: 14px;
    margin-bottom: 6px;
    font-weight: 600;
}

.admin-container select,
.admin-container input[type="text"],
.admin-container input[type="file"],
.admin-container textarea {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
}

.admin-container input[type="text"],
.admin-container select,
.admin-container textarea {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 10px;
}

.admin-container textarea {
    min-height: 90px;
    resize: vertical;
}

.image-slot {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #ddd;
    border-radius: 12px;
}

#publishButton {
    width: 100%;
    margin-top: 18px;
    padding: 14px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

#imageLimitText {
    margin-top: 10px;
    margin-bottom: 8px;
}

@media (max-width: 600px) {
    .admin-container {
        margin: 0;
        padding: 14px;
    }
}
#finalClosingMessage {
    margin-top: 18px;
    padding: 12px;
    border-left: 4px solid currentColor;
    font-weight: 600;
    font-style: italic;
}
.media-block {
    margin: 18px 0 0;
    padding: 0 0 18px;
}

.media-block + .media-block {
    border-top: 2px solid #d0d0d0;
    padding-top: 22px;
    margin-top: 22px;
}

.media-label {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
}

.media-caption {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.45;
}
#ticketStatus,
#halftimeStatus,
#finalStatus {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    margin: 4px 0 14px;
    border-radius: 999px;
    background: #f1f1f1;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.vip-post h3 {
    margin-bottom: 6px;
}

.vip-post {
    line-height: 1.5;
}
.result-history {
    margin-bottom: 28px;
    padding: 18px;
    background: #f7f7f7;
    border-left: 4px solid #222;
    border-radius: 10px;
}

.result-history > h3 {
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #d0d0d0;
    font-size: 18px;
}

.result-message {
    margin-top: 18px;
    padding: 12px;
    border-left: 4px solid currentColor;
    font-weight: 600;
    font-style: italic;
}

.result-history + .result-history {
    margin-top: 32px;
}
.result-status-badge {
    display: inline-block;
    margin: 0 0 16px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
}

.result-won {
    background: #e8f7ea;
}

.result-lost {
    background: #fdeaea;
}

.result-postponed {
    background: #e8f1ff;
}
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    margin: 4px 0 14px;
}

.status-waiting {
    background: #f2f2f2;
    color: #666;
    border: 1px solid #dddddd;
}
.status-final-posted {
    background: #eeeeee;
    color: #222;
    border: 1px solid #dddddd;
}
#halftimeStatus.status-waiting {
    background: #f2f2f2;
    color: #666;
    border: 1px solid #dddddd;
}
#halftimeStatus.status-live {
    background-color: #ffb347 !important;
    color: #222 !important;
    border: 1px solid #e58a00 !important;
}
.live-icon {
    font-size: 20px;
    line-height: 1;
}
.admin-dashboard {
    margin-bottom: 20px;
}

.admin-dashboard h2 {
    margin-bottom: 14px;
}

.dashboard-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    background: #f3f4f6;
    border-radius: 14px;
}

.dashboard-icon {
    font-size: 30px;
}

.dashboard-card p {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
}

.dashboard-card h3 {
    margin: 0;
    font-size: 30px;
}
#adminApp {
    align-self: flex-start;
}

#ticketCanvasContainer {
    position: relative;
    width: 100%;
    overflow: auto;
}

#canvasTextEditor {
    position: absolute;
    z-index: 10;

    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.35px;
    line-height: 1;

    color: #222;
    background: white;

    border: 1px solid #222;
    padding: 2px 4px;

    box-sizing: border-box;
}

#ticketRedactionCanvas {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    touch-action: none;
}

#savePublishedPostButton {
    position: fixed;

    left: 50%;
    bottom: 12px;

    transform: translateX(-50%);

    width: calc(100% - 24px);
    max-width: 440px;

    padding: 14px;

    border: none;
    border-radius: 10px;

    background: #1f2937;
    color: #ffffff;

    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

    z-index: 1000;
}

#savePublishedPostButton:hover {
    background: #111827;
}

#adminManagePostsPage {
    padding-bottom: 80px;
}

.published-post-card {
    border: 1px solid #d8d8d8;
    border-radius: 12px;

    padding: 14px;
    margin-bottom: 22px;

    background: #ffffff;
}

.published-post-images {
    display: flex;
    flex-direction: column;
    gap: 10px;

    margin-top: 10px;
    margin-bottom: 12px;
}

.published-post-image {
    display: block;

    width: auto;
    max-width: 100%;
    max-height: 320px;

    object-fit: contain;

    border: 1px solid #dddddd;
    border-radius: 8px;
}

.published-post-date {
    margin: 0;
    padding: 7px 12px;

    background: #e9eef5;
    color: #5b6470;

    font-size: 13px;
    font-weight: 400;
}

.published-post-caption {
    margin: 0 0 12px;
    padding: 8px 12px;

    background: #fff3df;
    color: #222222;

    font-size: 15px;
    font-weight: 600;
}

.published-post-title {
    margin: -14px -14px 10px;
    padding: 10px 14px;

    background: #1f2937;
    color: #ffffff;

    border-radius: 11px 11px 0 0;

    font-size: 18px;
    font-weight: 700;
}

.admin-nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;

    margin-top: 12px;
    margin-bottom: 18px;
}

.admin-nav button {
    border: 1px solid #d5d9df;
    border-radius: 8px;

    background: #ffffff;
    color: #1f2937;

    padding: 9px 12px;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
}

.admin-nav button.active {
    background: #1f2937;
    color: #ffffff;

    border-color: #1f2937;
}

.admin-nav button:hover {
    background: #e9eef5;
}

.admin-nav button.active:hover {
    background: #1f2937;
}

.admin-title {
    margin: 0;
    font-size: 32px;
    font-weight: 800;
    color: #1f2937;
}

.admin-subtitle {
    margin: 2px 0 0;
    color: #667085;
    font-size: 15px;
}

#adminManagePostsPage > h2 {
    margin: 0;
    font-size: 24px;
    color: #1f2937;
}

#adminManagePostsPage > p {
    margin: 4px 0 14px;
    color: #667085;
    font-size: 14px;
}

.published-screenshot-edit button {
    border: none;
    border-radius: 8px;

    padding: 9px 12px;
    margin-top: 8px;
    margin-right: 6px;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
}

.edit-published-image-button {
    background: #e6f6ec;
    color: #176b35;
}

.replace-published-image-button,
.add-published-image-button {
    background: #e8f0fe;
    color: #1f4f9a;
}

.remove-published-image-button {
    background: #fde8e8;
    color: #9b1c1c;
}

.published-post-actions {
    display: flex;
    gap: 10px;

    margin-top: 12px;
}

.edit-published-post-button,
.delete-published-post-button {
    border: none;
    border-radius: 8px;

    padding: 9px 13px;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
}

.edit-published-post-button {
    background: #e8f0fe;
    color: #1f4f9a;
}

.delete-published-post-button {
    background: #fde8e8;
    color: #9b1c1c;
}

#closePublishedPostEditorButton {
    border: none;
    border-radius: 8px;

    padding: 9px 12px;
    margin-bottom: 12px;

    background: #f3f4f6;
    color: #374151;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
}

#closePublishedPostEditorButton:hover {
    background: #e5e7eb;
}

#publishedPostEditor {
    margin-top: 14px;
    padding: 14px;

    border: 1px solid #d8dce2;
    border-radius: 12px;

    background: #f8fafc;
}

#publishedPostEditor h2 {
    margin: 0 0 8px;

    color: #1f2937;
    font-size: 22px;
}

#publishedPostEditFields label {
    display: block;

    margin-top: 12px;
    margin-bottom: 5px;

    font-size: 14px;
    font-weight: 700;

    color: #374151;
}

#publishedPostEditFields input,
#publishedPostEditFields textarea,
#publishedPostEditFields select {
    width: 100%;

    padding: 10px;

    border: 1px solid #d1d5db;
    border-radius: 8px;

    background: #ffffff;

    font-size: 15px;

    box-sizing: border-box;
}

#publishedPostEditFields textarea {
    min-height: 90px;
    resize: vertical;
}

.published-screenshot-edit {
    margin-top: 12px;
    padding: 12px;

    border: 1px solid #d8dce2;
    border-radius: 10px;

    background: #ffffff;
}

.published-edit-image {
    display: block;

    width: 100%;
    max-width: 420px;
    max-height: 420px;

    object-fit: contain;

    margin: 0 auto 8px;

    border-radius: 8px;
}

.published-screenshot-label {
    margin: 0 0 8px;

    font-size: 15px;
    font-weight: 700;

    color: #1f2937;
}

.published-result-badge {
    display: inline-block;

    margin: 4px 0 10px;
    padding: 6px 10px;

    border-radius: 999px;

    font-size: 13px;
    font-weight: 700;
}

.result-won {
    background: #e6f6ec;
    color: #176b35;
}

.result-lost {
    background: #fde8e8;
    color: #9b1c1c;
}

.result-postponed {
    background: #e8f0fe;
    color: #1f4f9a;
}


#installAppButton {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    width: 100%;
    min-height: 62px;
    padding: 12px 18px;

    color: #fff !important;
    background: linear-gradient(
        110deg,
        #dc268e,
        #990de0
    ) !important;

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 14px;

    box-shadow:
        0 6px 20px rgba(174, 20, 205, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);

    font: inherit;
    font-size: 16px;
    font-weight: 800;
    text-align: center;
    cursor: pointer;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

#installAppButton span {
    min-width: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.3;
}

#installAppButton .install-app-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

@media (hover: hover) {
    #installAppButton:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 8px 26px rgba(174, 20, 205, 0.5);
    }
}

#installAppButton:active:not(:disabled) {
    transform: scale(0.98);
}

#installAppButton:focus-visible {
    outline: 3px solid #ffe18a;
    outline-offset: 4px;
}

#installAppButton:disabled {
    opacity: 0.55;
    cursor: default;
    box-shadow: none;
}

#installAppCard {
    margin: 14px 0 18px;
    padding: 16px;

    border-radius: 14px;

    background: #1f2937;
    color: #ffffff;
}

#installAppCard h3 {
    margin: 0 0 8px;

    font-size: 20px;
    font-weight: 800;
}

#installAppCard p {
    margin: 0 0 12px;

    font-size: 14px;
    line-height: 1.5;

    color: #e5e7eb;
}

.install-benefits {
    display: grid;
    gap: 7px;

    margin-bottom: 14px;
}

.install-benefits span {
    font-size: 14px;
    font-weight: 600;
}

#installAppCard small {
    display: block;

    margin-top: 10px;

    text-align: center;

    font-size: 12px;
    color: #cbd5e1;
}

#notificationCard {
    margin: 14px 0 18px;
    padding: 16px;

    border-radius: 14px;

    background: #1f2937;
    color: #ffffff;
}

#notificationCard h3 {
    margin: 0 0 8px;

    font-size: 20px;
    font-weight: 800;
}

#notificationCard p {
    margin: 0 0 14px;

    font-size: 14px;
    line-height: 1.5;

    color: #e5e7eb;
}

/* Notification button — purple-pink Install App style */
#notificationCard #enableNotificationsButton {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: fit-content;
    max-width: 100%;
    min-height: 42px;
    margin: 12px 0;
    padding: 9px 14px;

    color: #fff !important;
    background: linear-gradient(
        110deg,
        #dc268e,
        #990de0
    ) !important;

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 11px;

    box-shadow:
        0 6px 20px rgba(174, 20, 205, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);

    font: inherit;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
    cursor: pointer;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

@media (hover: hover) {
    #notificationCard #enableNotificationsButton:hover:not(:disabled) {
        transform: translateY(-2px);

        box-shadow:
            0 8px 26px rgba(174, 20, 205, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }
}

#notificationCard #enableNotificationsButton:active:not(:disabled) {
    transform: scale(0.98);
}

#notificationCard #enableNotificationsButton:focus-visible {
    outline: 3px solid #ffe18a;
    outline-offset: 4px;
}

#notificationCard #enableNotificationsButton:disabled {
    opacity: 0.55;
    cursor: default;
    transform: none;
    box-shadow: none;
}

#notificationCard small {
    display: block;

    margin-top: 9px;

    text-align: center;

    font-size: 12px;
    color: #cbd5e1;
}

/* Responsive app layout */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    margin: 0;
}

body {
    min-height: 100vh;
    background: #f5f5f5;
}

.join-screen,
.community-screen {
    width: 100%;
    max-width: 720px;

    margin: 0 auto;
    padding: 16px;
}

img {
    max-width: 100%;
    height: auto;
}


/* Desktop / laptop */

@media (min-width: 900px) {
    .join-screen,
    .community-screen {
        max-width: 760px;
        padding: 28px 32px;
    }
}


/* Small phones */

@media (max-width: 480px) {
    .join-screen,
    .community-screen {
        padding: 12px;
    }
}

/* Full-screen screenshot viewer */

.media-viewer {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100dvh;

    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    overflow: hidden;
}

.media-viewer.hidden {
    display: none;
}

#mediaViewerImage {
    display: block;

    width: auto;
    height: auto;

    max-width: 100vw;
    max-height: 100dvh;

    object-fit: contain;

    margin: 0;
    padding: 0;

    user-select: none;
    -webkit-user-drag: none;
}

.media-viewer-close {
    position: fixed;
    top: 12px;
    right: 12px;

    z-index: 10000;

    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    font-size: 22px;
    line-height: 1;

    cursor: pointer;
}

.post-screenshot {
    display: block;

    width: 100%;
    height: 330px;

    object-fit: cover;
    object-position: top;

    border-radius: 12px;

    cursor: zoom-in;
}


/* Larger screens: tablets, laptops and desktops */
@media (min-width: 600px) {
    .post-screenshot {
        height: 500px;
    }
}

.media-viewer-close {
    position: fixed;
    top: 12px;
    right: 12px;

    z-index: 10000;

    width: 42px;
    height: 42px;

    border: none;
    border-radius: 50%;

    background: #dc2626;
    color: #ffffff;

    font-size: 24px;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    transition:
        background 0.2s ease,
        transform 0.15s ease;
}

.media-viewer-close:hover,
.media-viewer-close:focus-visible {
    background: #b91c1c;
}

.media-viewer-close:active {
    background: #991b1b;
    transform: scale(0.92);
}

/* VIP Community dark background */

.community-screen {
    position: relative;

    min-height: 100vh;

    color: #f1f5f9;

    background-color: #111820;

                background-image:
        linear-gradient(
            150deg,
            rgba(255, 255, 255, 0.018) 12%,
            transparent 12.5%,
            transparent 87%,
            rgba(255, 255, 255, 0.018) 87.5%
        ),
        linear-gradient(
            30deg,
            rgba(255, 255, 255, 0.012) 12%,
            transparent 12.5%,
            transparent 87%,
            rgba(255, 255, 255, 0.012) 87.5%
        );

    background-position:
        0 0,
        0 0,
        40px 70px;
}

.community-screen h1,
.community-screen h2,
.community-screen h3 {
    color: #f8fafc;
}

.community-screen p,
.community-screen small {
    color: #cbd5e1;
}

.community-screen {
    min-height: 100vh;

    color: #f1f5f9;

    background-color: #111820;
    background-image:
        url("vip-pattern.svg");

    background-repeat: repeat;
    background-size: 360px 280px;
}

#unlockVipButton {
    display: block;

    width: 100%;

    margin-top: 14px;

    padding: 14px 18px;

    border: none;
    border-radius: 10px;

    background: #8b5cf6;
    color: #ffffff;

    font-size: 17px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 4px 12px
        rgba(0, 0, 0, 0.28);

    transition:
        transform 0.15s ease,
        background 0.2s ease;
}

#unlockVipButton:hover {
    background: #a78bfa;
}

#unlockVipButton:active {
    background: #7c3aed;
    transform: scale(0.97);
}

.post-screenshot {
    border-top: 3px solid #ec4899;

    box-shadow:
        0 -1px 6px
        rgba(236, 72, 153, 0.28);
}

.media-click-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    margin: 8px 0 0;
    padding: 2px 7px;

    border-radius: 6px 6px 0 0;

    background: #ec4899;
    color: #ffffff;

    font-size: 10px;
    font-weight: 700;

    line-height: 1.2;
}

#ticketCaption,
.media-caption {
    margin: 8px 0 10px;

    padding: 7px 10px;

    background:
        rgba(255, 255, 255, 0.06);

    border-left:
        3px solid #94a3b8;

    border-radius: 6px;

    color: #f1f5f9;

    font-size: 14px;
    line-height: 1.4;
}

#halftimeClosingMessage,
#finalClosingMessage {
    display: inline-block;

    max-width: 92%;

    margin: 12px 0 4px;
    padding: 9px 12px;

    background:
        rgba(255, 255, 255, 0.08);

    border-radius:
        12px 12px 12px 4px;

    color: #e2e8f0;

    font-size: 14px;
    line-height: 1.4;

    font-style: italic;

    border-left:
        3px solid #38bdf8;
}

.status-pill,
#ticketStatus {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    margin: 4px 0 10px;
    padding: 5px 9px;

    border-radius: 999px;

    font-size: 12px;
    font-weight: 800;

    line-height: 1.2;
}


/* Waiting / Pending */

.status-waiting {
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;

    border: 1px solid
        rgba(148, 163, 184, 0.35);
}


/* LIVE — orange stays exclusive */

.status-live {
    background: rgba(249, 115, 22, 0.18);
    color: #fb923c;

    border: 1px solid
        rgba(249, 115, 22, 0.45);
}

/* VIP Locked */

.status-locked {
    background: rgba(239, 68, 68, 0.16);
    color: #f87171;

    border: 1px solid
        rgba(239, 68, 68, 0.4);
}


/* VIP Unlocked */

.status-unlocked {
    background: rgba(34, 197, 94, 0.16);
    color: #4ade80;

    border: 1px solid
        rgba(34, 197, 94, 0.4);
}

/* Bottom navigation */

.bottom-nav {
    position: fixed;

    left: 50%;
    bottom: 0;

    transform: translateX(-50%);

    width: 100%;
    max-width: 760px;

    display: flex;

    padding:
        8px 10px
        calc(8px + env(safe-area-inset-bottom));

    background:
        rgba(17, 24, 32, 0.92);

    border-top:
        1px solid
        rgba(255, 255, 255, 0.16);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    z-index: 5000;
}



/* Prevent page content hiding behind nav */

.community-screen {
    padding-bottom:
        calc(
            90px +
            env(safe-area-inset-bottom)
        );
}

#halftimeWaiting,
#finalWaiting {
    margin: 8px 0 4px;
    padding: 8px 10px;

    background:
        rgba(255, 255, 255, 0.045);

    border:
        1px dashed
        rgba(255, 255, 255, 0.16);

    border-radius: 8px;

    color: #94a3b8;

    font-size: 13px;
    line-height: 1.4;
}

/* Community page header */

.community-screen > h1 {
    margin:
        -16px -16px
        18px;

    padding:
        15px 16px 13px;

    text-align: center;

    background:
        rgba(17, 24, 32, 0.08);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.14);

    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);

    color: #ffffff;

    font-size: 23px;
    font-weight: 800;

    letter-spacing: 0.2px;

    text-shadow:
        0 2px 8px
        rgba(0, 0, 0, 0.35);
}

@media (min-width: 600px) {
    .community-screen > h1 {
        margin:
            -28px -32px
            22px;

        padding: 18px 20px;

        font-size: 27px;

        border-radius:
            0 0 12px 12px;
    }
}

#ticketStatus.status-locked {
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;

    border: 1px solid
        rgba(239, 68, 68, 0.45);
}

#ticketStatus.status-unlocked {
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;

    border: 1px solid
        rgba(34, 197, 94, 0.45);
}

#ticketStatus.status-waiting {
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;

    border: 1px solid
        rgba(148, 163, 184, 0.35);
}


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

/* Results history cards */

.result-history {
    margin-bottom: 22px;
    padding: 16px;

    background:
        rgba(17, 24, 32, 0.08);

    border:
        1px solid
        rgba(255, 255, 255, 0.22);

    border-radius: 14px;

    color: #f1f5f9;

    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}


/* Result date */

.result-history > h3 {
    margin: 0 0 12px;
    padding-bottom: 9px;

    color: #d1d5db;

    font-size: 15px;
    font-weight: 700;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.14);
}


/* Result closing message */

.result-message {
    display: inline-block;

    max-width: 92%;

    margin: 12px 0 2px;
    padding: 9px 12px;

    background:
        rgba(255, 255, 255, 0.08);

    border-left:
        3px solid #38bdf8;

    border-radius:
        12px 12px 12px 4px;

    color: #e2e8f0;

    font-size: 14px;
    line-height: 1.4;

    font-style: italic;
}

#currentDate {
    margin: 0 0 14px;

    color: #d1d5db;

    font-size: 15px;
    font-weight: 700;

    line-height: 1.3;
}

.result-status-badge {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    margin: 6px 0 14px;
    padding: 6px 10px;

    border-radius: 999px;

    font-size: 13px;
    font-weight: 800;

    line-height: 1.2;
}


/* Won */

.result-won {
    background: rgba(34, 197, 94, 0.16);
    color: #4ade80;

    border: 1px solid
        rgba(34, 197, 94, 0.42);
}


/* Lost */

.result-lost {
    background: rgba(239, 68, 68, 0.16);
    color: #f87171;

    border: 1px solid
        rgba(239, 68, 68, 0.42);
}


/* Postponed */

.result-postponed {
    background: rgba(59, 130, 246, 0.16);
    color: #60a5fa;

    border: 1px solid
        rgba(59, 130, 246, 0.42);
}

.result-history {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Compact Today-page status badges */

.vip-post .status-pill,
.vip-post #ticketStatus {
    width: fit-content;

    margin: 5px 0 10px;
    padding: 4px 8px;

    border-radius: 999px;

    font-size: 12px;
    font-weight: 800;

    line-height: 1.1;
}


/* Final Result posted state */

#finalStatus {
    background:
        rgba(148, 163, 184, 0.14);

    color: #cbd5e1;

    border:
        1px solid
        rgba(148, 163, 184, 0.28);
}


/* Result outcome badge on Today */

.vip-post .result-status-badge {
    margin: 5px 0 10px;

    padding: 4px 8px;

    font-size: 12px;

    border-radius: 999px;
}

.vip-post .status-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 5px 10px;

    background:
        rgba(249, 115, 22, 0.22);

    color: #ffb15c;

    border:
        1px solid
        rgba(249, 115, 22, 0.65);

    border-radius: 999px;

    box-shadow:
        0 2px 8px
        rgba(249, 115, 22, 0.16);
}

.live-icon {
    display: inline-block;

    animation:
        livePulse 1.6s
        ease-in-out infinite;
}
@keyframes livePulse {
    0%,
    100% {
        transform:
            rotate(45deg)
            scale(1);

        opacity: 1;
    }

    50% {
        transform:
            rotate(45deg)
            scale(1.22);

        opacity: 0.75;
    }
}

.live-icon {
    width: 14px;
    height: 14px;

    background: #ef4444;

    border: 2px solid #111827;

    transform: rotate(45deg);

    display: inline-block;

    animation:
        livePulse 1.3s
        ease-in-out infinite;
}

/* Account page */

#accountPage > h2 {
    margin: 0 0 16px;

    color: #ffffff;

    font-size: 23px;
    font-weight: 800;
}


/* VIP subscription glass card */

.subscription-card {
    padding: 16px;

    background:
        rgba(17, 24, 32, 0.08);

    border:
        1px solid
        rgba(255, 255, 255, 0.22);

    border-radius: 14px;

    color: #f1f5f9;
}

#accountSubscriptionTitle {
    margin: 0 0 12px;

    color: #ffffff;

    font-size: 18px;
    font-weight: 800;
}

#accountSubscriptionStatus {
    margin: 0 0 8px;

    padding: 7px 10px;

    width: fit-content;

    border-radius: 999px;

    background:
        rgba(148, 163, 184, 0.14);

    border:
        1px solid
        rgba(148, 163, 184, 0.28);

    color: #cbd5e1;

    font-size: 13px;
    font-weight: 700;
}

#accountSubscriptionPlan {
    margin: 8px 0 0;

    color: #d1d5db;

    font-size: 14px;
    font-weight: 600;
}

#accountSubscriptionStatus.subscription-inactive {
    background: rgba(239, 68, 68, 0.16);
    color: #f87171;

    border: 1px solid
        rgba(239, 68, 68, 0.42);
}

#accountSubscriptionStatus.subscription-active {
    background: rgba(34, 197, 94, 0.16);
    color: #4ade80;

    border: 1px solid
        rgba(34, 197, 94, 0.42);
}

#accountUnlockVipButton {
    display: block;
    width: 100%;

    margin-top: 14px;
    padding: 12px 16px;

    border: none;
    border-radius: 10px;

    background: #8b5cf6;
    color: #ffffff;

    font-size: 16px;
    font-weight: 800;

    cursor: pointer;
}

#accountUnlockVipButton:hover {
    background: #a78bfa;
}

#accountUnlockVipButton:active {
    transform: scale(0.97);
}

/* ================================
   PAYMENT FLOW - FULL STYLING
================================ */

/* All payment pages */
#paymentPage,
#paymentMethodPage,
#paymentConfirmationPage,
#paymentReviewPage,
#paymentPendingPage {
    max-width: 720px;
    margin: 0 auto;
    padding: 18px 16px 120px;
    color: #f5f7fb;
}

/* Shared card look */
.plan-card,
.selected-plan-summary,
.payment-transfer-details,
#paymentReviewPage,
#paymentPendingPage {
    background: rgba(11, 20, 36, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 22px;
    box-shadow:
        0 14px 38px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Page headings */
#paymentPage h2,
#paymentMethodPage h2,
#paymentConfirmationPage h2,
#paymentReviewPage h2,
#paymentPendingPage h2 {
    margin: 6px 0 10px;
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
}

.payment-intro,
#paymentMethodPage > p {
    margin: 0 0 18px;
    color: #b9c4d6;
    font-size: 1rem;
    line-height: 1.5;
}


/* ================================
   PLANS PAGE
================================ */

#paymentPage {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.plan-card {
    position: relative;
    padding: 22px 18px 18px;
}

.plan-card h3 {
    margin: 0 0 8px;
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
}

.plan-price {
    margin: 0;
    font-size: 2rem;
    font-weight: 900;
    color: #ffd166;
    line-height: 1.1;
}

.plan-duration {
    margin: 8px 0 16px;
    font-size: 1rem;
    color: #d4dbea;
    font-weight: 600;
}

.plan-card ul {
    margin: 0 0 18px;
    padding-left: 0;
    list-style: none;
}

.plan-card ul li {
    margin-bottom: 10px;
    color: #edf2fb;
    font-size: 0.98rem;
    line-height: 1.45;
    padding-left: 2px;
}

/* PRO card extra emphasis */
.plan-card-pro {
    border: 1px solid rgba(168, 110, 255, 0.42);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(168, 110, 255, 0.12) inset;
}

.best-value-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-bottom: 14px;
    padding: 7px 12px;

    border-radius: 999px;
    background: linear-gradient(135deg, #ffb347, #ff8c42);
    color: #161616;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.01em;
    box-shadow: 0 8px 20px rgba(255, 166, 0, 0.18);
}

/* Main plan buttons */
.choose-plan-button,
#paidButton,
#confirmPaymentButton {
    width: 100%;
    min-height: 52px;
    border: none;
    border-radius: 16px;
    cursor: pointer;

    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #ffffff;

    transition: 0.18s ease;
}

/* Default choose button */
.choose-plan-button {
    background: linear-gradient(135deg, #ff4fb7, #8a5cff);
    box-shadow: 0 12px 28px rgba(164, 95, 255, 0.25);
}

.choose-plan-button:hover,
#paidButton:hover,
#confirmPaymentButton:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.choose-plan-button:active,
#paidButton:active,
#confirmPaymentButton:active {
    transform: translateY(0);
}

/* ================================
   PAYMENT METHOD PAGE
================================ */

#paymentMethodPage {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.selected-plan-summary {
    padding: 18px;
}

.selected-plan-summary h3 {
    margin: 0 0 8px;
    font-size: 1.35rem;
    color: #ffffff;
    font-weight: 800;
}

#selectedPlanPrice {
    margin: 0 0 6px;
    color: #ffd166;
    font-weight: 900;
    font-size: 1.5rem;
}

#selectedPlanDuration {
    margin: 0;
    color: #cdd6e6;
    font-size: 0.96rem;
    font-weight: 600;
}

/* Payment method buttons */
.payment-method-button {
    width: 100%;
    min-height: 54px;
    border: none;
    border-radius: 16px;
    cursor: pointer;

    font-size: 1rem;
    font-weight: 800;
    color: #ffffff;

    transition: 0.18s ease;
}

#mtnPaymentButton {
    background: linear-gradient(135deg, #ffcb05, #f0a500);
    color: #181818;
    box-shadow: 0 12px 28px rgba(255, 203, 5, 0.18);
}

#orangePaymentButton {
    background: linear-gradient(135deg, #ff8a00, #ff6200);
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(255, 98, 0, 0.2);
}

.payment-method-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.payment-method-button:active {
    transform: translateY(0);
}

/* ================================
   PAYMENT CONFIRMATION PAGE
================================ */

#paymentConfirmationPage {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.payment-transfer-details {
    padding: 18px;
}

.payment-transfer-details h3 {
    margin: 0 0 12px;
    font-size: 1.35rem;
    color: #ffffff;
    font-weight: 800;
}

.payment-transfer-details p {
    margin: 0 0 10px;
    color: #dce5f3;
    line-height: 1.5;
}

.payment-transfer-details strong {
    color: #ffffff;
    font-weight: 800;
}

#paymentConfirmationPage h3 {
    margin: 6px 0 4px;
    color: #ffffff;
    font-size: 1.18rem;
    font-weight: 800;
}

#paymentConfirmationPage label {
    display: block;
    margin: 4px 0 6px;
    color: #d8e1ef;
    font-size: 0.95rem;
    font-weight: 700;
}

#paymentConfirmationPage input {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-size: 1rem;
    outline: none;

    box-sizing: border-box;
    transition: 0.18s ease;
}

#paymentConfirmationPage input::placeholder {
    color: #9fb0c9;
}

#paymentConfirmationPage input:focus {
    border-color: rgba(255, 79, 183, 0.75);
    box-shadow: 0 0 0 3px rgba(255, 79, 183, 0.16);
}

#paidButton {
    margin-top: 8px;
    background: linear-gradient(135deg, #ff4fb7, #8a5cff);
    box-shadow: 0 12px 28px rgba(164, 95, 255, 0.25);
}

/* ================================
   REVIEW PAGE
================================ */

#paymentReviewPage {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 18px;
}

#paymentReviewPage p {
    margin: 0;
    color: #dce5f3;
    line-height: 1.5;
}

#paymentReviewPage strong {
    color: #ffffff;
}


#confirmPaymentButton {
    background: linear-gradient(135deg, #16c172, #0ea766);
    box-shadow: 0 12px 28px rgba(22, 193, 114, 0.2);
}

/* ================================
   PENDING PAGE
================================ */

#paymentPendingPage {
    text-align: center;
    padding: 26px 20px;
}

#paymentSubmittedTitle {
    margin-bottom: 10px;
}

#paymentSubmittedMessage {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 700;
}

#paymentPendingPage p {
    color: #c6d3e8;
    line-height: 1.6;
}

/* ================================
   SMALL MOBILE POLISH
================================ */

@media (max-width: 640px) {
    #paymentPage,
    #paymentMethodPage,
    #paymentConfirmationPage,
    #paymentPendingPage {
        padding: 16px 14px 110px;
    }

    #paymentReviewPage {
        box-sizing: border-box;
        padding: 16px 14px 20px;
    }

    #paymentPage h2,
    #paymentMethodPage h2,
    #paymentConfirmationPage h2,
    #paymentReviewPage h2,
    #paymentPendingPage h2 {
        font-size: 1.7rem;
    }

    .plan-card {
        padding: 18px 15px 16px;
    }

    .plan-price {
        font-size: 1.75rem;
    }

    .plan-card h3 {
        font-size: 1.35rem;
    }
}

#paymentMethodPage {
    gap: 18px;
}

#orangePaymentButton {
    margin-top: 6px;
}


.payment-intro {
    color: #dbe4f0;

    font-size: 15px;
    font-weight: 600;
}

#accountSubscriptionStatus.subscription-pending {
    background: rgba(234, 179, 8, 0.16);
    color: #fde047;

    border: 1px solid
        rgba(234, 179, 8, 0.42);
}


#paymentMethodPage > p {
    color: #dbe4f0;

    font-size: 15px;
    font-weight: 700;

    margin: 4px 0 10px;
}

/* ================================
   JOIN SCREEN
================================ */

.join-screen {
    width: 100%;
    max-width: none;

    min-height: 100vh;

    margin: 0;
    padding: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: #111820;
    background-image:
        url("vip-pattern.svg");

    background-repeat: repeat;
    background-size: 360px 280px;

    color: #ffffff;
}


/* Glass welcome card */

.join-card {
    width: 100%;
    max-width: 520px;

    padding: 28px 22px;

    text-align: center;

    background:
        rgba(17, 24, 32, 0.10);

    border:
        1px solid
        rgba(255, 255, 255, 0.24);

    border-radius: 22px;

    box-shadow:
        0 14px 40px
        rgba(0, 0, 0, 0.28);
}


/* App icon */

.join-logo {
    width: 82px;
    height: 82px;

    margin-bottom: 12px;

    border-radius: 18px;
}


/* Heading */

.join-card h1 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: 28px;
    font-weight: 900;

    line-height: 1.2;
}


/* Short message */

.join-description {
    margin: 0 auto 20px;

    max-width: 420px;

    color: #d1d5db;

    font-size: 15px;
    line-height: 1.5;
}


/* Benefits */

.join-benefits {
    display: flex;
    flex-direction: column;

    gap: 8px;

    margin-bottom: 22px;

    color: #e5e7eb;

    font-size: 14px;
    font-weight: 700;
}


/* Main JOIN button */

#otherJoinButton {
    width: 100%;

    min-height: 54px;

    padding: 13px 18px;

    border: none;
    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #ec4899,
            #8b5cf6
        );

    color: #ffffff;

    font-size: 17px;
    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 10px 26px
        rgba(139, 92, 246, 0.28);

    transition:
        transform 0.15s ease,
        filter 0.2s ease;
}

#otherJoinButton:hover {
    filter: brightness(1.08);
}

#otherJoinButton:active {
    transform: scale(0.97);
}


/* Phone */

@media (max-width: 480px) {
    .join-screen {
        padding: 14px;
    }

    .join-card {
        padding: 24px 17px;
    }

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

    .join-logo {
        width: 72px;
        height: 72px;
    }
}

.join-screen.hidden,
.community-screen.hidden {
    display: none !important;
}

#languageSwitchButton {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 145px;
    min-height: 44px;
    margin: 0 0 18px;
    padding: 10px 20px;

    color: #e5f7ff;
    background: rgba(56, 189, 248, 0.09);
    border: 1px solid rgba(125, 211, 252, 0.85);
    border-radius: 999px;

    box-shadow:
        0 0 12px rgba(56, 189, 248, 0.4),
        0 0 24px rgba(56, 189, 248, 0.18),
        inset 0 0 10px rgba(56, 189, 248, 0.08);

    font: inherit;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;

    cursor: pointer;
    transition:
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
}

@media (hover: hover) {
    #languageSwitchButton:hover {
        background: rgba(56, 189, 248, 0.17);
        box-shadow:
            0 0 16px rgba(56, 189, 248, 0.55),
            0 0 30px rgba(56, 189, 248, 0.25);
    }
}

#languageSwitchButton:active {
    transform: scale(0.96);
}

#languageSwitchButton:focus-visible {
    outline: 3px solid #bae6fd;
    outline-offset: 4px;
}


.vip-post {
    position: relative;
    padding-bottom: 38px;
}

.vip-post .post-time {
    position: absolute;

    right: 14px;
    bottom: 9px;

    width: auto;
    margin: 0;
    padding: 0;

    color: #cbd5e1;

    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;

    letter-spacing: 0.2px;
}
/* ========================================
   TODAY - EMPTY POST MESSAGES
======================================== */

#halftimeWaiting,
#finalWaiting {
    display: block;
    width: 100%;

    margin: 8px 0 10px;
    padding: 7px 10px;

    background:
        rgba(255, 255, 255, 0.06);

    border: none;
    border-left:
        3px solid #94a3b8;

    border-radius: 6px;

    color: #f1f5f9;

    font-size: 14px;
    line-height: 1.4;
}


/* ========================================
   TODAY - WAITING STATUS PILLS
======================================== */

#ticketStatus.status-waiting,
#halftimeStatus.status-waiting,
#finalStatus.status-waiting {
    background:
        rgba(148, 163, 184, 0.12) !important;

    color:
        #d1d5db !important;

    border:
        1px solid
        rgba(148, 163, 184, 0.28) !important;

    box-shadow:
        none !important;
}

.result-history {
    position: relative;
    padding-bottom: 38px;
}

.result-history .post-time {
    position: absolute;

    right: 14px;
    bottom: 9px;

    width: auto;
    margin: 0;
    padding: 0;

    color: #cbd5e1;

    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;

    letter-spacing: 0.2px;
}



/* ==================================================
   VIP ADMIN APP
   ================================================== */

.admin-body {
    margin: 0;
    min-height: 100vh;

    background:
        #111820
        url("vip-pattern.svg")
        repeat;

    color: #f8fafc;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* ==================================================
   MAIN APP SHELL
   ================================================== */

.admin-body #adminApp {
    width: 100%;
    max-width: 560px;
    min-height: 100vh;

    margin: 0 auto;

    padding:
        0
        16px
        110px;

    box-sizing: border-box;
}


/* ==================================================
   HEADER
   ================================================== */

.admin-app-header {
    position: sticky;
    top: 0;
    z-index: 50;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    margin:
        0
        -16px
        24px;

    padding:
        18px
        16px
        16px;

    background:
        rgba(
            17,
            24,
            32,
            0.94
        );

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    backdrop-filter:
        blur(14px);
}

.admin-eyebrow {
    margin:
        0
        0
        4px;

    color: #94a3b8;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 1.6px;
}

.admin-title {
    margin: 0;

    color: #ffffff;

    font-size: 27px;
    font-weight: 900;

    line-height: 1.1;
}

.admin-subtitle {
    margin:
        5px
        0
        0;

    color: #94a3b8;

    font-size: 13px;
    font-weight: 600;
}

.admin-badge {
    flex-shrink: 0;

    padding:
        7px
        10px;

    border:
        1px solid
        rgba(
            168,
            85,
            247,
            0.45
        );

    border-radius: 999px;

    background:
        rgba(
            168,
            85,
            247,
            0.13
        );

    color: #d8b4fe;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1px;
}


/* ==================================================
   PAGE HEADING
   ================================================== */

.admin-page-heading {
    margin-bottom: 18px;
}

.admin-page-kicker {
    margin:
        0
        0
        5px;

    color: #a855f7;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 1.4px;
}

.admin-page-heading h2 {
    margin:
        0
        0
        5px;

    color: #ffffff;

    font-size: 25px;
    font-weight: 900;
}

.admin-page-heading > p:last-child {
    margin: 0;

    color: #94a3b8;

    font-size: 14px;
}


/* ==================================================
   DASHBOARD
   ================================================== */

.admin-dashboard {
    padding: 0;
}

.dashboard-grid {
    display: grid;

    gap: 14px;
}

.admin-body .dashboard-card {
    display: flex;
    align-items: center;

    gap: 16px;

    width: 100%;

    padding:
        20px
        18px;

    box-sizing: border-box;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    border-radius: 18px;

    background:
        rgba(
            25,
            34,
            44,
            0.88
        );

    box-shadow:
        0
        12px
        30px
        rgba(
            0,
            0,
            0,
            0.18
        );
}

.dashboard-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    flex-shrink: 0;

    border-radius: 16px;

    background:
        rgba(
            168,
            85,
            247,
            0.14
        );

    font-size: 27px;
}

.dashboard-card-content {
    min-width: 0;
}

.admin-body
.dashboard-card-content
p {
    margin:
        0
        0
        4px;

    color: #94a3b8;

    font-size: 13px;
    font-weight: 800;
}

.admin-body
.dashboard-card-content
h3 {
    margin: 0;

    color: #ffffff;

    font-size: 31px;
    font-weight: 900;

    line-height: 1;
}


/* ==================================================
   FIXED BOTTOM NAVIGATION
   ================================================== */

.admin-body .admin-nav {
    position: fixed;

    left: 50%;
    bottom: 0;

    z-index: 100;

    transform:
        translateX(-50%);

    display: grid;

    grid-template-columns:
        repeat(
            5,
            1fr
        );

    width: 100%;
    max-width: 560px;

    margin: 0;

    padding:
        8px
        8px
        calc(
            8px +
            env(
                safe-area-inset-bottom
            )
        );

    box-sizing: border-box;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.09
        );

    background:
        rgba(
            15,
            22,
            29,
            0.97
        );

    box-shadow:
        0
        -10px
        30px
        rgba(
            0,
            0,
            0,
            0.32
        );

    backdrop-filter:
        blur(16px);
}

.admin-body
.admin-nav
button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 4px;

    min-width: 0;
    min-height: 58px;

    margin: 0;
    padding:
        6px
        2px;

    border: 0;
    border-radius: 12px;

    background: transparent;

    color: #94a3b8;

    font-family: inherit;

    font-size: 10px;
    font-weight: 800;

    cursor: pointer;
}

.admin-body
.admin-nav
button:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.04
        );
}

.admin-body
.admin-nav
button.active {
    background:
        rgba(
            168,
            85,
            247,
            0.13
        );

    color: #d8b4fe;
}

.admin-nav-icon {
    display: block;

    font-size: 21px;
    line-height: 1;
}


/* ==================================================
   CURRENT ADMIN SECTIONS
   TEMPORARY BASE STYLE
   ================================================== */

.admin-body
#adminPaymentsPage,

.admin-body
#adminPostPage,

.admin-body
#adminMembersPage,

.admin-body
#adminManagePostsPage {
    color: #f8fafc;
}

.admin-body
#adminPaymentsPage h2,

.admin-body
#adminPostPage h2,

.admin-body
#adminMembersPage h2,

.admin-body
#adminManagePostsPage h2 {
    color: #ffffff;
}


/* ==================================================
   MOBILE
   ================================================== */

@media (
    max-width: 480px
) {

    .admin-body #adminApp {
        padding-left: 14px;
        padding-right: 14px;
    }

    .admin-app-header {
        margin-left: -14px;
        margin-right: -14px;

        padding-left: 14px;
        padding-right: 14px;
    }

    .admin-title {
        font-size: 24px;
    }

    .admin-body
    .admin-nav
    button {
        font-size: 9px;
    }

    .admin-nav-icon {
        font-size: 20px;
    }
}


/* ==================================================
   DESKTOP
   ================================================== */

@media (
    min-width: 700px
) {

    .admin-body {
        padding:
            24px
            0;
    }

    .admin-body #adminApp {
        min-height:
            calc(
                100vh -
                48px
            );

        border:
            1px solid
            rgba(
                255,
                255,
                255,
                0.08
            );

        border-radius: 24px;

        background:
            rgba(
                13,
                20,
                27,
                0.75
            );

        box-shadow:
            0
            24px
            70px
            rgba(
                0,
                0,
                0,
                0.32
            );

        overflow: hidden;
    }

    .admin-app-header {
        border-radius:
            24px
            24px
            0
            0;
    }
}

/* Slightly larger admin navigation on laptop and desktop only */
@media (min-width: 601px) {
    #adminDashboardButton,
    #adminPaymentsButton,
    #adminPostButton,
    #adminMembersButton,
    #adminManagePostsButton {
        min-height: 62px;
        padding: 8px 10px;
        font-size: 0.88rem;
    }

    #adminDashboardButton > span:first-child,
    #adminPaymentsButton > span:first-child,
    #adminPostButton > span:first-child,
    #adminMembersButton > span:first-child,
    #adminManagePostsButton > span:first-child {
        font-size: 1.65rem;
        line-height: 1;
    }
}


/* ==================================================
   ADMIN DASHBOARD - REMOVE OLD WHITE CARD STYLING
   ================================================== */

.admin-body #adminDashboardPage {
    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    box-shadow: none;
}

.admin-body
#adminDashboardPage
.admin-page-heading {
    margin:
        0
        0
        18px;

    padding: 0;

    background: transparent;
}

.admin-body
#adminDashboardPage
.admin-page-heading h2 {
    display: block;

    margin:
        4px
        0
        6px;

    color: #ffffff;

    font-size: 26px;
    font-weight: 900;
}

.admin-body
#adminDashboardPage
.admin-page-heading p {
    padding: 0;
}

.admin-body
#adminDashboardPage
.dashboard-grid {
    margin: 0;
    padding: 0;

    background: transparent;
}

.admin-body
#adminDashboardPage
.dashboard-card {
    margin: 0;
}


/* ==================================================
   ADMIN TEXT VISIBILITY + ACTIVE NAV UNDERLINE
   ================================================== */

/* Header small title */
.admin-body .admin-eyebrow {
    color: #d8b4fe;
}

/* Header subtitle */
.admin-body .admin-subtitle {
    color: #d7dee8;
}

/* Dashboard description */
.admin-body
.admin-page-heading
> p:last-child {
    color: #cbd5e1;
}

/* Dashboard card label */
.admin-body
.dashboard-card-content
p {
    color: #d7dee8;
}

/* Inactive bottom navigation text */
.admin-body
.admin-nav
button {
    position: relative;

    color: #d7dee8;

    background: transparent;
}

/* Keep inactive icons clearly visible */
.admin-body
.admin-nav
button
.admin-nav-icon {
    opacity: 1;
}

/* Remove the old active purple badge look */
.admin-body
.admin-nav
button.active {
    background: transparent;

    color: #ffffff;

    border-radius: 0;
}

/* Thick active underline */
.admin-body
.admin-nav
button.active::after {
    content: "";

    position: absolute;

    left: 18%;
    right: 18%;
    bottom: -1px;

    height: 9px;

    border-bottom:
        4px solid #facc15;

    border-radius:
        0 0 50% 50%;

    box-shadow:
        0 4px 9px
        rgba(
            250,
            204,
            21,
            0.35
        );
}
/* Active icon slightly brighter */
.admin-body
.admin-nav
button.active {
    background: transparent;

    color: #facc15;

    border-radius: 0;
}

/* Improve readability without changing sizes */
.admin-body
.admin-subtitle,

.admin-body
.admin-page-heading
p,

.admin-body
.dashboard-card-content
p,

.admin-body
.admin-nav
button {
    text-shadow:
        0
        1px
        2px
        rgba(
            0,
            0,
            0,
            0.45
        );
}


/* ==================================================
   ADMIN MOBILE NAV - REAL PHONE SIZE
   ================================================== */

@media (max-width: 600px) {

    .admin-body
    .admin-nav
    button {
        min-height: 72px;

        padding:
            8px
            2px;

        font-size: 12px;
        font-weight: 900;

        gap: 6px;
    }

    .admin-body
    .admin-nav
    .admin-nav-icon {
        font-size: 27px;
    }

    .admin-body
    .admin-nav
    button.active::after {
        left: 14%;
        right: 14%;

        height: 10px;

        border-bottom-width: 4px;
    }
}


/* ==================================================
   ADMIN LOGIN SCREEN
   ================================================== */

.admin-login-screen {
    min-height: 100svh;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;
    box-sizing: border-box;
}

.admin-login-card {
    width: 100%;
    max-width: 420px;

    padding: 30px 24px;

    box-sizing: border-box;

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius: 24px;

    background:
        rgba(23, 33, 43, 0.92);

    box-shadow:
        0 24px 60px
        rgba(0, 0, 0, 0.35);
}

.admin-login-eyebrow {
    margin:
        0
        0
        8px;

    color: #facc15;

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 1.6px;
}

.admin-login-card h1 {
    margin:
        0
        0
        8px;

    color: #ffffff;

    font-size: 30px;
    font-weight: 900;
}

.admin-login-text {
    margin:
        0
        0
        26px;

    color: #cbd5e1;

    font-size: 14px;
    line-height: 1.5;
}


/* LOGIN FORM */

.admin-login-card form {
    display: flex;
    flex-direction: column;

    gap: 9px;
}

.admin-login-card label {
    margin-top: 5px;

    color: #e2e8f0;

    font-size: 13px;
    font-weight: 800;
}

.admin-login-card input {
    width: 100%;
    height: 50px;

    padding:
        0
        14px;

    box-sizing: border-box;

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    border-radius: 13px;

    outline: none;

    background:
        rgba(10, 17, 24, 0.82);

    color: #ffffff;

    font-size: 16px;
}

.admin-login-card input:focus {
    border-color: #facc15;

    box-shadow:
        0 0 0 3px
        rgba(250, 204, 21, 0.12);
}

/* Hide admin loging screen */
html:not(.admin-ready) #adminLoginScreen,
html:not(.admin-ready) #adminApp {
    visibility: hidden;
}

/* SIGN IN BUTTON */

#adminLoginButton {
    width: 100%;
    min-height: 52px;

    margin-top: 14px;

    border: 0;
    border-radius: 14px;

    background: #facc15;

    color: #111820;

    font-size: 15px;
    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 10px 24px
        rgba(250, 204, 21, 0.18);
}

#adminLoginButton:active {
    transform: scale(0.98);
}

#adminLoginButton:disabled {
    opacity: 0.65;
}


/* LOGIN MESSAGE / ERRORS */

#adminLoginMessage {
    min-height: 20px;

    margin:
        8px
        0
        0;

    color: #fca5a5;

    font-size: 13px;
    font-weight: 700;

    line-height: 1.4;
}


/* ==================================================
   ADMIN HEADER ACTIONS
   ================================================== */

.admin-header-actions {
    flex-shrink: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 8px;
}


/* ADMIN BADGE */

.admin-body .admin-badge {
    border-color:
        rgba(250, 204, 21, 0.38);

    background:
        rgba(250, 204, 21, 0.09);

    color: #fde68a;
}


/* ==================================================
   ADMIN LOG OUT BUTTON
   ================================================== */

.admin-body
.admin-logout-button {
    min-width: 84px;

    padding:
        9px
        13px;

    border:
        1px solid
        rgba(255, 45, 45, 0.85);

    border-radius: 12px;

    background:
        rgba(40, 8, 12, 0.42);

    color: #ff6b6b;

    font-family: inherit;

    font-size: 12px;
    font-weight: 900;

    cursor: pointer;

    backdrop-filter:
        blur(12px);

    box-shadow:
        inset 0 0 12px
        rgba(255, 40, 40, 0.10),

        0 0 8px
        rgba(255, 35, 35, 0.55),

        0 0 18px
        rgba(255, 35, 35, 0.28);

    text-shadow:
        0 0 7px
        rgba(255, 60, 60, 0.70);
}
.admin-body
.admin-logout-button:active {
    transform: scale(0.96);

    background:
        rgba(70, 10, 15, 0.55);

    box-shadow:
        inset 0 0 15px
        rgba(255, 40, 40, 0.18),

        0 0 10px
        rgba(255, 30, 30, 0.75),

        0 0 24px
        rgba(255, 30, 30, 0.38);
}
.admin-body
.admin-logout-button:disabled {
    opacity: 0.60;
}


/* ==================================================
   PHONE LOGIN TUNING
   ================================================== */

@media (max-width: 600px) {

    .admin-login-screen {
        padding:
            24px
            18px;
    }

    .admin-login-card {
        padding:
            28px
            20px;
    }

    .admin-login-card h1 {
        font-size: 28px;
    }

    .admin-body
    .admin-logout-button {
        min-width: 72px;
    }
}


/* ==================================================
   ADMIN PAYMENTS PAGE
   ================================================== */

.admin-body
#adminPaymentsPage {
    margin: 0;
    padding:
        8px
        0
        20px;

    border: 0;

    background: transparent;

    color: #f8fafc;

    box-shadow: none;
}


/* PAGE TITLE */

.admin-body
#adminPaymentsPage
> h2 {
    margin:
        0
        0
        18px;

    color: #ffffff;

    font-size: 27px;
    font-weight: 900;
}


/* PAYMENT HISTORY TITLE */

.admin-body
#adminPaymentsPage
> h3 {
    margin:
        30px
        0
        16px;

    padding-top: 22px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.09
        );

    color: #ffffff;

    font-size: 21px;
    font-weight: 900;
}


/* LISTS */

.admin-body
#pendingPaymentsList,

.admin-body
#paymentHistoryList {
    display: flex;
    flex-direction: column;

    gap: 14px;

    margin: 0;
    padding: 0;

    background: transparent;
}


/* ==================================================
   EACH PAYMENT CARD
   ================================================== */

.admin-body
#pendingPaymentsList
> div,

.admin-body
#paymentHistoryList
> div {
    width: 100%;

    margin: 0;

    padding:
        18px
        16px;

    box-sizing: border-box;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );

    border-radius: 18px;

    background:
        rgba(
            23,
            33,
            43,
            0.92
        );

    color: #e2e8f0;

    box-shadow:
        0
        10px
        28px
        rgba(
            0,
            0,
            0,
            0.20
        );
}


/* TEXT INSIDE CARDS */

.admin-body
#pendingPaymentsList
> div
p,

.admin-body
#paymentHistoryList
> div
p {
    margin:
        5px
        0;

    color: #d7dee8;

    font-size: 14px;
    line-height: 1.45;
}


/* PLAN NAME - FIRST STRONG TEXT */

.admin-body
#pendingPaymentsList
> div
strong:first-child,

.admin-body
#paymentHistoryList
> div
strong:first-child {
    color: #facc15;
}


/* ==================================================
   PENDING PAYMENT BUTTONS
   ================================================== */

.admin-body
#pendingPaymentsList
button {
    min-height: 44px;

    margin:
        14px
        8px
        0
        0;

    padding:
        9px
        14px;

    border-radius: 11px;

    font-family: inherit;

    font-size: 13px;
    font-weight: 900;

    cursor: pointer;
}


/* APPROVE */

.admin-body
#pendingPaymentsList
> div
button:first-of-type {
    border:
        1px solid
        rgba(
            34,
            197,
            94,
            0.70
        );

    background:
        rgba(
            22,
            101,
            52,
            0.22
        );

    color: #86efac;

    box-shadow:
        0
        0
        12px
        rgba(
            34,
            197,
            94,
            0.16
        );
}


/* BAN */

.admin-body
#pendingPaymentsList
> div
button:last-of-type {
    border:
        1px solid
        rgba(
            239,
            68,
            68,
            0.70
        );

    background:
        rgba(
            127,
            29,
            29,
            0.22
        );

    color: #fca5a5;

    box-shadow:
        0
        0
        12px
        rgba(
            239,
            68,
            68,
            0.15
        );
}


/* BUTTON PRESS */

.admin-body
#pendingPaymentsList
button:active {
    transform:
        scale(0.97);
}


/* ==================================================
   EMPTY PAYMENT MESSAGES
   ================================================== */

.admin-body
#pendingPaymentsList
> p,

.admin-body
#paymentHistoryList
> p {
    margin: 0;

    padding:
        18px;

    border:
        1px dashed
        rgba(
            255,
            255,
            255,
            0.12
        );

    border-radius: 16px;

    background:
        rgba(
            23,
            33,
            43,
            0.65
        );

    color: #cbd5e1;

    text-align: center;

    font-size: 14px;
    font-weight: 700;
}


/* ==================================================
   PHONE PAYMENTS
   ================================================== */

@media (max-width: 600px) {

    .admin-body
    #adminPaymentsPage
    > h2 {
        font-size: 26px;
    }

    .admin-body
    #pendingPaymentsList
    > div,

    .admin-body
    #paymentHistoryList
    > div {
        padding:
            17px
            15px;
    }
}



/* Post page — clear glass like the member cards */
#adminPostPage {
    color: #f8f4e9 !important;
    background: rgba(18, 21, 29, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
    border-radius: 17px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#adminPostPage #imageSlots > div,
#adminPostPage #ticketRedactionEditor,
#adminPostPage #resultStatusField,
#adminPostPage #closingMessageField {
    background: rgba(18, 21, 29, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.42) !important;
    border-radius: 16px;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#adminPostPage h2,
#adminPostPage h3,
#adminPostPage label,
#adminPostPage p,
#adminPostPage #zoomLevelText {
    color: #f8f4e9 !important;
}

#adminPostPage select,
#adminPostPage textarea,
#adminPostPage input[type="text"]:not(#canvasTextEditor) {
    box-sizing: border-box;
    max-width: 100%;
    color: #fff !important;
    background: rgba(18, 21, 29, 0.58) !important;
    border: 1px solid rgba(255, 255, 255, 0.40) !important;
    border-radius: 11px;
    padding: 12px 14px;
    box-shadow: none !important;
}

#adminPostPage select option {
    color: #fff;
    background: #20232c;
}

#adminPostPage textarea::placeholder,
#adminPostPage input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.65);
}

#adminPostPage input[type="file"] {
    max-width: 100%;
    color: #f8f4e9 !important;
    font: inherit;
}

#adminPostPage input[type="file"]::file-selector-button,
#adminPostPage button:not(#publishButton) {
    min-height: 38px;
    margin: 4px 5px 4px 0;
    padding: 8px 12px;
    color: #f8f4e9 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    border-radius: 10px;
    box-shadow: none !important;
    font: inherit;
    cursor: pointer;
}

#adminPostPage button:not(#publishButton):hover {
    background: rgba(255, 255, 255, 0.18) !important;
}

#adminPostPage .canvas-zoom-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

#adminPostPage #publishButton {
    padding: 13px 20px;
    color: #17191f;
    background: #f5cf68;
    border: 1px solid #ffe5a0;
    border-radius: 11px;
    font-weight: 800;
    cursor: pointer;
}

/* Let the open screenshot editor use the screen */
#adminPostPage #ticketRedactionEditor {
    position: fixed !important;
    top: 3dvh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;

    box-sizing: border-box;
    width: min(720px, calc(100vw - 20px)) !important;
    max-height: 94dvh;
    margin: 0 !important;
    padding: 16px;
    overflow-y: auto;

    color: #fff;
    background: rgba(19, 22, 30, 0.97) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65) !important;
}

#adminPostPage #ticketCanvasContainer {
    max-width: 100%;
    overflow: auto;
}

/*Phone lay out to open editor*/
@media (max-width: 600px) {
    #adminPostPage #ticketRedactionEditor {
        position: fixed !important;
        top: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        left: 8px !important;
        transform: none !important;

        box-sizing: border-box;
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 14px 18px;

        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    #adminPostPage #ticketCanvasContainer {
        max-width: 100%;
        max-height: 50dvh;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}


/* Reusable glowing glass buttons */
.admin-glow-button {
    --glow-rgb: 236, 187, 62;
    --glow-text: #ffe18a;

    color: var(--glow-text) !important;
    background: rgba(var(--glow-rgb), 0.11) !important;
    border: 1px solid rgba(var(--glow-rgb), 0.75) !important;
    border-radius: 12px !important;
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.10),
        0 0 16px rgba(var(--glow-rgb), 0.16) !important;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
}

.admin-glow-button:hover {
    background: rgba(var(--glow-rgb), 0.20) !important;
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.14),
        0 0 22px rgba(var(--glow-rgb), 0.30) !important;
}

.admin-glow-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.admin-glow-button--green {
    --glow-rgb: 30, 205, 93;
    --glow-text: #80ffab;
}

.admin-glow-button--red {
    --glow-rgb: 242, 65, 65;
    --glow-text: #ff9999;
}

/* Override the old solid-yellow Publish rule */
#adminPostPage #publishButton.admin-glow-button {
    width: 100%;
    padding: 13px 20px;
    color: var(--glow-text) !important;
    background: rgba(var(--glow-rgb), 0.11) !important;
    border: 1px solid rgba(var(--glow-rgb), 0.75) !important;
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.10),
        0 0 16px rgba(var(--glow-rgb), 0.16) !important;
}


/* MEMBERS PAGE */
#adminMembersPage {
    color: #f8f4e9 !important;
    background: rgba(18, 21, 29, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 17px;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#adminMembersPage h2,
#adminMembersPage h3,
#adminMembersPage p,
#adminMembersPage #memberSearchCount {
    color: #f8f4e9 !important;
}

#adminMembersPage #memberSearch {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 11px 14px;
    color: #fff !important;
    background: rgba(15, 19, 28, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.48) !important;
    border-radius: 11px;
    font: inherit;
}

#adminMembersPage #memberSearch::placeholder {
    color: rgba(255, 255, 255, 0.68);
}

#adminMembersPage #memberSearch:focus {
    outline: 2px solid rgba(246, 206, 100, 0.8);
    outline-offset: 2px;
}

#adminMembersPage #membersList {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}

#adminMembersPage .member-card {
    box-sizing: border-box;
    min-width: 0;
    padding: 18px;
    color: #f8f4e9 !important;
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(255, 255, 255, 0.46) !important;
    border-radius: 15px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

#adminMembersPage .member-card h3 {
    margin: 0 0 12px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 1.1rem;
    overflow-wrap: anywhere;
}

#adminMembersPage .member-card p {
    margin: 0;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

#adminMembersPage .member-card button {
    min-height: 42px;
    margin-top: 16px;
    padding: 9px 14px;
    border-radius: 11px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

#adminMembersPage .ban-member-button {
    color: #ff9999 !important;
    background: rgba(242, 65, 65, 0.11) !important;
    border: 1px solid rgba(242, 65, 65, 0.78) !important;
    box-shadow: 0 0 16px rgba(242, 65, 65, 0.17) !important;
}

#adminMembersPage .unban-member-button {
    color: #80ffab !important;
    background: rgba(30, 205, 93, 0.11) !important;
    border: 1px solid rgba(30, 205, 93, 0.78) !important;
    box-shadow: 0 0 16px rgba(30, 205, 93, 0.17) !important;
}

#adminMembersPage .member-card button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 600px) {
    #adminMembersPage {
        padding: 18px !important;
    }

    #adminMembersPage .member-card {
        padding: 15px;
    }
}

/* Compact Members cards — all details remain visible */
#adminMembersPage #membersList {
    gap: 9px;
    margin-top: 12px;
}

#adminMembersPage .member-card {
    padding: 11px 14px !important;
}

#adminMembersPage .member-card h3 {
    margin: 0 0 5px;
    padding-bottom: 6px;
    font-size: 1rem;
}

#adminMembersPage .member-card p {
    margin: 0 !important;
    padding: 3px 0 !important;
    border-bottom-color: rgba(255, 255, 255, 0.08);
    font-size: 0.86rem;
    line-height: 1.3;
}

#adminMembersPage .member-card button {
    min-height: 36px;
    margin-top: 9px;
    padding: 7px 12px;
    font-size: 0.86rem;
}

@media (max-width: 600px) {
    #adminMembersPage {
        padding: 14px !important;
    }

    #adminMembersPage .member-card {
        padding: 10px 12px !important;
    }
}


/* MANAGE POSTS — one wide outer card */
#adminManagePostsPage {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-inline: auto;
    padding: 18px;
    color: #f8f4e9;
    background: rgba(18, 21, 29, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 17px;
    backdrop-filter: none;
}

#adminManagePostsPage h2,
#adminManagePostsPage h3,
#adminManagePostsPage h4,
#adminManagePostsPage p,
#adminManagePostsPage label {
    color: #f8f4e9;
}

/* Each post stays inside the outer card */
#publishedPostsList {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 16px;
}

#adminManagePostsPage .published-post-card {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 18px 0 26px;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid rgba(255, 225, 138, 0.65) !important;
    border-radius: 0;
    box-shadow: none !important;
}

#adminManagePostsPage .published-post-card:last-child {
    border-bottom: 0 !important;
}

#adminManagePostsPage .published-post-title {
    margin: 0 0 8px;
    padding: 0 0 10px;
    color: #fff;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

#adminManagePostsPage .published-post-date {
    display: inline-block;
    width: fit-content;
    margin: 2px 0 12px;
    padding: 6px 10px;
    color: #ffe6a5;
    background: rgba(255, 225, 138, 0.12);
    border: 1px solid rgba(255, 225, 138, 0.45);
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
}

#adminManagePostsPage .published-post-caption {
    margin: 0 0 12px;
    padding: 0;
    color: #f8f4e9;
    background: transparent;
    border: 0;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

#adminManagePostsPage .published-result-badge {
    display: inline-block;
    margin-bottom: 12px;
}

#adminManagePostsPage .published-post-images {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    margin: 12px 0;
    padding: 0;
    background: transparent;
    border: 0;
}

#adminManagePostsPage .published-post-image {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: 160px;
    max-height: 160px;
    margin: 0;
    object-fit: cover;
    object-position: top;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 10px;
}

/* Edit stays left; Delete moves to the right */
#adminManagePostsPage .published-post-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 16px;
}

#adminManagePostsPage .published-post-actions button,
#publishedPostEditor button:not(#savePublishedPostButton) {
    min-height: 40px;
    padding: 9px 13px;
    color: #e9edff;
    background: rgba(105, 130, 235, 0.12);
    border: 1px solid rgba(140, 164, 255, 0.65);
    border-radius: 11px;
    box-shadow: 0 0 14px rgba(105, 130, 235, 0.12);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

#adminManagePostsPage .published-post-actions .delete-published-post-button {
    margin-left: auto;
    color: #ffd2d2;
    background: rgba(220, 35, 50, 0.2);
    border: 1px solid #ff5968;
    box-shadow:
        0 0 12px rgba(255, 55, 75, 0.65),
        0 0 24px rgba(255, 55, 75, 0.3);
}

/* Editor content remains inside the same outer card */
#publishedPostEditor {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 18px 0 0;
    padding: 0;
    color: #f8f4e9;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#publishedPostEditor h2 {
    margin-top: 0;
}

#publishedPostEditFields {
    width: 100%;
    min-width: 0;
}

#publishedPostEditor .published-screenshot-edit {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 18px 0;
    padding: 16px 0 0;
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0;
    box-shadow: none;
}

#publishedPostEditor #publishedPostEditFields input,
#publishedPostEditor #publishedPostEditFields textarea,
#publishedPostEditor #publishedPostEditFields select {
    box-sizing: border-box;
    max-width: 100%;
    padding: 11px 13px;
    color: #fff;
    background: rgba(15, 19, 28, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 11px;
}

#publishedPostEditor .published-edit-image {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
    margin: 10px 0 14px;
    object-fit: contain;
}

#publishedPostEditor .published-screenshot-edit button {
    margin: 4px 6px 4px 0;
}

#publishedPostEditor .remove-published-image-button {
    color: #ff9999 !important;
    background: rgba(242, 65, 65, 0.11) !important;
    border-color: rgba(242, 65, 65, 0.78) !important;
    box-shadow: 0 0 16px rgba(242, 65, 65, 0.17);
}

#savePublishedPostButton {
    display: block;
    box-sizing: border-box;
    position: static;
    transform: none;
    width: 100%;
    min-height: 46px;
    margin-top: 18px;
    color: #ffe18a;
    background: rgba(236, 187, 62, 0.11);
    border: 1px solid rgba(236, 187, 62, 0.75);
    border-radius: 12px;
    font-weight: 800;
    cursor: pointer;
}

/* Full-size screenshot editor */
#publishedPostEditor #ticketRedactionEditor {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    box-sizing: border-box;
    width: min(720px, calc(100vw - 20px));
    max-height: calc(100dvh - 20px);
    margin: 0;
    padding: 16px;
    overflow-y: auto;
    color: #fff;
    background: rgba(19, 22, 30, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65);
}

@media (max-width: 600px) {
    #adminManagePostsPage {
        padding: 15px;
    }

    #adminManagePostsPage .published-post-card {
        padding: 16px 0 24px;
    }

    #publishedPostEditor #ticketRedactionEditor {
        top: 8px;
        right: 8px;
        bottom: 8px;
        left: 8px;
        transform: none;
        width: auto;
        height: auto;
        max-height: none;
        padding: 14px 18px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #publishedPostEditor #ticketCanvasContainer {
        max-height: 50dvh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
}


#adminPaymentsPage .bulk-delete-button,
#adminMembersPage .bulk-delete-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 14px 0 18px;
    padding: 10px 16px;
    color: #ffd4d4;
    background: rgba(185, 44, 55, 0.18);
    border: 1px solid rgba(255, 112, 120, 0.7);
    border-radius: 12px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

#adminPaymentsPage .bulk-delete-button:disabled,
#adminMembersPage .bulk-delete-button:disabled {
    color: #b8b8b8;
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.3);
    cursor: not-allowed;
}

#paymentHistoryList .history-select,
#membersList .banned-select {
    width: 20px;
    height: 20px;
    margin: 0 10px 0 0;
    vertical-align: middle;
    accent-color: #f0bd56;
    cursor: pointer;
}

#paymentHistoryList .payment-history-card,
#membersList .member-card {
    cursor: pointer;
}

/* PAYMENT NAME SPACING */
#receivingName {
    word-spacing: 0.35em;
}


/* Member startup screen */
#memberLoadingScreen {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 24px;
    background: #11151d;
    color: #f8f4e9;
    text-align: center;
}

#memberLoadingScreen[hidden] {
    display: none;
}

#memberLoadingScreen .member-loading-logo {
    width: 88px;
    height: 88px;
    object-fit: contain;
    border-radius: 20px;
}

#memberLoadingScreen .member-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 225, 138, 0.2);
    border-top-color: #ffe18a;
    border-radius: 50%;
    animation: member-loading-spin 0.9s linear infinite;
}

#memberLoadingMessage {
    margin: 0;
    color: #f8f4e9;
    font-size: 1rem;
}

#memberLoadingRetry {
    padding: 11px 22px;
    color: #ffe18a;
    background: rgba(236, 187, 62, 0.12);
    border: 1px solid rgba(236, 187, 62, 0.7);
    border-radius: 11px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

#memberLoadingRetry[hidden] {
    display: none;
}

@keyframes member-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    #memberLoadingScreen .member-loading-spinner {
        animation: none;
    }
}

/* Styling for Loading progress */
#memberLoadingProgress {
    width: min(260px, 80vw);
    height: 8px;
    overflow: hidden;
    background: rgba(255, 225, 138, 0.15);
    border-radius: 20px;
}

#memberLoadingProgressFill {
    width: 0%;
    height: 100%;
    background: #ffe18a;
    border-radius: inherit;
    transition: width 0.3s ease;
}

#memberLoadingPercentage {
    margin: 0;
    color: #ffe18a;
    font-size: 0.95rem;
    font-weight: 700;
}

#memberLoadingProgress[hidden],
#memberLoadingPercentage[hidden] {
    display: none;
}

#memberLoadingMessage {
    max-width: 340px;
    line-height: 1.6;
    white-space: pre-line;
}


/* Result Notice */
#resultsList .result-image-notice {
    box-sizing: border-box;
    display: grid;
    place-items: center;
    min-height: 180px;
    margin: 12px 0;
    padding: 20px;
    color: #ffe6a5;
    background: rgba(255, 225, 138, 0.06);
    border: 1px solid rgba(255, 225, 138, 0.25);
    border-radius: 12px;
    text-align: center;
}

#resultsList .result-image-notice[data-state="error"] {
    color: #ffbaba;
}

/* Make Join Button Go deem and disabled after a clck */
#otherJoinButton:disabled {
    opacity: 0.55;
    cursor: wait;
    box-shadow: none;
    transform: none;
}

/* More space between the three bottom buttons */
.community-screen .bottom-nav {
    gap: 12px;
}

/* Member navigation: transparent sky-blue buttons */
.community-screen .bottom-nav button,
.community-screen .payment-back-button,
.community-screen #editPaymentButton {
    box-sizing: border-box;
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;
    padding: 10px 14px;

    color: #e5f7ff;
    background: rgba(56, 189, 248, 0.09);
    border: 1px solid rgba(125, 211, 252, 0.85);
    border-radius: 999px;

    box-shadow:
        0 0 10px rgba(56, 189, 248, 0.3),
        inset 0 0 8px rgba(56, 189, 248, 0.08);

    font: inherit;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;

    cursor: pointer;

    transition:
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
}

/* The three bottom buttons have equal widths */
.community-screen .bottom-nav button {
    flex: 1;
    min-width: 0;
    padding: 12px 6px;
}

/* Back and Edit Details stay compact */
.community-screen .payment-back-button,
.community-screen #editPaymentButton {
    width: fit-content;
}

/* Only the active tab has this curved underline */
.community-screen .bottom-nav button.active::after {
    content: "";
    position: absolute;

    left: 6px;
    right: 6px;
    bottom: -2px;
    height: 20px;

    background: transparent;
    border-bottom: 7px solid #e83acb;
    border-radius: 0 0 999px 999px;

    filter: drop-shadow(
        0 3px 5px rgba(218, 45, 225, 0.65)
    );

    pointer-events: none;
}

@media (hover: hover) {
    .community-screen .bottom-nav button:hover,
    .community-screen .payment-back-button:hover,
    .community-screen #editPaymentButton:hover {
        background: rgba(56, 189, 248, 0.17);

        box-shadow:
            0 0 16px rgba(56, 189, 248, 0.45),
            inset 0 0 8px rgba(56, 189, 248, 0.1);
    }
}

.community-screen .bottom-nav button:active,
.community-screen .payment-back-button:active,
.community-screen #editPaymentButton:active {
    transform: scale(0.96);
}

.community-screen .bottom-nav button:focus-visible,
.community-screen .payment-back-button:focus-visible,
.community-screen #editPaymentButton:focus-visible {
    outline: 3px solid #bae6fd;
    outline-offset: 3px;
}

/* Slightly larger labels on laptop and desktop */
@media (min-width: 768px) {
    .community-screen .bottom-nav button,
    .community-screen .payment-back-button,
    .community-screen #editPaymentButton {
        min-height: 50px;
        font-size: 16px;
    }
}

/* Space between payment details and action buttons */
.community-screen #paymentReviewPage #editPaymentButton {
    display: flex;
    margin-top: 24px;
    margin-bottom: 0;
}

.community-screen #paymentReviewPage #confirmPaymentButton {
    display: block;
    position: static;
    width: 100%;
    margin-top: 20px;
}

#paymentConfirmationPage #paymentTimeHint {
    margin: 8px 0 0;
    color: #cbd5e1;
    font-size: 0.85rem;
    line-height: 1.5;
}

#paymentConfirmationPage #paidButton {
    display: block;
    margin-top: 24px;
}


/* Payment claim warnings */
#paymentConfirmationPage .payment-claim-warning,
#paymentReviewPage .payment-claim-warning {
    box-sizing: border-box;
    width: 100%;
    margin: 24px 0;
    padding: 18px;
    color: #f8f4e9;
    background: rgba(245, 183, 57, 0.09);
    border: 1px solid rgba(245, 183, 57, 0.65);
    border-left: 4px solid #f5b739;
    border-radius: 14px;
    text-align: left;
    overflow-wrap: anywhere;
}

#paymentConfirmationPage .payment-claim-warning h4 {
    margin: 0 0 12px;
    color: #ffe18a;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.5;
}

#paymentConfirmationPage .payment-claim-warning p,
#paymentReviewPage .payment-claim-warning p {
    margin: 0 0 12px;
    color: #f8f4e9;
    font-size: 0.94rem;
    line-height: 1.65;
}

#paymentConfirmationPage .payment-claim-warning p:last-child,
#paymentReviewPage .payment-claim-warning p:last-child {
    margin-bottom: 0;
}

#paymentConfirmationPage .payment-claim-warning
.payment-warning-consequence {
    color: #ffb4b4;
    font-weight: 800;
}

/* Keep Edit Details above the review confirmation area */
#paymentReviewPage .payment-review-confirmation {
    margin-top: 24px;
}

#paymentReviewPage .payment-claim-warning-short {
    margin: 0 0 18px;
}

/* Whole label is tappable */
#paymentReviewPage .payment-acknowledgement {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    box-sizing: border-box;
    width: 100%;
    min-height: 64px;
    padding: 17px;
    color: #f8f4e9;
    background: rgba(56, 189, 248, 0.08);
    border: 2px solid #7dd3fc;
    border-radius: 14px;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.2);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.6;
    text-align: left;
    cursor: pointer;
}

#paymentReviewPage #paymentAcknowledgement {
    appearance: auto;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    margin: 1px 0 0;
    padding: 0;
    accent-color: #dc268e;
    cursor: pointer;
}

#paymentReviewPage .payment-acknowledgement span {
    min-width: 0;
    overflow-wrap: anywhere;
}

#paymentReviewPage #paymentAcknowledgement:focus-visible {
    outline: 3px solid #7dd3fc;
    outline-offset: 4px;
}

.community-screen #paymentReviewPage
#confirmPaymentButton:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    filter: none;
}

#paymentReviewPage #paymentAcknowledgement:disabled {
    cursor: default;
}

#paymentReviewPage #editPaymentButton:disabled {
    opacity: 0.55;
    cursor: default;
    transform: none;
}

#paymentReviewPage #paymentAcknowledgementHint {
    margin: 0 0 12px;
    color: #7dd3fc;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.5;
}

#paymentReviewPage .payment-acknowledgement:has(input:checked) {
    background: rgba(220, 38, 142, 0.09);
    border-color: #e879f9;
    box-shadow: 0 0 15px rgba(220, 38, 142, 0.2);
}

#paymentReviewPage .payment-claim-warning #paymentReviewWarning {
    color: #ffb4b4;
    font-weight: 800;
}

.join-screen #joinMemberCount {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    box-sizing: border-box;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 20px;
    padding: 12px 20px;

    color: #e9d5a5;
    background: rgba(50, 39, 18, 0.3);
    border: 1px solid rgba(220, 185, 110, 0.4);
    border-radius: 12px;

    box-shadow: 0 0 12px rgba(220, 185, 110, 0.1);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    cursor: default;
}

.join-screen #joinMemberCountText {
    color: #e0d3b5;
    font: inherit;
    font-weight: 500;
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: 0.3px;
    text-shadow: none;
    filter: none;
}

.join-screen #joinMemberCount[hidden] {
    display: none;
}

.join-screen #joinMemberCount .join-members-icon {
    display: block;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    fill: #d9b773;
    filter: drop-shadow(
        0 0 4px rgba(220, 185, 110, 0.25)
    );
}


/* PHONE ACCOUNT — Join, Login and existing member setup */
#memberAuthForm[hidden],
#memberAuthChoices[hidden],
#secureAccountCard[hidden],
.member-auth-error[hidden] {
    display: none !important;
}

#joinLanguageButton {
    display: block;
    width: fit-content;
    min-height: 42px;
    margin: 16px auto;
    padding: 10px 18px;
    color: #e0f5ff;
    background: rgba(76, 181, 242, 0.1);
    border: 1px solid rgba(111, 207, 255, 0.7);
    border-radius: 999px;
    box-shadow: 0 0 14px rgba(67, 180, 245, 0.25);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

#memberLoginButton {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 52px;
    margin: 14px 0 0;
    padding: 13px 18px;
    color: #e0f5ff;
    background: rgba(70, 166, 224, 0.12);
    border: 1px solid rgba(111, 207, 255, 0.75);
    border-radius: 999px;
    box-shadow: 0 0 15px rgba(67, 180, 245, 0.2);
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
}

#memberAuthForm,
#secureAccountForm {
    width: 100%;
    min-width: 0;
    margin: 18px 0 0;
    text-align: left;
}

#memberAuthHeading,
#secureAccountTitle {
    margin: 0 0 12px;
    color: #f8f4e9;
    font-size: 21px;
    line-height: 1.35;
}

#memberAuthDescription,
#secureAccountDescription {
    margin: 0 0 18px;
    color: #d5dce7;
    font-size: 15px;
    line-height: 1.6;
}

#memberAuthFields,
#secureAccountFields {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

#memberAuthFields label,
#secureAccountFields label {
    display: block;
    margin: 0;
    color: #f8f4e9;
    font-size: 15px;
    font-weight: 700;
}

#memberAuthFields input,
#secureAccountFields input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 12px 14px;
    color: #fff;
    background: rgba(10, 17, 30, 0.75);
    border: 1px solid rgba(166, 187, 220, 0.5);
    border-radius: 12px;
    font: inherit;
    font-size: 16px;
}

#memberAuthFields input::placeholder,
#secureAccountFields input::placeholder {
    color: #9eafc5;
    opacity: 1;
}

#memberAuthFields input:focus,
#secureAccountFields input:focus {
    outline: 2px solid #79cfff;
    outline-offset: 2px;
}

#memberAuthFields .member-phone-input,
#secureAccountFields .member-phone-input {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.member-phone-input > span {
    flex-shrink: 0;
    color: #d9efff;
    font-size: 16px;
    font-weight: 700;
}

#memberAuthPasswordHint,
#secureAccountPasswordHint {
    margin: 0 0 6px;
    color: #b8c7d9;
    font-size: 13px;
    line-height: 1.6;
}

#memberAuthError,
#secureAccountError {
    margin: 0;
    padding: 12px 14px;
    color: #ffd0d0;
    background: rgba(190, 40, 55, 0.13);
    border: 1px solid rgba(255, 116, 130, 0.5);
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

#memberAuthSubmit,
#secureAccountSave {
    box-sizing: border-box;
    width: 100%;
    min-height: 50px;
    margin: 8px 0 0;
    padding: 13px 18px;
    color: #fff;
    background: linear-gradient(110deg, #dc268e, #990de0);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(174, 20, 205, 0.25);
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

#memberAuthBack {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 10px 18px;
    color: #d9efff;
    background: rgba(76, 181, 242, 0.08);
    border: 1px solid rgba(111, 207, 255, 0.5);
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

#secureAccountCard {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 20px 0;
    padding: 20px;
    color: #f8f4e9;
    background: rgba(17, 28, 46, 0.65);
    border: 1px solid rgba(111, 207, 255, 0.45);
    border-radius: 18px;
    text-align: left;
}

#memberAuthFields:disabled,
#secureAccountFields:disabled {
    opacity: 0.6;
}

#memberAuthFields:disabled button,
#secureAccountFields:disabled button {
    cursor: wait;
}

#joinLanguageButton:disabled,
#otherJoinButton:disabled,
#memberLoginButton:disabled {
    opacity: 0.6;
    cursor: wait;
}

#joinLanguageButton:focus-visible,
#memberLoginButton:focus-visible,
#memberAuthSubmit:focus-visible,
#memberAuthBack:focus-visible,
#secureAccountSave:focus-visible {
    outline: 3px solid #ffe18a;
    outline-offset: 3px;
}

@media (max-width: 600px) {
    #secureAccountCard {
        padding: 16px;
    }
}


/* PASSWORD RECOVERY */
#memberRecoveryForm[hidden],
#memberForgotPasswordButton[hidden],
#memberRecoveryRetry[hidden],
#memberRecoveryDialog .member-auth-error[hidden] {
    display: none !important;
}

#memberRecoveryForm {
    box-sizing: border-box;
    width: 100%;
    margin-top: 18px;
    text-align: left;
}

#memberRecoveryHeading {
    margin: 0 0 12px;
    color: #f8f4e9;
    font-size: 21px;
}

#memberRecoveryDescription,
#memberRecoveryPasswordHint {
    color: #d2d9e5;
    line-height: 1.6;
}

#memberRecoveryFields {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

#memberRecoveryFields label {
    color: #f8f4e9;
    font-weight: 600;
}

#memberRecoveryFields input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 11px 13px;
    color: #fff;
    background: rgba(15, 19, 28, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 12px;
    font: inherit;
    font-size: 16px;
}

#memberRecoveryFields input::placeholder {
    color: #aeb9ca;
    opacity: 1;
}

#memberRecoveryFields input:focus {
    outline: 2px solid #70cfff;
    outline-offset: 2px;
}

#memberRecoveryPasswordHint {
    margin: 0;
    font-size: 13px;
}

#memberForgotPasswordButton,
#memberRecoveryBack {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    color: #bdeaff;
    background: rgba(80, 180, 240, 0.1);
    border: 1px solid rgba(112, 207, 255, 0.55);
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

#memberRecoverySubmit {
    box-sizing: border-box;
    width: 100%;
    min-height: 50px;
    margin-top: 4px;
    padding: 12px 16px;
    color: #fff;
    background: linear-gradient(110deg, #dc268e, #990de0);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    box-shadow: 0 5px 18px rgba(174, 20, 205, 0.28);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

/* PRIVATE RECOVERY CODE POPUP */
#memberRecoveryDialog {
    box-sizing: border-box;
    width: calc(100% - 32px);
    max-width: 420px;
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 24px;
    overflow-y: auto;
    color: #f8f4e9;
    background: #151b27;
    border: 1px solid rgba(112, 207, 255, 0.6);
    border-radius: 20px;
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.55);
    text-align: center;
    font: inherit;
}

#memberRecoveryDialog::backdrop {
    background: rgba(5, 9, 16, 0.82);
}

#memberRecoveryDialogTitle {
    margin: 0 0 14px;
    color: #f8f4e9;
    font-size: 22px;
}

#memberRecoveryDialogDescription {
    margin: 0;
    color: #d2d9e5;
    line-height: 1.6;
}

#memberRecoveryCodeDisplay {
    margin: 20px 0;
    padding: 16px 10px;
    color: #bdeaff;
    background: rgba(80, 180, 240, 0.1);
    border: 1px solid rgba(112, 207, 255, 0.5);
    border-radius: 12px;
    font-family: monospace;
    font-size: clamp(24px, 7vw, 32px);
    font-weight: 600;
    letter-spacing: 2px;
    font-variant-numeric: tabular-nums;
}

#memberRecoveryCodeDisplay:empty {
    display: none;
}

.member-recovery-dialog-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#memberRecoveryDialog button {
    box-sizing: border-box;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 11px 16px;
    color: #bdeaff;
    background: rgba(80, 180, 240, 0.1);
    border: 1px solid rgba(112, 207, 255, 0.55);
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

#memberRecoveryDialog #memberRecoveryContinue {
    color: #fff;
    background: linear-gradient(110deg, #dc268e, #990de0);
    border-color: rgba(255, 255, 255, 0.35);
}

#memberRecoveryDialogWarning {
    display: block;
    margin-top: 18px;
    color: #ffe18a;
    font-size: 13px;
    line-height: 1.6;
}

#memberRecoveryFields:disabled {
    opacity: 0.6;
}

#memberRecoveryFields:disabled button,
#memberRecoveryDialog button:disabled {
    cursor: wait;
}

#memberRecoveryDialog button:disabled {
    opacity: 0.55;
}

#memberRecoveryDialog button:focus-visible,
#memberForgotPasswordButton:focus-visible,
#memberRecoverySubmit:focus-visible,
#memberRecoveryBack:focus-visible {
    outline: 3px solid #ffe18a;
    outline-offset: 3px;
}

@media (max-width: 600px) {
    #memberRecoveryDialog {
        padding: 20px 16px;
    }
}


#memberAccountRecoveryButton[hidden] {
    display: none !important;
}

#memberAccountRecoveryButton {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    margin-top: 20px;
    padding: 10px 14px;
    color: #bdeaff;
    background: rgba(80, 180, 240, 0.1);
    border: 1px solid rgba(112, 207, 255, 0.55);
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

#memberAuthError[data-kind="success"] {
    color: #bdeaff;
    background: rgba(80, 180, 240, 0.1);
    border-color: rgba(112, 207, 255, 0.55);
}

#memberAccountRecoveryButton:focus-visible {
    outline: 3px solid #ffe18a;
    outline-offset: 3px;
}


#memberAuthProgress[hidden] {
    display: none !important;
}

#memberAuthProgress {
    margin: 12px 0 16px;
    color: #bdeaff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}