/* Parent Hub login: visual parity with the student token portal while the
   six-digit parent verification flow remains unchanged. */
:root {
    --op-login-teal: #078f87;
    --op-login-cyan: #29b8ca;
    --op-login-violet: #6e4fe0;
    --op-login-ink: #14354b;
    --op-login-muted: #6f8798;
}

body:not(.betterchat-auth) {
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--op-login-ink);
    background:
        radial-gradient(circle at 8% 10%, rgba(42, 205, 196, .2), transparent 28%),
        radial-gradient(circle at 92% 88%, rgba(126, 93, 239, .17), transparent 30%),
        linear-gradient(135deg, #eaf7f7 0%, #f4f8ff 48%, #f8f4ff 100%);
    font-family: var(--app-font-sans, "Segoe UI", system-ui, sans-serif);
}

body:not(.betterchat-auth) button,
body:not(.betterchat-auth) input,
body:not(.betterchat-auth) a { font: inherit; }

body:not(.betterchat-auth) button:focus-visible,
body:not(.betterchat-auth) input:focus-visible,
body:not(.betterchat-auth) a:focus-visible {
    outline: 3px solid rgba(41, 184, 202, .32);
    outline-offset: 3px;
}

body:not(.betterchat-auth) .op-login-shell {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: clamp(18px, 3vw, 42px);
}

body:not(.betterchat-auth) .op-login-shell::before,
body:not(.betterchat-auth) .op-login-shell::after {
    content: "";
    position: fixed;
    z-index: -2;
    border-radius: 50%;
    pointer-events: none;
}

body:not(.betterchat-auth) .op-login-shell::before {
    width: 460px;
    height: 460px;
    top: -155px;
    left: -170px;
    background: radial-gradient(circle, rgba(31, 190, 190, .24), rgba(31, 190, 190, 0) 70%);
    animation: opParentAmbientLeft 14s ease-in-out infinite;
}

body:not(.betterchat-auth) .op-login-shell::after {
    width: 520px;
    height: 520px;
    right: -190px;
    bottom: -200px;
    background: radial-gradient(circle, rgba(111, 78, 224, .22), rgba(111, 78, 224, 0) 70%);
    animation: opParentAmbientRight 17s ease-in-out infinite;
}

body:not(.betterchat-auth) .op-login-card {
    position: relative;
    width: min(1120px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(390px, .94fr);
    overflow: hidden;
    border: 1px solid rgba(112, 155, 174, .24);
    border-radius: 34px;
    background: rgba(255, 255, 255, .9);
    box-shadow:
        0 34px 88px rgba(24, 72, 91, .19),
        0 8px 24px rgba(78, 115, 132, .09),
        inset 0 1px 0 #fff;
    backdrop-filter: blur(20px);
}

body:not(.betterchat-auth) .op-login-card::before {
    content: "";
    position: absolute;
    z-index: 5;
    inset: 0 12% auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, #52e4d5, #8b6df0, transparent);
    opacity: .8;
    pointer-events: none;
}

body:not(.betterchat-auth) .op-login-visual {
    position: relative;
    overflow: hidden;
    min-height: 650px;
    padding: clamp(40px, 5vw, 58px);
    color: #fff;
    background:
        radial-gradient(circle at 18% 12%, rgba(103, 255, 234, .19), transparent 28%),
        linear-gradient(145deg, #064f5d 0%, #078c85 48%, #25b5c7 100%);
}

body:not(.betterchat-auth) .op-login-visual::before {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    top: -96px;
    right: -118px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    box-shadow:
        0 0 0 52px rgba(255, 255, 255, .06),
        0 0 0 104px rgba(255, 255, 255, .035);
    transform-origin: center;
    animation: opParentPortalRing 6.8s cubic-bezier(.45, 0, .25, 1) infinite;
    pointer-events: none;
}

body:not(.betterchat-auth) .op-login-visual::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 45%;
    background: linear-gradient(0deg, rgba(1, 42, 52, .42), transparent);
    pointer-events: none;
}

.op-parent-login-brand {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
}

.op-parent-brand-logo {
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    display: grid;
    place-items: center;
}

.op-parent-brand-logo img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 12px 15px rgba(0, 38, 47, .3));
}

