/* =========================================================
   STARLINK MEMBER ADMIN
   STYLES
========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    width: 100%;
}

body {
    background: #f7f5f0;
    color: #163247;
    font-family: Arial, Helvetica, sans-serif;
}


/* =========================================================
   LOGIN
========================================================= */

.login-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border-radius: 24px;
    padding: 48px 36px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(22, 50, 71, 0.12);
}

.login-logo {
    width: 82px;
    height: 82px;
    object-fit: contain;
    margin-bottom: 20px;
}

.login-card h1 {
    margin: 0 0 8px;
    font-size: 28px;
}

.login-card p {
    margin: 0 0 32px;
    color: #536273;
    font-size: 15px;
}

.google-login-button {
    width: 100%;
    border: 0;
    border-radius: 12px;
    padding: 14px 18px;
    background: #163247;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

#adminAccountLoginForm {
    display: grid;
    gap: 10px;
    margin: 0 0 22px;
    text-align: left;
}

#adminAccountLoginForm label {
    color: #263746;
    font-size: 13px;
    font-weight: 600;
}

#adminAccountLoginForm input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid #d6dee5;
    border-radius: 10px;
    padding: 12px 13px;
    color: #163247;
    background: #fff;
    font: inherit;
}

#adminAccountLoginForm input:focus {
    outline: 2px solid rgba(22, 50, 71, 0.18);
    border-color: #163247;
}

#adminAccountLoginButton:disabled {
    cursor: wait;
    opacity: 0.7;
}

