/* ============================================
   TOUMAI — ACCOUNTS CSS
   All styles for the accounts application.
   Organized by page/component.
   ============================================ */

/* ============================================
   SECTION 1: AUTH PAGES
   (signup, login, verify, forgot password,
    reset password)
   ============================================ */

/* --- Auth Page Layout --- */

.auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg) var(--space-md);
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg,
        var(--pure-pearl) 0%,
        rgba(196, 160, 89, 0.04) 40%,
        var(--surface-white) 100%
    );
}

/* Background Shapes */
.auth-page__bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.auth-page__shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.05;
    background: var(--primary-gold);
}

.auth-page__shape--1 {
    width: 260px;
    height: 260px;
    top: -80px;
    right: -40px;
    animation: float 8s ease-in-out infinite;
}

.auth-page__shape--2 {
    width: 180px;
    height: 180px;
    bottom: 10%;
    left: -40px;
    animation: float 10s ease-in-out infinite 3s;
}

.auth-page__shape--3 {
    width: 100px;
    height: 100px;
    top: 40%;
    right: 5%;
    animation: float 12s ease-in-out infinite 6s;
    background: linear-gradient(135deg, var(--primary-gold), transparent);
    opacity: 0.08;
}

/* Back Button */
.auth-page__back {
    position: absolute;
    top: var(--space-lg);
    left: var(--space-md);
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pure-pearl);
    border: 1px solid var(--border-light);
    color: var(--charcoal-text);
    font-size: 16px;
    transition: var(--transition-elastic);
    z-index: 10;
    box-shadow: var(--shadow-sm);
}

.body--rtl .auth-page__back {
    left: auto;
    right: var(--space-md);
}

.auth-page__back:hover,
.auth-page__back:active {
    background: var(--primary-gold);
    color: var(--pure-pearl);
    border-color: var(--primary-gold);
    transform: scale(1.08);
    box-shadow: var(--shadow-royal);
}

/* Security Note */
.auth-page__security-note {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-full);
    background: rgba(39, 174, 96, 0.06);
    border: 1px solid rgba(39, 174, 96, 0.12);
    font-size: var(--text-xs);
    color: var(--success-emerald);
    font-weight: 500;
}

.auth-page__security-note i {
    font-size: 14px;
}

/* --- Auth Card --- */

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--pure-pearl);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(196, 160, 89, 0.08);
    position: relative;
    z-index: 1;
    animation: fadeInUp 0.6s ease forwards;
}

.auth-card--shake {
    animation: shake 0.5s ease;
}

/* Auth Card Header */
.auth-card__header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.auth-card__logo {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-md);
    background: linear-gradient(135deg, var(--primary-gold), var(--gold-dark));
    color: var(--pure-pearl);
    font-size: 22px;
    box-shadow: 0 8px 24px rgba(196, 160, 89, 0.3);
    animation: scaleIn 0.5s ease 0.2s both;
}

.auth-card__title {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--charcoal-text);
    margin-bottom: var(--space-xs);
    letter-spacing: -0.3px;
}

.auth-card__subtitle {
    font-size: var(--text-sm);
    color: var(--muted-text);
    line-height: 1.5;
}

/* Divider */
.auth-card__divider {
    display: flex;
    align-items: center;
    margin: var(--space-lg) 0;
}

.auth-card__divider::before,
.auth-card__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-light);
}

.auth-card__divider span {
    padding: 0 var(--space-md);
    font-size: var(--text-xs);
    color: var(--light-text);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Footer */
.auth-card__footer {
    text-align: center;
}

.auth-card__footer-text {
    font-size: var(--text-sm);
    color: var(--muted-text);
    margin-bottom: var(--space-md);
}

/* --- Auth Form --- */

.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Form Errors */
.auth-form__errors {
    padding: var(--space-md);
    background: var(--error-light);
    border: 1px solid rgba(231, 76, 60, 0.15);
    border-radius: var(--radius-md);
    animation: shake 0.5s ease;
}

.auth-form__error-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    color: var(--error-coral);
    line-height: 1.5;
}

.auth-form__error-item + .auth-form__error-item {
    margin-top: var(--space-xs);
}

.auth-form__error-item i {
    margin-top: 3px;
    flex-shrink: 0;
    font-size: 12px;
}

/* Form Options */
.auth-form__options {
    display: flex;
    justify-content: flex-end;
    margin-top: calc(-1 * var(--space-sm));
}

.body--rtl .auth-form__options {
    justify-content: flex-start;
}

.auth-form__forgot-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-sm);
    color: var(--primary-gold);
    font-weight: 500;
    padding: var(--space-xs) 0;
    transition: var(--transition-fast);
}

.auth-form__forgot-link:hover,
.auth-form__forgot-link:active {
    color: var(--gold-dark);
}

.auth-form__forgot-link i {
    font-size: 12px;
}

/* --- Form Field --- */

.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.form-field__label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--charcoal-text);
}

.form-field__label i {
    font-size: 13px;
    color: var(--muted-text);
    width: 16px;
    text-align: center;
}

.form-field__optional {
    font-size: var(--text-xs);
    color: var(--light-text);
    font-weight: 400;
}

.form-field__wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.form-field__input {
    width: 100%;
    padding: 14px 16px;
    background: var(--surface-white);
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: 16px;
    color: var(--charcoal-text);
    transition: var(--transition-elastic);
    -webkit-appearance: none;
    appearance: none;
}

.form-field__input::placeholder {
    color: var(--light-text);
    font-size: var(--text-sm);
}

.form-field__input:focus {
    border-color: var(--primary-gold);
    background: var(--pure-pearl);
    box-shadow: 0 0 0 4px var(--gold-glow);
}

/* Input with password toggle */
.form-field__input--password {
    padding-right: 50px;
}

.body--rtl .form-field__input--password {
    padding-right: 16px;
    padding-left: 50px;
}

/* Password Toggle Button */
.form-field__toggle-pw {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--light-text);
    font-size: 16px;
    transition: var(--transition-fast);
    cursor: pointer;
    z-index: 2;
}

.body--rtl .form-field__toggle-pw {
    right: auto;
    left: 4px;
}

.form-field__toggle-pw:hover,
.form-field__toggle-pw:active {
    color: var(--primary-gold);
    background: rgba(196, 160, 89, 0.08);
}

/* Field Status Icon */
.form-field__status {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    pointer-events: none;
}

.body--rtl .form-field__status {
    right: auto;
    left: 14px;
}

/* Character Counter */
.form-field__counter {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--text-xs);
    color: var(--light-text);
    pointer-events: none;
}

.body--rtl .form-field__counter {
    right: auto;
    left: 14px;
}

/* Error State */
.form-field--error .form-field__input {
    border-color: var(--error-coral);
    background: var(--error-light);
}

.form-field--error .form-field__input:focus {
    box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.1);
}

.form-field__error {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-xs);
    color: var(--error-coral);
    padding-left: var(--space-xs);
    animation: fadeInDown 0.3s ease;
}

.body--rtl .form-field__error {
    padding-left: 0;
    padding-right: var(--space-xs);
}

/* Success State */
.form-field--success .form-field__input {
    border-color: var(--success-emerald);
}

.form-field--success .form-field__input:focus {
    box-shadow: 0 0 0 4px var(--success-light);
}

/* Warning State */
.form-field--warning .form-field__counter {
    color: var(--warning-amber);
    font-weight: 600;
}

/* Shake Animation on Error */
.form-field--shake {
    animation: shake 0.5s ease;
}

/* Focused State */
.form-field--focused .form-field__label i {
    color: var(--primary-gold);
}

/* --- Password Strength Meter --- */

