/* Formal documents, accounts, and IB pages */

.documents-page,
.accounts-page,
.ib-page {
    --ink: #f4f0e8;
    --muted: #a3abba;
    --gold: #d4b88a;
    --line: rgba(212, 184, 138, 0.28);
    --ap-primary: #d4b88a;
    --ap-secondary: #b8956a;
    --ap-text: #f4f0e8;
    --ap-muted: #a3abba;
    --ap-border: rgba(212, 184, 138, 0.28);
    --ib-primary: #d4b88a;
    --ib-secondary: #b8956a;
    --ib-text: #f4f0e8;
    --ib-muted: #a3abba;
    --ib-border: rgba(212, 184, 138, 0.28);
    font-family: "Manrope", "Poppins", sans-serif;
    color: var(--ink);
}

.documents-page .documents-shell,
.documents-page .kyc-info-card,
.documents-page .document-card,
.accounts-page .accounts-card,
.ib-page .ib-card {
    background:
        linear-gradient(180deg, rgba(212, 184, 138, 0.05), transparent 36%),
        #141c2e !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24) !important;
}

.documents-page .page-title,
.accounts-page .accounts-title,
.ib-page .ib-title,
.documents-page .kyc-header-text h5,
.accounts-page .accounts-section-title,
.ib-page .ib-section-title,
.accounts-page .platform-title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 500;
    color: var(--ink) !important;
    letter-spacing: 0;
}

.documents-page .page-title span,
.accounts-page .accounts-subtitle,
.ib-page .ib-subtitle,
.documents-page .kyc-header-subtitle {
    color: var(--muted) !important;
    font-family: "Manrope", "Poppins", sans-serif;
}

.documents-page .page-header,
.accounts-page .accounts-card__body,
.ib-page .ib-card__body,
.documents-page .kyc-info-card .card-header {
    border-color: rgba(212, 184, 138, 0.16) !important;
}

