.account-page {
    --account-accent: var(--account-theme-accent, var(--red-600, var(--bs-primary, #6b5fb5)));
    --account-accent-dark: var(--account-theme-accent-dark, var(--red-700, #57459a));
    --account-accent-soft: color-mix(in srgb, var(--account-accent) 14%, white);
    --account-text: var(--account-theme-text, #1f2b3d);
    --account-bg-top: var(--account-theme-bg-top, color-mix(in srgb, var(--account-accent) 7%, white));
    --account-bg-bottom: var(--account-theme-bg-bottom, #ffffff);
    --account-border: var(--account-theme-border, color-mix(in srgb, var(--account-accent) 14%, white));
    --account-border-strong: var(--account-theme-border-strong, color-mix(in srgb, var(--account-accent) 28%, white));
}

.account-page .account-main {
    background: linear-gradient(180deg, var(--account-bg-top) 0%, var(--account-bg-bottom) 65%);
}

.account-page .account-page-header h1 {
    color: var(--account-text);
    letter-spacing: 0.2px;
}

.account-sidebar {
    margin-bottom: 20px;
}

.account-page .account-content-card,
.account-page .account-auth-form,
.account-page .account-menu-card {
    border: 1px solid var(--account-border);
    border-radius: 14px !important;
    box-shadow: 0 10px 24px rgba(20, 33, 61, 0.06);
}

.account-page .account-content-card {
    padding: 1.35rem !important;
}

.account-page .account-auth-box h4,
.account-page .account-content-card h4 {
    color: var(--account-text);
    margin-bottom: 0.85rem;
}

.account-page .account-content-card h6 {
    color: color-mix(in srgb, var(--account-text) 88%, white);
    font-weight: 600;
}

.account-page .account-form .form-control,
.account-page .account-auth-form .form-control {
    border-color: var(--account-border);
}

.account-page .account-form .form-control:focus,
.account-page .account-auth-form .form-control:focus {
    border-color: var(--account-accent);
    box-shadow: 0 0 0 0.2rem var(--account-accent-soft);
}

.account-alert-list {
    margin-bottom: 20px;
    border-radius: 12px;
}

.account-forgot-link {
    color: var(--account-accent);
    text-decoration: underline;
}

.account-password-toggle {
    cursor: pointer;
    color: var(--account-accent);
    font-size: 0.875rem;
    margin-bottom: 0;
}

.account-list-spacing {
    margin-bottom: 20px;
}

.account-btn-float {
    float: right;
}

.account-btn-float-clear {
    float: right;
    clear: both;
}

.account-btn-gap-right {
    margin-right: 10px;
}

.account-page .account-order-item,
.account-page .account-address-item {
    border: 1px solid var(--account-border) !important;
    border-radius: 12px;
    background-color: #fff;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.account-page .account-order-item:hover,
.account-page .account-address-item:hover {
    border-color: var(--account-border-strong) !important;
    box-shadow: 0 8px 18px rgba(22, 36, 66, 0.06);
}

.account-page .account-detail-card {
    border: 1px solid var(--account-border);
    border-radius: 12px;
    box-shadow: 0 6px 14px rgba(23, 38, 69, 0.04);
}

.account-page .account-section-title {
    color: var(--account-text);
    margin-bottom: 0.85rem;
}

.account-page .account-menu-card {
    padding: 1rem !important;
}

.account-page .account-menu-greeting {
    margin-bottom: 0.85rem;
    color: var(--account-text);
}

.account-page .account-menu-list .btn_1 {
    text-align: center;
    width: 100%;
    margin-bottom: 0;
}

@media (min-width: 992px) {
    .account-page .account-sidebar .account-menu-card {
        position: sticky;
        top: 96px;
    }
}