.pw-strength {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.pw-strength--visible {
    max-height: 50px;
    opacity: 1;
    margin-top: var(--space-xs);
}

.pw-strength__bar {
    height: 4px;
    background: var(--border-light);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.pw-strength__fill {
    height: 100%;
    width: 0%;
    border-radius: var(--radius-full);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.pw-strength__fill--weak { background: var(--error-coral); }
.pw-strength__fill--medium { background: var(--warning-amber); }
.pw-strength__fill--strong { background: var(--success-emerald); }
.pw-strength__fill--very-strong {
    background: linear-gradient(90deg, var(--success-emerald), var(--primary-gold));
}

.pw-strength__info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pw-strength__label {
    font-size: var(--text-xs);
    font-weight: 600;
}

.pw-strength__label--weak { color: var(--error-coral); }
.pw-strength__label--medium { color: var(--warning-amber); }
.pw-strength__label--strong { color: var(--success-emerald); }
.pw-strength__label--very-strong { color: var(--primary-gold); }

.pw-strength__hint {
    font-size: var(--text-xs);
    color: var(--light-text);
}

/* --- Password Requirements --- */

.pw-requirements {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.pw-requirements--visible {
    max-height: 200px;
    opacity: 1;
    margin-top: var(--space-sm);
    padding: var(--space-md);
    background: var(--surface-white);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.pw-req {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-xs);
    color: var(--muted-text);
    transition: var(--transition-fast);
}

.pw-req__icon {
    font-size: 8px;
    color: var(--light-text);
    transition: var(--transition-fast);
    width: 14px;
    text-align: center;
}

.pw-req--pass {
    color: var(--success-emerald);
}

.pw-req--pass .pw-req__icon {
    color: var(--success-emerald);
    font-size: 12px;
}

.pw-req--fail {
    color: var(--error-coral);
}

.pw-req--fail .pw-req__icon {
    color: var(--error-coral);
    font-size: 12px;
}

/* --- Password Match --- */

.pw-match {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-xs);
    color: var(--success-emerald);
    font-weight: 500;
    animation: fadeInDown 0.3s ease;
}

.pw-match i {
    font-size: 14px;
}

.pw-mismatch {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-xs);
    color: var(--error-coral);
    font-weight: 500;
    animation: fadeInDown 0.3s ease;
}

.pw-mismatch i {
    font-size: 14px;
}

/* --- Buttons (Auth Specific) --- */

.btn--full {
    width: 100%;
}

.auth-form__submit {
    margin-top: var(--space-sm);
}

/* ============================================
   RESPONSIVE — AUTH
   ============================================ */

@media (min-width: 768px) {
    .auth-card {
        padding: var(--space-2xl) var(--space-xl);
        max-width: 440px;
        box-shadow: var(--shadow-royal);
    }

    .auth-card__logo {
        width: 68px;
        height: 68px;
        font-size: 26px;
    }

    .auth-card__title {
        font-size: var(--text-3xl);
    }
}

/* ============================================
   RTL ADJUSTMENTS — AUTH
   ============================================ */

.body--rtl .auth-card__divider span {
    letter-spacing: 0;
}

.body--rtl .pw-requirements {
    direction: rtl;
}

.body--rtl .pw-strength__info {
    direction: rtl;
}




/* ============================================
   SECTION 2: VERIFICATION PAGE
   ============================================ */

/* --- Verify Icon Animation --- */

.verify-icon {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-lg);
}

.verify-icon__circle {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-gold), var(--gold-dark));
    color: var(--pure-pearl);
    font-size: 30px;
    position: relative;
    z-index: 2;
    box-shadow: 0 8px 32px rgba(196, 160, 89, 0.3);
    animation: scaleIn 0.6s ease 0.2s both;
}

.verify-icon__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    border: 2px solid var(--primary-gold);
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: verifyRing 2s ease-in-out infinite 1s;
}

@keyframes verifyRing {
    0% {
        width: 80px;
        height: 80px;
        opacity: 0.4;
    }
    100% {
        width: 130px;
        height: 130px;
        opacity: 0;
    }
}

/* --- Email Badge --- */

.verify-email-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 8px 16px;
    background: var(--surface-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    color: var(--charcoal-text);
    font-weight: 500;
    margin-top: var(--space-md);
    animation: fadeInUp 0.6s ease 0.4s both;
}

.verify-email-badge i {
    color: var(--primary-gold);
    font-size: 14px;
}

/* --- Code Boxes --- */

.verify-code {
    margin: var(--space-lg) 0;
}

.verify-code__boxes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    direction: ltr; /* Always LTR for numbers */
    transition: var(--transition-fast);
}

.verify-code__boxes--pasted {
    animation: pulse 0.4s ease;
}

.verify-code__box {
    width: 44px;
    height: 56px;
    text-align: center;
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--charcoal-text);
    background: var(--surface-white);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    transition: var(--transition-elastic);
    caret-color: var(--primary-gold);
    -webkit-appearance: none;
    appearance: none;
}

.verify-code__box:focus,
.verify-code__box--active {
    border-color: var(--primary-gold);
    background: var(--pure-pearl);
    box-shadow: 0 0 0 4px var(--gold-glow);
    transform: translateY(-2px);
}

.verify-code__box--filled {
    border-color: var(--primary-gold);
    background: rgba(196, 160, 89, 0.04);
    color: var(--primary-gold);
    font-weight: 800;
}

.verify-code__box--pop {
    animation: codePop 0.2s ease;
}

@keyframes codePop {
    0% { transform: scale(1); }
    50% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

.verify-code__box--success {
    border-color: var(--success-emerald);
    background: var(--success-light);
    color: var(--success-emerald);
    animation: pulse 0.3s ease;
}

.verify-code__box--error {
    border-color: var(--error-coral);
    background: var(--error-light);
    animation: shake 0.5s ease;
}

.verify-code__box--disabled {
    opacity: 0.5;
    pointer-events: none;
    background: var(--surface-white);
}

.verify-code__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--border-medium);
    font-size: 12px;
    padding: 0 2px;
}

/* Code Status Messages */
.verify-code__status {
    text-align: center;
    margin-top: var(--space-md);
    min-height: 24px;
}

.verify-code__complete {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 6px 14px;
    background: var(--success-light);
    border: 1px solid rgba(39, 174, 96, 0.15);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--success-emerald);
    animation: fadeInUp 0.3s ease;
}

.verify-code__complete i {
    font-size: 14px;
}

.verify-code__expired {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 6px 14px;
    background: var(--error-light);
    border: 1px solid rgba(231, 76, 60, 0.15);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--error-coral);
    animation: fadeInUp 0.3s ease;
}

.verify-code__expired i {
    font-size: 14px;
}

/* --- Timer --- */

.verify-timer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    margin: var(--space-lg) 0;
}

.verify-timer__circle {
    position: relative;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.verify-timer__svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.verify-timer__track {
    fill: none;
    stroke: var(--border-light);
    stroke-width: 3;
}

.verify-timer__progress {
    fill: none;
    stroke: var(--primary-gold);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear;
}

.verify-timer__text {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--charcoal-text);
    font-variant-numeric: tabular-nums;
    position: relative;
    z-index: 1;
}

.verify-timer__label {
    font-size: var(--text-xs);
    color: var(--muted-text);
}

/* Timer States */
.verify-timer__circle--warning .verify-timer__progress {
    stroke: var(--warning-amber);
}

.verify-timer__circle--warning .verify-timer__text {
    color: var(--warning-amber);
}

.verify-timer__circle--danger .verify-timer__progress {
    stroke: var(--error-coral);
    animation: pulse 1s ease infinite;
}

.verify-timer__circle--danger .verify-timer__text {
    color: var(--error-coral);
    animation: pulse 1s ease infinite;
}

.verify-timer__circle--expired .verify-timer__progress {
    stroke: var(--error-coral);
    opacity: 0.3;
}

.verify-timer__circle--expired .verify-timer__text {
    color: var(--error-coral);
    opacity: 0.5;
}

/* Ready button state */
.btn--ready {
    animation: pulse 1.5s ease infinite;
    box-shadow: var(--shadow-gold-glow);
}

/* --- Resend Section --- */

.verify-resend {
    text-align: center;
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-light);
}

.verify-resend__text {
    font-size: var(--text-sm);
    color: var(--muted-text);
    margin-bottom: var(--space-md);
}

.verify-resend__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 10px 20px;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--primary-gold);
    background: rgba(196, 160, 89, 0.06);
    border: 1px solid rgba(196, 160, 89, 0.15);
    transition: var(--transition-elastic);
    cursor: pointer;
}

.verify-resend__btn:hover,
.verify-resend__btn:active {
    background: rgba(196, 160, 89, 0.12);
    border-color: rgba(196, 160, 89, 0.3);
    transform: translateY(-1px);
}

.verify-resend__btn i {
    font-size: 14px;
    transition: var(--transition-fast);
}

.verify-resend__btn:hover i {
    transform: rotate(180deg);
}

.verify-resend__btn--cooldown {
    opacity: 0.5;
    pointer-events: none;
}

.verify-resend__btn--highlight {
    background: var(--primary-gold);
    color: var(--pure-pearl);
    border-color: var(--primary-gold);
    animation: pulse 1.5s ease infinite;
    box-shadow: var(--shadow-gold-glow);
}

.verify-resend__btn--highlight:hover {
    background: var(--gold-dark);
    color: var(--pure-pearl);
}