.documents-page .btn-upload,
.accounts-page .accounts-create-btn,
.accounts-page .btn-action.primary {
    background: linear-gradient(180deg, #e4cc9e, #c6a36a) !important;
    color: #1a140c !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.documents-page .btn-upload:hover,
.accounts-page .accounts-create-btn:hover,
.accounts-page .btn-action.primary:hover {
    color: #1a140c !important;
    filter: brightness(1.05);
    transform: none;
    box-shadow: none !important;
}

.accounts-page .accounts-back,
.ib-page .ib-back,
.accounts-page .btn-action,
.ib-page .btn-outline-light {
    background: transparent !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    border-radius: 12px !important;
}

.accounts-page .accounts-back:hover,
.ib-page .ib-back:hover,
.accounts-page .btn-action:hover,
.ib-page .btn-outline-light:hover {
    border-color: rgba(212, 184, 138, 0.55) !important;
    color: var(--gold) !important;
    background: rgba(212, 184, 138, 0.08) !important;
    transform: none;
}

.documents-page .document-card-icon,
.documents-page .kyc-header-icon,
.accounts-page .accounts-section-title i,
.ib-page .ib-section-title i,
.accounts-page .platform-title i,
.documents-page .requirement-item i,
.documents-page .document-type {
    color: var(--gold) !important;
}

.documents-page .document-status-badge,
.accounts-page .account-status {
    border-radius: 999px;
    letter-spacing: 0.04em;
}

.documents-page .document-actions .btn {
    border-radius: 10px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
}

.documents-page .document-actions .btn-info {
    color: var(--gold);
    border-color: rgba(212, 184, 138, 0.4);
    background: rgba(212, 184, 138, 0.08);
}

.accounts-page .accounts-table,
.ib-page table {
    color: var(--ink);
}

.accounts-page .accounts-table th,
.ib-page table th,
.accounts-page .account-type,
.ib-page .ib-field-label,
.ib-page .ib-stat-label {
    color: var(--muted) !important;
}

.accounts-page .account-number,
.accounts-page .account-balance,
.ib-page .ib-stat-value {
    color: var(--ink) !important;
    font-variant-numeric: tabular-nums;
}

.ib-page .form-control,
.documents-page .form-control {
    background: rgba(8, 12, 22, 0.45) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    box-shadow: none !important;
}

.ib-page .form-control:focus {
    border-color: rgba(212, 184, 138, 0.7) !important;
    box-shadow: 0 0 0 3px rgba(212, 184, 138, 0.12) !important;
}

.ib-page .ib-stat-item,
.documents-page .requirement-item,
.accounts-page .platform-content {
    border-color: rgba(212, 184, 138, 0.16) !important;
}

.documents-page .kyc-info-card .card-header,
.documents-page .kyc-info-card .card-body {
    background: transparent !important;
    color: var(--ink);
}

.accounts-page .accounts-card::before,
.ib-page .ib-card::before {
    background: var(--gold) !important;
    opacity: 0.7;
}

.documents-page .alert-info {
    background: rgba(212, 184, 138, 0.08) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
}

/* Accounts: MetaTrader download desk */
.accounts-page .platform-card {
    margin-top: 1rem;
}

.accounts-page .platform-content {
    align-items: stretch;
    gap: 2.25rem;
}

.accounts-page .platform-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.accounts-page .platform-title {
    font-size: 1.85rem;
    line-height: 1.15;
    margin-bottom: 0.7rem;
}

.accounts-page .platform-description {
    color: var(--muted) !important;
    max-width: 38rem;
    margin-bottom: 1.15rem;
    font-size: 0.92rem;
    line-height: 1.65;
}

.accounts-page .platform-features {
    gap: 0.5rem;
}

.accounts-page .feature-badge {
    background: rgba(212, 184, 138, 0.08);
    color: var(--ink);
    border: 1px solid rgba(212, 184, 138, 0.32);
    border-radius: 999px;
    padding: 0.32rem 0.75rem;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
}

.accounts-page .feature-badge i {
    color: var(--gold);
}

.accounts-page .platform-download {
    flex: 0 0 320px;
    padding-left: 1.75rem;
    border-left: 1px solid rgba(212, 184, 138, 0.18);
    display: flex;
    align-items: center;
}

.accounts-page .download-buttons {
    width: 100%;
    gap: 0.6rem;
}

.accounts-page .mt5-download-btn {
    min-width: 0;
    width: 100%;
    gap: 0.8rem;
    padding: 0.72rem 0.85rem;
    border-radius: 14px;
    background: rgba(8, 12, 22, 0.35);
    border: 1px solid rgba(212, 184, 138, 0.32);
    color: var(--ink);
    box-shadow: none;
    transform: none;
}

.accounts-page .mt5-download-btn::before {
    display: none;
}

.accounts-page .mt5-download-btn:hover {
    transform: none;
    box-shadow: none;
    color: var(--ink);
    border-color: rgba(212, 184, 138, 0.7);
    background: rgba(212, 184, 138, 0.08);
    text-decoration: none;
}

.accounts-page .mt5-logo,
.accounts-page .platform-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(212, 184, 138, 0.1);
    border: 1px solid rgba(212, 184, 138, 0.28);
    color: var(--gold);
    font-size: 1.15rem;
    object-fit: contain;
    padding: 6px;
    box-sizing: border-box;
}

.accounts-page .download-title {
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 600;
    margin-bottom: 0.1rem;
}

.accounts-page .download-subtitle {
    color: var(--muted);
    font-size: 0.75rem;
}

.accounts-page .download-icon {
    color: var(--gold);
    font-size: 0.85rem;
    animation: none;
}

.accounts-page .mt5-download-btn[download] {
    background: linear-gradient(180deg, #e4cc9e, #c6a36a);
    border-color: transparent;
    color: #1a140c;
}

.accounts-page .mt5-download-btn[download]:hover {
    color: #1a140c;
    filter: brightness(1.05);
    background: linear-gradient(180deg, #e4cc9e, #c6a36a);
}

.accounts-page .mt5-download-btn[download] .download-title {
    color: #1a140c;
}

.accounts-page .mt5-download-btn[download] .download-subtitle,
.accounts-page .mt5-download-btn[download] .download-icon {
    color: rgba(26, 20, 12, 0.72);
}

.accounts-page .mt5-download-btn[download] .mt5-logo {
    background: rgba(26, 20, 12, 0.08);
    border-color: rgba(26, 20, 12, 0.12);
}

@media (max-width: 768px) {
    .accounts-page .platform-content {
        text-align: left;
        gap: 1.25rem;
    }

    .accounts-page .platform-title {
        font-size: 1.55rem;
        justify-content: flex-start;
    }

    .accounts-page .platform-features {
        justify-content: flex-start;
    }

    .accounts-page .platform-download {
        flex-basis: auto;
        width: 100%;
        padding-left: 0;
        border-left: 0;
        padding-top: 1.1rem;
        border-top: 1px solid rgba(212, 184, 138, 0.18);
    }
}

/* Account details */
.account-desk {
    --ink: #f4f0e8;
    --muted: #a3abba;
    --gold: #d4b88a;
    --line: rgba(212, 184, 138, 0.28);
    font-family: "Manrope", "Poppins", sans-serif;
    color: var(--ink);
}

.account-desk .page-header,
.account-desk .info-container,
.account-desk .trades-table,
.account-desk .credentials-card,
.account-desk .stats-card {
    background:
        linear-gradient(180deg, rgba(212, 184, 138, 0.05), transparent 38%),
        #141c2e !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24) !important;
}

.account-desk .page-header h2,
.account-desk .info-container h5,
.account-desk .trades-table h5,
.account-desk .credentials-card h6 {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-weight: 500 !important;
    color: var(--ink) !important;
    letter-spacing: 0 !important;
}

.account-desk .page-header h2 i,
.account-desk .info-container h5 i,
.account-desk .trades-table h5 i,
.account-desk .credentials-card h6 i {
    color: var(--gold) !important;
}

.account-desk .page-header-subtitle,
.account-desk .cred-label,
.account-desk .text-white-50 {
    color: var(--muted) !important;
}

.account-desk .accounts-back,
.account-desk .btn-ghost,
.account-desk .btn-outline-primary,
.account-desk .btn-outline-danger {
    background: transparent !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    border-radius: 12px !important;
}

.account-desk .accounts-back:hover,
.account-desk .btn-ghost:hover,
.account-desk .btn-outline-primary:hover {
    color: var(--gold) !important;
    border-color: rgba(212, 184, 138, 0.55) !important;
    background: rgba(212, 184, 138, 0.08) !important;
    transform: none !important;
}

.account-desk .btn-primary,
.account-desk #btnChangeLeverage,
.account-desk #btnRevealCreds {
    background: linear-gradient(180deg, #e4cc9e, #c6a36a) !important;
    color: #1a140c !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.account-desk .btn-primary:hover,
.account-desk #btnChangeLeverage:hover,
.account-desk #btnRevealCreds:hover {
    color: #1a140c !important;
    filter: brightness(1.05);
    transform: none !important;
}

.account-desk .table,
.account-desk .table th,
.account-desk .table td {
    background: transparent !important;
    color: var(--ink) !important;
    border-color: rgba(212, 184, 138, 0.14) !important;
}

.account-desk .table th {
    color: var(--muted) !important;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

.account-desk .table tr:hover td {
    background: rgba(212, 184, 138, 0.05) !important;
}

.account-desk .stats-card h6 {
    color: var(--muted) !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.account-desk .stats-card h3 {
    color: var(--ink) !important;
    font-variant-numeric: tabular-nums;
}

.account-desk .stats-card:hover {
    transform: none;
    box-shadow: none !important;
    border-color: rgba(212, 184, 138, 0.5) !important;
}

.account-desk .badge-success,
.account-desk .text-success {
    background: rgba(125, 202, 168, 0.14) !important;
    color: #7dcaa8 !important;
}

.account-desk .badge-danger,
.account-desk .text-danger {
    color: #e08b8b !important;
}

.account-desk .badge-warning,
.account-desk .text-warning {
    color: #e2c27a !important;
}

.account-desk .cred-input,
.account-desk #mt5Captcha {
    background: rgba(8, 12, 22, 0.45) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    border-radius: 10px !important;
}

.account-desk .cred-input:focus,
.account-desk #mt5Captcha:focus {
    border-color: rgba(212, 184, 138, 0.7) !important;
    box-shadow: 0 0 0 3px rgba(212, 184, 138, 0.12) !important;
    outline: none;
}

.account-desk .page-link {
    background: transparent;
    border-color: var(--line);
    color: var(--ink);
}

.account-desk .page-item.active .page-link {
    background: linear-gradient(180deg, #e4cc9e, #c6a36a);
    border-color: transparent;
    color: #1a140c;
}

.account-desk .modal-content {
    background: #141c2e !important;
    border: 1px solid var(--line) !important;
    color: var(--ink);
}

.account-desk .bg-warning {
    background: rgba(226, 194, 122, 0.16) !important;
    color: #e2c27a !important;
}

.account-desk .bg-success {
    background: rgba(125, 202, 168, 0.16) !important;
    color: #7dcaa8 !important;
}

.account-desk .bg-danger {
    background: rgba(224, 139, 139, 0.16) !important;
    color: #e08b8b !important;
}

.account-desk .bg-info {
    background: rgba(212, 184, 138, 0.14) !important;
    color: var(--gold) !important;
}

/* Document upload */
.doc-page {
    --ink: #f4f0e8;
    --muted: #a3abba;
    --gold: #d4b88a;
    --line: rgba(212, 184, 138, 0.28);
    font-family: "Manrope", "Poppins", sans-serif;
    color: var(--ink);
}

.doc-page .doc-title,
.doc-page .doc-side-title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: 0;
}

.doc-page .doc-subtitle,
.doc-page .doc-field__hint,
.doc-page .document-side,
.doc-page .doc-side-list p {
    color: var(--muted);
}

.doc-page .doc-card {
    background:
        linear-gradient(180deg, rgba(212, 184, 138, 0.05), transparent 36%),
        #141c2e;
    border: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
}

.doc-page .doc-card::before {
    display: none;
}

.doc-page .doc-alert {
    background: rgba(212, 184, 138, 0.08);
    border: 1px solid var(--line);
    color: var(--ink);
}

.doc-page .doc-alert.alert-warning {
    background: rgba(226, 194, 122, 0.1);
    border-color: rgba(226, 194, 122, 0.4);
    color: #e2c27a;
}

.doc-page .doc-alert.alert-danger {
    background: rgba(224, 139, 139, 0.1);
    border-color: rgba(224, 139, 139, 0.4);
    color: #e08b8b;
}

.doc-page .form-label,
.doc-page .doc-field label,
.doc-page .doc-side-list,
.doc-page .doc-side-list strong {
    color: var(--ink);
}

.doc-page .form-control,
.doc-page .form-select {
    background: rgba(8, 12, 22, 0.45);
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: 12px;
    color-scheme: dark;
}

.doc-page .form-control:focus,
.doc-page .form-select:focus {
    border-color: rgba(212, 184, 138, 0.7);
    box-shadow: 0 0 0 3px rgba(212, 184, 138, 0.12);
    background: rgba(8, 12, 22, 0.55);
    color: var(--ink);
}

.doc-page .file-upload-preview {
    background: rgba(8, 12, 22, 0.35);
    border: 1px dashed rgba(212, 184, 138, 0.45);
    border-radius: 14px;
}

.doc-page .file-upload-preview:hover {
    border-color: var(--gold);
    background: rgba(212, 184, 138, 0.06);
    transform: none;
    box-shadow: none;
}

.doc-page .file-upload-preview i,
.doc-page .doc-side-title i,
.doc-page .doc-side-icon {
    color: var(--gold);
}

.doc-page .doc-side-icon {
    background: rgba(212, 184, 138, 0.08);
    border-color: var(--line);
}

.doc-page .doc-side-title {
    border-bottom-color: rgba(212, 184, 138, 0.18);
}

.doc-page .doc-btn--ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 12px;
    text-decoration: none;
}

.doc-page .doc-btn--ghost:hover {
    color: var(--gold);
    border-color: rgba(212, 184, 138, 0.55);
    background: rgba(212, 184, 138, 0.08);
    transform: none;
}

.doc-page .doc-btn--primary {
    background: linear-gradient(180deg, #e4cc9e, #c6a36a);
    color: #1a140c;
    border-radius: 12px;
    box-shadow: none;
}

.doc-page .doc-btn--primary:hover {
    color: #1a140c;
    filter: brightness(1.05);
    transform: none;
    box-shadow: none;
}

.doc-page .text-danger {
    color: #e08b8b !important;
}

/* Referral program */
.referral-page {
    --ink: #f4f0e8;
    --muted: #a3abba;
    --gold: #d4b88a;
    --line: rgba(212, 184, 138, 0.28);
    font-family: "Manrope", "Poppins", sans-serif;
    color: var(--ink);
}

.referral-page .referral-title,
.referral-page .referral-section-title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: 0;
}

.referral-page .referral-subtitle,
.referral-page .referral-field-label,
.referral-page .referral-stat-label,
.referral-page .referral-empty-text,
.referral-page .text-muted {
    color: var(--muted) !important;
}

.referral-page .referral-section-title {
    border-bottom-color: rgba(212, 184, 138, 0.18);
}

.referral-page .referral-section-title i {
    color: var(--gold);
}

.referral-page .referral-back,
.referral-page .btn-outline-light,
.referral-page .referral-page-btn {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink);
    box-shadow: none;
    border-radius: 12px;
}

.referral-page .referral-back:hover,
.referral-page .btn-outline-light:hover,
.referral-page .referral-page-btn:hover {
    color: var(--gold);
    border-color: rgba(212, 184, 138, 0.55);
    background: rgba(212, 184, 138, 0.08);
    transform: none;
    box-shadow: none;
}

.referral-page .referral-page-btn.active {
    background: linear-gradient(180deg, #e4cc9e, #c6a36a);
    border-color: transparent;
    color: #1a140c;
    box-shadow: none;
}

.referral-page .referral-card,
.referral-page .referral-stat-item {
    background:
        linear-gradient(180deg, rgba(212, 184, 138, 0.05), transparent 38%),
        #141c2e;
    border: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
}

.referral-page .referral-stat-item {
    background: rgba(8, 12, 22, 0.35);
    box-shadow: none;
}

.referral-page .referral-card::before {
    display: none;
}

.referral-page .referral-stat-value,
.referral-page .text-white {
    color: var(--ink) !important;
}

.referral-page .text-success {
    color: #7dcaa8 !important;
}

.referral-page .text-warning {
    color: #e2c27a !important;
}

.referral-page .form-control {
    background: rgba(8, 12, 22, 0.45);
    border: 1px solid var(--line);
    color: var(--ink);
}

.referral-page .form-control:focus {
    border-color: rgba(212, 184, 138, 0.7);
    box-shadow: 0 0 0 3px rgba(212, 184, 138, 0.12);
    background: rgba(8, 12, 22, 0.55);
    color: var(--ink);
}

.referral-page .referral-table thead th {
    color: var(--muted);
    border-bottom-color: rgba(212, 184, 138, 0.18);
}

.referral-page .referral-table td {
    border-bottom-color: rgba(212, 184, 138, 0.12);
    color: var(--ink);
}

.referral-page .referral-table tbody tr:hover {
    background: rgba(212, 184, 138, 0.05);
}

.referral-page .referral-table .badge.bg-success {
    background: rgba(125, 202, 168, 0.16) !important;
    color: #7dcaa8 !important;
}

.referral-page .referral-table .badge.bg-warning {
    background: rgba(226, 194, 122, 0.16) !important;
    color: #e2c27a !important;
}

.referral-page .referral-table .badge.bg-secondary {
    background: rgba(163, 171, 186, 0.16) !important;
    color: var(--muted) !important;
}

@media (max-width: 768px) {
    .referral-page .referral-table.table-mobile-stack tr {
        border-color: rgba(212, 184, 138, 0.28);
        background: #141c2e;
    }

    .referral-page .referral-table.table-mobile-stack td::before {
        color: var(--muted);
    }
}

/* Create trading account */
.account-create-page {
    --primary-color: #d4b88a;
    --secondary-color: #b8956a;
    --dark-bg: #1a140c;
    --ink: #f4f0e8;
    --muted: #a3abba;
    --gold: #d4b88a;
    --line: rgba(212, 184, 138, 0.28);
    font-family: "Manrope", "Poppins", sans-serif;
    color: var(--ink);
}

.account-create-page .page-header,
.account-create-page .form-container {
    background:
        linear-gradient(180deg, rgba(212, 184, 138, 0.05), transparent 36%),
        #141c2e !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24) !important;
    animation: none;
}

.account-create-page .page-header::before,
.account-create-page .form-container::before,
.account-create-page .btn-submit::before,
.account-create-page .account-option-label::before {
    display: none;
}

.account-create-page .page-header h2,
.account-create-page .form-container h5,
.account-create-page .side-card h5 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 500;
    color: var(--ink) !important;
    text-shadow: none;
}

.account-create-page .page-header i,
.account-create-page .form-container h5 i {
    color: var(--gold) !important;
    filter: none;
}

.account-create-page .form-label::before {
    background: var(--gold);
}

.account-create-page .text-white-50,
.account-create-page .form-text,
.account-create-page #type-info,
.account-create-page .account-details p {
    color: var(--muted) !important;
}

.account-create-page .form-label,
.account-create-page .account-details h5,
.account-create-page #type-specs {
    color: var(--ink) !important;
}

