:root {
    --pa-primary: #08b99b;
    --pa-primary-dark: #087f6d;
    --pa-primary-soft: #e2f7f0;
    --pa-bg: #eef8f4;
    --pa-surface: #ffffff;
    --pa-ink: #173247;
    --pa-muted: #71838f;
    --pa-border: #dcebe6;
    --pa-danger: #b42318;
    --pa-shadow: 0 24px 70px rgba(34, 83, 73, .11);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body.patient-auth-page {
    margin: 0;
    color: var(--pa-ink);
    font-family: IRANSans, Tahoma, Arial, sans-serif;
    background:
        radial-gradient(circle at 8% 5%, rgba(94, 224, 199, .24), transparent 26%),
        radial-gradient(circle at 92% 85%, rgba(8, 185, 155, .12), transparent 30%),
        var(--pa-bg);
}
button, input { font: inherit; }
a { color: inherit; }

.patient-auth-shell {
    width: min(1180px, calc(100% - 28px));
    min-height: calc(100vh - 28px);
    margin: 14px auto;
    display: grid;
    border: 1px solid rgba(205, 231, 223, .9);
    border-radius: 30px;
    overflow: hidden;
    background: rgba(255,255,255,.9);
    box-shadow: var(--pa-shadow);
}

.patient-auth-brand-panel { display: none; }
.patient-auth-form-panel {
    min-width: 0;
    padding: 22px 18px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.patient-auth-mobile-brand,
.patient-auth-brand {
    display: flex;
    align-items: center;
    gap: 11px;
}
.patient-auth-mobile-brand { margin: 0 auto 28px; }
.patient-auth-mobile-brand strong,
.patient-auth-mobile-brand small,
.patient-auth-brand strong,
.patient-auth-brand small { display: block; }
.patient-auth-mobile-brand strong,
.patient-auth-brand strong { font-size: 17px; font-weight: 900; }
.patient-auth-mobile-brand small,
.patient-auth-brand small { margin-top: 2px; color: var(--pa-muted); font-size: 10px; }
.patient-auth-brand__mark {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    border-radius: 15px;
    color: #fff;
    font-weight: 950;
    font-size: 18px;
    background: linear-gradient(145deg, #5ee0c7, #09b993);
    box-shadow: 0 12px 27px rgba(7,160,130,.2);
}

.patient-auth-card { width: min(440px, 100%); margin: 0 auto; }
.patient-auth-head { margin-bottom: 24px; text-align: right; }
.patient-auth-head--verify { text-align: center; }
.patient-auth-kicker {
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--pa-primary-soft);
    color: var(--pa-primary-dark);
    font-size: 11px;
    font-weight: 900;
}
.patient-auth-head h1 { margin: 12px 0 7px; font-size: 29px; line-height: 1.5; }
.patient-auth-head p { margin: 0; color: var(--pa-muted); font-size: 12.5px; line-height: 2; }
.patient-auth-head p strong { color: var(--pa-ink); }
.patient-auth-verify-icon {
    width: 66px;
    height: 66px;
    margin: 18px auto 6px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    color: var(--pa-primary-dark);
    background: linear-gradient(145deg, #effbf7, #ddf7ee);
    border: 1px solid #d2eee5;
}
.patient-auth-verify-icon svg { width: 34px; height: 34px; }

.patient-auth-form { display: grid; gap: 16px; }
.patient-auth-field label { display: block; margin-bottom: 8px; color: #405966; font-size: 12px; font-weight: 800; }
.patient-auth-field > small { display: block; margin-top: 7px; color: #93a1a7; font-size: 9.5px; line-height: 1.7; }
.patient-auth-input {
    min-height: 58px;
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) 48px;
    align-items: center;
    border: 1px solid var(--pa-border);
    border-radius: 17px;
    background: #fff;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.patient-auth-input:focus-within { border-color: #89dcca; box-shadow: 0 0 0 4px rgba(8,185,155,.07); }
.patient-auth-input__icon { display: grid; place-items: center; color: #77928f; }
.patient-auth-input__icon svg { width: 22px; height: 22px; }
.patient-auth-input input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--pa-ink);
    text-align: left;
    font-size: 16px;
    letter-spacing: .5px;
}
.patient-auth-input input::placeholder { color: #a8b5b8; }
.patient-auth-input__country { color: #8a9b9f; font-size: 11px; text-align: center; border-right: 1px solid #eef3f1; }

.patient-auth-primary {
    width: 100%;
    min-height: 56px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 17px;
    color: #fff;
    background: linear-gradient(90deg, #08a98e, #0bc2a1);
    box-shadow: 0 12px 26px rgba(8,169,142,.2);
    cursor: pointer;
    font-weight: 900;
    transition: transform .16s ease, opacity .16s ease;
}
.patient-auth-primary:hover { transform: translateY(-1px); }
.patient-auth-primary:disabled { opacity: .72; cursor: wait; transform: none; }
.patient-auth-arrow { font-size: 19px; }
.patient-auth-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,.42);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pa-spin .75s linear infinite;
}
.patient-auth-primary.is-loading .patient-auth-spinner { display: block; }
.patient-auth-primary.is-loading .patient-auth-arrow { display: none; }
@keyframes pa-spin { to { transform: rotate(360deg); } }

.patient-auth-terms { margin: -2px 0 0; text-align: center; color: #98a6aa; font-size: 9.5px; line-height: 1.8; }
.patient-auth-separator { margin: 24px 0 14px; display: flex; align-items: center; gap: 10px; color: #a0adaf; font-size: 9.5px; }
.patient-auth-separator::before,
.patient-auth-separator::after { content: ''; flex: 1; height: 1px; background: #e7efec; }
.patient-auth-secondary {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid var(--pa-border);
    border-radius: 15px;
    background: #fff;
    color: #58707b;
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
}
.patient-auth-alert { margin-bottom: 15px; padding: 12px 14px; border-radius: 14px; font-size: 11px; line-height: 1.9; }
.patient-auth-alert--success { background: #e7f8f2; border: 1px solid #c9eadf; color: #08705f; }
.patient-auth-alert--error { background: #fff2f0; border: 1px solid #f2d0cb; color: var(--pa-danger); }
.patient-auth-alert--dev { background: #fff9e8; border: 1px solid #f0e0a9; color: #785d00; text-align: center; }

.patient-auth-field--otp { text-align: center; }
.patient-auth-otp {
    width: 100%;
    height: 66px;
    padding: 0 18px;
    border: 1px solid var(--pa-border);
    border-radius: 18px;
    outline: 0;
    background: #fff;
    color: var(--pa-ink);
    text-align: center;
    direction: ltr;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 11px;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.patient-auth-otp:focus { border-color: #89dcca; box-shadow: 0 0 0 4px rgba(8,185,155,.07); }
.patient-auth-actions { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.patient-auth-actions a,
.patient-auth-actions button {
    border: 0;
    background: transparent;
    padding: 5px 0;
    color: var(--pa-primary-dark);
    text-decoration: none;
    cursor: pointer;
    font-size: 10.5px;
    font-weight: 800;
}
.patient-auth-actions button:disabled { opacity: .55; cursor: wait; }
.patient-auth-footer { margin: 28px 0 0; text-align: center; color: #a2afb1; font-size: 9.5px; }

@media (min-width: 760px) {
    .patient-auth-shell { min-height: min(760px, calc(100vh - 48px)); margin: 24px auto; grid-template-columns: minmax(320px, .9fr) minmax(430px, 1.1fr); }
    .patient-auth-brand-panel {
        display: flex;
        flex-direction: column;
        padding: 44px;
        position: relative;
        overflow: hidden;
        color: #153d42;
        background:
            radial-gradient(circle at 10% 15%, rgba(255,255,255,.75), transparent 26%),
            linear-gradient(150deg, #ddf7ee 0%, #bcebdd 55%, #96dfcd 100%);
    }
    .patient-auth-brand-copy { margin: auto 0; max-width: 360px; position: relative; z-index: 2; }
    .patient-auth-brand-copy h2 { margin: 13px 0 10px; font-size: 31px; line-height: 1.7; }
    .patient-auth-brand-copy p { margin: 0; color: rgba(21,61,66,.67); font-size: 12px; line-height: 2.1; }
    .patient-auth-brand-art span { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.14); }
    .patient-auth-brand-art span:nth-child(1) { width: 240px; height: 240px; left: -80px; bottom: -70px; }
    .patient-auth-brand-art span:nth-child(2) { width: 150px; height: 150px; left: 90px; bottom: 40px; }
    .patient-auth-brand-art span:nth-child(3) { width: 80px; height: 80px; right: 50px; top: 120px; }
    .patient-auth-form-panel { padding: 46px 50px 28px; }
    .patient-auth-mobile-brand { display: none; }
    .patient-auth-head h1 { font-size: 33px; }
}

@media (min-width: 1100px) {
    .patient-auth-shell { grid-template-columns: 44% 56%; }
    .patient-auth-brand-panel { padding: 54px; }
    .patient-auth-form-panel { padding: 54px 70px 30px; }
}