/* --- Help Section --- */

.verify-help {
    margin-top: var(--space-lg);
}

.verify-help__details {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: var(--transition-normal);
}

.verify-help__details[open] {
    border-color: rgba(196, 160, 89, 0.2);
    box-shadow: var(--shadow-sm);
}

.verify-help__summary {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--muted-text);
    cursor: pointer;
    transition: var(--transition-fast);
    list-style: none;
}

.verify-help__summary::-webkit-details-marker {
    display: none;
}

.verify-help__summary:hover {
    color: var(--charcoal-text);
    background: var(--surface-white);
}

.verify-help__summary i:first-child {
    color: var(--primary-gold);
    font-size: 16px;
}

.verify-help__summary span {
    flex: 1;
}

.verify-help__arrow {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.verify-help__details[open] .verify-help__arrow {
    transform: rotate(180deg);
}

.verify-help__content {
    padding: 0 var(--space-md) var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    animation: fadeInDown 0.3s ease;
}

.verify-help__item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-xs);
    color: var(--muted-text);
    padding: var(--space-xs) 0;
}

.verify-help__item i {
    width: 18px;
    text-align: center;
    color: var(--light-text);
    font-size: 12px;
}

/* ============================================
   RESPONSIVE — VERIFY
   ============================================ */

@media (min-width: 380px) {
    .verify-code__box {
        width: 46px;
        height: 58px;
        font-size: var(--text-2xl);
    }

    .verify-code__boxes {
        gap: 10px;
    }
}

@media (min-width: 768px) {
    .verify-code__box {
        width: 52px;
        height: 64px;
        font-size: 1.75rem;
    }

    .verify-code__boxes {
        gap: 12px;
    }

    .verify-icon__circle {
        width: 90px;
        height: 90px;
        font-size: 34px;
    }

    .verify-icon {
        width: 90px;
        height: 90px;
    }

    .verify-icon__ring {
        width: 90px;
        height: 90px;
    }

    @keyframes verifyRing {
        0% {
            width: 90px;
            height: 90px;
            opacity: 0.4;
        }
        100% {
            width: 150px;
            height: 150px;
            opacity: 0;
        }
    }
}





/* ============================================
   SECTION 3: PROFILE PAGES
   (profile.html + user_profile.html)
   ============================================ */

/* --- Profile Page Layout --- */

.profile-page {
    background: var(--surface-white);
    min-height: 100vh;
    padding-bottom: 80px;
}

/* --- Cover Photo --- */

.profile-cover {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary-gold), var(--gold-dark));
}

.profile-cover__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.1s linear;
    transform: scale(1.05);
}

.profile-cover__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
        var(--primary-gold) 0%,
        var(--gold-dark) 50%,
        var(--gold-light) 100%
    );
    position: relative;
}

.profile-cover__pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.06) 0%, transparent 40%),
        radial-gradient(circle at 60% 80%, rgba(255, 255, 255, 0.04) 0%, transparent 50%);
}

.profile-cover__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.25));
    pointer-events: none;
}

/* Cover Top Bar */
.profile-cover__top-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    padding-top: calc(var(--space-md) + env(safe-area-inset-top));
    z-index: 10;
}

.profile-cover__back-btn,
.profile-cover__action-btn {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--pure-pearl);
    font-size: 16px;
    transition: var(--transition-fast);
    border: none;
    cursor: pointer;
}

.profile-cover__back-btn:hover,
.profile-cover__back-btn:active,
.profile-cover__action-btn:hover,
.profile-cover__action-btn:active {
    background: rgba(0, 0, 0, 0.5);
    transform: scale(1.05);
}

.profile-cover__top-actions {
    display: flex;
    gap: var(--space-sm);
}

/* Edit Cover Button */
.profile-cover__edit-btn {
    position: absolute;
    bottom: var(--space-md);
    right: var(--space-md);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    color: var(--pure-pearl);
    font-size: var(--text-xs);
    font-weight: 500;
    transition: var(--transition-fast);
    z-index: 5;
}

.body--rtl .profile-cover__edit-btn {
    right: auto;
    left: var(--space-md);
}

.profile-cover__edit-btn:hover,
.profile-cover__edit-btn:active {
    background: rgba(0, 0, 0, 0.55);
}

.profile-cover__edit-btn i {
    font-size: 12px;
}

/* --- Avatar Section --- */

.profile-avatar-section {
    display: flex;
    justify-content: center;
    margin-top: -55px;
    position: relative;
    z-index: 20;
}

.profile-avatar {
    position: relative;
}

.profile-avatar__ring {
    width: 110px;
    height: 110px;
    border-radius: var(--radius-full);
    border: 4px solid var(--pure-pearl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    position: relative;
    background: var(--surface-white);
    transition: var(--transition-elastic);
}

.profile-avatar__ring--following {
    border-color: var(--primary-gold);
    box-shadow: 0 0 0 3px var(--gold-glow), var(--shadow-lg);
}

.profile-avatar__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar__default {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--border-light), var(--surface-white));
    color: var(--light-text);
    font-size: 40px;
}

/* Online Dot */
.profile-avatar__online-dot {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    background: var(--success-emerald);
    border: 3px solid var(--pure-pearl);
    z-index: 3;
    animation: pulse 2s ease infinite;
}

.body--rtl .profile-avatar__online-dot {
    right: auto;
    left: 6px;
}

/* Edit Avatar Button */
.profile-avatar__edit-btn {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--primary-gold);
    color: var(--pure-pearl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    box-shadow: var(--shadow-md);
    transition: var(--transition-elastic);
    z-index: 5;
    border: 2px solid var(--pure-pearl);
}

.body--rtl .profile-avatar__edit-btn {
    right: auto;
    left: 2px;
}

.profile-avatar__edit-btn:hover,
.profile-avatar__edit-btn:active {
    background: var(--gold-dark);
    transform: scale(1.1);
}

/* --- Profile Info --- */

.profile-info {
    text-align: center;
    padding: var(--space-md) var(--space-lg) 0;
}

.profile-info__name-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: 2px;
}

.profile-info__name {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--charcoal-text);
    letter-spacing: -0.3px;
}

/* Verified Badge */
.profile-badge--verified {
    display: inline-flex;
    align-items: center;
    font-size: 18px;
    color: #1d9bf0;
    flex-shrink: 0;
}

.profile-info__username {
    font-size: var(--text-sm);
    color: var(--muted-text);
    margin-bottom: var(--space-sm);
}

/* Follows You Badge */
.profile-info__follows-you {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 4px 12px;
    background: var(--surface-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    color: var(--muted-text);
    font-weight: 500;
    margin-bottom: var(--space-sm);
}

.profile-info__follows-you i {
    font-size: 11px;
    color: var(--success-emerald);
}

/* Subscription Badge */
.profile-info__sub-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 4px 14px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    margin-bottom: var(--space-md);
}

.profile-info__sub-badge--free_access {
    background: linear-gradient(135deg, rgba(196, 160, 89, 0.12), rgba(196, 160, 89, 0.04));
    color: var(--gold-dark);
    border: 1px solid rgba(196, 160, 89, 0.2);
}

.profile-info__sub-badge--shop {
    background: linear-gradient(135deg, rgba(29, 155, 240, 0.1), rgba(29, 155, 240, 0.03));
    color: #1d9bf0;
    border: 1px solid rgba(29, 155, 240, 0.15);
}

.profile-info__sub-badge--ai {
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.1), rgba(155, 89, 182, 0.03));
    color: #9b59b6;
    border: 1px solid rgba(155, 89, 182, 0.15);
}

.profile-info__sub-badge i {
    font-size: 12px;
}

/* Bio */
.profile-info__bio {
    font-size: var(--text-base);
    color: var(--charcoal-text);
    line-height: 1.6;
    margin-bottom: var(--space-md);
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
}

/* Details */
.profile-details {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm) var(--space-md);
    padding: var(--space-sm) 0;
}

.profile-details__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-sm);
    color: var(--muted-text);
}

.profile-details__item i {
    font-size: 13px;
    color: var(--light-text);
    width: 16px;
    text-align: center;
}

.profile-details__item--link a {
    color: var(--primary-gold);
    font-weight: 500;
}

.profile-details__item--link a:hover {
    text-decoration: underline;
}

.profile-details__item--online {
    color: var(--success-emerald);
    font-weight: 500;
}

.profile-details__item--online i {
    font-size: 8px;
    color: var(--success-emerald);
    animation: pulse 2s ease infinite;
}