.account-create-page .form-select,
.account-create-page .form-control {
    background: rgba(8, 12, 22, 0.45);
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: 12px;
    color-scheme: dark;
}

.account-create-page .form-select:focus,
.account-create-page .form-control:focus {
    border-color: rgba(212, 184, 138, 0.7);
    box-shadow: 0 0 0 3px rgba(212, 184, 138, 0.12);
    background-color: rgba(8, 12, 22, 0.55);
    color: var(--ink);
}

.account-create-page .form-select option {
    background: #141c2e;
    color: var(--ink);
}

.account-create-page .with-plus-left {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d4b88a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><line x1='12' y1='8' x2='12' y2='16'/><line x1='8' y1='12' x2='16' y2='12'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: 0.7rem center !important;
    background-size: 16px 16px !important;
}

.account-create-page .form-select:disabled,
.account-create-page .form-select[readonly] {
    background-color: rgba(8, 12, 22, 0.3) !important;
    border-color: rgba(212, 184, 138, 0.16) !important;
    color: var(--muted) !important;
}

.account-create-page .account-option-label {
    background: rgba(8, 12, 22, 0.35);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.account-create-page .account-option-label:hover {
    border-color: rgba(212, 184, 138, 0.55);
    background: rgba(212, 184, 138, 0.06);
}

.account-create-page .account-radio:checked + .account-option-label {
    background: rgba(212, 184, 138, 0.1);
    border-color: rgba(212, 184, 138, 0.7);
    box-shadow: none;
}

.account-create-page .account-icon {
    background: rgba(212, 184, 138, 0.08);
    border: 1px solid var(--line);
    color: var(--gold);
}

.account-create-page .account-radio:checked + .account-option-label .account-icon {
    background: linear-gradient(180deg, #e4cc9e, #c6a36a);
    color: #1a140c;
    box-shadow: none;
}

.account-create-page .platform-section,
.account-create-page .platform-section.active {
    background: rgba(8, 12, 22, 0.28);
    border: 1px solid rgba(212, 184, 138, 0.18);
    box-shadow: none;
}

.account-create-page .alert-info,
.account-create-page .pending-note {
    background: rgba(212, 184, 138, 0.08) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    border-radius: 14px;
    border-left: 1px solid var(--line) !important;
}

.account-create-page .alert-info i,
.account-create-page .pending-mark {
    color: var(--gold) !important;
}

.account-create-page .pending-mark {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(226, 194, 122, 0.12);
    border: 1px solid rgba(226, 194, 122, 0.4);
}

.account-create-page .text-danger {
    color: #e08b8b !important;
    background: rgba(224, 139, 139, 0.1);
    border-left-color: #e08b8b;
}

.account-create-page .btn-cancel {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: 12px;
    box-shadow: none;
}

.account-create-page .btn-cancel:hover {
    color: var(--gold);
    border-color: rgba(212, 184, 138, 0.55);
    background: rgba(212, 184, 138, 0.08);
    transform: none;
    box-shadow: none;
}

.account-create-page .btn-submit {
    background: linear-gradient(180deg, #e4cc9e, #c6a36a);
    color: #1a140c;
    border: 0;
    border-radius: 12px;
    box-shadow: none;
}

.account-create-page .btn-submit:hover {
    color: #1a140c;
    filter: brightness(1.05);
    transform: none;
    box-shadow: none;
}

.account-create-page .form-group {
    animation: none;
}

#depositRequiredModal .modal-content,
#usdWalletInsufficientModal .modal-content,
#usdWalletExistsModal .modal-content {
    background: #141c2e !important;
    border: 1px solid rgba(212, 184, 138, 0.35) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28) !important;
    color: #f4f0e8;
}

#depositRequiredModal .modal-header,
#depositRequiredModal .modal-body,
#depositRequiredModal .modal-footer,
#usdWalletInsufficientModal .modal-header,
#usdWalletInsufficientModal .modal-body,
#usdWalletInsufficientModal .modal-footer,
#usdWalletExistsModal .modal-header,
#usdWalletExistsModal .modal-body,
#usdWalletExistsModal .modal-footer {
    background: transparent !important;
    border-color: rgba(212, 184, 138, 0.16) !important;
    color: #f4f0e8 !important;
}

