.account-shell {
    width: min(1120px, 92%);
    margin: 0 auto;
    padding: 55px 0 90px;
}

.account-header {
    margin-bottom: 30px;
}

.account-eyebrow {
    color: #d1ad68;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
}

.account-header h1 {
    margin: 10px 0;
    font-size: clamp(30px, 5vw, 48px);
}

.account-muted {
    color: #8491a3;
}

.account-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 18px;
}

.account-panel {
    border: 1px solid rgba(209, 173, 104, .17);
    border-radius: 12px;
    background: rgba(12, 18, 28, .92);
    overflow: hidden;
}

.account-user {
    padding: 25px;
    border-bottom: 1px solid rgba(209, 173, 104, .12);
}

.account-avatar {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border: 1px solid rgba(209, 173, 104, .4);
    border-radius: 50%;
    background: rgba(209, 173, 104, .08);
    color: #d1ad68;
    font-size: 22px;
    font-weight: 800;
}

.account-user strong {
    display: block;
    color: #fff;
}

.account-role {
    display: inline-block;
    margin-top: 7px;
    color: #d1ad68;
    font-size: 10px;
    letter-spacing: 2px;
}

.account-navigation {
    padding: 12px;
}

.account-navigation a {
    display: block;
    margin: 3px 0;
    padding: 12px 14px;
    border-radius: 7px;
    color: #9ba7b5;
    text-decoration: none;
    transition: .2s;
}

.account-navigation a:hover {
    color: #fff;
    background: rgba(209, 173, 104, .07);
}

.account-content {
    padding: 28px;
}

.account-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.account-card {
    padding: 20px;
    border: 1px solid rgba(209, 173, 104, .14);
    border-radius: 9px;
    background: rgba(16, 24, 36, .78);
}

.account-card span {
    color: #718094;
    font-size: 11px;
}

.account-card strong {
    display: block;
    margin-top: 8px;
    color: #fff;
}

.account-form label {
    display: block;
    margin-bottom: 7px;
    color: #a8b2bf;
    font-size: 12px;
}

.account-form input,
.account-form select {
    width: 100%;
    margin-bottom: 18px;
    padding: 13px;
    border: 1px solid rgba(209, 173, 104, .18);
    border-radius: 7px;
    outline: none;
    background: #090f17;
    color: #fff;
}

.account-button {
    padding: 12px 18px;
    border: 1px solid rgba(209, 173, 104, .35);
    border-radius: 7px;
    background: rgba(209, 173, 104, .09);
    color: #d1ad68;
    cursor: pointer;
}

.invoice-table {
    width: 100%;
    border-collapse: collapse;
}

.invoice-table th,
.invoice-table td {
    padding: 13px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    text-align: start;
}

.invoice-table th {
    color: #738094;
    font-size: 10px;
    letter-spacing: 1px;
}

.invoice-table td {
    color: #c0c8d2;
    font-size: 13px;
}

.empty-state {
    padding: 50px 20px;
    text-align: center;
    color: #718094;
}

.login-shell {
    width: min(470px, 92%);
    margin: 70px auto;
}

.login-card {
    padding: 35px;
    border: 1px solid rgba(209, 173, 104, .18);
    border-radius: 14px;
    background: rgba(11, 17, 26, .95);
}

.login-card h1 {
    margin-top: 0;
}

.login-card form p {
    margin: 15px 0;
}

.login-card form label {
    display: block;
    margin-bottom: 7px;
    color: #aab3bf;
}

.login-card input {
    width: 100%;
    padding: 13px;
    border: 1px solid rgba(209, 173, 104, .18);
    border-radius: 7px;
    background: #080d14;
    color: white;
}

.login-card input[type="checkbox"] {
    width: auto;
}

.login-actions {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

.login-actions button,
.login-actions a {
    padding: 12px;
    border: 1px solid rgba(209, 173, 104, .2);
    border-radius: 7px;
    text-align: center;
    text-decoration: none;
    background: transparent;
    color: #dce2e8;
}

.login-actions .primary {
    background: rgba(209, 173, 104, .09);
    color: #d1ad68;
}

.social-pending {
    opacity: .45;
    cursor: not-allowed;
}

@media (max-width: 800px) {
    .account-grid {
        grid-template-columns: 1fr;
    }

    .account-cards {
        grid-template-columns: 1fr;
    }

    .invoice-table {
        display: block;
        overflow-x: auto;
    }
}

/* =====================================================
   CLASSIFIED TYPOGRAPHY
===================================================== */

html[dir="ltr"] body {
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
}

html[dir="rtl"] body {
    font-family: "Noto Sans Arabic", Tahoma, Arial, sans-serif;
}

button,
input,
select,
textarea {
    font-family: inherit;
}


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

.login-shell {
    opacity: 0;
    animation: classifiedLoginFade .55s ease forwards;
}

.login-card {
    position: relative;
    overflow: hidden;

    opacity: 0;

    animation:
        classifiedLoginEnter .7s
        cubic-bezier(.2,.8,.2,1)
        .08s
        forwards;

    box-shadow:
        0 25px 80px rgba(0,0,0,.35);
}

.login-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 110px;
    height: 2px;

    transform: translateX(-50%);

    background: #d1ad68;

    box-shadow:
        0 0 25px rgba(209,173,104,.45);
}

.login-card h1 {
    animation: classifiedTitleEnter .6s ease .2s both;
}

.login-card .account-muted {
    animation: classifiedTitleEnter .6s ease .27s both;
}

.login-card form {
    animation: classifiedTitleEnter .6s ease .34s both;
}

.login-actions a,
.login-actions button {
    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}

.login-actions a:hover,
.login-actions button:hover {
    transform: translateY(-2px);

    border-color: rgba(209,173,104,.55);

    background: rgba(209,173,104,.08);

    box-shadow:
        0 10px 25px rgba(0,0,0,.18);
}

.login-actions .primary:hover {
    color: #f1cf8c;

    background: rgba(209,173,104,.14);
}