/* --- Stats Bar --- */

.profile-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--space-lg) var(--space-lg);
    padding: var(--space-md) 0;
    background: var(--pure-pearl);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
}

.profile-stats__item {
    flex: 1;
    text-align: center;
    padding: var(--space-sm);
    transition: var(--transition-fast);
    border-radius: var(--radius-md);
    display: block;
    color: inherit;
}

a.profile-stats__item:hover,
a.profile-stats__item:active {
    background: var(--surface-white);
}

.profile-stats__number {
    display: block;
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--charcoal-text);
    font-variant-numeric: tabular-nums;
}

.profile-stats__label {
    display: block;
    font-size: var(--text-xs);
    color: var(--muted-text);
    font-weight: 500;
    margin-top: 2px;
}

.profile-stats__divider {
    width: 1px;
    height: 36px;
    background: var(--border-light);
    flex-shrink: 0;
}

/* --- Action Buttons --- */

.profile-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0 var(--space-lg);
    margin-bottom: var(--space-lg);
}

.profile-actions__form--main {
    flex: 1;
}

.btn--outline-subtle {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pure-pearl);
    border: 1px solid var(--border-light);
    color: var(--muted-text);
    font-size: 18px;
    transition: var(--transition-elastic);
    flex-shrink: 0;
    padding: 0;
}

.btn--outline-subtle:hover,
.btn--outline-subtle:active {
    border-color: var(--primary-gold);
    color: var(--primary-gold);
    background: rgba(196, 160, 89, 0.04);
    box-shadow: var(--shadow-sm);
}

.btn--danger-subtle:hover,
.btn--danger-subtle:active {
    border-color: var(--error-coral);
    color: var(--error-coral);
    background: var(--error-light);
}

/* Follow Button States */
.profile-actions__follow-btn--following {
    border-color: var(--success-emerald);
    color: var(--success-emerald);
}

.profile-actions__follow-btn--unfollow-hover {
    border-color: var(--error-coral) !important;
    color: var(--error-coral) !important;
    background: var(--error-light) !important;
}

.profile-actions__follow-btn--pending {
    border-color: var(--warning-amber);
    color: var(--warning-amber);
}

/* Blocked Banner */
.profile-blocked-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin: 0 var(--space-lg) var(--space-lg);
    padding: var(--space-md);
    background: var(--error-light);
    border: 1px solid rgba(231, 76, 60, 0.15);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--error-coral);
}

/* Mutual Connection */
.profile-mutual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin: 0 var(--space-lg) var(--space-lg);
    padding: var(--space-md);
    background: rgba(196, 160, 89, 0.05);
    border: 1px solid rgba(196, 160, 89, 0.12);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--gold-dark);
}

.profile-mutual__icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--primary-gold);
    color: var(--pure-pearl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* --- Quick Links Grid --- */

.profile-quick-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
    padding: 0 var(--space-lg);
    margin-bottom: var(--space-lg);
}

.profile-quick__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-sm);
    background: var(--pure-pearl);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    transition: var(--transition-elastic);
}

.profile-quick__item:hover,
.profile-quick__item:active {
    border-color: rgba(196, 160, 89, 0.3);
    box-shadow: var(--shadow-royal);
    transform: translateY(-2px);
}

.profile-quick__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    position: relative;
    transition: var(--transition-fast);
}

.profile-quick__item:hover .profile-quick__icon {
    transform: scale(1.08);
}

.profile-quick__icon--notif {
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.12), rgba(243, 156, 18, 0.04));
    color: var(--warning-amber);
}

.profile-quick__icon--friends {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.12), rgba(52, 152, 219, 0.04));
    color: var(--info-blue);
}

.profile-quick__icon--sub {
    background: linear-gradient(135deg, rgba(196, 160, 89, 0.12), rgba(196, 160, 89, 0.04));
    color: var(--primary-gold);
}

.profile-quick__icon--search {
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.12), rgba(39, 174, 96, 0.04));
    color: var(--success-emerald);
}

.profile-quick__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-full);
    background: var(--error-coral);
    color: var(--pure-pearl);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--pure-pearl);
    animation: scaleIn 0.3s ease;
}

.body--rtl .profile-quick__badge {
    right: auto;
    left: -4px;
}

.profile-quick__label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--muted-text);
    text-align: center;
}

/* --- Posts Section --- */

.profile-posts {
    margin: 0 var(--space-lg) var(--space-lg);
    background: var(--pure-pearl);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.profile-posts__header {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-light);
}

.profile-posts__title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--charcoal-text);
}

.profile-posts__title i {
    color: var(--primary-gold);
    font-size: 16px;
}

.profile-posts__empty {
    padding: var(--space-2xl) var(--space-lg);
    text-align: center;
}

.profile-posts__empty-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-md);
    background: var(--surface-white);
    border: 2px dashed var(--border-light);
    color: var(--light-text);
    font-size: 24px;
}

.profile-posts__empty-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--charcoal-text);
    margin-bottom: var(--space-xs);
}

.profile-posts__empty-desc {
    font-size: var(--text-sm);
    color: var(--muted-text);
    max-width: 260px;
    margin: 0 auto;
    line-height: 1.5;
}

/* --- Profile Menu (Bottom Sheet) --- */

.profile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5000;
}

.profile-menu--open {
    display: block;
}

.profile-menu__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    animation: fadeIn 0.3s ease;
}

.profile-menu__overlay--closing {
    animation: fadeOut 0.3s ease forwards;
}

@keyframes fadeOut {
    to { opacity: 0; }
}

.profile-menu__sheet {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--pure-pearl);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--space-sm) 0 var(--space-lg);
    padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
    max-height: 80vh;
    overflow-y: auto;
    animation: slideUp 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.profile-menu__sheet--closing {
    animation: slideDown 0.3s ease forwards;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes slideDown {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}

.profile-menu__handle {
    width: 36px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--border-medium);
    margin: var(--space-sm) auto var(--space-md);
}

.profile-menu__items {
    padding: 0 var(--space-md);
}

.profile-menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--charcoal-text);
    transition: var(--transition-fast);
    cursor: pointer;
    width: 100%;
    text-align: start;
    background: none;
    border: none;
}

.profile-menu__item:hover,
.profile-menu__item:active {
    background: var(--surface-white);
}

.profile-menu__item i {
    width: 22px;
    text-align: center;
    font-size: 16px;
    color: var(--muted-text);
}

.profile-menu__item--danger {
    color: var(--error-coral);
}

.profile-menu__item--danger i {
    color: var(--error-coral);
}

.profile-menu__item--lang {
    position: relative;
}

.profile-menu__lang-form {
    margin-left: auto;
}

.body--rtl .profile-menu__lang-form {
    margin-left: 0;
    margin-right: auto;
}

.profile-menu__lang-select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--surface-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--charcoal-text);
    cursor: pointer;
}

.profile-menu__separator {
    height: 1px;
    background: var(--border-light);
    margin: var(--space-sm) var(--space-md);
}

/* ============================================
   RESPONSIVE — PROFILE
   ============================================ */

@media (min-width: 768px) {
    .profile-cover {
        height: 280px;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        max-width: 640px;
        margin: 0 auto;
    }

    .profile-avatar__ring {
        width: 130px;
        height: 130px;
    }

    .profile-avatar-section {
        margin-top: -65px;
    }

    .profile-avatar__default {
        font-size: 48px;
    }

    .profile-info__name {
        font-size: var(--text-3xl);
    }

    .profile-stats {
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }

    .profile-actions {
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }

    .profile-quick-links {
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }

    .profile-posts {
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }

    .profile-menu__sheet {
        max-width: 480px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: var(--radius-lg);
        bottom: var(--space-lg);
    }

    .profile-menu__sheet--closing {
        animation: none;
        opacity: 0;
        transition: opacity 0.2s ease;
    }
}







/* ============================================
   SECTION 4: EDIT PROFILE PAGE
   ============================================ */

/* --- Edit Page Layout --- */

.edit-page {
    background: var(--surface-white);
    min-height: 100vh;
    padding-bottom: var(--space-2xl);
}

/* --- Edit Top Bar --- */

.edit-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    padding-top: calc(var(--space-md) + env(safe-area-inset-top));
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-light);
}

.edit-topbar__back {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-white);
    border: 1px solid var(--border-light);
    color: var(--charcoal-text);
    font-size: 16px;
    transition: var(--transition-fast);
    cursor: pointer;
}