.login-card .login-divider {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.google-login-button:hover {
    transform: translateY(-1px);
}

.google-login-button:active {
    transform: scale(0.98);
}


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

.admin-permission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 14px;
    margin: 18px 0;
}
.admin-permission-module {
    min-width: 0;
    border: 1px solid #dbe3e9;
    border-radius: 14px;
    padding: 14px;
    background: #fbfcfd;
}
.admin-permission-module-label,
.admin-permission-resource-label {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #163247;
}
.admin-permission-module-label {
    padding-bottom: 12px;
    border-bottom: 1px solid #e3e9ee;
    font-size: 15px;
}
.admin-permission-resources {
    display: grid;
    gap: 12px;
    padding-top: 12px;
}
.admin-permission-resource {
    display: grid;
    gap: 8px;
}
.admin-permission-resource-label {
    font-size: 13px;
}
.admin-permission-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding-left: 25px;
}
.admin-permission-actions label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #536273;
    font-size: 12px;
    text-transform: capitalize;
}
.admin-permission-grid input[type="checkbox"] {
    accent-color: #163247;
    flex: 0 0 auto;
    margin-top: 2px;
}
#subAdminPermissionsCard .form-actions {
    justify-content: flex-end;
}
@media (max-width: 600px) {
    .admin-permission-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.admin-app {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch;
    width: 100%;
    min-width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {
    width: 250px !important;
    min-width: 250px;
    max-width: 250px;
    min-height: 100vh;
    flex: 0 0 250px;

    background: #163247;
    color: #ffffff;

    padding: 24px 16px;

    display: flex;
    flex-direction: column;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px 28px;
}

.brand img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.brand strong {
    display: block;
    font-size: 15px;
}

.brand span {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    opacity: 0.65;
}


/* =========================================================
   NAVIGATION
========================================================= */

.sidebar nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.nav-item {
    width: 100%;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.72);

    text-align: left;

    padding: 12px 14px;

    border-radius: 10px;

    font-size: 14px;

    cursor: pointer;

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

.nav-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.nav-item.active {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}


/* =========================================================
   LOGOUT
========================================================= */

.logout-button {
    width: 100%;
    margin-top: auto;

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

    background: transparent;

    color: rgba(255, 255, 255, 0.8);

    border-radius: 10px;

    padding: 12px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.logout-button:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.main-content {
    display: block;

    flex: 1 1 auto;

    width: calc(100% - 250px);

    min-width: 0;

    max-width: none;

    padding: 32px;

    overflow-x: hidden;
}

.topbar {
    width: 100%;
    margin-bottom: 28px;
}

.topbar h2 {
    margin: 0 0 6px;
    font-size: 26px;
    line-height: 1.25;
}

.topbar p {
    margin: 0;
    color: #536273;
    font-size: 14px;
}


/* =========================================================
   GENERAL ADMIN SECTION
========================================================= */

.admin-section {
    width: 100%;
    max-width: 1200px;
}


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

.dashboard {
    display: block;
    width: 100%;
    max-width: 1200px;
    margin: 0;
}


/* =========================================================
   WELCOME CARD
========================================================= */

.welcome-card {
    width: 100%;

    background:
        linear-gradient(
            135deg,
            #163247,
            #254b63
        );

    color: #ffffff;

    border-radius: 20px;

    padding: 32px;

    margin-bottom: 24px;

    box-shadow:
        0 16px 40px
        rgba(22, 50, 71, 0.14);
}

.welcome-card h1 {
    margin: 0 0 10px;
    font-size: 24px;
    line-height: 1.3;
}

.welcome-card p {
    margin: 0;
    max-width: 600px;

    color: rgba(255, 255, 255, 0.78);

    line-height: 1.6;
}


/* =========================================================
   MAIN STATISTICS
========================================================= */

.stats-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 18px;

    margin-bottom: 24px;
}

.stat-card {
    min-width: 0;

    background: #ffffff;

    border-radius: 16px;

    padding: 22px;

    box-shadow:
        0 8px 28px
        rgba(22, 50, 71, 0.06);

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

.stat-card:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 32px
        rgba(22, 50, 71, 0.08);
}

.stat-card span {
    display: block;

    color: #536273;

    font-size: 13px;

    margin-bottom: 10px;
}

.stat-card strong {
    display: block;

    font-size: 28px;

    color: #163247;

    line-height: 1.2;

    margin-bottom: 7px;
}

.stat-card small {
    display: block;

    color: #8995a1;

    font-size: 12px;
}


/* =========================================================
   DASHBOARD TWO-COLUMN GRID
========================================================= */

.dashboard-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(280px, 0.9fr);

    gap: 24px;

    margin-bottom: 24px;

    align-items: start;
}


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

.dashboard-card {
    width: 100%;
    min-width: 0;

    background: #ffffff;

    border-radius: 18px;

    padding: 24px;

    box-shadow:
        0 8px 28px
        rgba(22, 50, 71, 0.06);
}

.dashboard-card-header {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    margin-bottom: 20px;
}

.dashboard-card-header h3 {
    margin: 0 0 5px;

    font-size: 17px;

    color: #163247;
}

.dashboard-card-header p {
    margin: 0;

    color: #8995a1;

    font-size: 12px;
}


/* =========================================================
   RECENT ACTIVITY
========================================================= */

.activity-list {
    width: 100%;

    display: flex;

    flex-direction: column;
}

.activity-item {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    padding: 14px 0;

    border-bottom: 1px solid #eeeae3;
}

.activity-item:first-child {
    padding-top: 0;
}

.activity-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.activity-main {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;
}

.activity-main strong {
    color: #163247;

    font-size: 14px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}

.activity-main span {
    color: #8995a1;

    font-size: 12px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}

.activity-right {
    flex-shrink: 0;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 4px;
}

.activity-right strong {
    color: #b8924b;

    font-size: 13px;
}

.activity-right span {
    color: #8995a1;

    font-size: 11px;
}

.empty-state {
    padding: 32px 14px;

    text-align: center;

    color: #8995a1;

    font-size: 13px;
}


/* =========================================================
   QUICK ACTIONS
========================================================= */

.quick-actions {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 12px;
}

.quick-action {
    width: 100%;

    border: 1px solid #eeeae3;

    background: #faf9f6;

    border-radius: 12px;

    padding: 16px;

    text-align: left;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

.quick-action:hover {
    transform: translateY(-2px);

    border-color: #d4c4a8;

    background: #ffffff;
}

.quick-action strong {
    display: block;

    color: #163247;

    font-size: 14px;

    margin-bottom: 5px;
}

.quick-action span {
    display: block;

    color: #8995a1;

    font-size: 11px;

    line-height: 1.4;
}


/* =========================================================
   SYSTEM STATUS
========================================================= */

.system-status-card {
    margin-bottom: 10px;
}

.system-status-list {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 12px;
}

.system-status-item {
    background: #faf9f6;

    border-radius: 12px;

    padding: 15px 16px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;
}

.system-status-item span {
    color: #536273;
    font-size: 13px;
}

.system-status-item strong {
    color: #3f7d57;
    font-size: 12px;
    white-space: nowrap;
}


/* =========================================================
   GENERAL PAGE CARD
========================================================= */

.page-card {
    width: 100%;

    background: #ffffff;

    border-radius: 20px;

    padding: 26px;

    margin-bottom: 24px;

    box-shadow:
        0 8px 28px
        rgba(22, 50, 71, 0.06);
}

.page-card-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 24px;
}

.page-card-header h2 {
    margin: 0 0 6px;

    color: #163247;

    font-size: 21px;

    line-height: 1.3;
}

.page-card-header p {
    margin: 0;

    color: #8995a1;

    font-size: 13px;

    line-height: 1.5;
}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.primary-button {
    border: 0;

    background: #163247;

    color: #ffffff;

    border-radius: 10px;

    padding: 11px 18px;

    font-size: 13px;

    font-weight: 600;

    white-space: nowrap;

    cursor: pointer;

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

.primary-button:hover {
    background: #21465d;

    transform: translateY(-1px);

    box-shadow:
        0 6px 16px
        rgba(22, 50, 71, 0.16);
}

.primary-button:active {
    transform: scale(0.98);
}


/* =========================================================
   SECONDARY BUTTON
========================================================= */

.secondary-button {
    border: 1px solid #ddd9d0;

    background: #ffffff;

    color: #536273;

    border-radius: 10px;

    padding: 11px 18px;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}

.secondary-button:hover {
    background: #faf9f6;

    border-color: #cfc8bc;

    color: #163247;
}


/* =========================================================
   REWARDS TABLE
========================================================= */

.table-wrapper {
    width: 100%;

    overflow-x: auto;

    border: 1px solid #eeeae3;

    border-radius: 14px;
}

.admin-table {
    width: 100%;

    min-width: 760px;

    border-collapse: collapse;

    background: #ffffff;
}

.admin-table thead {
    background: #faf9f6;
}

.admin-table th {
    padding: 14px 16px;

    text-align: left;

    color: #536273;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    border-bottom: 1px solid #eeeae3;

    white-space: nowrap;
}

.admin-table td {
    padding: 16px;

    color: #536273;

    font-size: 13px;

    border-bottom: 1px solid #f0ede7;

    vertical-align: middle;
}

.admin-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-table tbody tr {
    transition:
        background 0.15s ease;
}

.admin-table tbody tr:hover {
    background: #fcfbf9;
}


/* =========================================================
   REWARD TABLE CONTENT
========================================================= */

.reward-table-name {
    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 220px;
}

.reward-table-image {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    border-radius: 10px;

    object-fit: cover;

    background: #f1eee8;

    border: 1px solid #eeeae3;
}

.reward-table-image-placeholder {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background: #f7f5f0;

    color: #b8924b;

    font-size: 18px;

    font-weight: 700;

    border: 1px solid #eeeae3;
}

.reward-table-name-text {
    min-width: 0;
}

.reward-table-name-text strong {
    display: block;

    color: #163247;

    font-size: 13px;

    margin-bottom: 4px;
}

.reward-table-name-text span {
    display: block;

    max-width: 260px;

    color: #8995a1;

    font-size: 11px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* =========================================================
   COINS DISPLAY
========================================================= */

.coins-value {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    color: #b8924b;

    font-weight: 700;

    white-space: nowrap;
}

.coins-icon {
    width: 18px;
    height: 18px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #b8924b;

    color: #ffffff;

    font-size: 9px;

    font-weight: 700;
}


/* =========================================================
   STATUS BADGE
========================================================= */

.status-badge {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    border-radius: 999px;

    padding: 6px 10px;

    font-size: 11px;

    font-weight: 600;

    white-space: nowrap;
}

.status-badge::before {
    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: currentColor;
}

.status-active {
    background: #edf7f0;
    color: #3f7d57;
}

.status-inactive {
    background: #f3f1ef;
    color: #8995a1;
}


/* =========================================================
   TABLE ACTIONS
========================================================= */

.table-actions {
    display: flex;

    align-items: center;

    gap: 6px;
}

.table-action {
    border: 1px solid #eeeae3;

    background: #ffffff;

    color: #536273;

    border-radius: 8px;

    padding: 7px 10px;

    font-size: 11px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.table-action:hover {
    background: #faf9f6;

    border-color: #d4c4a8;

    color: #163247;
}

.table-action.delete:hover {
    background: #fff5f4;

    border-color: #e4c3bf;

    color: #a44d43;
}


/* =========================================================
   FORM
========================================================= */

#rewardFormCard {
    scroll-margin-top: 24px;
}

.form-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 20px;
}

.form-group {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 8px;
}

.form-group-full {
    grid-column: 1 / -1;
}

.form-group label {
    color: #163247;

    font-size: 12px;

    font-weight: 600;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;

    border: 1px solid #ddd9d0;

    background: #ffffff;

    color: #163247;

    border-radius: 10px;

    padding: 11px 13px;

    font-family: inherit;

    font-size: 13px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.form-group textarea {
    resize: vertical;

    min-height: 100px;

    line-height: 1.5;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #a5adb5;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #b8924b;

    box-shadow:
        0 0 0 3px
        rgba(184, 146, 75, 0.12);
}


/* =========================================================
   CHECKBOX
========================================================= */

.checkbox-label {
    display: inline-flex !important;

    flex-direction: row !important;

    align-items: center;

    gap: 9px;

    cursor: pointer;

    width: fit-content;
}

.checkbox-label input {
    width: 17px !important;
    height: 17px;

    margin: 0;

    accent-color: #163247;

    cursor: pointer;
}

.checkbox-label span {
    color: #536273;

    font-size: 13px;
}


/* =========================================================
   FORM ACTIONS
========================================================= */

.form-actions {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 10px;

    margin-top: 26px;

    padding-top: 22px;

    border-top: 1px solid #eeeae3;
}


/* =========================================================
   REWARD EMPTY STATE
========================================================= */

.rewards-empty {
    padding: 46px 20px;

    text-align: center;
}

.rewards-empty-icon {
    width: 56px;
    height: 56px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 14px;

    border-radius: 16px;

    background: #f7f2e8;

    color: #b8924b;

    font-size: 23px;

    font-weight: 700;
}

.rewards-empty strong {
    display: block;

    margin-bottom: 6px;

    color: #163247;

    font-size: 15px;
}

.rewards-empty p {
    margin: 0;

    color: #8995a1;

    font-size: 12px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .sidebar {
        width: 220px !important;

        min-width: 220px;

        max-width: 220px;

        flex-basis: 220px;
    }

    .main-content {
        width: calc(100% - 220px);

        padding: 26px;
    }

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

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

    .system-status-list {
        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );
    }

    .page-card {
        padding: 22px;
    }

}


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

@media (max-width: 650px) {

    .admin-app {
        flex-direction: column !important;
    }


    /* ---------------------------------------------
       SIDEBAR
    --------------------------------------------- */

    .sidebar {
        width: 100% !important;

        min-width: 100%;

        max-width: none;

        min-height: auto;

        flex: 0 0 auto;

        padding: 16px;
    }

    .brand {
        padding: 4px 6px 18px;
    }

    .sidebar nav {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        gap: 6px;
    }

    .logout-button {
        margin-top: 18px;
    }


    /* ---------------------------------------------
       MAIN
    --------------------------------------------- */

    .main-content {
        width: 100%;

        min-width: 0;

        padding: 20px;
    }

    .topbar {
        margin-bottom: 22px;
    }

    .topbar h2 {
        font-size: 23px;
    }


    /* ---------------------------------------------
       WELCOME
    --------------------------------------------- */

    .welcome-card {
        padding: 24px;

        border-radius: 16px;
    }

    .welcome-card h1 {
        font-size: 21px;
    }


    /* ---------------------------------------------
       STATS
    --------------------------------------------- */

    .stats-grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    /* ---------------------------------------------
       DASHBOARD GRID
    --------------------------------------------- */

    .dashboard-grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }


    /* ---------------------------------------------
       DASHBOARD CARD
    --------------------------------------------- */

    .dashboard-card {
        padding: 20px;

        border-radius: 16px;
    }


    /* ---------------------------------------------
       QUICK ACTIONS
    --------------------------------------------- */

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


    /* ---------------------------------------------
       SYSTEM STATUS
    --------------------------------------------- */

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

    .system-status-item {
        padding: 14px;
    }


    /* ---------------------------------------------
       PAGE CARD
    --------------------------------------------- */

    .page-card {
        padding: 18px;

        border-radius: 16px;
    }

    .page-card-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 16px;
    }

    .page-card-header .primary-button {
        width: 100%;
    }


    /* ---------------------------------------------
       FORM
    --------------------------------------------- */

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

        gap: 16px;
    }

    .form-group-full {
        grid-column: auto;
    }

    .form-actions {
        flex-direction: column-reverse;

        align-items: stretch;
    }

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


    /* ---------------------------------------------
       TABLE
    --------------------------------------------- */

    .table-wrapper {
        margin-left: -2px;

        margin-right: -2px;

        width: calc(100% + 4px);
    }

}