#depositRequiredModal .modal-body p,
#depositRequiredModal .modal-body span,
#usdWalletInsufficientModal .modal-body p,
#usdWalletInsufficientModal .modal-body span,
#usdWalletExistsModal .modal-body p,
#usdWalletExistsModal .modal-body span {
    color: #a3abba !important;
}

#depositRequiredModal .modal-body strong,
#usdWalletInsufficientModal .modal-body strong,
#usdWalletExistsModal .modal-body strong,
#depositRequiredModal .modal-title,
#usdWalletInsufficientModal .modal-title,
#usdWalletExistsModal .modal-title {
    color: #f4f0e8 !important;
}

#depositRequiredModal .modal-title > span:first-child,
#usdWalletInsufficientModal .modal-title > span:first-child,
#usdWalletExistsModal .modal-title > span:first-child {
    background: rgba(212, 184, 138, 0.12) !important;
    color: #d4b88a !important;
}

#usdWalletInsufficientModal .modal-body .p-3 {
    background: rgba(8, 12, 22, 0.45) !important;
    border: 1px solid rgba(212, 184, 138, 0.28) !important;
}

#depositRequiredModal .btn-primary,
#usdWalletInsufficientModal .btn-primary,
#usdWalletExistsModal .btn-primary {
    background: linear-gradient(180deg, #e4cc9e, #c6a36a) !important;
    color: #1a140c !important;
    border: 0 !important;
    border-radius: 12px;
}