.login-card input {
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.login-card input:focus {
    border-color: rgba(209,173,104,.65);

    background: #0b111a;

    box-shadow:
        0 0 0 3px rgba(209,173,104,.07);
}


/* subtle background movement */

.login-shell::before {
    content: "";

    position: fixed;

    width: 420px;
    height: 420px;

    left: 50%;
    top: 50%;

    transform: translate(-50%,-50%);

    pointer-events: none;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(209,173,104,.055),
            transparent 68%
        );

    animation: classifiedGlow 5s ease-in-out infinite;
}


@keyframes classifiedLoginFade {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


@keyframes classifiedLoginEnter {

    from {
        opacity: 0;

        transform:
            translateY(22px)
            scale(.985);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


@keyframes classifiedTitleEnter {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes classifiedGlow {

    0%,
    100% {
        opacity: .55;
        transform:
            translate(-50%,-50%)
            scale(.95);
    }

    50% {
        opacity: 1;
        transform:
            translate(-50%,-50%)
            scale(1.08);
    }

}


/* Motion accessibility */

@media (prefers-reduced-motion: reduce) {

    .login-shell,
    .login-card,
    .login-card h1,
    .login-card .account-muted,
    .login-card form,
    .login-shell::before {
        animation: none !important;
        opacity: 1;
        transform: none;
    }

}

/* =====================================================
   CLASSIFIED FORMAL TYPOGRAPHY
===================================================== */

html,
body,
button,
input,
select,
textarea {
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Tahoma,
        Arial,
        sans-serif !important;
}

html[dir="rtl"] body {
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.8;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] strong {
    font-weight: 700;
    letter-spacing: 0;
}

html[dir="rtl"] .nav-link {
    text-align: right;
}

html[dir="rtl"] .account-header,
html[dir="rtl"] .account-content,
html[dir="rtl"] .login-card {
    text-align: right;
}

html[dir="rtl"] .account-eyebrow {
    letter-spacing: 0;
    font-weight: 600;
}

html[dir="rtl"] .login-card h1 {
    line-height: 1.5;
    margin-bottom: 10px;
}

html[dir="rtl"] .login-card p {
    line-height: 1.9;
}

html[dir="rtl"] .login-card label {
    text-align: right;
}

html[dir="rtl"] .login-card input {
    text-align: right;
}

html[dir="rtl"] .login-actions a,
html[dir="rtl"] .login-actions button {
    text-align: center;
}

html[dir="rtl"] .account-role {
    letter-spacing: 0;
}

html[dir="rtl"] .sidebar-logo {
    letter-spacing: 3px;
    direction: ltr;
    text-align: center;
}

html[dir="rtl"] .nav-title {
    letter-spacing: 0;
    font-weight: 600;
}

html[dir="rtl"] .section-label {
    letter-spacing: 0;
    font-weight: 600;
}

/* Arabic spacing */

html[dir="rtl"] .nav-link {
    padding-top: 13px;
    padding-bottom: 13px;
}

html[dir="rtl"] .nav-link span {
    line-height: 1.6;
}

html[dir="rtl"] .account-form label {
    margin-bottom: 8px;
}

html[dir="rtl"] .account-form input,
html[dir="rtl"] .account-form select {
    line-height: 1.5;
}

/* =====================================================
   SIDEBAR USER ACCOUNT
===================================================== */

.account-user-link,
.account-user-link:hover,
.account-user-link:focus,
.account-user-link:visited {
    text-decoration: none !important;
}

.account-user-link strong {
    display: block;

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Tahoma,
        Arial,
        sans-serif !important;

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

    letter-spacing: 0 !important;

    line-height: 1.35;

    color: #e8edf3;

    text-decoration: none !important;
}

.account-user-link small {
    display: block;

    margin-top: 4px !important;

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Tahoma,
        Arial,
        sans-serif !important;

    font-size: 9px !important;
    font-weight: 600;

    line-height: 1.3;

    letter-spacing: .7px !important;

    color: #d1ad68 !important;

    text-decoration: none !important;
}

.account-user-link * {
    text-decoration: none !important;
}

.account-user-link .nav-icon {
    color: #8995a5;
    font-size: 12px;
}

.account-user-link:hover strong {
    color: #ffffff;
}

.account-user-link:hover small {
    color: #e5c681 !important;
}


/* FINAL SIDEBAR ACCOUNT OVERRIDE */

.sidebar .logged-account,
.sidebar .logged-account:link,
.sidebar .logged-account:visited,
.sidebar .logged-account:hover,
.sidebar .logged-account:active,
.sidebar .logged-account:focus,
.sidebar .logged-account *,
.sidebar .logged-account strong,
.sidebar .logged-account small {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none;
}

.sidebar .logged-account strong {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
    color: #e4e8ed !important;
}

.sidebar .logged-account small {
    margin-top: 3px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    letter-spacing: .4px !important;
    line-height: 1.4 !important;
    color: #c8a75e !important;
}

.sidebar .logged-account:hover strong {
    color: #ffffff !important;
}

.sidebar .logged-account:hover small {
    color: #d9b96c !important;
}


/* =====================================================
   CLASSIFIED SIDEBAR SAFE MOTION
===================================================== */

.sidebar {
    transition:
        box-shadow .25s ease,
        background .25s ease;
}

.sidebar .nav-link {
    position: relative;

    transition:
        transform .20s cubic-bezier(.2,.8,.2,1),
        background .20s ease,
        color .20s ease;
}

html[dir="ltr"] .sidebar .nav-link:hover {
    transform: translateX(4px);
}

html[dir="rtl"] .sidebar .nav-link:hover {
    transform: translateX(-4px);
}

.sidebar .nav-link:hover {
    background: rgba(209,173,104,.055);
    color: #ffffff;
}

.sidebar .nav-icon {
    transition:
        transform .20s ease,
        color .20s ease;
}

.sidebar .nav-link:hover .nav-icon {
    transform: scale(1.12);
    color: #d1ad68;
}

.sidebar .nav-link.active .nav-icon {
    color: #d1ad68;
}

.sidebar .nav-link::after {
    content: "";

    position: absolute;
    top: 50%;

    width: 2px;
    height: 0;

    border-radius: 5px;

    background: #d1ad68;

    transform: translateY(-50%);

    opacity: 0;

    transition:
        height .20s ease,
        opacity .20s ease;
}

html[dir="ltr"] .sidebar .nav-link::after {
    left: 0;
}

html[dir="rtl"] .sidebar .nav-link::after {
    right: 0;
}

.sidebar .nav-link:hover::after {
    height: 40%;
    opacity: .6;
}

.sidebar .nav-link.active::after {
    height: 60%;
    opacity: 1;
}

.sidebar .logged-account {
    transition:
        transform .20s ease,
        background .20s ease;
}

html[dir="ltr"] .sidebar .logged-account:hover {
    transform: translateX(4px);
}

html[dir="rtl"] .sidebar .logged-account:hover {
    transform: translateX(-4px);
}

@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .sidebar .nav-link,
    .sidebar .nav-icon,
    .sidebar .logged-account {
        transition: none !important;
    }
}



/* =====================================================
   CLASSIFIED CREATE ACCOUNT
===================================================== */

.signup-shell {
    width: min(1180px, 92%);
    margin: 0 auto;

    padding:
        clamp(45px, 7vw, 95px)
        0
        100px;
}


.signup-layout {
    display: grid;

    grid-template-columns:
        minmax(0, .92fr)
        minmax(420px, 1.08fr);

    gap: clamp(35px, 6vw, 85px);

    align-items: center;
}


/* INTRO */

.signup-intro {
    padding: 25px 5px;
}


.signup-brand-mark {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    margin-bottom: 30px;

    border:
        1px solid
        rgba(209,173,104,.32);

    border-radius: 50%;

    color: #d1ad68;

    background:
        rgba(209,173,104,.04);

    font-size: 24px;
}


.signup-eyebrow {
    color: #d1ad68;

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

    letter-spacing: 3px;
}


html[dir="rtl"] .signup-eyebrow {
    letter-spacing: 0;
}


.signup-intro h1 {
    margin: 13px 0 18px;

    font-size:
        clamp(36px, 5vw, 60px);

    line-height: 1.12;

    font-weight: 700;
}


.signup-description {
    max-width: 520px;

    margin: 0;

    color: #8996a7;

    font-size: 15px;

    line-height: 1.9;
}


.signup-steps {
    margin-top: 45px;

    display: grid;

    gap: 13px;
}


.signup-step {
    display: flex;

    gap: 15px;

    padding: 13px 15px;

    border:
        1px solid
        transparent;

    border-radius: 9px;

    opacity: .45;
}


.signup-step.active {
    opacity: 1;

    border-color:
        rgba(209,173,104,.14);

    background:
        rgba(209,173,104,.035);
}


.signup-step > span {
    width: 30px;

    color: #d1ad68;

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

    letter-spacing: 1px;
}


.signup-step strong {
    display: block;

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

    color: #e9edf2;
}


.signup-step small {
    display: block;

    margin-top: 4px;

    color: #6e7b8d;

    font-size: 11px;
}


/* CARD */

.signup-card {
    position: relative;

    overflow: hidden;

    padding:
        clamp(28px, 4vw, 44px);

    border:
        1px solid
        rgba(209,173,104,.17);

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(14,21,32,.97),
            rgba(8,13,20,.97)
        );

    box-shadow:
        0 30px 90px
        rgba(0,0,0,.3);

    animation:
        signupCardEnter
        .55s
        cubic-bezier(.2,.8,.2,1)
        both;
}


.signup-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 120px;
    height: 2px;

    transform:
        translateX(-50%);

    background: #d1ad68;

    box-shadow:
        0 0 25px
        rgba(209,173,104,.32);
}


@keyframes signupCardEnter {

    from {
        opacity: 0;

        transform:
            translateY(16px)
            scale(.99);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


.signup-status {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 18px;

    color: #8a97a7;

    font-size: 9px;

    letter-spacing: 1.5px;
}


.signup-status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #40d685;

    box-shadow:
        0 0 11px
        rgba(64,214,133,.6);
}


.signup-card-header h2 {
    margin:
        0
        0
        10px;

    font-size: 27px;

    font-weight: 650;
}


.signup-card-header p {
    margin:
        0
        0
        30px;

    color: #7e8a9a;

    font-size: 13px;

    line-height: 1.8;
}


/* FIELDS */

.signup-field {
    margin-bottom: 20px;
}


.signup-field label {
    display: block;

    margin-bottom: 8px;

    color: #b2bbc6;

    font-size: 12px;

    font-weight: 500;
}


.signup-field input {
    width: 100%;

    height: 48px;

    padding:
        0
        14px;

    outline: none;

    border:
        1px solid
        rgba(209,173,104,.16);

    border-radius: 8px;

    background:
        #080e16;

    color: #f1f3f6;

    font-size: 13px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


.signup-field input:focus {
    border-color:
        rgba(209,173,104,.58);

    background:
        #0a111b;

    box-shadow:
        0 0 0 3px
        rgba(209,173,104,.055);
}


.signup-field > small {
    display: block;

    margin-top: 7px;

    color: #5f6d7e;

    font-size: 10px;

    line-height: 1.5;
}


/* PASSWORD */

.password-control {
    position: relative;
}


.password-control input {
    padding-inline-end: 48px;
}


.password-toggle {
    position: absolute;

    top: 50%;
    inset-inline-end: 10px;

    width: 32px;
    height: 32px;

    transform:
        translateY(-50%);

    display: grid;
    place-items: center;

    padding: 0;

    border: 0;

    border-radius: 6px;

    background: transparent;

    color: #718094;

    cursor: pointer;

    transition:
        color .2s ease,
        background .2s ease;
}


.password-toggle:hover,
.password-toggle.visible {
    color: #d1ad68;

    background:
        rgba(209,173,104,.06);
}


/* ERRORS */

.signup-error,
.signup-alert {
    margin-top: 8px;

    padding: 10px 12px;

    border:
        1px solid
        rgba(238,91,91,.18);

    border-radius: 7px;

    background:
        rgba(238,91,91,.055);

    color: #e6a4a4;

    font-size: 11px;

    line-height: 1.6;
}


.signup-error ul,
.signup-alert ul {
    margin: 0;

    padding-inline-start: 17px;
}


/* EMAIL NOTE */

.signup-verification-note {
    display: flex;

    gap: 12px;

    margin:
        26px
        0;

    padding: 15px;

    border:
        1px solid
        rgba(209,173,104,.11);

    border-radius: 8px;

    background:
        rgba(209,173,104,.025);
}


.signup-verification-note > span {
    color: #d1ad68;
}


.signup-verification-note p {
    margin: 0;

    color: #7c8999;

    font-size: 11px;

    line-height: 1.7;
}


/* BUTTON */

.signup-submit {
    width: 100%;

    min-height: 49px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    padding: 12px 18px;

    border:
        1px solid
        rgba(209,173,104,.36);

    border-radius: 8px;

    background:
        linear-gradient(
            180deg,
            rgba(209,173,104,.13),
            rgba(209,173,104,.07)
        );

    color: #e4c47d;

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

    cursor: pointer;

    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.signup-submit:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(209,173,104,.65);

    background:
        rgba(209,173,104,.15);

    box-shadow:
        0 13px 30px
        rgba(0,0,0,.18);
}


.signup-submit-arrow {
    transition:
        transform .2s ease;
}


.signup-submit:hover
.signup-submit-arrow {
    transform:
        translateX(4px);
}


html[dir="rtl"]
.signup-submit:hover
.signup-submit-arrow {
    transform:
        translateX(-4px);
}


/* LEGAL */

.signup-legal {
    margin-top: 17px;

    text-align: center;

    color: #596677;

    font-size: 9px;

    line-height: 1.8;
}


.signup-legal a {
    color: #9b8660;

    text-decoration: none;
}


.signup-legal a:hover {
    color: #d1ad68;
}


/* DIVIDER */

.signup-divider {
    position: relative;

    margin:
        30px
        0
        20px;

    text-align: center;
}


.signup-divider::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 50%;

    height: 1px;

    background:
        rgba(255,255,255,.055);
}


.signup-divider span {
    position: relative;

    padding:
        0
        12px;

    background:
        #0b111a;

    color: #596676;

    font-size: 8px;

    letter-spacing: 1px;
}


/* SECONDARY */

.signup-secondary-actions {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 9px;
}


.signup-secondary,
.signup-guest {
    padding: 11px;

    border:
        1px solid
        rgba(255,255,255,.065);

    border-radius: 7px;

    text-align: center;

    text-decoration: none;

    color: #aab3bf;

    font-size: 11px;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}


.signup-secondary:hover,
.signup-guest:hover {
    color: #fff;

    border-color:
        rgba(209,173,104,.22);

    background:
        rgba(209,173,104,.045);
}


/* RTL */

html[dir="rtl"] .signup-card,
html[dir="rtl"] .signup-intro {
    text-align: right;
}


html[dir="rtl"] .signup-status {
    letter-spacing: 0;
}


html[dir="rtl"] .signup-step {
    flex-direction: row;
}


/* TABLET */

@media (max-width: 1000px) {

    .signup-layout {
        grid-template-columns: 1fr;

        max-width: 680px;

        margin: auto;
    }

    .signup-intro {
        padding-bottom: 0;
    }

    .signup-steps {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .signup-step {
        display: block;
    }

    .signup-step > span {
        display: block;

        margin-bottom: 7px;
    }

}


/* MOBILE */

@media (max-width: 600px) {

    .signup-shell {
        width: 90%;

        padding-top: 35px;
    }

    .signup-intro h1 {
        font-size: 36px;
    }

    .signup-steps {
        grid-template-columns: 1fr;
    }

    .signup-card {
        padding: 25px 20px;
    }

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

}


/* Accessibility */

@media (prefers-reduced-motion: reduce) {

    .signup-card,
    .signup-submit,
    .signup-submit-arrow {
        animation: none !important;

        transition: none !important;
    }

}


/* =====================================================
   COMPACT CREATE ACCOUNT
   Matches CLASSIFIED Login
===================================================== */

.signup-compact-shell {
    width: min(520px, 92%);
    margin-inline: auto;
}

.signup-compact-card {
    padding: 38px 36px;
}

.signup-compact-card h1 {
    margin:
        9px
        0
        10px;

    font-size: 25px;
    line-height: 1.4;
}

.signup-compact-card > .account-muted {
    margin:
        0
        0
        26px;

    font-size: 12px;
    line-height: 1.8;
}


/* Progress */

.signup-progress {
    display: flex;
    align-items: center;

    margin:
        0
        0
        28px;

    padding:
        12px
        13px;

    border:
        1px solid
        rgba(209,173,104,.10);

    border-radius: 8px;

    background:
        rgba(255,255,255,.012);
}

.signup-progress-item {
    min-width: 48px;

    text-align: center;

    opacity: .35;
}

.signup-progress-item.active {
    opacity: 1;
}

.signup-progress-item span {
    display: block;

    color: #d1ad68;

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

.signup-progress-item small {
    display: block;

    margin-top: 3px;

    color: #8d99a8;

    font-size: 8px;
}

.signup-progress-line {
    flex: 1;

    height: 1px;

    margin:
        0
        8px;

    background:
        rgba(255,255,255,.065);
}


/* Fields */

.signup-compact-field {
    margin-bottom: 18px;
}

.signup-compact-field label {
    display: block;

    margin-bottom: 7px;

    color: #aab4c0;

    font-size: 11px;
    font-weight: 500;
}

.signup-compact-field input {
    width: 100%;

    height: 46px;

    padding:
        0
        13px;

    border:
        1px solid
        rgba(209,173,104,.16);

    border-radius: 7px;

    outline: none;

    background:
        #080d14;

    color: #f2f4f7;

    font-size: 12px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.signup-compact-field input:focus {
    border-color:
        rgba(209,173,104,.58);

    background:
        #0b111a;

    box-shadow:
        0 0 0 3px
        rgba(209,173,104,.055);
}


/* Password */

.signup-password-wrap {
    position: relative;
}

.signup-password-wrap input {
    padding-inline-end: 47px;
}

.signup-eye {
    position: absolute;

    top: 50%;
    inset-inline-end: 8px;

    width: 32px;
    height: 32px;

    transform:
        translateY(-50%);

    display: grid;
    place-items: center;

    border: 0;

    border-radius: 6px;

    background: transparent;

    color: #647184;

    cursor: pointer;

    transition:
        color .2s ease,
        background .2s ease;
}

.signup-eye:hover,
.signup-eye.active {
    color: #d1ad68;

    background:
        rgba(209,173,104,.055);
}


/* Verification */

.signup-email-note {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin:
        24px
        0
        17px;

    padding:
        12px
        13px;

    border:
        1px solid
        rgba(209,173,104,.11);

    border-radius: 7px;

    background:
        rgba(209,173,104,.025);

    color: #758294;

    font-size: 10px;
    line-height: 1.7;
}

.signup-email-icon {
    color: #d1ad68;
}


/* Errors */

.signup-compact-error {
    margin-top: 7px;

    padding:
        9px
        11px;

    border:
        1px solid
        rgba(232,82,82,.17);

    border-radius: 6px;

    background:
        rgba(232,82,82,.05);

    color: #d99797;

    font-size: 10px;
    line-height: 1.6;
}

.signup-compact-error ul {
    margin: 0;

    padding-inline-start: 16px;
}


/* Main button */

.signup-main-actions {
    margin-top: 0;
}

.signup-main-actions button {
    width: 100%;
    min-height: 46px;

    cursor: pointer;
}


/* Legal */

.signup-terms {
    margin-top: 16px;

    text-align: center;

    color: #566272;

    font-size: 8px;
    line-height: 1.8;
}

.signup-terms a {
    color: #95815c;

    text-decoration: none;
}

.signup-terms a:hover {
    color: #d1ad68;
}


/* Separator */

.signup-login-separator {
    position: relative;

    margin:
        27px
        0
        18px;

    text-align: center;
}

.signup-login-separator::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 50%;

    height: 1px;

    background:
        rgba(255,255,255,.055);
}

.signup-login-separator span {
    position: relative;

    padding:
        0
        11px;

    background:
        #0b111a;

    color: #546171;

    font-size: 8px;
}


/* RTL */

html[dir="rtl"] .signup-compact-card {
    text-align: right;
}

html[dir="rtl"] .signup-terms,
html[dir="rtl"] .signup-login-separator {
    text-align: center;
}


/* Mobile */

@media(max-width: 600px) {

    .signup-compact-shell {
        width: 91%;
        margin-top: 35px;
    }

    .signup-compact-card {
        padding:
            30px
            21px;
    }

    .signup-compact-card h1 {
        font-size: 22px;
    }

}

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

.logout-card {
    width: min(470px, 100%);
}

.logout-account-box {
    display: flex;
    align-items: center;
    gap: 14px;

    margin: 25px 0;

    padding: 15px;

    border: 1px solid rgba(209,173,104,.12);
    border-radius: 9px;

    background: rgba(255,255,255,.018);
}

.logout-avatar {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(209,173,104,.30);
    border-radius: 50%;

    background: rgba(209,173,104,.055);

    color: #d1ad68;

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

.logout-account-box strong {
    display: block;

    color: #f0f3f6;

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

.logout-account-box small {
    display: block;

    margin-top: 3px;

    color: #788596;

    font-size: 10px;
}

.logout-account-box span {
    display: block;

    margin-top: 5px;

    color: #d1ad68;

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

.logout-warning {
    display: flex;
    gap: 11px;

    margin-bottom: 22px;

    padding: 13px;

    border: 1px solid rgba(209,173,104,.10);
    border-radius: 8px;

    background: rgba(209,173,104,.025);
}

.logout-warning > span {
    color: #d1ad68;
}

.logout-warning p {
    margin: 0;

    color: #768395;

    font-size: 10px;

    line-height: 1.7;
}

.logout-confirm {
    width: 100%;
    cursor: pointer;
}

html[dir="rtl"] .logout-card,
html[dir="rtl"] .logout-account-box,
html[dir="rtl"] .logout-warning {
    text-align: right;
}


/* =====================================================
   CLASSIFIED ACCOUNT CONNECTIONS
===================================================== */

.connections-shell {
    width: min(580px, 92%);
}

.connections-card {
    width: 100%;
    padding: 38px 36px;
}

.connections-card h1 {
    margin: 9px 0 10px;
    font-size: 26px;
}

.connections-section {
    margin-top: 28px;
}

.connections-section-title {
    margin-bottom: 11px;

    color: #667487;

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

    letter-spacing: 1.5px;
}

html[dir="rtl"] .connections-section-title {
    letter-spacing: 0;
}


/* connected accounts */

.connected-list {
    display: grid;
    gap: 9px;
}

.connected-account {
    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 12px;

    padding: 13px;

    border:
        1px solid
        rgba(209,173,104,.13);

    border-radius: 9px;

    background:
        rgba(255,255,255,.016);

    cursor: pointer;

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

.connected-account:hover {
    transform: translateY(-1px);

    border-color:
        rgba(209,173,104,.30);

    background:
        rgba(209,173,104,.035);
}

.connected-account input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}

.connected-account:has(input:checked) {
    border-color:
        rgba(209,173,104,.60);

    background:
        rgba(209,173,104,.07);
}


/* provider icon */

.connection-icon,
.provider-icon {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(209,173,104,.20);

    border-radius: 9px;

    background:
        rgba(209,173,104,.045);

    color: #d1ad68;

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


/* account detail */

.connection-details strong,
.provider-info strong {
    display: block;

    color: #e9edf2;

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

.connection-details span,
.provider-info span {
    display: block;

    margin-top: 4px;

    color: #687689;

    font-size: 10px;

    overflow: hidden;
    text-overflow: ellipsis;
}


/* status */

.connection-status {
    display: flex;
    align-items: center;
    gap: 6px;

    color: #71b992;

    font-size: 8px;
}

.connection-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #49d68b;

    box-shadow:
        0 0 8px
        rgba(73,214,139,.45);
}


/* Remove */

.connection-remove {
    width: 100%;

    margin-top: 11px;

    padding: 11px;

    border:
        1px solid
        rgba(219,91,91,.20);

    border-radius: 7px;

    background:
        rgba(219,91,91,.035);

    color: #c98787;

    cursor: pointer;

    transition: .2s ease;
}

.connection-remove:hover {
    border-color:
        rgba(219,91,91,.45);

    background:
        rgba(219,91,91,.07);

    color: #e4a1a1;
}


/* empty */

.connections-empty {
    padding: 28px 20px;

    text-align: center;

    border:
        1px dashed
        rgba(209,173,104,.14);

    border-radius: 9px;

    background:
        rgba(255,255,255,.01);
}

.connections-empty.compact {
    padding: 20px;
}

.connections-empty-icon {
    margin-bottom: 10px;

    color: #d1ad68;

    font-size: 20px;
}

.connections-empty strong {
    display: block;

    color: #c9d0d8;

    font-size: 12px;
}

.connections-empty p {
    max-width: 390px;

    margin:
        7px
        auto
        0;

    color: #697689;

    font-size: 10px;

    line-height: 1.7;
}


/* providers */

.provider-grid {
    display: grid;
    gap: 9px;
}

.provider-card {
    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr)
        24px;

    align-items: center;

    gap: 12px;

    padding: 13px;

    border:
        1px solid
        rgba(209,173,104,.13);

    border-radius: 9px;

    color: inherit;

    text-decoration: none;

    background:
        rgba(255,255,255,.016);

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

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

    border-color:
        rgba(209,173,104,.34);

    background:
        rgba(209,173,104,.04);
}

.provider-arrow {
    color: #677487;

    font-size: 15px;

    transition:
        transform .2s ease,
        color .2s ease;
}

.provider-card:hover .provider-arrow {
    color: #d1ad68;

    transform: translateX(3px);
}

html[dir="rtl"]
.provider-card:hover
.provider-arrow {
    transform:
        translateX(-3px);
}


/* security note */

.connections-security-note {
    display: flex;

    gap: 10px;

    margin:
        27px
        0
        18px;

    padding: 12px 13px;

    border:
        1px solid
        rgba(209,173,104,.09);

    border-radius: 7px;

    background:
        rgba(209,173,104,.02);
}

.connections-security-note p {
    margin: 0;

    color: #697689;

    font-size: 9px;

    line-height: 1.7;
}


/* RTL */

html[dir="rtl"] .connections-card,
html[dir="rtl"] .connected-account,
html[dir="rtl"] .provider-card {
    text-align: right;
}


/* Mobile */

@media(max-width: 600px) {

    .connections-card {
        padding:
            29px
            20px;
    }

    .connected-account {
        grid-template-columns:
            38px
            minmax(0,1fr);
    }

    .connection-status {
        grid-column: 2;
    }

}

/* =====================================================
   DISCORD OAUTH
===================================================== */

.discord-login-button {
    min-height: 46px;

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

    gap: 10px;

    padding: 0 15px;

    border: 1px solid rgba(88,101,242,.32);
    border-radius: 7px;

    background: rgba(88,101,242,.08);

    color: #c9ceff;

    text-decoration: none;

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

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

.discord-login-button:hover {
    transform: translateY(-2px);

    background: rgba(88,101,242,.14);

    border-color: rgba(88,101,242,.58);
}

.discord-login-icon {
    width: 25px;
    height: 25px;

    display: grid;
    place-items: center;

    border-radius: 6px;

    background: rgba(88,101,242,.16);

    font-size: 11px;
    font-weight: 800;
}


/* Discord button alignment */

.discord-login-button {
    direction: ltr;
}

.discord-login-button > span:not(.discord-login-icon) {
    direction: inherit;
}

html[dir="rtl"] .discord-login-button {
    direction: rtl;
}

.discord-login-icon {
    flex: 0 0 auto;

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

    width: 27px;
    height: 27px;

    color: #c9ceff;
}

.discord-login-icon svg {
    display: block;
    width: 18px;
    height: 18px;
}


/* =====================================================
   DISCORD IDENTITY
===================================================== */

.account-discord-panel {
    margin-top: 25px;

    padding: 20px;

    border: 1px solid rgba(88,101,242,.18);
    border-radius: 10px;

    background: rgba(88,101,242,.025);
}

.account-discord-title,
.owner-discord-head {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 15px;

    margin-bottom: 17px;

    color: #69778a;

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

.discord-connected-badge {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: #72c99a;

    font-size: 8px;
}

.discord-connected-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #43d887;

    box-shadow:
        0 0 9px rgba(67,216,135,.50);
}

.discord-profile-row {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 18px;
}

.discord-profile-avatar,
.discord-main-avatar {
    object-fit: cover;
}

.discord-profile-avatar {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    border-radius: 50%;

    border:
        1px solid
        rgba(88,101,242,.35);
}

.discord-profile-avatar.fallback {
    display: grid;
    place-items: center;

    background:
        rgba(88,101,242,.10);

    color: #adb4ff;
}

.discord-profile-info strong {
    display: block;

    color: #eef1f5;

    font-size: 14px;
}

.discord-profile-info span {
    display: block;

    margin-top: 3px;

    color: #8b97a8;

    font-size: 11px;
}

.discord-profile-info small {
    display: block;

    margin-top: 6px;

    color: #606e80;

    font-size: 9px;
}

.discord-manage-link {
    display: inline-flex;

    text-decoration: none;
}


/* =========================================
   PROFILE PAGE REBUILD
========================================= */

.account-page-shell {
    width: 100%;
}

.account-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) 380px;
    gap: 28px;
    align-items: start;
}

.account-main-panel,
.account-side-panel {
    min-width: 0;
}

.account-side-panel {
    position: sticky;
    top: 110px;
}

.account-section-head {
    margin-bottom: 22px;
}

.account-section-head h1 {
    margin: 0 0 8px;
    color: #f5f7fb;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: .3px;
}

.account-section-head p {
    margin: 0;
    color: #93a0b4;
    font-size: 14px;
    line-height: 1.8;
}

.account-kicker {
    display: inline-block;
    margin-bottom: 8px;
    color: #d8b36b;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.classified-form-card,
.profile-identity-card {
    background: linear-gradient(180deg, rgba(9,18,35,.88), rgba(5,12,24,.92));
    border: 1px solid rgba(212,170,84,.14);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0,0,0,.25);
}

.classified-form-card {
    padding: 28px;
}

.classified-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.classified-field label {
    display: block;
    margin-bottom: 9px;
    color: #d7dfeb;
    font-size: 13px;
    font-weight: 600;
}

.classified-field input,
.classified-field select,
.classified-field textarea {
    width: 100%;
    min-height: 52px;
    padding: 0 18px;
    color: #f5f7fb;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(212,170,84,.16);
    border-radius: 12px;
    outline: none;
    transition: .25s ease;
}

.classified-field input:focus,
.classified-field select:focus,
.classified-field textarea:focus {
    border-color: rgba(212,170,84,.42);
    box-shadow: 0 0 0 4px rgba(212,170,84,.08);
}

.classified-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}

.profile-identity-card {
    padding: 22px;
}

.profile-identity-top {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(212,170,84,.10);
}

.profile-avatar-wrap {
    flex: 0 0 auto;
}

.profile-avatar-image,
.profile-avatar-fallback {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    border: 2px solid rgba(212,170,84,.24);
    object-fit: cover;
    background: rgba(255,255,255,.03);
}

.profile-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f5f7fb;
    font-size: 28px;
    font-weight: 700;
}

.profile-identity-meta {
    min-width: 0;
}

.profile-meta-label {
    display: inline-block;
    margin-bottom: 8px;
    color: #d8b36b;
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.profile-identity-meta h2 {
    margin: 0;
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.profile-username-line {
    margin-top: 6px;
    color: #9cadc5;
    font-size: 14px;
}

.profile-role-badge {
    margin-top: 12px;
}

.profile-role-badge span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    color: #0b0f18;
    background: linear-gradient(135deg, #d4aa54, #f1cf7a);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}

.profile-stats-list {
    display: grid;
    gap: 12px;
    margin-top: 20px;
}

.profile-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(212,170,84,.08);
    border-radius: 12px;
}

.profile-stat-row span {
    color: #93a0b4;
    font-size: 13px;
}

.profile-stat-row strong {
    color: #f3f6fb;
    font-size: 13px;
    text-align: end;
    word-break: break-word;
}

.ok-status {
    color: #73d89a !important;
}

.warn-status {
    color: #ffbe6b !important;
}

.profile-card-actions {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.account-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 18px;
    border-radius: 12px;
    border: 1px solid rgba(212,170,84,.18);
    text-decoration: none;
    transition: .25s ease;
    cursor: pointer;
}

.account-button.primary {
    color: #11151e;
    background: linear-gradient(135deg, #d4aa54, #f0cf85);
    font-weight: 700;
}

.account-button.ghost {
    color: #e7edf7;
    background: rgba(255,255,255,.02);
}

.account-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(0,0,0,.18);
}

@media (max-width: 1100px) {
    .account-page-grid {
        grid-template-columns: 1fr;
    }

    .account-side-panel {
        position: static;
    }
}

@media (max-width: 700px) {
    .classified-form-card,
    .profile-identity-card {
        padding: 18px;
    }

    .profile-identity-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-avatar-image,
    .profile-avatar-fallback {
        width: 78px;
        height: 78px;
    }
}

/* =====================================================
   SIDEBAR DISCORD PROFILE
===================================================== */

.sidebar-profile-link {
    display: flex !important;
    align-items: center !important;

    gap: 11px !important;

    min-height: 58px;

    text-decoration: none !important;
}

.sidebar-profile-avatar {
    width: 38px !important;
    height: 38px !important;

    flex: 0 0 38px !important;

    object-fit: cover;

    border-radius: 50%;

    border:
        1px solid
        rgba(209,173,104,.28);

    background:
        rgba(255,255,255,.03);

    box-shadow:
        0 0 0 3px
        rgba(209,173,104,.025);

    transition:
        transform .2s ease,
        border-color .2s ease;
}

.sidebar-profile-link:hover
.sidebar-profile-avatar {
    transform: scale(1.05);

    border-color:
        rgba(209,173,104,.55);
}

.sidebar-profile-fallback {
    display: grid !important;
    place-items: center !important;

    color: #e8edf3;

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

.sidebar-profile-details {
    min-width: 0;

    display: block;
}

.sidebar-profile-name {
    display: block;

    overflow: hidden;

    color: #edf1f5 !important;

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

    line-height: 1.35;

    white-space: nowrap;
    text-overflow: ellipsis;

    text-decoration: none !important;
}

.sidebar-profile-username {
    display: block;

    margin-top: 2px;

    overflow: hidden;

    color: #788699;

    font-size: 9px;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.sidebar-profile-role {
    display: block;

    margin-top: 4px !important;

    color: #d1ad68 !important;

    font-size: 8px !important;
    font-weight: 600 !important;

    line-height: 1.3;

    text-decoration: none !important;
}


/* RTL */

html[dir="rtl"]
.sidebar-profile-link {
    text-align: right;
}


/* =====================================================
   SMART SIDEBAR COMPACT PROFILE
===================================================== */

@media (min-width: 901px) {

    body.smart-sidebar-compact
    .sidebar
    .sidebar-profile-details {
        display: none !important;
    }

    body.smart-sidebar-compact
    .sidebar
    .sidebar-profile-link {
        justify-content: center !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        gap: 0 !important;
    }

    body.smart-sidebar-compact
    .sidebar
    .sidebar-profile-avatar {
        width: 36px !important;
        height: 36px !important;

        flex-basis: 36px !important;
    }


    /* Expand profile again on sidebar hover */

    body.smart-sidebar-compact
    .sidebar:hover
    .sidebar-profile-details,

    body.smart-sidebar-compact
    .sidebar:focus-within
    .sidebar-profile-details {
        display: block !important;
    }

    body.smart-sidebar-compact
    .sidebar:hover
    .sidebar-profile-link,

    body.smart-sidebar-compact
    .sidebar:focus-within
    .sidebar-profile-link {
        justify-content: flex-start !important;

        padding-left: 13px !important;
        padding-right: 13px !important;

        gap: 11px !important;
    }

}

/* =====================================================
   PROFILE EDITING
===================================================== */

.readonly-field {
    opacity: .68;
    cursor: not-allowed;
}

.profile-email-change {
    display: inline-flex;

    margin-top: 9px;

    color: #d1ad68;

    font-size: 10px;

    text-decoration: none;

    transition:
        color .2s ease,
        transform .2s ease;
}

.profile-email-change:hover {
    color: #efd18d;

    transform: translateX(2px);
}

html[dir="rtl"]
.profile-email-change:hover {
    transform: translateX(-2px);
}

.field-error,
.errorlist {
    margin:
        7px
        0
        0;

    color: #d99191;

    font-size: 10px;

    line-height: 1.6;
}

.errorlist {
    padding-inline-start: 17px;
}



/* =========================================================
   CLASSIFIED — DISCORD CONNECT
========================================================= */

.discord-connect-page {
    width: 100%;
    min-height: calc(100vh - 120px);

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

    padding: 70px 22px 100px;
}

.discord-connect-shell {
    width: 100%;
    max-width: 720px;
}


/* Messages */

.connect-messages {
    margin-bottom: 22px;

    padding: 18px;

    border: 1px solid rgba(209, 173, 104, .14);
    border-radius: 18px;

    background:
        linear-gradient(
            180deg,
            rgba(11, 20, 34, .9),
            rgba(7, 13, 23, .95)
        );
}

.connect-section-label {
    margin-bottom: 12px;

    color: #8c99aa;

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

    letter-spacing: .12em;
}

.connect-message {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 11px 13px;

    margin-top: 8px;

    border: 1px solid rgba(77, 208, 146, .16);
    border-radius: 10px;

    color: #b8c7d4;

    background: rgba(36, 130, 88, .08);

    font-size: 12px;
    line-height: 1.6;
}

.connect-message-icon {
    width: 22px;
    height: 22px;

    flex: 0 0 22px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: rgba(58, 191, 118, .14);

    color: #62d99d;

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


/* Main card */

.discord-connect-card {
    position: relative;

    width: 100%;

    padding: 48px 46px;

    text-align: center;

    border: 1px solid rgba(209, 173, 104, .2);
    border-radius: 24px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(88, 101, 242, .09),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            rgba(12, 21, 36, .98),
            rgba(7, 13, 23, .98)
        );

    box-shadow:
        0 20px 80px rgba(0, 0, 0, .22);
}

.discord-connect-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 12%;
    right: 12%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(209, 173, 104, .7),
            transparent
        );
}


/* Discord icon */

.discord-connect-icon {
    width: 76px;
    height: 76px;

    margin: 0 auto 22px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(88, 101, 242, .45);
    border-radius: 20px;

    color: #9da6ff;

    background:
        rgba(88, 101, 242, .08);

    box-shadow:
        0 0 40px rgba(88, 101, 242, .08);
}

.discord-connect-icon svg {
    width: 39px;
    height: 39px;
}


/* Text */

.discord-connect-eyebrow {
    margin-bottom: 10px;

    color: #d1ad68;

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

    letter-spacing: .18em;
}

.discord-connect-card h1 {
    margin: 0;

    color: #f4f6f8;

    font-size: clamp(30px, 5vw, 45px);
    font-weight: 650;

    letter-spacing: -.03em;
}

.discord-connect-description {
    max-width: 500px;

    margin:
        18px
        auto
        0;

    color: #8795a7;

    font-size: 14px;
    line-height: 1.8;
}


/* Security note */

.discord-connect-security {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 9px;

    max-width: 500px;

    margin: 25px auto 0;

    padding: 11px 14px;

    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 11px;

    color: #667486;

    background: rgba(255, 255, 255, .018);

    font-size: 10px;
    line-height: 1.6;
}

.security-dot {
    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background: #55d397;

    box-shadow:
        0 0 8px rgba(85, 211, 151, .5);
}


/* Buttons */

.discord-connect-form {
    margin-top: 30px;
}

.discord-connect-primary {
    width: 100%;
    min-height: 58px;

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

    gap: 18px;

    padding: 0 24px;

    border: 1px solid #e1bd72;
    border-radius: 13px;

    cursor: pointer;

    color: #11151b;

    background:
        linear-gradient(
            180deg,
            #eacb83,
            #d6ad5d
        );

    font: inherit;

    font-size: 13px;
    font-weight: 750;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}

.discord-connect-primary:hover {
    transform: translateY(-1px);

    filter: brightness(1.04);

    box-shadow:
        0 10px 30px rgba(209, 173, 104, .13);
}

.connect-arrow {
    font-size: 20px;
    line-height: 1;
}


.discord-connect-back {
    width: 100%;
    min-height: 52px;

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

    gap: 11px;

    margin-top: 12px;

    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 13px;

    color: #a4afbd;

    background: rgba(255, 255, 255, .02);

    text-decoration: none;

    font-size: 11px;

    transition:
        border-color .2s ease,
        color .2s ease,
        background .2s ease;
}

.discord-connect-back:hover {
    color: #e6ebef;

    border-color:
        rgba(209, 173, 104, .22);

    background:
        rgba(209, 173, 104, .025);
}


/* RTL */

html[dir="rtl"] .connect-message {
    text-align: right;
}

html[dir="rtl"] .connect-arrow {
    transform: rotate(180deg);
}


/* Mobile */

@media (max-width: 600px) {

    .discord-connect-page {
        padding:
            34px
            14px
            80px;
    }

    .discord-connect-card {
        padding:
            36px
            20px;
    }

    .discord-connect-icon {
        width: 66px;
        height: 66px;
    }

    .discord-connect-icon svg {
        width: 34px;
        height: 34px;
    }

    .discord-connect-description {
        font-size: 13px;
    }

    .discord-connect-security {
        align-items: flex-start;

        text-align: start;
    }

}