:root {
    --primary: #176b87;
    --primary-dark: #0f3d4d;
    --accent: #f4a261;
    --success: #2a9d8f;
    --danger: #e76f51;
    --ink: #17202a;
    --muted: #6b7280;
    --surface: #ffffff;
    --canvas: #f4f7fb;
    --line: #dbe3ec;
    --plan-theme: var(--primary);
    --plan-theme-dark: var(--primary-dark);
    --plan-theme-soft: #f0f8fb;
    --plan-theme-border: #dce7f5;
    --plan-theme-accent: var(--accent);
    --font-main: "Poppins", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.invoice-web-page {
    display: grid;
    gap: 18px;
    padding: 0 4px 20px;
}

.invoice-web-head {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
}

.invoice-web-kicker {
    align-items: center;
    color: var(--primary);
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    gap: 7px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.invoice-web-head h1 {
    color: var(--ink);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 900;
    margin: 3px 0 4px;
}

.invoice-web-head p {
    color: var(--muted);
    font-size: 14px;
    margin: 0;
}

.invoice-web-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.invoice-web-btn {
    align-items: center;
    border: 0;
    border-radius: 14px;
    display: inline-flex;
    font-weight: 800;
    gap: 8px;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
}

.invoice-web-btn.secondary {
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
}

.invoice-web-btn.primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: 0 14px 28px rgba(23, 107, 135, .22);
    color: #fff;
}

.invoice-web-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .08);
    margin: 0 auto;
    max-width: 1120px;
    padding: 28px 28px 24px;
    width: 100%;
}

.invoice-web-card .invoice-logo-wrap {
    min-height: 110px;
    padding-top: 0;
}

.invoice-web-card .invoice-logo-wrap img {
    max-height: 104px;
}

.invoice-web-card .invoice-number-row {
    padding: 8px 0 14px;
}

.invoice-web-card .invoice-number-row span,
.invoice-web-card .invoice-number-row strong {
    font-size: clamp(22px, 2.6vw, 30px);
}

.invoice-web-card .invoice-divider {
    margin-bottom: 18px;
}

.invoice-web-card .invoice-details-grid {
    gap: 28px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.invoice-web-card .invoice-left p,
.invoice-web-card .invoice-right p {
    font-size: 16px;
    line-height: 1.5;
}

.invoice-web-card .invoice-right strong {
    font-size: 24px;
}

.invoice-web-card .invoice-table {
    border: 1px solid var(--line);
    border-radius: 18px;
    margin-top: 18px;
    overflow: hidden;
}

.invoice-web-card .invoice-table-head,
.invoice-web-card .invoice-table-row {
    display: grid;
    grid-template-columns: 1.05fr 1fr 1fr 1fr .7fr;
}

.invoice-web-card .invoice-table-head {
    background: #f7fafc;
    border-bottom: 1px solid var(--line);
}

.invoice-web-card .invoice-table-head span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    padding: 14px 12px;
    text-align: center;
}

.invoice-web-card .invoice-table-row span {
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    padding: 16px 12px;
    text-align: center;
}

.invoice-web-card .invoice-table-row span + span,
.invoice-web-card .invoice-table-head span + span {
    border-left: 1px solid #edf2f7;
}

.invoice-web-card .invoice-summary {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.invoice-web-card .invoice-summary-row {
    align-items: center;
    background: #f8fbfe;
    border: 1px solid #e3eaf1;
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
}

.invoice-web-card .invoice-summary-row span {
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
}

.invoice-web-card .invoice-summary-row strong {
    color: var(--ink);
    font-size: 18px;
    font-weight: 900;
}

.invoice-web-card .invoice-summary-row.strong {
    background: #fff;
    border-style: dashed;
}

.invoice-web-card .invoice-due-bar {
    align-items: center;
    background: linear-gradient(135deg, #2d8df0, #176b87);
    border-radius: 16px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 14px 18px;
}

.invoice-web-card .invoice-due-bar span,
.invoice-web-card .invoice-due-bar strong {
    color: #fff;
    font-size: 18px;
    font-weight: 900;
}

.invoice-web-card .invoice-payment-details {
    margin-top: 18px;
    padding: 16px 18px 18px;
    border: 1px solid #dbeafe;
    border-radius: 18px;
    background: #fff;
}

.invoice-web-card .invoice-payment-title {
    margin-bottom: 12px;
    color: #8b93a6;
    font-size: 18px;
    font-weight: 600;
}

.invoice-web-card .invoice-payment-row {
    min-height: 68px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) 48px;
    gap: 16px;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid #dbe2ee;
    border-radius: 14px;
    background: #fbfcff;
}

.invoice-web-card .invoice-payment-row div {
    display: grid;
    gap: 4px;
}

.invoice-web-card .invoice-payment-row span {
    color: #a7afbe;
    font-size: 14px;
    font-weight: 700;
}

.invoice-web-card .invoice-payment-row strong {
    color: #1f2937;
    font-size: 16px;
    font-weight: 800;
}

.invoice-web-card .invoice-payment-print {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 12px;
    color: #176b87;
    background: #edf7fb;
    font-size: 22px;
}

.invoice-web-card .invoice-payment-note {
    margin-top: 12px;
    color: #667085;
    font-size: 14px;
    line-height: 1.65;
    word-break: break-word;
}

.invoice-web-card .invoice-note {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
    margin-top: 18px;
}

.invoice-web-card .invoice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: 24px;
}

.invoice-web-card .invoice-action {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    min-width: 210px;
    padding: 15px 22px;
}

.invoice-web-card .invoice-action.whatsapp {
    background: #48b04f;
}

.invoice-web-card .invoice-action.share {
    background: #2d8df0;
}

@media (max-width: 991px) {
    .invoice-web-card {
        padding: 22px 18px 18px;
    }

    .invoice-web-card .invoice-details-grid {
        gap: 18px;
        grid-template-columns: 1fr;
    }

    .invoice-web-card .invoice-right {
        justify-items: start;
        text-align: left;
    }

    .invoice-web-card .invoice-table {
        overflow-x: auto;
    }

    .invoice-web-card .invoice-table-head,
    .invoice-web-card .invoice-table-row {
        min-width: 680px;
    }
}

@media (max-width: 767px) {
    .invoice-web-page {
        padding: 0 0 16px;
    }

    .invoice-web-head {
        align-items: flex-start;
    }

    .invoice-web-actions {
        width: 100%;
    }

    .invoice-web-btn {
        flex: 1 1 140px;
    }

    .invoice-web-card .invoice-number-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .invoice-web-card .invoice-number-row span,
    .invoice-web-card .invoice-number-row strong {
        font-size: 22px;
    }

    .invoice-web-card .invoice-table-head,
    .invoice-web-card .invoice-table-row {
        min-width: 640px;
    }

    .invoice-web-card .invoice-action {
        min-width: 0;
        width: 100%;
    }
}

@media print {
    .sidebar,
    .topbar,
    .footer,
    .page-load-overlay,
    .no-print {
        display: none !important;
    }

    body {
        background: #fff !important;
    }

    .app-shell,
    .main,
    .content,
    .invoice-web-page {
        display: block !important;
        margin: 0 !important;
        max-width: none !important;
        padding: 0 !important;
    }

    .invoice-web-card {
        border: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        max-width: none !important;
        padding: 0 !important;
        width: 100% !important;
    }
}

.invoice-web-page {
    display: block;
    margin: 0 auto;
    max-width: 420px;
    padding: 0;
    width: 100%;
}

.invoice-web-head {
    align-items: center;
    background: #f0543b;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
    color: #fff;
    display: flex;
    gap: 18px;
    height: 112px;
    padding: 0 24px;
}

.invoice-web-head h1 {
    color: #fff;
    font-size: 36px;
    font-weight: 400;
    line-height: 1;
    margin: 0;
}

.invoice-back-btn {
    align-items: center;
    background: transparent;
    border: 0;
    color: #fff;
    display: inline-flex;
    font-size: 32px;
    height: 56px;
    justify-content: center;
    min-width: 56px;
    text-decoration: none;
    width: 56px;
}

.invoice-web-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    max-width: none;
    padding: 16px 14px 28px;
}

.invoice-web-card .invoice-logo-wrap {
    min-height: 118px;
    padding-top: 12px;
}

.invoice-web-card .invoice-logo-wrap img {
    max-height: 110px;
}

.invoice-web-card .invoice-number-row {
    gap: 12px;
    padding: 12px 0 8px;
}

.invoice-web-card .invoice-number-row span {
    color: #1b1b1b;
    font-size: 28px;
    font-weight: 400;
}

.invoice-web-card .invoice-number-row strong {
    color: #111;
    font-size: 28px;
    font-weight: 700;
}

.invoice-web-card .invoice-divider {
    background: #d5d5d5;
    height: 1px;
    margin: 0 0 16px;
}

.invoice-web-card .invoice-details-grid {
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.invoice-web-card .invoice-left p,
.invoice-web-card .invoice-right p {
    color: #111;
    font-size: 18px;
    line-height: 1.35;
}

.invoice-web-card .invoice-right {
    justify-items: end;
    text-align: right;
}

.invoice-web-card .invoice-right strong {
    color: #111;
    font-size: 24px;
}

.invoice-web-card .invoice-table {
    border: 0;
    margin-top: 0;
    overflow: visible;
}

.invoice-web-card .invoice-table-head,
.invoice-web-card .invoice-table-row {
    border-top: 1px solid #d5d5d5;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.invoice-web-card .invoice-table-head {
    background: transparent;
    border-bottom: 0;
}

.invoice-web-card .invoice-table-head span {
    color: #8a8a8a;
    font-size: 13px;
    font-weight: 400;
    padding: 10px 6px 12px;
}

.invoice-web-card .invoice-table-row span {
    color: #111;
    font-size: 18px;
    font-weight: 400;
    padding: 18px 6px 14px;
}

.invoice-web-card .invoice-table-row span + span,
.invoice-web-card .invoice-table-head span + span {
    border-left: 0;
}

.invoice-web-card .invoice-summary {
    gap: 16px;
    margin-top: 8px;
}

.invoice-web-card .invoice-summary-row {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.invoice-web-card .invoice-summary-row span {
    color: #111;
    font-size: 18px;
    font-weight: 400;
    margin-left: auto;
    text-align: right;
    width: 68%;
}

.invoice-web-card .invoice-summary-row strong {
    color: #111;
    font-size: 18px;
    font-weight: 400;
    min-width: 52px;
    text-align: right;
}

.invoice-web-card .invoice-summary-row.strong span,
.invoice-web-card .invoice-summary-row.strong strong {
    font-weight: 700;
}

.invoice-web-card .invoice-due-bar {
    background: #2d8df0;
    border-radius: 0;
    display: flex;
    margin: 10px 0 0 auto;
    max-width: calc(100% - 28px);
    padding: 10px 18px;
    width: 100%;
}

.invoice-web-card .invoice-due-bar span {
    flex: 1 1 auto;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
}

.invoice-web-card .invoice-due-bar strong {
    font-size: 18px;
    font-weight: 400;
}

.invoice-web-card .invoice-payment-details {
    margin-top: 18px;
    padding: 16px 18px 18px;
    border: 1px solid #dbeafe;
    border-radius: 18px;
    background: #fff;
}

.invoice-web-card .invoice-payment-title {
    margin-bottom: 12px;
    color: #8b93a6;
    font-size: 18px;
    font-weight: 600;
}

.invoice-web-card .invoice-payment-row {
    min-height: 68px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) 48px;
    gap: 16px;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid #dbe2ee;
    border-radius: 14px;
    background: #fbfcff;
}

.invoice-web-card .invoice-payment-row div {
    display: grid;
    gap: 4px;
}

.invoice-web-card .invoice-payment-row span {
    color: #a7afbe;
    font-size: 14px;
    font-weight: 700;
}

.invoice-web-card .invoice-payment-row strong {
    color: #1f2937;
    font-size: 16px;
    font-weight: 800;
}

.invoice-web-card .invoice-payment-print {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 12px;
    color: #176b87;
    background: #edf7fb;
    font-size: 22px;
}

.invoice-web-card .invoice-payment-note {
    margin-top: 12px;
    color: #667085;
    font-size: 14px;
    line-height: 1.65;
    word-break: break-word;
}

.invoice-web-card .invoice-note {
    color: #111;
    font-size: 18px;
    line-height: 1.35;
    margin-top: 24px;
}

.invoice-web-card .invoice-actions {
    gap: 28px;
    justify-content: center;
    margin-top: 48px;
}

.invoice-web-card .invoice-action {
    box-shadow: 0 6px 12px rgba(0, 0, 0, .15);
    font-size: 20px;
    min-width: 0;
    padding: 14px 26px;
    width: 210px;
}

@media (max-width: 767px) {
    .invoice-web-page {
        max-width: 100%;
    }

    .invoice-web-head {
        padding: 0 20px;
    }

    .invoice-web-head h1 {
        font-size: 34px;
    }

    .invoice-back-btn {
        font-size: 30px;
    }

    .invoice-web-card .invoice-logo-wrap {
        min-height: 104px;
    }

    .invoice-web-card .invoice-number-row span,
    .invoice-web-card .invoice-number-row strong {
        font-size: 24px;
    }

    .invoice-web-card .invoice-details-grid {
        gap: 16px;
    }

    .invoice-web-card .invoice-left p,
    .invoice-web-card .invoice-right p,
    .invoice-web-card .invoice-summary-row span,
    .invoice-web-card .invoice-summary-row strong,
    .invoice-web-card .invoice-table-head span,
    .invoice-web-card .invoice-table-row span,
    .invoice-web-card .invoice-note {
        font-size: 16px;
    }

    .invoice-web-card .invoice-payment-row {
        grid-template-columns: 1fr;
    }

    .invoice-web-card .invoice-payment-print {
        justify-self: start;
    }

    .invoice-web-card .invoice-actions {
        margin-top: 40px;
    }

    .invoice-web-card .invoice-action {
        width: 48%;
    }
}

@media print {
    .invoice-web-page {
        max-width: none;
    }

    .invoice-web-head {
        display: flex !important;
    }

    .invoice-web-card {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .invoice-web-card .invoice-actions {
        page-break-inside: avoid;
    }
}

.invoice-web-page {
    max-width: 960px;
}

.invoice-web-head {
    justify-content: center;
    position: relative;
    text-align: center;
}

.invoice-web-head h1 {
    margin: 0;
}

.invoice-back-btn {
    display: none !important;
}

.invoice-web-card {
    max-width: none;
    width: 100%;
}

.invoice-web-card .invoice-action.download {
    background: #48b04f;
}

.invoice-web-card .invoice-action.share {
    background: #2d8df0;
}

@media (max-width: 767px) {
    .invoice-web-page {
        max-width: 100%;
    }

    .invoice-web-card .invoice-action {
        width: 42%;
    }

    .invoice-web-card .invoice-payment-row {
        grid-template-columns: 1fr;
    }

    .invoice-web-card .invoice-payment-print {
        justify-self: start;
    }
}

.invoice-web-card .invoice-note {
    display: grid;
    gap: 6px;
}

.invoice-web-card .invoice-note strong {
    color: #111;
    font-size: 16px;
    font-weight: 700;
}

.invoice-web-card .invoice-note span {
    color: #111;
    font-size: 15px;
    line-height: 1.45;
    white-space: pre-wrap;
}

.invoice-web-card .invoice-logo-wrap img {
    display: block;
    margin: 0 auto;
    max-width: 140px;
}

.invoice-web-card .invoice-actions {
    gap: 12px;
    margin-top: 28px;
}

.invoice-web-card .invoice-action {
    font-size: 15px;
    min-width: 140px;
    padding: 11px 16px;
    width: auto;
}

.invoice-web-card .invoice-action.download,
.invoice-web-card .invoice-action.share {
    box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
}

@media (min-width: 768px) {
    .invoice-web-card .invoice-actions {
        justify-content: flex-end;
    }
}

.invoice-view-body {
    background: #f0f0f0;
    min-height: 100vh;
}
.invoice-view-shell {
    width: min(100%, 420px);
    min-height: 100vh;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 0 28px rgba(0, 0, 0, .08);
}
.invoice-appbar {
    align-items: center;
    background: #f0543b;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
    color: #fff;
    display: flex;
    gap: 18px;
    height: 112px;
    padding: 0 24px;
}
.invoice-back-btn {
    align-items: center;
    background: transparent;
    border: 0;
    color: #fff;
    display: inline-flex;
    font-size: 32px;
    height: 56px;
    justify-content: center;
    width: 56px;
}
.invoice-appbar h1 {
    color: #fff;
    font-size: 36px;
    font-weight: 400;
    line-height: 1;
    margin: 0;
}
.invoice-card {
    padding: 16px 14px 28px;
}
.invoice-logo-wrap {
    display: grid;
    justify-items: center;
    min-height: 118px;
    padding-top: 12px;
}

/* Receipt print page */
.receipt-web-page {
    display: block;
    margin: 0 auto;
    max-width: 960px;
    padding: 0;
    width: 100%;
}

.receipt-web-head {
    align-items: center;
    background: #fff;
    box-shadow: none;
    color: #111;
    display: flex;
    gap: 18px;
    height: auto;
    justify-content: center;
    padding: 18px 24px 6px;
}

.receipt-web-head h1 {
    color: #111;
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    margin: 0;
}

.receipt-web-card {
    background: #fff;
    border: 0;
    box-shadow: none;
    margin: 0 auto;
    max-width: 420px;
    padding: 16px 14px 28px;
    width: 100%;
}

.receipt-logo-wrap {
    display: grid;
    justify-items: center;
    min-height: 118px;
    padding-top: 12px;
}

.receipt-logo-wrap img {
    display: block;
    margin: 0 auto;
    height: auto;
    max-height: 140px;
    max-width: 100%;
    object-fit: contain;
    width: auto;
}

.receipt-title {
    color: #111;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.2;
    margin: 0;
    text-align: center;
}

.receipt-divider {
    background: #d5d5d5;
    height: 1px;
    margin: 12px 0 16px;
}

.receipt-meta {
    display: grid;
    gap: 4px;
    justify-items: center;
    margin-bottom: 18px;
    text-align: center;
}

.receipt-invoice,
.receipt-member,
.receipt-date,
.receipt-summary-line,
.receipt-method-line {
    color: #111;
    font-size: 20px;
    line-height: 1.35;
}

.receipt-invoice {
    font-weight: 800;
}

.receipt-member {
    font-weight: 400;
}

.receipt-org-block {
    display: grid;
    gap: 4px;
    justify-items: center;
    margin: 12px 0 14px;
    text-align: center;
}

.receipt-org-name {
    color: #111;
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 4px;
}

.receipt-org-block p {
    color: #111;
    font-size: 18px;
    line-height: 1.35;
    margin: 0;
}

.receipt-summary-line {
    border-top: 1px solid #d5d5d5;
    border-bottom: 1px solid #d5d5d5;
    margin-top: 6px;
    padding: 12px 0;
    text-align: center;
}

.receipt-summary-line span {
    display: block;
    font-size: 22px;
    font-weight: 500;
}

.receipt-method-line {
    margin-top: 10px;
    text-align: center;
}

.receipt-stamp {
    align-items: center;
    border: 4px solid #8dc63f;
    color: #8dc63f;
    display: flex;
    font-size: 34px;
    font-weight: 900;
    justify-content: center;
    margin: 18px auto 8px;
    max-width: 180px;
    padding: 10px 14px;
    transform: rotate(-6deg);
}

.receipt-note {
    border-top: 1px solid #d5d5d5;
    color: #9b9b9b;
    font-size: 15px;
    line-height: 1.45;
    margin-top: 18px;
    padding-top: 14px;
}

.receipt-note-small {
    border-top: 0;
    margin-top: 10px;
    padding-top: 0;
    white-space: pre-wrap;
}

.receipt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    margin-top: 28px;
}

.receipt-action {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .15);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    min-width: 0;
    padding: 14px 26px;
    width: 210px;
}

.receipt-action.download {
    background: #48b04f;
}

.receipt-action.share {
    background: #2d8df0;
}

@media (max-width: 767px) {
    .receipt-web-page {
        max-width: 100%;
    }

    .receipt-web-head {
        padding: 14px 20px 4px;
    }

    .receipt-web-head h1 {
        font-size: 28px;
    }

    .receipt-web-card {
        max-width: 100%;
    }

    .receipt-title {
        font-size: 26px;
    }

    .receipt-invoice,
    .receipt-member,
    .receipt-date,
    .receipt-summary-line span,
    .receipt-method-line,
    .receipt-org-block p {
        font-size: 17px;
    }

    .receipt-org-name {
        font-size: 20px;
    }

    .receipt-stamp {
        font-size: 30px;
        max-width: 160px;
    }

    .receipt-action {
        width: 48%;
    }
}
.invoice-logo-wrap img {
    max-height: 110px;
    max-width: 100%;
    object-fit: contain;
}
.invoice-number-row {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 12px 0 8px;
}
.invoice-number-row span {
    color: #1b1b1b;
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
}
.invoice-number-row strong {
    color: #111;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}
.invoice-divider {
    background: #d5d5d5;
    height: 1px;
    margin: 0 0 16px;
}
.invoice-details-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.invoice-left,
.invoice-right {
    display: grid;
    gap: 6px;
}
.invoice-left p,
.invoice-right p {
    color: #111;
    font-size: 18px;
    line-height: 1.35;
    margin: 0;
}
.invoice-right {
    justify-items: end;
    text-align: right;
}
.invoice-right strong {
    color: #111;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}
.invoice-table {
    margin-top: 12px;
}
.invoice-table-head,
.invoice-table-row {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.invoice-table-head {
    color: #8b8b8b;
    font-size: 14px;
    margin-bottom: 14px;
    text-align: center;
}
.invoice-table-row {
    color: #111;
    font-size: 18px;
    text-align: center;
}
.invoice-table-row span {
    word-break: break-word;
}
.invoice-summary {
    display: grid;
    gap: 14px;
    margin-top: 22px;
}
.invoice-summary-row {
    display: grid;
    grid-template-columns: 1fr 110px;
    align-items: center;
    font-size: 18px;
}
.invoice-summary-row span {
    color: #111;
    text-align: right;
}
.invoice-summary-row strong {
    color: #111;
    font-weight: 400;
    text-align: right;
}
.invoice-summary-row.strong span,
.invoice-summary-row.strong strong {
    font-weight: 700;
}
.invoice-due-bar {
    align-items: center;
    background: #2492f2;
    color: #fff;
    display: grid;
    font-size: 18px;
    grid-template-columns: 1fr 110px;
    padding: 10px 16px;
}
.invoice-due-bar span {
    text-align: center;
}
.invoice-due-bar strong {
    text-align: right;
}
.invoice-note {
    color: #111;
    font-size: 18px;
    margin-top: 26px;
    min-height: 28px;
}
.invoice-actions {
    display: flex;
    gap: 22px;
    justify-content: center;
    margin-top: 26px;
    padding-bottom: 12px;
}
.invoice-action {
    border: 0;
    border-radius: 8px;
    color: #fff;
    font-size: 22px;
    font-weight: 400;
    min-width: 205px;
    padding: 16px 22px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, .2);
}
.invoice-action.whatsapp {
    background: #4caf50;
}
.invoice-action.share {
    background: #2196f3;
}
@media (max-width: 767px) {
    .invoice-view-shell {
        width: 100%;
        box-shadow: none;
    }
    .invoice-appbar {
        height: 104px;
        padding: 0 18px;
    }
    .invoice-appbar h1 {
        font-size: 32px;
    }
    .invoice-left p,
    .invoice-right p,
    .invoice-table-head,
    .invoice-table-row,
    .invoice-summary-row,
    .invoice-due-bar,
    .invoice-note {
        font-size: 16px;
    }
    .invoice-number-row span,
    .invoice-number-row strong {
        font-size: 24px;
    }
    .invoice-right strong {
        font-size: 20px;
    }
    .invoice-actions {
        flex-direction: column;
        align-items: center;
        gap: 14px;
    }
    .invoice-action {
        width: min(100%, 210px);
        min-width: 0;
        font-size: 20px;
    }
}
@media print {
    .no-print,
    .invoice-appbar,
    .invoice-actions,
    .invoice-print-toolbar {
        display: none !important;
    }
    body {
        background: #fff !important;
    }
    .invoice-view-body,
    .invoice-view-shell {
        box-shadow: none !important;
        width: 100% !important;
    }
    .invoice-card {
        padding: 0 !important;
    }
}

@font-face {
    font-family: "Poppins";
    src: url("../../golibrary/lib/appCommon/Fonts/Poppins-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Poppins";
    src: url("../../golibrary/lib/appCommon/Fonts/Poppins-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Poppins";
    src: url("../../golibrary/lib/appCommon/Fonts/Poppins-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Poppins";
    src: url("../../golibrary/lib/appCommon/Fonts/Poppins-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans Devanagari";
    src: url("../../golibrary/lib/appCommon/Fonts/NotoSansDevanagari-Regular.ttf") format("truetype");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

* { box-sizing: border-box; }
html { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: var(--font-main); font-weight: 400; }
a { text-decoration: none; }
button,
input,
select,
textarea,
.btn,
.form-control,
.form-select { font-family: var(--font-main); letter-spacing: 0; }
.btn { font-weight: 700; }

.page-load-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(244, 247, 251, .72);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    backdrop-filter: blur(5px);
    transition: opacity .18s ease, visibility .18s ease;
}
.page-load-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.page-load-card {
    min-width: 210px;
    display: grid;
    justify-items: center;
    gap: 9px;
    padding: 26px 32px;
    border: 1px solid rgba(23, 107, 135, .16);
    border-radius: 16px;
    color: #102638;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(240, 248, 251, .94)),
        #fff;
    box-shadow: 0 22px 60px rgba(15, 23, 42, .18);
}
.page-load-card img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .12);
}
.page-load-ring {
    width: 48px;
    height: 48px;
    display: block;
    border: 4px solid rgba(23, 107, 135, .12);
    border-top-color: #176b87;
    border-right-color: #f4a261;
    border-radius: 999px;
    animation: pageLoaderSpin .8s linear infinite;
}
.page-load-card strong {
    font-size: 17px;
    font-weight: 800;
}
.page-load-card small {
    color: #667085;
    font-size: 12px;
    font-weight: 600;
}

@keyframes pageLoaderSpin {
    to { transform: rotate(360deg); }
}

.landing-page {
    position: relative;
    min-height: 100vh;
    color: #fff;
    background:
        radial-gradient(circle at 16% 14%, rgba(45, 141, 240, .36), transparent 28%),
        radial-gradient(circle at 86% 20%, rgba(244, 162, 97, .25), transparent 26%),
        linear-gradient(rgba(6, 20, 24, .62), rgba(4, 18, 24, .82)),
        url("../images/bg_1.jpg") center / cover fixed;
    overflow-x: hidden;
}
.landing-page:before,
.login-command-page:before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(120deg, rgba(255,255,255,.04) 0, rgba(255,255,255,.04) 1px, transparent 1px, transparent 34px);
    z-index: 0;
}
.landing-page > *,
.login-command-page > * { position: relative; z-index: 1; }
.page-3d-scene {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    perspective: 1100px;
    z-index: 0;
}
.page-3d-scene span { position: absolute; display: block; }
.scene-orbit {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.22);
    transform-style: preserve-3d;
    animation: orbitSpin 18s linear infinite;
}
.scene-orbit:before,
.scene-orbit:after {
    content: "";
    position: absolute;
    border-radius: inherit;
    inset: 18px;
    border: 1px dashed rgba(255,255,255,.14);
}
.scene-orbit:after {
    inset: 86px;
    background: rgba(255,255,255,.12);
    box-shadow: 0 0 34px rgba(255,255,255,.18);
}
.scene-cube {
    width: 96px;
    height: 96px;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.08)),
        linear-gradient(45deg, rgba(45,141,240,.34), rgba(42,157,143,.18));
    border: 1px solid rgba(255,255,255,.26);
    box-shadow:
        26px 30px 60px rgba(0,0,0,.28),
        inset 18px 18px 24px rgba(255,255,255,.12),
        inset -18px -18px 24px rgba(0,0,0,.16);
    transform-style: preserve-3d;
    animation: cubeFloat 8s ease-in-out infinite;
}
.scene-cube:before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.22);
    transform: translateZ(28px);
}
.scene-card {
    width: 168px;
    height: 104px;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255,255,255,.25), rgba(255,255,255,.07));
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 26px 54px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.18);
    transform-style: preserve-3d;
    animation: panelDrift 10s ease-in-out infinite;
}
.scene-card:before,
.scene-card:after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.22);
}
.scene-card:before { top: 26px; }
.scene-card:after { top: 48px; width: 52%; right: auto; }
.scene-runner {
    width: 360px;
    height: 82px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.15), rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 24px 60px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.16);
    transform: rotateX(66deg) rotateZ(-8deg);
}
.scene-runner i {
    position: absolute;
    top: 34px;
    left: 30px;
    width: 42px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, #66e6ff, #fff);
    box-shadow: 0 0 22px rgba(102,230,255,.84);
    animation: runnerLight 2.6s ease-in-out infinite;
}
.scene-runner i:nth-child(2) { animation-delay: .38s; opacity: .82; }
.scene-runner i:nth-child(3) { animation-delay: .76s; opacity: .62; }
.scene-runner i:nth-child(4) { animation-delay: 1.14s; opacity: .42; }
.landing-3d-scene .orbit-one { left: -92px; top: 92px; }
.landing-3d-scene .orbit-two { right: 6%; bottom: 12%; width: 180px; height: 180px; animation-duration: 22s; animation-direction: reverse; }
.landing-3d-scene .cube-one { right: 10%; top: 120px; }
.landing-3d-scene .cube-two { left: 6%; bottom: 132px; width: 74px; height: 74px; animation-delay: -3s; }
.landing-3d-scene .stack-one { right: 23%; bottom: 76px; transform: rotateX(58deg) rotateZ(14deg); }
.landing-3d-scene .stack-two { left: 24%; top: 96px; width: 132px; height: 86px; animation-delay: -5s; }
.landing-3d-scene .scene-runner { left: 50%; bottom: 72px; margin-left: -180px; }
.landing-nav {
    height: 52px;
    padding: 0 24px 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(20, 29, 30, .76);
    border-bottom: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(16px);
    box-shadow: 0 14px 42px rgba(0,0,0,.22);
}
.landing-logo { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; }
.landing-logo img { width: 78px; height: 42px; object-fit: contain; }
.landing-login {
    color: #fff;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.2);
    box-shadow: 0 12px 24px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.12);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.landing-login:hover { color: #fff; background: rgba(255,255,255,.24); transform: translateY(-2px); box-shadow: 0 18px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.18); }
.landing-main { width: min(1180px, calc(100% - 36px)); margin: 14px auto 0; display: grid; gap: 16px; }
.glass-panel,
.glass-card {
    border: 1px solid rgba(255,255,255,.2);
    background: linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,.08));
    box-shadow: 0 26px 0 rgba(0,0,0,.08), 0 30px 80px rgba(0,0,0,.27), inset 0 1px 0 rgba(255,255,255,.18);
    backdrop-filter: blur(14px);
    transform-style: preserve-3d;
}
.landing-hero {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    min-height: 156px;
    padding: 26px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px 430px;
    align-items: center;
    gap: 24px;
    animation: heroLift 7s ease-in-out infinite;
}
.landing-hero:before {
    content: "";
    position: absolute;
    inset: -60% -10% auto;
    height: 130%;
    background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.24), transparent 52%);
    transform: translateX(-70%) rotate(10deg);
    animation: glassSweep 5.8s ease-in-out infinite;
}
.landing-hero > * { position: relative; z-index: 1; }
.hero-copy { display: flex; align-items: center; gap: 16px; min-width: 0; }
.hero-logo-tile,
.feature-icon {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.1));
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 16px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18);
    transform: translateZ(24px);
}
.hero-logo-tile img { width: 48px; height: 48px; object-fit: contain; }
.library-hero-animation {
    position: relative;
    justify-self: center;
    flex: 0 0 178px;
    height: 118px;
    transform-style: preserve-3d;
    transform: translateZ(30px) rotateX(58deg) rotateZ(-8deg);
}
.book-stack {
    position: absolute;
    left: 22px;
    bottom: 22px;
    width: 104px;
    height: 64px;
    transform-style: preserve-3d;
    animation: bookStackFloat 4.8s ease-in-out infinite;
}
.book-stack.stack-b {
    left: 76px;
    bottom: 46px;
    width: 88px;
    transform: translateZ(18px) rotateZ(5deg);
    animation-delay: -1.8s;
}
.book-stack i {
    position: absolute;
    left: 0;
    width: 100%;
    height: 16px;
    border-radius: 5px;
    background: linear-gradient(90deg, #f4a261 0 16%, rgba(255,255,255,.92) 16% 23%, #2d8df0 23% 100%);
    border: 1px solid rgba(255,255,255,.32);
    box-shadow: 0 10px 22px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.35);
}
.book-stack i:nth-child(1) { bottom: 0; }
.book-stack i:nth-child(2) { bottom: 17px; width: 88%; left: 8px; background: linear-gradient(90deg, #2a9d8f 0 18%, rgba(255,255,255,.92) 18% 26%, #176b87 26% 100%); }
.book-stack i:nth-child(3) { bottom: 34px; width: 72%; left: 16px; background: linear-gradient(90deg, #e76f51 0 16%, rgba(255,255,255,.92) 16% 24%, #f4a261 24% 100%); }
.student-path {
    position: absolute;
    width: 34px;
    height: 56px;
    transform-style: preserve-3d;
    animation: studentWalk 5.6s ease-in-out infinite;
}
.student-path i,
.walking-student i {
    position: absolute;
    left: 50%;
    top: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff2cf;
    box-shadow: 0 0 18px rgba(255,242,207,.38);
    transform: translateX(-50%);
}
.student-path:before,
.walking-student:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 19px;
    width: 24px;
    height: 24px;
    border-radius: 9px 9px 14px 14px;
    background: linear-gradient(145deg, #2d8df0, #176b87);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 14px rgba(0,0,0,.18);
    transform: translateX(-50%);
}
.student-path:after,
.walking-student:after {
    content: "";
    position: absolute;
    left: 8px;
    bottom: 0;
    width: 18px;
    height: 13px;
    border-left: 5px solid rgba(255,255,255,.82);
    border-right: 5px solid rgba(255,255,255,.82);
    border-radius: 0 0 8px 8px;
    animation: studentSteps .58s ease-in-out infinite;
}
.hero-path-one { left: 18px; top: 6px; }
.hero-path-two {
    left: 132px;
    top: 54px;
    transform: scale(.82);
    animation-delay: -2.4s;
}
.hero-path-two:before { background: linear-gradient(145deg, #f4a261, #e76f51); }
.seat-row {
    position: absolute;
    left: 12px;
    right: 18px;
    bottom: 9px;
    height: 30px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
}
.seat-row i {
    position: relative;
    width: 34px;
    height: 22px;
    border-radius: 12px 12px 8px 8px;
    background: linear-gradient(145deg, #2a9d8f, #176b87);
    box-shadow: 0 10px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.22);
    animation: seatPulse 3.4s ease-in-out infinite;
}
.seat-row i:before {
    content: "";
    position: absolute;
    left: 7px;
    right: 7px;
    top: -12px;
    height: 15px;
    border-radius: 9px 9px 3px 3px;
    background: linear-gradient(145deg, rgba(255,255,255,.42), rgba(255,255,255,.16));
    border: 1px solid rgba(255,255,255,.26);
}
.seat-row i:nth-child(2) { animation-delay: -.5s; }
.seat-row i:nth-child(3) { animation-delay: -1s; }
.reading-lamp {
    position: absolute;
    right: 10px;
    top: 4px;
    width: 42px;
    height: 70px;
    border-left: 5px solid rgba(255,255,255,.72);
    border-bottom: 5px solid rgba(255,255,255,.72);
    border-radius: 0 0 0 18px;
    animation: lampGlow 3.2s ease-in-out infinite;
}
.reading-lamp:before {
    content: "";
    position: absolute;
    right: -24px;
    top: -6px;
    width: 46px;
    height: 28px;
    border-radius: 24px 24px 10px 10px;
    background: linear-gradient(145deg, #fff6d1, #f4a261);
    box-shadow: 0 0 36px rgba(244,162,97,.58);
}
.reading-lamp:after {
    content: "";
    position: absolute;
    right: -42px;
    top: 20px;
    width: 86px;
    height: 68px;
    clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%);
    background: linear-gradient(180deg, rgba(255,226,149,.3), transparent);
}
.desk-line {
    position: absolute;
    left: 8px;
    right: 4px;
    bottom: 10px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,255,255,.2), rgba(255,255,255,.72), rgba(255,255,255,.12));
    box-shadow: 0 16px 26px rgba(0,0,0,.22);
}
.landing-hero h1 { margin: 0; font-size: 30px; letter-spacing: .01em; font-weight: 500; }
.landing-hero p { max-width: 640px; margin: 4px 0 12px; color: rgba(255,255,255,.82); font-weight: 400; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-tags span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.2);
}
.hero-secure,
.landing-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    color: #fff;
    font-weight: 600;
    border-radius: 999px;
    background: #2d8df0;
    box-shadow: 0 8px 0 #1762ad, 0 20px 42px rgba(45,141,240,.38);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.hero-secure {
    display: grid;
    grid-template-columns: 28px 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 1px;
    padding: 12px 16px;
    text-align: left;
}
.hero-secure i {
    grid-row: 1 / 3;
    align-self: center;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255,255,255,.16);
}
.hero-secure span {
    line-height: 1.15;
}
.hero-secure small {
    color: rgba(255,255,255,.78);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}
.hero-secure:hover,
.landing-cta:hover { color: #fff; background: #237de0; transform: translateY(-3px); box-shadow: 0 11px 0 #1762ad, 0 26px 48px rgba(45,141,240,.44); }
.hero-action-card {
    justify-self: end;
    width: 430px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 18px 38px rgba(0,0,0,.18);
    transform: translateZ(26px);
}
.hero-action-card > span {
    display: block;
    margin: 0 0 10px;
    color: rgba(255,255,255,.76);
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
}
.hero-action-row {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: stretch;
    width: 100%;
}
.hero-action-item {
    flex: 1 1 0;
    min-width: 0;
    min-height: 72px;
    display: grid;
    grid-template-columns: 36px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    padding: 14px 16px;
    color: #fff;
    text-align: left;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 20px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 9px 0 rgba(0,0,0,.22), 0 20px 36px rgba(0,0,0,.24);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.hero-action-item:hover {
    color: #fff;
    filter: brightness(1.04);
    transform: translateY(-3px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 12px 0 rgba(0,0,0,.22), 0 28px 46px rgba(0,0,0,.28);
}
.hero-action-item i {
    grid-row: 1 / 3;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(255,255,255,.16);
    font-size: 18px;
}
.hero-action-item strong {
    align-self: end;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.1;
}
.hero-action-item small {
    align-self: start;
    color: rgba(255,255,255,.8);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
}
.hero-login { background: linear-gradient(135deg, #2d8df0, #237de0); }
.hero-register { background: linear-gradient(135deg, #ff624d, #e1513b); }
.landing-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.glass-card { border-radius: 18px; padding: 18px; min-height: 158px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.glass-card:hover {
    transform: translateY(-6px) rotateX(3deg);
    border-color: rgba(255,255,255,.32);
    box-shadow: 0 31px 0 rgba(0,0,0,.07), 0 38px 86px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.24);
}
.glass-card .feature-icon { width: 42px; height: 42px; border-radius: 12px; margin-bottom: 14px; }
.glass-card h2 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.glass-card p { margin: 0; color: rgba(255,255,255,.82); font-weight: 400; line-height: 1.55; }
.landing-wide {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 24px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
}
.landing-wide:after {
    content: "";
    position: absolute;
    right: -40px;
    top: -70px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    border: 30px solid rgba(255,255,255,.08);
}
.landing-wide > * { position: relative; z-index: 1; }
.landing-wide small { color: rgba(255,255,255,.72); font-weight: 500; }
.landing-wide h2 { margin: 2px 0 4px; font-size: 28px; font-weight: 500; }
.landing-wide p { margin: 0 0 12px; color: rgba(255,255,255,.84); }
.landing-footer {
    width: min(600px, calc(100% - 40px));
    margin: 60px auto 0;
    padding: 12px;
    text-align: center;
    color: rgba(255,255,255,.8);
    font-weight: 600;
    border-radius: 4px;
    background: rgba(0,0,0,.74);
    border: 1px solid rgba(255,255,255,.08);
}
.landing-footer strong { color: #4aa3ff; }

.login-command-page {
    position: relative;
    min-height: 100vh;
    color: #fff;
    background:
        radial-gradient(circle at 12% 12%, rgba(45, 141, 240, .34), transparent 25%),
        radial-gradient(circle at 88% 18%, rgba(244, 162, 97, .18), transparent 24%),
        radial-gradient(circle at 50% 88%, rgba(42, 157, 143, .16), transparent 30%),
        linear-gradient(115deg, rgba(3, 8, 13, .94) 0%, rgba(5, 20, 30, .86) 42%, rgba(2, 7, 12, .96) 100%),
        url("../images/bg_1.jpg") center / cover fixed;
    overflow-x: hidden;
}
.login-3d-scene .orbit-one { right: 4%; top: 48px; }
.login-3d-scene .orbit-two { left: 7%; bottom: 72px; width: 210px; height: 210px; animation-duration: 24s; animation-direction: reverse; }
.login-3d-scene .cube-one { left: 44%; top: 74px; }
.login-3d-scene .cube-two { right: 8%; bottom: 120px; width: 82px; height: 82px; animation-delay: -4s; }
.login-3d-scene .stack-one { left: 10%; top: 22%; }
.login-3d-scene .stack-two { right: 30%; bottom: 88px; width: 132px; height: 86px; animation-delay: -4s; }
.login-3d-scene .scene-runner { right: 58px; bottom: 32px; }
.login-command-wrap {
    min-height: 100vh;
    width: min(1220px, calc(100% - 34px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    align-items: center;
    gap: 22px;
    perspective: 1400px;
}
.login-intro-card {
    position: relative;
    overflow: hidden;
    padding: 40px;
    border-radius: 30px;
    background:
        linear-gradient(145deg, rgba(14, 30, 43, .88), rgba(6, 13, 21, .64)),
        linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035));
    border: 1px solid rgba(255,255,255,.2);
    box-shadow: 0 28px 0 rgba(0,0,0,.18), 0 38px 94px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.16);
    transform: rotateY(3deg) translateZ(0);
    transform-style: preserve-3d;
    animation: introFloat 7s ease-in-out infinite;
}
.login-intro-card:before {
    content: "";
    position: absolute;
    left: -22%;
    top: -18%;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    border: 54px solid rgba(255,255,255,.045);
    animation: slowPulse 5s ease-in-out infinite;
}
.login-intro-card > * { position: relative; z-index: 1; }
.login-intro-top { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.login-intro-top img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.12));
    padding: 8px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 20px rgba(0,0,0,.14);
}
.login-intro-top span {
    display: inline-flex;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
}
.login-intro-top small { display: block; margin-top: 14px; color: rgba(255,255,255,.68); text-transform: uppercase; letter-spacing: .14em; font-size: 13px; font-weight: 500; }
.login-intro-card h1 { max-width: 560px; font-size: 54px; line-height: 1.02; margin: 0 0 18px; font-weight: 400; }
.login-intro-card p { max-width: 650px; color: rgba(255,255,255,.86); font-size: 16px; line-height: 1.65; font-weight: 500; }
.login-library-animation {
    position: relative;
    width: min(100%, 620px);
    height: 138px;
    margin: 24px 0 8px;
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)),
        linear-gradient(90deg, rgba(45,141,240,.13), rgba(42,157,143,.12), rgba(244,162,97,.12));
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 18px 36px rgba(0,0,0,.16);
    overflow: hidden;
}
.login-library-animation:before {
    content: "";
    position: absolute;
    inset: 16px 22px;
    background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 46px);
}
.shelf {
    position: absolute;
    left: 28px;
    right: 28px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,255,255,.2), rgba(255,255,255,.74), rgba(255,255,255,.18));
    box-shadow: 0 11px 18px rgba(0,0,0,.16);
}
.shelf-top { top: 46px; }
.shelf-bottom { bottom: 32px; }
.shelf-book {
    position: absolute;
    bottom: 40px;
    width: 20px;
    height: 52px;
    border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg, #2d8df0, #176b87);
    border: 1px solid rgba(255,255,255,.24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 16px rgba(0,0,0,.16);
    transform-origin: bottom center;
    animation: bookLean 3.8s ease-in-out infinite;
}
.book-one { left: 54px; height: 64px; background: linear-gradient(180deg, #f4a261, #e76f51); }
.book-two { left: 82px; height: 56px; animation-delay: -.7s; }
.book-three { left: 110px; height: 68px; background: linear-gradient(180deg, #2a9d8f, #176b87); animation-delay: -1.2s; }
.book-four { left: 140px; height: 58px; background: linear-gradient(180deg, #ffffff, #c8d7e4); animation-delay: -1.7s; }
.study-seat {
    position: absolute;
    bottom: 30px;
    width: 52px;
    height: 30px;
    border-radius: 14px 14px 8px 8px;
    background: linear-gradient(145deg, #2a9d8f, #176b87);
    box-shadow: 0 15px 22px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.22);
    animation: seatPulse 3.8s ease-in-out infinite;
}
.study-seat:before {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: -17px;
    height: 22px;
    border-radius: 12px 12px 4px 4px;
    background: linear-gradient(145deg, rgba(255,255,255,.44), rgba(255,255,255,.16));
    border: 1px solid rgba(255,255,255,.22);
}
.study-seat:after {
    content: "";
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: -14px;
    height: 14px;
    border-left: 4px solid rgba(255,255,255,.36);
    border-right: 4px solid rgba(255,255,255,.36);
}
.seat-one { left: 238px; }
.seat-two { left: 304px; animation-delay: -.7s; }
.seat-three { left: 370px; animation-delay: -1.4s; }
.walking-student {
    position: absolute;
    left: 204px;
    bottom: 54px;
    width: 34px;
    height: 56px;
    animation: studentCross 6.4s ease-in-out infinite;
}
.walking-student.student-two {
    left: auto;
    right: 228px;
    bottom: 62px;
    transform: scale(.86);
    animation: studentCrossReverse 7.2s ease-in-out infinite;
    animation-delay: -2.2s;
}
.walking-student.student-two:before { background: linear-gradient(145deg, #f4a261, #e76f51); }
.reader-seat {
    position: absolute;
    right: 98px;
    bottom: 36px;
    width: 78px;
    height: 44px;
    border-radius: 20px 20px 12px 12px;
    background: linear-gradient(145deg, #2a9d8f, #176b87);
    box-shadow: 0 18px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.24);
    animation: readerSeat 4.2s ease-in-out infinite;
}
.reader-seat:before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -18px;
    height: 18px;
    border-left: 5px solid rgba(255,255,255,.38);
    border-right: 5px solid rgba(255,255,255,.38);
}
.reader-dot {
    position: absolute;
    right: 126px;
    bottom: 88px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff3d2;
    box-shadow: 0 0 20px rgba(255,243,210,.4);
    animation: readerSeat 4.2s ease-in-out infinite;
}
.scan-light {
    position: absolute;
    left: -120px;
    top: 0;
    width: 90px;
    height: 100%;
    transform: skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    animation: shelfScan 5.5s ease-in-out infinite;
}
.login-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0 30px; }
.login-mini-grid article {
    position: relative;
    overflow: hidden;
    min-height: 170px;
    padding: 16px;
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(37, 70, 88, .58), rgba(9, 18, 29, .48));
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 14px 0 rgba(0,0,0,.08), 0 18px 34px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.12);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.login-mini-grid article:after {
    content: "";
    position: absolute;
    inset: auto -20px -36px auto;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
}
.login-mini-grid article:hover {
    transform: translateY(-5px) rotateX(4deg);
    border-color: rgba(255,255,255,.26);
    box-shadow: 0 19px 0 rgba(0,0,0,.075), 0 25px 42px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.16);
}
.login-mini-grid i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.14); margin-bottom: 18px; color: #fff; font-size: 15px; }
.login-mini-grid strong { display: block; margin-bottom: 6px; font-weight: 700; font-size: 15px; }
.login-mini-grid span { color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.55; }
.login-note { padding: 18px 22px; border-left: 3px solid rgba(255,255,255,.68); border-radius: 16px; background: rgba(255,255,255,.065); color: rgba(255,255,255,.88); font-weight: 600; line-height: 1.55; }
.login-form-shell footer {
    padding: 14px;
    text-align: center;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.55));
    border-radius: 0 0 24px 24px;
    box-shadow: 0 18px 50px rgba(0,0,0,.3);
}
.login-form-card {
    position: relative;
    overflow: hidden;
    padding: 22px 16px 24px;
    border-radius: 28px 28px 0 0;
    background:
        radial-gradient(circle at 90% 10%, rgba(45,141,240,.18), transparent 28%),
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(231,240,250,.94)),
        #fff;
    color: #162232;
    border: 1px solid rgba(255,255,255,.72);
    box-shadow: 0 26px 0 rgba(0,0,0,.18), 0 36px 86px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.92);
    transform: rotateY(-5deg) translateZ(0);
    transform-style: preserve-3d;
    animation: formFloat 6.5s ease-in-out infinite;
}
.signup-form-card { padding-bottom: 22px; }
.signup-form-card .command-input { margin-bottom: 11px; }
.signup-form-card .auth-segment { margin-bottom: 16px; }
.signup-form-card p { margin-bottom: 14px; }
.forgot-form-card .command-input { margin-bottom: 18px; }
.forgot-form-card .auth-segment { margin-bottom: 18px; }
.recovery-segment a { min-height: 42px; }
.password-rule-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
    margin: -6px 0 16px;
    padding: 12px;
    border: 1px solid rgba(240,85,63,.18);
    border-radius: 12px;
    background: rgba(240,85,63,.06);
    color: #5f6c7c;
    font-size: 11px;
    font-weight: 700;
}
.password-rule-box span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.password-rule-box i { color: #00b445; }
.login-form-card:before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 6px;
    background: linear-gradient(90deg, #2d8df0, #2a9d8f, #f4a261, #2d8df0);
    background-size: 220% 100%;
    animation: runningGradient 3s linear infinite;
}
.login-form-card:after {
    content: "";
    position: absolute;
    right: -42px;
    top: 48px;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(45,141,240,.13), transparent 64%);
}
.login-form-card > * { position: relative; z-index: 1; }
.login-form-card h2 { margin: 0; font-size: 30px; font-weight: 700; color: #102033; }
.login-form-card p { color: #718098; margin-bottom: 18px; font-size: 14px; line-height: 1.65; font-weight: 400; }
.auth-segment {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 5px;
    margin: 0 0 18px;
    border: 1px solid #f4d8d1;
    border-radius: 999px;
    background: #fff0ec;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 12px 26px rgba(240,85,63,.08);
}
.auth-segment a {
    min-height: 44px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #5f6670;
    font-weight: 700;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.auth-segment a.active {
    color: #e1513b;
    background: #fff;
    box-shadow: 0 10px 24px rgba(240,85,63,.16);
}
.auth-segment a:not(.active):hover { color: #e1513b; transform: translateY(-1px); }
.command-input { position: relative; margin-bottom: 14px; }
.command-input i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #7e8ea1;
    z-index: 2;
    font-size: 15px;
}
.command-input .form-control {
    height: 48px;
    border-radius: 0;
    border-color: #d8e1ec;
    background: #f9fbfd;
    padding-left: 30px;
    padding-right: 42px;
    color: #172334;
    font-size: 15px;
    font-weight: 400;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}
.command-input .form-control::placeholder { color: #7f8792; opacity: .9; }
.command-input .form-control:focus {
    background: #fff;
    border-color: #9fc9ff;
    box-shadow: 0 0 0 3px rgba(45,141,240,.18), 0 12px 22px rgba(45,141,240,.12);
    transform: translateY(-1px);
}
.command-password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    color: #7e8ea1;
    background: transparent;
    z-index: 3;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    transition: background .18s ease, color .18s ease;
}
.command-password-toggle:hover { background: #edf5ff; color: #2d8df0; }
.command-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 14px 0;
    color: #727f91;
}
.register-options {
    grid-template-columns: 1fr;
    margin: 8px 0 12px;
    color: #e1513b;
}
.command-options label { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 400; }
.command-options.register-options label { font-weight: 700; }
.command-options input {
    width: 14px;
    height: 14px;
    border: 1px solid #b7c4d3;
    accent-color: #2d8df0;
}
.command-action-row {
    padding-top: 12px;
    border-top: 1px dashed #dce4ed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.command-action-row a { color: #6f7a88; font-size: 12px; font-weight: 600; }
.command-action-row a:hover { color: #2d8df0; }
.command-register-row {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
    color: #718098;
    font-size: 13px;
    font-weight: 500;
}
.command-register-row a { color: #e1513b; font-weight: 800; }
.command-register-row a:hover { color: #c73f2e; }
.command-submit {
    border: 0;
    border-radius: 12px;
    padding: 10px 28px;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    background: linear-gradient(135deg, #2d8df0, #2a7fe8);
    box-shadow: 0 7px 0 #1762ad, 0 18px 34px rgba(45,141,240,.3);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.command-submit:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 10px 0 #1762ad, 0 24px 42px rgba(45,141,240,.38); }
.command-submit i { font-size: 13px; vertical-align: -1px; }
.register-submit {
    width: 100%;
    background: linear-gradient(135deg, #f0553f, #e1513b);
    box-shadow: 0 7px 0 #c73f2e, 0 18px 34px rgba(240,85,63,.3);
}
.register-submit:hover {
    box-shadow: 0 10px 0 #b63526, 0 24px 42px rgba(240,85,63,.38);
}
.recovery-submit {
    width: 100%;
    background: linear-gradient(135deg, #f0553f, #e1513b);
    box-shadow: 0 7px 0 #c73f2e, 0 18px 34px rgba(240,85,63,.3);
}
.recovery-submit:hover {
    box-shadow: 0 10px 0 #b63526, 0 24px 42px rgba(240,85,63,.38);
}
.login-form-card .member-library-field { margin-bottom: 14px; }
.login-form-card .input-group-text { border-radius: 0; font-weight: 700; color: #2d8df0; background: #eef5ff; font-size: 14px; }
.login-form-card .input-group .form-control { border-radius: 0; font-size: 14px; }

@keyframes orbitSpin {
    0% { transform: rotateX(72deg) rotateZ(0deg); }
    100% { transform: rotateX(72deg) rotateZ(360deg); }
}
@keyframes cubeFloat {
    0%, 100% { transform: translate3d(0, 0, 0) rotateX(58deg) rotateY(0deg) rotateZ(38deg); }
    50% { transform: translate3d(0, -22px, 42px) rotateX(66deg) rotateY(18deg) rotateZ(48deg); }
}
@keyframes panelDrift {
    0%, 100% { transform: translate3d(0, 0, 0) rotateX(58deg) rotateZ(14deg); }
    50% { transform: translate3d(12px, -18px, 36px) rotateX(64deg) rotateZ(9deg); }
}
@keyframes runnerLight {
    0% { transform: translateX(0) scaleX(.55); opacity: 0; }
    18% { opacity: 1; }
    82% { opacity: 1; }
    100% { transform: translateX(250px) scaleX(1); opacity: 0; }
}
@keyframes heroLift {
    0%, 100% { transform: translateY(0) rotateX(0deg); }
    50% { transform: translateY(-4px) rotateX(1.5deg); }
}
@keyframes glassSweep {
    0%, 42% { transform: translateX(-76%) rotate(10deg); }
    70%, 100% { transform: translateX(96%) rotate(10deg); }
}
@keyframes introFloat {
    0%, 100% { transform: rotateY(3deg) translateY(0); }
    50% { transform: rotateY(4deg) translateY(-8px); }
}
@keyframes formFloat {
    0%, 100% { transform: rotateY(-5deg) translateY(0); }
    50% { transform: rotateY(-3deg) translateY(-7px); }
}
@keyframes slowPulse {
    0%, 100% { transform: scale(.96); opacity: .72; }
    50% { transform: scale(1.08); opacity: 1; }
}
@keyframes runningGradient {
    0% { background-position: 0 0; }
    100% { background-position: 220% 0; }
}
@keyframes bookStackFloat {
    0%, 100% { transform: translate3d(0, 0, 0) rotateZ(0deg); }
    50% { transform: translate3d(6px, -10px, 18px) rotateZ(-2deg); }
}
@keyframes lampGlow {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(244,162,97,.28)); opacity: .86; }
    50% { filter: drop-shadow(0 0 18px rgba(244,162,97,.58)); opacity: 1; }
}
@keyframes bookLean {
    0%, 100% { transform: rotateZ(0deg); }
    50% { transform: rotateZ(-4deg) translateY(-3px); }
}
@keyframes readerSeat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
@keyframes shelfScan {
    0%, 35% { transform: translateX(0) skewX(-18deg); opacity: 0; }
    52% { opacity: 1; }
    82%, 100% { transform: translateX(820px) skewX(-18deg); opacity: 0; }
}
@keyframes studentWalk {
    0%, 100% { transform: translate3d(0, 0, 18px) scale(.72); opacity: .76; }
    45% { transform: translate3d(62px, 26px, 34px) scale(.88); opacity: 1; }
    70% { transform: translate3d(90px, 12px, 28px) scale(.82); opacity: .9; }
}
@keyframes studentCross {
    0%, 100% { transform: translateX(0) scale(.82); opacity: .76; }
    45% { transform: translateX(172px) scale(1); opacity: 1; }
    68% { transform: translateX(214px) scale(.92); opacity: .86; }
}
@keyframes studentCrossReverse {
    0%, 100% { transform: translateX(0) scale(.78); opacity: .68; }
    48% { transform: translateX(-132px) scale(.92); opacity: 1; }
    72% { transform: translateX(-178px) scale(.86); opacity: .82; }
}
@keyframes studentSteps {
    0%, 100% { transform: skewX(-8deg); }
    50% { transform: skewX(8deg); }
}
@keyframes seatPulse {
    0%, 100% { transform: translateY(0); filter: brightness(1); }
    50% { transform: translateY(-3px); filter: brightness(1.08); }
}

.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: linear-gradient(135deg, #e7f4f6, #f8fafc 45%, #fff3e8); }
.auth-card { width: min(1080px, 100%); display: grid; grid-template-columns: 1fr 420px; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 24px 70px rgba(23, 32, 42, .14); }
.auth-card-refined { width: min(1120px, 100%); grid-template-columns: minmax(0, 1.25fr) 420px; }
.auth-visual { padding: 48px; background: radial-gradient(circle at 16% 12%, rgba(244, 162, 97, .2), transparent 28%), linear-gradient(145deg, #0f3d4d, #124a5b 62%, #0b2f3c); color: #fff; display: flex; flex-direction: column; justify-content: space-between; min-height: 620px; }
.auth-visual img { width: 86px; height: 86px; object-fit: contain; }
.auth-visual h1 { font-size: 42px; line-height: 1.05; margin: 26px 0 12px; }
.auth-panel { padding: 44px 38px; display: flex; flex-direction: column; justify-content: center; }
.auth-panel h2 { font-weight: 800; margin-bottom: 6px; }
.auth-kicker { display: inline-flex; margin-top: 28px; color: #f4c38f; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.auth-points { display: flex; flex-wrap: wrap; gap: 10px; color: rgba(255,255,255,.72); }
.auth-points span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); }
.auth-panel-head { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.auth-badge { width: 46px; height: 46px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: var(--primary); font-size: 22px; box-shadow: 0 12px 28px rgba(23,107,135,.22); }
.input-icon { position: relative; }
.input-icon > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); z-index: 2; color: #8ca0af; font-size: 18px; }
.input-icon .form-control { padding-left: 44px; }
.password-field .form-control { padding-right: 48px; }
.password-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: 8px; background: transparent; color: var(--primary); display: grid; place-items: center; z-index: 3; }
.password-toggle:hover { background: #edf6f8; }
.login-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; }
.login-options .form-check { min-height: 38px; display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 34px; border: 1px solid #e2eaf2; border-radius: 8px; background: #f8fbfd; }
.login-options .form-check-input { margin-left: -24px; margin-top: 0; }
.member-library-field .input-group-text { font-weight: 800; color: var(--primary); background: #eef8fb; border-color: #d6e7ee; }
.auth-submit { height: 50px; font-weight: 800; }

.app-shell { min-height: 100vh; display: flex; }
.sidebar {
    width: 292px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.38)),
        #fff2f0;
    color: #182233;
    position: fixed;
    inset: 0 auto 0 0;
    overflow-y: auto;
    z-index: 1040;
    transition: transform .22s ease;
    border-right: 1px solid #ffd8d2;
    box-shadow: 8px 0 28px rgba(242,80,66,.055);
    scrollbar-width: thin;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: #ffc8c0; border-radius: 999px; border: 2px solid #fff2f0; }
.app-drawer { padding: 12px 10px 16px; }
.drawer-profile {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 14px;
    margin-bottom: 14px;
    color: #fff;
    background: linear-gradient(135deg, #cf372f 0%, #f25042 58%, #ff725c 100%);
    box-shadow: 0 14px 32px rgba(220, 67, 52, .23), inset 0 1px 0 rgba(255,255,255,.16);
}
.drawer-profile:before,
.drawer-profile:after {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
}
.drawer-profile:before { width: 96px; height: 96px; right: -22px; top: -26px; }
.drawer-profile:after { width: 74px; height: 74px; right: 28px; bottom: -42px; }
.drawer-user-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.drawer-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    color: #d93d31;
    font-size: 20px;
    border: 2px solid rgba(255,255,255,.88);
    box-shadow: 0 8px 18px rgba(0,0,0,.14);
}
.drawer-user-row strong { display: block; font-size: 14px; max-width: 188px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.drawer-user-row small { display: block; color: rgba(255,255,255,.9); font-size: 11px; font-weight: 400; }
.drawer-plan {
    position: relative;
    z-index: 1;
    border-radius: 15px;
    padding: 10px 11px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.drawer-plan strong,
.drawer-plan span { display: block; font-size: 11px; line-height: 1.55; font-weight: 500; }
.drawer-plan strong { font-size: 12px; font-weight: 700; }
.drawer-menu { display: grid; gap: 7px; }
.sidebar-card-link,
.sidebar-card-toggle {
    width: 100%;
    min-height: 47px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 10px;
    border-radius: 15px;
    border: 1px solid #ffe0dc;
    background: linear-gradient(180deg, #fff, #fffafa);
    color: #1f2937;
    font-weight: 600;
    font-size: 14px;
    text-align: left;
    box-shadow: 0 3px 10px rgba(221, 72, 55, .045);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
.sidebar-row-arrow {
    margin-left: auto;
    color: currentColor;
    opacity: .9;
    font-size: 14px;
}
.sidebar-card-link:hover,
.sidebar-card-link.active,
.sidebar-card-toggle:hover {
    color: #111827;
    background: #fff;
    border-color: #ffc2ba;
    box-shadow: 0 8px 18px rgba(221, 72, 55, .09);
    transform: translateY(-1px);
}
.sidebar-card-toggle.active {
    color: #e13e31;
    background: linear-gradient(180deg, #fff, #fff5f3);
    border-color: #ffb8af;
    box-shadow: 0 8px 18px rgba(221, 72, 55, .09);
}
.sidebar-card-toggle.active .bi-chevron-up {
    color: #e13e31;
}
.sidebar-card-link.active {
    color: #e13e31;
    border-color: #ffb8af;
    background: linear-gradient(180deg, #fff, #fff5f3);
}
.sidebar-card-link.locked,
.sidebar-card-toggle.locked,
.sidebar-sub-link.locked {
    cursor: not-allowed;
    color: #94a3b8;
    border-color: rgba(148,163,184,.22);
    background: rgba(248,250,252,.72);
    box-shadow: none;
    transform: none;
}
.sidebar-card-link.locked:hover,
.sidebar-card-toggle.locked:hover,
.sidebar-sub-link.locked:hover {
    color: #94a3b8;
    border-color: rgba(148,163,184,.22);
    background: rgba(248,250,252,.72);
    box-shadow: none;
    transform: none;
}
.sidebar-card-toggle { appearance: none; }
.sidebar-card-toggle .bi-chevron-up,
.sidebar-card-link > .bi-chevron-right {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #ff594c;
    font-size: 13px;
    transition: transform .2s ease, background .16s ease, color .16s ease;
}
.sidebar-card-toggle.collapsed .bi-chevron-up { transform: rotate(180deg); color: #64748b; }
.sidebar-menu-card {
    overflow: hidden;
    border-radius: 15px;
    background: rgba(255,255,255,.76);
}
.sidebar-menu-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(145deg, #fff9f7, #ffecea);
    border: 1px solid rgba(255,215,209,.78);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 5px 12px rgba(242,80,66,.055);
}
.sidebar-menu-icon img {
    width: 21px;
    height: 21px;
    object-fit: contain;
    filter: saturate(1.06);
}
.verified-row span:nth-child(2):after {
    content: "";
    display: inline-block;
    width: 19px;
    height: 19px;
    margin-left: 7px;
    vertical-align: -4px;
    border-radius: 50%;
    background: #1d9bf0;
    clip-path: polygon(50% 0%, 62% 20%, 85% 15%, 80% 38%, 100% 50%, 80% 62%, 85% 85%, 62% 80%, 50% 100%, 38% 80%, 15% 85%, 20% 62%, 0% 50%, 20% 38%, 15% 15%, 38% 20%);
}
.new-row span:nth-child(2):after {
    content: "NEW";
    margin-left: 8px;
    padding: 3px 6px;
    border-radius: 7px;
    color: #fff;
    background: linear-gradient(135deg, #ff5959, #f25042);
    font-size: 9px;
    font-weight: 700;
}
.sidebar-submenu {
    padding: 9px 8px 12px 54px;
    display: grid;
    gap: 4px;
    background: linear-gradient(180deg, #fff, #fffdfc);
    border: 1px solid #ffe1dd;
    border-top: 0;
    border-radius: 0 0 15px 15px;
}
.sidebar-sub-link {
    min-height: 39px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #334155;
    font-size: 13px;
    font-weight: 500;
    padding: 4px 7px;
    border-radius: 10px;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}
.sidebar-sub-link:hover,
.sidebar-sub-link.active {
    color: #e34c3e;
    background: #fff5f3;
    transform: translateX(2px);
}
.sidebar-sub-link span {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
}
.sidebar-sub-link img {
    width: 19px;
    height: 19px;
    object-fit: contain;
}
.drawer-version {
    min-height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(180deg, #fff, #fff9f8);
    border: 1px solid #ffd9d4;
    color: #1f2937;
    font-weight: 600;
    font-size: 14px;
    margin-top: 2px;
}

.main { margin-left: 292px; min-height: 100vh; flex: 1; display: flex; flex-direction: column; background: #fbfbfc; }
.topbar { height: 58px; display: flex; align-items: center; gap: 16px; padding: 0 20px; position: sticky; top: 0; z-index: 1020; }
.app-topbar { background: #f25042; color: #fff; box-shadow: 0 2px 10px rgba(181,57,45,.22); }
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-left h1 { margin: 0; font-size: 21px; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-search { width: 360px; height: 38px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); border-radius: 999px; display: flex; align-items: center; gap: 10px; padding: 0 14px; color: rgba(255,255,255,.9); }
.topbar-search input { border: 0; background: transparent; outline: 0; width: 100%; color: #fff; font-size: 13px; }
.topbar-search input::placeholder { color: rgba(255,255,255,.78); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.topbar-search-wrap { position: relative; width: 360px; }
.topbar-search-results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 1055;
    background: #f4ead7;
    border: 1px solid #d7c7ac;
    border-radius: 10px;
    box-shadow: 0 18px 36px rgba(15, 23, 42, .18);
    overflow: hidden;
    max-height: min(52vh, 420px);
    overflow-y: auto;
}
.topbar-search-result {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid rgba(141, 123, 92, .16);
    background: #f4ead7;
    text-align: left;
    cursor: pointer;
    color: #1f2937;
}
.topbar-search-result:last-child { border-bottom: 0; }
.topbar-search-result:hover { background: #efe0c2; }
.topbar-search-result-name { color: #1f2937; font-size: 13px; font-weight: 700; line-height: 1.25; }
.topbar-search-result-mobile-inline { color: #111827; font-size: 13px; font-weight: 600; margin-left: 0; }
.topbar-search-empty { padding: 14px; color: #6b7280; font-size: 13px; font-weight: 600; background: #f4ead7; }
.appbar-icon { width: 40px; height: 40px; border: 0; border-radius: 10px; color: #fff; background: rgba(255,255,255,.14); display: inline-flex; align-items: center; justify-content: center; }
.appbar-icon:hover { color: #fff; background: rgba(255,255,255,.24); }
.btn-icon { width: 42px; height: 42px; border-radius: 8px; border: 1px solid var(--line); background: #fff; display: inline-flex; align-items: center; justify-content: center; }
.profile-chip { display: flex; align-items: center; gap: 9px; border: 0; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; padding: 4px 12px 4px 4px; }
.profile-chip:hover { color: #fff; background: rgba(255,255,255,.24); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: #fff; color: #f25042; display: inline-grid; place-items: center; font-weight: 600; }
.content { flex: 1; padding: 14px 8px 24px; }
.footer { border-top: 1px solid #f0d8d4; padding: 12px 24px; color: var(--muted); display: flex; justify-content: space-between; font-size: 12px; background: #fff; }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.page-head h1 { font-size: 26px; margin: 0; font-weight: 800; }
.breadcrumb { margin: 4px 0 0; }
.card { border: 1px solid #f2d8d4; border-radius: 10px; box-shadow: 0 8px 22px rgba(242,80,66,.06); }
.surface-panel {
    background: #fff;
    border: 1px solid #f0d8d4;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(242,80,66,.055);
}
.surface-panel .card-body { padding: 16px; }
.module-toolbar {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 12px;
    padding: 0 8px;
}
.module-toolbar h1 { margin: 0; font-size: 22px; font-weight: 600; color: #1f2937; }
.module-toolbar .breadcrumb { margin: 3px 0 0; font-size: 12px; }
.filter-panel .form-control,
.form-panel .form-control,
.form-panel .form-select,
.data-panel .form-control {
    border-radius: 10px;
    border-color: #e5d3d0;
    min-height: 42px;
    font-size: 13px;
}
.filter-panel .form-control:focus,
.form-panel .form-control:focus,
.form-panel .form-select:focus {
    border-color: #f25042;
    box-shadow: 0 0 0 3px rgba(242,80,66,.12);
}
.app-primary-btn,
.btn-primary {
    --bs-btn-bg: #f25042;
    --bs-btn-border-color: #f25042;
    --bs-btn-hover-bg: #df4337;
    --bs-btn-hover-border-color: #df4337;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(242,80,66,.2);
}
.app-outline-btn {
    color: #f25042;
    border-color: #f25042;
    border-radius: 10px;
}
.app-outline-btn:hover {
    color: #fff;
    background: #f25042;
    border-color: #f25042;
}
.app-muted-btn {
    color: #64748b;
    border: 1px solid #d9e0e8;
    background: #fff;
    border-radius: 10px;
}
.data-panel table { margin-bottom: 0; }
.data-panel thead th {
    background: #fff5f3;
    color: #4b5563;
    border-bottom: 1px solid #f0d8d4;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}
.data-panel tbody td { font-size: 13px; color: #334155; vertical-align: middle; }
.data-panel .table-hover tbody tr:hover { background: #fff8f7; }

.dashboard-banner {
    position: relative;
    overflow: hidden;
    min-height: 200px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #fff;
    margin-bottom: 12px;
    background: #17202a;
}
.dashboard-banner img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.44) saturate(.9);
}
.dashboard-banner:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.08), rgba(0,0,0,.35));
}
.dashboard-banner div { position: relative; z-index: 1; text-align: center; }
.dashboard-banner h2 { margin: 0; font-size: 24px; font-weight: 500; }
.dashboard-banner p { margin: 4px 0 0; font-size: 18px; }
.dashboard-intro-banner {
    margin-bottom: 12px;
    padding: 12px 16px 14px;
    border: 1px solid rgba(23, 107, 135, .12);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,255,.98)),
        #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}
.dashboard-intro-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px;
    border-radius: 999px;
    color: #2d8df0;
    background: rgba(45, 141, 240, .08);
    border: 1px solid rgba(45, 141, 240, .14);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.dashboard-intro-pill i {
    font-size: 12px;
}
.dashboard-intro-banner h1 {
    margin: 8px 0 4px;
    color: #343a40;
    font-size: clamp(18px, 1.8vw, 26px);
    font-weight: 600;
    line-height: 1.2;
}
.dashboard-intro-banner p {
    margin: 0;
    color: #667085;
    font-size: 12px;
    line-height: 1.5;
}
.dashboard-stat-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(145px, 1fr));
    gap: 8px;
}
.dash-stat-card {
    min-height: 164px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 8px;
    padding: 18px 10px;
    background: #fff;
    border: 1px solid #ffd1cb;
    border-radius: 8px;
    box-shadow: 0 3px 0 rgba(242,80,66,.72), 0 10px 20px rgba(242,80,66,.05);
    text-align: center;
}
.dash-stat-card img { width: 42px; height: 42px; object-fit: contain; }
.dash-stat-card span { color: #1f2937; font-size: 12px; font-weight: 500; }
.dash-stat-card strong {
    min-width: 40px;
    height: 40px;
    padding: 0 9px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}
.tone-blue { background: #4385f5; }
.tone-green { background: #43ad4d; }
.tone-cyan { background: #00b7c9; }
.panel-title-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 12px;
}
.panel-title-row h5 { margin: 0; font-size: 16px; font-weight: 600; }
.panel-title-row span { color: #8b98a8; font-size: 12px; }
.panel-title-row a { color: #f25042; font-weight: 600; font-size: 13px; }
.quick-action-list { display: grid; gap: 9px; }
.quick-action-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 10px;
    color: #334155;
    background: #fff7f5;
    border: 1px solid #ffe0dc;
    font-weight: 500;
}
.quick-action-list a:hover { color: #f25042; background: #fff; }
.quick-action-list i { color: #f25042; }

.dashboard-hero-panel {
    position: relative;
    overflow: hidden;
    min-height: 214px;
    border-radius: 18px;
    margin-bottom: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    align-items: end;
    gap: 18px;
    padding: 26px;
    color: #fff;
    background: #151b22;
    box-shadow: 0 16px 34px rgba(15,23,42,.12);
}
.dashboard-hero-media,
.dashboard-hero-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.dashboard-hero-media img {
    object-fit: cover;
    filter: brightness(.44) saturate(.9);
}
.dashboard-hero-panel:after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(12,18,24,.82), rgba(12,18,24,.25), rgba(12,18,24,.72)),
        repeating-linear-gradient(120deg, rgba(255,255,255,.035) 0, rgba(255,255,255,.035) 1px, transparent 1px, transparent 30px);
}
.dashboard-hero-copy,
.dashboard-health-card { position: relative; z-index: 1; }
.dashboard-hero-copy span {
    display: inline-flex;
    margin-bottom: 9px;
    color: #ffd7d2;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
}
.dashboard-hero-copy h2 { margin: 0; font-size: clamp(28px, 4vw, 46px); font-weight: 500; }
.dashboard-hero-copy p { max-width: 680px; margin: 8px 0 0; color: rgba(255,255,255,.82); line-height: 1.6; }
.dashboard-health-card {
    align-self: center;
    padding: 18px;
    border-radius: 16px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(10px);
}
.dashboard-health-card strong { display: block; font-size: 34px; line-height: 1; }
.dashboard-health-card span { color: rgba(255,255,255,.78); font-size: 13px; }
.health-bar,
.member-health-list i {
    display: block;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.22);
    margin-top: 12px;
}
.health-bar i,
.member-health-list b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #00b7c9, #43ad4d);
}
.dashboard-summary-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}
.dashboard-summary-row article {
    padding: 16px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #f0d8d4;
    box-shadow: 0 8px 22px rgba(242,80,66,.055);
}
.dashboard-summary-row span { display: block; color: #788392; font-size: 12px; font-weight: 500; }
.dashboard-summary-row strong { display: block; margin: 4px 0; color: #172033; font-size: 25px; font-weight: 600; }
.dashboard-summary-row small { color: #9aa3af; }
.dashboard-stat-grid-rich { grid-template-columns: repeat(6, minmax(142px, 1fr)); }
.dash-stat-card-rich {
    color: inherit;
    min-height: 148px;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.dash-stat-card-rich:hover {
    color: inherit;
    transform: translateY(-2px);
    border-color: #ffb7ad;
    box-shadow: 0 3px 0 rgba(242,80,66,.78), 0 14px 30px rgba(242,80,66,.1);
}
.tone-red { background: #f25042; }
.dashboard-panel { padding: 16px; height: 100%; }
.member-health-list { display: grid; gap: 16px; }
.member-health-list div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    align-items: center;
}
.member-health-list span { color: #485567; font-size: 13px; font-weight: 500; }
.member-health-list strong { color: #172033; font-weight: 600; }
.member-health-list i { grid-column: 1 / -1; background: #edf1f5; margin-top: 0; }
.member-health-list b.danger { background: linear-gradient(90deg, #f25042, #ff8b76); }
.member-health-list b.warning { background: linear-gradient(90deg, #f5a524, #ffd166); }
.quick-action-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.quick-action-grid a {
    min-height: 76px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border-radius: 13px;
    color: #344155;
    background: #fff7f5;
    border: 1px solid #ffe0dc;
    font-weight: 500;
}
.quick-action-grid a:hover { color: #f25042; background: #fff; border-color: #ffc4ba; }
.quick-action-grid i { color: #f25042; font-size: 20px; }
.today-list { display: grid; gap: 8px; }
.today-list a {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    min-height: 43px;
    padding: 9px 11px;
    border-radius: 12px;
    color: #344155;
    background: #fff;
    border: 1px solid #eef1f4;
}
.today-list a:hover { color: #f25042; border-color: #ffd4ce; }
.today-list strong { font-weight: 600; }
.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #4385f5;
}
.dot.cyan { background: #00b7c9; }
.dot.green { background: #43ad4d; }
.dot.blue { background: #4385f5; }
.dot.red { background: #f25042; }

.subscription-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 5px;
    margin: 10px 0 16px;
    border: 1px solid #cfd5dc;
    border-radius: 10px;
    background: #fff;
}
.subscription-tabs button {
    height: 42px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #8a8f98;
    font-weight: 500;
}
.subscription-tabs button.active {
    color: #fff;
    background: #f25042;
    box-shadow: 0 8px 18px rgba(242,80,66,.18);
}
.subscription-section { display: none; }
.subscription-section.active { display: block; }
.plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(230px, 1fr));
    gap: clamp(18px, 7vw, 150px);
    align-items: start;
    padding: 16px 24px 80px;
}
.plan-card {
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15,23,42,.14);
}
.plan-card header {
    padding: 16px 18px;
    color: #fff;
}
.plan-blue header, .plan-blue .choose-plan { background: #2f95e8; }
.plan-green header, .plan-green .choose-plan { background: #23965a; }
.plan-red header, .plan-red .choose-plan { background: linear-gradient(180deg, #ef5a36, #e33612); }
.plan-card header strong { display: block; text-transform: uppercase; font-weight: 700; }
.plan-card header span { font-size: 28px; font-weight: 700; margin-right: 8px; }
.plan-card header del { color: rgba(255,255,255,.72); font-weight: 600; }
.plan-card header small { display: block; font-size: 18px; font-weight: 600; }
.plan-card ul { list-style: none; margin: 0; padding: 24px 18px 8px; display: grid; gap: 8px; }
.plan-card li { color: #2f3640; font-size: 13px; }
.plan-card li i { color: #647b8b; margin-right: 7px; }
.save-chip {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 8px auto;
    padding: 6px 10px;
    border-radius: 999px;
    color: #fff;
    background: #279a5b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.choose-plan {
    display: block;
    margin: 12px 18px 18px;
    padding: 12px;
    border-radius: 8px;
    color: #fff;
    text-align: center;
    font-weight: 700;
}
.choose-plan:hover { color: #fff; filter: brightness(.96); }
.subscription-section h2 {
    margin: 0 0 10px 8px;
    color: #e93816;
    font-size: 17px;
    font-weight: 600;
}
.credit-hero {
    min-height: 92px;
    display: grid;
    place-items: center;
    align-content: center;
    border-radius: 0 36px 0 36px;
    color: #fff;
    background: linear-gradient(135deg, #b74540, #ef6545);
}
.credit-hero strong { font-size: 24px; line-height: 1.1; }
.credit-hero span { font-size: 12px; font-weight: 600; }
.credit-picker {
    width: min(1050px, 100%);
    margin: 46px auto 12px;
    display: flex;
    justify-content: space-between;
}
.credit-picker button {
    width: 52px;
    height: 50px;
    border-radius: 10px;
    border: 1px solid #9da5ae;
    background: #fff;
}
.credit-picker button.active {
    color: #fff;
    background: #f25042;
    border-color: #f25042;
}
.credit-note {
    width: min(720px, 100%);
    margin: 0 auto 20px;
    line-height: 1.65;
    font-size: 13px;
}
.credit-pay {
    display: block;
    margin: 0 auto;
    border: 0;
    border-radius: 999px;
    padding: 11px 28px;
    color: #fff;
    background: #f25042;
    box-shadow: 0 10px 22px rgba(242,80,66,.2);
}
.support-strip {
    margin-top: 36px;
    border-top: 1px solid #e6e8ec;
    background: #fff;
    padding: 16px 24px;
}
.support-strip p { color: #8b8f98; font-size: 13px; }
.support-strip > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.support-strip span {
    display: grid;
    place-items: center;
    gap: 5px;
    min-height: 92px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15,23,42,.06);
}
.support-strip i {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eef6ff;
}
.support-strip small { color: #99a1ad; }
.metric-card { display: flex; align-items: center; gap: 14px; padding: 20px; height: 100%; }
.metric-icon { width: 48px; height: 48px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: 22px; }
.metric-card strong { display: block; font-size: 26px; }
.metric-card span { color: var(--muted); font-weight: 600; }
.bg-primary-soft { background: var(--primary); }
.bg-success-soft { background: var(--success); }
.bg-accent-soft { background: var(--accent); }
.bg-danger-soft { background: var(--danger); }
.btn-primary { --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary-dark); --bs-btn-hover-border-color: var(--primary-dark); }
.table-actions .btn { padding: 4px 8px; }
.form-label { font-weight: 700; font-size: 13px; }
.required:after { content: " *"; color: var(--danger); }
.empty-state { text-align: center; padding: 46px 20px; color: var(--muted); }
.empty-state i { font-size: 44px; color: #b7c4d0; display: block; margin-bottom: 12px; }
.first-library-panel {
    min-height: 430px;
    display: grid;
    grid-template-columns: 92px minmax(0, 680px);
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 42px;
    border: 1px solid #dbe7f2;
    border-radius: 22px;
    background:
        radial-gradient(circle at 88% 12%, rgba(242,80,66,.12), transparent 30%),
        linear-gradient(135deg, #fff, #f8fbff);
    box-shadow: 0 24px 58px rgba(15,23,42,.08);
}
.first-library-icon {
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    color: #fff;
    font-size: 40px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: 0 18px 32px rgba(242,80,66,.24);
}
.first-library-panel h1 {
    margin: 8px 0 10px;
    color: #0f172a;
    font-size: 34px;
    font-weight: 900;
}
.first-library-panel p {
    max-width: 680px;
    margin: 0;
    color: #64748b;
    font-size: 16px;
    line-height: 1.7;
}
.first-library-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}
.status-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 9px; font-size: 12px; background: #eef8f5; color: #14796d; font-weight: 700; }

/* Dark desktop command shell */
body {
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    background: #f4f8fd;
}
.sidebar.dark-sidebar {
    width: 260px;
    background: #1f2534;
    color: #f8fafc;
    border-right: 1px solid #111827;
    box-shadow: 10px 0 28px rgba(15, 23, 42, .18);
}
.dark-sidebar::-webkit-scrollbar-thumb { background: #3a4256; border-color: #1f2534; }
.app-drawer.dark-sidebar { padding: 8px 10px 14px; }
.drawer-brand {
    height: 42px;
    display: grid;
    place-items: center;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin: -8px -10px 10px;
}
.drawer-brand strong { font-size: 22px; letter-spacing: 0; line-height: 1; }
.drawer-brand span { font-size: 9px; color: #aab3c4; margin-top: -8px; }
.dark-sidebar .drawer-profile {
    border-radius: 8px;
    padding: 12px;
    background: linear-gradient(135deg, #31394c, #252b3a);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: none;
}
.dark-sidebar .drawer-profile:before,
.dark-sidebar .drawer-profile:after { display: none; }
.dark-sidebar .drawer-avatar {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    color: #111827;
    background: #fff;
    box-shadow: none;
}
.dark-sidebar .drawer-user-row strong {
    max-width: 130px;
    color: #fff;
    font-size: 13px;
}
.dark-sidebar .drawer-user-row small { color: #cbd5e1; }
.dark-sidebar .drawer-plan {
    border-radius: 8px;
    border-color: rgba(255,255,255,.1);
    background: rgba(255,255,255,.06);
}
.sidebar-section-label {
    position: relative;
    margin: 12px 4px 5px;
    padding-left: 12px;
    color: #8d96a9;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.sidebar-section-label:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 1px;
    background: #3f485c;
}
.dark-sidebar .drawer-menu { gap: 5px; }
.dark-sidebar .sidebar-card-link,
.dark-sidebar .sidebar-card-toggle {
    min-height: 38px;
    padding: 6px 9px;
    border-radius: 8px;
    border-color: rgba(255,255,255,.08);
    background: #2a3040;
    color: #f8fafc;
    box-shadow: none;
    font-size: 13px;
    font-weight: 700;
}
.dark-sidebar .sidebar-card-link:hover,
.dark-sidebar .sidebar-card-link.active,
.dark-sidebar .sidebar-card-toggle:hover {
    color: #fff;
    background: #31384b;
    border-color: rgba(255,255,255,.14);
    transform: none;
}
.dark-sidebar .sidebar-card-link.active {
    background: linear-gradient(135deg, #376fff, #7157f5);
}
.dark-sidebar .sidebar-menu-card {
    border-radius: 8px;
    background: #2a3040;
    overflow: hidden;
}
.dark-sidebar .sidebar-menu-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: linear-gradient(135deg, #5c68f2, #427ff8);
    border: 0;
    box-shadow: none;
}
.dark-sidebar .sidebar-menu-icon img,
.dark-sidebar .sidebar-sub-link img {
    width: 16px;
    height: 16px;
    filter: none;
}
.dark-sidebar .sidebar-card-toggle .bi-chevron-up,
.dark-sidebar .sidebar-card-link > .bi-chevron-right {
    color: #8f9cb2;
    background: transparent;
}
.dark-sidebar .sidebar-submenu {
    padding: 8px 8px 10px 42px;
    border: 0;
    border-radius: 0 0 8px 8px;
    background: #252b39;
}
.dark-sidebar .sidebar-sub-link {
    min-height: 34px;
    color: #cbd5e1;
    font-size: 12px;
}
.dark-sidebar .sidebar-sub-link:hover,
.dark-sidebar .sidebar-sub-link.active {
    color: #fff;
    background: rgba(255,255,255,.06);
    transform: none;
}
.dark-sidebar .drawer-version {
    color: #cbd5e1;
    background: #252b39;
    border-color: rgba(255,255,255,.08);
}
.theme-picker-trigger {
    cursor: pointer;
}
.theme-picker-modal .modal-content {
    border: 0;
    border-radius: 8px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .22);
}
.theme-picker-modal .modal-header {
    border-bottom-color: #e5e7eb;
}
.theme-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 12px;
}
.theme-option {
    min-height: 94px;
    display: grid;
    gap: 8px;
    align-content: center;
    justify-items: start;
    position: relative;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #111827;
    font-weight: 800;
    text-align: left;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.theme-option:hover {
    border-color: #9ca3af;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .1);
    transform: translateY(-1px);
}
.theme-option .bi-check2 {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 22px;
    height: 22px;
    display: none;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #111827;
    font-size: 14px;
}
.theme-option.active {
    border-color: #111827;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, .1);
}
.theme-option.active .bi-check2 {
    display: grid;
}
.theme-swatch {
    width: 72px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, .12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.theme-swatch-default { background: linear-gradient(135deg, #1f2534 0%, #171a1f 52%, #376fff 100%); }
.theme-swatch-ocean { background: linear-gradient(135deg, #0f766e 0%, #0ea5e9 54%, #2563eb 100%); }
.theme-swatch-sunset { background: linear-gradient(135deg, #c2410c 0%, #f97316 48%, #db2777 100%); }
.theme-swatch-forest { background: linear-gradient(135deg, #14532d 0%, #15803d 50%, #84cc16 100%); }
.theme-swatch-royal { background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 52%, #2563eb 100%); }

body.theme-ocean .sidebar.dark-sidebar {
    background: linear-gradient(180deg, #083344 0%, #0f766e 48%, #0f172a 100%);
    border-right-color: #0e7490;
}
body.theme-ocean .topbar.dark-appbar {
    background: linear-gradient(135deg, #083344 0%, #0f766e 48%, #2563eb 100%);
    border-bottom-color: #22d3ee;
}
body.theme-ocean .dark-sidebar .drawer-profile,
body.theme-ocean .dark-sidebar .sidebar-card-link.active {
    background: linear-gradient(135deg, #0e7490, #2563eb);
}
body.theme-ocean .dark-sidebar .sidebar-menu-icon {
    background: linear-gradient(135deg, #14b8a6, #38bdf8);
}
body.theme-ocean .dark-sidebar .sidebar-card-link,
body.theme-ocean .dark-sidebar .sidebar-card-toggle,
body.theme-ocean .dark-sidebar .sidebar-menu-card {
    background: rgba(15, 118, 110, .42);
}
body.theme-ocean .dark-sidebar .sidebar-submenu,
body.theme-ocean .dark-sidebar .drawer-version {
    background: rgba(8, 51, 68, .68);
}
body.theme-ocean {
    --plan-theme: #0f766e;
    --plan-theme-dark: #083344;
    --plan-theme-soft: #ecfeff;
    --plan-theme-border: #bae6fd;
    --plan-theme-accent: #2563eb;
}

body.theme-sunset .sidebar.dark-sidebar {
    background: linear-gradient(180deg, #431407 0%, #9a3412 48%, #4a044e 100%);
    border-right-color: #ea580c;
}
body.theme-sunset .topbar.dark-appbar {
    background: linear-gradient(135deg, #7c2d12 0%, #f97316 48%, #be185d 100%);
    border-bottom-color: #fb923c;
}
body.theme-sunset .dark-sidebar .drawer-profile,
body.theme-sunset .dark-sidebar .sidebar-card-link.active {
    background: linear-gradient(135deg, #f97316, #db2777);
}
body.theme-sunset .dark-sidebar .sidebar-menu-icon {
    background: linear-gradient(135deg, #fb923c, #ec4899);
}
body.theme-sunset .dark-sidebar .sidebar-card-link,
body.theme-sunset .dark-sidebar .sidebar-card-toggle,
body.theme-sunset .dark-sidebar .sidebar-menu-card {
    background: rgba(154, 52, 18, .46);
}
body.theme-sunset .dark-sidebar .sidebar-submenu,
body.theme-sunset .dark-sidebar .drawer-version {
    background: rgba(67, 20, 7, .7);
}
body.theme-sunset {
    --plan-theme: #f97316;
    --plan-theme-dark: #7c2d12;
    --plan-theme-soft: #fff7ed;
    --plan-theme-border: #fed7aa;
    --plan-theme-accent: #db2777;
}

body.theme-forest .sidebar.dark-sidebar {
    background: linear-gradient(180deg, #052e16 0%, #166534 55%, #1f2937 100%);
    border-right-color: #22c55e;
}
body.theme-forest .topbar.dark-appbar {
    background: linear-gradient(135deg, #052e16 0%, #15803d 48%, #65a30d 100%);
    border-bottom-color: #86efac;
}
body.theme-forest .dark-sidebar .drawer-profile,
body.theme-forest .dark-sidebar .sidebar-card-link.active {
    background: linear-gradient(135deg, #15803d, #84cc16);
}
body.theme-forest .dark-sidebar .sidebar-menu-icon {
    background: linear-gradient(135deg, #22c55e, #a3e635);
}
body.theme-forest .dark-sidebar .sidebar-card-link,
body.theme-forest .dark-sidebar .sidebar-card-toggle,
body.theme-forest .dark-sidebar .sidebar-menu-card {
    background: rgba(20, 83, 45, .52);
}
body.theme-forest .dark-sidebar .sidebar-submenu,
body.theme-forest .dark-sidebar .drawer-version {
    background: rgba(5, 46, 22, .72);
}
body.theme-forest {
    --plan-theme: #15803d;
    --plan-theme-dark: #052e16;
    --plan-theme-soft: #f0fdf4;
    --plan-theme-border: #bbf7d0;
    --plan-theme-accent: #65a30d;
}

body.theme-royal .sidebar.dark-sidebar {
    background: linear-gradient(180deg, #2e1065 0%, #5b21b6 50%, #1e1b4b 100%);
    border-right-color: #8b5cf6;
}
body.theme-royal .topbar.dark-appbar {
    background: linear-gradient(135deg, #312e81 0%, #7c3aed 48%, #2563eb 100%);
    border-bottom-color: #a78bfa;
}
body.theme-royal .dark-sidebar .drawer-profile,
body.theme-royal .dark-sidebar .sidebar-card-link.active {
    background: linear-gradient(135deg, #7c3aed, #2563eb);
}
body.theme-royal .dark-sidebar .sidebar-menu-icon {
    background: linear-gradient(135deg, #a855f7, #3b82f6);
}
body.theme-royal .dark-sidebar .sidebar-card-link,
body.theme-royal .dark-sidebar .sidebar-card-toggle,
body.theme-royal .dark-sidebar .sidebar-menu-card {
    background: rgba(91, 33, 182, .45);
}
body.theme-royal .dark-sidebar .sidebar-submenu,
body.theme-royal .dark-sidebar .drawer-version {
    background: rgba(46, 16, 101, .7);
}
body.theme-royal {
    --plan-theme: #7c3aed;
    --plan-theme-dark: #312e81;
    --plan-theme-soft: #f5f3ff;
    --plan-theme-border: #ddd6fe;
    --plan-theme-accent: #2563eb;
}

body[class*="theme-"] .dark-sidebar .sidebar-card-link:hover,
body[class*="theme-"] .dark-sidebar .sidebar-card-toggle:hover {
    background: rgba(255,255,255,.13);
    border-color: rgba(255,255,255,.22);
}
.main {
    margin-left: 260px;
    background: linear-gradient(180deg, #eaf6ff 0, #f6f8fb 170px, #f8fafc 100%);
}
.topbar.dark-appbar {
    min-height: 96px;
    padding: 0 16px;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 0;
    background: #13161b;
    color: #fff;
    border-bottom: 1px solid #262c35;
    box-shadow: 0 3px 14px rgba(6,10,16,.34);
}
body[class*="theme-"] .topbar.dark-appbar {
    background: #13161b !important;
    background-image: none !important;
    border-bottom-color: #262c35 !important;
}
.topbar-brand {
    color: #fff;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.05;
    white-space: nowrap;
}
.topbar-brand:hover { color: #fff; }
.topbar-line {
    align-items: center;
    display: flex;
    gap: 18px;
    min-width: 0;
}
.topbar-line-main {
    justify-content: space-between;
    padding-top: 10px;
}
.topbar-line-sub {
    border-top: 1px solid rgba(255,255,255,.08);
    justify-content: flex-start;
    padding: 8px 0 10px;
}
.topbar-brand-wrap {
    align-items: center;
    display: flex;
    gap: 12px;
    min-width: 0;
}
.topbar-brand-stack {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.topbar-brand-subtitle {
    color: rgba(255,255,255,.72);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
}
.dark-appbar-left {
    gap: 8px;
    min-width: 0;
}
.appbar-round-icon {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    color: #e5e7eb;
    background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 5px 14px rgba(0,0,0,.18);
    font-size: 14px;
}
.appbar-round-icon.appbar-credit-trigger {
    appearance: none;
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
}
.appbar-round-icon img {
    display: block;
    height: 20px;
    object-fit: contain;
    width: 20px;
}
.appbar-round-icon:hover { color: #fff; background: rgba(255,255,255,.18); }
.topbar-credit-modal .modal-dialog {
    max-width: 470px;
    width: calc(100vw - 28px);
}
.topbar-credit-modal .modal-content {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .28);
    background: #fff;
}
.topbar-credit-modal-handle {
    display: none;
}
.topbar-credit-modal-header {
    align-items: center;
    background: linear-gradient(135deg, #ff613f, #f15944);
    color: #fff;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: 16px 18px 15px;
}
.topbar-credit-modal-heading {
    display: grid;
    gap: 3px;
    min-width: 0;
    align-self: center;
}
.topbar-credit-modal-title {
    font-size: 17px;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.01em;
}
.topbar-credit-modal-subtitle {
    color: rgba(255,255,255,.92);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
}
.topbar-credit-modal-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    align-self: center;
}
.topbar-credit-tab {
    align-items: center;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    min-height: 34px;
    padding: 0 13px;
    white-space: nowrap;
}
.topbar-credit-tab.active {
    background: #fff;
    color: #f15944;
}
.topbar-credit-close {
    align-items: center;
    background: transparent;
    border: 0;
    color: #fff;
    display: inline-flex;
    font-size: 19px;
    justify-content: center;
    line-height: 1;
    padding: 0;
}
.topbar-credit-modal-body {
    background: #fff;
    display: grid;
    gap: 10px;
    padding: 16px 16px 12px;
}
.topbar-credit-summary {
    align-items: center;
    border-radius: 16px;
    display: grid;
    gap: 12px;
    grid-template-columns: 54px minmax(0, 1fr);
    min-height: 82px;
    padding: 12px 13px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .035);
}
.topbar-credit-summary span {
    color: #1f2937;
    display: block;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
}
.topbar-credit-summary strong {
    color: #0f172a;
    display: block;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.02;
    margin-top: 4px;
}
.topbar-credit-icon {
    align-items: center;
    border-radius: 14px;
    display: inline-flex;
    height: 54px;
    justify-content: center;
    width: 54px;
}
.topbar-credit-icon i {
    color: #fff;
    font-size: 21px;
}
.topbar-credit-icon.danger { background: #f15944; }
.topbar-credit-icon.success { background: #4caf50; }
.topbar-credit-summary.topbar-credit-total {
    background: #fff0ee;
    border: 1px solid rgba(241, 89, 68, .38);
}
.topbar-credit-summary.topbar-credit-left {
    background: #eef8ef;
    border: 1px solid rgba(76, 175, 80, .36);
}
.topbar-credit-summary.topbar-credit-used {
    background: #fff0f3;
    border: 1px solid rgba(241, 89, 68, .38);
}
.topbar-credit-meter {
    background: #eef2f7;
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
    margin-top: 2px;
}
.topbar-credit-meter-fill {
    background: linear-gradient(90deg, #f4b049, #ef7d32);
    border-radius: inherit;
    height: 100%;
    width: 0;
}
.topbar-credit-modal-footer {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) 104px;
    padding: 2px 16px 16px;
}
.topbar-credit-log-btn,
.topbar-credit-close-btn {
    align-items: center;
    border-radius: 16px;
    display: inline-flex;
    font-size: 13px;
    font-weight: 900;
    gap: 8px;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
}
.topbar-credit-log-btn {
    background: #fff;
    border: 1px solid rgba(241, 89, 68, .28);
    color: #f15944;
}
.topbar-credit-close-btn {
    background: #f3f4f6;
    border: 1px solid #dadde4;
    color: #1f2937;
}
.topbar-credit-log-btn i {
    font-size: 14px;
}
.topbar-credit-log-btn:hover,
.topbar-credit-close-btn:hover {
    filter: brightness(.98);
}
@media (max-width: 575.98px) {
    .topbar-credit-modal .modal-dialog {
        width: calc(100vw - 16px);
        max-width: none;
    }
    .topbar-credit-modal-header {
        grid-template-columns: 1fr auto;
        padding: 16px 16px 14px;
    }
    .topbar-credit-modal-tabs {
        justify-content: flex-start;
    }
    .topbar-credit-modal-tabs {
        grid-column: 1 / -1;
    }
    .topbar-credit-modal-footer {
        grid-template-columns: 1fr;
    }
    .topbar-credit-close-btn {
        width: 100%;
    }
}
.shortcut-count {
    position: absolute;
    right: -9px;
    top: -8px;
    min-width: 21px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border-radius: 999px;
    color: #111827;
    background: #fff;
    border: 1px solid rgba(255,255,255,.72);
    box-shadow: 0 5px 12px rgba(0,0,0,.22);
    font-size: 9px;
    line-height: 1;
    font-weight: 900;
}
.topbar-clock {
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    font-family: "Segoe UI", "Inter", system-ui, sans-serif;
    color: #f3f4f6;
    min-width: 154px;
}
.topbar-clock strong {
    font-size: 13px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
}
.topbar-clock span {
    font-size: 13px;
    font-weight: 800;
    color: #d1d9e3;
}
.topbar-day {
    min-height: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    color: #eef2f7;
    font-family: "Segoe UI", "Inter", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: none;
}
.topbar-date,
.topbar-support {
    color: #dbe2ea;
    font-family: "Segoe UI", "Inter", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}
.topbar-date {
    margin-left: 6px;
    padding-left: 10px;
    border-left: 1px solid rgba(255,255,255,.1);
}
.topbar-support {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}
.topbar-support span {
    color: rgba(255,255,255,.7);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}
.topbar-support strong {
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .03em;
}
.dark-appbar-actions {
    gap: 10px;
    align-items: center;
    min-width: 0;
}
.topbar-shortcuts {
    align-items: center;
    gap: 7px;
    padding-right: 10px;
    margin-right: 4px;
    border-right: 1px solid rgba(255,255,255,.12);
}
.topbar-text-action {
    min-height: 34px;
    padding: 0 10px;
    color: #f8fafc;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
}
.topbar-text-action:hover { color: #bfdbfe; }
.dark-appbar .appbar-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: transparent;
    color: #f8fafc;
    font-size: 15px;
}
.dark-appbar .profile-chip {
    min-height: 38px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    padding: 4px 12px 4px 4px;
    color: #fff;
    font-weight: 700;
    gap: 8px;
    max-width: 190px;
}
.dark-appbar .avatar {
    width: 32px;
    height: 32px;
    color: #182233;
    font-size: 13px;
    font-weight: 900;
}
.dark-appbar .profile-chip span:not(.avatar) {
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dark-appbar .topbar-search {
    width: clamp(240px, 18vw, 300px);
    height: 38px;
    border-radius: 4px;
    border: 1px solid rgba(203,213,225,.9);
    background: #fff;
    padding: 0 11px;
    color: #64748b;
}
.dark-appbar .topbar-search input {
    color: #111827;
    font-size: 12px;
    font-weight: 800;
}
.dark-appbar .topbar-search input::placeholder { color: #7b8798; }
.dark-appbar .topbar-search-results { border-color: #cdbb9f; }
.content { padding: 10px 14px 24px; }
.footer { margin-left: 0; background: #fff; border-top-color: #e5e7eb; }

.api-debug-panel {
    margin-bottom: 10px;
    padding: 14px;
    border-radius: 8px;
    background: #fff7ed;
    border: 1px solid #fdba74;
    color: #7c2d12;
}
.api-debug-panel strong { display: block; font-size: 16px; }
.api-debug-panel span { display: block; margin-bottom: 10px; color: #9a3412; }
.api-debug-panel pre {
    margin: 0;
    max-height: 240px;
    overflow: auto;
    padding: 12px;
    border-radius: 6px;
    background: #111827;
    color: #f8fafc;
    font-size: 12px;
}
.api-debug-panel details { margin-top: 10px; }
.api-debug-panel summary { cursor: pointer; font-weight: 800; }
.qr-page-shell {
    min-height: calc(100vh - 124px);
}
.qr-workspace {
    max-width: 1180px;
    margin: 0 auto;
}
.qr-toolbar-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 18px 22px;
    border-radius: 16px;
    background: linear-gradient(145deg, #ffffff, #f5f9ff);
    border: 1px solid #dbeafe;
    box-shadow: 0 18px 36px rgba(30,64,175,.08);
}
.qr-toolbar-panel .section-chip {
    margin: 0 0 9px;
}
.qr-toolbar-panel h1 {
    margin: 0 0 5px;
    color: #172033;
    font-size: 24px;
    font-weight: 800;
}
.qr-toolbar-panel p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
}
.qr-download-btn {
    flex: 0 0 auto;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 10px;
    padding: 0 18px;
    color: #fff;
    background: #ef4d41;
    font-weight: 800;
    box-shadow: 0 9px 0 #c7382f, 0 18px 30px rgba(239,77,65,.24);
}
.qr-download-btn:hover {
    color: #fff;
    background: #e54236;
    transform: translateY(-2px);
    box-shadow: 0 11px 0 #c7382f, 0 22px 36px rgba(239,77,65,.28);
}
.qr-share-btn {
    background: #176b87;
    box-shadow: 0 9px 0 #0f3d4d, 0 18px 30px rgba(23,107,135,.22);
}
.qr-share-btn:hover {
    background: #125a73;
    box-shadow: 0 11px 0 #0f3d4d, 0 22px 36px rgba(23,107,135,.26);
}
.qr-generator-layout {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(320px, 1fr);
    gap: 22px;
    align-items: start;
}
.qr-generator-full {
    display: block;
}
.qr-control-panel {
    padding: 18px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #dbeafe;
    box-shadow: 0 16px 32px rgba(15,23,42,.07);
}
.qr-control-panel label {
    display: block;
    margin: 0 0 7px;
    color: #334155;
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.qr-control-panel .form-control,
.qr-control-panel .input-group-text {
    height: 44px;
    border-color: #d8e1ec;
    border-radius: 8px;
    font-weight: 700;
}
.qr-control-panel .input-group {
    margin-bottom: 16px;
}
.qr-control-panel .input-group-text {
    color: #ef4d41;
    background: #fff4f2;
}
.qr-control-panel > .form-control {
    margin-bottom: 16px;
}
.qr-data-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 10px;
    color: #172033;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
}
.qr-data-preview span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}
.qr-data-preview strong {
    font-size: 16px;
    font-weight: 850;
}
.qr-web-preview {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    justify-self: center;
    overflow: hidden;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #dbeafe;
    box-shadow: 0 18px 42px rgba(15,23,42,.08);
    padding: 22px;
}
.qr-card-capture {
    position: relative;
    width: min(100%, 900px);
    min-height: 690px;
    margin: 0 auto;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding-top: 58px;
    text-align: center;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    background:
        linear-gradient(rgba(255,255,255,.91), rgba(255,255,255,.91)),
        url("../images/qrbg.png") center top / 230px auto repeat;
    box-shadow: inset 0 1px 0 #fff;
}
.qr-card-top h2 {
    margin: 0 20px 10px;
    color: #ef4d41;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 800;
}
.qr-card-top p {
    margin: 0;
    color: #ef4d41;
    font-size: 25px;
    font-weight: 400;
}
.qr-code-box {
    display: grid;
    place-items: center;
    padding: 64px 0 44px;
}
.qr-render-box {
    width: min(420px, 72vw);
    height: min(420px, 72vw);
    display: grid;
    place-items: center;
    background: #fff;
}
.qr-render-box canvas,
.qr-render-box img {
    width: min(420px, 72vw);
    height: min(420px, 72vw);
    image-rendering: pixelated;
}
.qr-error-text {
    color: #ef4444;
    font-size: 13px;
    font-weight: 800;
}
.qr-card-bottom p {
    margin: 0 18px 22px;
    color: #111;
    font-size: 21px;
    line-height: 1.35;
    font-weight: 500;
}
.qr-divider {
    height: 1px;
    margin-bottom: 30px;
    background: rgba(0,0,0,.5);
}
.qr-card-bottom img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    display: block;
    margin: 0 auto 12px;
}
.qr-card-bottom strong {
    display: block;
    margin-bottom: 32px;
    color: #111;
    font-size: 23px;
    line-height: 1.4;
    font-weight: 400;
}
.about-web-page {
    max-width: 1200px;
    margin: 0 auto;
}
.about-hero {
    min-height: 310px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    padding: 34px;
    border-radius: 18px;
    color: #fff;
    background:
        linear-gradient(90deg, rgba(7, 15, 28, .9), rgba(7, 15, 28, .58), rgba(7, 15, 28, .2)),
        url("../images/slider1.jpg") center / cover;
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 24px 54px rgba(15,23,42,.18);
}
.about-hero-content {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 22px;
}
.about-hero-content img {
    width: 104px;
    height: 104px;
    object-fit: cover;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 38px rgba(0,0,0,.26);
}
.about-hero h1 {
    margin: 0 0 6px;
    font-size: 48px;
    line-height: 1;
    font-weight: 800;
}
.about-hero p {
    margin: 0 0 16px;
    color: #e2e8f0;
    font-size: 18px;
    font-weight: 700;
}
.about-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.about-chip-row span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 6px 14px;
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.28);
    font-size: 13px;
    font-weight: 800;
    backdrop-filter: blur(8px);
}
.about-hero-actions {
    flex: 0 0 320px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.about-primary-btn,
.about-glass-btn {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 14px;
    font-weight: 850;
}
.about-primary-btn {
    color: #0f172a;
    background: #fff;
    box-shadow: 0 14px 30px rgba(0,0,0,.18);
}
.about-primary-btn:hover {
    color: #0f172a;
    transform: translateY(-2px);
}
.about-glass-btn {
    color: #fff;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.36);
}
.about-glass-btn:hover {
    color: #fff;
    transform: translateY(-2px);
}
.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr);
    gap: 18px;
    margin-top: 18px;
}
.about-panel {
    padding: 24px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #dbeafe;
    box-shadow: 0 18px 40px rgba(15,23,42,.08);
}
.about-panel h2 {
    margin: 0 0 10px;
    color: #0f172a;
    font-size: 23px;
    font-weight: 850;
}
.about-panel p {
    margin: 0 0 18px;
    color: #475569;
    line-height: 1.6;
    font-weight: 650;
}
.about-intro-panel {
    grid-row: span 2;
}
.about-stat-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 22px 0;
    overflow: hidden;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
.about-stat-strip div {
    min-height: 92px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 6px;
    border-right: 1px solid #e2e8f0;
}
.about-stat-strip div:last-child {
    border-right: 0;
}
.about-stat-strip strong {
    color: #0f172a;
    font-size: 30px;
    line-height: 1;
    font-weight: 850;
}
.about-stat-strip strong i {
    color: #f59e0b;
    font-size: 21px;
    margin-left: 2px;
}
.about-stat-strip span {
    color: #64748b;
    font-weight: 800;
}
.about-check-list {
    display: grid;
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.about-check-list.compact {
    gap: 11px;
}
.about-check-list li {
    display: flex;
    gap: 10px;
    color: #334155;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 750;
}
.about-check-list i {
    flex: 0 0 auto;
    color: #16a34a;
    margin-top: 2px;
}
.about-store-list,
.about-support-grid {
    display: grid;
    gap: 12px;
}
.about-store-list a,
.about-support-grid a,
.developer-panel a {
    min-width: 0;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 76px;
    padding: 12px 14px;
    color: #0f172a;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.about-store-list a:hover,
.about-support-grid a:hover,
.developer-panel a:hover {
    color: #0f172a;
    transform: translateY(-2px);
    border-color: #bfdbfe;
    box-shadow: 0 14px 24px rgba(15,23,42,.08);
}
.about-store-list img,
.developer-panel img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    padding: 9px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
}
.about-store-list > a > i,
.about-support-grid > a > i {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    color: #0f172a;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    font-size: 23px;
}
.about-store-list span,
.about-support-grid span,
.developer-panel span {
    min-width: 0;
}
.about-store-list strong,
.about-support-grid strong,
.developer-panel strong {
    display: block;
    color: #0f172a;
    font-size: 18px;
    line-height: 1.15;
    font-weight: 850;
}
.about-store-list small,
.about-support-grid small,
.developer-panel small {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-size: 14px;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.about-store-list b {
    padding: 10px 14px;
    border-radius: 12px;
    color: #fff;
    background: #0f172a;
    font-size: 12px;
    letter-spacing: .04em;
}
.about-store-list em,
.about-support-grid em,
.developer-panel i {
    color: #64748b;
    font-size: 20px;
    font-style: normal;
}
.developer-panel {
    padding: 0;
}
.developer-panel a {
    min-height: 118px;
    background: #fff;
    border: 0;
}
.support-panel {
    grid-column: 1 / -1;
}
.about-support-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.about-support-grid a {
    grid-template-columns: 50px minmax(0, 1fr) auto;
}
.about-made-line {
    padding: 26px 0 4px;
    text-align: center;
    color: #64748b;
    font-weight: 800;
}
.about-web-page {
    max-width: 1240px;
}
.about-hero {
    min-height: 340px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    align-items: end;
    padding: 0;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(7, 15, 28, .94), rgba(7, 15, 28, .72) 50%, rgba(7, 15, 28, .3)),
        url("../images/slider1.jpg") center / cover;
}
.about-hero-main {
    min-width: 0;
    display: grid;
    gap: 24px;
    padding: 38px;
}
.about-kicker,
.about-panel-kicker {
    display: inline-flex;
    margin-bottom: 10px;
    color: #60a5fa;
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.about-hero h1 {
    font-size: 56px;
    font-weight: 900;
}
.about-hero p {
    max-width: 680px;
    font-size: 19px;
    line-height: 1.5;
}
.about-hero-metrics {
    align-self: stretch;
    display: grid;
    align-content: end;
    gap: 1px;
    background: rgba(255,255,255,.12);
    border-left: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
}
.about-hero-metrics div {
    min-height: 112px;
    display: grid;
    align-content: center;
    padding: 20px 28px;
    background: rgba(15,23,42,.3);
}
.about-hero-metrics strong {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    font-size: 34px;
    line-height: 1;
    font-weight: 900;
}
.about-hero-metrics strong i {
    color: #f59e0b;
    font-size: 22px;
}
.about-hero-metrics span {
    margin-top: 7px;
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.about-hero-actions {
    width: min(420px, 100%);
    flex: none;
}
.about-primary-btn,
.about-glass-btn,
.about-help-btn {
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.about-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
    gap: 20px;
    margin-top: 20px;
}
.about-panel {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    border-color: #dbeafe;
    box-shadow: 0 20px 44px rgba(15,23,42,.08), inset 0 1px 0 #fff;
}
.about-panel:before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #14b8a6, #f59e0b);
}
.about-panel > * {
    position: relative;
    z-index: 1;
}
.about-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 24px;
}
.about-feature-grid div {
    min-height: 150px;
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 18px;
    border-radius: 15px;
    background:
        radial-gradient(circle at 100% 0, rgba(59,130,246,.12), transparent 34%),
        #f8fafc;
    border: 1px solid #e2e8f0;
}
.about-feature-grid i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #3b82f6, #14b8a6);
    border-radius: 13px;
    box-shadow: 0 12px 20px rgba(59,130,246,.18);
}
.about-feature-grid strong {
    color: #0f172a;
    font-size: 17px;
    font-weight: 900;
}
.about-feature-grid span {
    color: #64748b;
    line-height: 1.45;
    font-size: 13px;
    font-weight: 700;
}
.about-store-panel {
    background:
        radial-gradient(circle at 95% 0, rgba(20,184,166,.12), transparent 34%),
        #fff;
}
.about-update-panel {
    background:
        radial-gradient(circle at 95% 0, rgba(245,158,11,.13), transparent 34%),
        #fff;
}
.about-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}
.about-section-head p {
    margin-bottom: 0;
}
.about-help-btn {
    flex: 0 0 auto;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border-radius: 12px;
    color: #fff;
    background: #16a34a;
    font-weight: 850;
    box-shadow: 0 12px 22px rgba(22,163,74,.2);
}
.about-help-btn:hover {
    color: #fff;
    background: #15803d;
    transform: translateY(-2px);
}
.support-panel {
    background:
        radial-gradient(circle at 100% 0, rgba(22,163,74,.1), transparent 32%),
        #fff;
}
.about-support-grid a {
    min-height: 92px;
}
.about-made-line {
    font-size: 13px;
}
.report-web-page {
    font-family: var(--font-main);
    max-width: 1240px;
    margin: 0 auto;
}
.report-web-page *,
.report-web-page button,
.report-web-page input,
.report-web-page select,
.report-web-page textarea {
    font-family: var(--font-main);
    letter-spacing: 0;
}
.report-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
    padding: 20px 22px;
    border-radius: 16px;
    background: linear-gradient(145deg, #ffffff, #f5f9ff);
    border: 1px solid #dbeafe;
    box-shadow: 0 18px 36px rgba(30,64,175,.08);
}
.report-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: #ef4d41;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.report-page-head h1 {
    margin: 0 0 4px;
    color: #0f172a;
    font-size: 28px;
    font-weight: 900;
}
.report-page-head p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}
.report-head-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.report-action-btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid #d8e1ec;
    border-radius: 10px;
    color: #334155;
    background: #fff;
    font-weight: 850;
    box-shadow: 0 10px 18px rgba(15,23,42,.06);
}
.report-action-btn:hover {
    color: #0f172a;
    transform: translateY(-1px);
}
.report-action-btn.primary {
    border-color: #ef4d41;
    color: #fff;
    background: #ef4d41;
    box-shadow: 0 8px 0 #c7382f, 0 18px 30px rgba(239,77,65,.22);
}
.report-action-btn.primary:hover {
    color: #fff;
    background: #e54236;
}
.report-action-btn.muted {
    color: #64748b;
    background: #f8fafc;
}
.report-summary-card,
.report-total-card,
.report-filter-bar,
.report-table-card,
.report-metric-row {
    margin-bottom: 14px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #dbeafe;
    box-shadow: 0 16px 34px rgba(15,23,42,.07);
}
.report-summary-card {
    min-height: 96px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
}
.report-summary-icon,
.report-total-card span {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #ef4d41;
    background: #fff0ee;
    font-size: 25px;
}
.report-summary-card strong,
.report-total-card strong {
    display: block;
    color: #0f172a;
    font-size: 24px;
    line-height: 1.15;
    font-weight: 900;
}
.report-summary-card small {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 14px;
    font-weight: 700;
}
.pnl-report-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 14px;
}
.pnl-report-tab {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border: 1px solid #d8e1ec;
    border-radius: 999px;
    color: #334155;
    background: #fff;
    font-weight: 850;
    box-shadow: 0 10px 18px rgba(15,23,42,.06);
}
.pnl-report-tab.active {
    color: #fff;
    background: #ef4d41;
    border-color: #ef4d41;
    box-shadow: 0 8px 0 #c7382f, 0 18px 30px rgba(239,77,65,.2);
}
.pnl-report-tab:hover {
    color: #0f172a;
    transform: translateY(-1px);
}
.pnl-report-tab.active:hover {
    color: #fff;
}
.pnl-report-summary-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}
.pnl-report-summary-row .report-total-card {
    margin-bottom: 0;
}
.pnl-report-summary-row .report-total-card span {
    color: #fff;
    background: linear-gradient(135deg, #2d8df0, #176b87);
}
.pnl-report-summary-row .report-total-card.danger span {
    color: #fff;
    background: linear-gradient(135deg, #ef4d41, #c7382f);
}
.pnl-report-summary-row .report-total-card strong {
    font-size: 22px;
}
.pnl-report-summary-row .report-total-card small {
    font-size: 13px;
}
.report-total-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
}
.report-total-card.danger span {
    color: #dc2626;
    background: #fff0ee;
}
.expense-report-page {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(300px, 1.25fr) minmax(220px, .9fr) minmax(220px, .8fr) minmax(340px, 1.75fr);
    grid-template-areas:
        "head summary total filter"
        "table table table table";
    align-items: stretch;
}
.expense-report-page .report-page-head {
    grid-area: head;
    margin-bottom: 0;
}
.expense-report-page .report-summary-card {
    grid-area: summary;
    margin-bottom: 0;
}
.expense-report-page .report-total-card {
    grid-area: total;
    margin-bottom: 0;
}
.expense-report-page .report-filter-bar {
    grid-area: filter;
    margin-bottom: 0;
}
.expense-report-page .report-table-card {
    grid-area: table;
    margin-bottom: 0;
}
.expense-report-page .report-page-head,
.expense-report-page .report-summary-card,
.expense-report-page .report-total-card,
.expense-report-page .report-filter-bar,
.expense-report-page .report-table-card {
    min-height: 100%;
}
.expense-report-page .report-page-head {
    padding: 14px 16px;
}
.expense-report-page .report-kicker {
    font-size: 11px;
    gap: 6px;
}
.expense-report-page .report-page-head h1 {
    font-size: 21px;
    line-height: 1.08;
    margin: 3px 0 4px;
}
.expense-report-page .report-page-head p {
    font-size: 12px;
    line-height: 1.4;
}
.expense-report-page .report-summary-card,
.expense-report-page .report-total-card {
    padding: 14px 16px;
    gap: 12px;
}
.expense-report-page .report-summary-icon,
.expense-report-page .report-total-card span {
    width: 48px;
    height: 48px;
    font-size: 20px;
    border-radius: 14px;
}
.expense-report-page .report-summary-card strong,
.expense-report-page .report-total-card strong {
    font-size: 18px;
    line-height: 1.12;
}
.expense-report-page .report-summary-card small {
    font-size: 12px;
    margin-top: 3px;
}
.report-filter-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(132px, 1fr)) auto auto;
    align-items: end;
    gap: 10px;
    padding: 12px;
}
.report-filter-bar label {
    display: block;
    margin-bottom: 6px;
    color: #475569;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.report-filter-bar .form-control,
.report-filter-bar .form-select {
    height: 40px;
    border-color: #d8e1ec;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    padding-left: 10px;
    padding-right: 10px;
}
.expense-report-page .report-filter-bar button,
.expense-report-page .report-filter-bar .report-action-btn {
    min-height: 40px;
    font-size: 13px;
    padding: 0 14px;
    border-radius: 9px;
}
.expense-report-toolbar-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: -2px;
}
.expense-filter-modal .modal-content {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
    overflow: hidden;
}
.expense-filter-modal .modal-header {
    align-items: center;
    background: linear-gradient(135deg, #fff, #f8fbff);
    border-bottom: 1px solid #dbe5f0;
    padding: 16px 18px;
}
.expense-filter-kicker {
    color: #ef4d41;
    display: block;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    margin-bottom: 3px;
    text-transform: uppercase;
}
.expense-filter-modal .modal-title {
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    margin: 0;
}
.expense-filter-modal .modal-body {
    display: grid;
    gap: 14px;
    padding: 18px;
}
.expense-filter-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.expense-filter-form > div {
    display: grid;
    gap: 6px;
}
.expense-filter-form label {
    color: #475569;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.expense-filter-form .form-control,
.expense-filter-form .form-select {
    border-color: #d8e1ec;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    min-height: 42px;
}
.expense-filter-actions {
    display: flex;
    gap: 10px;
    grid-column: 1 / -1;
    justify-content: flex-end;
}
.expense-filter-actions .report-action-btn {
    min-height: 40px;
    padding: 0 16px;
}

@media (max-width: 767.98px) {
    .expense-filter-form {
        grid-template-columns: 1fr;
    }

    .expense-filter-actions {
        flex-direction: column;
    }

    .expense-filter-actions .report-action-btn {
        width: 100%;
    }
}
.report-metric-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
}
.report-metric-row div {
    min-height: 92px;
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 18px 22px;
    border-right: 1px solid #e2e8f0;
}
.report-metric-row div:last-child {
    border-right: 0;
}
.report-metric-row span {
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}
.report-metric-row strong {
    color: #0f172a;
    font-size: 28px;
    font-weight: 900;
}
.report-table-card {
    padding: 0;
    overflow: hidden;
}
.report-table {
    margin: 0;
    vertical-align: middle;
}
.report-table thead th {
    padding: 12px 14px;
    color: #fff;
    background: #334155;
    border: 0;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.report-table tbody td {
    padding: 12px 14px;
    color: #0f172a;
    border-color: #e5e7eb;
    font-size: 12.5px;
    font-weight: 650;
}
.report-table td small {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
    font-weight: 750;
}
.report-table strong {
    color: #0d5eb8;
    font-size: 12.5px;
    font-weight: 700;
}
.report-table .report-member-actions {
    justify-content: flex-start;
    min-width: 270px;
}
.report-table .report-member-action {
    border-radius: 6px;
    font-size: 0;
    height: 28px;
    min-height: 28px;
    padding: 0;
    width: 28px;
}
.report-table .report-member-action i {
    font-size: 13px;
}
.report-table .report-member-action span {
    display: none;
}
.login-history-page,
.login-history-page .report-page-head h1,
.login-history-page .report-page-head p,
.login-history-page .report-kicker,
.login-history-page .report-summary-card strong,
.login-history-page .report-summary-card small,
.login-history-page .report-table,
.login-history-page .report-table th,
.login-history-page .report-table td,
.login-history-page .report-table strong,
.login-history-page .report-status {
    color: #000 !important;
}
.login-history-page .report-page-head h1 {
    font-size: 24px;
    font-weight: 400;
}
.login-history-page .report-page-head p,
.login-history-page .report-summary-card small,
.login-history-page .report-kicker {
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
}
.login-history-page .report-summary-card strong {
    font-size: 18px;
    font-weight: 400;
}
.login-history-page .report-table thead th {
    background: #f6f9fc !important;
    color: #000 !important;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
}
.login-history-page .report-table tbody td,
.login-history-page .report-table tbody td strong,
.login-history-page .report-status {
    font-size: 13.5px;
    font-weight: 400;
}
.login-history-page .report-status {
    background: transparent;
    border: 0;
    border-radius: 0;
    min-width: auto;
    padding: 0;
}
.login-history-logout-form {
    margin: 0;
}
.login-history-logout-btn {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: #ef4444;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    padding: 0;
    width: 32px;
}
.login-history-logout-btn i {
    color: #ef4444;
    font-size: 18px;
}
.login-history-logout-btn:hover {
    background: #fff1f2;
}
.gift-days-report-page .gift-days-count {
    background: #f8fafc;
    border-color: #d7e3f0;
    border-radius: 4px;
    color: #000;
    min-width: 48px;
    padding: 4px 8px;
}

.member-report-card-page .report-table thead th {
    background: #334155 !important;
    border-color: #334155 !important;
    border-bottom-color: #334155 !important;
    color: #fff !important;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
}

.member-report-card-page .report-table tbody td,
.member-report-card-page .report-table tbody td strong {
    color: #000;
    font-size: 14px;
    font-weight: 500;
}

.member-alert-page .report-table thead th {
    background: #334155 !important;
    border-color: #334155 !important;
    border-bottom-color: #334155 !important;
    color: #fff !important;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
}

.member-alert-page .report-table tbody td,
.member-alert-page .report-table tbody td strong {
    color: #000;
    font-size: 14px;
    font-weight: 500;
}

.member-due-report-page .report-table thead th {
    background: #334155 !important;
    border-color: #334155 !important;
    border-bottom-color: #334155 !important;
    color: #fff !important;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
}

.member-due-report-page .report-table tbody td,
.member-due-report-page .report-table tbody td strong {
    color: #000;
    font-size: 14px;
    font-weight: 500;
}

.collection-report-page {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(260px, 340px) minmax(230px, 300px);
    gap: 10px;
    max-width: none;
}

.collection-report-page .report-page-head,
.collection-report-page .report-summary-card,
.collection-report-page .report-total-card {
    margin-bottom: 0;
    min-height: 78px;
    padding: 12px 16px;
}

.collection-report-page .report-page-head {
    align-items: center;
    border-radius: 12px;
}

.collection-report-page .report-kicker {
    font-size: 10px;
    margin-bottom: 5px;
}

.collection-report-page .report-page-head h1 {
    font-size: 23px;
    margin-bottom: 2px;
}

.collection-report-page .report-page-head p {
    font-size: 12px;
}

.collection-report-page .report-action-btn {
    min-height: 36px;
    padding: 0 12px;
}

.collection-report-page .report-summary-card,
.collection-report-page .report-total-card {
    align-items: center;
    border-radius: 12px;
    gap: 12px;
}

.collection-report-page .report-summary-icon,
.collection-report-page .report-total-card span {
    border-radius: 12px;
    font-size: 20px;
    height: 46px;
    width: 46px;
}

.collection-report-page .report-summary-card strong,
.collection-report-page .report-total-card strong {
    font-size: 20px;
}

.collection-report-page .report-summary-card small {
    font-size: 12px;
    margin-top: 2px;
}

.collection-report-page .report-filter-bar,
.collection-report-page .report-table-card {
    grid-column: 1 / -1;
}

.collection-report-page .report-filter-bar {
    margin-top: 2px;
    padding: 12px;
}

@media (max-width: 1199px) {
    .collection-report-page {
        grid-template-columns: 1fr;
    }

    .collection-report-page .report-page-head,
    .collection-report-page .report-summary-card,
    .collection-report-page .report-total-card {
        min-height: 0;
    }
}

.today-reminder-page {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(260px, 340px) minmax(230px, 300px);
    gap: 10px;
    max-width: none;
}

.due-member-page {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(260px, 340px) minmax(230px, 300px);
    gap: 10px;
    max-width: none;
}

.today-reminder-page .report-page-head,
.today-reminder-page .report-summary-card,
.today-reminder-page .report-total-card,
.due-member-page .report-page-head,
.due-member-page .report-summary-card,
.due-member-page .report-total-card {
    margin-bottom: 0;
    min-height: 78px;
    padding: 12px 16px;
}

.today-reminder-page .report-page-head,
.due-member-page .report-page-head {
    align-items: center;
    border-radius: 12px;
}

.today-reminder-page .report-kicker,
.due-member-page .report-kicker {
    font-size: 10px;
    margin-bottom: 5px;
}

.today-reminder-page .report-page-head h1,
.due-member-page .report-page-head h1 {
    font-size: 23px;
    margin-bottom: 2px;
}

.today-reminder-page .report-page-head p,
.due-member-page .report-page-head p {
    font-size: 12px;
}

.today-reminder-page .report-action-btn,
.due-member-page .report-action-btn {
    min-height: 36px;
    padding: 0 12px;
}

.today-reminder-page .report-summary-card,
.today-reminder-page .report-total-card,
.due-member-page .report-summary-card,
.due-member-page .report-total-card {
    align-items: center;
    border-radius: 12px;
    gap: 12px;
}

.today-reminder-page .report-summary-icon,
.today-reminder-page .report-total-card span,
.due-member-page .report-summary-icon,
.due-member-page .report-total-card span {
    border-radius: 12px;
    font-size: 20px;
    height: 46px;
    width: 46px;
}

.today-reminder-page .report-summary-card strong,
.today-reminder-page .report-total-card strong,
.due-member-page .report-summary-card strong,
.due-member-page .report-total-card strong {
    font-size: 20px;
}

.today-reminder-page .report-summary-card small,
.due-member-page .report-summary-card small {
    font-size: 12px;
    margin-top: 2px;
}

.today-reminder-page .report-filter-bar,
.today-reminder-page .report-table-card,
.due-member-page .report-filter-bar,
.due-member-page .report-table-card {
    grid-column: 1 / -1;
}

.today-reminder-page .report-filter-bar,
.due-member-page .report-filter-bar {
    margin-top: 2px;
    padding: 12px;
}

@media (max-width: 1199px) {
    .expense-report-page {
        grid-template-columns: 1fr;
        grid-template-areas:
            "head"
            "summary"
            "total"
            "filter"
            "table";
    }

    .today-reminder-page,
    .due-member-page {
        grid-template-columns: 1fr;
    }

    .expense-report-page .report-page-head h1 {
        font-size: 20px;
    }
    .expense-report-page .report-page-head p,
    .expense-report-page .report-summary-card small {
        font-size: 12px;
    }

    .today-reminder-page .report-page-head,
    .today-reminder-page .report-summary-card,
    .today-reminder-page .report-total-card,
    .due-member-page .report-page-head,
    .due-member-page .report-summary-card,
    .due-member-page .report-total-card {
        min-height: 0;
    }
}

.seat-report-page .report-table tbody tr {
    background: #fff;
}

.seat-report-page .report-table tbody tr:has(.report-status.danger) {
    background: rgb(245, 206, 206);
}

.seat-report-page .report-table td,
.seat-report-page .report-table td strong {
    color: #000;
    font-size: 14px;
    font-weight: 500;
}
.report-amount {
    display: inline-flex;
    min-width: 82px;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 999px;
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    font-weight: 900;
}
.report-amount.danger {
    color: #dc2626;
    background: #fff0ee;
    border-color: #fecaca;
}
.report-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}
.report-status.success {
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
}
.report-status.danger {
    color: #dc2626;
    background: #fff0ee;
    border: 1px solid #fecaca;
}
.communication-page {
    max-width: 1120px;
    margin: 0 auto;
}
.communication-hero {
    min-height: 190px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 32px;
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 90% 15%, rgba(255,255,255,.18), transparent 28%),
        linear-gradient(135deg, #0f172a, #176b87);
    border: 1px solid rgba(255,255,255,.2);
    box-shadow: 0 22px 48px rgba(15,23,42,.16);
}
.communication-hero.rate-hero {
    background:
        radial-gradient(circle at 90% 15%, rgba(255,255,255,.2), transparent 28%),
        linear-gradient(135deg, #0f172a, #ef4d41);
}
.communication-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #bfdbfe;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.communication-hero h1 {
    margin: 0 0 8px;
    font-size: 38px;
    font-weight: 900;
}
.communication-hero p {
    max-width: 640px;
    margin: 0;
    color: #e2e8f0;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 650;
}
.communication-hero img {
    width: 104px;
    height: 104px;
    object-fit: contain;
    padding: 12px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 34px rgba(0,0,0,.2);
}
.share-modal-card,
.rate-store-grid {
    margin-top: 18px;
}
.share-modal-card {
    padding: 22px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #dbeafe;
    box-shadow: 0 20px 44px rgba(15,23,42,.08);
}
.share-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}
.share-modal-head strong {
    display: block;
    color: #0f172a;
    font-size: 24px;
    font-weight: 900;
}
.share-modal-head span {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-weight: 700;
}
.share-copy-mini {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: #176b87;
    font-weight: 850;
    box-shadow: 0 10px 20px rgba(23,107,135,.18);
}
.share-option-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.share-option-grid a,
.share-option-grid button,
.rate-store-card {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 9px;
    min-height: 154px;
    padding: 18px;
    text-align: left;
    color: #0f172a;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.share-option-grid button {
    appearance: none;
    cursor: pointer;
}
.share-option-grid a:hover,
.share-option-grid button:hover,
.rate-store-card:hover {
    color: #0f172a;
    transform: translateY(-3px);
    border-color: #bfdbfe;
    box-shadow: 0 16px 28px rgba(15,23,42,.1);
}
.share-option-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    font-size: 22px;
}
.share-option-icon.whatsapp { background: #16a34a; }
.share-option-icon.mail { background: #2563eb; }
.share-option-icon.copy { background: #64748b; }
.share-option-icon.play { background: #ef4d41; }
.share-option-icon.appstore { background: #0f172a; }
.share-option-grid strong {
    font-size: 17px;
    line-height: 1.15;
    font-weight: 900;
}
.share-option-grid small {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}
.share-link-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 12px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
}
.share-link-box span {
    min-width: 0;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.share-link-box button {
    width: 44px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: #0f172a;
}
.rate-store-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.rate-store-card {
    min-height: 190px;
    grid-template-columns: 70px minmax(0, 1fr) auto;
    align-items: center;
    align-content: center;
}
.rate-store-card img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    padding: 12px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e2e8f0;
}
.rate-store-card strong {
    display: block;
    color: #0f172a;
    font-size: 22px;
    font-weight: 900;
}
.rate-store-card small {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-size: 14px;
    font-weight: 750;
}
.rate-store-card b {
    padding: 11px 16px;
    border-radius: 12px;
    color: #fff;
    background: #0f172a;
    font-size: 12px;
    letter-spacing: .05em;
}

/* Master module web/mobile UI */
.master-page { background:#f3f6fb; border-radius:18px; margin:-4px -2px 0; min-height:calc(100vh - 120px); padding:20px; }
.master-mobile-appbar { display:none; }
.master-web-head { align-items:center; background:#fff; border:1px solid #dce7f5; border-radius:18px; box-shadow:0 20px 46px rgba(15,23,42,.08); display:flex; justify-content:space-between; margin-bottom:18px; padding:20px 22px; }
.master-web-head.compact { align-items:flex-start; }
.master-kicker { align-items:center; background:var(--plan-theme-soft); border:1px solid var(--plan-theme-border); border-radius:999px; color:var(--plan-theme); display:inline-flex; font-size:12px; font-weight:800; gap:7px; padding:6px 12px; text-transform:uppercase; }
.master-web-head h1 { color:#081a34; font-size:28px; font-weight:900; margin:9px 0 5px; }
.master-web-head p { color:#65748b; font-size:15px; margin:0; }
.master-add-btn,.master-submit-btn { align-items:center; background:linear-gradient(135deg,var(--plan-theme),var(--plan-theme-accent)); border:0; border-radius:14px; box-shadow:0 12px 22px rgba(15,23,42,.14); color:#fff; display:inline-flex; font-weight:800; gap:9px; justify-content:center; min-height:48px; padding:0 22px; }
.master-add-btn:hover,.master-submit-btn:hover { background:linear-gradient(135deg,var(--plan-theme-dark),var(--plan-theme)); color:#fff; }
.master-filter-card { align-items:center; background:#fff; border:1px solid #e1e8f0; border-radius:18px; box-shadow:0 14px 34px rgba(15,23,42,.06); display:grid; gap:14px; grid-template-columns:auto 1fr minmax(260px,380px); margin-bottom:18px; padding:18px 20px; }
.master-count-icon,.master-record-icon { align-items:center; background:var(--plan-theme-soft); border:1px solid var(--plan-theme-border); border-radius:18px; color:var(--plan-theme); display:inline-flex; font-size:26px; height:64px; justify-content:center; width:64px; }
.master-filter-card strong { color:#081a34; display:block; font-size:24px; font-weight:900; }
.master-filter-card span { color:#65748b; font-size:15px; }
.master-search { align-items:center; background:#f8fafc; border:1px solid #dbe4ee; border-radius:16px; display:flex; min-height:52px; overflow:hidden; }
.master-search input { background:transparent; border:0; color:#081a34; flex:1; font-weight:700; min-width:0; outline:0; padding:0 16px; }
.master-search button { background:transparent; border:0; color:var(--plan-theme); font-size:20px; height:52px; width:54px; }
.master-card-grid { display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.user-master-grid { grid-template-columns:1fr; }
.master-record-card { background:#fff; border:1px solid #e1e8f0; border-radius:20px; box-shadow:0 14px 28px rgba(15,23,42,.07); overflow:hidden; padding:18px; position:relative; }
.master-record-main { align-items:center; display:flex; gap:14px; padding-right:156px; }
.master-record-main h2 { color:#0b1728; font-size:22px; font-weight:900; margin:0 0 4px; }
.master-record-main p { color:#7a7f87; font-size:15px; margin:0; }
.master-record-actions { align-items:center; display:flex; gap:10px; position:absolute; right:18px; top:18px; }
.master-action { align-items:center; border-radius:18px; display:inline-flex; font-size:18px; height:50px; justify-content:center; text-decoration:none; width:50px; }
.master-action.edit { background:#effcf4; color:#23a84f; }
.master-action.delete { background:#fff0f0; color:#f04444; }
.master-badge { border-radius:12px; display:inline-flex; font-weight:800; padding:8px 12px; }
.master-badge.blue { background:#eaf6ff; color:#1684cc; }
.master-badge.cream { background:#fff8ef; color:#1e293b; }
.master-detail-box { background:#f7f9fc; border:1px solid #dde6ef; border-radius:16px; display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:16px; padding:14px; }
.master-detail-box div { align-items:center; display:flex; justify-content:space-between; min-width:0; }
.master-detail-box span { color:#7a7f87; font-weight:700; }
.master-detail-box strong { color:#0b1728; font-weight:900; margin-left:12px; min-width:0; overflow:hidden; text-align:right; text-overflow:ellipsis; white-space:nowrap; }
.master-description { color:#7a7f87; font-size:15px; margin:14px 0 0; }
.master-empty { align-items:center; background:#fff; border:1px solid #e1e8f0; border-radius:20px; color:#65748b; display:flex; flex-direction:column; gap:8px; padding:50px 20px; text-align:center; }
.master-empty i { color:var(--plan-theme); font-size:46px; }
.master-empty strong { color:#081a34; font-size:22px; }
.plan-table-card { background:#fff; border:1px solid var(--plan-theme-border); border-radius:18px; box-shadow:0 20px 46px rgba(15,23,42,.08); margin-top:18px; overflow:hidden; padding:18px; }
.plan-table-card .table-responsive { background:linear-gradient(180deg,var(--plan-theme-soft),#ffffff); border:1px solid var(--plan-theme-border); border-radius:14px; box-shadow:inset 0 1px 0 #fff,0 14px 28px rgba(15,23,42,.055); padding:10px; }
.plan-web-table { border-collapse:separate; border-spacing:0; margin:0 !important; min-width:1040px; overflow:hidden; }
.plan-web-table thead th { background:linear-gradient(180deg,var(--plan-theme),var(--plan-theme-dark)) !important; border-bottom:0 !important; color:#fff; font-size:12px; font-weight:900; padding:16px !important; text-transform:uppercase; white-space:nowrap; }
.plan-web-table thead th:first-child { border-top-left-radius:10px; }
.plan-web-table thead th:last-child { border-top-right-radius:10px; }
.plan-web-table tbody td { background:#fff; border-bottom:1px solid #edf2f7; color:#1f2937; padding:15px 16px !important; vertical-align:middle; }
.plan-web-table tbody tr:last-child td { border-bottom:0; }
.plan-web-table tbody tr { box-shadow:0 1px 0 rgba(255,255,255,.9); }
.plan-web-table tbody tr:hover td { background:var(--plan-theme-soft); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 color-mix(in srgb,var(--plan-theme) 14%,transparent); }
.plan-name-cell { align-items:center; display:flex; gap:12px; min-width:220px; }
.plan-name-cell i { align-items:center; background:var(--plan-theme-soft); border:1px solid var(--plan-theme-border); border-radius:12px; color:var(--plan-theme); display:inline-flex; flex:0 0 auto; font-size:18px; height:40px; justify-content:center; width:40px; }
.plan-name-cell strong { color:#0f172a; font-size:15px; font-weight:900; line-height:1.3; }
.plan-type-pill,.plan-duration { align-items:center; background:var(--plan-theme-soft); border:1px solid var(--plan-theme-border); border-radius:999px; color:var(--plan-theme); display:inline-flex; font-size:12px; font-weight:900; min-height:32px; padding:6px 12px; white-space:nowrap; }
.plan-duration { background:#fffaf0; border-color:color-mix(in srgb,var(--plan-theme-accent) 34%,#ffffff); color:#7c4a12; }
.plan-amount { color:#111827; display:inline-flex; font-size:16px; font-weight:900; white-space:nowrap; }
.plan-description { color:#64748b; display:block; font-size:13px; font-weight:650; line-height:1.45; max-width:340px; }
.plan-table-actions { display:flex; gap:8px; justify-content:flex-end; min-width:max-content; }
.plan-action { align-items:center; border-radius:9px; display:inline-flex; font-size:12px; font-weight:900; gap:6px; justify-content:center; min-height:36px; padding:8px 11px; box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 8px 14px rgba(15,23,42,.08); transition:transform .16s ease,box-shadow .16s ease,background .16s ease; }
.plan-action i { font-size:13px; }
.plan-action.edit { background:var(--plan-theme-soft); color:var(--plan-theme); }
.plan-action.delete { background:#fff0f0; color:#e03131; }
.plan-action:hover { color:#fff; text-decoration:none; transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 12px 18px rgba(15,23,42,.12); }
.plan-action.edit:hover { background:var(--plan-theme); }
.plan-action.delete:hover { background:#e03131; }
.plan-table-card .dt-container { padding:0; }
.plan-table-card .dt-layout-row:first-child { align-items:center; background:linear-gradient(135deg,#ffffff,var(--plan-theme-soft)); border:1px solid var(--plan-theme-border); border-radius:14px; box-shadow:inset 0 1px 0 #fff,0 10px 22px rgba(15,23,42,.045); margin:0 0 14px !important; padding:10px 12px; }
.plan-table-card .dt-layout-row:last-child { align-items:center; margin:14px 0 0 !important; }
.plan-table-card .dt-buttons { display:flex; flex-wrap:wrap; gap:7px; }
.plan-table-card .dt-buttons .btn { background:#fff; border:1px solid #d8e1ea; border-radius:8px; color:#344054; font-size:12px; font-weight:900; padding:7px 10px; }
.plan-table-card .dt-buttons .btn:hover { background:var(--plan-theme); border-color:var(--plan-theme); color:#fff; }
.plan-table-card .dt-search { align-items:center; display:flex; gap:8px; margin:0; }
.plan-table-card .dt-search label { color:#344054; font-size:13px; font-weight:900; margin:0; }
.plan-table-card .dt-search input { background:#fff; border:1px solid #cfd9e6; border-radius:9px; box-shadow:none; color:#111827; min-height:38px; min-width:260px; padding:7px 10px; }
.plan-table-card .dt-info { color:#64748b; font-size:13px; font-weight:800; }
.plan-table-card .dt-paging .page-link { border-radius:8px; color:var(--plan-theme); font-weight:800; margin:0 2px; }
.plan-table-card .dt-paging .active .page-link { background:var(--plan-theme); border-color:var(--plan-theme); color:#fff; }
.plan-web-table .dt-column-order { opacity:.36; }
.user-table-card { background:#fff; border:1px solid var(--plan-theme-border); border-radius:18px; box-shadow:0 20px 46px rgba(15,23,42,.08); margin-top:18px; overflow:hidden; padding:18px; }
.user-table-card .table-responsive { background:linear-gradient(180deg,var(--plan-theme-soft),#ffffff); border:1px solid var(--plan-theme-border); border-radius:14px; box-shadow:inset 0 1px 0 #fff,0 14px 28px rgba(15,23,42,.055); padding:10px; }
.user-web-table { border-collapse:separate; border-spacing:0; margin:0 !important; min-width:1080px; overflow:hidden; }
.user-web-table thead th { background:linear-gradient(180deg,var(--plan-theme),var(--plan-theme-dark)) !important; border-bottom:0 !important; color:#fff; font-size:12px; font-weight:900; padding:16px !important; text-transform:uppercase; white-space:nowrap; }
.user-web-table thead th:first-child { border-top-left-radius:10px; }
.user-web-table thead th:last-child { border-top-right-radius:10px; }
.user-web-table tbody td { background:#fff; border-bottom:1px solid #edf2f7; color:#1f2937; font-size:14px; font-weight:700; padding:15px 16px !important; vertical-align:middle; }
.user-web-table tbody tr:last-child td { border-bottom:0; }
.user-web-table tbody tr:hover td { background:var(--plan-theme-soft); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 color-mix(in srgb,var(--plan-theme) 14%,transparent); }
.user-id-cell { color:var(--plan-theme); font-weight:900; white-space:nowrap; }
.user-name-cell { align-items:center; display:flex; gap:12px; min-width:220px; }
.user-name-cell i { align-items:center; background:var(--plan-theme-soft); border:1px solid var(--plan-theme-border); border-radius:12px; color:var(--plan-theme); display:inline-flex; flex:0 0 auto; font-size:18px; height:40px; justify-content:center; width:40px; }
.user-name-cell strong { color:#0f172a; font-size:15px; font-weight:900; line-height:1.3; }
.user-type-pill { align-items:center; background:var(--plan-theme-soft); border:1px solid var(--plan-theme-border); border-radius:999px; color:var(--plan-theme); display:inline-flex; font-size:12px; font-weight:900; min-height:32px; padding:6px 12px; white-space:nowrap; }
.user-email-cell { color:#475467; display:block; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-table-actions { display:flex; gap:8px; justify-content:flex-end; min-width:max-content; }
.user-inline-action { margin:0; }
.user-action { align-items:center; border:0; border-radius:9px; display:inline-flex; font-size:12px; font-weight:900; gap:6px; justify-content:center; min-height:36px; padding:8px 11px; box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 8px 14px rgba(15,23,42,.08); transition:transform .16s ease,box-shadow .16s ease,background .16s ease; }
.user-action i { font-size:13px; }
.user-action.profile { background:#f8fafc; color:#344054; }
.user-action.permissions { background:linear-gradient(135deg,var(--plan-theme),var(--plan-theme-accent)); color:#fff; }
.user-action.sync { background:#eef6ff; color:#2563eb; }
.user-action.enroll { background:#fff7ed; color:#c2410c; }
.user-action.edit { background:var(--plan-theme-soft); color:var(--plan-theme); }
.user-action.delete { background:#fff0f0; color:#e03131; }
.user-action:hover { color:#fff; text-decoration:none; transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 12px 18px rgba(15,23,42,.12); }
.user-action.profile:hover { background:#344054; }
.user-action.permissions:hover { background:linear-gradient(135deg,var(--plan-theme-dark),var(--plan-theme)); }
.user-action.sync:hover { background:#2563eb; }
.user-action.enroll:hover { background:#c2410c; }
.user-action.edit:hover { background:var(--plan-theme); }
.user-action.delete:hover { background:#e03131; }
.user-table-card .dt-container { padding:0; }
.user-table-card .dt-layout-row:first-child { align-items:center; background:linear-gradient(135deg,#ffffff,var(--plan-theme-soft)); border:1px solid var(--plan-theme-border); border-radius:14px; box-shadow:inset 0 1px 0 #fff,0 10px 22px rgba(15,23,42,.045); margin:0 0 14px !important; padding:10px 12px; }
.user-table-card .dt-layout-row:last-child { align-items:center; margin:14px 0 0 !important; }
.user-table-card .dt-buttons { display:flex; flex-wrap:wrap; gap:7px; }
.user-table-card .dt-buttons .btn { background:#fff; border:1px solid #d8e1ea; border-radius:8px; color:#344054; font-size:12px; font-weight:900; padding:7px 10px; }
.user-table-card .dt-buttons .btn:hover { background:var(--plan-theme); border-color:var(--plan-theme); color:#fff; }
.user-table-card .dt-search { align-items:center; display:flex; gap:8px; margin:0; }
.user-table-card .dt-search label { color:#344054; font-size:13px; font-weight:900; margin:0; }
.user-table-card .dt-search input { background:#fff; border:1px solid #cfd9e6; border-radius:9px; box-shadow:none; color:#111827; min-height:38px; min-width:260px; padding:7px 10px; }
.user-table-card .dt-info { color:#64748b; font-size:13px; font-weight:800; }
.user-table-card .dt-paging .page-link { border-radius:8px; color:var(--plan-theme); font-weight:800; margin:0 2px; }
.user-table-card .dt-paging .active .page-link { background:var(--plan-theme); border-color:var(--plan-theme); color:#fff; }
.user-web-table .dt-column-order { opacity:.36; }
.simple-master-table-card { background:#fff; border:1px solid var(--plan-theme-border); border-radius:18px; box-shadow:0 20px 46px rgba(15,23,42,.08); overflow:hidden; padding:18px; }
.simple-master-card-title { align-items:center; background:linear-gradient(135deg,#fff,var(--plan-theme-soft)); border:1px solid var(--plan-theme-border); border-radius:14px; display:flex; gap:14px; margin-bottom:14px; padding:14px; }
.simple-master-card-title strong { color:#0b1728; display:block; font-size:18px; font-weight:900; }
.simple-master-card-title span { color:#64748b; display:block; font-size:13px; font-weight:700; }
.simple-master-table-card .table-responsive { background:linear-gradient(180deg,var(--plan-theme-soft),#fff); border:1px solid var(--plan-theme-border); border-radius:14px; padding:10px; }
.simple-master-table { border-collapse:separate; border-spacing:0; margin:0 !important; width:100%; }
.simple-master-table thead th { background:linear-gradient(180deg,var(--plan-theme),var(--plan-theme-dark)) !important; border:0 !important; color:#fff; font-size:12px; font-weight:900; padding:14px 15px !important; text-transform:uppercase; white-space:nowrap; }
.simple-master-table thead th:first-child { border-radius:10px 0 0 10px; }
.simple-master-table thead th:last-child { border-radius:0 10px 10px 0; }
.simple-master-table tbody td { background:#fff; border-bottom:1px solid #edf2f7; color:#1f2937; font-weight:750; padding:14px 15px !important; vertical-align:middle; }
.simple-master-table tbody tr:hover td { background:var(--plan-theme-soft); }
.simple-name-cell { align-items:center; display:inline-flex; gap:10px; min-width:0; }
.simple-name-cell i { align-items:center; background:var(--plan-theme-soft); border:1px solid var(--plan-theme-border); border-radius:10px; color:var(--plan-theme); display:inline-flex; height:36px; justify-content:center; width:36px; }
.simple-pill { align-items:center; background:var(--plan-theme-soft); border:1px solid var(--plan-theme-border); border-radius:999px; color:var(--plan-theme); display:inline-flex; font-size:12px; font-weight:900; min-height:30px; padding:5px 12px; white-space:nowrap; }
.simple-actions { align-items:center; display:flex; gap:8px; }
.simple-action { align-items:center; border-radius:10px; display:inline-flex; height:36px; justify-content:center; text-decoration:none; width:36px; }
.simple-action.edit { background:var(--plan-theme-soft); color:var(--plan-theme); }
.simple-action.delete { background:#fff0f0; color:#f04444; }
.simple-form-page { padding:18px; }
.simple-editor-form,
.simple-form-head { max-width:720px; }
.simple-editor-form { display:grid; gap:14px; margin:0; }
.simple-editor-card,
.simple-submit-card { background:#fff; border:1px solid #e1e8f0; border-radius:16px; box-shadow:0 16px 36px rgba(15,23,42,.07); overflow:hidden; }
.simple-editor-title { align-items:center; background:linear-gradient(135deg,#fff,var(--plan-theme-soft)); border-bottom:1px solid var(--plan-theme-border); display:flex; gap:12px; padding:16px 18px; }
.simple-editor-title > span { align-items:center; background:#fff; border:1px solid var(--plan-theme-border); border-radius:12px; color:var(--plan-theme); display:flex; font-size:20px; height:44px; justify-content:center; width:44px; }
.simple-editor-title strong { color:#0b1728; display:block; font-size:18px; font-weight:900; }
.simple-editor-title small { color:#64748b; display:block; font-size:12px; font-weight:700; margin-top:2px; }
.simple-form-grid { display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); padding:18px; }
.simple-field { display:grid; gap:7px; margin:0; }
.simple-field span { color:var(--plan-theme); font-size:11px; font-weight:900; text-transform:uppercase; }
.simple-field div { align-items:center; background:#f8fafc; border:1px solid var(--plan-theme-border); border-radius:12px; display:flex; gap:10px; min-height:46px; padding:0 12px; }
.simple-field:focus-within div { background:#fff; border-color:var(--plan-theme); box-shadow:0 0 0 3px color-mix(in srgb,var(--plan-theme) 12%,transparent); }
.simple-field i { color:var(--plan-theme); font-size:18px; }
.simple-field input,
.simple-field select,
.simple-field textarea { background:transparent; border:0; box-shadow:none; color:#0f172a; flex:1; font-size:14px; font-weight:800; min-width:0; outline:0; padding:0; width:100%; }
.simple-field textarea { min-height:90px; resize:vertical; }
.simple-field div.textarea { align-items:flex-start; padding-top:12px; }
.simple-field-full { grid-column:1 / -1; }
.simple-field .invalid-feedback { color:#dc3545; font-size:12px; font-weight:800; margin:0; }
.simple-editor-form.was-validated .simple-field:has(input:invalid) div,
.simple-editor-form.was-validated .simple-field:has(select:invalid) div,
.simple-editor-form.was-validated .simple-field:has(textarea:invalid) div { background:#fff7f7; border-color:#f1aeb5; }
.simple-submit-card { align-items:center; display:flex; gap:10px; justify-content:flex-end; padding:14px 18px; }
.enquiry-current-page { background:#fbfbfc; color:#111827; margin:-8px 0 0; padding:0 2px 0; }
.enquiry-current-title { border-bottom:1px solid #dedede; color:#5f6670; font-size:36px; font-weight:300; line-height:1.2; margin:0 0 20px; padding:4px 14px 24px; }
.enquiry-current-panel { background:#fff; border:1px solid #d8d8d8; border-radius:3px; box-shadow:0 1px 2px rgba(0,0,0,.04); overflow:hidden; }
.enquiry-current-panel-head { align-items:center; background:#eeeeF6; border-bottom:1px solid #d8d8d8; color:#2f3440; display:flex; font-size:13px; gap:10px; min-height:35px; padding:0 10px; }
.enquiry-current-panel-head i { color:#7a7d84; font-size:13px; }
.enquiry-current-grid { display:grid; gap:30px; grid-template-columns:1fr 1fr; padding:16px 30px 16px; }
.enquiry-current-col { display:grid; gap:12px; align-content:start; }
.enquiry-current-field { display:grid; gap:6px; margin:0; }
.enquiry-current-field > span { color:#000; font-size:13.5px; font-weight:400; line-height:1.2; }
.enquiry-current-field b { color:#f25042; font-weight:500; }
.enquiry-current-field .form-control,
.enquiry-current-field .form-select { background:#fff; border:1px solid #cfcfcf; border-radius:0; box-shadow:none; color:#6b7280; font-size:14px; min-height:34px; padding:5px 8px; }
.enquiry-current-field .form-control:read-only { background:#eee; }
.enquiry-current-field .form-control:focus,
.enquiry-current-field .form-select:focus { border-color:#9fb8d5; box-shadow:0 0 0 2px rgba(13,110,253,.08); }
.enquiry-current-field textarea.form-control { min-height:54px; resize:vertical; }
.enquiry-current-field .input-group-text { background:#eee; border:1px solid #cfcfcf; border-left:0; border-radius:0; color:#2f3b46; font-size:14px; min-width:38px; padding:5px 10px; }
.enquiry-mobile-row { display:grid; gap:8px; grid-template-columns:108px minmax(0,1fr); }
.enquiry-mobile-row .form-select,
.enquiry-mobile-row .form-control { min-width:0; }
.enquiry-lead-options { align-items:center; display:flex; gap:12px; min-height:24px; }
.enquiry-lead-options label { align-items:center; color:#000; display:inline-flex; font-size:13.5px; gap:4px; margin:0; }
.enquiry-lead-options input { margin:0; }
.enquiry-current-submit { align-self:end; grid-column:1 / 2; padding-top:74px; }
.enquiry-current-submit .btn { background:#ffb743; border:0; border-radius:4px; color:#fff; font-size:14px; min-height:34px; text-transform:lowercase; width:100%; }
.enquiry-current-submit .btn:hover { background:#f6a832; color:#fff; }
.enquiry-current-form.was-validated .enquiry-current-field .form-control:invalid,
.enquiry-current-form.was-validated .enquiry-current-field .form-select:invalid { border-color:#dc3545; }
.expense-filter-toolbar { margin-bottom:16px; }
.expense-compact-head { align-items:center; background:#fff; border:1px solid #dce7f5; border-radius:12px; box-shadow:0 10px 26px rgba(15,23,42,.055); display:grid; gap:16px; grid-template-columns:minmax(250px,1fr) minmax(500px,1.25fr) auto; margin-bottom:14px; padding:12px 18px; }
.expense-compact-title .master-kicker { font-size:11px; padding:5px 12px; }
.expense-compact-title h1 { color:#081a34; font-size:22px; font-weight:800; margin:7px 0 2px; }
.expense-compact-title p { color:#65748b; font-size:13px; margin:0; }
.expense-inline-filter { align-items:end; display:grid; gap:9px; grid-template-columns:104px 116px minmax(180px,1fr) 122px 122px 104px; min-width:0; }
.expense-inline-stat { background:#f25042; border-radius:7px; color:#fff; display:grid; gap:1px; min-height:48px; padding:8px 11px; }
.expense-inline-stat.amount { background:var(--plan-theme); }
.expense-inline-stat span,
.expense-inline-filter label span { display:block; font-size:10px; font-weight:800; line-height:1.1; text-transform:uppercase; }
.expense-inline-stat span { color:rgba(255,255,255,.82); }
.expense-inline-stat strong { color:#fff; font-size:15px; font-weight:800; line-height:1.1; }
.expense-inline-filter label { display:grid; gap:5px; margin:0; min-width:0; }
.expense-inline-filter label span { color:#64748b; }
.expense-inline-filter select,
.expense-inline-filter input { background:#fff; border:1px solid #cfd8e6; border-radius:6px; color:#0f172a; font-size:13px; font-weight:600; min-height:36px; min-width:0; padding:5px 10px; width:100%; }
.expense-inline-filter button { align-items:center; background:var(--plan-theme); border:0; border-radius:7px; color:#fff; display:inline-flex; font-size:13px; font-weight:700; gap:8px; justify-content:center; min-height:36px; padding:0 14px; }
.expense-inline-filter button:hover { background:var(--plan-theme-dark); }
.expense-inline-add { font-size:13px; font-weight:700; min-height:44px; padding:0 18px; white-space:nowrap; }
.expense-table-card .plan-action { border:0; font-family:var(--font-main); }
.expense-table-card .plan-action.view { background:#eef7ff; color:#237de0; }
.expense-table-card .plan-action.view:hover { background:#237de0; color:#fff; }
.expense-current-page .enquiry-current-panel-head { justify-content:flex-start; }
.expense-current-back { align-items:center; color:#5f6670; display:inline-flex; font-size:12px; font-weight:700; gap:6px; margin-left:auto; }
.expense-current-back:hover { color:#f25042; }
.expense-current-date-grid { grid-template-columns:minmax(220px,360px); padding-bottom:10px; }
.expense-form-rows { display:grid; gap:14px; padding:0 30px 16px; }
.expense-current-row { border:1px solid #dedede; border-radius:3px; overflow:hidden; }
.expense-current-row-head { align-items:center; background:#f7f7fb; border-bottom:1px solid #dedede; display:flex; justify-content:space-between; min-height:34px; padding:0 10px; }
.expense-current-row-head span { color:#2f3440; font-size:13px; font-weight:500; }
.expense-current-row-head b { color:#f25042; font-weight:700; }
.expense-current-grid { gap:18px 24px; grid-template-columns:1.1fr .7fr .7fr 1.3fr; padding:14px; }
.expense-remove-row { align-items:center; background:#fff0f0; border:1px solid #ffc6c6; border-radius:4px; color:#e03131; display:inline-flex; height:26px; justify-content:center; width:30px; }
.expense-remove-row:hover { background:#e03131; color:#fff; }
.expense-current-actions { align-items:center; border-top:1px solid #dedede; display:grid; gap:14px; grid-template-columns:220px minmax(180px,320px); justify-content:space-between; padding:14px 30px 16px; }
.expense-current-add { align-items:center; background:#fff; border:1px solid #cfcfcf; border-radius:4px; color:#5f6670; display:inline-flex; font-size:13px; font-weight:700; gap:8px; justify-content:center; min-height:34px; padding:0 12px; }
.expense-current-add:hover { background:#f7f7fb; color:#f25042; }
.expense-current-actions .btn { background:var(--plan-theme); border:0; border-radius:4px; color:#fff; font-size:14px; min-height:34px; text-transform:lowercase; width:100%; }
.expense-current-actions .btn:hover { background:var(--plan-theme-dark); color:#fff; }
.attendance-current-page { min-height:calc(100vh - 120px); }
.attendance-current-panel { max-width:980px; }
.attendance-current-mode { display:grid; gap:14px; grid-template-columns:280px 240px; padding:16px 30px 6px; }
.attendance-current-mode .ops-segment span,
.attendance-current-filter .ops-segment span { border-color:#cfd8e6; border-radius:4px; box-shadow:none; color:#2f3440; font-size:13px; font-weight:700; min-height:34px; }
.attendance-current-mode .ops-segment input:checked + span,
.attendance-current-filter .ops-segment input:checked + span { background:var(--plan-theme); border-color:var(--plan-theme); color:#fff; }
.attendance-current-grid { gap:18px 24px; grid-template-columns:minmax(220px,320px) minmax(320px,1fr); padding-top:12px; }
.attendance-current-actions { border-top:1px solid #dedede; display:flex; justify-content:flex-end; padding:14px 30px 16px; }
.attendance-current-actions .btn,
.attendance-current-load { align-items:center; background:var(--plan-theme); border:0; border-radius:4px; color:#fff; display:inline-flex; font-size:14px; font-weight:700; gap:8px; justify-content:center; min-height:34px; padding:0 20px; }
.attendance-current-actions .btn:hover,
.attendance-current-load:hover { background:var(--plan-theme-dark); color:#fff; }
.attendance-current-filter { align-items:end; display:grid; gap:14px; grid-template-columns:260px 220px minmax(280px,1fr) 140px; padding:16px 30px; }
.attendance-current-logs { margin-top:16px; }
.attendance-current-logs .attendance-log-card { border:1px solid #d8d8d8; border-radius:4px; box-shadow:0 1px 2px rgba(0,0,0,.04); padding:12px 14px; }
.attendance-current-logs .attendance-log-card span { color:#5f6670; font-size:11px; font-weight:800; }
.attendance-current-logs .attendance-log-card strong { color:#111827; font-size:14px; font-weight:700; }
.attendance-current-logs .attendance-log-card em { border-radius:4px; font-size:12px; font-weight:700; padding:5px 10px; }
.plan-form-page { padding:18px; }
.plan-editor-form,
.plan-form-head { max-width:820px; }
.plan-editor-form { display:grid; gap:14px; margin:0; }
.plan-editor-card,
.plan-submit-card { background:#fff; border:1px solid #e1e8f0; border-radius:16px; box-shadow:0 16px 36px rgba(15,23,42,.07); overflow:hidden; }
.plan-editor-title { align-items:center; background:linear-gradient(135deg,#fff,var(--plan-theme-soft)); border-bottom:1px solid var(--plan-theme-border); display:flex; gap:12px; padding:16px 18px; }
.plan-editor-title > span { align-items:center; background:#fff; border:1px solid var(--plan-theme-border); border-radius:12px; color:var(--plan-theme); display:flex; font-size:20px; height:44px; justify-content:center; width:44px; }
.plan-editor-title strong { color:#0b1728; display:block; font-size:18px; font-weight:900; }
.plan-editor-title small { color:#64748b; display:block; font-size:12px; font-weight:700; margin-top:2px; }
.plan-segment { background:#f8fafc; border:1px solid var(--plan-theme-border); border-radius:14px; display:grid; grid-template-columns:repeat(2,1fr); margin:18px; overflow:hidden; padding:4px; }
.plan-segment label { margin:0; }
.plan-segment input { display:none; }
.plan-segment span { align-items:center; border-radius:10px; color:#0b1728; cursor:pointer; display:flex; font-size:14px; font-weight:900; justify-content:center; min-height:42px; }
.plan-segment input:checked + span { background:linear-gradient(135deg,var(--plan-theme),var(--plan-theme-accent)); color:#fff; box-shadow:0 10px 18px rgba(15,23,42,.12); }
.plan-form-grid { display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); padding:18px; }
.plan-field { display:grid; gap:7px; margin:0; }
.plan-field-full { grid-column:1 / -1; }
.plan-field > span { color:var(--plan-theme); font-size:11px; font-weight:900; text-transform:uppercase; }
.plan-field div { align-items:center; background:#f8fafc; border:1px solid var(--plan-theme-border); border-radius:12px; display:flex; gap:10px; min-height:46px; padding:0 12px; }
.plan-field div.textarea { align-items:flex-start; padding-top:12px; }
.plan-field:focus-within div { background:#fff; border-color:var(--plan-theme); box-shadow:0 0 0 3px color-mix(in srgb,var(--plan-theme) 12%,transparent); }
.plan-field i { color:var(--plan-theme); font-size:18px; }
.plan-field input,
.plan-field select,
.plan-field textarea { background:transparent; border:0; box-shadow:none; color:#0f172a; flex:1; font-size:14px; font-weight:800; min-width:0; outline:0; padding:0; width:100%; }
.plan-field textarea { min-height:90px; resize:vertical; }
.plan-field .invalid-feedback { color:#dc3545; font-size:12px; font-weight:800; margin:0; }
.plan-editor-form.was-validated .plan-field:has(input:invalid) div { background:#fff7f7; border-color:#f1aeb5; }
.plan-multi-shift { background:#f8fafc; border:1px solid var(--plan-theme-border); border-radius:12px; display:grid; gap:10px; grid-template-columns:repeat(4,minmax(0,1fr)); padding:12px; }
.plan-multi-shift label { margin:0; }
.plan-multi-shift input { display:none; }
.plan-multi-shift span { align-items:center; background:#fff; border:1px solid #d8e1ea; border-radius:999px; color:#0b1728; cursor:pointer; display:flex; font-size:13px; font-weight:900; justify-content:center; min-height:38px; padding:0 12px; }
.plan-multi-shift input:checked + span { background:linear-gradient(135deg,var(--plan-theme),var(--plan-theme-accent)); border-color:var(--plan-theme); color:#fff; }
.plan-submit-card { align-items:center; display:flex; gap:10px; justify-content:flex-end; padding:14px 18px; }
.user-form-page { padding:18px; }
.user-editor-form,
.user-form-head { max-width:1040px; }
.user-editor-form { display:grid; gap:14px; margin:0; }
.user-editor-card,
.user-submit-card { background:#fff; border:1px solid #e1e8f0; border-radius:16px; box-shadow:0 16px 36px rgba(15,23,42,.07); overflow:hidden; }
.user-photo-panel { align-items:center; background:linear-gradient(135deg,#fff,var(--plan-theme-soft)); border:1px solid var(--plan-theme-border); border-radius:14px; display:grid; gap:18px; grid-template-columns:78px minmax(0,1fr) 54px; margin:18px; padding:18px; }
.user-photo-panel > span { align-items:center; background:#fff; border:2px solid #dbe4ee; border-radius:50%; color:var(--plan-theme); display:flex; font-size:34px; height:78px; justify-content:center; width:78px; }
.user-photo-panel strong { color:#0f172a; display:block; font-size:22px; font-weight:900; }
.user-photo-panel small { color:#64748b; display:block; font-size:14px; font-weight:700; margin-top:3px; }
.user-photo-panel input { display:none; }
.user-photo-panel label { align-items:center; background:linear-gradient(135deg,var(--plan-theme),var(--plan-theme-accent)); border-radius:16px; box-shadow:0 10px 18px rgba(242,80,66,.18); color:#fff; cursor:pointer; display:flex; font-size:22px; height:54px; justify-content:center; margin:0; width:54px; }
.user-editor-title,
.user-collapse-title { align-items:center; background:linear-gradient(135deg,#fff,var(--plan-theme-soft)); border:0; border-bottom:1px solid var(--plan-theme-border); display:flex; gap:12px; padding:16px 18px; text-align:left; width:100%; }
.user-editor-title > span,
.user-collapse-title > span { align-items:center; background:#fff; border:1px solid var(--plan-theme-border); border-radius:12px; color:var(--plan-theme); display:flex; flex:0 0 auto; font-size:20px; height:44px; justify-content:center; width:44px; }
.user-editor-title strong,
.user-collapse-title strong { color:#0b1728; display:block; font-size:18px; font-weight:900; }
.user-editor-title small,
.user-collapse-title small { color:#64748b; display:block; font-size:12px; font-weight:700; margin-top:2px; }
.user-staff-login { align-items:center; background:#fff; border:1px solid var(--plan-theme-border); border-radius:999px; color:var(--plan-theme); display:inline-flex; font-size:12px; font-weight:900; gap:7px; margin:0 0 0 auto; min-height:34px; padding:0 12px; }
.user-staff-login input { accent-color:var(--plan-theme); }
.user-form-grid { display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); padding:18px; }
.user-field { display:grid; gap:7px; margin:0; }
.user-field-full { grid-column:1 / -1; }
.user-field > span,
.user-gender-field > span { color:var(--plan-theme); display:block; font-size:11px; font-weight:900; margin-bottom:7px; text-transform:uppercase; }
.user-field div { align-items:center; background:#f8fafc; border:1px solid var(--plan-theme-border); border-radius:12px; display:flex; gap:10px; min-height:46px; padding:0 12px; }
.user-field div.textarea { align-items:flex-start; padding-top:12px; }
.user-field:focus-within div { background:#fff; border-color:var(--plan-theme); box-shadow:0 0 0 3px color-mix(in srgb,var(--plan-theme) 12%,transparent); }
.user-field i { color:var(--plan-theme); font-size:18px; }
.user-field input,
.user-field select,
.user-field textarea { background:transparent; border:0; box-shadow:none; color:#0f172a; flex:1; font-size:14px; font-weight:800; min-width:0; outline:0; padding:0; width:100%; }
.user-field input[type="file"] { color:#64748b; font-size:13px; }
.user-field textarea { min-height:76px; resize:vertical; }
.user-password-wrap {
    align-items: center;
    display: flex;
    flex: 1;
    gap: 10px;
    min-width: 0;
}
.user-password-wrap input {
    flex: 1;
    min-width: 0;
    padding-right: 0;
}
.user-password-toggle {
    align-items:center;
    background:transparent;
    border:0;
    color:#111827;
    display:inline-flex;
    flex:0 0 auto;
    font-size:18px;
    height:30px;
    justify-content:center;
    margin-left:auto;
    padding:0;
    cursor:pointer;
    width:30px;
}
.user-password-toggle i { color:#111827; }
.user-password-toggle:hover { color:var(--plan-theme); }
.user-password-toggle:hover i { color:var(--plan-theme); }
.user-password-toggle:focus-visible {
    outline:0;
    color:var(--plan-theme);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--plan-theme) 15%,transparent);
    border-radius:8px;
}
.user-field .invalid-feedback { color:#dc3545; font-size:12px; font-weight:800; margin:0; }
.user-editor-form.was-validated .user-field:has(input:invalid) div,
.user-editor-form.was-validated .user-field:has(select:invalid) div { background:#fff7f7; border-color:#f1aeb5; }
.user-gender-tabs { background:#f8fafc; border:1px solid var(--plan-theme-border); border-radius:14px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:hidden; padding:4px; }
.user-gender-tabs label { margin:0; }
.user-gender-tabs input { display:none; }
.user-gender-tabs span { align-items:center; border-radius:10px; color:#0b1728; cursor:pointer; display:flex; font-size:14px; font-weight:900; gap:8px; justify-content:center; min-height:42px; }
.user-gender-tabs input:checked + span { background:linear-gradient(135deg,var(--plan-theme),var(--plan-theme-accent)); color:#fff; box-shadow:0 10px 18px rgba(15,23,42,.12); }
.user-library-list,
.user-permission-grid { display:grid; gap:10px; padding:18px; }
.user-library-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
.user-permission-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.user-library-list label,
.user-permission-grid label { margin:0; }
.user-library-list input,
.user-permission-grid input { display:none; }
.user-library-list span,
.user-permission-grid span { align-items:center; background:#fff; border:1px solid #d8e1ea; border-radius:12px; box-shadow:0 8px 16px rgba(15,23,42,.04); color:#0f172a; cursor:pointer; display:flex; gap:10px; min-height:44px; padding:10px 12px; }
.user-library-list b,
.user-permission-grid span { font-size:13px; font-weight:900; }
.user-library-list i,
.user-permission-grid i { color:#98a2b3; font-size:17px; }
.user-library-list input:checked + span,
.user-permission-grid input:checked + span { background:var(--plan-theme-soft); border-color:var(--plan-theme); color:var(--plan-theme); }
.user-library-list input:checked + span i:before { content:"\f26d"; }
.user-permission-grid input:checked + span i:before { content:"\f26a"; }
.user-submit-card { align-items:center; display:flex; gap:10px; justify-content:flex-end; padding:14px 18px; }
.user-permission-modal .modal-content,
.user-profile-modal .modal-content,
.user-enroll-modal .modal-content { border:1px solid var(--plan-theme-border); border-radius:18px; box-shadow:0 24px 70px rgba(15,23,42,.2); overflow:hidden; }
.user-permission-modal .modal-header,
.user-profile-modal .modal-header,
.user-enroll-modal .modal-header { align-items:center; background:linear-gradient(135deg,#fff,var(--plan-theme-soft)); border-bottom:1px solid var(--plan-theme-border); padding:18px 20px; }
.user-permission-modal .modal-header span,
.user-profile-modal .modal-header span,
.user-enroll-modal .modal-header span { color:var(--plan-theme); display:block; font-size:12px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; }
.user-permission-modal .modal-header h2,
.user-profile-modal .modal-header h2,
.user-enroll-modal .modal-header h2 { color:#0f172a; font-size:22px; font-weight:900; margin:3px 0 0; }
.user-permission-modal .modal-body { display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr)); padding:18px; }
.user-profile-modal .modal-body,
.user-enroll-modal .modal-body { padding:18px; }
.seat-map-page { padding:14px; position:relative; }
.seat-app-head { align-items:center; background:#fff; border:1px solid #dce7f5; border-radius:14px; box-shadow:0 14px 30px rgba(15,23,42,.07); display:grid; gap:14px; grid-template-columns:minmax(0,1fr) minmax(260px,360px); margin-bottom:12px; padding:14px 16px; }
.seat-app-head h1 { color:#081a34; font-size:24px; font-weight:900; margin:6px 0 0; }
.seat-app-head h1 small { color:#64748b; font-size:.75em; font-weight:750; }
.seat-search-form { align-items:center; background:#f8fafc; border:1px solid #dbe4ee; border-radius:12px; display:flex; min-height:44px; overflow:hidden; }
.seat-search-form input { background:transparent; border:0; color:#081a34; flex:1; font-weight:800; min-width:0; outline:0; padding:0 13px; }
.seat-search-form button { background:transparent; border:0; color:var(--plan-theme); font-size:18px; height:44px; width:48px; }
.seat-stats { display:grid; gap:10px; grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:12px; }
.seat-stats a,
.seat-stats button { align-items:center; background:#fff; border:1px solid #e1e8f0; border-radius:14px; box-shadow:0 10px 20px rgba(15,23,42,.05); color:#0f172a; cursor:pointer; display:grid; gap:2px 10px; grid-template-columns:42px minmax(0,1fr); min-height:72px; padding:12px 14px; text-align:left; width:100%; }
.seat-stats a i,
.seat-stats button i { align-items:center; background:#eaf6ff; border:1px solid #cfe8ff; border-radius:12px; color:#2394df; display:flex; font-size:18px; grid-row:1 / span 2; height:42px; justify-content:center; width:42px; }
.seat-stats a:nth-child(2) i,
.seat-stats button:nth-child(2) i { background:#fff8e8; border-color:#ffdf9c; color:#f59e0b; }
.seat-stats a:nth-child(3) i,
.seat-stats button:nth-child(3) i { background:#ecfdf3; border-color:#c4f0d1; color:#32a852; }
.seat-stats a span,
.seat-stats button span { color:#64748b; font-size:12px; font-weight:850; }
.seat-stats a strong,
.seat-stats button strong { color:#020617; font-size:20px; font-weight:950; line-height:1; }
.seat-stats a.active,
.seat-stats button.active { background:#eaf6ff; border-color:#72bfff; box-shadow:inset 0 1px 0 #fff,0 16px 34px rgba(35,148,223,.12); }
.seat-stats button { appearance:none; -webkit-appearance:none; }
.seat-shift-row { background:#fff; border:1px solid #edf0f5; border-radius:14px; box-shadow:0 10px 20px rgba(15,23,42,.05); display:flex; gap:8px; margin-bottom:14px; overflow-x:auto; padding:6px; }
.seat-shift-row a,
.seat-shift-row button { align-items:center; border:0; border-radius:11px; color:#374151; cursor:pointer; display:flex; flex:1 0 128px; font-size:13px; font-weight:900; gap:8px; justify-content:center; min-height:40px; padding:0 12px; white-space:nowrap; }
.seat-shift-row a.active,
.seat-shift-row button.active { background:linear-gradient(135deg,#ffad14,#ff8f00); box-shadow:0 14px 22px rgba(255,143,0,.2); color:#fff; }
.seat-shift-row button { appearance:none; -webkit-appearance:none; background:transparent; }
.seat-search-note { align-items:center; background:#fff; border:1px solid var(--plan-theme-border); border-radius:12px; color:#64748b; display:flex; gap:10px; justify-content:space-between; margin-bottom:12px; padding:10px 12px; }
.seat-search-note strong,
.seat-search-note a { color:var(--plan-theme); font-weight:900; }
.seat-search-note button { background:transparent; border:1px solid #8d8d8d; border-radius:0; color:#0f172a; cursor:pointer; font-size:14px; font-weight:400; min-height:30px; padding:2px 10px; }
.seat-alias-list { display:grid; gap:14px; padding-bottom:72px; }
.seat-alias-group { background:#fff; border:1px solid #ffd4ce; border-radius:14px; box-shadow:0 10px 22px rgba(15,23,42,.045); overflow:hidden; }
.seat-alias-head { align-items:center; background:#fff0ef; border:0; border-bottom:1px solid #ffc8c1; color:#f25042; display:flex; font-weight:900; justify-content:space-between; min-height:48px; padding:0 14px; text-align:left; width:100%; }
.seat-alias-head span { align-items:center; display:flex; gap:9px; font-size:15px; }
.seat-alias-head strong { color:#0f172a; font-size:16px; }
.seat-alias-head[aria-expanded="false"] .bi-chevron-down { transform:rotate(-90deg); }
.seat-grid { display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); padding:12px; }
.seat-tile { align-items:center; background:#fff; border:1px solid #e2e8f0; border-radius:12px; box-shadow:inset 0 1px 0 #fff,0 10px 18px rgba(15,23,42,.05); color:#0f172a; display:flex; flex-direction:column; justify-content:flex-end; min-height:126px; overflow:hidden; padding:36px 8px 0; position:relative; text-align:center; transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease; }
.seat-tile:hover { border-color:var(--plan-theme-border); box-shadow:inset 0 1px 0 #fff,0 18px 30px rgba(15,23,42,.09); transform:translateY(-2px); }
.seat-tile .seat-no { background:#08b85c; border-radius:8px; color:#fff; display:inline-flex; font-size:11px; font-weight:900; left:8px; max-width:62%; min-height:24px; overflow:hidden; padding:4px 7px; position:absolute; text-overflow:ellipsis; top:8px; white-space:nowrap; }
.seat-tile.allotted .seat-no { background:#f25042; }
.seat-tile em { align-items:center; background:#6b7280; border:2px solid #fff; border-radius:7px; color:#fff; display:flex; font-size:8px; font-style:normal; font-weight:850; gap:3px; min-height:20px; padding:2px 5px; position:absolute; right:6px; top:6px; }
.seat-tile img { display:block; flex:0 0 auto; height:54px; margin:0 auto 7px; object-fit:contain; width:64px; }
.seat-tile strong { align-items:center; background:#eefaf0; color:#268243; display:flex; font-size:12px; font-weight:900; justify-content:center; margin:0 -8px; min-height:32px; overflow:hidden; padding:6px 6px; text-overflow:ellipsis; white-space:nowrap; width:calc(100% + 16px); }
.seat-tile.allotted strong { background:#fff6e8; color:#bd6512; }
.seat-details-modal .modal-content { border:0; border-radius:18px; box-shadow:0 26px 80px rgba(15,23,42,.25); overflow:hidden; }
.seat-details-modal .modal-header { border-bottom:1px solid #edf2f7; justify-content:center; padding:20px; position:relative; }
.seat-details-modal .modal-title { color:#0f172a; font-size:24px; font-weight:850; }
.seat-details-modal .btn-close { position:absolute; right:18px; top:22px; }
.seat-details-modal .modal-body { display:grid; gap:14px; padding:22px; }
.seat-details-modal .modal-body div { display:grid; gap:14px; grid-template-columns:150px minmax(0,1fr); }
.seat-details-modal .modal-body span { color:#9aa0a6; font-size:15px; font-weight:800; }
.seat-details-modal .modal-body strong { color:#f25042; font-size:17px; font-weight:900; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.seat-floating-add { bottom:32px; position:fixed; right:32px; z-index:30; }
.seat-add-page { padding:18px; }
.seat-add-head-actions { align-items:center; display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
.seat-danger-btn { align-items:center; background:#fff0f0; border:1px solid #ffc6c6; border-radius:14px; color:#e03131; display:inline-flex; font-weight:900; gap:8px; min-height:48px; padding:0 18px; }
.seat-danger-btn:hover { background:#e03131; border-color:#e03131; color:#fff; }
.seat-add-layout { align-items:start; display:grid; gap:18px; grid-template-columns:minmax(320px,410px) minmax(0,1fr); }
.seat-add-layout.single { grid-template-columns:minmax(320px,430px); justify-content:start; }
.seat-add-panel { background:#fff; border:1px solid #e1e8f0; border-radius:16px; box-shadow:0 16px 36px rgba(15,23,42,.07); overflow:hidden; position:sticky; top:76px; }
.seat-add-layout.single .seat-add-panel { position:static; }
.seat-editor-title { align-items:center; background:linear-gradient(135deg,#fff,var(--plan-theme-soft)); border-bottom:1px solid var(--plan-theme-border); display:flex; gap:12px; padding:16px 18px; }
.seat-editor-title > span { align-items:center; background:#fff; border:1px solid var(--plan-theme-border); border-radius:12px; color:var(--plan-theme); display:flex; font-size:20px; height:44px; justify-content:center; width:44px; }
.seat-editor-title strong { color:#0b1728; display:block; font-size:18px; font-weight:900; }
.seat-editor-title small { color:#64748b; display:block; font-size:12px; font-weight:700; margin-top:2px; }
.seat-add-form { display:grid; gap:12px; padding:18px; }
.seat-add-field { display:grid; gap:7px; margin:0; }
.seat-add-field span { color:var(--plan-theme); font-size:11px; font-weight:900; text-transform:uppercase; }
.seat-add-field div { align-items:center; background:#f8fafc; border:1px solid var(--plan-theme-border); border-radius:12px; display:flex; gap:10px; min-height:48px; padding:0 12px; }
.seat-add-field:focus-within div { background:#fff; border-color:var(--plan-theme); box-shadow:0 0 0 3px color-mix(in srgb,var(--plan-theme) 12%,transparent); }
.seat-add-field i { color:var(--plan-theme); font-size:18px; }
.seat-add-field input,
.seat-add-field select { background:transparent; border:0; box-shadow:none; color:#0f172a; flex:1; font-size:14px; font-weight:850; min-width:0; outline:0; padding:0; width:100%; }
.seat-add-field .invalid-feedback { color:#dc3545; font-size:12px; font-weight:800; margin:0; }
.seat-add-form.was-validated .seat-add-field:has(input:invalid) div { background:#fff7f7; border-color:#f1aeb5; }
.seat-add-tip { align-items:flex-start; color:#64748b; display:flex; font-size:12px; font-weight:750; gap:8px; line-height:1.45; margin:0; }
.seat-add-tip i { color:var(--plan-theme); }
.seat-add-content { display:grid; gap:18px; min-width:0; }
.seat-stats.compact { gap:12px; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0; }
.seat-stats.compact div { align-items:center; background:#fff; border:1px solid #e1e8f0; border-radius:16px; box-shadow:0 16px 34px rgba(15,23,42,.06); color:#0f172a; display:grid; gap:4px 12px; grid-template-columns:50px minmax(0,1fr); min-height:88px; padding:14px; }
.seat-stats.compact div i { align-items:center; background:#eaf6ff; border:1px solid #cfe8ff; border-radius:14px; color:#2394df; display:flex; font-size:21px; grid-row:1 / span 2; height:50px; justify-content:center; width:50px; }
.seat-stats.compact div:nth-child(2) i { background:#fff8e8; border-color:#ffdf9c; color:#f59e0b; }
.seat-stats.compact div:nth-child(3) i { background:#ecfdf3; border-color:#c4f0d1; color:#32a852; }
.seat-stats.compact span { color:#64748b; font-size:13px; font-weight:850; }
.seat-stats.compact strong { color:#020617; font-size:23px; font-weight:950; line-height:1; }
.seat-alias-list.compact { padding-bottom:0; }
.seat-grid.add-grid { grid-template-columns:repeat(auto-fill,minmax(126px,1fr)); }
.seat-delete-form { position:absolute; right:9px; top:42px; z-index:2; }
.seat-delete-form button { align-items:center; background:#fff0f0; border:0; border-radius:9px; color:#f04444; display:flex; height:28px; justify-content:center; width:28px; }
.seat-delete-form button:hover { background:#f04444; color:#fff; }
.user-profile-grid { display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.user-profile-grid div { border:1px solid #e4eaf2; border-radius:12px; background:#fff; box-shadow:0 8px 18px rgba(15,23,42,.045); padding:12px; }
.user-profile-grid div.wide { grid-column:1 / -1; }
.user-profile-grid span { color:#667085; display:block; font-size:12px; font-weight:900; text-transform:uppercase; }
.user-profile-grid strong { color:#0f172a; display:block; font-size:14px; font-weight:850; margin-top:4px; word-break:break-word; }
.enroll-user-chip { align-items:center; background:var(--plan-theme-soft); border:1px solid var(--plan-theme-border); border-radius:14px; display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:10px; margin-bottom:14px; padding:12px; }
.enroll-user-chip i { align-items:center; background:#fff; border-radius:10px; color:var(--plan-theme); display:flex; height:42px; justify-content:center; width:42px; }
.enroll-user-chip span { color:#667085; font-size:12px; font-weight:900; text-transform:uppercase; }
.enroll-user-chip strong { color:#0f172a; font-weight:900; }
.enroll-form { display:grid; gap:12px; }
.enroll-admin-toggle { align-items:center; display:flex; gap:8px; color:#344054; font-size:13px; font-weight:850; }
.enroll-admin-toggle input { accent-color:var(--plan-theme); }
.enroll-button-grid { display:grid; gap:10px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.enroll-button-grid button,
.card-password-box button { align-items:center; border:0; border-radius:10px; color:#fff; display:inline-flex; gap:8px; justify-content:center; min-height:42px; padding:9px 12px; font-weight:900; background:linear-gradient(135deg,var(--plan-theme),var(--plan-theme-accent)); }
.card-password-box { border:1px solid #e4eaf2; border-radius:14px; display:grid; gap:10px; padding:12px; }
.card-password-box strong { color:#0f172a; font-size:14px; font-weight:900; }
.card-password-box input { border:1px solid #d8e1ea; border-radius:9px; min-height:40px; padding:8px 10px; outline:0; }
.permission-panel { border:1px solid #e4eaf2; border-radius:14px; background:#fff; box-shadow:0 12px 24px rgba(15,23,42,.055); padding:14px; }
.permission-panel h3 { align-items:center; display:flex; gap:8px; font-size:15px; font-weight:900; margin:0 0 12px; }
.permission-panel.allowed h3 { color:#15803d; }
.permission-panel.blocked h3 { color:#dc2626; }
.permission-chip-grid { display:flex; flex-wrap:wrap; gap:8px; }
.permission-chip-grid span { border-radius:999px; display:inline-flex; font-size:12px; font-weight:900; min-height:30px; padding:6px 10px; }
.permission-panel.allowed .permission-chip-grid span { background:#ecfdf3; color:#15803d; }
.permission-panel.blocked .permission-chip-grid span { background:#fff1f2; color:#dc2626; }
.permission-chip-grid em { color:#667085; font-size:13px; font-style:normal; font-weight:700; }
.active-plan-page { display:grid; gap:18px; }
.active-plan-head { align-items:center; background:#fff; border:1px solid var(--plan-theme-border); border-radius:18px; box-shadow:0 20px 46px rgba(15,23,42,.08); display:flex; justify-content:space-between; gap:18px; padding:20px 22px; }
.active-plan-kicker { align-items:center; background:var(--plan-theme-soft); border:1px solid var(--plan-theme-border); border-radius:999px; color:var(--plan-theme); display:inline-flex; font-size:12px; font-weight:900; gap:7px; padding:6px 12px; text-transform:uppercase; }
.active-plan-head h1 { color:#081a34; font-size:28px; font-weight:900; margin:9px 0 5px; }
.active-plan-head p { color:#65748b; font-size:15px; margin:0; }
.active-plan-year { align-items:end; display:grid; gap:6px; min-width:160px; }
.active-plan-year label { color:#536079; font-size:12px; font-weight:900; text-transform:uppercase; }
.active-plan-year select { border:1px solid #d8e1ea; border-radius:10px; color:#0f172a; font-weight:900; min-height:42px; padding:8px 12px; outline:0; }
.active-plan-summary { display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.active-plan-summary article { align-items:center; background:#fff; border:1px solid var(--plan-theme-border); border-radius:16px; box-shadow:0 14px 30px rgba(15,23,42,.06); display:grid; gap:4px 12px; grid-template-columns:50px minmax(0,1fr); min-height:86px; padding:16px; }
.active-plan-summary i { align-items:center; background:linear-gradient(135deg,var(--plan-theme),var(--plan-theme-accent)); border-radius:13px; color:#fff; display:flex; font-size:22px; grid-row:span 2; height:50px; justify-content:center; width:50px; box-shadow:0 12px 20px rgba(15,23,42,.12); }
.active-plan-summary span { color:#667085; font-size:12px; font-weight:900; text-transform:uppercase; }
.active-plan-summary strong { color:#0f172a; font-size:22px; font-weight:900; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.active-plan-layout { display:grid; gap:18px; grid-template-columns:minmax(360px,.9fr) minmax(460px,1.1fr); }
.active-plan-chart-card,
.active-plan-table-card { background:#fff; border:1px solid var(--plan-theme-border); border-radius:18px; box-shadow:0 20px 46px rgba(15,23,42,.08); overflow:hidden; padding:18px; }
.active-plan-card-title { align-items:center; background:linear-gradient(135deg,#fff,var(--plan-theme-soft)); border:1px solid var(--plan-theme-border); border-radius:14px; box-shadow:inset 0 1px 0 #fff,0 10px 22px rgba(15,23,42,.045); display:flex; justify-content:space-between; margin-bottom:14px; padding:14px 16px; }
.active-plan-card-title strong { color:#0f172a; display:block; font-size:17px; font-weight:900; }
.active-plan-card-title span { color:#667085; display:block; font-size:12px; font-weight:800; margin-top:3px; }
.active-plan-chart-card canvas { height:430px !important; max-height:430px; }
.active-plan-empty { align-content:center; border:1px dashed var(--plan-theme-border); border-radius:14px; color:#667085; display:grid; justify-items:center; min-height:360px; padding:30px; text-align:center; }
.active-plan-empty i { color:var(--plan-theme); font-size:46px; }
.active-plan-empty strong { color:#0f172a; font-size:20px; font-weight:900; margin-top:8px; }
.active-plan-table-card .table-responsive { background:linear-gradient(180deg,var(--plan-theme-soft),#fff); border:1px solid var(--plan-theme-border); border-radius:14px; padding:10px; }
.active-plan-table { border-collapse:separate; border-spacing:0; margin:0; min-width:720px; }
.active-plan-table thead th { background:linear-gradient(180deg,var(--plan-theme),var(--plan-theme-dark)); border:0; color:#fff; font-size:12px; font-weight:900; padding:14px 15px; text-transform:uppercase; white-space:nowrap; }
.active-plan-table thead th:first-child { border-top-left-radius:10px; }
.active-plan-table thead th:last-child { border-top-right-radius:10px; }
.active-plan-table tbody td { background:#fff; border-bottom:1px solid #edf2f7; color:#1f2937; font-size:14px; font-weight:750; padding:14px 15px; vertical-align:middle; }
.active-plan-table tbody tr:last-child td { border-bottom:0; }
.active-plan-table tbody tr:hover td { background:var(--plan-theme-soft); }
.active-plan-name { align-items:center; display:flex; gap:10px; min-width:0; }
.active-plan-name i { border-radius:9px; display:inline-flex; flex:0 0 auto; height:28px; width:28px; box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 14px rgba(15,23,42,.12); }
.active-plan-name strong { color:#0f172a; font-weight:900; line-height:1.3; }
.active-plan-type { background:#f8fafc; border:1px solid #e4eaf2; border-radius:999px; color:#475467; display:inline-flex; font-size:12px; font-weight:900; padding:6px 10px; white-space:nowrap; }
.active-plan-share { align-items:center; display:grid; gap:8px; grid-template-columns:minmax(90px,1fr) 42px; }
.active-plan-share:before { content:""; display:none; }
.active-plan-share span { background:linear-gradient(90deg,var(--plan-theme),var(--plan-theme-accent)); border-radius:999px; display:block; height:9px; max-width:100%; min-width:4px; }
.active-plan-share { background:#edf2f7; border-radius:999px; padding:4px; }
.active-plan-share b { color:#0f172a; font-size:12px; font-weight:900; text-align:right; }
.collection-graph-layout { grid-template-columns:minmax(520px,1.25fr) minmax(360px,.75fr); }
.collection-chart-card canvas { height:460px !important; max-height:460px; }
.invoice-toolbar-card { align-items:center; background:#fff; border:1px solid var(--plan-theme-border); border-radius:18px; box-shadow:0 14px 30px rgba(15,23,42,.06); display:flex; gap:14px; justify-content:space-between; padding:14px; }
.invoice-page-loader { align-items:center; background:#f3f6fb; display:flex; inset:auto 0 0 auto; justify-content:center; min-height:calc(100vh - 84px); padding:24px; position:absolute; right:0; top:0; transition:opacity .22s ease, visibility .22s ease; width:100%; z-index:30; }
.invoice-page-loader.is-hidden { opacity:0; visibility:hidden; }
.invoice-loader-card { align-items:center; background:#fff; border:1px solid #e1e8f0; border-radius:20px; box-shadow:0 24px 60px rgba(15,23,42,.12); display:flex; flex-direction:column; gap:10px; min-width:280px; padding:34px 38px; text-align:center; }
.invoice-loader-ring { animation:invoiceLoaderSpin .8s linear infinite; border:5px solid #ffe4e1; border-radius:999px; border-top-color:#f24f42; display:block; height:58px; width:58px; }
.invoice-loader-card strong { color:#081a34; font-size:20px; font-weight:900; }
.invoice-loader-card small { color:#64748b; font-size:13px; font-weight:700; }
@keyframes invoiceLoaderSpin { to { transform:rotate(360deg); } }
.invoice-tabs { background:var(--plan-theme-soft); border:1px solid var(--plan-theme-border); border-radius:12px; display:grid; grid-template-columns:repeat(2,minmax(160px,1fr)); overflow:hidden; padding:4px; }
.invoice-tabs a { align-items:center; border-radius:9px; color:#526D86; display:flex; font-size:13px; font-weight:900; justify-content:center; min-height:40px; padding:8px 12px; text-align:center; }
.invoice-tabs a.active { background:linear-gradient(135deg,var(--plan-theme),var(--plan-theme-accent)); color:#fff; box-shadow:0 8px 16px rgba(15,23,42,.12); }
.invoice-delete-btn { align-items:center; background:#fff0f0; border:0; border-radius:12px; color:#f04444; display:inline-flex; font-size:17px; height:42px; justify-content:center; width:42px; }
.invoice-delete-btn:hover { background:#f04444; color:#fff; }
.invoice-delete-btn:disabled { opacity:.55; pointer-events:none; }
.invoice-search-form { align-items:center; background:#f8fafc; border:1px solid #d8e1ea; border-radius:12px; display:flex; min-height:44px; min-width:min(420px,100%); overflow:hidden; }
.invoice-search-form input { background:transparent; border:0; color:#0f172a; flex:1; font-weight:800; min-width:0; outline:0; padding:0 12px; }
.invoice-search-form button,
.invoice-search-form a { align-items:center; background:transparent; border:0; color:var(--plan-theme); display:flex; font-size:18px; height:44px; justify-content:center; width:44px; }

.notice-form-page { padding: 18px; }
.notice-form-shell { display:grid; gap:14px; margin:0; max-width:760px; }
.notice-form-hero { align-items:center; background:#fff; border:1px solid #e1e8f0; border-radius:14px; box-shadow:0 12px 28px rgba(15,23,42,.06); display:flex; justify-content:space-between; padding:16px 18px; }
.notice-form-hero h1 { color:#081a34; font-size:24px; font-weight:900; margin:8px 0 3px; }
.notice-form-hero p { color:#64748b; font-size:13px; font-weight:700; margin:0; }
.notice-back-btn { align-items:center; background:#fff; border:1px solid #d8e1ea; border-radius:10px; color:#64748b; display:inline-flex; font-size:13px; font-weight:800; gap:7px; min-height:38px; padding:0 12px; }
.notice-editor-card { background:#fff; border:1px solid #e1e8f0; border-radius:14px; box-shadow:0 16px 36px rgba(15,23,42,.07); overflow:hidden; }
.notice-section-title { align-items:center; background:#fff8f7; border-bottom:1px solid #ffe0dc; display:flex; gap:12px; padding:16px 18px; }
.notice-section-title > span { align-items:center; background:#fff; border:1px solid #ffe0dc; border-radius:12px; color:#f24f42; display:flex; font-size:20px; height:44px; justify-content:center; width:44px; }
.notice-section-title strong { color:#0b1728; display:block; font-size:18px; font-weight:900; }
.notice-section-title small { color:#64748b; display:block; font-size:12px; font-weight:700; margin-top:2px; }
.notice-form-grid { display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); padding:18px; }
.notice-field { background:#f8fafc; border:1px solid #d8e1ea; border-radius:12px; display:grid; gap:6px; padding:10px 12px; }
.notice-field-full { grid-column:1 / -1; }
.notice-field span { color:#f24f42; font-size:11px; font-weight:900; text-transform:uppercase; }
.notice-field input,
.notice-field select,
.notice-field textarea { background:transparent; border:0; box-shadow:none; color:#0f172a; font-size:14px; font-weight:750; min-height:28px; outline:0; padding:0; width:100%; }
.notice-field textarea { line-height:1.45; min-height:96px; resize:vertical; }
.notice-message-field { background:#fbfcff; }
.notice-field-error { color:#dc3545; display:none; font-size:12px; font-weight:800; margin-top:2px; }
.notice-editor-card.was-validated .notice-field input:invalid ~ .notice-field-error,
.notice-editor-card.was-validated .notice-field textarea:invalid ~ .notice-field-error,
.notice-editor-card.was-validated .notice-select-field.is-invalid .notice-field-error { display:block; }
.notice-editor-card.was-validated .notice-field input:invalid,
.notice-editor-card.was-validated .notice-field textarea:invalid,
.notice-editor-card.was-validated .notice-select-field.is-invalid .notice-select-toggle { color:#dc3545; }
.notice-editor-card.was-validated .notice-field:has(input:invalid),
.notice-editor-card.was-validated .notice-field:has(textarea:invalid),
.notice-editor-card.was-validated .notice-select-field.is-invalid { background:#fff7f7; border-color:#f1aeb5; }
.notice-select-field { position:relative; }
.notice-select-toggle { align-items:center; background:transparent; border:0; color:#0f172a; display:flex; font-size:14px; font-weight:850; justify-content:space-between; min-height:30px; outline:0; padding:0; text-align:left; width:100%; }
.notice-select-toggle strong { font-size:14px; font-weight:850; }
.notice-select-toggle i { color:#64748b; transition:transform .18s ease; }
.notice-select-field.open .notice-select-toggle i { transform:rotate(180deg); }
.notice-select-menu { background:#fff; border:1px solid #d8e1ea; border-radius:12px; box-shadow:0 16px 34px rgba(15,23,42,.12); display:none; margin-top:8px; overflow:hidden; }
.notice-select-field.open .notice-select-menu { display:grid; }
.notice-select-menu button { align-items:center; background:#fff; border:0; color:#0f172a; display:flex; font-size:14px; font-weight:800; justify-content:space-between; min-height:38px; padding:0 12px; text-align:left; width:100%; }
.notice-select-menu button:hover,
.notice-select-menu button.active { background:#fff0ef; color:#f24f42; }
.notice-select-menu button.active:after { content:"\F26A"; font-family:"bootstrap-icons"; font-size:14px; }
.notice-submit-row { align-items:center; background:#f8fafc; border-top:1px solid #e1e8f0; display:flex; gap:10px; justify-content:flex-end; padding:14px 18px; }
.notice-cancel-btn { align-items:center; background:#fff; border:1px solid #d8e1ea; border-radius:10px; color:#64748b; display:inline-flex; font-size:13px; font-weight:900; justify-content:center; min-height:38px; padding:0 16px; }
.notice-submit-btn { align-items:center; background:#f24f42; border:0; border-radius:10px; box-shadow:0 10px 18px rgba(242,79,66,.22); color:#fff; display:inline-flex; font-size:13px; font-weight:900; gap:7px; justify-content:center; min-height:38px; padding:0 18px; }
.notice-submit-btn:hover { background:#df4237; color:#fff; }
.ai-config-page { display:grid; gap:16px; }
.ai-config-group-card { background:#fff; border:1px solid var(--plan-theme-border); border-radius:16px; box-shadow:0 14px 30px rgba(15,23,42,.06); display:grid; gap:8px; padding:16px; }
.ai-config-group-card label { color:#526D86; font-size:12px; font-weight:900; text-transform:uppercase; }
.ai-config-group-card select { border:1px solid #d8e1ea; border-radius:10px; color:#0f172a; font-weight:850; min-height:44px; padding:8px 12px; outline:0; }
.ai-config-form { display:grid; gap:16px; }
.ai-zone-grid { display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.ai-zone-card { background:#fff; border:1px solid var(--plan-theme-border); border-radius:16px; box-shadow:0 14px 30px rgba(15,23,42,.06); padding:16px; }
.ai-zone-card h2 { align-items:center; display:grid; gap:12px; grid-template-columns:132px minmax(0,1fr); margin:0 0 14px; }
.ai-zone-card h2 span { color:var(--plan-theme); font-size:15px; font-weight:900; }
.ai-zone-card h2 input,
.ai-slot-row input,
.ai-weekday-grid select { border:1px solid #d8e1ea; border-radius:9px; color:#102A43; font-weight:800; min-height:40px; padding:8px 10px; outline:0; width:100%; }
.ai-slot-head,
.ai-slot-row { align-items:center; display:grid; gap:10px; grid-template-columns:38px 1fr 1fr; }
.ai-slot-head { color:#526D86; font-size:11px; font-weight:900; margin-bottom:8px; text-transform:uppercase; }
.ai-slot-row { margin-bottom:8px; }
.ai-slot-row b { color:#102A43; font-weight:900; }
.ai-submit-bar { background:#fff; border:1px solid var(--plan-theme-border); border-radius:16px; bottom:12px; box-shadow:0 14px 30px rgba(15,23,42,.08); padding:12px; position:sticky; z-index:5; }
.ai-submit-bar button { align-items:center; background:linear-gradient(135deg,var(--plan-theme),var(--plan-theme-accent)); border:0; border-radius:10px; color:#fff; display:flex; gap:8px; justify-content:center; min-height:46px; width:100%; font-weight:900; }
.ai-weekday-grid { display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.ai-weekday-grid label { display:grid; gap:5px; }
.ai-weekday-grid span { color:#526D86; font-size:12px; font-weight:900; }
.master-form-stack { display:grid; gap:18px; }
.master-form-card,.master-submit-card { background:#fff; border:1px solid #e1e8f0; border-radius:20px; box-shadow:0 14px 34px rgba(15,23,42,.06); padding:24px; }
.master-form-card h2 { align-items:center; color:#0b1728; display:flex; font-size:24px; font-weight:900; gap:14px; justify-content:space-between; margin:0 0 18px; }
.master-form-card h2 span { align-items:center; background:var(--plan-theme-soft); border:1px solid var(--plan-theme-border); border-radius:18px; color:var(--plan-theme); display:inline-flex; height:58px; justify-content:center; width:58px; }
.master-form-card h3 { color:var(--plan-theme); font-size:18px; font-weight:900; margin:18px 0 10px; }
.master-form-card p,.master-help { color:#7a7f87; font-size:15px; margin:8px 0 0; }
.master-label { color:#1e293b; display:block; font-size:15px; font-weight:800; margin:12px 0 8px; }
.master-field { align-items:center; background:#f8fafc; border:1px solid #d8e1ea; border-radius:18px; display:flex; gap:12px; min-height:64px; padding:0 18px; }
.master-field i { color:#7d838b; font-size:22px; }
.master-field input,.master-field select,.master-field textarea,.master-field .form-control { background:transparent; border:0; box-shadow:none; color:#111827; flex:1; font-size:18px; font-weight:700; min-width:0; outline:0; padding:0; width:100%; }
.master-field.textarea { align-items:flex-start; padding-top:18px; }
.master-field textarea { min-height:120px; resize:vertical; }
.master-inline-fields { display:grid; gap:16px; grid-template-columns:1fr 220px; }
.master-segment { background:#f8fafc; border:1px solid #d8e1ea; border-radius:18px; display:grid; grid-template-columns:repeat(2,1fr); overflow:hidden; }
.master-segment label { margin:0; }
.master-segment input { display:none; }
.master-segment span { align-items:center; color:#0b1728; cursor:pointer; display:flex; font-size:18px; font-weight:800; justify-content:center; min-height:64px; }
.master-segment input:checked + span { background:var(--plan-theme); color:#fff; }
.master-shift-picker { background:#f8fafc; border:1px solid #d8e1ea; border-radius:18px; display:grid; gap:12px; grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:16px; padding:18px; }
.master-shift-picker label { margin:0; }
.master-shift-picker input { display:none; }
.master-shift-picker span { align-items:center; background:#fff; border:1px solid #d8e1ea; border-radius:999px; color:#0b1728; cursor:pointer; display:flex; font-weight:800; justify-content:center; min-height:44px; padding:0 14px; }
.master-shift-picker input:checked + span { background:var(--plan-theme); border-color:var(--plan-theme); color:#fff; }
.master-submit-card { align-items:center; display:flex; gap:14px; justify-content:flex-end; }
.master-cancel-btn { align-items:center; background:#f8fafc; border:1px solid #d8e1ea; border-radius:14px; color:#64748b; display:inline-flex; font-weight:800; justify-content:center; min-height:48px; padding:0 22px; }
.master-page:has(.locker-stats) { padding:14px; }
.master-page:has(.locker-stats) .master-web-head { border-radius:14px; margin-bottom:12px; padding:14px 16px; }
.master-page:has(.locker-stats) .master-web-head h1 { font-size:24px; margin:6px 0 3px; }
.master-page:has(.locker-stats) .master-web-head p { font-size:14px; }
.master-page:has(.locker-stats) .master-filter-card { border-radius:14px; gap:10px; grid-template-columns:auto 1fr minmax(220px,340px); margin-bottom:12px; padding:12px 14px; }
.master-page:has(.locker-stats) .master-filter-card strong { font-size:20px; }
.master-page:has(.locker-stats) .master-filter-card span { font-size:13px; }
.locker-stats { display:grid; gap:10px; grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:12px; }
.locker-stats button { align-items:center; background:#fff; border:1px solid #e1e8f0; border-radius:14px; cursor:pointer; display:grid; gap:2px 10px; grid-template-columns:auto 1fr; padding:12px 14px; text-align:left; }
.locker-stats button.active { background:var(--plan-theme-soft); border-color:var(--plan-theme); }
.locker-stats i { align-items:center; background:var(--plan-theme-soft); border-radius:12px; color:var(--plan-theme); display:flex; font-size:18px; grid-row:span 2; height:42px; justify-content:center; width:42px; }
.locker-stats button.active i { background:linear-gradient(135deg,var(--plan-theme),var(--plan-theme-accent)); color:#fff; }
.locker-stats span { color:#64748b; font-size:12px; font-weight:700; }
.locker-stats strong { color:#0b1728; font-size:20px; }
.locker-alias-list { display:grid; gap:14px; overflow:hidden; padding-bottom:72px; }
.locker-alias-group { background:linear-gradient(180deg,var(--plan-theme-soft) 0,#fff 42%); border:1px solid var(--plan-theme-border); border-radius:14px; box-shadow:0 12px 24px rgba(15,23,42,.06); display:grid; gap:10px; overflow:hidden; padding:0 12px 12px; }
.locker-alias-head { align-items:center; background:var(--plan-theme-soft); border:1px solid var(--plan-theme-border); border-radius:14px; color:var(--plan-theme); cursor:pointer; display:flex; justify-content:space-between; min-height:48px; outline:0; padding:0 14px; text-align:left; width:100%; }
.locker-alias-group .locker-alias-head { border-left:0; border-radius:0 0 14px 14px; border-right:0; border-top:0; margin:0 -12px; }
.locker-alias-head div { align-items:center; display:flex; gap:10px; }
.locker-alias-head i { font-size:16px; }
.locker-alias-head .locker-alias-chevron { transition:transform .18s ease; }
.locker-alias-group.collapsed .locker-alias-chevron { transform:rotate(-90deg); }
.locker-alias-head strong { font-size:16px; font-weight:900; letter-spacing:.02em; }
.locker-alias-head span { color:#0b1728; font-size:16px; font-weight:850; }
.locker-alias-group.collapsed .locker-grid { display:none; }
.locker-grid { display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); min-width:0; }
.locker-tile { background:linear-gradient(180deg,#ffffff 0,var(--plan-theme-soft) 100%); border:1px solid var(--plan-theme-border); border-radius:12px; box-shadow:0 10px 18px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.9); min-height:126px; overflow:hidden; padding:8px; position:relative; text-align:center; transform:translateZ(0); }
.locker-tile.allotted { cursor:pointer; }
.locker-tile.allotted:hover { border-color:var(--plan-theme); box-shadow:0 18px 30px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.9); transform:translateY(-2px); }
.locker-tile:before { background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,0)); content:""; height:34px; left:0; pointer-events:none; position:absolute; right:0; top:0; }
.locker-tile.allotted { background:#fff8f0; border-color:#f6dfbd; }
.locker-tile div { align-items:center; display:flex; justify-content:space-between; }
.locker-tile span { background:linear-gradient(135deg,var(--plan-theme),var(--plan-theme-accent)); border-radius:8px; color:#fff; font-size:12px; font-weight:900; padding:5px 7px; }
.locker-tile.allotted span { background:#f59f00; }
.locker-tile nav { align-items:center; display:flex; gap:4px; }
.locker-tile a { align-items:center; border-radius:8px; display:flex; font-size:13px; height:26px; justify-content:center; text-decoration:none; width:26px; }
.locker-tile a.confirm-delete { background:#fff0f0; color:#f04444; }
.locker-tile img { display:block; height:54px; margin:6px auto 3px; object-fit:contain; width:64px; }
.locker-tile strong { color:var(--plan-theme); display:block; font-size:12px; font-weight:850; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.locker-tile.allotted strong { color:#b87503; }
.locker-detail-modal .modal-content { border:1px solid var(--plan-theme-border); border-radius:18px; box-shadow:0 26px 70px rgba(15,23,42,.24); overflow:hidden; }
.locker-detail-modal .modal-header { align-items:center; background:linear-gradient(135deg,#fff,var(--plan-theme-soft)); border-bottom:1px solid var(--plan-theme-border); padding:18px 20px; }
.locker-detail-title { align-items:center; background:var(--plan-theme-soft); border:1px solid var(--plan-theme-border); border-radius:12px; color:var(--plan-theme); display:inline-flex; font-size:18px; font-weight:900; gap:8px; padding:8px 12px; }
.locker-detail-title b { font-weight:900; }
.locker-detail-modal .modal-body { display:grid; gap:12px; padding:18px 20px 20px; }
.locker-detail-row { align-items:start; border-bottom:1px solid #edf2f7; display:grid; gap:12px; grid-template-columns:150px minmax(0,1fr); padding:10px 4px 14px; }
.locker-detail-row span { color:#64748b; font-size:13px; font-weight:800; }
.locker-detail-row strong { color:var(--plan-theme); font-size:15px; font-weight:900; overflow-wrap:anywhere; }
.locker-detail-status { align-self:center; background:#fff7ed; border:1px solid #fed7aa; border-radius:10px; color:#9a3412; font-size:13px; font-weight:900; justify-self:start; padding:7px 12px; }
.locker-form-page { padding:18px; }
.locker-editor-form { display:grid; gap:14px; margin:0; max-width:680px; }
.locker-form-head { max-width:680px; }
.locker-editor-card,
.locker-submit-card { background:#fff; border:1px solid #e1e8f0; border-radius:16px; box-shadow:0 16px 36px rgba(15,23,42,.07); overflow:hidden; }
.locker-editor-title { align-items:center; background:linear-gradient(135deg,#fff,var(--plan-theme-soft)); border-bottom:1px solid var(--plan-theme-border); display:flex; gap:12px; padding:16px 18px; }
.locker-editor-title > span { align-items:center; background:#fff; border:1px solid var(--plan-theme-border); border-radius:12px; color:var(--plan-theme); display:flex; font-size:20px; height:44px; justify-content:center; width:44px; }
.locker-editor-title strong { color:#0b1728; display:block; font-size:18px; font-weight:900; }
.locker-editor-title small { color:#64748b; display:block; font-size:12px; font-weight:700; margin-top:2px; }
.locker-form-grid { display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); padding:18px; }
.locker-field { display:grid; gap:7px; margin:0; }
.locker-field span { color:var(--plan-theme); font-size:11px; font-weight:900; text-transform:uppercase; }
.locker-field div { align-items:center; background:#f8fafc; border:1px solid var(--plan-theme-border); border-radius:12px; display:flex; gap:10px; min-height:46px; padding:0 12px; }
.locker-field:focus-within div { background:#fff; border-color:var(--plan-theme); box-shadow:0 0 0 3px color-mix(in srgb,var(--plan-theme) 12%,transparent); }
.locker-field i { color:var(--plan-theme); font-size:18px; }
.locker-field input { background:transparent; border:0; box-shadow:none; color:#0f172a; flex:1; font-size:14px; font-weight:800; min-width:0; outline:0; padding:0; text-transform:uppercase; width:100%; }
.locker-field input[type="number"] { text-transform:none; }
.locker-field .invalid-feedback { color:#dc3545; font-size:12px; font-weight:800; margin:0; }
.locker-editor-form.was-validated .locker-field:has(input:invalid) div { background:#fff7f7; border-color:#f1aeb5; }
.locker-submit-card { align-items:center; display:flex; gap:10px; justify-content:flex-end; padding:14px 18px; }
.master-floating-add { align-items:center; background:#2d9add; border-radius:999px; bottom:28px; box-shadow:0 14px 24px rgba(45,154,221,.3); color:#fff; display:inline-flex; font-size:28px; height:72px; justify-content:center; position:fixed; right:42px; text-decoration:none; width:72px; z-index:8; }
.enrollment-info { align-items:flex-start; background:#eaf6ff; border-radius:16px; color:#1f2937; display:flex; gap:12px; margin-bottom:22px; padding:18px; }
.enrollment-info i { color:#2d9add; font-size:24px; }
.enrollment-info p { color:#1f2937; font-size:17px; line-height:1.45; margin:0; }

.gym-welcome-panel {
    min-height: 112px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 30px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255,255,255,.84), rgba(239,248,255,.92));
    border: 1px solid #dbeafe;
    box-shadow: 0 14px 30px rgba(30,64,175,.08);
}
.ai-pill,
.section-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 24px;
    padding: 3px 12px;
    border-radius: 999px;
    color: #3b82f6;
    background: #eef6ff;
    border: 1px solid #bfdbfe;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
}
.gym-welcome-panel h2 {
    margin: 10px 0 10px;
    color: #374151;
    font-size: 21px;
    font-weight: 500;
}
.gym-welcome-panel p { margin: 0; color: #7184a3; font-size: 13px; }
.gym-select-chip {
    padding: 8px 14px;
    border-radius: 10px;
    color: #fff;
    background: #1f4a78;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(31,74,120,.18);
}
.analytics-panel {
    margin-top: 8px;
    padding: 16px 16px 18px;
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(236,246,255,.95)),
        #fff;
    border: 1px solid rgba(191,219,254,.9);
    box-shadow: 0 24px 55px rgba(30,64,175,.11), inset 0 1px 0 rgba(255,255,255,.95);
}
.analytics-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #172033;
    font-size: 13px;
    padding: 0 2px 10px;
}
.analytics-head strong {
    font-size: 13px;
    letter-spacing: .04em;
}
.analytics-head div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.analytics-head button {
    height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid #bfd7ff;
    background: linear-gradient(180deg, #fff, #eaf4ff);
    color: #1d4ed8;
    font-weight: 700;
    box-shadow: 0 6px 14px rgba(37,99,235,.13);
}
.overview-tile-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(128px, 1fr));
    gap: 12px;
    margin: 2px 0 14px;
}
.overview-mini-card {
    position: relative;
    overflow: hidden;
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 15px;
    background: #fff;
    border: 1px solid #dbeafe;
    box-shadow: 0 12px 26px rgba(30,64,175,.08), inset 0 1px 0 #fff;
}
.overview-mini-card:after {
    content: "";
    position: absolute;
    right: -18px;
    top: -22px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: currentColor;
    opacity: .08;
}
.overview-mini-card i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: currentColor;
    box-shadow: 0 10px 18px rgba(15,23,42,.14);
}
.overview-mini-card div { min-width: 0; }
.overview-mini-card strong {
    display: block;
    color: #172033;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 850;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.overview-mini-card span {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.overview-mini-card.primary { color: #3b82f6; }
.overview-mini-card.success { color: #10b981; }
.overview-mini-card.warning { color: #f59e0b; }
.overview-mini-card.danger { color: #ef4444; }
.overview-mini-card.info { color: #06b6d4; }
.overview-mini-card.dark { color: #475569; }
.analytics-grid {
    min-height: 382px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 18px;
    padding: 0;
}
.chart-frame {
    position: relative;
    min-height: 0;
    overflow: hidden;
    padding: 16px 18px 18px;
    border-radius: 16px;
    background:
        radial-gradient(circle at 12% 14%, rgba(59,130,246,.13), transparent 30%),
        linear-gradient(145deg, #ffffff, #f3f8ff);
    border: 1px solid #dbeafe;
    box-shadow: inset 0 1px 0 #fff, 0 16px 32px rgba(15,23,42,.07);
}
.chart-frame:before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 14px;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(59,130,246,.08), rgba(20,184,166,.08), rgba(251,113,133,.08));
}
.chart-frame canvas {
    position: relative;
    z-index: 1;
}
.chart-frame-large canvas { height: 300px !important; }
.chart-title {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.chart-title strong {
    display: block;
    color: #172033;
    font-size: 15px;
    font-weight: 850;
}
.chart-title span {
    display: block;
    margin-top: 3px;
    color: #7184a3;
    font-size: 12px;
    font-weight: 600;
}
.pie-frame {
    padding: 16px 18px;
    display: grid;
    grid-template-rows: auto minmax(190px, 1fr) auto;
}
.pie-frame canvas {
    align-self: stretch;
    max-height: 245px;
}
.finance-snapshot {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 10px;
}
.finance-snapshot div {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 11px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(191,219,254,.8);
}
.finance-snapshot span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}
.finance-snapshot strong {
    color: #172033;
    font-size: 14px;
    font-weight: 850;
    white-space: nowrap;
}
.dashboard-insights-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
    margin-top: 18px;
}
.dashboard-insights-panel {
    position: relative;
    overflow: hidden;
    padding: 16px 18px 18px;
    border-radius: 16px;
    background:
        radial-gradient(circle at 8% 0, rgba(20,184,166,.12), transparent 26%),
        linear-gradient(145deg, #ffffff, #f7fbff);
    border: 1px solid #dbeafe;
    box-shadow: inset 0 1px 0 #fff, 0 16px 32px rgba(15,23,42,.07);
}
.dashboard-insights-panel:before {
    content: "";
    position: absolute;
    right: -28px;
    top: -36px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 18px solid rgba(59,130,246,.08);
}
.dashboard-insight-list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}
.dashboard-insight-graph-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 12px;
}
.dashboard-mini-graph {
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 276px;
    display: grid;
    grid-template-rows: auto minmax(170px, 1fr);
    gap: 12px;
    padding: 16px;
    border-radius: 16px;
    color: #172033;
    background:
        radial-gradient(circle at 100% 0, rgba(255,255,255,.62), transparent 30%),
        linear-gradient(145deg, #ffffff, #f5f9ff);
    border: 1px solid rgba(191,219,254,.95);
    box-shadow:
        0 18px 0 rgba(30,64,175,.045),
        0 22px 42px rgba(30,64,175,.11),
        inset 0 1px 0 #fff;
}
.dashboard-mini-graph:before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: currentColor;
}
.dashboard-mini-graph:after {
    content: "";
    position: absolute;
    right: -34px;
    top: -42px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: currentColor;
    opacity: .08;
}
.dashboard-mini-graph > div {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
}
.dashboard-mini-graph > div > i {
    grid-row: span 3;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: currentColor;
    box-shadow: 0 12px 20px rgba(15,23,42,.14);
}
.dashboard-mini-graph span {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.dashboard-mini-graph strong {
    display: block;
    margin-top: 2px;
    color: #172033;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 850;
}
.dashboard-mini-graph small {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 700;
}
.dashboard-mini-graph canvas {
    position: relative;
    z-index: 1;
    width: min(100%, 260px) !important;
    height: 178px !important;
    justify-self: center;
}
.dashboard-mini-graph.collection-graph canvas {
    width: min(100%, 300px) !important;
}
.dashboard-mini-graph.member-graph { color: #10b981; }
.dashboard-mini-graph.collection-graph { color: #f59e0b; }
.dashboard-mini-graph.attendance-graph { color: #8b5cf6; }
.dashboard-insight-card {
    min-height: 118px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    padding: 13px;
    border-radius: 14px;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(191,219,254,.86);
    box-shadow: 0 12px 24px rgba(30,64,175,.06), inset 0 1px 0 #fff;
}
.dashboard-insight-card > i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: currentColor;
    box-shadow: 0 10px 18px rgba(15,23,42,.12);
}
.dashboard-insight-card div { min-width: 0; }
.dashboard-insight-card span {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.dashboard-insight-card strong {
    display: block;
    margin: 3px 0 5px;
    color: #172033;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 850;
}
.dashboard-insight-card p {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 600;
}
.dashboard-insight-card.success { color: #10b981; }
.dashboard-insight-card.warning { color: #f59e0b; }
.dashboard-insight-card.danger { color: #ef4444; }
.dashboard-insight-card.info { color: #06b6d4; }
.dashboard-insight-chart {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto minmax(260px, 1fr);
}
.dashboard-insight-chart canvas {
    position: relative;
    z-index: 1;
    height: 280px !important;
}
.section-chip { margin: 10px 0 8px; letter-spacing: .04em; }
.section-chip i { font-size: 7px; }
.gym-report-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: 18px;
    perspective: 1200px;
}
.gym-report-card {
    position: relative;
    overflow: hidden;
    min-height: 112px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 16px;
    border-radius: 16px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.28);
    box-shadow:
        0 18px 0 rgba(15,23,42,.08),
        0 22px 38px rgba(15,23,42,.18),
        inset 0 1px 0 rgba(255,255,255,.35),
        inset 0 -18px 24px rgba(0,0,0,.08);
    transform-style: preserve-3d;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.gym-report-card:before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, rgba(255,255,255,.28), transparent 34%),
        radial-gradient(circle at 92% 12%, rgba(255,255,255,.26), transparent 22%);
    pointer-events: none;
}
.gym-report-card:after {
    content: "";
    position: absolute;
    right: -24px;
    bottom: -34px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 18px solid rgba(255,255,255,.14);
    pointer-events: none;
}
.gym-report-card:hover {
    color: #fff;
    transform: translateY(-5px) rotateX(3deg) rotateY(-2deg);
    filter: saturate(1.05);
    box-shadow:
        0 23px 0 rgba(15,23,42,.07),
        0 30px 48px rgba(15,23,42,.22),
        inset 0 1px 0 rgba(255,255,255,.42),
        inset 0 -18px 24px rgba(0,0,0,.08);
}
.gym-report-card img {
    position: relative;
    z-index: 1;
    width: 52px;
    height: 52px;
    object-fit: contain;
    padding: 7px;
    border-radius: 14px;
    background: rgba(255,255,255,.26);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 18px rgba(0,0,0,.12);
}
.gym-report-card div { position: relative; z-index: 1; }
.gym-report-card em {
    display: block;
    margin-bottom: 4px;
    color: rgba(255,255,255,.92);
    font-size: 13px;
    font-style: normal;
    font-weight: 900;
}
.gym-report-card strong {
    display: block;
    font-size: 26px;
    line-height: 1.1;
    font-weight: 800;
    text-align: left;
    text-shadow: 0 2px 10px rgba(0,0,0,.14);
}
.gym-report-card span {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.92);
    font-size: 12px;
    font-weight: 800;
    text-align: left;
}
.blue-purple { background: linear-gradient(135deg, #70a7ff 0%, #5b5cf6 62%, #4f46e5 100%); }
.green-cyan { background: linear-gradient(135deg, #56e3b7 0%, #16c7a6 54%, #04a698 100%); }
.teal { background: linear-gradient(135deg, #22d3c4 0%, #06b6d4 58%, #0891b2 100%); }
.gold { background: linear-gradient(135deg, #ffe59d 0%, #ffc65f 58%, #f59e0b 100%); color: #7c4a03; }
.gold:hover { color: #7c4a03; }
.gold span { color: #8a5b11; }
.sky { background: linear-gradient(135deg, #9aecf2 0%, #64c8fb 56%, #38a5ee 100%); color: #075985; }
.sky:hover { color: #075985; }
.sky span { color: #075985; }
.pink { background: linear-gradient(135deg, #fb6ab0 0%, #ec4899 57%, #d9468f 100%); }
.peach { background: linear-gradient(135deg, #ffe1c7 0%, #ffb99f 60%, #fb8d72 100%); color: #8f2f10; }
.peach:hover { color: #8f2f10; }
.peach span { color: #8f2f10; }
.coral { background: linear-gradient(135deg, #ffad96 0%, #f9735a 58%, #e85d44 100%); }
.orange { background: linear-gradient(135deg, #ffc86e 0%, #fb923c 58%, #ea7a1e 100%); }
.red { background: linear-gradient(135deg, #ff6b6f 0%, #ef4444 58%, #dc2626 100%); }
.slate { background: linear-gradient(135deg, #d6dee9 0%, #aebccc 60%, #94a3b8 100%); color: #1f2937; }
.slate:hover { color: #1f2937; }
.slate span { color: #334155; }
.rose { background: linear-gradient(135deg, #fb7f93 0%, #f35f7a 58%, #e94c69 100%); }

.mobile-inspired-page {
    --mobile-primary: #f24f42;
    margin: -16px;
    min-height: calc(100vh - 54px);
    background: #f4f6fa;
    color: #202124;
    font-family: var(--font-main);
}
.mobile-page-appbar {
    position: sticky;
    top: 0;
    z-index: 15;
    min-height: 82px;
    display: grid;
    grid-template-columns: 46px 1fr;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    color: #fff;
    background: var(--mobile-primary);
    box-shadow: 0 7px 18px rgba(15, 23, 42, .18);
}
.mobile-page-appbar a {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 30px;
}
.mobile-page-appbar h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(30px, 4vw, 42px);
    font-weight: 500;
    letter-spacing: 0;
}
.refer-layout {
    width: min(1120px, calc(100% - 32px));
    margin: 18px auto 0;
    display: grid;
    grid-template-columns: minmax(320px, .82fr) minmax(420px, 1.18fr);
    gap: 22px;
    align-items: start;
}
.refer-balance-card,
.refer-program-card {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
}
.refer-balance-card {
    padding: 34px 28px;
    text-align: center;
}
.refer-balance-card h2 {
    margin: 0 0 20px;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 500;
}
.refer-balance-card p {
    margin: 14px auto 0;
    max-width: 620px;
    color: #737373;
    font-size: 19px;
    line-height: 1.55;
}
.refer-balance-card .refer-points {
    color: #5f6368;
    font-size: 18px;
}
.refer-points strong {
    color: #202124;
    font-size: 24px;
    font-weight: 800;
}
.refer-points button {
    border: 0;
    background: transparent;
    color: var(--mobile-primary);
    font-size: 20px;
    vertical-align: middle;
}
.refer-program-card {
    padding: 34px 32px 30px;
    text-align: center;
}
.refer-illustration {
    display: block;
    width: min(520px, 100%);
    height: 300px;
    object-fit: contain;
    margin: 0 auto 22px;
}
.refer-program-card p {
    margin: 0 auto;
    max-width: 720px;
    color: #111827;
    font-size: 22px;
    line-height: 1.5;
}
.refer-earn-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 58px;
    margin: 28px auto 22px;
    padding: 13px 32px;
    border: 0;
    border-radius: 7px;
    color: #fff;
    background: var(--mobile-primary);
    font-size: 25px;
    font-weight: 700;
    box-shadow: 0 5px 12px rgba(242, 79, 66, .28);
}
.refer-code-box {
    width: min(560px, 100%);
    min-height: 86px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 140px;
    align-items: stretch;
    border: 2px solid #cfe9f6;
    border-radius: 16px;
    overflow: hidden;
    text-align: center;
}
.refer-code-box div {
    display: grid;
    place-items: center;
    align-content: center;
    padding: 10px;
}
.refer-code-box span {
    color: #2d2f33;
    font-size: 21px;
}
.refer-code-box strong {
    color: var(--mobile-primary);
    font-size: 23px;
    font-weight: 500;
}
.refer-code-box button {
    border: 0;
    color: #fff;
    background: var(--mobile-primary);
    font-size: 29px;
    font-weight: 800;
}
.support-modal {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .24);
}
.earn-rule-list,
.coin-history-list {
    display: grid;
    gap: 12px;
}
.earn-rule {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 82px;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #eef0f4;
    border-radius: 10px;
    background: #fff;
}
.earn-rule img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}
.earn-rule span {
    font-weight: 600;
}
.earn-rule b {
    display: grid;
    gap: 3px;
    justify-items: center;
    padding: 8px 14px;
    border-radius: 7px;
    color: #fff;
    background: var(--mobile-primary);
    line-height: 1.1;
}
.earn-rule small {
    font-size: 11px;
    font-weight: 500;
}
.earn-note,
.empty-state-text {
    margin: 14px 0 0;
    color: #6b7280;
    font-size: 13px;
}
.coin-history-list div {
    display: grid;
    grid-template-columns: 32px 1fr;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}
.coin-history-list img {
    width: 26px;
    height: 26px;
}
.help-appbar {
    min-height: 144px;
    grid-template-columns: 46px 1fr;
    grid-template-rows: auto auto;
}
.help-lang-tabs {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: 74px;
    padding: 7px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 19px;
    background: rgba(255, 255, 255, .12);
}
.help-lang-tabs button {
    border: 0;
    border-radius: 15px;
    color: #fff;
    background: transparent;
    font-size: 22px;
    font-weight: 600;
}
.help-lang-tabs button.active {
    color: var(--mobile-primary);
    background: #fff;
}
.help-faq-list {
    width: min(1040px, calc(100% - 32px));
    margin: 14px auto 0;
    display: grid;
    gap: 16px;
    padding-bottom: 28px;
}
.help-faq-card,
.help-thanks-card {
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
    overflow: hidden;
}
.help-faq-card > button {
    width: 100%;
    min-height: 82px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 18px;
    border: 0;
    padding: 14px 22px;
    background: #fff;
    text-align: left;
}
.help-faq-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: var(--mobile-primary);
    background: rgba(242, 79, 66, .10);
    font-size: 22px;
}
.help-faq-card strong {
    font-size: 21px;
    font-weight: 600;
    line-height: 1.35;
}
.help-faq-card button > .bi-chevron-down {
    color: #6d7178;
    font-size: 24px;
    transition: transform .18s ease;
}
.help-faq-card button[aria-expanded="true"] > .bi-chevron-down {
    transform: rotate(180deg);
}
.help-faq-body {
    margin: 0 22px 18px 98px;
    padding: 14px;
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: 14px;
    background: #f6f7fb;
}
.help-faq-body p {
    margin: 0;
    color: #4b5563;
    font-weight: 600;
    line-height: 1.55;
}
.help-faq-body a,
.help-thanks-card a {
    width: 100%;
    min-height: 48px;
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid rgba(242, 79, 66, .22);
    border-radius: 14px;
    color: var(--mobile-primary);
    background: rgba(242, 79, 66, .10);
    font-weight: 700;
}
.help-thanks-card {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 26px 36px;
    text-align: center;
}
.help-thanks-card > span {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--mobile-primary);
    background: rgba(242, 79, 66, .10);
    font-size: 24px;
}
.help-thanks-card strong {
    font-size: 22px;
}
.help-thanks-card p {
    margin: 0;
    color: #74777f;
    font-size: 18px;
}
.help-web-page.lang-hi,
.help-web-page.lang-hi button,
.help-web-page.lang-hi a {
    font-family: "Noto Sans Devanagari", var(--font-main);
}

.support-web-page {
    --support-primary: var(--primary);
    width: min(1180px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 18px;
}
.support-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}
.support-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    color: var(--support-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.support-page-head h1 {
    margin: 0;
    color: #111827;
    font-size: 30px;
    font-weight: 800;
}
.support-page-head p {
    max-width: 700px;
    margin: 6px 0 0;
    color: #6b7280;
    font-size: 15px;
    line-height: 1.55;
}
.support-head-action {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 16px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: var(--support-primary);
    font-weight: 800;
    white-space: nowrap;
}
.support-web-page .refer-layout {
    width: 100%;
    margin: 0;
    grid-template-columns: minmax(280px, .82fr) minmax(440px, 1.18fr);
}
.support-web-page .refer-balance-card,
.support-web-page .refer-program-card {
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}
.support-web-page .refer-balance-card {
    text-align: left;
    padding: 24px;
}
.support-web-page .refer-balance-card h2 {
    margin-bottom: 14px;
    font-size: 24px;
    font-weight: 700;
}
.support-web-page .refer-balance-card p {
    margin-left: 0;
    margin-right: 0;
    font-size: 15px;
}
.support-web-page .refer-points strong {
    font-size: 22px;
}
.support-web-page .refer-points button {
    color: var(--support-primary);
}
.support-web-page .refer-program-card {
    padding: 24px;
}
.support-web-page .refer-illustration {
    height: 230px;
    margin-bottom: 16px;
}
.support-web-page .refer-program-card p {
    font-size: 17px;
    line-height: 1.6;
}
.support-web-page .refer-code-box {
    margin-top: 22px;
    grid-template-columns: 1fr 120px;
    min-height: 74px;
}
.support-web-page .refer-code-box span {
    font-size: 15px;
}
.support-web-page .refer-code-box strong {
    color: var(--support-primary);
    font-size: 20px;
}
.support-web-page .refer-code-box button {
    background: var(--support-primary);
    font-size: 22px;
}
.help-page-head {
    align-items: flex-end;
}
.support-web-page .help-lang-tabs {
    min-width: 330px;
    min-height: 48px;
    padding: 4px;
    border-color: #dbe3ec;
    border-radius: 10px;
    background: #f7f9fc;
}
.support-web-page .help-lang-tabs button {
    border-radius: 8px;
    color: #6b7280;
    font-size: 14px;
}
.support-web-page .help-lang-tabs button.active {
    color: #fff;
    background: var(--support-primary);
}
.support-web-page .help-faq-list {
    width: 100%;
    margin: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}
.support-web-page .help-faq-card,
.support-web-page .help-thanks-card {
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
}
.support-web-page .help-faq-card > button {
    min-height: 78px;
    grid-template-columns: 46px minmax(0, 1fr) 24px;
    gap: 14px;
    padding: 14px 16px;
}
.support-web-page .help-faq-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: var(--support-primary);
    background: rgba(23, 107, 135, .10);
    font-size: 18px;
}
.support-web-page .help-faq-card strong {
    font-size: 16px;
}
.support-web-page .help-faq-body {
    margin: 0 16px 16px 76px;
}
.support-web-page .help-faq-body a,
.support-web-page .help-thanks-card a {
    border-color: rgba(23, 107, 135, .2);
    color: var(--support-primary);
    background: rgba(23, 107, 135, .08);
}
.support-web-page .help-thanks-card {
    min-height: 100%;
    align-content: center;
}
.support-web-page .help-thanks-card > span {
    color: var(--support-primary);
    background: rgba(23, 107, 135, .10);
}

.ops-page {
    width: min(1180px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 18px;
}
.ops-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}
.ops-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.ops-page-head h1 {
    margin: 0;
    color: #111827;
    font-size: 30px;
    font-weight: 800;
}
.ops-page-head p {
    max-width: 720px;
    margin: 6px 0 0;
    color: #6b7280;
    font-size: 15px;
    line-height: 1.55;
}
.ops-primary-btn,
.ops-secondary-btn,
.ops-toolbar button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 16px;
    border: 0;
    border-radius: 8px;
    font-weight: 800;
    white-space: nowrap;
}
.ops-primary-btn,
.ops-toolbar button {
    color: #fff;
    background: var(--primary);
}
.ops-primary-btn:hover { color: #fff; background: var(--primary-dark); }
.ops-secondary-btn {
    color: var(--primary);
    background: rgba(23, 107, 135, .09);
}
.ops-secondary-btn:hover { color: var(--primary-dark); background: rgba(23, 107, 135, .14); }
.ops-toolbar {
    display: grid;
    grid-template-columns: 180px 180px minmax(170px, 1fr) minmax(150px, 180px) minmax(150px, 180px) auto;
    align-items: end;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
}
.ops-stat-card {
    min-height: 72px;
    display: grid;
    align-content: center;
    gap: 5px;
    padding: 14px 16px;
    border-radius: 10px;
    color: #fff;
    background: #f24f42;
}
.ops-stat-card.amount { background: #176b87; }
.ops-stat-card span,
.ops-toolbar label span,
.ops-field span {
    color: #6b7280;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.ops-stat-card span { color: rgba(255,255,255,.82); }
.ops-stat-card strong { font-size: 20px; }
.ops-toolbar label,
.ops-field {
    display: grid;
    gap: 7px;
}
.ops-toolbar select,
.ops-toolbar input,
.ops-field input,
.ops-field select {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid #d5dbe5;
    border-radius: 8px;
    color: #111827;
    background: #fff;
    font-size: 15px;
    outline: 0;
}
.ops-toolbar select:focus,
.ops-toolbar input:focus,
.ops-field input:focus,
.ops-field select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(23, 107, 135, .12);
}
.expense-card-list {
    display: grid;
    gap: 12px;
}
.expense-record-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
}
.expense-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #111827;
    background: #e9f5ff;
    font-size: 28px;
}
.expense-main h2 {
    margin: 0 0 4px;
    color: #111827;
    font-size: 20px;
    font-weight: 700;
}
.expense-main strong {
    display: block;
    color: #ef4444;
    font-size: 20px;
    font-weight: 800;
}
.expense-main span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: #8a9099;
    font-size: 14px;
}
.expense-actions {
    min-width: 190px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}
.expense-actions button,
.expense-actions a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    color: #ef4444;
    background: #f7f7f7;
}
.pay-mode-pill,
.expense-item-row em {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 4px 12px;
    border-radius: 999px;
    color: #1667a7;
    background: #e5f4ff;
    font-style: normal;
    font-weight: 800;
}
.pay-mode-pill.cash,
.expense-item-row em.cash {
    color: #047857;
    background: #e8f8ef;
}
.ops-modal { border: 0; border-radius: 18px; }
.ops-modal .modal-header {
    align-items: center;
    gap: 12px;
    color: #ef4444;
}
.ops-modal .modal-header strong {
    margin-left: auto;
    color: #ef4444;
    font-size: 18px;
}
.expense-item-list {
    display: grid;
    gap: 12px;
}
.expense-item-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid #eef0f4;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(15, 23, 42, .04);
}
.expense-item-row div:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}
.expense-item-row div:last-child {
    display: grid;
    justify-items: end;
    gap: 6px;
}
.expense-item-row span { color: #6b7280; }
.expense-item-row strong { font-size: 18px; }
.expense-item-row small {
    flex-basis: 100%;
    color: #6b7280;
    font-size: 13px;
}
.expense-item-row b {
    color: #ef4444;
    font-size: 19px;
}
.ops-empty {
    min-height: 260px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    padding: 30px;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #fff;
    text-align: center;
}
.ops-empty i {
    color: var(--primary);
    font-size: 38px;
}
.ops-empty strong {
    font-size: 20px;
}
.ops-empty span {
    color: #6b7280;
}
.ops-form-card {
    display: grid;
    gap: 18px;
    padding: 22px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
}
.ops-field.wide {
    max-width: 620px;
}
.ops-field span small {
    margin-left: 4px;
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}
.expense-form-rows {
    display: grid;
    gap: 14px;
}
.expense-form-row {
    display: grid;
    grid-template-columns: 70px repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: 14px;
    padding: 14px;
    border: 1px solid #e5eaf1;
    border-radius: 12px;
    background: #fbfcfe;
}
.expense-row-head {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.expense-row-head strong {
    color: #6b7280;
    font-size: 18px;
}
.expense-remove-row {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    color: #ef4444;
    background: rgba(239, 68, 68, .08);
}
.ops-link-action {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 0;
    color: #ef4444;
    background: transparent;
    font-size: 17px;
    font-weight: 700;
}
.ops-submit-row {
    display: flex;
    justify-content: center;
}
.ops-submit-row .ops-primary-btn {
    min-width: 240px;
}
.attendance-workspace {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(260px, .65fr);
    gap: 16px;
    align-items: start;
    padding: 18px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
}
.attendance-workspace.report-filter {
    grid-template-columns: minmax(360px, 1fr) minmax(260px, .65fr) minmax(280px, 1fr) auto;
    align-items: end;
}
.ops-segment {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.ops-segment.wide {
    min-width: 0;
}
.ops-segment label {
    margin: 0;
}
.ops-segment input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.ops-segment span {
    min-height: 54px;
    display: grid;
    place-items: center;
    border: 1px solid #e2574c;
    border-radius: 10px;
    color: #111827;
    background: #fff;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
}
.ops-segment input:checked + span {
    color: #fff;
    background: #f24f42;
    border-color: #f24f42;
}
.ops-segment.is-hidden {
    display: none;
}
.attendance-form {
    max-width: 760px;
}
.attendance-log-list {
    display: grid;
    gap: 12px;
}
.attendance-log-card {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 12px;
    align-items: center;
    padding: 16px;
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
}
.attendance-log-card div {
    display: grid;
    gap: 4px;
}
.attendance-log-card span {
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}
.attendance-log-card strong {
    color: #111827;
    font-size: 16px;
}
.attendance-log-card em {
    justify-self: end;
    padding: 6px 12px;
    border-radius: 999px;
    color: #047857;
    background: #e8f8ef;
    font-style: normal;
    font-weight: 800;
}

/* Refined web operations UI */
.ops-page {
    width: min(1280px, 100%);
    gap: 16px;
}
.ops-page-head {
    position: relative;
    overflow: hidden;
    min-height: 126px;
    padding: 24px 26px;
    border-radius: 10px;
    border-color: #e6ebf2;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .07);
}
.ops-page-head:before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), #2a9d8f, #f24f42);
}
.ops-page-head h1 {
    font-size: 28px;
    letter-spacing: 0;
}
.ops-page-head p {
    color: #64748b;
}
.ops-primary-btn,
.ops-secondary-btn,
.ops-toolbar button {
    border-radius: 7px;
    box-shadow: 0 10px 20px rgba(23, 107, 135, .14);
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.ops-primary-btn:hover,
.ops-secondary-btn:hover,
.ops-toolbar button:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(23, 107, 135, .18);
}
.ops-toolbar {
    grid-template-columns: 170px 170px minmax(260px, 1fr) minmax(138px, 160px) minmax(138px, 160px) 150px;
    padding: 16px;
    border-radius: 10px;
    border-color: #e6ebf2;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .055);
}
.ops-stat-card {
    min-height: 66px;
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.ops-stat-card strong {
    font-size: 18px;
    line-height: 1.15;
}
.ops-toolbar select,
.ops-toolbar input,
.ops-field input,
.ops-field select {
    min-height: 44px;
    border-color: #cfd8e6;
    border-radius: 7px;
    background: #fff;
}
.expense-table-shell {
    overflow: hidden;
    border: 1px solid #e6ebf2;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}
.expense-table-head {
    display: grid;
    grid-template-columns: minmax(260px, 1.4fr) minmax(110px, .6fr) minmax(150px, .7fr) minmax(120px, .55fr) 148px;
    gap: 16px;
    padding: 12px 18px;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid #e6ebf2;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.expense-card-list {
    gap: 0;
}
.expense-record-card {
    grid-template-columns: 48px minmax(220px, 1.4fr) minmax(110px, .6fr) minmax(150px, .7fr) minmax(120px, .55fr) 148px;
    min-height: 82px;
    gap: 16px;
    padding: 14px 18px;
    border: 0;
    border-bottom: 1px solid #eef2f7;
    border-radius: 0;
    box-shadow: none;
    transition: background .16s ease;
}
.expense-record-card:last-child {
    border-bottom: 0;
}
.expense-record-card:hover {
    background: #fbfdff;
}
.expense-icon {
    width: 42px;
    height: 42px;
    border-radius: 9px;
    color: var(--primary);
    background: #eaf6fb;
    font-size: 21px;
}
.expense-main h2 {
    margin: 0;
    font-size: 17px;
    line-height: 1.25;
}
.expense-amount {
    color: #ef4444;
    font-size: 18px;
    font-weight: 800;
}
.expense-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-size: 13px;
}
.expense-mode-cell {
    display: flex;
    align-items: center;
}
.expense-actions {
    min-width: 0;
    justify-content: flex-end;
    flex-wrap: nowrap;
}
.expense-actions button,
.expense-actions a {
    width: 34px;
    height: 34px;
    border: 1px solid #eef2f7;
    background: #fff;
}
.expense-actions button:hover,
.expense-actions a:hover {
    color: #fff;
    background: #ef4444;
    border-color: #ef4444;
}
.pay-mode-pill {
    min-height: 28px;
    padding: 4px 11px;
    font-size: 13px;
}
.pay-mode-pill.muted {
    color: #64748b;
    background: #f1f5f9;
}
.ops-form-card {
    border-radius: 12px;
    border-color: #e6ebf2;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}
.ops-form-intro {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid #e6ebf2;
    border-radius: 10px;
    background: #f8fafc;
}
.ops-form-intro > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--primary);
    background: #eaf6fb;
    font-size: 20px;
}
.ops-form-intro strong {
    display: block;
    color: #111827;
    font-size: 16px;
}
.ops-form-intro small {
    color: #64748b;
}
.expense-form-row {
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .04);
}
.attendance-workspace {
    border-radius: 12px;
    border-color: #e6ebf2;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}
.attendance-mode-panel {
    background: linear-gradient(180deg, #fff, #fbfdff);
}
.ops-segment span {
    min-height: 48px;
    border-color: #d8e1ec;
    border-radius: 8px;
    font-size: 15px;
    box-shadow: none;
}
.ops-segment input:checked + span {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 10px 18px rgba(23, 107, 135, .16);
}
.attendance-form {
    max-width: 820px;
}
.attendance-log-card {
    border-radius: 10px;
    border-color: #e6ebf2;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .055);
}

.library-page { width: 100%; margin: 0; display: grid; gap: 18px; }
.library-page-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px; border: 1px solid rgba(15, 23, 42, .08); border-radius: 14px; background: linear-gradient(135deg, rgba(23,107,135,.07), transparent 44%), #fff; box-shadow: 0 12px 28px rgba(15, 23, 42, .06); }
.library-page-head h1 { margin: 0; color: #0f172a; font-size: 30px; font-weight: 800; }
.library-page-head p { max-width: 760px; margin: 6px 0 0; color: #667085; line-height: 1.55; }
.library-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.library-summary-card { min-height: 94px; display: grid; align-content: center; gap: 6px; padding: 18px 20px; border: 1px solid #e4ebf3; border-radius: 12px; background: #fff; box-shadow: 0 8px 22px rgba(15, 23, 42, .05); }
.library-summary-card.primary { color: #fff; border-color: transparent; background: #f24f42; }
.library-summary-card span { color: #667085; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.library-summary-card.primary span { color: rgba(255,255,255,.82); }
.library-summary-card strong { color: #0f172a; font-size: 28px; font-weight: 800; }
.library-summary-card.primary strong { color: #fff; }
.library-list-shell { display: grid; gap: 12px; }
.library-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) minmax(180px, 230px) auto; align-items: center; gap: 18px; padding: 18px; border: 1px solid #e7edf5; border-radius: 12px; background: #fff; box-shadow: 0 8px 22px rgba(15, 23, 42, .05); }
.library-row.selected { border-color: #f24f42; box-shadow: 0 12px 28px rgba(242, 79, 66, .12); }
.library-select-dot { width: 32px; height: 32px; display: grid; place-items: center; color: #7b8794; }
.library-row.selected .library-select-dot { color: #f24f42; }
.library-row-main { min-width: 0; display: grid; gap: 6px; }
.library-row-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.library-row-title strong { color: #111827; font-size: 17px; font-weight: 800; }
.library-row-title strong span { color: #4b5563; font-weight: 700; }
.library-row-title em { padding: 4px 9px; border-radius: 999px; color: #0b7166; background: #dff7f2; font-size: 12px; font-style: normal; font-weight: 800; }
.library-row-main p { margin: 0; color: #7b8794; font-size: 13px; }
.library-meta-line { display: flex; flex-wrap: wrap; gap: 10px 16px; color: #667085; font-size: 12px; }
.library-meta-line span { display: inline-flex; align-items: center; gap: 6px; }
.library-row-plan { min-height: 54px; display: grid; align-content: center; gap: 3px; padding: 10px 14px; border-radius: 10px; color: #fff; background: #079b8c; }
.library-row-plan span { color: rgba(255,255,255,.86); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.library-row-plan strong { color: #fff; font-size: 13px; font-weight: 800; }
.library-row-actions { display: flex; align-items: center; gap: 9px; }
.inline-action-form { margin: 0; }
.inline-action-form button { border: 0; }
.icon-soft-btn { width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 10px; background: #f6f8fb; font-size: 16px; }
.icon-soft-btn.success { color: #2ba84a; background: #eef9f0; }
.icon-soft-btn.danger { color: #ef4444; background: #fff0f0; }
.icon-soft-btn:hover { filter: brightness(.97); }
.library-form-shell { display: grid; gap: 18px; }
.library-form-card, .library-settings-card, .library-terms-note { border: 1px solid #e2eaf4; border-radius: 14px; background: #fff; box-shadow: 0 8px 22px rgba(15, 23, 42, .05); }
.logo-card { display: flex; align-items: center; gap: 18px; padding: 18px; }
.library-logo-preview { position: relative; width: 96px; height: 96px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #dbe6f2; border-radius: 14px; color: #176b87; background: #eef7fb; font-size: 36px; overflow: hidden; }
.library-logo-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; padding: 8px; }
.library-logo-preview i { display: none; }
.logo-card h2, .library-settings-card h2 { margin: 0 0 4px; color: #111827; font-size: 17px; font-weight: 800; }
.logo-card p { margin: 0 0 10px; color: #667085; font-size: 13px; }
.logo-upload-btn { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; color: #fff; background: #f24f42; font-size: 13px; font-weight: 800; cursor: pointer; }
.logo-upload-btn input { display: none; }
.logo-upload-note { display: block; margin-top: 8px; color: #667085; font-size: 12px; font-weight: 700; }
.remove-logo-check { margin-left: 12px; color: #667085; font-size: 13px; }
.library-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 18px; border: 1px solid #e2eaf4; border-radius: 14px; background: #fff; }
.form-field { display: grid; gap: 7px; }
.form-field.span-2 { grid-column: span 2; }
.form-field span { color: #536079; font-size: 12px; font-weight: 800; }
.form-field span small { color: #7b8798; font-size: 11px; font-weight: 700; }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 46px; padding: 11px 14px; border: 1px solid #cfd9e6; border-radius: 10px; color: #111827; background: #f8fafc; outline: 0; }
.form-field textarea { resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px rgba(23, 107, 135, .12); }
.library-settings-card { padding: 18px; }
.library-toggle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.library-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 62px; padding: 13px 14px; border: 1px solid #e7edf5; border-radius: 12px; background: #fbfcfe; }
.library-toggle-row > span { color: #536079; font-weight: 700; }
.library-toggle-row div { display: flex; gap: 14px; }
.library-toggle-row label { display: inline-flex; align-items: center; gap: 6px; color: #111827; font-weight: 600; }
.library-toggle-row input { accent-color: #f24f42; }
.library-terms-note { display: flex; align-items: center; gap: 14px; padding: 16px; }
.library-terms-note i { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #2563eb; background: #eaf1ff; }
.library-terms-note strong { display: block; color: #111827; font-weight: 800; }
.library-terms-note span { color: #667085; font-size: 13px; }
.library-submit-row { display: flex; justify-content: center; }
.library-submit-btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: min(100%, 520px); border: 0; border-radius: 999px; color: #fff; background: #f24f42; font-weight: 800; box-shadow: 0 10px 22px rgba(242, 79, 66, .18); }

.member-portal-page { min-height: 100vh; margin: 0; color: #111827; background: radial-gradient(circle at 18% 15%, rgba(47, 146, 255, .17), transparent 28%), linear-gradient(135deg, #eef7fb 0%, #fff8f2 100%); font-family: "Inter", "Segoe UI", sans-serif; }
.member-portal-shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 38px 0; display: grid; gap: 18px; }
.member-hero-panel, .member-summary-grid article, .member-detail-card { border: 1px solid rgba(15, 23, 42, .09); border-radius: 18px; background: rgba(255, 255, 255, .9); box-shadow: 0 20px 50px rgba(15, 23, 42, .1); }
.member-hero-panel { overflow: hidden; background: linear-gradient(135deg, rgba(23, 107, 135, .96), rgba(13, 44, 58, .94)); color: #fff; }
.member-hero-top { min-height: 84px; display: flex; align-items: center; gap: 16px; padding: 18px 24px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.member-hero-top img { width: 54px; height: 54px; border-radius: 16px; background: #fff; object-fit: contain; }
.member-hero-top div { display: grid; gap: 2px; min-width: 0; }
.member-hero-top span { color: rgba(255, 255, 255, .62); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.member-hero-top strong { min-width: 0; overflow: hidden; color: #fff; font-size: 20px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.member-hero-top a { margin-left: auto; min-height: 42px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 999px; color: #fff; background: #f24f42; font-weight: 900; text-decoration: none; box-shadow: 0 10px 22px rgba(242, 79, 66, .25); }
.member-hero-body { display: flex; align-items: center; gap: 20px; padding: 28px 24px 32px; }
.member-avatar { width: 92px; height: 92px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 26px; color: #176b87; background: #fff; font-size: 44px; font-weight: 900; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08); }
.member-hero-body p { margin: 0 0 4px; color: rgba(255, 255, 255, .7); font-weight: 800; }
.member-hero-body h1 { margin: 0; font-size: clamp(30px, 4vw, 52px); font-weight: 900; letter-spacing: 0; }
.member-chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.member-chip-row span { min-height: 34px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 999px; color: #fff; background: rgba(255, 255, 255, .14); font-weight: 800; }
.member-chip-row .success { background: rgba(34, 197, 94, .22); }
.member-chip-row .danger { background: rgba(242, 79, 66, .24); }
.member-alert { margin: 0; border-radius: 12px; font-weight: 700; }
.member-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.member-summary-grid article { min-height: 132px; display: grid; align-content: center; gap: 7px; padding: 18px; }
.member-summary-grid i { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #176b87; background: #eef7fb; font-size: 20px; }
.member-summary-grid span, .member-detail-list span { color: #667085; font-size: 12px; font-weight: 900; text-transform: uppercase; }
.member-summary-grid strong { color: #111827; font-size: 22px; font-weight: 900; overflow-wrap: anywhere; }
.member-detail-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.member-detail-card { padding: 22px; }
.member-detail-card h2 { margin: 0 0 16px; color: #111827; font-size: 20px; font-weight: 900; }
.member-detail-list { display: grid; gap: 12px; }
.member-detail-list div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid #e7edf5; }
.member-detail-list div:last-child { border-bottom: 0; }
.member-detail-list strong { max-width: 64%; color: #111827; font-weight: 900; text-align: right; overflow-wrap: anywhere; }

.member-home-page { background: #f4f7fb; }
.member-home-page .member-portal-shell { width: min(980px, calc(100% - 24px)); padding: 18px 0 28px; gap: 14px; }
.member-appbar { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 16px; position: sticky; top: 0; z-index: 5; padding: 10px 14px; border: 1px solid rgba(23, 107, 135, .12); border-radius: 0 0 18px 18px; background: linear-gradient(135deg, #176b87, #0f4e65); box-shadow: 0 12px 24px rgba(15, 23, 42, .13); }
.member-appbar > div { min-width: 0; display: flex; align-items: center; gap: 11px; }
.member-appbar img { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 13px; background: #fff; object-fit: contain; }
.member-appbar span { display: block; color: rgba(255, 255, 255, .72); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.member-appbar strong { display: block; max-width: 420px; overflow: hidden; color: #fff; font-size: 17px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.member-appbar nav { display: flex; align-items: center; gap: 8px; }
.member-appbar a { min-height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border-radius: 999px; color: #fff; background: rgba(255, 255, 255, .12); font-size: 13px; font-weight: 900; text-decoration: none; }
.member-appbar a.danger { background: #f24f42; box-shadow: 0 8px 16px rgba(242, 79, 66, .2); }
.member-welcome-card, .member-quick-grid article, .member-plan-card, .member-empty-card, .member-detail-card { border: 1px solid rgba(15, 23, 42, .06); border-radius: 16px; background: #fff; box-shadow: 0 10px 22px rgba(15, 23, 42, .06); }
.member-welcome-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px; }
.member-photo-wrap { width: 68px; height: 68px; padding: 3px; border: 2px solid rgba(23, 107, 135, .18); border-radius: 50%; }
.member-photo-wrap img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.member-welcome-copy { min-width: 0; }
.member-welcome-copy > span { color: #111827; font-size: 17px; font-weight: 950; }
.member-welcome-copy h1 { margin: 2px 0 0; overflow: hidden; color: rgba(17, 24, 39, .58); font-size: 13px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.member-home-page .member-chip-row { margin-top: 9px; gap: 7px; }
.member-home-page .member-chip-row span { min-height: 30px; padding: 0 10px; color: #176b87; background: rgba(23, 107, 135, .08); font-size: 12px; }
.member-home-page .member-chip-row .success { color: #15803d; background: rgba(34, 197, 94, .12); }
.member-home-page .member-chip-row .danger { color: #dc2626; background: rgba(242, 79, 66, .12); }
.member-expiry-pill { min-width: 178px; display: grid; gap: 2px; padding: 12px 14px; border: 1px solid rgba(34, 197, 94, .16); border-radius: 14px; background: rgba(34, 197, 94, .08); }
.member-expiry-pill.danger { border-color: rgba(242, 79, 66, .18); background: rgba(242, 79, 66, .08); }
.member-expiry-pill small { color: #667085; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.member-expiry-pill strong { color: #111827; font-size: 16px; font-weight: 950; }
.member-quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.member-quick-grid article { min-height: 82px; display: flex; align-items: center; gap: 10px; padding: 12px; }
.member-quick-grid i { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; color: #176b87; background: rgba(23, 107, 135, .09); }
.member-quick-grid article.danger i { color: #dc2626; background: rgba(242, 79, 66, .1); }
.member-quick-grid div { min-width: 0; display: grid; gap: 2px; }
.member-quick-grid span, .member-plan-chip-grid span { color: rgba(17, 24, 39, .55); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.member-quick-grid strong { overflow: hidden; color: #111827; font-size: 16px; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }
.member-section-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 5px 2px 0; }
.member-section-head span { color: #176b87; font-size: 12px; font-weight: 950; text-transform: uppercase; }
.member-section-head h2 { margin: 2px 0 0; color: #111827; font-size: 22px; font-weight: 950; }
.member-section-head small { color: #667085; font-weight: 800; }
.member-plan-list { display: grid; gap: 12px; }
.member-plan-card { padding: 14px; }
.member-plan-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.member-plan-head h3 { margin: 0; color: #111827; font-size: 17px; font-weight: 950; }
.member-plan-head span { display: block; margin-top: 3px; color: #667085; font-size: 12px; font-weight: 800; }
.member-plan-dates { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef2f7; }
.member-plan-dates span { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border-radius: 12px; color: #111827; background: #f6f8fb; font-size: 12px; font-weight: 850; }
.member-plan-chip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.member-plan-chip-grid div { min-height: 64px; display: grid; align-content: center; gap: 4px; padding: 10px; border: 1px solid rgba(15, 23, 42, .06); border-radius: 14px; background: #f8fafc; }
.member-plan-chip-grid strong { color: #111827; font-size: 15px; font-weight: 950; overflow-wrap: anywhere; }
.member-plan-chip-grid .danger { border-color: rgba(242, 79, 66, .14); background: rgba(242, 79, 66, .07); }
.member-plan-chip-grid .danger strong { color: #dc2626; }
.member-empty-card { min-height: 150px; display: grid; place-items: center; align-content: center; gap: 6px; padding: 18px; text-align: center; }
.member-empty-card i { color: #176b87; font-size: 32px; }
.member-empty-card strong { color: #111827; font-weight: 950; }
.member-empty-card span { color: #667085; font-size: 13px; font-weight: 750; }
.member-home-page .member-detail-layout { grid-template-columns: 1fr; }
.member-detail-card.wide { padding: 16px; }
.member-card-title { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.member-card-title i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: #176b87; background: rgba(23, 107, 135, .09); }
.member-card-title h2 { margin: 0; color: #111827; font-size: 17px; font-weight: 950; }
.member-home-page .member-detail-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.member-home-page .member-detail-list div { min-height: 48px; }

@media (max-width: 760px) {
    .member-home-page .member-portal-shell { width: min(100% - 18px, 520px); padding-top: 8px; }
    .member-appbar { align-items: stretch; flex-direction: column; border-radius: 0 0 16px 16px; }
    .member-appbar nav { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .member-appbar a { justify-content: center; }
    .member-welcome-card { grid-template-columns: auto minmax(0, 1fr); }
    .member-expiry-pill { grid-column: 1 / -1; min-width: 0; }
    .member-quick-grid, .member-plan-chip-grid, .member-home-page .member-detail-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
    .member-quick-grid, .member-plan-chip-grid, .member-home-page .member-detail-list { grid-template-columns: 1fr; }
    .member-plan-head { align-items: stretch; flex-direction: column; }
}

.member-home-page { position: relative; overflow-x: hidden; background: linear-gradient(135deg, #eaf6ff 0%, #fff4ec 42%, #eef7f1 100%); }
.member-home-page::before { content: ""; position: fixed; inset: 0; z-index: 0; background: linear-gradient(115deg, rgba(8, 46, 63, .10), transparent 34%), radial-gradient(circle at 78% 8%, rgba(242, 79, 66, .16), transparent 28%), radial-gradient(circle at 18% 88%, rgba(37, 99, 235, .13), transparent 30%); pointer-events: none; }
.member-3d-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.member-bg-orb { position: absolute; border-radius: 999px; filter: blur(.2px); opacity: .9; }
.member-bg-orb.orb-a { width: 280px; height: 280px; left: -90px; top: 80px; background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.9), rgba(47, 146, 255, .28) 42%, rgba(23,107,135,.04) 72%); }
.member-bg-orb.orb-b { width: 340px; height: 340px; right: -130px; bottom: 90px; background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.95), rgba(242, 79, 66, .24) 40%, rgba(34,197,94,.08) 75%); }
.member-bg-card { position: absolute; width: 180px; height: 74px; border: 1px solid rgba(255,255,255,.55); border-radius: 18px; background: rgba(255,255,255,.28); box-shadow: 0 28px 70px rgba(15, 23, 42, .14); transform: rotate(-14deg) skewX(-8deg); }
.member-bg-card.card-a { right: 8%; top: 20%; }
.member-bg-card.card-b { left: 7%; bottom: 12%; transform: rotate(13deg) skewX(8deg); }
.member-bg-shelf { position: absolute; left: 58%; top: 120px; width: 230px; height: 94px; transform: perspective(500px) rotateX(56deg) rotateZ(-7deg); opacity: .55; }
.member-bg-shelf::before, .member-bg-shelf::after { content: ""; position: absolute; left: 10px; right: 10px; height: 8px; border-radius: 99px; background: rgba(23, 107, 135, .24); box-shadow: 0 12px 20px rgba(15,23,42,.08); }
.member-bg-shelf::before { top: 32px; }
.member-bg-shelf::after { top: 68px; }
.member-bg-shelf i { position: absolute; bottom: 34px; width: 20px; border-radius: 5px; box-shadow: 0 14px 20px rgba(15,23,42,.12); }
.member-bg-shelf i:nth-child(1) { left: 40px; height: 56px; background: #f97316; }
.member-bg-shelf i:nth-child(2) { left: 68px; height: 48px; background: #2f92ff; }
.member-bg-shelf i:nth-child(3) { left: 96px; height: 62px; background: #19a7ad; }
.member-bg-shelf i:nth-child(4) { left: 128px; height: 42px; background: #f8fafc; }
.member-home-page .member-portal-shell { position: relative; z-index: 1; width: min(1360px, calc(100% - 52px)); padding: 22px 0 38px; gap: 18px; }
.member-home-page .member-appbar { min-height: 82px; border: 1px solid rgba(255,255,255,.38); border-radius: 22px; background: linear-gradient(135deg, rgba(14, 83, 111, .94), rgba(18, 43, 68, .94)); box-shadow: 0 22px 46px rgba(14, 83, 111, .23), inset 0 1px 0 rgba(255,255,255,.28); backdrop-filter: blur(18px); }
.member-home-page .member-appbar img { width: 56px; height: 56px; border-radius: 18px; box-shadow: 0 12px 24px rgba(0,0,0,.18); }
.member-home-page .member-appbar strong { max-width: 760px; font-size: 25px; letter-spacing: 0; }
.member-home-page .member-appbar a { min-height: 44px; padding: 0 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 20px rgba(0,0,0,.12); }
.member-home-page .member-appbar a:first-child { background: linear-gradient(135deg, #2f92ff, #176b87); }
.member-home-page .member-appbar a.danger { background: linear-gradient(135deg, #ff6b5b, #f24f42); }
.member-home-page .member-welcome-card { position: relative; grid-template-columns: auto minmax(0, 1fr) 230px; min-height: 158px; padding: 26px; border-radius: 24px; border-color: rgba(255,255,255,.66); background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.78)); box-shadow: 0 24px 60px rgba(15,23,42,.13), inset 0 1px 0 rgba(255,255,255,.9); overflow: hidden; backdrop-filter: blur(18px); }
.member-home-page .member-welcome-card::after { content: ""; position: absolute; right: -40px; top: -70px; width: 250px; height: 250px; border-radius: 50%; background: radial-gradient(circle, rgba(47,146,255,.18), transparent 68%); }
.member-home-page .member-photo-wrap { width: 92px; height: 92px; position: relative; z-index: 1; border: 4px solid #fff; box-shadow: 0 18px 34px rgba(47,146,255,.2); background: linear-gradient(135deg, #ffcf59, #2f92ff); }
.member-home-page .member-welcome-copy, .member-home-page .member-expiry-pill { position: relative; z-index: 1; }
.member-home-page .member-welcome-copy > span { font-size: 28px; color: #07142c; letter-spacing: 0; }
.member-home-page .member-welcome-copy h1 { margin-top: 4px; color: #657187; font-size: 16px; }
.member-home-page .member-chip-row span { min-height: 34px; border: 1px solid rgba(23,107,135,.12); background: #eef9fc; font-size: 13px; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.member-home-page .member-expiry-pill { min-height: 86px; align-content: center; border-radius: 18px; background: linear-gradient(135deg, #fff7ed, #ffecec); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.member-home-page .member-expiry-pill strong { font-size: 20px; color: #07142c; }
.member-home-page .member-quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.member-home-page .member-quick-grid article { min-height: 116px; padding: 20px; border-radius: 22px; border-color: rgba(255,255,255,.72); background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(247,250,255,.86)); box-shadow: 0 20px 42px rgba(15,23,42,.1), inset 0 1px 0 rgba(255,255,255,.95); transform: translateZ(0); }
.member-home-page .member-quick-grid article:nth-child(1) i { color: #176b87; background: #e8f8fc; }
.member-home-page .member-quick-grid article:nth-child(2) i { color: #2563eb; background: #eaf1ff; }
.member-home-page .member-quick-grid article:nth-child(3) i { color: #059669; background: #e9fbf2; }
.member-home-page .member-quick-grid article:nth-child(4) i { color: #dc2626; background: #fff0ee; }
.member-home-page .member-quick-grid i { width: 52px; height: 52px; border-radius: 17px; font-size: 22px; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.member-home-page .member-quick-grid strong { font-size: 24px; color: #07142c; }
.member-home-page .member-section-head { padding: 4px 4px 0; }
.member-home-page .member-section-head h2 { font-size: 30px; color: #07142c; }
.member-home-page .member-section-head small { min-height: 34px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: 999px; color: #176b87; background: rgba(255,255,255,.76); box-shadow: 0 10px 24px rgba(15,23,42,.08); }
.member-home-page .member-plan-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.member-home-page .member-plan-card { position: relative; min-height: 306px; padding: 20px; border-radius: 24px; border-color: rgba(255,255,255,.7); background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(245,248,255,.88)); box-shadow: 0 24px 56px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.94); overflow: hidden; }
.member-home-page .member-plan-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: linear-gradient(90deg, #2f92ff, #19a7ad, #ffcf59, #f24f42); }
.member-home-page .member-plan-card::after { content: ""; position: absolute; right: -46px; bottom: -56px; width: 156px; height: 156px; border-radius: 50%; background: radial-gradient(circle, rgba(47,146,255,.12), transparent 68%); }
.member-home-page .member-plan-head, .member-home-page .member-plan-dates, .member-home-page .member-plan-chip-grid { position: relative; z-index: 1; }
.member-home-page .member-plan-head h3 { font-size: 21px; color: #07142c; }
.member-home-page .member-plan-chip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.member-home-page .member-plan-chip-grid div { min-height: 78px; border-color: rgba(15,23,42,.07); border-radius: 17px; background: rgba(248,250,252,.86); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.member-home-page .member-plan-chip-grid strong { font-size: 22px; color: #07142c; }
.member-home-page .member-detail-card.wide { padding: 22px; border-radius: 24px; background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,255,255,.82)); box-shadow: 0 24px 56px rgba(15,23,42,.11), inset 0 1px 0 rgba(255,255,255,.9); }
.member-home-page .member-detail-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.member-home-page .member-detail-list div { min-height: 76px; display: grid; align-content: center; gap: 5px; padding: 12px; border: 1px solid rgba(15,23,42,.06); border-radius: 16px; background: #f8fafc; }
.member-home-page .member-detail-list strong { max-width: 100%; text-align: left; color: #07142c; }

@media (max-width: 1180px) {
    .member-home-page .member-plan-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .member-home-page .member-detail-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .member-home-page .member-portal-shell { width: min(100% - 22px, 620px); }
    .member-home-page .member-welcome-card { grid-template-columns: auto minmax(0, 1fr); }
    .member-home-page .member-expiry-pill { grid-column: 1 / -1; }
    .member-home-page .member-quick-grid, .member-home-page .member-plan-list, .member-home-page .member-detail-list { grid-template-columns: 1fr; }
    .member-home-page .member-welcome-copy > span { font-size: 22px; }
}

.profile-mobile-page { max-width: 860px; margin: 0 auto; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 18px 48px rgba(15, 23, 42, .10); }
.profile-mobile-head { min-height: 82px; display: flex; align-items: center; gap: 22px; padding: 0 28px; color: #fff; background: #f24f42; box-shadow: 0 4px 12px rgba(15, 23, 42, .18); }
.profile-mobile-head a { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #fff; text-decoration: none; font-size: 28px; }
.profile-mobile-head a:hover { background: rgba(255, 255, 255, .15); }
.profile-mobile-head h1 { margin: 0; color: #fff; font-size: 36px; font-weight: 500; letter-spacing: 0; }
.profile-mobile-card { padding: 34px 42px 44px; background: #fff; }
.profile-mobile-card h2 { margin: 0 0 24px; color: #111; font-size: 32px; font-weight: 500; letter-spacing: 0; }
.profile-field-stack, .profile-password-form { display: grid; gap: 22px; }
.profile-field-stack label, .profile-password-form label { display: grid; gap: 10px; }
.profile-field-stack span, .profile-password-form span { color: #a0a0a0; font-size: 28px; font-weight: 500; letter-spacing: 0; }
.profile-field-stack input, .profile-password-form input { width: 100%; min-height: 70px; padding: 0 22px; border: 1px solid transparent; border-radius: 8px; color: #2a2d33; background: #fff; font-size: 28px; font-weight: 500; box-shadow: 0 2px 10px rgba(15, 23, 42, .16); outline: 0; }
.profile-field-stack input[readonly] { cursor: default; }
.profile-field-stack .profile-accent-input { border-color: #f24f42; box-shadow: 0 2px 10px rgba(242, 79, 66, .16); }
.profile-password-panel { margin-top: 32px; }
.profile-password-panel summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #f24f42; cursor: pointer; list-style: none; }
.profile-password-panel summary::-webkit-details-marker { display: none; }
.profile-password-panel summary span { font-size: 30px; font-weight: 500; }
.profile-password-panel summary i { font-size: 26px; transition: transform .2s ease; }
.profile-password-panel:not([open]) summary i { transform: rotate(180deg); }
.profile-password-form { margin-top: 26px; }
.profile-password-form input { box-shadow: 0 3px 12px rgba(15, 23, 42, .10); }
.profile-update-btn, .profile-delete-btn { width: 100%; min-height: 70px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; border: 0; border-radius: 8px; color: #fff; background: #f24f42; font-size: 30px; font-weight: 800; box-shadow: 0 8px 18px rgba(242, 79, 66, .24); }
.profile-update-btn { margin-top: 12px; }
.profile-delete-wrap { margin-top: 48px; padding-top: 48px; border-top: 1px solid #ddd; }
.profile-delete-btn { min-height: 58px; background: #ff4f5c; }
.profile-delete-btn i { font-size: 26px; }

@media (max-width: 768px) {
    .profile-mobile-page { max-width: none; border-radius: 0; box-shadow: none; }
    .profile-mobile-head { min-height: 72px; padding: 0 20px; }
    .profile-mobile-head h1 { font-size: 30px; }
    .profile-mobile-card { padding: 26px 24px 34px; }
    .profile-mobile-card h2 { font-size: 28px; }
    .profile-field-stack span, .profile-password-form span { font-size: 24px; }
    .profile-field-stack input, .profile-password-form input, .profile-update-btn { min-height: 62px; font-size: 24px; }
    .profile-password-panel summary span, .profile-delete-btn { font-size: 26px; }
}

.profile-web-page { max-width: 980px; }
.profile-web-head { max-width: 900px; }
.profile-web-stack { display: grid; gap: 16px; max-width: 900px; }
.profile-web-card { margin: 0; }
.profile-web-card .plan-editor-title { margin-bottom: 0; }
.profile-form-grid { padding: 18px 0 0; }
.profile-form-grid .plan-field div { background: #f8fafc; }
.profile-form-grid .plan-field input[readonly] { color: #475467; cursor: default; }
.profile-action-row { display: flex; justify-content: flex-end; padding-top: 18px; }
.profile-action-row .master-submit-btn { min-width: 240px; }
.profile-action-row .master-submit-btn { background: linear-gradient(135deg, var(--plan-theme), var(--plan-theme-accent)); box-shadow: 0 12px 22px color-mix(in srgb, var(--plan-theme) 22%, transparent); text-transform: none; }
.profile-action-row .master-submit-btn:hover { background: linear-gradient(135deg, var(--plan-theme-dark), var(--plan-theme)); }
.profile-web-card.danger { border-color: color-mix(in srgb, var(--plan-theme) 24%, #fff); background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--plan-theme) 7%, #fff)); }
.profile-web-card.danger .plan-editor-title > span { color: var(--plan-theme); background: var(--plan-theme-soft); border-color: var(--plan-theme-border); }
.profile-delete-web-form { display: flex; justify-content: flex-end; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--plan-theme-border); }
.profile-web-delete-btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 260px; border: 0; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--plan-theme), var(--plan-theme-accent)); font-weight: 900; box-shadow: 0 12px 22px color-mix(in srgb, var(--plan-theme) 22%, transparent); }
.profile-web-delete-btn:hover { color: #fff; background: linear-gradient(135deg, var(--plan-theme-dark), var(--plan-theme)); }

@media (max-width: 768px) {
    .profile-action-row, .profile-delete-web-form { justify-content: stretch; }
    .profile-action-row .master-submit-btn, .profile-web-delete-btn { width: 100%; min-width: 0; }
}

.subscription-web-page { display: grid; gap: 18px; max-width: 100%; overflow-x: hidden; padding: 18px; }
.subscription-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: stretch; padding: 26px; border: 1px solid rgba(255,255,255,.42); border-radius: 24px; background: linear-gradient(135deg, rgba(23,107,135,.96), rgba(15,23,42,.94)); box-shadow: 0 22px 54px rgba(15,23,42,.16); color: #fff; overflow: hidden; position: relative; }
.subscription-hero::after { content: ""; position: absolute; right: 26%; top: -90px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(47,146,255,.28), transparent 68%); }
.subscription-hero > div { position: relative; z-index: 1; }
.subscription-hero .master-kicker { color: rgba(255,255,255,.82); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); }
.subscription-hero h1 { max-width: 760px; margin: 12px 0 8px; color: #fff; font-size: clamp(32px, 4vw, 54px); font-weight: 950; letter-spacing: 0; }
.subscription-hero p { max-width: 720px; margin: 0; color: rgba(255,255,255,.76); font-size: 17px; line-height: 1.55; }
.subscription-offer-strip { min-height: 72px; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px dashed var(--plan-theme); border-radius: 18px; background: #fff; box-shadow: 0 12px 28px rgba(15,23,42,.06); }
.subscription-offer-strip i { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: var(--plan-theme); background: var(--plan-theme-soft); font-size: 22px; }
.subscription-offer-strip strong { display: block; color: #111827; font-size: 16px; font-weight: 950; }
.subscription-offer-strip span { color: #667085; font-size: 13px; font-weight: 750; }
.subscription-web-page .subscription-tabs { width: min(100%, 620px); height: 58px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px; border: 1px solid #dbe4ef; border-radius: 16px; background: #fff; box-shadow: 0 12px 28px rgba(15,23,42,.06); }
.subscription-web-page .subscription-tabs button { border: 0; border-radius: 12px; color: #667085; background: transparent; font-weight: 950; }
.subscription-web-page .subscription-tabs button.active { color: #fff; background: linear-gradient(135deg, var(--plan-theme), var(--plan-theme-accent)); box-shadow: 0 10px 20px color-mix(in srgb, var(--plan-theme) 22%, transparent); }
.subscription-section { display: none; }
.subscription-section.active { display: block; max-width: 100%; overflow-x: hidden; }
.subscription-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.subscription-plan-card { display: grid; grid-template-rows: auto 1fr auto; border: 1px solid rgba(15,23,42,.08); border-radius: 24px; background: #fff; box-shadow: 0 20px 46px rgba(15,23,42,.10); overflow: hidden; }
.subscription-plan-top { position: relative; min-height: 178px; padding: 20px; color: #fff; background: linear-gradient(145deg, var(--sub-from), var(--sub-to)); overflow: hidden; }
.subscription-plan-top::after { content: ""; position: absolute; right: -48px; bottom: -68px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.18); }
.subscription-plan-tag { position: absolute; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.42); border-radius: 999px; background: rgba(255,255,255,.18); font-size: 11px; font-weight: 900; }
.subscription-plan-top h2 { margin: 0 0 12px; color: #fff; font-size: 22px; font-weight: 950; letter-spacing: .02em; }
.subscription-price-row { display: flex; align-items: baseline; gap: 10px; }
.subscription-price-row strong { color: #fff; font-size: 38px; font-weight: 950; }
.subscription-price-row del { color: rgba(255,255,255,.7); font-size: 15px; font-weight: 800; }
.subscription-plan-top p { margin: 8px 0 0; color: #fff; font-size: 18px; font-weight: 900; }
.subscription-plan-top small { display: inline-flex; margin-top: 8px; padding: 5px 9px; border-radius: 999px; color: #fff; background: rgba(255,255,255,.22); font-weight: 850; }
.subscription-plan-card ul { display: grid; gap: 10px; margin: 0; padding: 20px; list-style: none; }
.subscription-plan-card li { display: flex; align-items: flex-start; gap: 9px; color: #263244; font-size: 14px; font-weight: 750; line-height: 1.35; }
.subscription-plan-card li i { color: #16a34a; margin-top: 2px; }
.subscription-card-foot { display: grid; gap: 12px; padding: 0 20px 20px; }
.subscription-card-foot span { display: inline-flex; align-items: center; gap: 7px; width: fit-content; padding: 7px 10px; border-radius: 999px; color: var(--sub-from); background: color-mix(in srgb, var(--sub-from) 10%, #fff); font-size: 12px; font-weight: 950; }
.subscription-card-foot a { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--sub-from), var(--sub-to)); font-weight: 950; text-decoration: none; box-shadow: 0 12px 22px color-mix(in srgb, var(--sub-from) 22%, transparent); }
.subscription-card-foot a.active { background: linear-gradient(135deg, #16a34a, #22c55e); }
.subscription-card-foot .subscription-pay-form { width: 100%; margin: 0; }
.subscription-card-foot .subscription-pay-form button,
.credit-package-grid .subscription-pay-form button {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--sub-from), var(--sub-to));
    font-weight: 950;
    text-decoration: none;
    box-shadow: 0 12px 22px color-mix(in srgb, var(--sub-from) 22%, transparent);
    cursor: pointer;
}
.subscription-card-foot .subscription-pay-form button.active {
    background: linear-gradient(135deg, #16a34a, #22c55e);
}
.credit-package-grid .subscription-pay-form { margin: 0; }
.credit-package-grid .subscription-pay-form button {
    min-height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--plan-theme), var(--plan-theme-accent));
    font-size: 13px;
}
.credit-package-grid .subscription-pay-form button:hover,
.subscription-card-foot .subscription-pay-form button:hover {
    color: #fff;
    filter: brightness(1.02);
}
.credit-web-card { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 18px; border: 1px solid rgba(15,23,42,.08); border-radius: 24px; background: #fff; box-shadow: 0 20px 46px rgba(15,23,42,.1); overflow: hidden; }
.credit-web-top { display: grid; align-content: center; justify-items: center; gap: 8px; min-height: 300px; padding: 24px; color: #fff; text-align: center; background: linear-gradient(145deg, #e96744, #a3423f); border-radius: 0 40px 40px 0; }
.credit-web-top span { font-size: 18px; font-weight: 950; }
.credit-web-top del { color: rgba(255,255,255,.72); font-size: 16px; font-weight: 800; }
.credit-web-top strong { color: #fff; font-size: 42px; font-weight: 950; }
.credit-web-top small { color: rgba(255,255,255,.78); font-weight: 800; }
.credit-web-body { display: grid; align-content: center; gap: 18px; padding: 24px; }
.credit-web-body h2 { margin: 0; color: #111827; font-size: 24px; font-weight: 950; }
.credit-package-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.credit-package-grid article { display: grid; gap: 6px; padding: 16px; border: 1px solid #e1e8f0; border-radius: 16px; background: #f8fafc; }
.credit-package-grid strong { color: var(--plan-theme); font-size: 24px; font-weight: 950; }
.credit-package-grid span { color: #667085; font-size: 13px; font-weight: 800; }
.credit-package-grid em { color: #111827; font-style: normal; font-size: 20px; font-weight: 950; }
.credit-package-grid a { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--plan-theme), var(--plan-theme-accent)); font-size: 13px; font-weight: 950; text-decoration: none; }
.credit-web-body p { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: #475467; font-weight: 750; }
.credit-web-body p i { color: #16a34a; }
.subscription-support-strip { margin-top: 0; }

/* Compact professional subscription layout */
.subscription-web-page { gap: 14px; padding: 12px; }
.subscription-hero { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px 22px; border-radius: 18px; }
.subscription-hero h1 { max-width: 720px; margin: 8px 0 6px; font-size: clamp(28px, 3vw, 42px); line-height: 1.15; }
.subscription-hero p { max-width: 700px; font-size: 15px; line-height: 1.45; }
.subscription-offer-strip { min-height: 58px; gap: 12px; padding: 10px 14px; border-radius: 14px; }
.subscription-offer-strip i { width: 36px; height: 36px; border-radius: 11px; font-size: 18px; }
.subscription-offer-strip strong { font-size: 14px; }
.subscription-offer-strip span { font-size: 12px; }
.subscription-web-page .subscription-tabs { width: min(100%, 500px); height: 48px; gap: 4px; padding: 4px; border-radius: 13px; }
.subscription-web-page .subscription-tabs button { border-radius: 10px; font-size: 13px; }
.subscription-plan-grid { display: flex; max-width: 100%; gap: 14px; align-items: stretch; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; padding: 2px 4px 12px; }
.subscription-plan-grid::-webkit-scrollbar { height: 8px; }
.subscription-plan-grid::-webkit-scrollbar-track { background: #eef2f7; border-radius: 999px; }
.subscription-plan-grid::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--plan-theme) 45%, #cbd5e1); border-radius: 999px; }
.subscription-plan-card { flex: 0 0 330px; min-height: 520px; border-radius: 18px; scroll-snap-align: start; }
.subscription-plan-top { min-height: 142px; padding: 16px; }
.subscription-plan-top h2 { margin-bottom: 8px; font-size: 18px; }
.subscription-price-row strong { font-size: 30px; }
.subscription-price-row del { font-size: 13px; }
.subscription-plan-top p { margin-top: 5px; font-size: 15px; }
.subscription-plan-top small { margin-top: 6px; padding: 4px 8px; font-size: 11px; }
.subscription-plan-tag { top: 10px; right: 10px; padding: 4px 7px; font-size: 10px; }
.subscription-plan-card ul { gap: 8px; padding: 14px 16px; }
.subscription-plan-card li { font-size: 13px; }
.subscription-card-foot { gap: 10px; padding: 0 16px 16px; }
.subscription-card-foot span { padding: 6px 9px; font-size: 11px; }
.subscription-card-foot a { min-height: 40px; border-radius: 12px; font-size: 13px; }
.credit-web-card { grid-template-columns: 260px minmax(0, 1fr); gap: 14px; border-radius: 18px; }
.credit-web-top { min-height: 240px; padding: 18px; border-radius: 0 28px 28px 0; }
.credit-web-top strong { font-size: 32px; }
.credit-web-body { gap: 14px; padding: 18px; }
.credit-web-body h2 { font-size: 20px; }
.credit-package-grid { gap: 10px; }
.credit-package-grid article { padding: 13px; border-radius: 14px; }
.credit-package-grid strong { font-size: 20px; }
.credit-package-grid em { font-size: 17px; }

.subscription-web-page .subscription-hero { grid-template-columns: minmax(0, 1fr) auto; min-height: 118px; align-items: center; padding: 14px 18px; }
.subscription-web-page .subscription-hero .master-kicker { min-height: 26px; padding: 4px 10px; font-size: 11px; }
.subscription-web-page .subscription-hero h1 { max-width: 620px; margin: 8px 0 4px; font-size: clamp(26px, 2.5vw, 34px); line-height: 1.05; }
.subscription-web-page .subscription-hero p { display: -webkit-box; max-width: 700px; overflow: hidden; font-size: 14px; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.subscription-web-page .subscription-plan-grid { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-left: 4px; }
.subscription-web-page .subscription-plan-card { flex: 0 0 315px; scroll-snap-align: start; }
.subscription-scroll-shell { position: relative; max-width: 100%; padding: 0 46px 26px; overflow: hidden; }
.subscription-scroll-shell .subscription-plan-grid { padding-bottom: 12px; }
.subscription-scroll-btn { position: absolute; top: 45%; z-index: 3; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(15,23,42,.08); border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--plan-theme), var(--plan-theme-accent)); box-shadow: 0 12px 24px color-mix(in srgb, var(--plan-theme) 24%, transparent); transform: translateY(-50%); }
.subscription-scroll-btn.left { left: 2px; }
.subscription-scroll-btn.right { right: 2px; }
.subscription-scroll-btn:hover { background: linear-gradient(135deg, var(--plan-theme-dark), var(--plan-theme)); }
.subscription-scroll-indicators { position: absolute; left: 50%; bottom: 2px; display: flex; align-items: center; gap: 7px; transform: translateX(-50%); }
.subscription-scroll-indicators span { width: 8px; height: 8px; border-radius: 999px; background: #cbd5e1; transition: width .18s ease, background .18s ease; }
.subscription-scroll-indicators span.active { width: 24px; background: var(--plan-theme); }

@media (max-width: 1180px) {
    .credit-web-card { grid-template-columns: 1fr; }
    .credit-web-top { min-height: 220px; border-radius: 0 0 40px 40px; }
}

@media (max-width: 760px) {
    .subscription-web-page { padding: 10px; }
    .subscription-hero { grid-template-columns: 1fr; padding: 14px; }
    .subscription-plan-card { flex-basis: min(86vw, 330px); }
    .subscription-scroll-shell { padding-inline: 38px; }
    .subscription-scroll-btn { width: 34px; height: 34px; }
    .credit-package-grid { grid-template-columns: 1fr; }
    .subscription-web-page .subscription-tabs { width: 100%; }
}

.ai-assistant-page { width: 100%; display: grid; gap: 16px; }
.ai-page-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; border: 1px solid rgba(15, 23, 42, .08); border-radius: 14px; background: linear-gradient(135deg, rgba(23,107,135,.08), transparent 48%), #fff; box-shadow: 0 10px 26px rgba(15, 23, 42, .06); }
.ai-page-head h1 { margin: 0; color: #0f172a; font-size: 30px; font-weight: 800; }
.ai-page-head p { max-width: 760px; margin: 6px 0 0; color: #667085; line-height: 1.55; }
.ai-chat-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px; align-items: stretch; min-height: calc(100vh - 210px); }
.ai-prompt-panel,
.ai-chat-panel { border: 1px solid #e2eaf4; border-radius: 14px; background: #fff; box-shadow: 0 10px 26px rgba(15, 23, 42, .055); }
.ai-prompt-panel { display: grid; align-content: start; gap: 14px; padding: 16px; }
.ai-search-box { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 1px solid rgba(23, 107, 135, .18); border-radius: 12px; background: #fbfdff; }
.ai-search-box i { color: var(--primary); font-size: 20px; }
.ai-search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: #111827; font-weight: 700; }
.ai-prompt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #111827; }
.ai-prompt-head span { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; }
.ai-prompt-head i { color: var(--primary); }
.ai-prompt-head small { color: #667085; font-weight: 700; }
.ai-prompt-list { display: grid; gap: 10px; max-height: calc(100vh - 340px); overflow: auto; padding-right: 4px; }
.ai-prompt-tile { min-height: 54px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid #e5ebf4; border-radius: 12px; background: linear-gradient(135deg, #fff, #fbfcff); text-align: left; }
.ai-prompt-tile:hover { border-color: rgba(23, 107, 135, .35); background: rgba(23, 107, 135, .05); }
.ai-prompt-tile span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--primary); background: rgba(23, 107, 135, .1); }
.ai-prompt-tile strong { min-width: 0; color: #1b2433; font-size: 13px; font-weight: 800; line-height: 1.35; }
.ai-prompt-tile > i { color: var(--primary); font-size: 13px; }
.ai-empty-prompts { padding: 22px 10px; color: #667085; text-align: center; }
.ai-chat-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; padding: 16px; background: linear-gradient(180deg, #fff, #f8fbff); }
.ai-chat-stream { display: grid; align-content: start; gap: 12px; overflow: auto; padding-right: 4px; }
.ai-message { display: flex; align-items: flex-start; gap: 10px; max-width: min(760px, 92%); }
.ai-message-bot { justify-self: start; padding: 12px; border: 1px solid rgba(23, 107, 135, .14); border-radius: 14px; background: rgba(23, 107, 135, .05); }
.ai-message-bot strong,
.ai-message-user strong { display: block; color: #1b2433; font-weight: 800; }
.ai-message-bot p { margin: 4px 0 0; color: #667085; font-size: 13px; }
.ai-avatar { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: #fff; background: var(--primary); }
.ai-message-user { justify-self: end; margin-left: auto; padding: 12px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--primary), #0f3d4d); box-shadow: 0 10px 18px rgba(23, 107, 135, .18); }
.ai-message-user em { display: inline-flex; margin-bottom: 8px; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.18); color: #fff; font-size: 11px; font-style: normal; font-weight: 800; }
.ai-message-user strong { color: #fff; }
.ai-sub-list { display: grid; gap: 7px; margin-top: 10px; }
.ai-sub-list span { padding: 8px 10px; border: 1px solid rgba(255,255,255,.22); border-radius: 9px; background: rgba(255,255,255,.14); font-size: 13px; font-weight: 700; }
.ai-answer-group { justify-self: start; width: min(820px, 94%); display: grid; gap: 10px; padding: 12px; border: 1px solid rgba(23, 107, 135, .14); border-radius: 14px; background: #fcfdff; }
.ai-answer-title { display: inline-flex; align-items: center; gap: 8px; color: #1b2433; font-weight: 800; }
.ai-answer-title i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; color: var(--primary); background: rgba(23, 107, 135, .1); }
.ai-answer-card { display: grid; gap: 8px; padding: 12px; border: 1px solid #e8edf5; border-radius: 12px; background: #fff; box-shadow: 0 6px 14px rgba(15, 23, 42, .04); }
.ai-answer-card strong { color: #1b2433; font-weight: 800; }
.ai-answer-card p { margin: 0; color: #344054; font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.ai-answer-card b { color: #111827; font-weight: 800; }
.ai-working,
.ai-ready { display: inline-flex; align-items: center; gap: 7px; color: #475467; font-size: 13px; font-weight: 700; }
.ai-ready i { color: var(--primary); }
.ai-working i { color: #d97706; }
.ai-typing span { animation: aiDot 1s infinite; }
.ai-typing span:nth-child(2) { animation-delay: .15s; }
.ai-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes aiDot {
    0%, 80%, 100% { opacity: .2; }
    40% { opacity: 1; }
}

.member-report-page,
.member-report-card-page,
.collection-report-page {
    display: grid;
    gap: 14px;
}
.member-report-page .report-page-head,
.member-report-page .report-summary-card,
.member-report-page .report-head-actions,
.member-report-card-page .report-page-head,
.member-report-card-page .report-summary-card,
.member-report-card-page .report-head-actions,
.collection-report-page .report-page-head,
.collection-report-page .report-summary-card,
.collection-report-page .report-head-actions {
    display: none !important;
}
.member-report-page .dt-length,
.member-report-page .dt-search,
.member-report-page .dt-info,
.member-report-page .dt-paging,
.member-report-page .dt-buttons,
.member-report-card-page .dt-length,
.member-report-card-page .dt-search,
.member-report-card-page .dt-info,
.member-report-card-page .dt-paging,
.member-report-card-page .dt-buttons,
.collection-report-page .dt-length,
.collection-report-page .dt-search,
.collection-report-page .dt-info,
.collection-report-page .dt-paging,
.collection-report-page .dt-buttons {
    display: none !important;
}
.member-report-page .report-page-head,
.member-report-card-page .report-page-head,
.collection-report-page .report-page-head {
    min-height: 0;
    padding: 16px 18px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(239, 77, 65, .07), #fff 58%);
}
.member-report-page .report-page-head h1,
.member-report-card-page .report-page-head h1,
.collection-report-page .report-page-head h1 {
    margin-top: 8px;
    font-size: 24px;
    line-height: 1.1;
}
.member-report-page .report-page-head p,
.member-report-card-page .report-page-head p,
.collection-report-page .report-page-head p {
    margin-top: 5px;
    font-size: 13px;
}
.report-member-filter {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e2eaf4;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
}
.report-member-filter label {
    flex: 1 1 260px;
    display: grid;
    gap: 6px;
    min-width: 220px;
}
.report-member-filter span {
    color: #536079;
    font-size: 12px;
    font-weight: 800;
}
.report-member-filter input,
.report-member-filter select {
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #d4deea;
    border-radius: 9px;
    outline: 0;
    font-weight: 700;
}
.report-member-filter button,
.report-member-filter a {
    flex: 0 0 auto;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border: 0;
    border-radius: 9px;
    font-weight: 900;
    white-space: nowrap;
}
.report-member-filter button {
    color: #fff;
    background: #176b87;
}
.report-member-filter a {
    color: #176b87;
    background: rgba(23, 107, 135, .09);
}

.report-member-filter .report-action-btn {
    min-height: 42px;
    padding: 0 16px;
}

.collection-report-page .collection-date-field {
    min-width: 180px;
}

@media (max-width: 991.98px) {
    .report-member-filter {
        flex-direction: column;
        align-items: stretch;
    }

    .report-member-filter button,
    .report-member-filter a,
    .report-member-filter .report-action-btn {
        width: 100%;
    }
}
.member-report-pagination {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 4px 0 10px;
}
.member-report-pagination form {
    margin: 0;
}
.member-report-pagination button {
    align-items: center;
    background: #176b87;
    border: 0;
    border-radius: 10px;
    color: #fff;
    display: inline-flex;
    font-weight: 900;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
}
.member-report-pagination button:disabled {
    opacity: .45;
}
.member-report-pagination span {
    color: #526178;
    font-size: 13px;
    font-weight: 800;
}
.report-member-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
    padding: 0 10px 18px;
}
.report-member-card {
    display: grid;
    gap: 9px;
    padding: 10px 10px 8px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
}
.report-member-card header {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) auto;
    align-items: start;
    gap: 11px;
}
.report-member-card img,
.report-member-avatar {
    width: 68px;
    height: 68px;
    border-radius: 8px;
    object-fit: cover;
    background: #e7f6ef;
}
.report-member-avatar {
    display: grid;
    place-items: center;
    color: #176b87;
    font-size: 20px;
    font-weight: 900;
}
.report-member-card header strong {
    display: block;
    color: #182235;
    font-size: 14px;
    font-weight: 700;
}
.report-member-card header span {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: #5f6b7a;
    font-size: 12px;
    font-weight: 600;
}
.report-member-card header i {
    color: #ef4d41;
}
.report-member-card aside {
    display: grid;
    justify-items: end;
    gap: 6px;
}
.report-member-card aside b {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 10px;
    border-radius: 9px;
    color: #fff;
    background: #ef4d41;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 8px 16px rgba(239, 77, 65, .2);
}
.report-member-card aside span {
    color: #ef4d41;
    font-size: 12px;
    font-weight: 700;
}
.report-member-plan {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 18px;
    padding: 11px 10px 10px;
    border: 1px solid #ffbab2;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(239, 77, 65, .12), #fff 58%);
}
.report-member-plan div {
    min-width: 0;
}
.report-member-plan span {
    display: block;
    color: #8a94a6;
    font-size: 11px;
    font-weight: 600;
}
.report-member-plan strong {
    display: block;
    margin-top: 2px;
    color: #293548;
    font-size: 12px;
    font-weight: 650;
    word-break: break-word;
}
.report-member-plan strong.danger {
    color: #ef4d41;
}
.report-member-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 13px;
    padding: 8px 10px 0;
    border-top: 1px solid #f2d4cf;
    overflow-x: auto;
    scrollbar-width: thin;
}
.report-member-action {
    min-width: max-content;
    min-height: 32px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0;
    border-radius: 0;
    color: #ef4d41;
    background: transparent;
    font-size: 11px;
    font-weight: 600;
}
.report-member-action:hover {
    color: #d93e33;
    background: transparent;
}
.report-member-action i {
    font-size: 15px;
}
.report-member-action.disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

.member-filter-bar {
    display: grid;
    grid-template-columns: minmax(180px, 260px) minmax(240px, 1fr) auto auto;
    align-items: end;
    gap: 12px;
    padding: 14px;
    border: 1px solid #e2eaf4;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .04);
}
.member-filter-bar label {
    display: grid;
    gap: 6px;
}
.member-filter-bar span {
    color: #536079;
    font-size: 12px;
    font-weight: 800;
}
.member-filter-bar input,
.member-filter-bar select {
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #d4deea;
    border-radius: 9px;
    outline: 0;
}
.member-filter-bar button,
.member-filter-bar a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border: 0;
    border-radius: 9px;
    font-weight: 800;
}
.member-filter-bar button { color: #fff; background: var(--primary); }
.member-filter-bar a { color: var(--primary); background: rgba(23, 107, 135, .09); }
.member-table-card {
    border: 1px solid #e2eaf4;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .04);
    overflow: hidden;
}
.member-web-table { margin: 0; min-width: 1120px; }
.member-web-table thead th {
    padding: 13px 14px;
    color: #536079;
    background: #f8fafc;
    border-bottom: 1px solid #e2eaf4;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}
.member-web-table tbody td {
    padding: 14px;
    color: #1f2937;
    border-bottom: 1px solid #eef2f7;
    vertical-align: middle;
}
.member-web-table tbody tr:last-child td { border-bottom: 0; }
.member-web-table strong { display: block; color: #0f172a; font-weight: 900; }
.member-web-table small { display: block; margin-top: 3px; color: #667085; font-size: 12px; }
.member-web-table span { display: block; color: #334155; font-weight: 700; }
.member-action-strip {
    display: flex;
    align-items: center;
    gap: 7px;
    max-width: 560px;
    overflow-x: auto;
    padding-bottom: 3px;
}
.member-action-btn {
    min-width: max-content;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    color: #176b87;
    background: rgba(23, 107, 135, .09);
    font-size: 12px;
    font-weight: 900;
}
.member-action-btn:hover { color: #fff; background: var(--primary); }
.member-action-btn.disabled {
    color: #98a2b3;
    background: #f3f4f6;
    cursor: not-allowed;
    pointer-events: none;
}
.member-action-btn .bi-trash3,
.member-action-btn .bi-ban { color: #ef4444; }
.member-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}
.member-pagination a,
.member-pagination button,
.member-pagination span {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: 999px;
    border: 1px solid #dce5ef;
    background: #fff;
    color: #334155;
    font-weight: 800;
}
.member-pagination form { margin: 0; }
.member-pagination button { cursor: pointer; }
.member-pagination a:not(.disabled),
.member-pagination button:not(.disabled) { color: #fff; border-color: var(--primary); background: var(--primary); }
.member-pagination .disabled { opacity: .48; pointer-events: none; }

.member-management-page {
    display: grid;
    gap: 12px;
}
.member-management-page .report-page-head {
    min-height: 0;
    padding: 16px 18px;
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(23, 107, 135, .07), rgba(255, 255, 255, .98) 56%),
        #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}
.member-management-page .report-kicker {
    font-size: 11px;
}
.member-management-page .report-page-head h1 {
    margin-top: 8px;
    font-size: 24px;
    line-height: 1.1;
}
.member-management-page .report-page-head p {
    margin-top: 5px;
    font-size: 13px;
}
.member-management-page .report-head-actions {
    gap: 10px;
}
.member-management-page .report-action-btn {
    min-height: 40px;
    padding: 9px 14px;
    border-radius: 9px;
}
.member-management-page .report-summary-card {
    display: none;
}
.member-management-page .report-metric-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
}
.member-management-page .report-metric-row div {
    min-height: 72px;
    padding: 14px 18px;
}
.member-management-page .report-metric-row strong {
    font-size: 24px;
}
.member-management-page .member-filter-bar {
    grid-template-columns: 260px minmax(260px, 1fr) 112px 96px;
    padding: 12px 14px;
    border-radius: 12px;
}
.member-management-page .member-table-card {
    border-radius: 12px;
}
.member-management-page .member-web-table {
    min-width: 1440px;
}
.member-management-page .member-web-table thead th {
    padding: 11px 14px;
    background: #f6f9fc;
}
.member-management-page .member-web-table tbody td {
    padding: 12px 14px;
}
.member-management-page .member-web-table th:nth-child(6),
.member-management-page .member-web-table td:nth-child(6) {
    width: 620px;
}
.member-management-page .member-action-strip {
    max-width: none;
    flex-wrap: wrap;
    gap: 6px;
    overflow: visible;
    padding-bottom: 0;
}
.member-management-page .member-action-btn {
    min-height: 30px;
    padding: 6px 9px;
    border-radius: 8px;
    font-size: 11px;
}
.member-management-page .member-action-btn i {
    font-size: 12px;
}
.member-management-page .member-action-btn.disabled {
    opacity: .48;
}
.member-management-page .member-pagination {
    padding-bottom: 4px;
}
.member-list-card-page .report-page-head,
.member-list-card-page .report-summary-card,
.member-list-card-page .report-metric-row {
    display: none;
}
.member-list-card-page .member-filter-bar {
    margin: 0 10px 12px;
    padding: 14px;
    border-color: #d9e4f1;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}
.member-list-card-page .member-filter-bar span {
    color: #344054;
    font-size: 12px;
    font-weight: 900;
}
.member-list-card-page .member-filter-bar input,
.member-list-card-page .member-filter-bar select {
    min-height: 46px;
    color: #111827;
    font-size: 15px;
    font-weight: 650;
    background: #fff;
}
.member-list-card-page .member-card-grid {
    padding-top: 0;
}
.member-list-card-page .member-card-view {
    min-width: 0;
    gap: 10px;
    padding: 12px;
    border: 1px solid #eef2f7;
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
}
.member-list-card-page .member-card-view:hover {
    border-color: #ffd2cc;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .1);
}
.member-list-card-page .member-card-view header {
    grid-template-columns: 68px minmax(0, 1fr) auto;
    min-height: 68px;
}
.member-list-card-page .member-card-view .report-member-avatar {
    grid-column: 1;
    grid-row: 1;
}
.member-list-card-page .member-card-view img {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 1;
}
.member-list-card-page .member-card-view header strong {
    color: #101828;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.25;
}
.member-list-card-page .member-card-view header span {
    color: #667085;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
}
.member-list-card-page .member-card-view header span i {
    color: #ef4d41;
    font-size: 12px;
}
.member-list-card-page .member-card-view aside b {
    min-width: 58px;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
}
.member-list-card-page .member-card-view aside span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #ef4d41;
    font-size: 12px;
    font-weight: 800;
}
.member-list-card-page .report-member-plan {
    grid-template-columns: 1.25fr 1.15fr 1.2fr 1.2fr;
    gap: 12px 22px;
    padding: 13px 14px;
    border-color: #ffb8b1;
    background: linear-gradient(90deg, rgba(239, 77, 65, .12), rgba(255, 255, 255, .96) 60%);
}
.member-list-card-page .report-member-plan div:nth-child(n+5) {
    margin-top: 2px;
}
.member-list-card-page .report-member-plan span {
    color: #7b8798;
    font-size: 11px;
    font-weight: 800;
}
.member-list-card-page .report-member-plan strong {
    color: #111827;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
}
.member-list-card-page .report-member-plan strong.danger {
    color: #ef4d41;
}
.member-list-card-page .member-card-actions {
    gap: 14px;
    min-height: 48px;
    padding: 9px 10px 2px;
    border-top-color: #f0d4cf;
}
.member-list-card-page .member-card-actions .report-member-action.disabled {
    display: none;
}
.member-list-card-page .member-card-actions .report-member-action {
    min-height: 36px;
    color: #ef4d41;
    font-size: 11px;
    font-weight: 750;
}
.member-list-card-page .member-card-actions .report-member-action i {
    font-size: 16px;
}
.member-list-card-page .member-card-actions .report-member-action:hover {
    color: #bd2f26;
}
.member-list-card-page .member-pagination {
    margin: 2px 10px 16px;
}

.member-list-card-page .membership-dashboard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 10px 10px;
}
.member-list-card-page .membership-dashboard-head h1 {
    margin: 0;
    color: #4b5563;
    font-size: 28px;
    font-weight: 500;
    letter-spacing: 0;
}
.member-list-card-page .membership-dashboard-head p {
    margin: 3px 0 0;
    color: #667085;
    font-size: 13px;
    font-weight: 600;
}
.member-list-card-page .membership-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.member-list-card-page .membership-add-btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), #e09b5e);
    box-shadow: 0 10px 22px rgba(23, 107, 135, .18);
    font-size: 13px;
    font-weight: 800;
}
.member-list-card-page .membership-add-btn i,
.member-list-card-page .membership-filter-actions button i,
.member-list-card-page .membership-head-toggle i {
    width: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
}
.member-list-card-page .membership-head-toggle {
    border: 0;
    cursor: pointer;
    gap: 10px;
}
.member-list-card-page .membership-filter-group {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
}
.member-list-card-page .membership-stat-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(140px, 1fr));
    gap: 10px;
    margin: 0 10px 16px;
}
.member-list-card-page .membership-stat-form {
    min-width: 0;
    margin: 0;
}
.member-list-card-page .membership-stat-card {
    width: 100%;
    min-height: 68px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    padding: 11px 14px;
    border: 1px solid #dfe7f1;
    border-left: 3px solid var(--primary);
    border-radius: 9px;
    color: #111827;
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .055);
    cursor: pointer;
    text-align: left;
}
.member-list-card-page .membership-stat-card i {
    grid-row: 1 / 3;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--primary);
    background: rgba(23, 107, 135, .1);
    font-size: 18px;
}
.member-list-card-page .membership-stat-card strong {
    color: inherit;
    font-size: 22px;
    font-weight: 750;
    line-height: 1;
}
.member-list-card-page .membership-stat-card span {
    color: #667085;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: uppercase;
}
.member-list-card-page .membership-stat-card.green { border-left-color: #16a34a; }
.member-list-card-page .membership-stat-card.green i { color: #16a34a; background: rgba(22, 163, 74, .11); }
.member-list-card-page .membership-stat-card.red { border-left-color: #ef4444; }
.member-list-card-page .membership-stat-card.red i { color: #ef4444; background: rgba(239, 68, 68, .1); }
.member-list-card-page .membership-stat-card.orange { border-left-color: #f97316; }
.member-list-card-page .membership-stat-card.orange i { color: #f97316; background: rgba(249, 115, 22, .11); }
.member-list-card-page .membership-stat-card.active {
    background: #edf5fc;
    border-color: #b9d5eb;
    border-left-color: #2f85c8;
}
.member-list-card-page .membership-filter-bar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 0 10px 14px;
    padding: 12px 14px;
    border-radius: 11px;
}
.member-list-card-page .membership-filter-title {
    width: max-content;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    color: #176b87;
    background: rgba(23, 107, 135, .08);
    font-size: 12px;
    font-weight: 850;
}
.member-list-card-page .membership-filter-row {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(180px, 1.2fr) minmax(160px, 1fr) minmax(140px, .8fr);
    gap: 8px;
    align-items: end;
}
.member-list-card-page .membership-filter-row.secondary {
    grid-template-columns: 170px 150px 150px minmax(220px, 1fr) 104px 94px;
}
.member-list-card-page .membership-filter-row.secondary[data-member-search-panel] {
    width: 100%;
    grid-template-columns: minmax(400px, 1fr) auto;
    justify-self: stretch;
    align-items: end;
}
.member-list-card-page .membership-filter-row.secondary[data-member-search-panel] .membership-search-field {
    min-width: 0;
}
.member-list-card-page .membership-filter-row.secondary[data-member-search-panel] .membership-search-field input {
    width: 100%;
}
.member-list-card-page .membership-filter-row.secondary[data-member-search-panel] .membership-filter-actions {
    justify-self: end;
    align-self: end;
}
.member-list-card-page .membership-filter-bar label {
    min-width: 0;
    gap: 4px;
}
.member-list-card-page .membership-filter-bar span {
    color: #536079;
    font-size: 11px;
    font-weight: 800;
}
.member-list-card-page .membership-filter-bar input,
.member-list-card-page .membership-filter-bar select {
    width: 400px;
    max-width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 7px;
    color: #172033;
    font-size: 13px;
    font-weight: 600;
}
.member-list-card-page .membership-filter-bar button,
.member-list-card-page .membership-filter-bar a {
    min-height: 38px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 800;
}
.member-list-card-page .membership-filter-bar button {
    color: #fff;
    background: #1b7891;
}
.member-list-card-page .membership-filter-bar .membership-reset-btn {
    color: #536079;
    background: #fff;
    border: 1px solid #d6e0ec;
}
.member-list-card-page .membership-filter-bar a {
    color: #536079;
    background: #fff;
    border: 1px solid #d6e0ec;
}
.member-list-card-page .member-table-card {
    margin: 0 10px;
}
.member-list-card-page .member-table-card .dt-layout-row:last-child,
.member-list-card-page .member-table-card .dt-info,
.member-list-card-page .member-table-card .dt-paging {
    display: none !important;
}
.member-list-card-page .member-web-table {
    min-width: 1280px;
    font-size: 13px;
}
.member-list-card-page .member-web-table thead th {
    padding: 10px 11px;
    color: #243b5a;
    font-size: 11px;
    font-weight: 800;
}
.member-list-card-page .member-web-table tbody td {
    padding: 11px;
    line-height: 1.45;
}
.member-list-card-page .member-web-table th:nth-child(6),
.member-list-card-page .member-web-table td:nth-child(6) {
    width: auto;
    min-width: 150px;
}
.member-list-card-page .member-web-table th:last-child,
.member-list-card-page .member-web-table td:last-child {
    width: 310px;
}
.member-list-card-page .member-table-image,
.member-list-card-page .member-table-avatar {
    width: 66px;
    height: 66px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    border: 1px solid #e5edf6;
    background: #f8fafc;
    box-shadow: 0 6px 14px rgba(15, 23, 42, .08);
    object-fit: cover;
}
.member-list-card-page .member-image-open {
    display: inline-flex;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: transparent;
    cursor: zoom-in;
}
.member-list-card-page .member-image-open:focus-visible {
    outline: 3px solid rgba(23, 107, 135, .24);
    outline-offset: 3px;
}
.member-list-card-page .member-table-avatar {
    color: #176b87;
    font-size: 18px;
    font-weight: 900;
}
.member-list-card-page .member-table-name {
    color: #1f2937;
    font-size: 13px;
    font-weight: 700;
}
.member-list-card-page .member-id-stack {
    display: grid;
    gap: 5px;
    color: #1f2937;
    font-size: 12px;
    font-weight: 700;
}
.member-list-card-page .member-id-stack span,
.member-list-card-page .member-id-stack small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1f2937;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}
.member-list-card-page .member-id-stack i {
    color: #667085;
    font-size: 13px;
}
.member-list-card-page .member-mobile-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1f2937;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.member-list-card-page .member-plan-name,
.member-list-card-page .member-plan-type {
    display: block;
    color: #1f2937;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}
.member-list-card-page .member-plan-type {
    margin-top: 3px;
    color: #667085;
    font-size: 12px;
    font-weight: 600;
}
.member-image-modal .modal-content {
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
}
.member-image-modal .modal-header {
    border-bottom: 1px solid #e6edf5;
    background: #f8fafc;
}
.member-image-modal .modal-title {
    color: #102638;
    font-size: 16px;
    font-weight: 800;
}
.member-image-modal .modal-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    padding: 18px;
    background: #0f172a;
}
.member-image-modal img {
    max-width: 100%;
    max-height: 72vh;
    border-radius: 10px;
    object-fit: contain;
    background: #fff;
}

/* Web app pages should use the available workspace, not a narrow mobile-style column. */
.content { padding-left: 8px; padding-right: 8px; }
.module-page,
.dashboard-page,
.report-web-page,
.support-web-page,
.ops-page,
.library-page,
.settings-page,
.profile-page,
.subscription-page,
.locker-page,
.seat-page,
.qr-page,
.qr-workspace,
.about-web-page,
.communication-page,
.refer-layout,
.login-history-page,
.share-page,
.rate-page,
.about-page,
.analytics-page {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* Current master add/edit form UI */
.master-page:has(.ajax-form.needs-validation) {
    background: #fbfbfc;
    border-radius: 0;
    margin: -8px 0 0;
    padding: 0 2px 0;
}
.master-page:has(.ajax-form.needs-validation) > .master-web-head.compact,
.master-page:has(.ajax-form.needs-validation) .notice-form-hero {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #dedede;
    border-radius: 0;
    box-shadow: none;
    margin: 0 0 20px;
    padding: 4px 14px 24px;
}
.master-page:has(.ajax-form.needs-validation) > .master-web-head.compact .master-kicker,
.master-page:has(.ajax-form.needs-validation) .notice-form-hero .master-kicker,
.master-page:has(.ajax-form.needs-validation) > .master-web-head.compact p,
.master-page:has(.ajax-form.needs-validation) .notice-form-hero p,
.master-page:has(.ajax-form.needs-validation) .notice-back-btn {
    display: none;
}
.master-page:has(.ajax-form.needs-validation) > .master-web-head.compact h1,
.master-page:has(.ajax-form.needs-validation) .notice-form-hero h1 {
    color: #5f6670;
    font-size: 36px;
    font-weight: 300;
    line-height: 1.2;
    margin: 0;
}
.master-form-stack,
.simple-editor-form,
.plan-editor-form,
.locker-editor-form,
.user-editor-form,
.notice-form-shell {
    display: block;
    margin: 0;
    max-width: none;
    width: 100%;
}
.master-form-card,
.simple-editor-card,
.plan-editor-card,
.locker-editor-card,
.user-editor-card,
.notice-editor-card {
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    margin: 0 0 14px;
    overflow: hidden;
    padding: 0;
}
.master-form-card h2,
.simple-editor-title,
.plan-editor-title,
.locker-editor-title,
.user-editor-title,
.user-collapse-title,
.notice-section-title {
    align-items: center;
    background: #eeeef6;
    border-bottom: 1px solid #d8d8d8;
    color: #2f3440;
    display: flex;
    font-size: 13px;
    gap: 10px;
    margin: 0;
    min-height: 35px;
    padding: 0 10px;
}
.master-form-card h2 span,
.simple-editor-title > span,
.plan-editor-title > span,
.locker-editor-title > span,
.user-editor-title > span,
.user-collapse-title > span,
.notice-section-title > span {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #7a7d84;
    font-size: 13px;
    height: auto;
    width: auto;
}
.simple-editor-title strong,
.plan-editor-title strong,
.locker-editor-title strong,
.user-editor-title strong,
.user-collapse-title strong,
.notice-section-title strong {
    color: #2f3440;
    font-size: 13px;
    font-weight: 400;
}
.simple-editor-title small,
.plan-editor-title small,
.locker-editor-title small,
.user-editor-title small,
.user-collapse-title small,
.notice-section-title small,
.master-form-card p,
.master-help {
    display: none;
}
.simple-form-grid,
.plan-form-grid,
.locker-form-grid,
.user-form-grid,
.notice-form-grid {
    display: grid;
    gap: 12px 30px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 16px 30px;
}
.master-form-stack {
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    display: grid;
    gap: 12px 30px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 16px 30px;
}
.master-form-stack .master-form-card {
    border: 0;
    box-shadow: none;
    margin: 0;
    overflow: visible;
    padding: 0;
}
.master-form-stack .master-form-card h2 {
    grid-column: 1 / -1;
}
.master-label,
.simple-field > span,
.plan-field > span,
.locker-field > span,
.user-field > span,
.user-gender-field > span,
.notice-field > span {
    color: #000;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
    text-transform: none;
}
.simple-field,
.plan-field,
.locker-field,
.user-field,
.notice-field {
    display: grid;
    gap: 6px;
    margin: 0;
}
.simple-field div,
.plan-field div,
.locker-field div,
.user-field div,
.master-field,
.notice-select-toggle {
    background: #fff;
    border: 1px solid #cfcfcf;
    border-radius: 0;
    box-shadow: none;
    min-height: 34px;
    padding: 5px 8px;
}
.simple-field i,
.plan-field i,
.locker-field i,
.user-field i,
.master-field i {
    display: none;
}
.simple-field input,
.simple-field select,
.simple-field textarea,
.plan-field input,
.plan-field select,
.plan-field textarea,
.locker-field input,
.locker-field select,
.locker-field textarea,
.user-field input,
.user-field select,
.user-field textarea,
.master-field input,
.master-field select,
.master-field textarea,
.master-field .form-control,
.notice-field input,
.notice-field textarea {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #6b7280;
    font-size: 14px;
    font-weight: 400;
    min-height: 22px;
    outline: 0;
    padding: 0;
}
.notice-field input,
.notice-field textarea {
    background: #fff;
    border: 1px solid #cfcfcf;
    min-height: 34px;
    padding: 5px 8px;
    width: 100%;
}
.simple-field:focus-within div,
.plan-field:focus-within div,
.locker-field:focus-within div,
.user-field:focus-within div,
.master-field:focus-within,
.notice-field input:focus,
.notice-field textarea:focus {
    background: #fff;
    border-color: #9fb8d5;
    box-shadow: 0 0 0 2px rgba(13,110,253,.08);
}
.simple-field div.textarea,
.plan-field div.textarea,
.user-field div.textarea {
    align-items: flex-start;
    padding-top: 5px;
}
.simple-field textarea,
.plan-field textarea,
.user-field textarea,
.notice-field textarea {
    min-height: 54px;
}
.simple-field-full,
.plan-field-full,
.locker-field-full,
.user-field-full,
.notice-field-full {
    grid-column: 1 / -1;
}
.master-submit-card,
.simple-submit-card,
.plan-submit-card,
.locker-submit-card,
.user-submit-card,
.notice-submit-row {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: grid;
    gap: 30px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    justify-content: stretch;
    margin: 0;
    padding: 0 30px 16px;
}
.master-form-stack .master-submit-card {
    grid-column: 1 / -1;
    padding: 62px 0 0;
}
.master-cancel-btn,
.notice-cancel-btn {
    display: none;
}
.master-submit-btn,
.notice-submit-btn {
    background: #ffb743;
    border: 0;
    border-radius: 4px;
    box-shadow: none;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    gap: 0;
    min-height: 34px;
    text-transform: lowercase;
    width: 100%;
}
.master-submit-btn i,
.notice-submit-btn i {
    display: none;
}
.master-submit-btn:hover,
.notice-submit-btn:hover {
    background: #f6a832;
    color: #fff;
}
.library-form-page {
    background: #fbfbfc;
}
.library-form-page .library-page-head {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #dedede;
    border-radius: 0;
    box-shadow: none;
    margin: 0 0 20px;
    padding: 4px 14px 24px;
}
.library-form-page .library-page-head .ops-kicker,
.library-form-page .library-page-head p,
.library-form-page .library-page-head .ops-secondary-btn {
    display: none;
}
.library-form-page .library-page-head h1 {
    color: #5f6670;
    font-size: 36px;
    font-weight: 300;
    line-height: 1.2;
    margin: 0;
}
.library-form-shell {
    display: block;
    max-width: none;
}
.library-form-card,
.library-settings-card,
.library-terms-note {
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    margin: 0 0 14px;
}
.library-form-grid {
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    display: grid;
    gap: 12px 30px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 14px;
    padding: 16px 30px;
}
.library-form-page .form-field {
    display: grid;
    gap: 6px;
    margin: 0;
}
.library-form-page .form-field span {
    color: #000;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.2;
}
.library-form-page .form-field input,
.library-form-page .form-field select,
.library-form-page .form-field textarea {
    background: #fff;
    border: 1px solid #cfcfcf;
    border-radius: 0;
    box-shadow: none;
    color: #6b7280;
    font-size: 14px;
    font-weight: 400;
    min-height: 34px;
    outline: 0;
    padding: 5px 8px;
    width: 100%;
}
.library-form-page .form-field input:focus,
.library-form-page .form-field select:focus,
.library-form-page .form-field textarea:focus {
    border-color: #9fb8d5;
    box-shadow: 0 0 0 2px rgba(13,110,253,.08);
}
.library-submit-btn {
    background: #ffb743;
    border: 0;
    border-radius: 4px;
    box-shadow: none;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    min-height: 34px;
    text-transform: lowercase;
    width: calc((100% - 30px) / 2);
}
.library-submit-btn i {
    display: none;
}

/* Current table UI */
.plan-table-card,
.user-table-card,
.simple-master-table-card,
.active-plan-table-card,
.master-data-table-card,
.data-panel,
.report-table-card {
    background: #fff;
    border: 1px solid #d7e3f0;
    border-radius: 12px;
    box-shadow: none;
    margin-top: 8px;
    overflow: hidden;
    padding: 20px 22px;
}
.plan-table-card .table-responsive,
.user-table-card .table-responsive,
.simple-master-table-card .table-responsive,
.active-plan-table-card .table-responsive,
.master-data-table-card .table-responsive,
.data-panel .table-responsive,
.report-table-card .table-responsive {
    background: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}
.datatable,
.plan-web-table,
.user-web-table,
.simple-master-table,
.active-plan-table,
.master-data-table,
.report-table {
    border-collapse: collapse;
    border-spacing: 0;
    color: #123252;
    margin: 0 !important;
    min-width: 920px;
    width: 100% !important;
}
.datatable thead th,
.plan-web-table thead th,
.user-web-table thead th,
.simple-master-table thead th,
.active-plan-table thead th,
.master-data-table thead th,
.report-table thead th {
    background: #f6f9fc !important;
    border: 1px solid #dce6ef !important;
    border-bottom: 3px solid #d6e1eb !important;
    border-radius: 0 !important;
    color: #173759;
    font-size: 13px;
    font-weight: 800;
    padding: 12px 10px !important;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}
.datatable tbody td,
.plan-web-table tbody td,
.user-web-table tbody td,
.simple-master-table tbody td,
.active-plan-table tbody td,
.master-data-table tbody td,
.report-table tbody td {
    background: #fff;
    border: 1px solid #e0e8f1;
    color: #123252;
    font-size: 13.5px;
    font-weight: 400;
    padding: 12px 10px !important;
    vertical-align: middle;
}
.datatable tbody tr:hover td,
.plan-web-table tbody tr:hover td,
.user-web-table tbody tr:hover td,
.simple-master-table tbody tr:hover td,
.active-plan-table tbody tr:hover td,
.master-data-table tbody tr:hover td,
.report-table tbody tr:hover td {
    background: #fbfdff;
    box-shadow: none;
}
.plan-name-cell,
.user-name-cell,
.simple-name-cell {
    gap: 8px;
    min-width: 0;
}
.plan-name-cell i,
.user-name-cell i,
.simple-name-cell i {
    display: none;
}
.plan-name-cell strong,
.user-name-cell strong {
    color: #0d5eb8;
    font-size: 13.5px;
    font-weight: 700;
}
.plan-type-pill,
.plan-duration,
.user-type-pill,
.simple-pill,
.status-pill {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #123252;
    font-size: 13px;
    font-weight: 400;
    min-height: auto;
    padding: 0;
}
.plan-description,
.user-email-cell {
    color: #123252;
    font-size: 13px;
    font-weight: 400;
    max-width: 260px;
}
.plan-amount {
    color: #123252;
    font-size: 13.5px;
    font-weight: 400;
}
.plan-table-actions,
.user-table-actions,
.simple-actions,
.master-table-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    min-width: 0;
}
.plan-action,
.user-action,
.simple-action,
.master-table-action {
    align-items: center;
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    color: #fff;
    display: inline-flex;
    font-size: 0;
    gap: 0;
    height: 30px;
    justify-content: center;
    min-height: 30px;
    padding: 0;
    text-decoration: none;
    width: 30px;
}
.plan-action i,
.user-action i,
.simple-action i,
.master-table-action i {
    color: #fff;
    font-size: 14px;
}
.plan-action span,
.user-action span {
    display: none;
}
.plan-action.edit,
.user-action.edit,
.simple-action.edit,
.master-table-action.edit {
    background: #f0a33a;
    color: #fff;
}
.plan-action.delete,
.user-action.delete,
.simple-action.delete,
.master-table-action.delete {
    background: #e53935;
    color: #fff;
}
.user-action.profile { background: #5f538b; }
.user-action.permissions { background: #4bb8d3; }
.user-action.sync { background: #244968; }
.user-action.enroll { background: #222; }
.plan-action:hover,
.user-action:hover,
.simple-action:hover,
.master-table-action:hover {
    color: #fff;
    filter: brightness(.94);
    transform: none;
}
.dt-container {
    color: #2d4059;
}
.dt-container .dt-layout-row:first-child {
    align-items: center;
    background: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);
    margin: 0 0 14px !important;
    padding: 0;
}
.plan-table-card .dt-layout-row:first-child,
.user-table-card .dt-layout-row:first-child,
.simple-master-table-card .dt-layout-row:first-child,
.active-plan-table-card .dt-layout-row:first-child,
.master-data-table-card .dt-layout-row:first-child,
.data-panel .dt-layout-row:first-child,
.report-table-card .dt-layout-row:first-child {
    background: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);
    margin: 0 0 14px !important;
    padding: 0;
}
.dt-container .dt-layout-row:last-child {
    align-items: center;
    margin: 14px 0 0 !important;
}
.dt-container .dt-layout-cell {
    width: auto;
}
.dt-container .dt-layout-cell.dt-layout-start {
    justify-self: start;
}
.dt-container .dt-layout-cell.dt-layout-full {
    justify-self: center;
    width: auto;
}
.dt-container .dt-layout-cell.dt-layout-end {
    justify-self: end;
}
.dt-length,
.dt-search {
    align-items: center;
    color: #41516a;
    display: flex;
    font-size: 13px;
    gap: 6px;
}
.dt-length select {
    background-color: #fff;
    border: 1px solid #d7e0ea;
    border-radius: 8px;
    color: #6b7280;
    font-size: 13px;
    min-height: 38px;
    min-width: 74px;
    padding: 5px 12px;
}
.dt-search input {
    background: #fff;
    border: 1px solid #cfd9e6;
    border-radius: 0;
    box-shadow: none;
    color: #111827;
    min-height: 36px;
    min-width: 184px;
    padding: 6px 9px;
}
.plan-table-card .dt-search input,
.user-table-card .dt-search input,
.simple-master-table-card .dt-search input,
.active-plan-table-card .dt-search input,
.master-data-table-card .dt-search input,
.data-panel .dt-search input,
.report-table-card .dt-search input {
    background: #fff;
    border: 1px solid #cfd9e6;
    border-radius: 0;
    box-shadow: none;
    color: #111827;
    min-height: 36px;
    min-width: 184px;
    padding: 6px 9px;
}
.dt-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    justify-content: center;
}
.dt-buttons .btn {
    background: #276f97;
    border: 0;
    border-radius: 7px;
    box-shadow: 0 4px 10px rgba(39,111,151,.22);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    min-height: 36px;
    padding: 7px 15px;
}
.plan-table-card .dt-buttons .btn,
.user-table-card .dt-buttons .btn,
.simple-master-table-card .dt-buttons .btn,
.active-plan-table-card .dt-buttons .btn,
.master-data-table-card .dt-buttons .btn,
.data-panel .dt-buttons .btn,
.report-table-card .dt-buttons .btn {
    background: #276f97;
    border: 0;
    border-radius: 7px;
    box-shadow: 0 4px 10px rgba(39,111,151,.22);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    min-height: 36px;
    padding: 7px 15px;
}
.dt-buttons .btn:hover {
    background: #1f5f83;
    color: #fff;
}
.plan-table-card .dt-buttons .btn:hover,
.user-table-card .dt-buttons .btn:hover,
.simple-master-table-card .dt-buttons .btn:hover,
.active-plan-table-card .dt-buttons .btn:hover,
.master-data-table-card .dt-buttons .btn:hover,
.data-panel .dt-buttons .btn:hover,
.report-table-card .dt-buttons .btn:hover {
    background: #1f5f83;
    color: #fff;
}
.dt-info {
    color: #64748b;
    font-size: 13px;
    font-weight: 400;
}
.dt-paging .page-link {
    border-radius: 4px;
    color: #276f97;
    font-size: 13px;
    margin: 0 2px;
}
.dt-paging .active .page-link {
    background: #276f97;
    border-color: #276f97;
    color: #fff;
}
.member-web-table {
    min-width: 1320px;
}
.member-table-card .dt-container {
    width: 100%;
}
.member-table-image {
    background: #fff;
    border: 1px solid #dfe8f2;
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(15,23,42,.08);
    display: block;
    height: 92px;
    margin: 0 auto;
    object-fit: cover;
    width: 96px;
}
.member-table-avatar {
    align-items: center;
    background: #eef4fb;
    border: 1px solid #dfe8f2;
    border-radius: 14px;
    color: #244968;
    display: flex;
    font-size: 28px;
    font-weight: 800;
    height: 92px;
    justify-content: center;
    margin: 0 auto;
    width: 96px;
}
.member-table-name {
    color: #0d5eb8;
    font-weight: 700;
}
.member-list-card-page .member-table-card .report-member-actions {
    align-items: center;
    border: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: flex-start;
    min-width: 284px;
    padding: 0;
}
.member-list-card-page .member-table-card .report-member-action {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #d8e2ee;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    color: #334155;
    display: inline-flex;
    font-size: 0;
    height: 34px;
    justify-content: center;
    min-height: 34px;
    padding: 0;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
    width: 34px;
}
.member-list-card-page .member-table-card .member-action-form,
.member-list-card-page .member-table-card .member-nav-form {
    display: inline-flex;
    margin: 0;
}
.member-list-card-page .member-table-card .report-member-action span {
    display: none;
}
.member-list-card-page .member-table-card .report-member-action i {
    color: currentColor;
    font-size: 15px;
}
.member-list-card-page .member-table-card .report-member-action.disabled {
    display: none;
}
.member-list-card-page .member-table-card .report-member-action:hover,
.member-list-card-page .member-table-card .report-member-action:focus-visible {
    box-shadow: 0 7px 16px rgba(15, 23, 42, .12);
    color: #fff;
    outline: 0;
    transform: translateY(-1px);
}
.member-list-card-page .member-table-card .report-member-action:hover i,
.member-list-card-page .member-table-card .report-member-action:focus-visible i {
    color: #fff !important;
}
.member-list-card-page .member-table-card .report-member-action.action-primary {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #155e9f;
}
.member-list-card-page .member-table-card .report-member-action.action-primary:hover,
.member-list-card-page .member-table-card .report-member-action.action-primary:focus-visible {
    background: #1769aa;
    border-color: #1769aa;
}
.member-list-card-page .member-table-card .report-member-action.action-success {
    background: #d7f8e5;
    border-color: #7bd69c;
    color: #126a34;
}
.member-list-card-page .member-table-card .report-member-action.action-success:hover,
.member-list-card-page .member-table-card .report-member-action.action-success:focus-visible {
    background: #16803d;
    border-color: #16803d;
}
.member-list-card-page .member-table-card .report-member-action.action-warning {
    background: #ffedc2;
    border-color: #f0b75d;
    color: #8a4a00;
}
.member-list-card-page .member-table-card .report-member-action.action-warning:hover,
.member-list-card-page .member-table-card .report-member-action.action-warning:focus-visible {
    background: #a05a00;
    border-color: #a05a00;
}
.member-list-card-page .member-table-card .report-member-action.action-danger {
    background: #ffe1e5;
    border-color: #f39aa7;
    color: #ad1f31;
}
.member-list-card-page .member-table-card .report-member-action.action-danger:hover,
.member-list-card-page .member-table-card .report-member-action.action-danger:focus-visible {
    background: #c12b3c;
    border-color: #c12b3c;
}
.member-list-card-page .member-table-card .report-member-action.action-info {
    background: #d9f3f8;
    border-color: #79cbd8;
    color: #0f6577;
}
.member-list-card-page .member-table-card .report-member-action.action-info:hover,
.member-list-card-page .member-table-card .report-member-action.action-info:focus-visible {
    background: #147084;
    border-color: #147084;
}
.member-list-card-page .member-table-card .report-member-action.action-whatsapp {
    background: #d8f8e6;
    border-color: #7ed59f;
    color: #0f7a3f;
}
.member-list-card-page .member-table-card .report-member-action.action-whatsapp:hover,
.member-list-card-page .member-table-card .report-member-action.action-whatsapp:focus-visible {
    background: #128c4a;
    border-color: #128c4a;
}
.member-list-card-page .member-table-card .report-member-action.action-neutral {
    background: #eef2f7;
    border-color: #bdc8d8;
    color: #334155;
}
.member-list-card-page .member-table-card .report-member-action.action-neutral:hover,
.member-list-card-page .member-table-card .report-member-action.action-neutral:focus-visible {
    background: #475569;
    border-color: #475569;
}
.member-list-card-page .member-action-modal .modal-content {
    border: 0;
    border-radius: 10px;
    box-shadow: 0 22px 55px rgba(15, 23, 42, .18);
}
.member-list-card-page .member-action-modal .modal-title {
    color: #1f2937;
    font-size: 16px;
    font-weight: 800;
}
.member-list-card-page .member-action-member {
    background: #eef2f7;
    border: 1px solid #d8e2ee;
    border-radius: 8px;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
    margin: 0 0 14px;
    padding: 9px 11px;
}
.member-list-card-page .member-action-field {
    display: grid;
    gap: 6px;
    margin-bottom: 13px;
}
.member-list-card-page .member-action-field span {
    color: #475569;
    font-size: 12px;
    font-weight: 600;
}
.member-list-card-page #memberMessageModal .modal-dialog {
    max-width: 520px;
}
.member-list-card-page #memberMessageModal .modal-content {
    border-radius: 12px;
    overflow: hidden;
}
.member-list-card-page #memberMessageModal .modal-body {
    padding: 16px;
}
.member-list-card-page #memberMessageModal .modal-footer {
    background: #ffffff;
    border-top: 1px solid #e4ebf3;
    gap: 9px;
    padding: 13px 16px 16px;
}
.member-list-card-page #memberMessageModal .modal-footer .btn {
    align-items: center;
    border-radius: 9px;
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 6px;
    justify-content: center;
    min-height: 38px;
    padding: 8px 16px;
}
.member-list-card-page #memberMessageModal .modal-footer .btn-light {
    background: #f8fafc;
    border-color: #eef2f7;
    color: #172033;
}
.member-list-card-page .member-message-header {
    background: #1f6f9d;
    border: 0;
    color: #ffffff;
    padding: 12px 16px;
}
.member-list-card-page .member-message-header .btn-close {
    filter: invert(1) grayscale(1);
    opacity: .88;
}
.member-list-card-page .member-message-heading {
    align-items: center;
    display: flex;
    gap: 10px;
    min-width: 0;
}
.member-list-card-page .member-message-avatar {
    align-items: center;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    width: 32px;
}
.member-list-card-page .member-message-header .modal-title {
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
}
.member-list-card-page .member-message-heading p {
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    font-weight: 500;
    margin: 1px 0 0;
}
.member-list-card-page .member-message-summary {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 13px;
}
.member-list-card-page .member-message-summary div {
    background: #f9fbfd;
    border: 1px solid #dbe5f0;
    border-radius: 8px;
    padding: 8px 10px;
}
.member-list-card-page .member-message-summary span,
.member-list-card-page .member-message-counts span {
    color: #64748b;
    display: block;
    font-size: 11px;
    font-weight: 500;
}
.member-list-card-page .member-message-summary strong {
    color: #172033;
    display: block;
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.member-list-card-page #memberMessageModal .form-select,
.member-list-card-page #memberMessageModal .form-control {
    border-color: #d7e3f0;
    border-radius: 8px;
    color: #172033;
    font-size: 13px;
    font-weight: 500;
}
.member-list-card-page #memberMessageModal .form-select {
    min-height: 40px;
}
.member-list-card-page #memberMessageModal .form-select:focus,
.member-list-card-page #memberMessageModal .form-control:focus {
    border-color: #75aee5;
    box-shadow: 0 0 0 .18rem rgba(31, 111, 157, .16);
}
.member-list-card-page .member-message-vars {
    background: #f9fbfd;
    border: 1px solid #dbe5f0;
    border-radius: 9px;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 13px;
    padding: 12px;
}
.member-list-card-page .member-message-vars .member-action-field {
    margin-bottom: 0;
}
.member-list-card-page .member-message-counts {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 4px 0 7px;
}
.member-list-card-page .member-message-counts strong {
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}
.member-list-card-page .member-message-counts strong span {
    display: inline;
    font: inherit;
}
.member-list-card-page .member-message-textarea {
    background: #fbfcfe;
    border-color: #dbe5f0;
    border-radius: 9px;
    color: #172033;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    min-height: 150px;
    resize: vertical;
}
.member-list-card-page .member-message-textarea[readonly] {
    background: #fbfcfe;
    cursor: default;
}
@media (max-width: 575.98px) {
    .member-list-card-page .member-message-summary,
    .member-list-card-page .member-message-vars {
        grid-template-columns: 1fr;
    }
}
.member-list-card-page .member-bottom-dialog {
    align-items: flex-end;
    margin: 0 auto;
    min-height: 100%;
}
.member-list-card-page .member-invoice-modal .modal-content {
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    border-radius: 14px 14px 0 0;
    max-height: 82vh;
}
.member-list-card-page .member-invoice-modal .modal-header {
    border-bottom-color: #dbe5f0;
    padding: 17px 20px;
}
.member-list-card-page .member-invoice-modal .modal-title {
    color: #172033;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
}
.member-list-card-page .member-invoice-subtitle {
    color: #5f6f86;
    font-size: 13px;
    font-weight: 600;
    margin: 3px 0 0;
}
.member-list-card-page .member-invoice-loading {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #dbe5f0;
    border-radius: 10px;
    color: #334155;
    display: flex;
    gap: 10px;
    justify-content: center;
    min-height: 92px;
}
.member-list-card-page .member-invoice-loading.inline {
    min-height: 58px;
}
.member-list-card-page .member-invoice-list {
    display: grid;
    gap: 14px;
}
.member-list-card-page .member-invoice-card {
    background: #ffffff;
    border: 1px solid #d8e2ee;
    border-radius: 9px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .075);
    overflow: hidden;
}
.member-list-card-page .member-invoice-card header {
    background: #17669f;
    color: #fff;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 13px 15px;
}
.member-list-card-page .member-invoice-card span {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    opacity: .8;
}
.member-list-card-page .member-invoice-card strong {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.35;
    margin-top: 4px;
}
.member-list-card-page .member-invoice-amounts {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding: 18px 18px 16px;
}
.member-list-card-page .member-invoice-amounts span {
    color: #738197;
}
.member-list-card-page .member-invoice-amounts strong {
    color: #162033;
    font-size: 15px;
}
.member-list-card-page .member-invoice-card footer {
    align-items: center;
    background: #fff;
    border-top: 1px solid #edf2f7;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    padding: 12px 18px 15px;
}
.member-list-card-page .member-invoice-btn {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 8px;
    display: inline-flex;
    font-size: 12.5px;
    font-weight: 700;
    gap: 6px;
    min-height: 36px;
    padding: 8px 13px;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.member-list-card-page a.member-invoice-btn {
    text-decoration: none;
}
.member-list-card-page .member-invoice-btn:hover,
.member-list-card-page .member-invoice-btn:focus-visible {
    box-shadow: 0 8px 18px rgba(15, 23, 42, .16);
    transform: translateY(-1px);
}
.member-list-card-page .member-invoice-btn.pay {
    background: #168654;
    color: #fff;
}
.member-list-card-page .member-invoice-btn.print {
    background: #17669f;
    color: #fff;
}
.member-list-card-page .member-invoice-btn.history {
    background: #f3f7fb;
    border-color: #cbd8e6;
    color: #334257;
}
.member-list-card-page .member-invoice-btn.edit {
    background: #fff4f1;
    border-color: #f4b9af;
    color: #d94c3f;
}
.member-list-card-page .member-invoice-paid {
    background: #dcfce7;
    border: 1px solid #86efac;
    border-radius: 8px;
    color: #166534;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 12px;
}
.member-list-card-page .member-invoice-payments {
    border-top: 1px solid #e6e8ec;
    margin: 0 18px 18px;
    padding-top: 14px;
}
.member-list-card-page .member-invoice-payments-title {
    color: #8a8f98;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 13px;
}
.member-list-card-page .member-invoice-payments-list {
    display: grid;
    gap: 9px;
}
.member-list-card-page .member-payment-row {
    align-items: center;
    background: #fbfbfc;
    border: 1px solid #e6e8ec;
    border-radius: 12px;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(120px, 1fr) minmax(110px, 1fr) minmax(120px, 1fr) auto;
    padding: 12px 16px;
}
.member-list-card-page .member-payment-row.muted {
    display: block;
}
.member-list-card-page .member-payment-row span {
    color: #9298a2;
    display: block;
    font-size: 13px;
    font-weight: 500;
}
.member-list-card-page .member-payment-row strong {
    color: #182233;
    display: block;
    font-size: 15px;
    font-weight: 600;
    margin-top: 2px;
}
.member-list-card-page .member-payment-row button {
    align-items: center;
    background: transparent;
    border: 0;
    color: #17669f;
    display: inline-flex;
    font-size: 21px;
    height: 36px;
    justify-content: center;
    width: 36px;
}
.member-list-card-page .member-logs-modal .modal-title {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}
.member-list-card-page .member-log-list {
    display: grid;
    gap: 12px;
}
.member-list-card-page .member-log-card {
    background: #ffffff;
    border: 1px solid #dfe7f1;
    border-left: 4px solid #17669f;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
    padding: 15px;
}
.member-list-card-page .member-log-card-head {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}
.member-list-card-page .member-log-card-head strong {
    color: #172033;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.25;
}
.member-list-card-page .member-log-card-head span {
    background: #eaf4fb;
    border-radius: 999px;
    color: #17669f;
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 11px;
}
.member-list-card-page .member-log-meta {
    align-items: center;
    color: #334155;
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    gap: 14px;
    margin-top: 12px;
}
.member-list-card-page .member-log-meta p {
    align-items: center;
    display: inline-flex;
    gap: 7px;
    margin: 0;
}
.member-list-card-page .member-log-meta i {
    color: #94a3b8;
}
.member-list-card-page .member-log-detail {
    background: #f8fafc;
    border: 1px solid #edf2f7;
    border-radius: 10px;
    color: #263244;
    font-size: 13px;
    line-height: 1.45;
    margin-top: 12px;
    padding: 11px 12px;
}
.member-list-card-page .member-log-data {
    border-radius: 10px;
    margin-top: 12px;
    overflow: hidden;
}
.member-list-card-page .member-log-data summary {
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 650;
    list-style: none;
    padding: 10px 12px;
}
.member-list-card-page .member-log-data summary::-webkit-details-marker {
    display: none;
}
.member-list-card-page .member-log-data.old {
    background: #fff7ed;
    border: 1px solid #fed7aa;
}
.member-list-card-page .member-log-data.old summary {
    color: #ea580c;
}
.member-list-card-page .member-log-data.new {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}
.member-list-card-page .member-log-data.new summary {
    color: #059669;
}
.member-list-card-page .member-log-data div {
    display: grid;
    gap: 8px;
    padding: 0 12px 12px;
}
.member-list-card-page .member-log-data p {
    background: rgba(255, 255, 255, .68);
    border-radius: 7px;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(120px, 4fr) minmax(0, 6fr);
    margin: 0;
    padding: 8px 9px;
}
.member-list-card-page .member-log-data p span {
    color: #64748b;
    font-size: 12px;
    font-weight: 550;
}
.member-list-card-page .member-log-data p strong {
    color: #1f2937;
    font-size: 12px;
    font-weight: 500;
    overflow-wrap: anywhere;
}
.member-list-card-page .member-log-empty {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    color: #64748b;
    display: grid;
    gap: 5px;
    justify-items: center;
    min-height: 160px;
    padding: 24px;
    text-align: center;
}
.member-list-card-page .member-log-empty i {
    color: #17669f;
    font-size: 28px;
}
.member-list-card-page .member-log-empty strong {
    color: #1f2937;
    font-size: 15px;
    font-weight: 700;
}
.member-list-card-page .member-log-empty span {
    font-size: 13px;
}
.member-list-card-page .member-idcard-modal .modal-content {
    background: #f8fafc;
    border: 0;
    border-radius: 14px;
}
.member-list-card-page .member-idcard-modal .modal-title {
    align-items: center;
    color: #172033;
    display: inline-flex;
    font-size: 16px;
    font-weight: 700;
    gap: 8px;
}
.member-list-card-page .member-idcard-modal .modal-body {
    display: flex;
    justify-content: center;
    padding: 18px;
}
.member-flutter-id-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .16);
    overflow: hidden;
    padding: 16px;
    width: 300px;
}
.member-flutter-id-card header {
    align-items: center;
    background: #f45143;
    border-radius: 16px 16px 0 0;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 132px;
    padding: 14px 8px;
    text-align: center;
}
.member-flutter-id-card header img {
    background: transparent;
    border-radius: 0;
    height: 58px;
    margin-bottom: 9px;
    object-fit: contain;
    padding: 0;
    width: 58px;
}
.member-flutter-id-card header strong {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}
.member-flutter-id-card header span {
    color: rgba(255, 255, 255, .72);
    font-size: 12px;
    line-height: 1.25;
    margin-top: 5px;
}
.member-id-photo-wrap {
    height: 96px;
    margin: 14px auto 8px;
    position: relative;
    width: 118px;
}
.member-id-photo-wrap > img {
    border: 3px solid #fff;
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .18);
    height: 82px;
    left: 50%;
    object-fit: cover;
    position: absolute;
    top: 7px;
    transform: translateX(-50%);
    width: 82px;
}
.member-id-badge {
    align-items: center;
    background: #f45143;
    border-radius: 999px;
    box-shadow: 0 5px 12px rgba(15, 23, 42, .22);
    color: #fff;
    display: inline-flex;
    font-size: 11px;
    font-weight: 700;
    gap: 4px;
    padding: 5px 9px;
    position: absolute;
    right: 0;
    top: 2px;
}
.member-flutter-id-card h2 {
    color: #f45143;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 11px;
    text-align: center;
}
.member-flutter-id-card dl {
    display: grid;
    gap: 5px 8px;
    grid-template-columns: 88px minmax(0, 1fr);
    margin: 0 0 4px;
}
.member-flutter-id-card dt,
.member-flutter-id-card dd {
    font-size: 12px;
    line-height: 1.35;
    margin: 0;
}
.member-flutter-id-card dt {
    color: #1f2937;
    font-weight: 650;
}
.member-flutter-id-card dt::after {
    content: ":";
}
.member-flutter-id-card dd {
    color: #1f2937;
    font-weight: 500;
    overflow-wrap: anywhere;
}
.member-idcard-actions {
    gap: 9px;
    justify-content: flex-end;
}
.member-idcard-actions .btn {
    align-items: center;
    border-radius: 9px;
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    gap: 7px;
    min-height: 38px;
    padding: 8px 13px;
}
.member-list-card-page .member-payment-panel,
.member-list-card-page .member-payment-history {
    background: #f8fafc;
    border: 1px solid #dbe5f0;
    border-radius: 10px;
    margin-top: 14px;
    padding: 14px;
}
.member-list-card-page .member-payment-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}
.member-list-card-page .member-payment-head span {
    color: #64748b;
    display: block;
    font-size: 11px;
    font-weight: 800;
}
.member-list-card-page .member-payment-head strong {
    color: #0f172a;
    font-size: 15px;
    font-weight: 900;
}
.member-list-card-page .member-payment-head button {
    align-items: center;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #334155;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    width: 32px;
}
.member-list-card-page .member-payment-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 4px;
}
.member-list-card-page .member-history-list {
    display: grid;
    gap: 8px;
}
.member-list-card-page .member-history-list div {
    align-items: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    padding: 9px 11px;
}
.member-list-card-page .member-history-list strong {
    color: #155f99;
    font-size: 13px;
    font-weight: 900;
}
.member-list-card-page .member-history-list span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}
.member-list-card-page .member-invoice-empty {
    align-items: center;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    color: #9a3412;
    display: grid;
    gap: 5px;
    justify-items: center;
    padding: 24px;
    text-align: center;
}
.member-list-card-page .member-invoice-empty i {
    font-size: 26px;
}
.member-list-card-page .member-invoice-empty.small {
    padding: 14px;
}
.invoice-print-body {
    background:
        radial-gradient(circle at top left, rgba(45, 141, 240, .08), transparent 26%),
        radial-gradient(circle at top right, rgba(244, 162, 97, .08), transparent 26%),
        #eef3f9;
    min-height: 100vh;
}
.invoice-print-page {
    display: grid;
    gap: 14px;
    min-height: 100vh;
    padding: 24px;
    place-items: start center;
}
.invoice-print-toolbar {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    width: min(760px, 100%);
}
.invoice-print-toolbar button {
    align-items: center;
    background: #176b87;
    border: 0;
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-weight: 800;
    gap: 7px;
    padding: 10px 16px;
    box-shadow: 0 12px 24px rgba(23, 107, 135, .24);
}
.invoice-print-sheet {
    width: min(760px, 100%);
    background: linear-gradient(180deg, #fff, #fbfdff);
    border: 1px solid #dce6f1;
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .12);
    padding: 24px 24px 22px;
}
.invoice-print-brand {
    display: grid;
    justify-items: center;
    gap: 8px;
    text-align: center;
}
.invoice-print-brand img {
    width: 120px;
    height: 84px;
    object-fit: contain;
}
.invoice-print-brand h1 {
    color: #0f172a;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: .02em;
    margin: 0;
}
.invoice-print-divider {
    background: linear-gradient(90deg, transparent, #d3dde8 20%, #d3dde8 80%, transparent);
    height: 1px;
    width: 100%;
}
.invoice-print-member {
    display: grid;
    gap: 10px;
    margin-top: 18px;
    text-align: center;
}
.invoice-print-member span,
.invoice-print-org span,
.invoice-print-summary span,
.invoice-print-footer-meta span,
.invoice-print-details span {
    color: #64748b;
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.invoice-print-member strong,
.invoice-print-org strong,
.invoice-print-summary strong,
.invoice-print-details strong {
    color: #0f172a;
    display: block;
    font-size: 15px;
    font-weight: 900;
    margin-top: 2px;
}
.invoice-print-org {
    display: grid;
    gap: 4px;
    margin-top: 16px;
    text-align: center;
}
.invoice-print-org strong {
    font-size: 16px;
}
.invoice-print-org span {
    letter-spacing: 0;
    text-transform: none;
}
.invoice-print-summary {
    display: grid;
    gap: 14px;
    margin-top: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.invoice-print-summary > div {
    background: #f7fbff;
    border: 1px solid #dbe6f1;
    border-radius: 18px;
    padding: 16px 18px;
    text-align: center;
}
.invoice-print-summary strong {
    color: #176b87;
    font-size: 22px;
    margin-top: 6px;
}
.invoice-print-stamp {
    display: grid;
    justify-items: center;
    margin-top: 16px;
}
.invoice-print-stamp img {
    width: 108px;
    height: 56px;
    object-fit: contain;
}
.invoice-print-note {
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    margin: 12px 0 0;
    text-align: center;
}
.invoice-print-footer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    justify-content: center;
    margin-top: 14px;
}
.invoice-print-details {
    background: #f7fbff;
    border: 1px dashed #cdd9e5;
    border-radius: 16px;
    margin-top: 14px;
    padding: 12px 14px;
    text-align: center;
}
@media print {
    .no-print,
    .invoice-print-toolbar {
        display: none !important;
    }
    body,
    .invoice-print-body,
    .invoice-print-page {
        background: #fff !important;
        padding: 0 !important;
    }
    .invoice-print-sheet {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        margin: 0;
        max-width: none;
        width: 100%;
    }
}
@media (max-width: 767px) {
    .member-list-card-page .member-bottom-dialog {
        width: 100%;
    }
    .member-list-card-page .member-invoice-amounts,
    .member-list-card-page .member-payment-row,
    .member-list-card-page .member-invoice-card header,
    .member-list-card-page .member-log-data p,
    .invoice-print-grid {
        grid-template-columns: 1fr;
    }
    .invoice-print-page {
        padding: 12px;
    }
    .invoice-print-sheet header {
        gap: 12px;
        flex-direction: column;
    }
    .invoice-print-number {
        text-align: left;
    }
}
@media print {
    body {
        background: #fff !important;
    }
    .invoice-print-toolbar,
    .sidebar,
    .topbar,
    .master-mobile-appbar {
        display: none !important;
    }
    .invoice-print-page {
        background: #fff;
        padding: 0;
    }
    .invoice-print-sheet {
        border: 0;
        box-shadow: none;
        max-width: none;
    }
    body:has(.member-idcard-modal.show) * {
        visibility: hidden !important;
    }
    body:has(.member-idcard-modal.show) .member-idcard-modal,
    body:has(.member-idcard-modal.show) .member-idcard-modal * {
        visibility: visible !important;
    }
    body:has(.member-idcard-modal.show) .member-idcard-modal {
        background: #fff !important;
        display: block !important;
        inset: 0 !important;
        overflow: visible !important;
        position: absolute !important;
    }
    body:has(.member-idcard-modal.show) .member-idcard-modal .modal-dialog {
        margin: 0 auto !important;
        transform: none !important;
    }
    body:has(.member-idcard-modal.show) .member-idcard-modal .modal-content {
        box-shadow: none !important;
    }
    body:has(.member-idcard-modal.show) .member-idcard-modal .modal-header,
    body:has(.member-idcard-modal.show) .member-idcard-actions {
        display: none !important;
    }
}
.member-id-card-page {
    padding: 18px;
}
.member-id-card-toolbar {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-bottom: 16px;
}
.member-id-card-toolbar a,
.member-id-card-toolbar button {
    align-items: center;
    background: #1769aa;
    border: 0;
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    gap: 7px;
    min-height: 38px;
    padding: 8px 14px;
}
.member-id-card-print {
    background: #fff;
    border: 1px solid #d8e2ee;
    border-radius: 10px;
    box-shadow: 0 18px 35px rgba(15, 23, 42, .12);
    margin: 0 auto;
    overflow: hidden;
    width: 420px;
}
.member-id-card-print header {
    background: #1769aa;
    color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 14px 16px;
}
.member-id-card-print header strong {
    font-size: 16px;
    font-weight: 900;
}
.member-id-card-print header span {
    font-size: 12px;
    font-weight: 800;
}
.member-id-card-body {
    display: grid;
    gap: 16px;
    grid-template-columns: 110px 1fr;
    padding: 18px;
}
.member-id-card-body img {
    border: 1px solid #d8e2ee;
    border-radius: 10px;
    height: 118px;
    object-fit: cover;
    width: 110px;
}
.member-id-card-body h1 {
    color: #172033;
    font-size: 20px;
    font-weight: 900;
    margin: 0;
}
.member-id-card-body p {
    color: #1769aa;
    font-size: 13px;
    font-weight: 900;
    margin: 3px 0 12px;
}
.member-id-card-body dl {
    display: grid;
    gap: 6px 10px;
    grid-template-columns: 58px 1fr;
    margin: 0;
}
.member-id-card-body dt {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}
.member-id-card-body dd {
    color: #1f2937;
    font-size: 12px;
    font-weight: 800;
    margin: 0;
}
.member-profile-page {
    background: #f3f6fa;
    font-family: var(--font-main);
    min-height: calc(100vh - 120px);
    padding: 18px;
}
.member-profile-page button,
.member-profile-page input,
.member-profile-page .btn {
    font-family: var(--font-main);
}
.member-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin-bottom: 14px;
}
.member-profile-actions a {
    align-items: center;
    background: #fff;
    border: 1px solid #d8e2ee;
    border-radius: 8px;
    color: #334155;
    display: inline-flex;
    font-size: 13px;
    font-weight: 850;
    gap: 7px;
    min-height: 38px;
    padding: 8px 13px;
}
.member-profile-actions a:hover {
    background: #1769aa;
    border-color: #1769aa;
    color: #fff;
}
.member-profile-hero {
    background: linear-gradient(135deg, #1769aa, #0f6577);
    border-radius: 12px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, .18);
    color: #fff;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .9fr);
    padding: 22px;
}
.member-profile-identity {
    align-items: center;
    display: flex;
    gap: 20px;
    min-width: 0;
}
.member-profile-identity img {
    background: #fff;
    border: 4px solid rgba(255, 255, 255, .7);
    border-radius: 50%;
    box-shadow: 0 14px 28px rgba(15, 23, 42, .22);
    height: 118px;
    object-fit: cover;
    width: 118px;
}
.member-profile-identity span {
    color: rgba(255, 255, 255, .72);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.member-profile-identity h1 {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0;
    margin: 4px 0 7px;
}
.member-profile-identity p {
    color: rgba(255, 255, 255, .86);
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    max-width: 760px;
}
.member-profile-tools {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}
.member-profile-tools button {
    align-items: center;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 9px;
    box-shadow: 0 10px 20px rgba(15, 23, 42, .16);
    color: #fff;
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    gap: 8px;
    min-height: 40px;
    padding: 9px 13px;
}
.member-profile-tools button:hover {
    background: #fff;
    color: #1769aa;
}
.member-profile-quick {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.member-profile-quick div {
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 9px;
    padding: 12px;
}
.member-profile-quick span,
.member-profile-plan span {
    color: #64748b;
    display: block;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 4px;
    text-transform: uppercase;
}
.member-profile-quick span {
    color: rgba(255, 255, 255, .72);
}
.member-profile-quick strong {
    color: #fff;
    display: block;
    font-size: 15px;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.member-profile-quick strong.danger,
.member-profile-plan strong.danger {
    color: #e63b4c;
}
.member-profile-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
    margin-top: 16px;
}
.member-profile-panel {
    background: #fff;
    border: 1px solid #d8e2ee;
    border-radius: 10px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .07);
    padding: 16px;
}
.member-profile-panel h2 {
    color: #172033;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
    margin: 0 0 14px;
}
.member-profile-details {
    display: grid;
    gap: 0;
    grid-template-columns: 190px minmax(0, 1fr);
    margin: 0;
}
.member-profile-details dt,
.member-profile-details dd {
    border-bottom: 1px solid #eef2f7;
    font-size: 13px;
    margin: 0;
    padding: 9px 0;
}
.member-profile-details dt {
    color: #64748b;
    font-weight: 700;
}
.member-profile-details dd {
    color: #1f2937;
    font-weight: 500;
    overflow-wrap: anywhere;
}
.member-profile-docs {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.member-profile-docs a {
    background: #f8fafc;
    border: 1px solid #d8e2ee;
    border-radius: 9px;
    color: #334155;
    display: grid;
    gap: 8px;
    padding: 8px;
}
.member-profile-docs img {
    aspect-ratio: 1;
    background: #fff;
    border-radius: 7px;
    object-fit: cover;
    width: 100%;
}
.member-profile-docs span {
    font-size: 12px;
    font-weight: 700;
}
.member-profile-docs p {
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    margin: 0;
}
.member-profile-plans {
    margin-top: 16px;
}
.member-profile-plan-list {
    display: grid;
    gap: 12px;
}
.member-profile-plan {
    border: 1px solid #d8e2ee;
    border-radius: 9px;
    overflow: hidden;
}
.member-profile-plan header {
    align-items: center;
    background: #f8fafc;
    border-bottom: 1px solid #d8e2ee;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 12px 14px;
}
.member-profile-plan header strong {
    color: #172033;
    font-size: 15px;
    font-weight: 700;
}
.member-profile-plan header a {
    align-items: center;
    background: #dbeafe;
    border: 1px solid #93c5fd;
    border-radius: 8px;
    color: #155e9f;
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    gap: 6px;
    min-height: 34px;
    padding: 7px 11px;
}
.member-profile-print-form {
    margin: 0;
}
.member-profile-print-form button {
    align-items: center;
    appearance: none;
    background: linear-gradient(135deg, var(--plan-theme), var(--plan-theme-dark));
    border: 0;
    border-radius: 8px;
    box-shadow: 0 10px 18px rgba(15, 23, 42, .12);
    color: #fff;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    gap: 6px;
    justify-content: center;
    min-height: 34px;
    padding: 7px 11px;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.member-profile-print-form button:hover {
    color: #fff;
    filter: brightness(1.03);
    transform: translateY(-1px);
    box-shadow: 0 14px 22px rgba(15, 23, 42, .16);
}
.member-profile-print-form button i {
    font-size: 13px;
}
.member-profile-plan-grid {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.member-profile-plan-grid div {
    border-bottom: 1px solid #eef2f7;
    border-right: 1px solid #eef2f7;
    padding: 12px 14px;
}
.member-profile-plan-grid strong {
    color: #1f2937;
    font-size: 14px;
    font-weight: 500;
}
.member-profile-modal .modal-content {
    border: 0;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .24);
}
.member-profile-modal .modal-title {
    color: #172033;
    font-size: 18px;
    font-weight: 700;
}
.member-profile-modal-field {
    display: grid;
    gap: 7px;
}
.member-profile-modal-field span {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}
.member-locker-history {
    display: grid;
    gap: 10px;
}
.member-locker-history article {
    border: 1px solid #d8e2ee;
    border-radius: 9px;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
}
.member-locker-history article div {
    border-right: 1px solid #eef2f7;
    padding: 12px;
}
.member-locker-history article div:last-child {
    border-right: 0;
}
.member-locker-history span {
    color: #64748b;
    display: block;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 4px;
    text-transform: uppercase;
}
.member-locker-history strong {
    color: #1f2937;
    font-size: 14px;
    font-weight: 500;
}
@media (max-width: 980px) {
    .member-profile-hero,
    .member-profile-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 680px) {
    .member-profile-page {
        padding: 10px;
    }
    .member-profile-identity {
        align-items: flex-start;
        flex-direction: column;
    }
    .member-profile-quick,
    .member-profile-plan-grid,
    .member-locker-history article {
        grid-template-columns: 1fr;
    }
    .member-profile-details {
        grid-template-columns: 1fr;
    }
    .member-profile-details dt {
        border-bottom: 0;
        padding-bottom: 2px;
    }
    .member-profile-details dd {
        padding-top: 0;
    }
}
.golib-swal-popup {
    border: 1px solid rgba(255, 255, 255, .62) !important;
    border-radius: 16px !important;
    box-shadow: 0 28px 70px rgba(15, 23, 42, .34), inset 0 1px 0 rgba(255,255,255,.72) !important;
    padding: 24px !important;
}
.golib-swal-title {
    color: #172033 !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}
.golib-swal-text {
    color: #536079 !important;
    font-size: 14px !important;
    font-weight: 650 !important;
}
.golib-swal-icon {
    box-shadow: 0 12px 24px rgba(15, 23, 42, .12) !important;
}
.golib-swal-actions {
    gap: 10px !important;
    margin-top: 20px !important;
}
.golib-swal-btn {
    border: 0;
    border-radius: 10px;
    box-shadow: 0 10px 18px rgba(15, 23, 42, .13);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    min-width: 104px;
    padding: 11px 18px;
    transition: filter .16s ease, transform .16s ease;
}
.golib-swal-btn.primary {
    background: linear-gradient(180deg, #2283c9, #1769aa);
}
.golib-swal-btn.danger {
    background: linear-gradient(180deg, #ef5363, #c12b3c);
}
.golib-swal-btn.cancel {
    background: linear-gradient(180deg, #f8fafc, #e7edf5);
    color: #334155;
}
.golib-swal-btn:hover {
    filter: brightness(.96);
    transform: translateY(-1px);
}
@media print {
    .sidebar,
    .topbar,
    .member-id-card-toolbar,
    .page-load-overlay {
        display: none !important;
    }
    .app-shell,
    .main-content,
    .member-id-card-page {
        margin: 0 !important;
        padding: 0 !important;
    }
    .member-id-card-print {
        box-shadow: none;
    }
}
.member-current-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.member-current-wide {
    border-top: 1px solid #e0e8f1;
    display: grid;
    gap: 12px 30px;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 16px;
}
.member-current-full {
    grid-column: 1 / -1;
}
.member-tax-options {
    align-items: center;
    border: 1px solid #cfcfcf;
    display: grid;
    gap: 6px 10px;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    min-height: 34px;
    padding: 6px 8px;
}
.member-tax-options label {
    align-items: center;
    display: inline-flex;
    gap: 4px;
    margin: 0;
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.2;
    white-space: nowrap;
}
.member-tax-options input[type="checkbox"] {
    height: 12px;
    margin: 0;
    width: 12px;
}
.member-current-form.is-vip-member [name="plan_id"],
.member-current-form.is-vip-member [name="amount"],
.member-current-form.is-vip-member [name="start_date"],
.member-current-form.is-vip-member [name="expiry_date"],
.member-current-form.is-vip-member [name="payment_method"],
.member-current-form.is-vip-member [name="enrollment_fee"],
.member-current-form.is-vip-member [name="paid_amount"],
.member-current-form.is-vip-member [name="discount_type"],
.member-current-form.is-vip-member [name="discount"],
.member-current-form.is-vip-member [name="tax_amount"],
.member-current-form.is-vip-member [name="due_amount"] {
    background: #f1f1f1;
}

.member-form-header {
    display: grid;
    gap: 12px;
    margin: 0 0 20px;
}
.member-form-header .enquiry-current-title {
    margin-bottom: 0;
}
.member-add-header-icons {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0 14px;
}
.member-add-header-icon {
    align-items: center;
    background: #eef8ff;
    border: 1px solid #b9d9f0;
    border-radius: 7px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
    color: #172033;
    display: grid;
    gap: 6px;
    justify-items: center;
    min-height: 92px;
    padding: 10px 12px;
    text-align: center;
    width: 102px;
}
.member-add-header-icon img {
    height: 48px;
    object-fit: contain;
    width: 58px;
}
.member-add-header-icon strong {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

/* Add/Edit member current UI */
.member-ui-grid {
    align-items: start;
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
}
.member-ui-card {
    background: #fff;
    border: 1px solid #dfe5ec;
    border-radius: 8px;
    padding: 14px;
}
.member-ui-card h2 {
    align-items: center;
    border-bottom: 1px solid #e6ebf1;
    color: #101827;
    display: flex;
    font-size: 15px;
    font-weight: 700;
    gap: 10px;
    letter-spacing: 0;
    line-height: 1.3;
    margin: 0 0 12px;
    padding: 4px 0 12px;
}
.member-ui-card h2 i,
.member-upload-box h3 i {
    align-items: center;
    background: #eef2f6;
    border-radius: 5px;
    color: #637083;
    display: inline-flex;
    font-size: 12px;
    height: 24px;
    justify-content: center;
    width: 24px;
}
.member-ui-field {
    display: grid;
    gap: 7px;
    margin: 0 0 12px;
}
.member-ui-field span {
    color: #1f2937;
    font-size: 13.5px;
    font-weight: 600;
}
.member-ui-field b {
    color: #ef3d32;
    font-weight: 700;
}
.member-ui-field input,
.member-ui-field select,
.member-ui-field textarea {
    background: #fff;
    border: 1px solid #cfd6df;
    border-radius: 4px;
    box-shadow: none;
    color: #2f3947;
    font-size: 14px;
    min-height: 38px;
    padding: 7px 12px;
    width: 100%;
}
.member-ui-field textarea {
    min-height: 72px;
    resize: vertical;
}
.member-mobile-field {
    gap: 6px;
}
.member-mobile-row {
    display: grid;
    gap: 8px;
    grid-template-columns: 108px minmax(0, 1fr);
}
.member-mobile-row select,
.member-mobile-row input {
    min-width: 0;
}
.member-mobile-feedback {
    color: #6b7280;
    font-size: 12.5px;
    line-height: 1.3;
    min-height: 16px;
}
.member-mobile-feedback.is-error {
    color: #dc3545;
}
.member-ui-field input:focus,
.member-ui-field select:focus,
.member-ui-field textarea:focus {
    border-color: #9eb2c8;
    box-shadow: 0 0 0 2px rgba(45, 111, 151, .1);
    outline: 0;
}
.member-ui-inline,
.member-ui-check {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    min-height: 30px;
}
.member-ui-inline label,
.member-ui-check {
    color: #111827;
    font-size: 13.5px;
    font-weight: 500;
    margin: 0;
}
.member-ui-inline input,
.member-ui-check input {
    height: auto;
    margin: 0 6px 0 0;
    min-height: 0;
    padding: 0;
    width: auto;
}
.member-upload-box {
    border: 1px solid #dfe5ec;
    border-radius: 7px;
    margin: 0 0 14px;
    overflow: hidden;
}
.member-upload-box h3 {
    align-items: center;
    background: #f8fafc;
    border-bottom: 1px solid #e6ebf1;
    color: #1f2937;
    display: flex;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
    line-height: 1.3;
    margin: 0;
    padding: 10px 12px;
}
.member-upload-tabs {
    border: 1px solid #e0e5eb;
    border-radius: 5px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 12px;
    overflow: hidden;
}
.member-upload-tabs span {
    align-items: center;
    background: #fff;
    color: #203047;
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    gap: 4px;
    justify-content: center;
    min-height: 31px;
    padding: 6px 8px;
    text-align: center;
}
.member-upload-tabs span:first-child {
    background: #111827;
    color: #fff;
}
.member-upload-btn {
    align-items: center;
    border: 1px dashed #c7d8ed;
    border-radius: 6px;
    color: #203047;
    display: inline-flex;
    font-size: 13px;
    font-weight: 600;
    gap: 6px;
    margin: 0 12px 12px;
    min-height: 38px;
    padding: 9px 13px;
}
.member-upload-btn input {
    display: none;
}
.member-ui-more {
    display: grid;
    gap: 0;
}
.member-photo-row {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #d7dfea;
    border-radius: 12px;
    display: flex;
    gap: 12px;
    margin: 0 0 14px;
    padding: 10px 12px;
}
.member-photo-frame,
.member-doc-frame {
    background: #fff;
    border: 1px solid #d7dfea;
    border-radius: 50%;
    flex: 0 0 auto;
    height: 88px;
    padding: 3px;
    position: relative;
    width: 88px;
}
.member-photo-frame img,
.member-doc-frame img {
    border-radius: 50%;
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.member-photo-meta {
    display: grid;
    gap: 9px;
    min-width: 0;
}
.member-photo-meta strong {
    color: #344054;
    font-size: 15px;
    font-weight: 600;
}
.member-photo-action,
.member-doc-action {
    align-items: center;
    border: 1px solid rgba(23, 107, 135, .3);
    border-radius: 10px;
    color: var(--plan-theme);
    cursor: pointer;
    display: inline-flex;
    font-size: 13px;
    font-weight: 600;
    gap: 7px;
    min-height: 34px;
    padding: 7px 12px;
    width: max-content;
}
.member-photo-action input,
.member-doc-action input {
    display: none;
}
.member-photo-remove {
    align-items: center;
    background: #fff;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(15, 23, 42, .16);
    color: #ef4444;
    display: inline-flex;
    height: 26px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: -4px;
    top: -4px;
    width: 26px;
}
.member-doc-title {
    color: #e65100;
    font-size: 14px;
    font-weight: 500;
    margin: 2px 0 12px;
}
.member-doc-grid {
    align-items: start;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: center;
    margin-bottom: 16px;
}
.member-doc-upload {
    display: grid;
    gap: 8px;
    justify-items: center;
}
.member-doc-frame {
    background: #f1f5f9;
    height: 90px;
    width: 90px;
}
.member-doc-frame img {
    object-fit: contain;
}
.member-doc-action {
    background: var(--plan-theme);
    border: 0;
    border-radius: 50%;
    color: #fff;
    height: 34px;
    justify-content: center;
    min-height: 34px;
    padding: 0;
    width: 34px;
}
.member-collapse-card {
    padding: 0;
}
.member-collapse-toggle {
    align-items: center;
    background: #fff;
    border: 0;
    color: var(--plan-theme);
    cursor: pointer;
    display: flex;
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 600;
    justify-content: space-between;
    min-height: 58px;
    padding: 14px 16px;
    width: 100%;
}
.member-collapse-toggle span {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}
.member-collapse-toggle > i {
    color: #94a3b8;
    transition: transform .18s ease;
}
.member-collapse-toggle.is-open > i {
    color: var(--plan-theme);
    transform: rotate(180deg);
}
.member-collapse-body {
    border-top: 1px solid #e6ebf1;
    padding: 14px;
}
.member-ui-submit {
    margin-top: 16px;
}
.member-ui-submit .btn {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border: 0;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    min-height: 38px;
    text-transform: uppercase;
    letter-spacing: .03em;
    width: 100%;
}
.member-ui-submit .btn:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    color: #fff;
}
.member-current-form .member-ui-grid .member-tax-options {
    border-color: #cfd6df;
    border-radius: 4px;
    display: grid;
    gap: 6px 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 32px;
    padding: 6px 8px;
}
.member-current-form .member-ui-grid .member-tax-options label {
    align-items: center;
    display: flex;
    font-size: 13.5px;
    font-weight: 400;
    gap: 7px;
    line-height: 1.2;
    margin: 0;
    min-width: 0;
}
.member-current-form .member-ui-grid .member-tax-options input {
    flex: 0 0 auto;
    height: 22px;
    min-height: 22px;
    padding: 0;
    width: 22px;
}

.member-edit-page {
    background: #f3f6fa;
    font-family: var(--font-main);
    margin: 0;
    min-height: calc(100vh - 90px);
    padding: 18px;
}
.member-edit-page *,
.member-edit-page button,
.member-edit-page input,
.member-edit-page select,
.member-edit-page textarea {
    font-family: var(--font-main);
    letter-spacing: 0;
}
.member-edit-page .member-form-header {
    align-items: center;
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    display: flex;
    justify-content: space-between;
    margin: 0 0 14px;
    min-height: 58px;
    padding: 12px 30px;
}
.member-edit-page .enquiry-current-title {
    border: 0;
    color: #5f6670;
    font-size: 36px;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 1.2;
    margin: 0;
    padding: 0;
}
.member-edit-page .member-current-form {
    display: grid;
    gap: 14px;
    margin: 0;
}
.member-edit-page .member-ui-grid {
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.member-edit-page .member-ui-card > .member-ui-field,
.member-edit-page .member-ui-card > .member-ui-more,
.member-edit-page .member-ui-card > .member-photo-row,
.member-edit-page .member-ui-card > .member-doc-title,
.member-edit-page .member-ui-card > .member-doc-grid,
.member-edit-page .member-ui-card > .member-collapse-card {
    margin-left: 30px;
    margin-right: 30px;
}
.member-edit-page .member-ui-card > .member-ui-field:first-of-type {
    margin-top: 16px;
}
.member-edit-page .member-ui-card > .member-photo-row {
    margin-top: 16px;
}
.member-edit-page .member-ui-field {
    gap: 6px;
    margin-bottom: 12px;
}
.member-edit-page .member-ui-more {
    padding-bottom: 4px;
}
.member-edit-page .member-collapse-inline {
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    margin-bottom: 16px;
    overflow: hidden;
}
.member-edit-page .member-collapse-inline .member-collapse-toggle {
    background: #eeeef6;
    color: #2f3440;
    font-size: 13px;
    font-weight: 400;
    min-height: 35px;
    padding: 0 10px;
}
.member-edit-page .member-collapse-inline .member-collapse-toggle span i {
    color: #7a7d84;
    font-size: 13px;
}
.member-edit-page .member-collapse-inline .member-collapse-body {
    border-top: 1px solid #d8d8d8;
    padding: 14px 0 2px;
}
.member-edit-page .member-collapse-inline .member-doc-title,
.member-edit-page .member-collapse-inline .member-doc-grid,
.member-edit-page .member-collapse-inline .member-ui-more {
    margin-left: 16px;
    margin-right: 16px;
}
.member-edit-page .member-ui-inline,
.member-edit-page .member-ui-check {
    min-height: 34px;
}
.member-edit-page .member-ui-inline label,
.member-edit-page .member-ui-check {
    color: #000;
    font-size: 13.5px;
    font-weight: 400;
}
.member-edit-page .member-ui-field textarea {
    min-height: 54px;
}
.member-edit-page .member-ui-card {
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    overflow: hidden;
    padding: 0;
}
.member-edit-page .member-ui-card h2 {
    background: #eeeef6;
    border-bottom: 1px solid #d8d8d8;
    color: #2f3440;
    font-size: 13px;
    font-weight: 400;
    min-height: 35px;
    margin: 0;
    padding: 0 10px;
}
.member-edit-page .member-ui-card h2 i,
.member-edit-page .member-upload-box h3 i {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #7a7d84;
    font-size: 13px;
    height: auto;
    width: auto;
}
.member-edit-page .member-upload-box {
    border-color: #d8d8d8;
    border-radius: 3px;
    margin: 16px 30px 14px;
}
.member-edit-page .member-upload-box h3 {
    background: #eeeef6;
    border-bottom-color: #d8d8d8;
    color: #2f3440;
    font-size: 13px;
    font-weight: 400;
}
.member-edit-page .member-ui-field span {
    color: #000;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.2;
}
.member-edit-page .member-ui-field input,
.member-edit-page .member-ui-field select,
.member-edit-page .member-ui-field textarea {
    background: #fff;
    border: 1px solid #cfcfcf;
    border-radius: 0;
    box-shadow: none;
    color: #6b7280;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    min-height: 34px;
    padding: 5px 8px;
}
.member-edit-page .member-ui-field input:focus,
.member-edit-page .member-ui-field select:focus,
.member-edit-page .member-ui-field textarea:focus {
    background: #fff;
    border-color: #9fb8d5;
    box-shadow: 0 0 0 2px rgba(13,110,253,.08);
}
.member-edit-page .member-tax-options {
    border-color: #cfcfcf;
    border-radius: 4px;
    padding: 5px 7px;
}
.member-edit-page .member-tax-options label {
    color: #1f2937;
    font-size: 12px;
    font-weight: 500;
}
.member-edit-page .member-tax-options input[type="checkbox"] {
    accent-color: #2b6f9c;
}
.member-edit-page .member-ui-submit .btn {
    background: #ffb43b;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    min-height: 34px;
    text-transform: lowercase;
}
.member-add-page .member-ui-submit .btn {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    min-height: 38px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.member-add-page .member-ui-submit .btn:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
}
@media (max-width: 1199.98px) {
    .member-edit-page .member-ui-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 680px) {
    .member-doc-grid,
    .member-current-form .member-ui-grid .member-tax-options {
        grid-template-columns: 1fr;
    }
    .member-photo-row {
        align-items: flex-start;
    }
}

/* Add bill */
.add-bill-page {
    display: grid;
    gap: 16px;
    padding: 22px 26px 30px;
}
.add-bill-head {
    align-items: center;
    background: #fff;
    border: 1px solid #dfe6ee;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    padding: 16px 18px;
}
.add-bill-head span {
    color: #1769aa;
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    gap: 6px;
    letter-spacing: 0;
    margin-bottom: 4px;
}
.add-bill-head h1 {
    color: #172033;
    font-size: 22px;
    font-weight: 650;
    line-height: 1.2;
    margin: 0;
}
.add-bill-head p {
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    margin: 5px 0 0;
}
.add-bill-head a {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #cfd9e6;
    border-radius: 6px;
    color: #172033;
    display: inline-flex;
    font-size: 13px;
    font-weight: 650;
    gap: 7px;
    min-height: 38px;
    padding: 9px 14px;
    text-decoration: none;
}
.add-bill-card {
    background: #fff;
    border: 1px solid #dfe6ee;
    border-radius: 8px;
    display: grid;
    gap: 14px 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 18px;
}
.add-bill-alert {
    border-radius: 8px;
    font-size: 14px;
    margin: 0;
}
.add-bill-card label,
.add-bill-taxes {
    display: grid;
    gap: 7px;
    margin: 0;
}
.add-bill-card label span,
.add-bill-taxes > span {
    color: #334155;
    font-size: 13px;
    font-weight: 600;
}
.add-bill-card .form-control,
.add-bill-card .form-select {
    background-color: #fff;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    box-shadow: none;
    color: #172033;
    font-size: 14px;
    font-weight: 500;
    min-height: 40px;
}
.add-bill-card .form-control:focus,
.add-bill-card .form-select:focus {
    border-color: #5f9dca;
    box-shadow: 0 0 0 3px rgba(31, 111, 170, .12);
}
.add-bill-card .form-control[readonly] {
    background: #f4f7fb;
    color: #475569;
}
.add-bill-method {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: grid;
    gap: 14px 18px;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 14px;
}
.add-bill-method.d-none {
    display: none !important;
}
.add-bill-taxes {
    background: #f8fafc;
    border: 1px solid #dfe6ee;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    grid-column: 1 / -1;
    padding: 14px;
}
.add-bill-taxes > span,
.add-bill-taxes small {
    flex: 0 0 100%;
}
.add-bill-taxes small {
    color: #64748b;
    font-size: 13px;
}
.add-bill-taxes label {
    align-items: center;
    background: #fff;
    border: 1px solid #d7e1ec;
    border-radius: 6px;
    color: #172033;
    display: inline-flex;
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
    margin: 0;
    min-height: 36px;
    padding: 7px 10px;
    width: fit-content;
}
.add-bill-taxes input {
    accent-color: #1769aa;
}
.add-bill-wide {
    grid-column: 1 / -1;
}
.add-bill-actions {
    align-items: center;
    display: flex;
    gap: 10px;
    grid-column: 1 / -1;
    justify-content: flex-end;
    padding-top: 2px;
}
.add-bill-actions .btn {
    align-items: center;
    background: #1769aa;
    border: 1px solid #1769aa;
    border-radius: 6px;
    display: inline-flex;
    font-size: 14px;
    font-weight: 650;
    gap: 7px;
    min-height: 40px;
    padding: 9px 18px;
}
.add-bill-actions .btn:hover {
    background: #12598f;
    border-color: #12598f;
}
.locker-select-panel {
    background: #f8fafc;
    border: 1px solid #dfe6ee;
    border-radius: 8px;
    display: grid;
    gap: 12px;
    padding: 14px;
}
.locker-select-panel > div:first-child {
    align-items: center;
    display: flex;
    justify-content: space-between;
}
.locker-select-panel > div:first-child span {
    color: #334155;
    font-size: 13px;
    font-weight: 600;
}
.locker-select-panel > div:first-child strong {
    background: #e8f3fb;
    border-radius: 999px;
    color: #1769aa;
    font-size: 12px;
    font-weight: 650;
    padding: 5px 10px;
}
.locker-select-panel p {
    color: #64748b;
    font-size: 13px;
    margin: 0;
}
.locker-picker-field {
    max-width: 360px;
}
.locker-picker-button {
    align-items: center;
    cursor: pointer;
    display: flex !important;
    gap: 10px;
    justify-content: flex-start;
    text-align: left;
}
.locker-picker-button i {
    color: #1769aa;
}
.locker-picker-button span {
    color: #172033;
    flex: 1;
    font-weight: 600;
}
.locker-picker-button small {
    background: #e8f3fb;
    border-radius: 999px;
    color: #1769aa;
    font-size: 12px;
    font-weight: 650;
    padding: 4px 9px;
}
.locker-option-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}
.locker-option-grid label,
.locker-option-grid button {
    align-items: center;
    background: #fff;
    border: 1px solid #d7e1ec;
    border-radius: 7px;
    color: #172033;
    cursor: pointer;
    display: flex;
    gap: 8px;
    min-height: 40px;
    padding: 9px 10px;
    text-align: left;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
    width: 100%;
}
.locker-option-grid label:hover,
.locker-option-grid button:hover,
.locker-option-grid button.selected {
    border-color: #8bb9da;
    box-shadow: 0 8px 18px rgba(23, 105, 170, .1);
    transform: translateY(-1px);
}
.locker-option-grid button.selected {
    background: #eef7fd;
    border-color: #1769aa;
}
.locker-option-grid input {
    accent-color: #1769aa;
}
.locker-option-grid i {
    color: #1769aa;
    font-size: 14px;
}
.locker-option-grid span {
    color: #172033;
    font-size: 13px;
    font-weight: 650;
}
.locker-number-modal .modal-content {
    border: 0;
    border-radius: 22px 22px 14px 14px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
    overflow: hidden;
}
.locker-number-modal .modal-header {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #dfe6ee;
    padding: 18px 26px 16px;
    position: relative;
}
.locker-number-modal .modal-header:before {
    background: #d7dfe8;
    border-radius: 999px;
    content: "";
    height: 6px;
    left: 50%;
    position: absolute;
    top: 12px;
    transform: translateX(-50%);
    width: 92px;
}
.locker-number-modal .modal-title {
    align-items: center;
    color: #172033;
    display: flex;
    font-size: 19px;
    font-weight: 600;
    gap: 8px;
    margin: 0;
}
.locker-number-modal .modal-header span {
    color: #64748b;
    display: block;
    font-size: 11px;
    font-weight: 500;
    margin-top: 3px;
}
.locker-number-modal .modal-body {
    background: #f6f8fb;
    max-height: 72vh;
    overflow: auto;
    padding: 20px 28px 24px;
}
.locker-modal-tools {
    display: grid;
    gap: 14px;
}
.locker-alias-list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.locker-alias-list button {
    background: #fff;
    border: 1px solid #d7e1ec;
    border-radius: 999px;
    color: #64707f;
    font-size: 13px;
    font-weight: 600;
    min-width: 58px;
    padding: 9px 16px;
    white-space: nowrap;
}
.locker-alias-list button.active {
    background: #eff7ff;
    border-color: #67aeea;
    color: #2368c4;
}
.locker-modal-tools label {
    align-items: center;
    background: #fff;
    border: 1px solid #d7e1ec;
    border-radius: 12px;
    box-shadow: 0 5px 16px rgba(15, 23, 42, .06);
    display: flex;
    gap: 14px;
    margin: 0;
    padding: 0 20px;
}
.locker-modal-tools label i {
    color: #64748b;
    font-size: 18px;
}
.locker-modal-tools input {
    border: 0;
    color: #172033;
    flex: 1;
    font-size: 15px;
    min-height: 46px;
    outline: 0;
}
.locker-modal-count {
    align-items: center;
    color: #64748b;
    display: flex;
    font-size: 14px;
    font-weight: 500;
    justify-content: space-between;
    margin: 18px 0 16px;
}
.locker-modal-count strong {
    color: #64748b;
    font-weight: 500;
}
.locker-modal-grid {
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
}
.locker-modal-grid button {
    align-items: center;
    aspect-ratio: 1 / 1.35;
    background: #fff;
    border: 1px solid #d7e1ec;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(15, 23, 42, .08);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 118px;
    overflow: hidden;
    padding: 12px 8px 0;
    position: relative;
}
.locker-modal-grid button:hover {
    transform: translateY(-2px);
}
.locker-modal-grid button.is-free {
    border-color: #d4f3e7;
}
.locker-modal-grid button.is-occupied {
    border-color: #d9e0ea;
}
.locker-modal-grid button.selected {
    background: #fff;
    border-color: #0bb74f;
    box-shadow: 0 10px 22px rgba(11, 183, 79, .18);
}
.locker-modal-grid button > strong {
    align-items: center;
    border-radius: 9px;
    color: #fff;
    display: inline-flex;
    font-size: 13px;
    font-weight: 600;
    justify-content: center;
    line-height: 1;
    min-height: 25px;
    min-width: 48px;
    padding: 5px 8px;
    position: absolute;
    top: 13px;
    z-index: 2;
}
.locker-modal-grid button.is-free > strong {
    background: #04b84c;
}
.locker-modal-grid button.is-occupied > strong {
    background: #f24d43;
}
.locker-modal-grid .locker-art {
    background: #ffbc55;
    border-radius: 6px 6px 2px 2px;
    bottom: 0;
    box-shadow: inset 0 -5px 0 rgba(74, 99, 107, .55);
    display: grid;
    gap: 3px;
    grid-template-columns: repeat(3, 1fr);
    height: 62px;
    padding: 8px 6px 7px;
    position: relative;
    width: 66px;
}
.locker-modal-grid button.is-occupied .locker-art {
    background: #ef9699;
}
.locker-modal-grid .locker-art i {
    background: rgba(255, 255, 255, .2);
    border-left: 1px solid rgba(255,255,255,.35);
    border-radius: 2px;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.08);
    position: relative;
}
.locker-modal-grid .locker-art i:before {
    background: #667b83;
    border-radius: 2px;
    content: "";
    height: 11px;
    left: 3px;
    position: absolute;
    top: 10px;
    width: 5px;
}
.locker-modal-grid .locker-art i:after {
    background: rgba(255,255,255,.75);
    border-radius: 999px;
    content: "";
    height: 3px;
    left: 50%;
    position: absolute;
    top: 7px;
    transform: translateX(-50%);
    width: 13px;
}
.locker-modal-grid button em {
    background: rgba(255,255,255,.72);
    border-radius: 3px;
    bottom: 30px;
    color: #fff;
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
    left: 50%;
    padding: 2px 5px;
    position: absolute;
    text-transform: uppercase;
    transform: translateX(-50%);
    z-index: 2;
}
.locker-empty-state {
    align-items: center;
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    color: #64748b;
    display: flex;
    font-size: 14px;
    font-weight: 600;
    justify-content: center;
    min-height: 120px;
}
.renew-seat-picker-field {
    max-width: 360px;
}
.renew-seat-picker-button {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--plan-theme-border);
    border-radius: 12px;
    color: #172033;
    cursor: pointer;
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    min-height: 46px;
    padding: 0 12px;
    text-align: left;
    width: 100%;
}
.renew-seat-picker-button i {
    color: #1769aa;
}
.renew-seat-picker-button span {
    color: #172033;
    flex: 1;
    font-weight: 600;
}
.renew-seat-picker-button small {
    background: #e8f3fb;
    border-radius: 999px;
    color: #1769aa;
    font-size: 12px;
    font-weight: 650;
    padding: 4px 9px;
}
.member-seat-picker-block {
    display: grid;
    gap: 6px;
}
.renew-seat-modal .modal-content {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
    overflow: hidden;
}
.renew-seat-modal .modal-header {
    background: #fff;
    border-bottom: 1px solid #dfe6ee;
    padding: 16px 20px;
}
.renew-seat-modal .modal-title {
    align-items: center;
    color: #172033;
    display: flex;
    font-size: 18px;
    font-weight: 600;
    gap: 8px;
}
.renew-seat-modal .modal-body {
    background: #f8fafc;
    display: grid;
    gap: 12px;
    max-height: 72vh;
    overflow: auto;
    padding: 16px;
}
.renew-seat-actions {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.renew-seat-actions button {
    background: #fff;
    border: 1px solid #d7e1ec;
    border-radius: 8px;
    color: #172033;
    font-size: 13px;
    font-weight: 650;
    min-height: 38px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.renew-seat-actions button:last-child {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color: var(--primary);
    color: #fff;
}
.member-seat-modal .renew-seat-actions button:last-child {
    box-shadow: 0 10px 18px rgba(23, 107, 135, .16);
}
.renew-seat-floor-tabs,
.renew-seat-batch-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
}
.renew-seat-floor-tabs button,
.renew-seat-batch-tabs button {
    background: #fff;
    border: 1px solid #d7e1ec;
    border-radius: 7px;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 12px;
    white-space: nowrap;
}
.renew-seat-floor-tabs button.active,
.renew-seat-batch-tabs button.active {
    background: #e8f3fb;
    border-color: #5aa4dc;
    color: #1769aa;
}
.renew-seat-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}
.renew-seat-grid .seat-tile.selected {
    border-color: #1769aa;
    box-shadow: 0 10px 22px rgba(23, 105, 170, .18);
}
.renew-seat-grid .seat-tile.selected:after {
    align-items: center;
    background: #1769aa;
    border-radius: 999px;
    color: #fff;
    content: "\F26A";
    display: flex;
    font-family: bootstrap-icons;
    font-size: 11px;
    height: 20px;
    justify-content: center;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 20px;
}
.renew-seat-empty {
    align-items: center;
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    color: #64748b;
    display: flex;
    font-size: 14px;
    font-weight: 600;
    grid-column: 1 / -1;
    justify-content: center;
    min-height: 120px;
}
.member-payment-page {
    display: grid;
    gap: 14px;
    padding: 18px;
}
.member-payment-page > .plan-form-head {
    align-items: center;
    min-height: 64px;
    padding: 14px 22px;
}
.member-payment-page > .plan-form-head > div {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    min-width: 0;
}
.member-payment-page > .plan-form-head .master-kicker {
    margin: 0;
}
.member-payment-page > .plan-form-head h1 {
    font-size: 26px;
    line-height: 1;
    margin: 0;
    white-space: nowrap;
}
.member-payment-page > .plan-form-head p {
    border-left: 1px solid #d8e2ee;
    font-size: 14px;
    line-height: 1.2;
    margin: 0;
    min-width: 0;
    padding-left: 14px;
}
.renew-member-page > .plan-form-head {
    align-items: center;
    min-height: 64px;
    padding: 14px 22px;
}
.renew-member-page > .plan-form-head > div {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    min-width: 0;
}
.renew-member-page > .plan-form-head .master-kicker,
.renew-member-page > .plan-form-head h1,
.renew-member-page > .plan-form-head p {
    margin: 0;
}
.renew-member-page > .plan-form-head h1 {
    font-size: 26px;
    line-height: 1;
    white-space: nowrap;
}
.renew-member-page > .plan-form-head p {
    border-left: 1px solid #d8e2ee;
    font-size: 14px;
    line-height: 1.2;
    min-width: 0;
    padding-left: 14px;
}
.renew-editor-form {
    max-width: none;
    width: 100%;
}
.renew-member-page > .plan-form-head {
    max-width: none;
}
.renew-tax-options {
    background: #f8fafc;
    border: 1px solid var(--plan-theme-border);
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px;
}
.renew-tax-options > span {
    color: var(--plan-theme);
    flex: 0 0 100%;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}
.renew-tax-options small {
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
}
.renew-tax-options label {
    align-items: center;
    background: #fff;
    border: 1px solid #d8e1ea;
    border-radius: 999px;
    color: #0b1728;
    display: inline-flex;
    font-size: 13px;
    font-weight: 900;
    gap: 8px;
    margin: 0;
    min-height: 36px;
    padding: 6px 12px;
}
.renew-tax-options input {
    accent-color: var(--plan-theme);
}
.member-payment-page-head {
    align-items: center;
    background: #fff;
    border: 1px solid #dbe5f0;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    padding: 18px 20px;
}
.member-payment-page-head span {
    color: #1769aa;
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    gap: 6px;
    margin-bottom: 4px;
}
.member-payment-page-head h1 {
    color: #091a33;
    font-size: 22px;
    font-weight: 650;
    margin: 0;
}
.member-payment-page-head p {
    color: #66758b;
    font-size: 13px;
    font-weight: 500;
    margin: 4px 0 0;
}
.member-payment-card {
    background: #fff;
    border: 1px solid #dbe5f0;
    border-radius: 8px;
    overflow: hidden;
}
.member-payment-card.active {
    border-color: #9cc7ed;
    box-shadow: 0 12px 30px rgba(23, 105, 170, .08);
}
.member-payment-card-top {
    background: #1769aa;
    color: #fff;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(160px, 1fr) minmax(240px, 2fr);
    padding: 13px 16px;
}
.member-payment-card-top span,
.member-payment-amounts span,
.member-payment-history span,
.member-payment-form label span,
.member-payment-form-head span {
    color: #7b8ba2;
    display: block;
    font-size: 11px;
    font-weight: 600;
}
.member-payment-card-top span {
    color: rgba(255,255,255,.78);
}
.member-payment-card-top strong {
    color: #fff;
    display: block;
    font-size: 15px;
    font-weight: 600;
    margin-top: 2px;
}
.member-payment-amounts {
    border-bottom: 1px solid #e5edf5;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding: 14px 16px;
}
.member-payment-amounts strong,
.member-payment-history strong {
    color: #172033;
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-top: 3px;
}
.member-payment-card-actions {
    align-items: center;
    display: flex;
    gap: 9px;
    justify-content: flex-end;
    padding: 12px 16px;
}
.member-payment-action {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 7px;
    display: inline-flex;
    font-size: 13px;
    font-weight: 600;
    gap: 6px;
    min-height: 36px;
    padding: 8px 13px;
}
.member-payment-action.pay {
    background: #148658;
    border-color: #148658;
    color: #fff;
}
.member-payment-action.print {
    background: #1769aa;
    border-color: #1769aa;
    color: #fff;
}
.member-payment-paid {
    background: #e8f6ef;
    border-radius: 999px;
    color: #148658;
    font-size: 12px;
    font-weight: 650;
    padding: 7px 12px;
}
.member-payment-history {
    display: grid;
    gap: 10px;
    padding: 16px;
}
.member-payment-history h2 {
    color: #7b8492;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}
.member-payment-history-row {
    align-items: center;
    background: #fbfcfe;
    border: 1px solid #dfe7f0;
    border-radius: 9px;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    padding: 12px 16px;
}
.member-payment-history-row button {
    background: transparent;
    border: 0;
    color: #1769aa;
    font-size: 18px;
}
.member-payment-history-empty,
.member-payment-empty {
    align-items: center;
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    color: #64748b;
    display: flex;
    font-size: 13px;
    font-weight: 500;
    justify-content: center;
    min-height: 72px;
}
.member-payment-empty {
    flex-direction: column;
    gap: 6px;
    min-height: 180px;
}
.member-payment-empty i {
    color: #1769aa;
    font-size: 24px;
}
.member-payment-empty strong {
    color: #172033;
    font-size: 16px;
    font-weight: 600;
}
.member-payment-form {
    background: #ffffff;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 18px;
}
.member-payment-form-card {
    background: #fff;
    border: 1px solid #dbe5f0;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .07);
    overflow: hidden;
}
.member-payment-form-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}
.member-payment-form-head strong {
    color: #172033;
    display: block;
    font-size: 18px;
    font-weight: 600;
    margin-top: 3px;
}
.member-payment-form-grid {
    display: grid;
    gap: 14px 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.member-payment-form-grid label {
    display: grid;
    gap: 6px;
}
.member-payment-form-grid .wide,
.member-payment-method,
.member-payment-section-title {
    grid-column: 1 / -1;
}
.member-payment-section-title {
    border-top: 1px solid #e5e7eb;
    color: #4b5563;
    font-size: 15px;
    font-weight: 600;
    margin-top: 2px;
    padding-top: 16px;
}
.member-payment-method {
    display: grid;
    gap: 14px 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.member-payment-method-empty {
    background: var(--plan-theme-soft);
    border: 1px dashed var(--plan-theme-border);
    border-radius: 12px;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
    grid-column: 1 / -1;
    min-height: 46px;
    padding: 14px 16px;
}
.member-payment-form .form-control,
.member-payment-form .form-select {
    border-color: #b8c1cc;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 400;
    min-height: 48px;
    padding: 10px 13px;
}
.member-payment-form .form-control[readonly] {
    background: #f8fafc;
    color: #98a2b3;
}
.member-payment-check {
    align-items: center;
    display: flex !important;
    gap: 12px;
    margin: 2px 0 4px;
}
.member-payment-check input {
    accent-color: #f25042;
    height: 20px;
    width: 20px;
}
.member-payment-check span {
    color: #4b5563 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}
.member-payment-form-actions {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
    padding-top: 16px;
}
.member-payment-form-actions .btn {
    align-items: center;
    border-radius: 10px;
    display: inline-flex;
    font-size: 16px;
    font-weight: 600;
    gap: 7px;
    justify-content: center;
    min-height: 48px;
    padding: 11px 16px;
}
.member-payment-form-actions .btn-primary {
    background: #f25042;
    border-color: #f25042;
}
.member-payment-form-actions .btn-light {
    background: #f8fafc;
    border-color: #e5eaf1;
    color: #172033;
}
@media (max-width: 991.98px) {
    .add-bill-card,
    .add-bill-method {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .member-payment-amounts,
    .member-payment-form-grid,
    .member-payment-method {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 575.98px) {
    .add-bill-page {
        padding: 14px;
    }
    .add-bill-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }
    .add-bill-card,
    .add-bill-method {
        grid-template-columns: 1fr;
    }
    .add-bill-actions {
        justify-content: stretch;
    }
    .add-bill-actions .btn {
        justify-content: center;
        width: 100%;
    }
    .member-payment-page {
        padding: 14px;
    }
    .member-payment-page > .plan-form-head {
        padding: 14px;
    }
    .member-payment-page > .plan-form-head h1 {
        font-size: 22px;
    }
    .member-payment-page > .plan-form-head p {
        border-left: 0;
        flex-basis: 100%;
        padding-left: 0;
    }
    .renew-member-page > .plan-form-head {
        padding: 14px;
    }
    .renew-member-page > .plan-form-head h1 {
        font-size: 22px;
    }
    .renew-member-page > .plan-form-head p {
        border-left: 0;
        flex-basis: 100%;
        padding-left: 0;
    }
    .member-payment-page-head,
    .member-payment-card-actions,
    .member-payment-form-actions {
        align-items: stretch;
        flex-direction: column;
    }
    .member-payment-page-head .btn,
    .member-payment-card-actions form,
    .member-payment-card-actions button,
    .member-payment-form-actions .btn {
        width: 100%;
    }
    .member-payment-card-top,
    .member-payment-amounts,
    .member-payment-history-row,
    .member-payment-form-grid,
    .member-payment-method {
        grid-template-columns: 1fr;
    }
}