#depositRequiredModal .btn-outline-secondary,
#usdWalletInsufficientModal .btn-outline-secondary,
#usdWalletExistsModal .btn-outline-secondary {
    background: transparent !important;
    color: #f4f0e8 !important;
    border: 1px solid rgba(212, 184, 138, 0.4) !important;
    border-radius: 12px;
}

#depositRequiredModal .btn-close,
#usdWalletInsufficientModal .btn-close,
#usdWalletExistsModal .btn-close {
    filter: invert(1) grayscale(1);
}

/* Profile */
.profile-page {
    --profile-accent: #d4b88a;
    --profile-accent-soft: rgba(212, 184, 138, 0.14);
    --profile-accent-2: #b8956a;
    --ink: #f4f0e8;
    --muted: #a3abba;
    --gold: #d4b88a;
    --line: rgba(212, 184, 138, 0.28);
    font-family: "Manrope", "Poppins", sans-serif;
    color: var(--ink);
}

.profile-page .profile-shell,
.profile-page .profile-layout,
.profile-page .profile-card-small,
.profile-page .profile-verification-card {
    background:
        linear-gradient(180deg, rgba(212, 184, 138, 0.05), transparent 38%),
        #141c2e !important;
    border-color: var(--line) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24) !important;
}

.profile-page .profile-header {
    background: transparent;
    border-bottom-color: rgba(212, 184, 138, 0.16);
}

.profile-page .profile-name,
.profile-page .profile-section-title,
.profile-page .profile-verification-title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 500;
    color: var(--ink) !important;
    letter-spacing: 0;
    text-transform: none;
}

.profile-page .profile-field-value {
    color: var(--ink) !important;
    font-family: "Manrope", "Poppins", sans-serif;
}

.profile-page .profile-section-title {
    font-size: 1.35rem;
}

.profile-page .profile-name {
    font-size: 1.85rem;
}

.profile-page .profile-section-title i,
.profile-page .profile-meta-chip i,
.profile-page .profile-nav-link i,
.profile-page .profile-nav-link.active i {
    color: var(--gold) !important;
}

.profile-page .profile-avatar-ring {
    background: rgba(212, 184, 138, 0.45);
    filter: none;
    opacity: 1;
    inset: -2px;
}

.profile-page .profile-avatar {
    border-color: rgba(212, 184, 138, 0.45);
    background: #101722;
    box-shadow: none;
}

.profile-page .profile-badge.verified {
    background: rgba(125, 202, 168, 0.14);
    color: #7dcaa8;
    border-color: rgba(125, 202, 168, 0.4);
}

.profile-page .profile-badge.pending {
    background: rgba(226, 194, 122, 0.14);
    color: #e2c27a;
    border-color: rgba(226, 194, 122, 0.4);
}

.profile-page .profile-header-meta,
.profile-page .profile-stamp,
.profile-page .profile-section-hint,
.profile-page .profile-field-label,
.profile-page .profile-nav-title,
.profile-page .profile-verification-text,
.profile-page .profile-field-value.empty {
    color: var(--muted) !important;
}

.profile-page .profile-meta-chip {
    border-color: var(--line);
    background: rgba(8, 12, 22, 0.35);
    color: var(--ink);
}