/* =====================================================
   STARLINK MEMBER ADMIN
   MEMBER DETAIL
===================================================== */

/* -----------------------------------------------------
   MEMBER DETAIL HEADER
----------------------------------------------------- */

#memberDetailSection .page-card {
    overflow: hidden;
}

#memberDetailSection .page-card-header {
    padding-bottom: 24px;
}

#memberDetailSection .page-card-header > div {
    width: 100%;
}

#memberDetailSection
.member-detail-profile {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 22px;
}

.member-detail-avatar {
    width: 58px;
    height: 58px;
    border-radius: 16px;

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

    background: #163247;
    color: #ffffff;

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

    flex-shrink: 0;
}

.member-detail-profile-info {
    min-width: 0;
}

.member-detail-profile-name {
    margin: 0;
    color: #163247;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.member-detail-profile-id {
    margin-top: 5px;
    color: #7a8794;
    font-size: 13px;
}


/* -----------------------------------------------------
   PROFILE INFORMATION
----------------------------------------------------- */

.member-detail-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 0;

    margin-top: 4px;

    border: 1px solid #e4e7eb;
    border-radius: 14px;

    overflow: hidden;
}

.member-detail-item {
    min-width: 0;

    padding: 18px 20px;

    background: #ffffff;

    border-bottom: 1px solid #e4e7eb;
}

.member-detail-item:nth-child(odd) {
    border-right: 1px solid #e4e7eb;
}

.member-detail-item:nth-last-child(-n + 2) {
    border-bottom: none;
}

.member-detail-label {
    display: block;

    margin-bottom: 7px;

    color: #8a96a3;

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

    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.member-detail-item strong {
    display: block;

    color: #263746;

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

    word-break: break-word;
}


/* -----------------------------------------------------
   MEMBER STATISTICS
----------------------------------------------------- */

.member-stat-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;
}

.member-stat-card {
    position: relative;

    padding: 20px;

    min-height: 92px;

    background: #f8fafb;

    border: 1px solid #e4e7eb;
    border-radius: 14px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    overflow: hidden;
}

.member-stat-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 4px;

    background: #b8924b;
}

.member-stat-card span {
    color: #7d8995;

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

    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.member-stat-card strong {
    margin-top: 10px;

    color: #163247;

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


/* -----------------------------------------------------
   DETAIL BLOCK
----------------------------------------------------- */

.member-detail-block {
    margin-top: 28px;
}

.member-detail-block h3 {
    margin: 0 0 12px;

    color: #163247;

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


/* -----------------------------------------------------
   HISTORY LIST
----------------------------------------------------- */

.member-history-list {
    display: flex;
    flex-direction: column;

    border: 1px solid #e4e7eb;
    border-radius: 14px;

    overflow: hidden;

    background: #ffffff;
}

.member-history-item {
    min-height: 68px;

    padding: 15px 18px;

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

    gap: 20px;

    border-bottom: 1px solid #edf0f2;
}

.member-history-item:last-child {
    border-bottom: none;
}

.member-history-item > div {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.member-history-item strong {
    color: #263746;

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

.member-history-item span {
    color: #697785;

    font-size: 13px;

    word-break: break-word;
}

.member-history-item small {
    color: #9aa5af;

    font-size: 11px;
}

.history-coins {
    color: #198754 !important;

    white-space: nowrap;

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


/* -----------------------------------------------------
   MEMBER TABLE ROW
----------------------------------------------------- */

.member-row {
    cursor: pointer;

    transition:
        background 0.15s ease;
}

.member-row:hover {
    background: #f7f9fa;
}

.member-name {
    color: #163247;

    font-weight: 600;
}

.member-streak {
    display: inline-flex;
    align-items: center;

    padding: 4px 9px;

    border-radius: 20px;

    background: #f5f1e8;
    color: #8c6c2e;

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


/* -----------------------------------------------------
   EMPTY / LOADING / ERROR
----------------------------------------------------- */

.member-history-list:empty {
    min-height: 68px;
}

.member-history-list:not(:has(.member-history-item)) {
    padding: 20px;

    color: #8b97a2;

    font-size: 13px;

    text-align: center;
}


/* -----------------------------------------------------
   BACK BUTTON
----------------------------------------------------- */

#memberDetailSection
.secondary-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 8px 13px;

    border-radius: 8px;

    font-size: 13px;
}


/* -----------------------------------------------------
   RESPONSIVE
----------------------------------------------------- */

@media (max-width: 900px) {

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

}

@media (max-width: 650px) {

    .member-detail-grid {
        grid-template-columns: 1fr;
    }

    .member-detail-item:nth-child(odd) {
        border-right: none;
    }

    .member-detail-item:nth-last-child(-n + 2) {
        border-bottom: 1px solid #e4e7eb;
    }

    .member-detail-item:last-child {
        border-bottom: none;
    }

    .member-stat-grid {
        grid-template-columns: 1fr 1fr;

        gap: 10px;
    }

    .member-stat-card {
        padding: 16px;
    }

    .member-stat-card strong {
        font-size: 22px;
    }

    .member-history-item {
        align-items: flex-start;

        padding: 14px;

        gap: 12px;
    }

}

@media (max-width: 420px) {

    .member-stat-grid {
        grid-template-columns: 1fr;
    }

    .member-detail-profile-name {
        font-size: 20px;
    }

}


/* =========================================================
   CHECK-IN SETTINGS
========================================================= */

#checkinSection .page-card {
    overflow: hidden;
}

#checkinSection .settings-form {
    margin-top: 4px;
    padding: 0;
}


/* ---------------------------------------------------------
   SETTINGS ITEM
--------------------------------------------------------- */

#checkinSection .settings-form .form-group {
    position: relative;

    max-width: none;

    margin: 0 0 16px;

    padding: 20px 22px;

    background: #f8fafb;

    border: 1px solid #e4e7eb;

    border-radius: 14px;

    gap: 8px;
}

#checkinSection .settings-form .form-group:last-of-type {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   LABEL
--------------------------------------------------------- */

#checkinSection .settings-form
.form-group > label:not(.checkbox-label) {
    color: #163247;

    font-size: 14px;

    font-weight: 700;
}


/* ---------------------------------------------------------
   COINS INPUT
--------------------------------------------------------- */

#checkinSection #checkinDailyCoins {
    width: 180px;

    height: 46px;

    padding: 0 14px;

    border: 1px solid #ddd9d0;

    border-radius: 10px;

    background: #ffffff;

    color: #163247;

    font-size: 17px;

    font-weight: 600;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

#checkinSection #checkinDailyCoins:focus {
    border-color: #b8924b;

    box-shadow:
        0 0 0 3px
        rgba(184, 146, 75, 0.12);
}


/* ---------------------------------------------------------
   DESCRIPTION
--------------------------------------------------------- */

#checkinSection .settings-form
.form-group > small {
    display: block;

    margin-top: 2px;

    color: #8995a1;

    font-size: 12px;

    line-height: 1.5;
}


/* ---------------------------------------------------------
   ENABLE CHECK-IN
--------------------------------------------------------- */

#checkinSection .checkbox-label {
    min-height: 24px;

    gap: 10px;
}

#checkinSection .checkbox-label span {
    color: #163247;

    font-size: 14px;

    font-weight: 600;
}