.op-parent-login-brand b,
.op-parent-login-brand span { display: block; }
.op-parent-login-brand b { font-size: 1.08rem; text-shadow: 0 2px 12px rgba(0, 45, 54, .22); }
.op-parent-login-brand div > span { margin-top: 5px; color: rgba(255, 255, 255, .72); font-size: .71rem; letter-spacing: .14em; text-transform: uppercase; }

.op-parent-visual-copy {
    position: relative;
    z-index: 1;
    max-width: 520px;
    margin-top: 68px;
}

.op-parent-login-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .11);
    box-shadow: inset 0 1px rgba(255, 255, 255, .12);
    backdrop-filter: blur(8px);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.op-parent-visual-copy h1 {
    max-width: 520px;
    margin: 20px 0 14px;
    font-size: clamp(1.9rem, 3.5vw, 2.7rem);
    line-height: 1.06;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.op-parent-access-line {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    color: #cafff7;
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .025em;
}

.op-parent-visual-copy p {
    max-width: 480px;
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: .96rem;
    line-height: 1.72;
}

.op-parent-login-steps {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
    margin-top: 44px;
}

.op-parent-login-steps > div {
    min-width: 0;
    padding: 15px;
    border: 1px solid rgba(126, 255, 226, .3);
    border-radius: 19px;
    background: linear-gradient(145deg, rgba(91, 240, 207, .2), rgba(255, 255, 255, .075));
    box-shadow: inset 0 1px rgba(218, 255, 247, .18), 0 10px 24px rgba(1, 72, 70, .08);
    backdrop-filter: blur(8px);
}

.op-parent-login-steps > div:nth-child(2) { border-color: rgba(211, 190, 255, .3); background: linear-gradient(145deg, rgba(176, 139, 244, .22), rgba(255, 255, 255, .075)); }
.op-parent-login-steps > div:nth-child(3) { border-color: rgba(255, 222, 150, .3); background: linear-gradient(145deg, rgba(255, 193, 106, .22), rgba(255, 255, 255, .075)); }
.op-parent-login-steps i { display: block; margin-bottom: 12px; color: #a8ffed; font-size: 1.1rem; }
.op-parent-login-steps > div:nth-child(2) i { color: #e2d2ff; }
.op-parent-login-steps > div:nth-child(3) i { color: #ffe3a8; }
.op-parent-login-steps b { display: block; font-size: .75rem; }
.op-parent-login-steps small { display: block; margin-top: 4px; color: rgba(255, 255, 255, .68); font-size: .62rem; line-height: 1.4; }

body:not(.betterchat-auth) .op-login-form {
    position: relative;
    min-width: 0;
    min-height: 650px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: clamp(40px, 5vw, 58px);
    background:
        radial-gradient(circle at 94% 7%, rgba(112, 78, 224, .1), transparent 30%),
        radial-gradient(circle at 4% 92%, rgba(41, 184, 202, .09), transparent 31%),
        rgba(255, 255, 255, .76);
}

body:not(.betterchat-auth) .op-login-form::before {
    content: "";
    position: absolute;
    inset: 8% auto 8% 0;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, transparent, #34d6ca 22%, #6d6fe8 76%, transparent);
    box-shadow: 0 0 24px rgba(61, 206, 207, .38);
    pointer-events: none;
}

.op-parent-form-title { display: flex; align-items: center; gap: 16px; margin-bottom: 9px; }
.op-parent-form-title > span { width: 58px; height: 58px; flex: 0 0 58px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .54); border-radius: 19px; color: #fff; background: linear-gradient(135deg, var(--op-login-violet), #a963e6); box-shadow: 0 15px 32px rgba(110, 79, 224, .25), inset 0 1px rgba(255, 255, 255, .35); font-size: 1.3rem; }
body:not(.betterchat-auth) .op-parent-form-title h2 { margin: 0; color: #15364b; font-size: 1.85rem; line-height: 1.12; letter-spacing: -.03em; }
.op-parent-form-lead { margin: 0 0 27px; color: var(--op-login-muted); font-size: .86rem; line-height: 1.6; }

body:not(.betterchat-auth) #ortuLoginForm { display: grid; }
.op-parent-field-label { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; color: #3b596c; font-size: .75rem; font-weight: 850; }
.op-parent-field-label span { color: #889ba8; font-weight: 650; }
.op-parent-token-wrap { position: relative; }
.op-parent-token-icon { position: absolute; z-index: 1; top: 50%; left: 14px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; color: #6645d6; background: linear-gradient(145deg, #eee9ff, #f7f4ff); box-shadow: inset 0 0 0 1px rgba(102, 69, 214, .08); transform: translateY(-50%); }
body:not(.betterchat-auth) .op-parent-token-input { width: 100%; height: 62px; padding: 0 16px 0 62px; border: 1px solid #d6e5eb; border-radius: 18px; outline: 0; color: #3d2b83; background: rgba(249, 252, 253, .92); box-shadow: inset 0 1px #fff, 0 9px 22px rgba(55, 91, 108, .04); font: 850 1rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .09em; transition: .2s; }
body:not(.betterchat-auth) .op-parent-token-input:focus { border-color: rgba(111, 78, 224, .5); background: #fff; box-shadow: 0 0 0 4px rgba(111, 78, 224, .09), 0 15px 28px rgba(44, 83, 101, .08); }
.op-parent-token-help { display: flex; gap: 8px; margin: 10px 0 20px; color: #8093a1; font-size: .69rem; line-height: 1.45; }

body:not(.betterchat-auth) .op-access-callout {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 11px;
    margin: 0 0 18px;
    padding: 11px;
    border: 1px solid rgba(32, 161, 163, .2);
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(232, 250, 248, .95), rgba(247, 246, 255, .94));
    box-shadow: inset 0 1px #fff, 0 10px 22px rgba(28, 111, 122, .06);
}

.op-parent-claim-mark { width: 40px; height: 40px; display: grid !important; place-items: center; border-radius: 13px; color: #087d82 !important; background: #fff; box-shadow: 0 7px 14px rgba(20, 111, 122, .1); }
body:not(.betterchat-auth) .op-access-callout strong { color: #214459; font-size: .74rem; line-height: 1.25; }
body:not(.betterchat-auth) .op-access-callout div > span { margin-top: 3px; color: #708998; font-size: .63rem; line-height: 1.35; }
body:not(.betterchat-auth) .op-access-callout button { min-height: 35px; padding: 0 11px; border: 1px solid rgba(100, 70, 211, .16); border-radius: 11px; color: #5f43ce; background: #fff; box-shadow: 0 7px 15px rgba(93, 65, 190, .08); font-size: .66rem; font-weight: 850; transition: .2s; }
body:not(.betterchat-auth) .op-access-callout button:hover { color: #fff; border-color: #6c4edd; background: linear-gradient(135deg, #6e4fe0, #a35fe3); box-shadow: 0 10px 20px rgba(92, 63, 195, .2); transform: translateY(-1px); }

body:not(.betterchat-auth) .op-btn {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 54px;
    border-radius: 17px;
    background: linear-gradient(135deg, #078f87, #29b7c9);
    box-shadow: 0 16px 30px rgba(8, 147, 143, .24);
    font-size: .86rem;
    font-weight: 850;
    transition: .2s;
}

body:not(.betterchat-auth) .op-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .24), transparent 72%); transform: translateX(-115%); transition: transform .55s; }
body:not(.betterchat-auth) .op-btn:hover { box-shadow: 0 20px 35px rgba(8, 147, 143, .29); transform: translateY(-2px); }
body:not(.betterchat-auth) .op-btn:hover::after { transform: translateX(115%); }
body:not(.betterchat-auth) .op-btn:disabled { cursor: wait; opacity: .78; transform: none; }

.op-parent-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 20px; border-top: 1px solid #e5eef1; }
.op-parent-footer-links { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; }
.op-parent-footer-links a,
.op-parent-footer-links button { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; color: #5f7789; background: transparent; font-size: .72rem; font-weight: 800; text-decoration: none; cursor: pointer; transition: color .2s; }
.op-parent-footer-links button { color: #7150d9; }
.op-parent-footer-links a:hover,
.op-parent-footer-links button:hover { color: #087d82; }
.op-parent-mode-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid rgba(102, 65, 206, .08); border-radius: 999px; color: #6241ce; background: #eee9ff; font-size: .65rem; font-weight: 850; white-space: nowrap; }

@keyframes opParentAmbientLeft { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(34px, 24px, 0) scale(1.07); } }
@keyframes opParentAmbientRight { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-38px, -26px, 0) scale(1.06); } }
@keyframes opParentPortalRing { 0%, 100% { opacity: .78; transform: scale(.98); } 50% { opacity: 1; transform: scale(1.045); } }

@media (max-width: 850px) {
    body:not(.betterchat-auth) .op-login-shell { padding: 0; place-items: start center; }
    body:not(.betterchat-auth) .op-login-card { width: 100%; grid-template-columns: 1fr; border: 0; border-radius: 0; }
    body:not(.betterchat-auth) .op-login-visual { min-height: auto; padding: 28px; }
    .op-parent-visual-copy { margin-top: 38px; }
    .op-parent-login-steps { margin-top: 30px; }
    body:not(.betterchat-auth) .op-login-form { min-height: auto; padding: 34px 28px 42px; }
    body:not(.betterchat-auth) .op-login-form::before { inset: 0 8% auto; width: auto; height: 2px; background: linear-gradient(90deg, transparent, #34d6ca, #6d6fe8, transparent); }
}

@media (max-width: 520px) {
    body:not(.betterchat-auth) .op-login-visual { padding: 22px 18px 26px; }
    .op-parent-brand-logo { width: 54px; height: 54px; flex-basis: 54px; }
    .op-parent-brand-logo img { width: 50px; height: 50px; }
    .op-parent-login-brand { gap: 12px; }
    .op-parent-login-brand b { font-size: .9rem; }
    .op-parent-login-brand div > span { font-size: .62rem; }
    .op-parent-visual-copy { margin-top: 30px; }
    .op-parent-login-kicker { padding: 8px 11px; font-size: .65rem; }
    .op-parent-visual-copy h1 { font-size: 1.8rem; }
    .op-parent-visual-copy p { font-size: .83rem; line-height: 1.6; }
    .op-parent-login-steps { grid-template-columns: 1fr; gap: 8px; }
    .op-parent-login-steps > div { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; padding: 10px 12px; }
    .op-parent-login-steps i { grid-row: 1/3; margin: 1px 0; }
    body:not(.betterchat-auth) .op-login-form { padding: 30px 18px 38px; }
    .op-parent-form-title { gap: 12px; }
    .op-parent-form-title > span { width: 50px; height: 50px; flex-basis: 50px; border-radius: 16px; }
    body:not(.betterchat-auth) .op-parent-form-title h2 { font-size: 1.55rem; }
    .op-parent-form-lead { margin-bottom: 22px; font-size: .79rem; }
    .op-parent-field-label { flex-direction: column; gap: 3px; }
    body:not(.betterchat-auth) .op-parent-token-input { height: 58px; padding-left: 58px; font-size: .86rem; letter-spacing: .05em; }
    .op-parent-token-icon { left: 12px; width: 36px; height: 36px; }
    body:not(.betterchat-auth) .op-access-callout { grid-template-columns: 37px minmax(0, 1fr); gap: 10px; padding: 10px; }
    .op-parent-claim-mark { width: 37px; height: 37px; border-radius: 12px; }
    body:not(.betterchat-auth) .op-access-callout button { grid-column: 2; width: 100%; min-height: 36px; }
    .op-parent-form-footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 380px) {
    body:not(.betterchat-auth) .op-login-visual { padding: 20px 16px 23px; }
    body:not(.betterchat-auth) .op-login-form { padding: 28px 16px 31px; }
    .op-parent-visual-copy h1 { font-size: 1.62rem; }
    .op-parent-login-steps { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.betterchat-auth) *,
    body:not(.betterchat-auth) *::before,
    body:not(.betterchat-auth) *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}