.profile-page .profile-button-primary {
    background: linear-gradient(180deg, #e4cc9e, #c6a36a) !important;
    color: #1a140c !important;
    border-radius: 12px;
    box-shadow: none;
}

.profile-page .profile-button-primary:hover {
    color: #1a140c !important;
    filter: brightness(1.05);
    transform: none;
    box-shadow: none;
}

.profile-page .profile-nav {
    border-right-color: rgba(212, 184, 138, 0.16);
}

.profile-page .profile-nav-link {
    color: var(--muted);
    border-radius: 12px;
}

.profile-page .profile-nav-link:hover {
    color: var(--ink);
    background: rgba(212, 184, 138, 0.06);
    border-color: rgba(212, 184, 138, 0.28);
}

.profile-page .profile-nav-link.active {
    background: rgba(212, 184, 138, 0.1);
    border-color: rgba(212, 184, 138, 0.55);
    color: var(--ink);
    box-shadow: none;
}

.profile-page .profile-card-small {
    border-radius: 14px;
}

.profile-page .profile-card-small::after {
    display: none;
}

.profile-page .profile-verification-icon.verified {
    background: rgba(125, 202, 168, 0.14);
    color: #7dcaa8;
    border-color: rgba(125, 202, 168, 0.4);
}

.profile-page .profile-verification-icon.pending {
    background: rgba(226, 194, 122, 0.14);
    color: #e2c27a;
    border-color: rgba(226, 194, 122, 0.4);
}

.profile-page .profile-main section + section {
    margin-top: 1.35rem;
}

.profile-page .profile-verification-card {
    border-radius: 16px;
    align-items: center;
}

/* Profile edit */
.navbar .profile-avatar {
    border: 1px solid rgba(212, 184, 138, 0.7) !important;
    background: rgba(212, 184, 138, 0.12) !important;
    box-shadow: none !important;
    color: #d4b88a !important;
}

.navbar .profile-avatar:hover {
    transform: none !important;
    border-color: #d4b88a !important;
    box-shadow: 0 0 0 3px rgba(212, 184, 138, 0.15) !important;
}

.profile-dropdown .profile-header {
    display: block !important;
}

.profile-dropdown .profile-menu-item:hover {
    background: rgba(212, 184, 138, 0.08) !important;
    color: #f4f0e8 !important;
    transform: none !important;
}

.profile-dropdown .profile-menu-item::before,
.profile-dropdown::before {
    background: #d4b88a !important;
}

.profile-dropdown .profile-menu-item i,
.profile-dropdown .profile-menu-item:hover i {
    color: #d4b88a !important;
    transform: none !important;
    opacity: 1 !important;
}

.profile-dropdown .profile-menu-item.logout,
.profile-dropdown .profile-menu-item.logout i,
.profile-dropdown .profile-menu-item.logout:hover,
.profile-dropdown .profile-menu-item.logout:hover i {
    color: #e08b8b !important;
}

.profile-dropdown .profile-menu-item.logout:hover {
    background: rgba(224, 139, 139, 0.1) !important;
}

.profile-edit-page {
    --ink: #f4f0e8;
    --muted: #a3abba;
    --gold: #d4b88a;
    --line: rgba(212, 184, 138, 0.28);
    max-width: 1040px;
    font-family: "Manrope", "Poppins", sans-serif;
    color: var(--ink);
}

.profile-edit-page .profile-container {
    max-width: none;
    margin: 0 auto 1.5rem;
    padding: 1.35rem 1.4rem 1.5rem;
    background:
        linear-gradient(180deg, rgba(212, 184, 138, 0.06), transparent 28%),
        #141c2e !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24) !important;
    backdrop-filter: none;
}

.profile-edit-page .profile-header {
    display: flex !important;
    align-items: center;
    border-bottom: 1px solid rgba(212, 184, 138, 0.16) !important;
    background: transparent !important;
}

.profile-edit-page .profile-title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 500;
    font-size: 2rem;
    color: var(--ink) !important;
    letter-spacing: 0;
}

.profile-edit-page .profile-subtitle,
.profile-edit-page .form-text,
.profile-edit-page .form-label {
    color: var(--muted) !important;
}

.profile-edit-page .form-label {
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 0.78rem;
    font-weight: 600;
}

.profile-edit-page .required::after {
    color: var(--gold);
}

.profile-edit-page .profile-picture,
.profile-edit-page .profile-picture-placeholder {
    width: 76px;
    height: 76px;
    border: 1px solid rgba(212, 184, 138, 0.5) !important;
    box-shadow: none;
}

.profile-edit-page .profile-picture:hover,
.profile-edit-page .profile-picture-placeholder:hover,
.profile-edit-page .upload-btn:hover,
.profile-edit-page .btn-save:hover,
.profile-edit-page .btn-cancel:hover,
.profile-edit-page .nav-tabs .nav-link:hover {
    transform: none !important;
}

.profile-edit-page .profile-picture-placeholder {
    background: #101722 !important;
    color: var(--gold) !important;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.8rem;
}

.profile-edit-page .upload-btn {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: 999px;
    margin-top: 0.65rem;
}

.profile-edit-page .upload-btn:hover {
    border-color: rgba(212, 184, 138, 0.6);
    color: var(--gold);
    background: rgba(212, 184, 138, 0.08);
}

.profile-edit-page .nav-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
    border: 0;
    margin-bottom: 1.35rem;
    padding: 0.35rem;
    border-radius: 14px;
    background: rgba(8, 12, 22, 0.4);
}

.profile-edit-page .nav-tabs .nav-item {
    margin: 0;
}

.profile-edit-page .nav-tabs .nav-link {
    justify-content: center;
    width: 100%;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--muted) !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}

.profile-edit-page .nav-tabs .nav-link i {
    color: var(--gold);
}

.profile-edit-page .nav-tabs .nav-link:hover {
    color: var(--ink) !important;
    background: rgba(212, 184, 138, 0.06) !important;
}

.profile-edit-page .nav-tabs .nav-link.active,
.profile-edit-page .nav-tabs .nav-link.active.completed,
.profile-edit-page .nav-tabs .nav-link.active.incomplete {
    background: linear-gradient(180deg, #e4cc9e, #c6a36a) !important;
    color: #1a140c !important;
    border-color: transparent !important;
}

.profile-edit-page .nav-tabs .nav-link.active i,
.profile-edit-page .nav-tabs .nav-link.active::after {
    color: #1a140c !important;
}

.profile-edit-page .nav-link.completed:not(.active) {
    color: var(--ink) !important;
}

.profile-edit-page .nav-link.completed::after {
    color: #7dcaa8 !important;
    animation: none !important;
}

.profile-edit-page .nav-link.incomplete {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--muted) !important;
}

.profile-edit-page .nav-link.incomplete::after {
    content: "" !important;
    animation: none !important;
}

.profile-edit-page .section-header {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.45rem;
    font-weight: 500;
    color: var(--ink);
    border-bottom-color: rgba(212, 184, 138, 0.16);
    text-transform: none;
    letter-spacing: 0;
}

.profile-edit-page .section-header i {
    color: var(--gold);
    font-size: 0.95rem;
}

.profile-edit-page .form-control,
.profile-edit-page .form-select {
    background-color: rgba(8, 12, 22, 0.45) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    border-radius: 12px;
    min-height: 44px;
    color-scheme: dark;
}

.profile-edit-page .form-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23d4b88a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.8rem center !important;
    background-size: 14px 14px !important;
    padding-right: 2.2rem;
}

.profile-edit-page .form-control:focus,
.profile-edit-page .form-select:focus {
    background-color: rgba(8, 12, 22, 0.62) !important;
    border-color: rgba(212, 184, 138, 0.7) !important;
    box-shadow: 0 0 0 3px rgba(212, 184, 138, 0.12) !important;
    color: var(--ink) !important;
}