#checkinSection .checkbox-label input {
    width: 18px !important;
    height: 18px;

    accent-color: #b8924b;
}


/* ---------------------------------------------------------
   SAVE AREA
--------------------------------------------------------- */

#checkinSection .settings-form .form-actions {
    margin-top: 22px;

    padding-top: 22px;

    border-top: 1px solid #eeeae3;

    justify-content: flex-start;
}

#checkinSection .settings-form
.form-actions .primary-button {
    min-width: 190px;
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 650px) {

    #checkinSection .settings-form
    .form-group {
        padding: 18px;
    }

    #checkinSection #checkinDailyCoins {
        width: 100%;
        max-width: 220px;
    }

    #checkinSection .settings-form
    .form-actions .primary-button {
        width: 100%;
    }

}

/* Member Growth Debugger */
.mg-debug-layout{display:grid;grid-template-columns:minmax(280px, .9fr) minmax(300px,1.1fr);gap:24px;align-items:start}
.mg-debug-controls,.mg-debug-preview-wrap{min-width:0}
.mg-debug-controls h3,.mg-debug-preview-wrap h3{margin:8px 0 14px;color:#29283a}
.mg-debug-controls label{display:block;margin:12px 0 6px;font-size:12px;font-weight:700;color:#555268}
.mg-debug-controls input,.mg-debug-controls select{box-sizing:border-box;width:100%;min-width:0;padding:10px 11px;border:1px solid #dedbea;border-radius:10px;background:#fff;color:#262437;font:inherit}
.mg-debug-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mg-debug-help{font-size:12px;line-height:1.5;color:#777386}
.mg-debug-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.mg-debug-actions button,.mg-debug-achievement-row button{padding:9px 12px;border:1px solid #dedbea;border-radius:9px;background:#fff;color:#51456f;font-weight:700;cursor:pointer}
.mg-debug-achievement-list{display:grid;gap:6px;margin-top:10px}
.mg-debug-achievement-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;background:#f7f5fc;font-size:12px}
.mg-debug-card{position:relative;box-sizing:border-box;width:100%;aspect-ratio:1.8/1;min-height:0;padding:3.5%;border-radius:20px;overflow:hidden;background-color:transparent;background-position:center;background-size:100% 100%;background-repeat:no-repeat;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.75);display:flex;flex-direction:column;justify-content:space-between;gap:0}
.mg-debug-card.tier-bronze{background-image:url('assets/member-growth-ranks/growth_bronze_card_bg.png')}
.mg-debug-card.tier-silver{background-image:url('assets/member-growth-ranks/growth_silver_card_bg.png')}
.mg-debug-card.tier-gold{background-image:url('assets/member-growth-ranks/growth_gold_card_bg.png')}
.mg-debug-card.tier-platinum{background-image:url('assets/member-growth-ranks/growth_platinum_card_bg.png')}
.mg-debug-card.tier-emerald{background-image:url('assets/member-growth-ranks/growth_emerald_card_bg.png')}
.mg-debug-card.tier-sapphire{background-image:url('assets/member-growth-ranks/growth_sapphire_card_bg.png')}
.mg-debug-card.tier-ruby{background-image:url('assets/member-growth-ranks/growth_ruby_card_bg.png')}
.mg-debug-card.tier-purple-diamond{background-image:url('assets/member-growth-ranks/growth_purple_diamond_card_bg.png')}
.mg-debug-card.tier-red-diamond{background-image:url('assets/member-growth-ranks/growth_red_diamond_card_bg.png')}
.mg-debug-card.tier-imperial-diamond{background-image:url('assets/member-growth-ranks/growth_imperial_diamond_card_bg.png')}
.mg-debug-card.tier-eternal-diamond{background-image:url('assets/member-growth-ranks/growth_eternal_diamond_card_bg.png')}
.mg-debug-card-top{display:flex;align-items:center;gap:10px;min-width:0}
.mg-debug-avatar{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border:2px solid rgba(255,255,255,.75);border-radius:50%;background:rgba(35,24,32,.35);font-size:19px;font-weight:900}
.mg-debug-identity{display:grid;gap:3px;min-width:0;flex:1}
.mg-debug-identity strong{font-size:clamp(13px,3.8vw,19px);line-height:1.28;font-weight:800;overflow-wrap:anywhere}
.mg-debug-identity > span{display:flex;align-items:center;gap:5px;min-width:0;font-size:12px;line-height:1.2}
.mg-debug-badge{display:block;flex:0 0 20px;width:20px;height:20px;object-fit:contain}
.mg-debug-preview-stars-inline{display:inline-flex;min-width:24px;color:#ffe7a0;font-size:12px;letter-spacing:1px;white-space:nowrap;overflow:hidden}
.mg-debug-rank-icon{display:none}
.mg-debug-stats{display:flex;align-items:center;gap:8px;margin-top:2%;font-size:clamp(9px,2.6vw,11px);font-weight:800}
.mg-debug-stats strong{display:none}
.mg-debug-stats span:last-child{margin-left:auto;font-size:clamp(11px,3vw,14px)}
.mg-debug-progress{height:7px;margin-top:2px;border:0;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.mg-debug-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#fff2d6,#ffd66e,#f4b7f0)}
.mg-debug-preview-bonus{display:block;margin-top:3px;font-size:clamp(9px,2.5vw,11px);line-height:1.25;max-width:calc(100% - 8px)}
.mg-debug-preview-achievements{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;width:100%;margin-top:6px;overflow-x:auto}
.mg-debug-achievement-chip{display:flex;align-items:center;gap:4px;flex:0 0 auto;max-width:31%;padding:4px 7px;border:1px solid rgba(255,255,255,.45);border-radius:8px;background:rgba(255,255,255,.12);font-size:10px;white-space:nowrap;overflow:hidden}
.mg-debug-achievement-chip span:last-child{overflow:hidden;text-overflow:ellipsis}
@media(max-width:850px){.mg-debug-layout{grid-template-columns:1fr}.mg-debug-card{max-width:560px}}
@media(max-width:420px){.mg-debug-card{padding:3.5%;min-height:0;border-radius:16px}.mg-debug-avatar{width:clamp(42px,10vw,58px);height:clamp(42px,10vw,58px);flex-basis:clamp(42px,10vw,58px)}.mg-debug-badge{flex-basis:18px;width:18px;height:18px}.mg-debug-identity strong{font-size:clamp(13px,3.8vw,18px)}}


/* Keep the Admin Member Growth preview aligned with the production card polish. */
.mg-debug-card {
    padding: 18px 20px 22px;
}
.mg-debug-card .mg-debug-stats {
    padding-right: 8px;
    padding-left: 8px;
}
.mg-debug-card .mg-debug-progress {
    height: 7px;
    margin: 5px 8px 0;
    border-radius: 4px;
    background: rgba(0, 0, 0, .18);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .22), 0 1px 0 rgba(255, 255, 255, .16);
}
.mg-debug-card .mg-debug-progress span {
    border-radius: 4px;
    background: linear-gradient(90deg, #d99a32 0%, #ffe7a0 52%, #fff9e8 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 0 7px rgba(255, 219, 130, .42);
}
.mg-debug-card .mg-debug-preview-achievements {
    margin-bottom: 2px;
}
@media (max-width: 420px) {
    .mg-debug-card {
        padding: 16px 16px 20px;
    }
    .mg-debug-card .mg-debug-stats {
        padding-right: 5px;
        padding-left: 5px;
    }
    .mg-debug-card .mg-debug-progress {
        margin-right: 5px;
        margin-left: 5px;
    }
}


/* Member Growth Dark Premium — matched to the production App card. */
.mg-debug-card {
    padding: 3.5%;
    border: 1px solid rgba(232, 201, 143, .26);
    border-radius: 22px;
    box-shadow: 0 10px 24px rgba(15, 10, 8, .18);
    text-shadow: none;
}
.mg-debug-card.tier-bronze { background-image: url('assets/member-growth-ranks/growth_bronze_card_bg.png') !important; }
.mg-debug-card.tier-silver { background-image: url('assets/member-growth-ranks/growth_silver_card_bg.png') !important; }
.mg-debug-card.tier-gold { background-image: url('assets/member-growth-ranks/growth_gold_card_bg.png') !important; }
.mg-debug-card.tier-platinum { background-image: url('assets/member-growth-ranks/growth_platinum_card_bg.png') !important; }
.mg-debug-card.tier-emerald { background-image: url('assets/member-growth-ranks/growth_emerald_card_bg.png') !important; }
.mg-debug-card.tier-sapphire { background-image: url('assets/member-growth-ranks/growth_sapphire_card_bg.png') !important; }
.mg-debug-card.tier-ruby { background-image: url('assets/member-growth-ranks/growth_ruby_card_bg.png') !important; }
.mg-debug-card.tier-purple-diamond { background-image: url('assets/member-growth-ranks/growth_purple_diamond_card_bg.png') !important; }
.mg-debug-card.tier-red-diamond { background-image: url('assets/member-growth-ranks/growth_red_diamond_card_bg.png') !important; }
.mg-debug-card.tier-imperial-diamond { background-image: url('assets/member-growth-ranks/growth_imperial_diamond_card_bg.png') !important; }
.mg-debug-card.tier-eternal-diamond { background-image: url('assets/member-growth-ranks/growth_eternal_diamond_card_bg.png') !important; }
.mg-debug-progression {
    min-width: 0;
    margin-top: 12px;
    padding: 12px 13px 11px;
    border: 1px solid rgba(239,211,157,.19);
    border-radius: 15px;
    background: rgba(20,14,11,.68);
    box-shadow: inset 0 1px 0 rgba(255,246,224,.06);
}
.mg-debug-card .mg-debug-stats {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin: 0;
    padding: 0;
    font-size: 11px;
    letter-spacing: .06em;
    color: #e9d4a8;
}
.mg-debug-card .mg-debug-stats strong {
    display: inline;
    color: #fffaf0;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.mg-debug-card .mg-debug-stats span:last-child {
    margin-left: auto;
    color: #e9d4a8;
    font-size: 12px;
}
.mg-debug-card .mg-debug-progress {
    height: 9px;
    margin: 9px 0 0;
    border: 1px solid rgba(239,211,157,.13);
    border-radius: 99px;
    background: rgba(0,0,0,.42);
    box-shadow: inset 0 2px 3px rgba(0,0,0,.3);
}
.mg-debug-card .mg-debug-progress span {
    border-radius: inherit;
    background: linear-gradient(90deg,#a96d2b 0%,#e8bd68 48%,#fff0c8 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.48),0 0 7px rgba(229,181,91,.2);
}
.mg-debug-card .mg-debug-preview-bonus {
    max-width: none;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid rgba(239,211,157,.14);
    color: #f1dfb9;
    font-size: 11px;
    line-height: 1.4;
}
.mg-debug-card .mg-debug-preview-achievements {
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
    overflow: visible;
}
.mg-debug-card .mg-debug-achievement-chip {
    max-width: 100%;
    padding: 4px 8px;
    border: 1px solid rgba(231,199,139,.25);
    border-radius: 999px;
    background: rgba(8,7,6,.42);
    color: #fff5df;
    font-size: 10px;
}
.mg-debug-card .mg-debug-card-top { gap: 10px; }
.mg-debug-card .mg-debug-identity strong { color: #fffaf0; font-variant-numeric: tabular-nums; }
.mg-debug-card .mg-debug-identity > span { color: #ead5ab; }
.mg-debug-card .mg-debug-badge { flex-basis: 28px; width: 28px; height: 28px; }
.mg-debug-card .mg-debug-preview-stars-inline { color: #f1d38a; }
@media (max-width: 420px) {
    .mg-debug-card { padding: 3.5%; border-radius: 19px; }
    .mg-debug-progression { padding: 10px; border-radius: 13px; }
    .mg-debug-card .mg-debug-stats strong { font-size: 16px; }
}


.mg-debug-avatar { position:relative; border:0 !important; background:transparent !important; overflow:visible; }
.mg-debug-avatar > span { position:relative; z-index:1; display:grid; place-items:center; width:100%; height:100%; border-radius:50%; background:rgba(35,24,32,.45); }
.mg-debug-avatar .mg-debug-avatar-frame { position:absolute; z-index:2; inset:-6px; width:calc(100% + 12px); height:calc(100% + 12px); object-fit:contain; pointer-events:none; }
.mg-debug-card .mg-debug-progression {
    padding: 14px 15px 13px;
    border-color: rgba(239,211,157,.22);
    background: rgba(20,14,11,.72);
}
.mg-debug-card .mg-debug-bonus-stat {
    display: flex;
    align-items: stretch;
    gap: 12px;
}
.mg-debug-card .mg-debug-bonus-stat > div {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}
.mg-debug-card .mg-debug-bonus-stat > div span {
    color: #bcae94;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .09em;
}
.mg-debug-card .mg-debug-bonus-stat > div strong {
    color: #e8bd68;
    font-size: 16px;
    font-weight: 850;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.mg-debug-card .mg-debug-bonus-stat i {
    width: 1px;
    align-self: stretch;
    background: rgba(239,211,157,.22);
}
.mg-debug-card .mg-debug-bonus-custom {
    color: #f1dfb9;
    font-size: 11px;
    line-height: 1.4;
}
.mg-debug-card .mg-debug-preview-status {
    margin-top: 6px;
    color: #e8bd68;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .09em;
    text-align: right;
}
.mg-debug-card .mg-debug-preview-status[hidden] { display: none !important; }
.mg-debug-card .mg-debug-rank-title { color: #fff5df; font-weight: 900; }
.mg-debug-card .mg-debug-level-pill {
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    padding: 3px 7px;
    border: 1px solid rgba(232,189,104,.3);
    border-radius: 999px;
    background: rgba(20,14,11,.78);
    color: #e8bd68;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1.2;
    white-space: nowrap;
}
.mg-debug-card .mg-debug-preview-achievements { gap: 6px; }
.mg-debug-card .mg-debug-achievement-chip {
    min-height: 25px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(20,14,11,.7);
    color: #fff5df;
    font-size: 11px;
}
.mg-debug-card .mg-debug-achievement-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 50%;
    background: rgba(232,189,104,.12);
    color: #e8bd68;
}
.mg-debug-card .mg-debug-achievement-more {
    justify-content: center;
    min-width: 28px;
    color: #e8bd68;
    font-weight: 900;
}
@media (max-width: 420px) {
    .mg-debug-card .mg-debug-progression { padding: 12px; }
    .mg-debug-card .mg-debug-bonus-stat { gap: 9px; }
    .mg-debug-card .mg-debug-bonus-stat > div strong { font-size: 15px; }
}


/* Match the App's restrained header scrim without altering rank artwork. */
.mg-debug-card .mg-debug-identity {
    padding: 7px 10px;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(20,14,11,.64), rgba(20,14,11,.24));
}
.mg-debug-card .mg-debug-rank-title,
.mg-debug-card .mg-debug-level-pill {
    text-shadow: none;
}
.mg-debug-card .mg-debug-preview-achievements {
    margin: 10px 2px 4px;
}


/* Member Growth Debug: Splash-inspired holo sweep and twinkling particles.
   Keep the original tier artwork bright; these are transparent decorative layers. */
.mg-debug-card { isolation:isolate; }
.mg-debug-card::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    border-radius:inherit;
    background-image:
        radial-gradient(circle at 8% 24%, rgba(255,255,255,.92) 0 1px, transparent 2px),
        radial-gradient(circle at 82% 18%, rgba(255,232,174,.9) 0 1.2px, transparent 2.4px),
        radial-gradient(circle at 72% 78%, rgba(255,255,255,.86) 0 1px, transparent 2px),
        radial-gradient(circle at 24% 86%, rgba(255,220,148,.8) 0 1px, transparent 2px),
        radial-gradient(circle at 94% 54%, rgba(255,255,255,.8) 0 1px, transparent 2px);
    opacity:.56;
    animation:memberGrowthSparkle 4.8s ease-in-out infinite;
}
.mg-debug-card::after {
    content:"";
    position:absolute;
    top:-35%;
    bottom:-35%;
    left:-48%;
    z-index:0;
    width:34%;
    pointer-events:none;
    border-radius:40%;
    background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,.12) 42%,rgba(255,246,211,.42) 50%,rgba(255,255,255,.14) 58%,rgba(255,255,255,0) 74%,transparent 100%);
    filter:blur(1px);
    transform:skewX(-16deg);
    animation:memberGrowthHoloSweep 7.5s ease-in-out infinite;
}
.mg-debug-card > * { position:relative; z-index:1; }
@keyframes memberGrowthHoloSweep {
    0%,12% { left:-48%; opacity:0; }
    18% { opacity:.9; }
    54% { left:118%; opacity:.72; }
    60%,100% { left:118%; opacity:0; }
}
@keyframes memberGrowthSparkle {
    0%,100% { opacity:.28; }
    45% { opacity:.72; }
    60% { opacity:.42; }
}
@media (prefers-reduced-motion:reduce) {
    .mg-debug-card::before,.mg-debug-card::after { animation:none !important; }
    .mg-debug-card::before { opacity:.38; }
    .mg-debug-card::after { display:none; }
}


/* Rank-coloured travelling light around the card edge. Artwork stays untouched. */
.member-growth-home, .mg-debug-card { --member-growth-glow: #b98155; }
.member-growth-home.tier-bronze, .mg-debug-card.tier-bronze { --member-growth-glow: #cd8a52; }
.member-growth-home.tier-silver, .mg-debug-card.tier-silver { --member-growth-glow: #c8d5e6; }
.member-growth-home.tier-gold, .mg-debug-card.tier-gold { --member-growth-glow: #f3c65e; }
.member-growth-home.tier-platinum, .mg-debug-card.tier-platinum { --member-growth-glow: #9ddcff; }
.member-growth-home.tier-emerald, .mg-debug-card.tier-emerald { --member-growth-glow: #58e6a0; }
.member-growth-home.tier-sapphire, .mg-debug-card.tier-sapphire { --member-growth-glow: #65a7ff; }
.member-growth-home.tier-ruby, .mg-debug-card.tier-ruby { --member-growth-glow: #ff6689; }
.member-growth-home.tier-purple-diamond, .mg-debug-card.tier-purple-diamond { --member-growth-glow: #bd8aff; }
.member-growth-home.tier-red-diamond, .mg-debug-card.tier-red-diamond { --member-growth-glow: #ff5d62; }
.member-growth-home.tier-imperial-diamond, .mg-debug-card.tier-imperial-diamond { --member-growth-glow: #a855f7; }
.member-growth-home.tier-eternal-diamond, .mg-debug-card.tier-eternal-diamond { --member-growth-glow: #d7b8ff; }
.member-growth-border-glow, .mg-debug-border-glow {
    position:absolute !important;
    inset:0;
    z-index:1 !important;
    padding:2px;
    border-radius:inherit;
    pointer-events:none;
    background:conic-gradient(from 0deg, transparent 0deg 245deg, var(--member-growth-glow) 302deg, #fff 314deg, var(--member-growth-glow) 325deg, transparent 350deg 360deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude;
    animation:memberGrowthBorderTravel 5s linear infinite;
    opacity:.92;
}
.member-growth-home > :not(.member-growth-border-glow),
.mg-debug-card > :not(.mg-debug-border-glow) { position:relative; z-index:2; }
@keyframes memberGrowthBorderTravel { to { transform:rotate(360deg); } }
.mg-debug-star-partial { position:relative; display:inline-block; vertical-align:middle; width:1em; height:1.1em; line-height:1.1; }
.mg-debug-star-outline { position:absolute; inset:0; color:#ffe7a0; }
.mg-debug-star-fill { position:absolute; inset:0 auto 0 0; overflow:hidden; white-space:nowrap; color:#ffe7a0; }
@media (prefers-reduced-motion:reduce) {
    .member-growth-border-glow, .mg-debug-border-glow { animation:none !important; }
}

/* Tier-coloured animated edge glow for Member Growth preview. */
.mg-debug-card{border:1px solid var(--mg-edge,#cd8a52);animation:mgEdgeGlow 3s ease-in-out infinite}
.mg-debug-card.tier-bronze{--mg-edge:#cd8a52}.mg-debug-card.tier-silver{--mg-edge:#c8d5e6}.mg-debug-card.tier-gold{--mg-edge:#f3c65e}.mg-debug-card.tier-platinum{--mg-edge:#9ddcff}.mg-debug-card.tier-emerald{--mg-edge:#58e6a0}.mg-debug-card.tier-sapphire{--mg-edge:#65a7ff}.mg-debug-card.tier-ruby{--mg-edge:#ff6689}.mg-debug-card.tier-purple-diamond{--mg-edge:#bd8aff}.mg-debug-card.tier-red-diamond{--mg-edge:#ff5d62}.mg-debug-card.tier-imperial-diamond{--mg-edge:#a855f7}.mg-debug-card.tier-eternal-diamond{--mg-edge:#d7b8ff}
@keyframes mgEdgeGlow{0%,100%{box-shadow:0 0 0 1px var(--mg-edge),0 0 5px var(--mg-edge)}50%{box-shadow:0 0 0 2px var(--mg-edge),0 0 16px var(--mg-edge)}}
.mg-debug-star-partial{position:relative;display:inline-block;vertical-align:middle;width:1em;height:1.1em;line-height:1.1}.mg-debug-star-outline{position:absolute;inset:0;color:#ffe7a0}.mg-debug-star-fill{position:absolute;inset:0 auto 0 0;overflow:hidden;white-space:nowrap;color:#ffe7a0}
@media(prefers-reduced-motion:reduce){.mg-debug-card{animation:none}}

/* Moving highlight travels along all four sides, tinted by the selected rank. */
.mg-debug-border-glow{
 border:0!important;
 background:
  linear-gradient(90deg,transparent 0%,var(--mg-edge) 42%,#fff 50%,var(--mg-edge) 58%,transparent 100%) top left/200% 2px no-repeat,
  linear-gradient(90deg,transparent 0%,var(--mg-edge) 42%,#fff 50%,var(--mg-edge) 58%,transparent 100%) bottom right/200% 2px no-repeat,
  linear-gradient(180deg,transparent 0%,var(--mg-edge) 42%,#fff 50%,var(--mg-edge) 58%,transparent 100%) top left/2px 200% no-repeat,
  linear-gradient(180deg,transparent 0%,var(--mg-edge) 42%,#fff 50%,var(--mg-edge) 58%,transparent 100%) bottom right/2px 200% no-repeat;
 animation:mgBorderTravel 4s linear infinite!important;
}
@keyframes mgBorderTravel{
 0%{background-position:0% 0%,100% 100%,0% 0%,100% 100%}
 50%{background-position:100% 0%,0% 100%,0% 100%,100% 0%}
 100%{background-position:0% 0%,100% 100%,0% 0%,100% 100%}
}
@media(prefers-reduced-motion:reduce){.mg-debug-border-glow{animation:none!important}}

.mg-debug-border-glow{position:absolute!important;inset:0!important;display:block;z-index:1!important;pointer-events:none!important}


/* 2026-10-18 SYNC: Admin Member Growth Debug card containment/layout hotfix.
   Mirrors the production App card's normal-flow structure while retaining
   the Debug-only EXP, bonus and achievement controls. */
.mg-debug-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 180px !important;
    height: auto !important;
    aspect-ratio: auto !important;
    box-sizing: border-box !important;
    padding: 14px !important;
    overflow: hidden !important;
    isolation: isolate !important;
}
.mg-debug-card > .mg-debug-border-glow { z-index: 1 !important; pointer-events: none !important; }
.mg-debug-card > :not(.mg-debug-border-glow) { position: relative !important; z-index: 2 !important; min-width: 0 !important; }
.mg-debug-card .mg-debug-card-top {
    position: relative !important;
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.mg-debug-card .mg-debug-avatar {
    position: relative !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    z-index: 2 !important;
}
.mg-debug-card .mg-debug-avatar .mg-debug-avatar-frame {
    position: absolute !important;
    inset: -6px !important;
    width: calc(100% + 12px) !important;
    height: calc(100% + 12px) !important;
    max-width: none !important;
    z-index: 2 !important;
    pointer-events: none !important;
}
.mg-debug-card .mg-debug-avatar > span { position: relative !important; z-index: 1 !important; }
.mg-debug-card .mg-debug-identity {
    position: relative !important;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: 1 !important;
}
.mg-debug-card .mg-debug-identity > strong {
    position: static !important;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: clamp(13px, 3.8vw, 17px) !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
}
.mg-debug-card .mg-debug-identity > span {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
}
.mg-debug-card .mg-debug-badge {
    position: static !important;
    display: block !important;
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    margin: 0 !important;
}
.mg-debug-card .mg-debug-preview-stars-inline {
    display: inline-flex !important;
    flex: 0 1 auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}
.mg-debug-card .mg-debug-progression {
    position: relative !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 10px 0 0 !important;
    padding: 10px 11px !important;
    z-index: 1 !important;
}
.mg-debug-card .mg-debug-stats {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.mg-debug-card .mg-debug-stats strong { display: none !important; }
.mg-debug-card .mg-debug-stats span:last-child { margin-left: auto !important; }
.mg-debug-card .mg-debug-progress {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 7px !important;
    box-sizing: border-box !important;
    margin: 5px 0 0 !important;
    overflow: hidden !important;
}
.mg-debug-card .mg-debug-preview-status { position: relative !important; max-width: 100% !important; overflow-wrap: anywhere !important; }
.mg-debug-card .mg-debug-preview-bonus {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 8px 0 0 !important;
    padding: 7px 0 0 !important;
    overflow-wrap: anywhere !important;
}
.mg-debug-card .mg-debug-bonus-stat { display: flex !important; align-items: stretch !important; width: 100% !important; min-width: 0 !important; gap: 9px !important; }
.mg-debug-card .mg-debug-bonus-stat > div { flex: 1 1 0 !important; min-width: 0 !important; max-width: 100% !important; overflow-wrap: anywhere !important; }
.mg-debug-card .mg-debug-bonus-stat > div span, .mg-debug-card .mg-debug-bonus-stat > div strong { max-width: 100% !important; overflow-wrap: anywhere !important; }
.mg-debug-card .mg-debug-preview-achievements {
    position: relative !important;
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}
.mg-debug-card .mg-debug-achievement-chip { flex: 0 1 auto !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; }
.mg-debug-card .mg-debug-achievement-chip span:last-child { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; }
@media (max-width: 420px) {
    .mg-debug-card { min-height: 170px !important; padding: 12px !important; border-radius: 16px !important; }
    .mg-debug-card .mg-debug-avatar { flex-basis: 40px !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; }
    .mg-debug-card .mg-debug-badge { flex-basis: 26px !important; width: 26px !important; height: 26px !important; max-width: 26px !important; }
    .mg-debug-card .mg-debug-progression { padding: 9px !important; }
    .mg-debug-card .mg-debug-bonus-stat > div strong { font-size: 14px !important; }
}


/* Keep rank name and level pill visually distinct, matching the Member app card. */
.mg-debug-card .mg-debug-level-pill { margin-left: 9px; }


/* =========================================================
   NOTIFICATION ADMIN
   ========================================================= */
.notification-admin-compose-card,
.notification-admin-list-card{margin-bottom:22px}
.notification-admin-form{max-width:900px;padding-top:6px}
.notification-admin-form .form-group{margin-bottom:20px}
.notification-admin-form .form-group textarea{min-height:130px;resize:vertical}
.notification-admin-form .form-group small{display:block;margin-top:7px;color:#778391;font-size:12px;line-height:1.5}
.notification-admin-push-option{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin:14px 0;
    padding:13px 14px;
    border:1px solid rgba(184,143,89,.28);
    border-radius:12px;
    background:linear-gradient(135deg,rgba(255,250,240,.9),rgba(255,255,255,.8));
    cursor:pointer;
}
.notification-admin-push-option input{
    width:17px;
    height:17px;
    margin:2px 0 0;
    flex:0 0 17px;
    accent-color:#a77b43;
}
.notification-admin-push-option span{display:flex;flex-direction:column;gap:4px}
.notification-admin-push-option strong{font-size:13px;color:#3e3a33}
.notification-admin-push-option small{font-size:11px;line-height:1.5;color:#77736d}
.notification-admin-compose-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding-top:8px;
    border-top:1px solid #e9edf1;
}
.notification-admin-compose-footer p{color:#667483;font-size:13px}
.notification-admin-compose-footer strong{color:#253b4a}
.notification-admin-status{
    margin-top:16px;
    padding:11px 13px;
    color:#1d6847;
    background:#eaf8f0;
    border-radius:9px;
    font-size:13px;
    line-height:1.5;
}
.notification-admin-status[hidden]{display:none}
.notification-admin-status.is-error{color:#9b2530;background:#fff0f1}
.notification-admin-table{min-width:780px}
.notification-admin-title{display:block;color:#243a49;font-size:13px;font-weight:800;max-width:300px}
.notification-admin-preview{
    max-width:320px;
    margin-top:4px;
    color:#7a8794;
    font-size:11px;
    line-height:1.5;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}
.notification-admin-status-pill{
    display:inline-flex;
    align-items:center;
    padding:5px 9px;
    border-radius:999px;
    font-size:10px;
    font-weight:800;
    white-space:nowrap;
}
.notification-admin-status-pill.is-active{color:#176543;background:#e4f7ed}
.notification-admin-status-pill.is-inactive{color:#6d7885;background:#eef1f4}
.notification-admin-actions{display:flex;align-items:center;gap:7px;white-space:nowrap}
.notification-admin-action{padding:7px 10px!important;font-size:11px!important}
.notification-admin-actions .danger-button{
    border:1px solid #f1c9cd;
    color:#a52a35;
    background:#fff1f2;
    border-radius:7px;
    cursor:pointer;
}
.notification-admin-empty{padding:24px!important;text-align:center;color:#7e8995}
@media(max-width:700px){
    .notification-admin-compose-footer{align-items:stretch;flex-direction:column}
    .notification-admin-compose-footer .primary-button{width:100%}
    .notification-admin-table{min-width:720px}
}

.notification-admin-member-search{display:flex;gap:10px;align-items:stretch}
.notification-admin-member-search input{flex:1;min-width:0}
#notificationAdminMemberPicker[hidden]{display:none!important}
#notificationAdminMemberPicker select{width:100%}
@media(max-width:520px){.notification-admin-member-search{flex-direction:column}.notification-admin-member-search button{width:100%}}


/* Admin image upload previews */
.admin-image-help{display:block;margin-top:7px;color:#778391;font-size:12px;line-height:1.5}
.admin-image-preview{display:block;max-width:min(100%,520px);max-height:280px;object-fit:contain;object-position:left center;margin-top:12px;border:1px solid #e2e7ec;border-radius:10px;background:#f7f8fa}
.admin-image-preview[hidden]{display:none!important}
.admin-image-status{margin:7px 0 0;color:#647282;font-size:12px;line-height:1.5}
.admin-image-status.is-error{color:#a52a35}


/* Reward eligibility selector */
#rewardEligibility { width: 100%; }


/* Member achievement management */
.achievement-admin-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:22px;align-items:start}
.achievement-admin-search,.achievement-admin-grant{min-width:0;padding:18px;border:1px solid #e9e2d6;border-radius:16px;background:#fffdf9}
.achievement-admin-search label,.achievement-admin-grant label{display:block;margin-bottom:7px;font-weight:650}
.achievement-admin-search-row{display:flex;gap:8px;align-items:center}
.achievement-admin-search-row input{flex:1;min-width:0}
.achievement-member-results{display:grid;gap:8px;margin-top:12px;max-height:420px;overflow:auto}
.achievement-member-option{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;padding:12px;border:1px solid #e8e0d4;border-radius:12px;background:#fff;text-align:left;color:inherit;cursor:pointer}
.achievement-member-option[aria-pressed="true"]{border-color:#b78b46;background:#fff8e8;box-shadow:0 0 0 2px rgba(183,139,70,.12)}
.achievement-member-option strong{font-size:14px}
.achievement-member-option span{font-size:12px;color:#71695e;overflow-wrap:anywhere}
.achievement-selected-member{padding:10px 12px;border-radius:10px;background:#f7f1e6;color:#584329;font-weight:650;overflow-wrap:anywhere}
.achievement-admin-status{min-height:1.4em;margin:12px 0 0;color:#28734c;font-size:13px}
.achievement-admin-status.is-error{color:#b42318}
.achievement-empty{margin:0;padding:12px;color:#777;font-size:13px}
@media(max-width:760px){.achievement-admin-layout{grid-template-columns:minmax(0,1fr)}.achievement-admin-search-row{align-items:stretch;flex-direction:column}.achievement-admin-search-row .primary-button{width:100%}}


/* Central report centre */
.admin-report-filters{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:12px;align-items:end;margin:8px 0 14px}
.admin-report-filters .form-group{min-width:0;margin:0}
.admin-report-actions{display:flex;flex-wrap:wrap;gap:8px;grid-column:1/-1}
.admin-report-status{min-height:1.4em;margin:8px 0;color:#28734c;font-size:13px}
.admin-report-status.is-error{color:#b42318}
.admin-report-summary{display:grid;grid-template-columns:repeat(6,minmax(95px,1fr));gap:10px;margin:14px 0}
.admin-report-stat{display:flex;flex-direction:column;gap:5px;min-width:0;padding:12px;border:1px solid #e9e2d6;border-radius:12px;background:#fffdf9}
.admin-report-stat strong{font-size:19px;overflow-wrap:anywhere}
.admin-report-stat span{color:#71695e;font-size:11px}
.admin-report-note{color:#71695e;font-size:12px}
.admin-report-table-wrap{max-width:100%;overflow:auto;border:1px solid #ece5da;border-radius:12px}
.admin-report-table{width:100%;min-width:1080px;border-collapse:collapse;font-size:12px}
.admin-report-table th,.admin-report-table td{padding:10px 11px;border-bottom:1px solid #eee8de;text-align:left;vertical-align:top;white-space:nowrap}
.admin-report-table th{position:sticky;top:0;background:#f8f3ea;color:#594b37;font-weight:700}
.admin-report-table td.numeric{text-align:right;font-variant-numeric:tabular-nums}
.admin-report-table .admin-report-empty{text-align:center;color:#777;padding:22px}
@media(max-width:900px){.admin-report-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-report-summary{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:480px){.admin-report-filters{grid-template-columns:minmax(0,1fr)}.admin-report-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-report-actions{flex-direction:column}.admin-report-actions button{width:100%}}


/* Force Update and Maintenance Mode settings */
.runtime-policy-admin-status{min-height:1.4em;margin:12px 0 0;color:#28734c;font-size:13px}
.runtime-policy-admin-status.is-error{color:#b42318}
#runtimePolicyAdminForm .checkbox-label{display:flex;align-items:center;gap:9px}
#runtimePolicyAdminForm .checkbox-label input{width:18px;height:18px;flex:0 0 auto}
#runtimePolicyAdminForm .full-width{grid-column:1/-1}


/* Achievement catalogue separation and grant confirmation. */
.achievement-auto-catalogue{margin:18px 0 22px;padding:18px;border:1px solid #e7d7b7;border-radius:16px;background:linear-gradient(135deg,#fffdf8,#f8f0df)}
.achievement-auto-catalogue h3{margin:0 0 5px;color:#5c4527;font-size:16px}
.achievement-auto-catalogue>p{margin:0 0 12px;color:#756650;font-size:13px;line-height:1.5}
.achievement-automatic-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.achievement-automatic-item{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid rgba(174,135,69,.22);border-radius:12px;background:rgba(255,255,255,.78)}
.achievement-automatic-icon{font-size:23px;line-height:1.2}
.achievement-automatic-item strong{display:block;color:#3d3326;font-size:13px}
.achievement-automatic-item p{margin:3px 0 0;color:#756650;font-size:12px;line-height:1.45}
.achievement-admin-status.is-success{color:#20734a;font-weight:700}
.achievement-admin-status.achievement-success-pop{animation:achievement-admin-pop .55s ease-out}
@keyframes achievement-admin-pop{0%{opacity:.35;transform:translateY(5px) scale(.98)}55%{opacity:1;transform:translateY(-2px) scale(1.015)}100%{transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.achievement-admin-status.achievement-success-pop{animation:none}}

/* Custom manual achievement badge editor */
.achievement-manual-manager{margin:18px 0 22px;padding:18px;border:1px solid #dbe5e9;border-radius:16px;background:#fbfdfe}
.achievement-manual-manager-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}
.achievement-manual-manager-heading h3{margin:0 0 5px;color:#163247;font-size:17px}
.achievement-manual-manager-heading p{margin:0;color:#637382;font-size:13px;line-height:1.5}
.achievement-manual-form{padding:16px;border:1px solid #e0e7eb;border-radius:12px;background:#fff}
.achievement-manual-form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.55fr) minmax(120px,.35fr);gap:12px;align-items:start}
.achievement-manual-form-grid .form-group{min-width:0;margin:0}
.achievement-manual-form-grid input,.achievement-manual-form-grid textarea{width:100%;min-width:0}
.achievement-manual-description{grid-column:1/3}
.achievement-manual-active{display:flex;align-items:center;gap:8px;align-self:center;font-size:13px;font-weight:600}
.achievement-manual-active input{width:18px;height:18px;flex:0 0 auto}
.achievement-manual-form-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.achievement-manual-list{display:grid;gap:9px;margin-top:14px}
.achievement-manual-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #e0e7eb;border-radius:12px;background:#fff}
.achievement-manual-item.is-inactive{opacity:.72;background:#f4f6f7}
.achievement-manual-item-icon{font-size:25px;line-height:1.2}
.achievement-manual-item-body{flex:1;min-width:0}
.achievement-manual-item-body strong{display:block;color:#163247;font-size:14px}
.achievement-manual-item-body p{margin:3px 0;color:#637382;font-size:12px;line-height:1.45}
.achievement-manual-item-body small{color:#778391;font-size:11px;overflow-wrap:anywhere}
.achievement-manual-item .secondary-button{flex:0 0 auto}
#achievementManualSaveButton:disabled{opacity:.65;cursor:wait}
@media(max-width:760px){.achievement-manual-manager-heading{flex-direction:column}.achievement-manual-manager-heading button{width:100%}.achievement-manual-form-grid{grid-template-columns:minmax(0,1fr)}.achievement-manual-description{grid-column:auto}.achievement-manual-item{align-items:flex-start;flex-wrap:wrap}.achievement-manual-item .secondary-button{margin-left:auto}}