.edit-topbar__back:hover,
.edit-topbar__back:active {
    background: var(--primary-gold);
    color: var(--pure-pearl);
    border-color: var(--primary-gold);
}

.edit-topbar__title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--charcoal-text);
}

.edit-topbar__save {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 8px 16px;
    border-radius: var(--radius-full);
    background: var(--border-light);
    color: var(--muted-text);
    font-size: var(--text-sm);
    font-weight: 600;
    transition: var(--transition-elastic);
    cursor: pointer;
    border: none;
}

.edit-topbar__save--active {
    background: var(--primary-gold);
    color: var(--pure-pearl);
    box-shadow: 0 4px 12px rgba(196, 160, 89, 0.3);
}

.edit-topbar__save--active:hover {
    background: var(--gold-dark);
    transform: translateY(-1px);
}

.edit-topbar__save i {
    font-size: 13px;
}

/* --- Edit Page Errors --- */

.edit-page__errors {
    margin: var(--space-md);
    padding: var(--space-md);
    background: var(--error-light);
    border: 1px solid rgba(231, 76, 60, 0.15);
    border-radius: var(--radius-md);
}

/* --- Edit Cover Photo --- */

.edit-cover {
    margin: var(--space-md);
}

.edit-cover__preview {
    position: relative;
    width: 100%;
    height: 160px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    border: 2px dashed var(--border-light);
    transition: var(--transition-elastic);
}

.edit-cover__preview:hover,
.edit-cover__preview:active {
    border-color: var(--primary-gold);
}

.edit-cover__preview--changed {
    border-style: solid;
    border-color: var(--success-emerald);
}

.edit-cover__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.edit-cover__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    background: var(--surface-white);
    color: var(--light-text);
    font-size: var(--text-sm);
}

.edit-cover__placeholder i {
    font-size: 28px;
}

.edit-cover__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    color: var(--pure-pearl);
    font-size: 24px;
    opacity: 0;
    transition: var(--transition-fast);
}

.edit-cover__preview:hover .edit-cover__overlay,
.edit-cover__preview:active .edit-cover__overlay {
    opacity: 1;
}

.edit-cover__input {
    display: none;
}

/* --- Edit Avatar --- */

.edit-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: calc(-40px + var(--space-md)) 0 var(--space-md);
    position: relative;
    z-index: 10;
}

.edit-avatar {
    width: 100px;
    height: 100px;
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    border: 4px solid var(--pure-pearl);
    box-shadow: var(--shadow-md);
    transition: var(--transition-elastic);
}

.edit-avatar:hover,
.edit-avatar:active {
    transform: scale(1.05);
    box-shadow: var(--shadow-royal);
}

.edit-avatar--changed {
    border-color: var(--success-emerald);
}

.edit-avatar__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.edit-avatar__default {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--border-light), var(--surface-white));
    color: var(--light-text);
    font-size: 36px;
}

.edit-avatar__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    color: var(--pure-pearl);
    font-size: 20px;
    opacity: 0;
    transition: var(--transition-fast);
    border-radius: var(--radius-full);
}

.edit-avatar:hover .edit-avatar__overlay,
.edit-avatar:active .edit-avatar__overlay {
    opacity: 1;
}

.edit-avatar__input {
    display: none;
}

.edit-avatar__hint {
    font-size: var(--text-xs);
    color: var(--light-text);
    margin-top: var(--space-sm);
}

/* --- Edit Sections --- */

.edit-section {
    margin: 0 var(--space-md) var(--space-lg);
    padding: var(--space-lg);
    background: var(--pure-pearl);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.edit-section__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: var(--space-xs);
}

.edit-section__header i {
    color: var(--primary-gold);
    font-size: 16px;
}

.edit-section__title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--charcoal-text);
}

/* --- Form Field Extras (textarea, select, info) --- */

.form-field__textarea {
    width: 100%;
    padding: 14px 16px;
    padding-bottom: 30px;
    background: var(--surface-white);
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: 16px;
    color: var(--charcoal-text);
    transition: var(--transition-elastic);
    resize: none;
    line-height: 1.6;
    min-height: 90px;
    -webkit-appearance: none;
}

.form-field__textarea::placeholder {
    color: var(--light-text);
    font-size: var(--text-sm);
}

.form-field__textarea:focus {
    border-color: var(--primary-gold);
    background: var(--pure-pearl);
    box-shadow: 0 0 0 4px var(--gold-glow);
}

.form-field__counter--textarea {
    top: auto;
    bottom: 10px;
    right: 14px;
    transform: none;
}

.body--rtl .form-field__counter--textarea {
    right: auto;
    left: 14px;
}

.form-field__select {
    width: 100%;
    padding: 14px 40px 14px 16px;
    background: var(--surface-white);
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: 16px;
    color: var(--charcoal-text);
    transition: var(--transition-elastic);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.body--rtl .form-field__select {
    padding: 14px 16px 14px 40px;
}

.form-field__select:focus {
    border-color: var(--primary-gold);
    box-shadow: 0 0 0 4px var(--gold-glow);
}

.form-field__select-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--muted-text);
    pointer-events: none;
}

.body--rtl .form-field__select-arrow {
    right: auto;
    left: 14px;
}

.form-field__info {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-xs);
    color: var(--info-blue);
    padding: 6px 10px;
    background: var(--info-light);
    border-radius: var(--radius-sm);
}

.form-field__info i {
    font-size: 12px;
    flex-shrink: 0;
}

.form-field__cooldown {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--warning-amber);
    font-weight: 500;
    margin-left: auto;
}

.body--rtl .form-field__cooldown {
    margin-left: 0;
    margin-right: auto;
}

.form-field__cooldown i {
    font-size: 10px;
    color: var(--warning-amber);
}

/* Disabled input */
.form-field__input:disabled,
.form-field__textarea:disabled {
    background: var(--surface-white);
    color: var(--light-text);
    cursor: not-allowed;
    opacity: 0.7;
}

/* --- Toggle Switch --- */

.edit-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
}

.edit-toggle__info {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex: 1;
}

.edit-toggle__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(196, 160, 89, 0.08);
    color: var(--primary-gold);
    font-size: 16px;
    flex-shrink: 0;
}

.edit-toggle__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.edit-toggle__label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--charcoal-text);
}

.edit-toggle__desc {
    font-size: var(--text-xs);
    color: var(--muted-text);
}

.edit-toggle__switch {
    position: relative;
    width: 50px;
    height: 28px;
    flex-shrink: 0;
    cursor: pointer;
}

.edit-toggle__checkbox {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.edit-toggle__slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--border-medium);
    border-radius: var(--radius-full);
    transition: var(--transition-elastic);
}

.edit-toggle__slider::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    background: var(--pure-pearl);
    top: 3px;
    left: 3px;
    transition: var(--transition-elastic);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.edit-toggle__checkbox:checked + .edit-toggle__slider {
    background: var(--primary-gold);
}

.edit-toggle__checkbox:checked + .edit-toggle__slider::before {
    transform: translateX(22px);
}

.body--rtl .edit-toggle__slider::before {
    left: auto;
    right: 3px;
}

.body--rtl .edit-toggle__checkbox:checked + .edit-toggle__slider::before {
    transform: translateX(-22px);
}

/* --- Bottom Save Button --- */

.edit-form__bottom {
    padding: var(--space-lg) var(--space-md);
}

/* ============================================
   SECTION 5: CONNECTIONS PAGE
   ============================================ */

/* --- Page Top Bar (Reusable) --- */

.page-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    padding-top: calc(var(--space-md) + env(safe-area-inset-top));
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-light);
}

.page-topbar__back {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-white);
    border: 1px solid var(--border-light);
    color: var(--charcoal-text);
    font-size: 16px;
    transition: var(--transition-fast);
    cursor: pointer;
    flex-shrink: 0;
}

.page-topbar__back:hover,
.page-topbar__back:active {
    background: var(--primary-gold);
    color: var(--pure-pearl);
    border-color: var(--primary-gold);
}

.page-topbar__title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--charcoal-text);
    flex: 1;
}

.page-topbar__action {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-text);
    font-size: 16px;
    transition: var(--transition-fast);
    flex-shrink: 0;
}

.page-topbar__action:hover,
.page-topbar__action:active {
    color: var(--primary-gold);
    background: rgba(196, 160, 89, 0.08);
}

/* --- Connections Page Layout --- */

.connections-page {
    background: var(--surface-white);
    min-height: 100vh;
    padding-bottom: 80px;
}

/* --- Connection Tabs --- */