.profile-edit-page .form-control:disabled {
    background-color: rgba(8, 12, 22, 0.28) !important;
    color: var(--muted) !important;
    border-color: rgba(212, 184, 138, 0.14) !important;
}

.profile-edit-page .form-control::placeholder {
    color: #7d8696;
}

.profile-edit-page .form-select option {
    background: #141c2e;
    color: #f4f0e8;
}

.profile-edit-page .form-control.is-invalid,
.profile-edit-page .form-select.is-invalid {
    border-color: #e08b8b !important;
    background-color: rgba(224, 139, 139, 0.08) !important;
    box-shadow: none !important;
}

.profile-edit-page .invalid-feedback {
    display: block;
    color: #e08b8b;
}

.profile-edit-page .text-success {
    color: #7dcaa8 !important;
}

.profile-edit-page .form-control.is-valid,
.profile-edit-page .form-select.is-valid {
    border-color: rgba(125, 202, 168, 0.7) !important;
    background-color: rgba(8, 12, 22, 0.45) !important;
}

.profile-edit-page .alert-danger,
.profile-edit-page .alert.alert-danger {
    background: rgba(224, 139, 139, 0.1) !important;
    border: 1px solid rgba(224, 139, 139, 0.35) !important;
    border-left: 3px solid #e08b8b !important;
    color: var(--ink) !important;
    border-radius: 12px;
}

.profile-edit-page .alert-success {
    background: rgba(125, 202, 168, 0.1);
    border: 1px solid rgba(125, 202, 168, 0.35);
    border-left: 3px solid #7dcaa8;
    color: var(--ink);
    border-radius: 12px;
}

.profile-edit-page .btn-group {
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
    border-top: 1px solid rgba(212, 184, 138, 0.16);
}

.profile-edit-page .btn-save,
.profile-edit-page .btn-cancel {
    border-radius: 12px;
    min-height: 42px;
    box-shadow: none !important;
}

.profile-edit-page .btn-save {
    background: linear-gradient(180deg, #e4cc9e, #c6a36a) !important;
    color: #1a140c !important;
    border: 0;
}

.profile-edit-page .btn-save:disabled {
    background: rgba(212, 184, 138, 0.35) !important;
    color: #1a140c !important;
}

.profile-edit-page .btn-cancel {
    background: transparent !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
}

.profile-edit-page .btn-cancel:hover {
    color: var(--gold) !important;
    border-color: rgba(212, 184, 138, 0.6) !important;
    background: rgba(212, 184, 138, 0.08) !important;
}

.profile-edit-page .spinner {
    border-color: rgba(26, 20, 12, 0.25);
    border-top-color: #1a140c;
}

@media (max-width: 768px) {
    .profile-edit-page .nav-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-edit-page .profile-title {
        font-size: 1.7rem;
    }
}

/* Security settings */
.security-page-container {
    --ink: #f4f0e8;
    --muted: #a3abba;
    --gold: #d4b88a;
    --line: rgba(212, 184, 138, 0.28);
    font-family: "Manrope", "Poppins", sans-serif;
    color: var(--ink);
    max-width: 1040px;
}

.security-page-container .security-shell,
.security-page-container .security-box {
    background:
        linear-gradient(180deg, rgba(212, 184, 138, 0.05), transparent 36%),
        #141c2e !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24) !important;
    backdrop-filter: none;
}

.security-page-container .security-box {
    background: rgba(8, 12, 22, 0.28) !important;
    box-shadow: none !important;
    border-radius: 16px;
}

.security-page-container .security-box::before,
.security-page-container .security-box:hover::before {
    display: none;
}

.security-page-container .security-box:hover,
.security-page-container .security-box:hover .security-icon-circle,
.security-page-container .action-button:hover,
.security-page-container .action-button.btn-primary:hover,
.security-page-container .action-button.btn-danger:hover {
    transform: none;
    box-shadow: none;
}

.security-page-container .security-page-header,
.security-page-container .security-box-title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 500;
    color: var(--ink) !important;
    letter-spacing: 0;
    text-transform: none;
}

.security-page-container .security-page-header {
    font-size: 2rem;
    border-bottom-color: rgba(212, 184, 138, 0.16);
}

.security-page-container .security-box-title {
    font-size: 1.45rem;
}

.security-page-container .security-page-header i,
.security-page-container .security-icon-circle i {
    color: var(--gold) !important;
}

.security-page-container .security-icon-circle {
    background: rgba(212, 184, 138, 0.1);
    border-color: rgba(212, 184, 138, 0.4);
}

.security-page-container .security-box-description,
.security-page-container .field-label,
.security-page-container .checkbox-label {
    color: var(--muted) !important;
    text-transform: none;
    letter-spacing: 0.01em;
}

.security-page-container .field-input {
    background: rgba(8, 12, 22, 0.45) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    border-radius: 12px;
    min-height: 44px;
}

.security-page-container .field-input:focus {
    background: rgba(8, 12, 22, 0.62) !important;
    border-color: rgba(212, 184, 138, 0.7) !important;
    box-shadow: 0 0 0 3px rgba(212, 184, 138, 0.12) !important;
    color: var(--ink) !important;
}

.security-page-container .field-input::placeholder {
    color: #7d8696;
}

.security-page-container .action-button {
    border-radius: 12px;
    text-transform: none;
    letter-spacing: 0;
    min-height: 42px;
}

