/* Clinic sign-in: quiet editorial luxury, scoped away from clinical workflows. */
body.clinic-login-page {
    --login-ink: #2c2028;
    --login-muted: #53454b;
    --login-plum: #4a2137;
    --login-accent: #812547;
    --login-gold: #e3c599;
    min-height: 100vh;
    margin: 0;
    padding: clamp(12px, 2.4vw, 42px);
    background: #f0eae8;
    color: var(--login-ink);
}

.clinic-login-page .clinic-login {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr);
    align-items: stretch;
    gap: 0;
    width: min(100%, 1660px);
    max-width: none;
    min-height: max(760px, calc(100vh - clamp(24px, 4.8vw, 84px)));
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid #dfd4d6;
    border-radius: 24px;
    background: #faf7f2;
    box-shadow: 0 24px 70px rgba(52, 29, 43, .09);
}

.clinic-login-page .clinic-login-intro {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    padding: clamp(36px, 5vw, 78px);
    overflow: hidden;
    color: #fff;
    background: radial-gradient(circle at 12% 18%, rgba(182, 105, 130, .24), transparent 32%),
        linear-gradient(145deg, #53263f 0%, #3b2033 58%, #321d2f 100%);
}

.clinic-login-page .clinic-login-intro::before,
.clinic-login-page .clinic-login-intro::after {
    position: absolute;
    z-index: -1;
    content: "";
    width: min(78%, 570px);
    aspect-ratio: 1 / 1.25;
    border: 1px solid rgba(237, 198, 161, .12);
    border-radius: 50% 50% 44% 56%;
    pointer-events: none;
}
.clinic-login-page .clinic-login-intro::before {
    left: -21%; top: 16%;
    transform: rotate(-24deg);
    animation: clinic-petal-one 16s ease-in-out infinite alternate;
}
.clinic-login-page .clinic-login-intro::after {
    left: -16%; top: 22%;
    transform: rotate(22deg);
    animation: clinic-petal-two 19s ease-in-out infinite alternate;
}

.clinic-login-lotus {
    position: absolute;
    z-index: 0;
    left: 12%;
    bottom: 43%;
    width: 250px;
    pointer-events: none;
    opacity: .94;
    filter: drop-shadow(0 22px 26px rgba(22, 8, 24, .22));
}
.clinic-login-lotus svg {
    display: block;
    width: 100%;
    height: auto;
    animation: clinic-lotus-drift 8s ease-in-out 2.6s infinite alternate;
}
.clinic-login-lotus__petal {
    transform-origin: 320px 334px;
    opacity: 0;
    mix-blend-mode: screen;
    animation: clinic-lotus-open 1.8s cubic-bezier(.18, .72, .16, 1) var(--lotus-delay) both;
}
.lotus-center { --lotus-start: 0deg; --lotus-delay: .05s; }
.lotus-inner-left { --lotus-start: 12deg; --lotus-delay: .15s; }
.lotus-inner-right { --lotus-start: -12deg; --lotus-delay: .15s; }
.lotus-middle-left { --lotus-start: 24deg; --lotus-delay: .3s; }
.lotus-middle-right { --lotus-start: -24deg; --lotus-delay: .3s; }
.lotus-outer-left { --lotus-start: 34deg; --lotus-delay: .45s; }
.lotus-outer-right { --lotus-start: -34deg; --lotus-delay: .45s; }
.clinic-login-lotus__shadow,
.clinic-login-lotus__ripple { animation: clinic-lotus-water 1.4s ease-out 1.1s both; }

.clinic-login-intro__top,
.clinic-login-intro__bottom,
.clinic-login-intro__body { position: relative; z-index: 1; }
.clinic-login-intro__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.clinic-login-brand { display: inline-flex; align-items: center; gap: 12px; direction: ltr; color: #fff; font-size: 30px; font-weight: 750; letter-spacing: .06em; }
.clinic-login-brand__symbol { width: 38px; height: 38px; color: var(--login-gold); flex: none; }
.clinic-login-brand__symbol path {
    transform-origin: center;
    animation: clinic-bloom-open 1.2s cubic-bezier(.22, 1, .36, 1) both;
}
.clinic-login-brand__symbol circle { animation: clinic-bloom-center 1s ease-out .35s both; }
.clinic-login-intro__edition { color: #f5e9ed; font-size: 13px; font-weight: 600; }
.clinic-login-intro__body { max-width: 610px; margin: 32px 0; }
.clinic-login-page .clinic-login-eyebrow { display: flex; align-items: center; gap: 13px; margin: 0 0 25px; color: #f4d8b5; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.clinic-login-eyebrow::before { content: ""; width: 30px; height: 1px; background: currentColor; }
.clinic-login-page .clinic-login-intro h1 { margin: 0 0 28px; color: #fff; font-size: clamp(38px, 3.25vw, 60px); font-weight: 800; line-height: 1.65; letter-spacing: -.035em; }
.clinic-login-page .clinic-login-intro h1 span { color: #f3d9b9; }
.clinic-login-page .clinic-login-intro__lead { max-width: 490px; margin: 0; color: #f4e9ef; font-size: 17px; line-height: 2.1; }
.clinic-login-intro__rule { display: block; width: 100%; height: 1px; margin-bottom: 23px; background: rgba(247, 230, 236, .48); }
.clinic-login-page .clinic-login-intro__bottom p { margin: 0; color: #f4e9ef; font-size: 13px; font-weight: 600; }
.clinic-login-intro__bottom p span { margin: 0 10px; color: var(--login-gold); }

.clinic-login-page .clinic-login-form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    min-width: 0;
    padding: clamp(36px, 4.5vw, 76px);
    border: 0;
    border-radius: 0;
    background: #faf7f2;
    color: var(--login-ink);
}
.clinic-login-form__top { display: flex; justify-content: space-between; align-items: center; direction: ltr; color: var(--login-muted); font-size: 12px; font-weight: 750; letter-spacing: .14em; }
.clinic-login-form__ornament { width: 32px; height: 1px; background: #8b4962; }
.clinic-login-form__inner { width: 100%; max-width: 460px; margin: auto; }
.clinic-login-form__eyebrow { margin: 0 0 12px; color: var(--login-accent); font-size: 14px; font-weight: 700; }
.clinic-login-page .clinic-login-form h2 { margin: 0 0 14px; color: var(--login-ink); font-size: clamp(27px, 2vw, 35px); font-weight: 800; line-height: 1.45; }
.clinic-login-form__lead { margin: 0 0 34px; color: var(--login-muted); font-size: 15px; line-height: 1.95; }
.clinic-login-field { margin-bottom: 22px; }
.clinic-login-page .clinic-login-field label { display: block; margin: 0 0 9px; color: var(--login-ink); font-size: 14px; font-weight: 700; }
.clinic-login-page .clinic-login-field .form-control {
    box-sizing: border-box; width: 100%; height: 54px; min-height: 54px; padding: 0 17px;
    border: 1px solid #76646e; border-radius: 9px; background: #fff;
    color: var(--login-ink); font-size: 17px; text-align: left;
    transition: border-color .18s, box-shadow .18s;
}
.clinic-login-page .clinic-login-field .form-control:hover { border-color: #542840; }
.clinic-login-page .clinic-login-field .form-control:focus { border-color: var(--login-accent); box-shadow: 0 0 0 3px rgba(129, 37, 71, .17); }
.clinic-login-page .clinic-login-field .form-control:focus-visible,
.clinic-login-page .clinic-login-submit:focus-visible { outline: 3px solid var(--login-accent); outline-offset: 3px; }
.clinic-login-code { margin: 4px 0 22px; }
.clinic-login-code__hint { margin: -5px 0 0; color: var(--login-muted); font-size: 13px; line-height: 1.8; }
.clinic-login-code__hint strong { color: var(--login-accent); font-size: 15px; }
.clinic-login-page .clinic-login-form .clinic-status { margin: 16px 0; padding: 13px 16px; border-radius: 9px; background: #fff; color: var(--login-ink); font-size: 14px; }
.clinic-login-page .clinic-login-form .clinic-status[data-state="error"] { color: #8d2027; background: #fff1f0; border-color: #ca9da0; }
.clinic-login-page .clinic-login-submit {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; min-height: 56px; margin: 30px 0 0; padding: 12px 21px;
    border: 1px solid var(--login-accent); border-radius: 9px;
    background: var(--login-accent) !important; color: #fff !important;
    font-size: 15px; font-weight: 750; box-shadow: none;
    transition: background-color .18s, transform .18s;
}
.clinic-login-page .clinic-login-submit span { font-size: 22px; line-height: 1; }
.clinic-login-page .clinic-login-submit:hover { background: #671d37 !important; transform: translateY(-1px); }
.clinic-login-page .clinic-login-submit:disabled { cursor: wait; opacity: .72; transform: none; }
.clinic-login-page .clinic-login-form__footer { margin: 0; color: var(--login-muted); font-size: 12px; text-align: center; }

@keyframes clinic-petal-one {
    to { transform: translate(22px, -16px) rotate(-17deg) scale(1.035); }
}
@keyframes clinic-petal-two {
    to { transform: translate(-16px, 18px) rotate(15deg) scale(.97); }
}
@keyframes clinic-bloom-open {
    from { opacity: .75; transform: rotate(-9deg) scale(.82); }
    to { opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes clinic-bloom-center {
    from { opacity: 0; transform: scale(.35); transform-origin: center; }
    to { opacity: 1; transform: scale(1); transform-origin: center; }
}
@keyframes clinic-lotus-open {
    from { opacity: 0; transform: rotate(var(--lotus-start)) scale(.65); }
    45% { opacity: 1; }
    to { opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes clinic-lotus-water {
    from { opacity: 0; transform: scaleX(.6); transform-origin: center; }
    to { opacity: 1; transform: scaleX(1); transform-origin: center; }
}
@keyframes clinic-lotus-drift {
    to { transform: translateY(-5px); }
}

@media (max-width: 900px) {
    .clinic-login-page .clinic-login { grid-template-columns: 1fr; min-height: 0; max-width: 680px; }
    .clinic-login-page .clinic-login-intro { min-height: 340px; padding: 34px; }
    .clinic-login-lotus { left: 20px; bottom: 70px; width: 150px; opacity: .52; }
    .clinic-login-page .clinic-login-intro h1 { font-size: 34px; line-height: 1.5; }
    .clinic-login-page .clinic-login-intro__lead { font-size: 14px; }
    .clinic-login-page .clinic-login-form { min-height: 550px; padding: 34px; }
}
@media (max-width: 600px) {
    body.clinic-login-page { padding: 0; background: #faf7f2; }
    .clinic-login-page .clinic-login { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
    .clinic-login-page .clinic-login-intro { min-height: 278px; padding: 27px 24px; }
    .clinic-login-lotus { left: 20px; bottom: 76px; width: 112px; opacity: .58; }
    .clinic-login-brand { font-size: 23px; }
    .clinic-login-brand__symbol { width: 31px; height: 31px; }
    .clinic-login-intro__edition { font-size: 11px; }
    .clinic-login-page .clinic-login-intro h1 { margin-bottom: 8px; font-size: 28px; }
    .clinic-login-eyebrow { margin-bottom: 8px; font-size: 12px; }
    .clinic-login-intro__body { margin: 22px 0; }
    .clinic-login-intro__lead { display: none; }
    .clinic-login-intro__rule { margin-bottom: 13px; }
    .clinic-login-intro__bottom p { font-size: 11px; }
    .clinic-login-page .clinic-login-form { min-height: 530px; gap: 25px; padding: 30px 24px 26px; }
    .clinic-login-form__lead { margin-bottom: 26px; }
}
@media (max-width: 360px) {
    .clinic-login-lotus { left: 10px; bottom: 80px; width: 80px; opacity: .62; }
}
@media (prefers-reduced-motion: reduce) {
    .clinic-login-page .clinic-login-intro::before,
    .clinic-login-page .clinic-login-intro::after,
    .clinic-login-brand__symbol path,
    .clinic-login-brand__symbol circle { animation: none; }
    .clinic-login-lotus svg,
    .clinic-login-lotus__shadow,
    .clinic-login-lotus__ripple,
    .clinic-login-lotus__petal { animation: none; }
    .clinic-login-lotus__petal { opacity: 1; transform: none; }
    .clinic-login-page .clinic-login-submit,
    .clinic-login-page .clinic-login-field .form-control { transition: none; }
}