.conn-tabs {
    display: flex;
    align-items: center;
    padding: 0 var(--space-md);
    border-bottom: 1px solid var(--border-light);
    background: var(--pure-pearl);
    position: sticky;
    top: 63px;
    z-index: 90;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.conn-tabs::-webkit-scrollbar {
    display: none;
}

.conn-tabs__tab {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--muted-text);
    border: none;
    background: none;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    transition: var(--transition-fast);
}

.conn-tabs__tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: var(--primary-gold);
    border-radius: var(--radius-full) var(--radius-full) 0 0;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.conn-tabs__tab--active {
    color: var(--charcoal-text);
}

.conn-tabs__tab--active::after {
    width: 100%;
}

.conn-tabs__tab:hover {
    color: var(--charcoal-text);
}

.conn-tabs__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    background: var(--surface-white);
    font-size: 11px;
    font-weight: 700;
    color: var(--muted-text);
}

.conn-tabs__count--active {
    background: var(--error-coral);
    color: var(--pure-pearl);
    animation: scaleIn 0.3s ease;
}

/* --- Connection Panels --- */

.conn-panel {
    display: none;
    padding: var(--space-md);
    animation: fadeIn 0.3s ease;
}

.conn-panel--active {
    display: block;
}

/* --- Connection List --- */

.conn-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* --- Connection Card --- */

.conn-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--pure-pearl);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    transition: var(--transition-elastic);
    opacity: 0;
    transform: translateY(15px);
}

.conn-card.animated {
    opacity: 1;
    transform: translateY(0);
}

.conn-card:hover {
    border-color: rgba(196, 160, 89, 0.2);
    box-shadow: var(--shadow-sm);
}

.conn-card--removing {
    animation: slideOutRight 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideOutRight {
    to {
        opacity: 0;
        transform: translateX(100%);
        max-height: 0;
        padding: 0;
        margin: 0;
        border: none;
        overflow: hidden;
    }
}

.body--rtl .conn-card--removing {
    animation-name: slideOutLeft;
}

@keyframes slideOutLeft {
    to {
        opacity: 0;
        transform: translateX(-100%);
        max-height: 0;
        padding: 0;
        margin: 0;
        border: none;
        overflow: hidden;
    }
}

/* Card Avatar */
.conn-card__avatar {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-full);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.conn-card__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.conn-card__avatar-default {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--border-light), var(--surface-white));
    color: var(--light-text);
    font-size: 20px;
}

.conn-card__online-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 14px;
    height: 14px;
    border-radius: var(--radius-full);
    background: var(--success-emerald);
    border: 2px solid var(--pure-pearl);
}

.body--rtl .conn-card__online-dot {
    right: auto;
    left: 1px;
}

/* Card Info */
.conn-card__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.conn-card__name-row {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.conn-card__name {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--charcoal-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conn-card__verified {
    font-size: 14px;
    color: #1d9bf0;
    flex-shrink: 0;
}

.conn-card__username {
    font-size: var(--text-xs);
    color: var(--muted-text);
}

.conn-card__time {
    font-size: 11px;
    color: var(--light-text);
    margin-top: 2px;
}

/* Card Action Buttons */
.conn-card__action {
    flex-shrink: 0;
}

.conn-card__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 8px 14px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    transition: var(--transition-elastic);
    cursor: pointer;
    border: none;
    white-space: nowrap;
}

.conn-card__btn--follow-back {
    background: var(--primary-gold);
    color: var(--pure-pearl);
    box-shadow: 0 2px 8px rgba(196, 160, 89, 0.25);
}

.conn-card__btn--follow-back:hover,
.conn-card__btn--follow-back:active {
    background: var(--gold-dark);
    transform: scale(1.05);
}

.conn-card__btn--following {
    background: var(--surface-white);
    border: 1.5px solid var(--success-emerald);
    color: var(--success-emerald);
}

.conn-card__btn--unfollow-hover {
    border-color: var(--error-coral) !important;
    color: var(--error-coral) !important;
    background: var(--error-light) !important;
}

/* Request Actions */
.conn-card__request-actions {
    display: flex;
    gap: var(--space-sm);
    flex-shrink: 0;
}

.conn-card__btn--accept {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-full);
    background: var(--primary-gold);
    color: var(--pure-pearl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 3px 10px rgba(196, 160, 89, 0.3);
    padding: 0;
}

.conn-card__btn--accept:hover,
.conn-card__btn--accept:active {
    background: var(--gold-dark);
    transform: scale(1.08);
}

.conn-card__btn--reject {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-full);
    background: var(--surface-white);
    border: 1.5px solid var(--border-light);
    color: var(--muted-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    padding: 0;
}

.conn-card__btn--reject:hover,
.conn-card__btn--reject:active {
    border-color: var(--error-coral);
    color: var(--error-coral);
    background: var(--error-light);
}

/* --- Connection Empty State --- */

.conn-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-2xl) var(--space-lg);
}

.conn-empty__icon {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(196, 160, 89, 0.08);
    color: var(--primary-gold);
    font-size: 28px;
    margin-bottom: var(--space-lg);
    animation: float 4s ease-in-out infinite;
}

.conn-empty__title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--charcoal-text);
    margin-bottom: var(--space-xs);
}

.conn-empty__desc {
    font-size: var(--text-sm);
    color: var(--muted-text);
    line-height: 1.5;
    margin-bottom: var(--space-lg);
    max-width: 260px;
}

/* ============================================
   RESPONSIVE — EDIT PROFILE & CONNECTIONS
   ============================================ */

@media (min-width: 768px) {
    .edit-section {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }

    .edit-cover {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }

    .edit-cover__preview {
        height: 200px;
    }

    .edit-form__bottom {
        max-width: 520px;
        margin: 0 auto;
    }

    .conn-list {
        max-width: 520px;
        margin: 0 auto;
    }

    .conn-card__avatar {
        width: 54px;
        height: 54px;
    }

    .conn-card__name {
        font-size: var(--text-base);
    }

    .conn-empty {
        padding: 80px var(--space-lg);
    }
}





/* ============================================
   SECTION 6: SUBSCRIPTION PAGE
   ============================================ */

.sub-page {
    background: var(--surface-white);
    min-height: 100vh;
    padding-bottom: 80px;
}

/* --- Subscription Hero (no plan) --- */

.sub-hero {
    text-align: center;
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
}

.sub-hero__icon {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-gold), var(--gold-dark));
    border-radius: var(--radius-full);
    color: var(--pure-pearl);
    font-size: 30px;
    box-shadow: var(--shadow-gold-glow);
}

.sub-hero__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    transform: translate(-50%, -50%);
    border: 2px solid var(--primary-gold);
    border-radius: var(--radius-full);
    animation: verifyRing 2.5s ease-in-out infinite;
}

.sub-hero__title {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--charcoal-text);
    margin-bottom: var(--space-sm);
}

.sub-hero__desc {
    font-size: var(--text-base);
    color: var(--muted-text);
    max-width: 320px;
    margin: 0 auto;
    line-height: 1.6;
}

/* --- Current Plan Banner --- */

.sub-current {
    padding: var(--space-md);
}

.sub-current__card {
    position: relative;
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-light);
    background: var(--pure-pearl);
}

.sub-current__card--ai {
    border-color: rgba(155, 89, 182, 0.2);
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.03), var(--pure-pearl));
}

.sub-current__card--shop {
    border-color: rgba(29, 155, 240, 0.2);
    background: linear-gradient(135deg, rgba(29, 155, 240, 0.03), var(--pure-pearl));
}

.sub-current__card--free_access {
    border-color: rgba(196, 160, 89, 0.2);
    background: linear-gradient(135deg, rgba(196, 160, 89, 0.05), var(--pure-pearl));
}

.sub-current__glow {
    position: absolute;
    top: -50%;
    right: -30%;
    width: 200px;
    height: 200px;
    border-radius: var(--radius-full);
    background: radial-gradient(circle, rgba(196, 160, 89, 0.06), transparent 70%);
    pointer-events: none;
}

.sub-current__header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.sub-current__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.sub-current__card--ai .sub-current__icon {
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.12), rgba(155, 89, 182, 0.04));
    color: #9b59b6;
}

.sub-current__card--shop .sub-current__icon {
    background: linear-gradient(135deg, rgba(29, 155, 240, 0.12), rgba(29, 155, 240, 0.04));
    color: #1d9bf0;
}

.sub-current__card--free_access .sub-current__icon {
    background: linear-gradient(135deg, rgba(196, 160, 89, 0.15), rgba(196, 160, 89, 0.05));
    color: var(--primary-gold);
}