.security-page-container .action-button.btn-primary {
    background: linear-gradient(180deg, #e4cc9e, #c6a36a) !important;
    color: #1a140c !important;
    border: 0 !important;
}

.security-page-container .action-button.btn-primary:hover {
    color: #1a140c !important;
    filter: brightness(1.05);
}

.security-page-container .action-button.btn-danger {
    background: transparent !important;
    color: #e08b8b !important;
    border: 1px solid rgba(224, 139, 139, 0.45) !important;
}

.security-page-container .action-button.btn-danger:hover {
    background: rgba(224, 139, 139, 0.1) !important;
    color: #e08b8b !important;
}

.security-page-container .status-badge.badge-enabled {
    background: rgba(125, 202, 168, 0.14);
    color: #7dcaa8;
    border-color: rgba(125, 202, 168, 0.4);
}

.security-page-container .status-badge.badge-disabled {
    background: rgba(224, 139, 139, 0.12);
    color: #e08b8b;
    border-color: rgba(224, 139, 139, 0.4);
}

.security-page-container .checkbox-input {
    accent-color: #d4b88a;
    background: transparent;
    border-color: rgba(212, 184, 138, 0.45);
}

.security-page-container .checkbox-input:checked {
    background-color: #d4b88a;
    border-color: #d4b88a;
    box-shadow: none;
}

.security-page-container .alert-box {
    background: rgba(125, 202, 168, 0.1);
    border: 1px solid rgba(125, 202, 168, 0.35);
    border-left: 3px solid #7dcaa8;
    color: var(--ink);
    border-radius: 12px;
}

.security-page-container .alert-box i {
    color: #7dcaa8;
}

.security-page-container .alert-box.alert-error {
    background: rgba(224, 139, 139, 0.1);
    border-color: rgba(224, 139, 139, 0.35);
    border-left-color: #e08b8b;
}

.security-page-container .alert-box.alert-error i {
    color: #e08b8b;
}

/* Notifications */
.notifications-page {
    --ink: #f4f0e8;
    --muted: #a3abba;
    --gold: #d4b88a;
    --line: rgba(212, 184, 138, 0.28);
    font-family: "Manrope", "Poppins", sans-serif;
    color: var(--ink);
}

.notifications-page .notifications-shell,
.notifications-page .notifications-sidebar,
.notifications-page .notifications-main,
.notifications-page .notification-item-inner {
    background:
        linear-gradient(180deg, rgba(212, 184, 138, 0.05), transparent 36%),
        #141c2e !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24) !important;
    backdrop-filter: none;
}

.notifications-page .notifications-sidebar,
.notifications-page .notifications-main,
.notifications-page .notification-item-inner {
    background: rgba(8, 12, 22, 0.28) !important;
    box-shadow: none !important;
    border-radius: 16px;
}

.notifications-page .notifications-title,
.notifications-page .empty-state h5 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 500;
    color: var(--ink) !important;
    letter-spacing: 0;
}

.notifications-page .notifications-title {
    font-size: 2rem;
}

.notifications-page .notifications-subtitle,
.notifications-page .notifications-sidebar-title,
.notifications-page .notifications-main-header,
.notifications-page .notification-text,
.notifications-page .notification-time,
.notifications-page .empty-state,
.notifications-page .empty-state p,
.notifications-page .filter-count {
    color: var(--muted) !important;
}

.notifications-page .notifications-header-row {
    border-bottom-color: rgba(212, 184, 138, 0.16);
}

.notifications-page .notifications-timeline-line {
    background: rgba(212, 184, 138, 0.28);
}

.notifications-page .filter-btn {
    color: var(--muted);
    border-radius: 12px;
}

.notifications-page .filter-btn i,
.notifications-page .notifications-main-header i,
.notifications-page .notification-icon i,
.notifications-page .empty-state i {
    color: var(--gold) !important;
}

.notifications-page .filter-btn:hover {
    color: var(--ink);
    background: rgba(212, 184, 138, 0.06);
    border-color: rgba(212, 184, 138, 0.28);
    transform: none;
    box-shadow: none;
}

.notifications-page .filter-btn.active {
    background: rgba(212, 184, 138, 0.1);
    border-color: rgba(212, 184, 138, 0.55);
    color: var(--ink);
    box-shadow: none;
}

.notifications-page .notification-item::before {
    border-color: rgba(212, 184, 138, 0.55);
    background: #141c2e;
    box-shadow: 0 0 0 2px #141c2e;
}

.notifications-page .notification-item.unread::before {
    border-color: var(--gold);
    background: var(--gold);
    box-shadow: 0 0 0 2px #141c2e;
}

.notifications-page .notification-item.unread .notification-item-inner {
    background: rgba(212, 184, 138, 0.06) !important;
    border-color: rgba(212, 184, 138, 0.45) !important;
}

.notifications-page .notification-item-inner:hover {
    transform: none;
    border-color: rgba(212, 184, 138, 0.45) !important;
    box-shadow: none !important;
}

.notifications-page .notification-title {
    color: var(--ink) !important;
    font-family: "Manrope", "Poppins", sans-serif;
    font-weight: 600;
}

.notifications-page .notification-icon {
    background: rgba(212, 184, 138, 0.08);
    border-color: rgba(212, 184, 138, 0.35);
}

.notifications-page .notification-item.urgent .notification-icon i,
.notifications-page .notification-item.urgent::before {
    color: #e08b8b !important;
    border-color: #e08b8b;
}

.notifications-page .notification-item.high .notification-icon i {
    color: #e2c27a !important;
}

.notifications-page .notification-toggle,
.notifications-page .notification-item.open .notification-toggle {
    color: var(--gold);
}

.notifications-page .btn-notifications-primary,
.notifications-page .notification-actions .btn-primary {
    background: linear-gradient(180deg, #e4cc9e, #c6a36a) !important;
    color: #1a140c !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.notifications-page .btn-notifications-primary:hover,
.notifications-page .notification-actions .btn-primary:hover {
    color: #1a140c !important;
    transform: none;
    filter: brightness(1.05);
    box-shadow: none !important;
}

.notifications-page .btn-mark-read,
.notifications-page .notification-actions .btn-outline-danger {
    background: transparent !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.notifications-page .btn-mark-read:hover {
    background: rgba(212, 184, 138, 0.08) !important;
    border-color: rgba(212, 184, 138, 0.55) !important;
    color: var(--gold) !important;
    transform: none;
    box-shadow: none !important;
}

.notifications-page .notification-actions .btn-outline-danger {
    color: #e08b8b !important;
    border-color: rgba(224, 139, 139, 0.45) !important;
}

.notifications-page .notification-actions .btn-outline-danger:hover {
    background: rgba(224, 139, 139, 0.1) !important;
    color: #e08b8b !important;
}

.notifications-page .pagination .page-link {
    background: transparent !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
    border-radius: 10px;
}

.notifications-page .pagination .page-link:hover {
    background: rgba(212, 184, 138, 0.08) !important;
    border-color: rgba(212, 184, 138, 0.55) !important;
    color: var(--gold) !important;
}

.notifications-page .pagination .page-item.active .page-link {
    background: linear-gradient(180deg, #e4cc9e, #c6a36a) !important;
    border-color: transparent !important;
    color: #1a140c !important;
    box-shadow: none !important;
}

.notifications-page .pagination .page-item.disabled .page-link {
    color: var(--muted) !important;
    background: transparent !important;
}