.sub-current__plan-name {
    display: block;
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--charcoal-text);
}

.sub-current__status {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-sm);
    color: var(--success-emerald);
    font-weight: 600;
}

.sub-current__status i { font-size: 14px; }

.sub-current__details {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.sub-current__detail {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    color: var(--muted-text);
}

.sub-current__detail i { font-size: 14px; color: var(--light-text); width: 18px; text-align: center; }

.sub-current__warning {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--warning-light);
    border: 1px solid rgba(243, 156, 18, 0.15);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--warning-amber);
    animation: pulse 2s ease infinite;
}

.sub-current__warning i { font-size: 14px; }

.sub-current__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-light);
}

.sub-current__cancel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--muted-text);
    background: var(--surface-white);
    border: 1px solid var(--border-light);
    cursor: pointer;
    transition: var(--transition-elastic);
    width: 100%;
}

.sub-current__cancel-btn:hover { color: var(--error-coral); border-color: var(--error-coral); }

.sub-current__cancel-btn--confirming {
    background: var(--error-light);
    border-color: var(--error-coral);
    color: var(--error-coral);
    animation: shake 0.4s ease;
}

/* --- Plan Cards --- */

.sub-plans {
    padding: 0 var(--space-md) var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.sub-plan {
    background: var(--pure-pearl);
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    position: relative;
    overflow: hidden;
    transition: var(--transition-elastic);
}

.sub-plan:hover { box-shadow: var(--shadow-royal); }

.sub-plan--featured {
    border-color: var(--primary-gold);
    box-shadow: var(--shadow-royal);
}

.sub-plan--current { opacity: 0.8; }

.sub-plan--highlight-pulse { animation: pulse 1s ease 3; }

/* Popular Badge */
.sub-plan__popular {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 4px 12px;
    background: linear-gradient(135deg, var(--primary-gold), var(--gold-dark));
    color: var(--pure-pearl);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
    animation: pulse 3s ease infinite;
}

.body--rtl .sub-plan__popular { right: auto; left: var(--space-md); }

.sub-plan__popular i { font-size: 10px; }

/* Plan Header */
.sub-plan__header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.sub-plan__icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.sub-plan__icon-wrap--ai {
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.12), rgba(155, 89, 182, 0.04));
    color: #9b59b6;
}

.sub-plan__icon-wrap--shop {
    background: linear-gradient(135deg, rgba(196, 160, 89, 0.15), rgba(196, 160, 89, 0.05));
    color: var(--primary-gold);
}

.sub-plan__name {
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--charcoal-text);
}

.sub-plan__tagline {
    font-size: var(--text-xs);
    color: var(--muted-text);
    margin-top: 2px;
}

/* Plan Price */
.sub-plan__price {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--border-light);
}

.sub-plan__amount {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--charcoal-text);
    line-height: 1;
    letter-spacing: -1px;
}

.sub-plan__currency {
    display: flex;
    flex-direction: column;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--muted-text);
}

.sub-plan__period {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--light-text);
}

/* Plan Features */
.sub-plan__features {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.sub-plan__feature {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.sub-plan__feature--highlight {
    padding: var(--space-sm);
    background: rgba(196, 160, 89, 0.03);
    border-radius: var(--radius-md);
    border: 1px solid rgba(196, 160, 89, 0.08);
}

.sub-plan__feature-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    transition: var(--transition-elastic);
}

.sub-plan__feature-icon--bounce { animation: codePop 0.3s ease; }

.sub-plan__feature-icon--ai {
    background: rgba(155, 89, 182, 0.08);
    color: #9b59b6;
}

.sub-plan__feature-icon--shop {
    background: rgba(29, 155, 240, 0.08);
    color: #1d9bf0;
}

.sub-plan__feature-icon--exclusive {
    background: linear-gradient(135deg, rgba(196, 160, 89, 0.12), rgba(196, 160, 89, 0.04));
    color: var(--primary-gold);
}

.sub-plan__feature-title {
    display: block;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--charcoal-text);
    margin-bottom: 2px;
}

.sub-plan__feature-desc {
    display: block;
    font-size: var(--text-xs);
    color: var(--muted-text);
    line-height: 1.5;
}

/* Plan Divider */
.sub-plan__divider {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin: var(--space-sm) 0;
}

.sub-plan__divider::before,
.sub-plan__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary-gold), transparent);
    opacity: 0.2;
}

.sub-plan__divider span {
    font-size: 11px;
    font-weight: 700;
    color: var(--primary-gold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Plan Action */
.sub-plan__btn--featured {
    background: linear-gradient(135deg, var(--primary-gold), var(--gold-dark), var(--gold-light));
    background-size: 200% auto;
    animation: goldShimmer 4s ease-in-out infinite;
}

.sub-plan__current-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--success-light);
    border: 1px solid rgba(39, 174, 96, 0.15);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--success-emerald);
}

.sub-plan__current-badge i { font-size: 16px; }

/* --- Payment Info Footer --- */

.sub-payment-info {
    padding: var(--space-lg) var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.sub-payment-info__item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-size: var(--text-sm);
    color: var(--muted-text);
}

.sub-payment-info__item i {
    font-size: 16px;
    color: var(--light-text);
    width: 20px;
    text-align: center;
}

/* ============================================
   SECTION 7: NOTIFICATIONS PAGE
   ============================================ */

.notif-page {
    background: var(--surface-white);
    min-height: 100vh;
    padding-bottom: 80px;
}

/* --- Unread Bar --- */

.notif-unread-bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background: rgba(196, 160, 89, 0.06);
    border-bottom: 1px solid rgba(196, 160, 89, 0.1);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--gold-dark);
}

.notif-unread-bar__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--primary-gold);
    animation: pulse 2s ease infinite;
}

/* --- Notification List --- */

.notif-list {
    display: flex;
    flex-direction: column;
}

/* --- Notification Card --- */

.notif-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-light);
    transition: var(--transition-elastic);
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    position: relative;
}

.notif-card.animated {
    opacity: 1;
    transform: translateY(0);
}

.notif-card:hover,
.notif-card:active {
    background: var(--surface-white);
}

.notif-card--unread {
    background: rgba(196, 160, 89, 0.03);
}

.notif-card--unread::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: var(--primary-gold);
}

.body--rtl .notif-card--unread::before {
    left: auto;
    right: 0;
}

.notif-card--swiped {
    transform: translateX(-60px);
    opacity: 0.5;
    transition: var(--transition-fast);
}

.body--rtl .notif-card--swiped {
    transform: translateX(60px);
}

/* Notification Icon */
.notif-card__icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.notif-card__icon-wrap--new_follower {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.12), rgba(52, 152, 219, 0.04));
    color: var(--info-blue);
}

.notif-card__icon-wrap--follow_request {
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.12), rgba(243, 156, 18, 0.04));
    color: var(--warning-amber);
}

.notif-card__icon-wrap--follow_accepted {
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.12), rgba(39, 174, 96, 0.04));
    color: var(--success-emerald);
}

.notif-card__icon-wrap--subscription_expiring,
.notif-card__icon-wrap--subscription_expired {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.12), rgba(231, 76, 60, 0.04));
    color: var(--error-coral);
}

.notif-card__icon-wrap--new_device_login {
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.12), rgba(155, 89, 182, 0.04));
    color: #9b59b6;
}

.notif-card__icon-wrap--welcome {
    background: linear-gradient(135deg, rgba(196, 160, 89, 0.12), rgba(196, 160, 89, 0.04));
    color: var(--primary-gold);
}

/* Notification Content */
.notif-card__content {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: var(--space-sm);
}

.notif-card__actor {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    overflow: hidden;
    flex-shrink: 0;
}

.notif-card__actor-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.notif-card__actor-default {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-white);
    border: 1px solid var(--border-light);
    color: var(--light-text);
    font-size: 14px;
}

.notif-card__text {
    flex: 1;
    min-width: 0;
}

.notif-card__title {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--charcoal-text);
    margin-bottom: 2px;
    line-height: 1.4;
}

.notif-card--unread .notif-card__title {
    color: var(--charcoal-text);
}

.notif-card__message {
    font-size: var(--text-xs);
    color: var(--muted-text);
    line-height: 1.5;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-card__time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--light-text);
}

.notif-card__time i { font-size: 10px; }

/* Mark as Read Button */
.notif-card__mark-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-top: var(--space-xs);
}

.notif-card__unread-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background: var(--primary-gold);
    transition: var(--transition-fast);
}

.notif-card__mark-btn:hover .notif-card__unread-dot {
    background: var(--gold-dark);
    transform: scale(1.3);
    box-shadow: var(--shadow-gold-glow);
}

/* --- Notification Empty --- */

.notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 80px var(--space-lg);
}

.notif-empty__icon {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(196, 160, 89, 0.06);
    color: var(--light-text);
    font-size: 32px;
    margin-bottom: var(--space-lg);
    animation: float 4s ease-in-out infinite;
}

.notif-empty__title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--charcoal-text);
    margin-bottom: var(--space-sm);
}

.notif-empty__desc {
    font-size: var(--text-sm);
    color: var(--muted-text);
    max-width: 280px;
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

/* ============================================
   RESPONSIVE — SUBSCRIPTION & NOTIFICATIONS
   ============================================ */

@media (min-width: 768px) {
    .sub-current { max-width: 520px; margin: var(--space-md) auto; }
    .sub-plans { max-width: 520px; margin: 0 auto; }
    .sub-hero { max-width: 520px; margin: 0 auto; }
    .sub-payment-info { max-width: 520px; margin: 0 auto; }

    .sub-plan__amount { font-size: 3rem; }

    .notif-list { max-width: 600px; margin: 0 auto; }
    .notif-empty { max-width: 600px; margin: 0 auto; }

    .notif-card { border-radius: var(--radius-md); margin: var(--space-xs) var(--space-md); border: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
}

@media (min-width: 1024px) {
    .sub-plans { flex-direction: row; max-width: 900px; }
    .sub-plan { flex: 1; }
}




/* ============================================
   SECTION 8: SETTINGS PAGES
   (change_password, delete_account)
   ============================================ */

.settings-page {
    background: var(--surface-white);
    min-height: 100vh;
}

.settings-page__content {
    padding: var(--space-lg) var(--space-md);
    max-width: 480px;
    margin: 0 auto;
}

.settings-page__icon {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.settings-page__icon-circle {
    width: 68px;
    height: 68px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-md);
    font-size: 26px;
}

.settings-page__icon-circle--security {
    background: linear-gradient(135deg, rgba(196, 160, 89, 0.12), rgba(196, 160, 89, 0.04));
    color: var(--primary-gold);
    box-shadow: 0 8px 24px rgba(196, 160, 89, 0.15);
}

.settings-page__hint {
    font-size: var(--text-sm);
    color: var(--muted-text);
    line-height: 1.6;
    max-width: 300px;
    margin: 0 auto;
}

.settings-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* --- Auth Card Logo Variants --- */

.auth-card__logo--forgot {
    background: linear-gradient(135deg, var(--warning-amber), #e67e22);
}

.auth-card__logo--reset {
    background: linear-gradient(135deg, var(--success-emerald), #2ecc71);
}

/* ============================================
   SECTION 9: DELETE ACCOUNT PAGE
   ============================================ */

.delete-warning {
    text-align: center;
    padding: var(--space-lg);
    background: var(--error-light);
    border: 1px solid rgba(231, 76, 60, 0.12);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
}

.delete-warning__icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-md);
    background: rgba(231, 76, 60, 0.12);
    color: var(--error-coral);
    font-size: 28px;
}

.delete-warning__title {
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--error-coral);
    margin-bottom: var(--space-sm);
}

.delete-warning__desc {
    font-size: var(--text-sm);
    color: var(--muted-text);
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

.delete-warning__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    text-align: start;
}

.delete-warning__item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    color: var(--charcoal-text);
    padding: var(--space-sm) var(--space-md);
    background: rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-sm);
}

.delete-warning__item i {
    font-size: 14px;
    color: var(--error-coral);
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* Export suggestion */
.delete-export {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--info-light);
    border: 1px solid rgba(52, 152, 219, 0.12);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
}

.delete-export > i {
    font-size: 20px;
    color: var(--info-blue);
    flex-shrink: 0;
}

.delete-export__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.delete-export__title {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--charcoal-text);
}

.delete-export__desc {
    font-size: var(--text-xs);
    color: var(--muted-text);
}

.delete-export__btn {
    padding: 8px 16px;
    border-radius: var(--radius-full);
    background: var(--info-blue);
    color: var(--pure-pearl);
    font-size: var(--text-xs);
    font-weight: 700;
    transition: var(--transition-fast);
    flex-shrink: 0;
}

.delete-export__btn:hover {
    background: #2980b9;
}

/* Delete/Danger button */
.btn--danger {
    background: var(--error-coral);
    color: var(--pure-pearl);
    box-shadow: 0 4px 16px rgba(231, 76, 60, 0.25);
}

.btn--danger:hover {
    background: #c0392b;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(231, 76, 60, 0.35);
}

.btn--danger-confirming {
    background: #c0392b;
    animation: shake 0.4s ease, pulse 1.5s ease infinite;
}

/* ============================================
   SECTION 10: SEARCH PAGE
   ============================================ */

.search-page {
    background: var(--surface-white);
    min-height: 100vh;
    padding-bottom: 80px;
}

/* Search Top Bar */
.search-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    padding-top: calc(var(--space-md) + env(safe-area-inset-top));
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-light);
}

.search-topbar__form {
    flex: 1;
}

.search-topbar__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.search-topbar__icon {
    position: absolute;
    left: 14px;
    font-size: 15px;
    color: var(--light-text);
    pointer-events: none;
}

.body--rtl .search-topbar__icon {
    left: auto;
    right: 14px;
}

.search-topbar__input {
    width: 100%;
    padding: 12px 40px 12px 42px;
    background: var(--surface-white);
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-full);
    font-size: 16px;
    color: var(--charcoal-text);
    transition: var(--transition-elastic);
    -webkit-appearance: none;
}

.body--rtl .search-topbar__input {
    padding: 12px 42px 12px 40px;
}

.search-topbar__input:focus {
    border-color: var(--primary-gold);
    box-shadow: 0 0 0 4px var(--gold-glow);
    background: var(--pure-pearl);
}

.search-topbar__input::placeholder {
    color: var(--light-text);
    font-size: var(--text-sm);
}

.search-topbar__clear {
    position: absolute;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light-text);
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition-fast);
    background: none;
    border: none;
}

.body--rtl .search-topbar__clear {
    right: auto;
    left: 8px;
}

.search-topbar__clear:hover {
    color: var(--charcoal-text);
    background: var(--surface-white);
}

/* Search Results Count */
.search-results__count {
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--text-sm);
    color: var(--muted-text);
    border-bottom: 1px solid var(--border-light);
}

.search-results__count strong {
    color: var(--charcoal-text);
}

.search-results__list {
    padding: var(--space-md);
}

/* Card Bio line in search */
.conn-card__bio {
    font-size: 11px;
    color: var(--light-text);
    line-height: 1.4;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Go Arrow */
.conn-card__go-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light-text);
    font-size: 13px;
    flex-shrink: 0;
    transition: var(--transition-fast);
}

.conn-card:hover .conn-card__go-btn {
    color: var(--primary-gold);
    background: rgba(196, 160, 89, 0.08);
}

/* Unblock button */
.conn-card__btn--unblock {
    background: var(--surface-white);
    border: 1.5px solid var(--error-coral);
    color: var(--error-coral);
}

.conn-card__btn--unblock:hover,
.conn-card__btn--unblock:active {
    background: var(--error-light);
}

/* Search Empty / Initial States */
.search-empty,
.search-initial {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 80px var(--space-lg);
}

.search-empty__icon,
.search-initial__icon {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: var(--space-lg);
}

.search-empty__icon {
    background: var(--error-light);
    color: var(--error-coral);
}

.search-initial__icon {
    background: rgba(196, 160, 89, 0.08);
    color: var(--primary-gold);
    animation: float 4s ease-in-out infinite;
}

.search-empty__title,
.search-initial__title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--charcoal-text);
    margin-bottom: var(--space-sm);
}

.search-empty__desc,
.search-initial__desc {
    font-size: var(--text-sm);
    color: var(--muted-text);
    max-width: 280px;
    line-height: 1.6;
}

.search-empty__desc strong {
    color: var(--charcoal-text);
}

/* ============================================
   RESPONSIVE — SEARCH & SETTINGS
   ============================================ */

@media (min-width: 768px) {
    .search-results__list {
        max-width: 520px;
        margin: 0 auto;
    }

    .search-topbar__input-wrap {
        max-width: 400px;
    }

    .delete-warning {
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: var(--space-lg);
    }

    .delete-export {
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
}