:root {
    --page: #F4F0EB;
    --page-alt: #EDE9E3;
    --white: #FFFFFF;
    --surface: #FAF8F5;
    --surface-2: #F2EFE9;
    --ink: #0A0908;
    --ink-2: rgba(10,9,8,.60);
    --ink-3: rgba(10,9,8,.38);
    --ink-4: rgba(10,9,8,.18);
    --accent: #C8390A;
    --accent-hi: #E04010;
    --accent-dim: rgba(200,57,10,.10);
    --accent-glow: rgba(200,57,10,.18);
    --panel-bg: #0A0908;
    --panel-ink: #F5F1EC;
    --panel-ink2: rgba(245,241,236,.58);
    --panel-ink3: rgba(245,241,236,.30);
    --panel-border: rgba(255,255,255,.08);
    --panel-row: rgba(255,255,255,.045);
    --panel-row-h: rgba(255,255,255,.07);
    --err: #C53030;
    --ok: #2E7D57;
    --border: rgba(10,9,8,.09);
    --border-mid: rgba(10,9,8,.14);
    --border-hi: rgba(10,9,8,.22);
    --serif: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
    --sans: 'Outfit', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --ease: cubic-bezier(0.16,1,0.3,1);
    --r: 6px;
}

/* codex-auth-font-stability */
.auth-exact-stage .p-brand-name,
.auth-exact-stage .mh-name,
.auth-exact-stage .p-headline-title,
.auth-exact-stage .title {
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

@media (max-width: 767px) and (max-height: 760px) {
    body[data-page="login"] .auth-exact-stage,
    body[data-page="register"] .auth-exact-stage,
    body[data-page="forgot-password"] .auth-exact-stage,
    body[data-page="reset-password"] .auth-exact-stage {
        padding: 10px 12px 0 !important;
    }

    body[data-page="login"] .form-panel,
    body[data-page="register"] .form-panel,
    body[data-page="forgot-password"] .form-panel,
    body[data-page="reset-password"] .form-panel {
        padding: 12px 16px calc(10px + env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain !important;
        justify-content: flex-start !important;
    }

    body[data-page="login"] .form-inner,
    body[data-page="login"] .form-inner-wide,
    body[data-page="register"] .form-inner,
    body[data-page="register"] .form-inner-wide,
    body[data-page="forgot-password"] .form-inner,
    body[data-page="forgot-password"] .form-inner-wide,
    body[data-page="reset-password"] .form-inner,
    body[data-page="reset-password"] .form-inner-wide {
        min-height: 0 !important;
        display: block !important;
    }

    body[data-page="login"] .back-btn,
    body[data-page="register"] .back-btn,
    body[data-page="forgot-password"] .back-btn,
    body[data-page="reset-password"] .back-btn {
        margin-bottom: 8px !important;
    }

    body[data-page="login"] .kicker,
    body[data-page="register"] .kicker,
    body[data-page="forgot-password"] .kicker,
    body[data-page="reset-password"] .kicker {
        margin-bottom: 4px !important;
        font-size: 8.5px !important;
    }

    body[data-page="login"] .title,
    body[data-page="register"] .title,
    body[data-page="forgot-password"] .title,
    body[data-page="reset-password"] .title {
        font-size: clamp(19px, 5.6vw, 24px) !important;
        line-height: 1.02 !important;
        margin-bottom: 2px !important;
    }

    body[data-page="login"] .sub,
    body[data-page="register"] .sub,
    body[data-page="forgot-password"] .sub,
    body[data-page="reset-password"] .sub {
        font-size: 10.75px !important;
        line-height: 1.42 !important;
        margin-bottom: 8px !important;
    }

    body[data-page="login"] .btn-social,
    body[data-page="register"] .btn-social,
    body[data-page="forgot-password"] .btn-social,
    body[data-page="reset-password"] .btn-social {
        min-height: 48px !important;
        padding: 10px 14px !important;
        font-size: 13px !important;
    }

    body[data-page="login"] .btn-google,
    body[data-page="register"] .btn-google,
    body[data-page="forgot-password"] .btn-google,
    body[data-page="reset-password"] .btn-google {
        margin-bottom: 4px !important;
    }

    body[data-page="login"] .btn-google > svg,
    body[data-page="register"] .btn-google > svg,
    body[data-page="forgot-password"] .btn-google > svg,
    body[data-page="reset-password"] .btn-google > svg {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        padding: 4px !important;
    }

    body[data-page="login"] .divider,
    body[data-page="register"] .divider,
    body[data-page="forgot-password"] .divider,
    body[data-page="reset-password"] .divider {
        margin: 8px 0 !important;
    }

    body[data-page="login"] .divider-text,
    body[data-page="register"] .divider-text,
    body[data-page="forgot-password"] .divider-text,
    body[data-page="reset-password"] .divider-text {
        font-size: 10px !important;
    }

    body[data-page="login"] .form-table,
    body[data-page="register"] .form-table,
    body[data-page="forgot-password"] .form-table,
    body[data-page="reset-password"] .form-table {
        margin-bottom: 8px !important;
    }

    body[data-page="login"] .form-row,
    body[data-page="register"] .form-row,
    body[data-page="forgot-password"] .form-row,
    body[data-page="reset-password"] .form-row {
        grid-template-columns: 80px 1fr !important;
    }

    body[data-page="login"] .row-label,
    body[data-page="register"] .row-label,
    body[data-page="forgot-password"] .row-label,
    body[data-page="reset-password"] .row-label {
        padding: 0 10px !important;
        font-size: 10px !important;
    }

    body[data-page="login"] .row-input,
    body[data-page="register"] .row-input,
    body[data-page="forgot-password"] .row-input,
    body[data-page="reset-password"] .row-input {
        padding: 9px 10px !important;
        font-size: 13px !important;
    }

    body[data-page="login"] .check-row,
    body[data-page="register"] .check-row,
    body[data-page="forgot-password"] .check-row,
    body[data-page="reset-password"] .check-row {
        margin-bottom: 10px !important;
    }

    body[data-page="login"] .btn,
    body[data-page="register"] .btn,
    body[data-page="forgot-password"] .btn,
    body[data-page="reset-password"] .btn {
        padding: 10px 16px !important;
        font-size: 13px !important;
    }

    body[data-page="login"] .form-foot,
    body[data-page="register"] .form-foot,
    body[data-page="forgot-password"] .form-foot,
    body[data-page="reset-password"] .form-foot {
        margin-top: 6px !important;
        font-size: 11.5px !important;
    }

    body[data-page="login"] .contact-bar,
    body[data-page="register"] .contact-bar,
    body[data-page="forgot-password"] .contact-bar,
    body[data-page="reset-password"] .contact-bar {
        margin-top: 6px !important;
        padding-top: 6px !important;
        font-size: 10px !important;
    }
}

@media (max-width: 767px) {
    body[data-page="login"] .btn-google,
    body[data-page="register"] .btn-google {
        min-height: 52px;
        padding: 10px 16px;
        font-size: clamp(14px, 3.9vw, 15.5px);
        letter-spacing: 0;
    }

    body[data-page="login"] .btn-google > span,
    body[data-page="register"] .btn-google > span {
        padding: 0 42px;
    }

    body[data-page="login"] .btn-google > svg,
    body[data-page="register"] .btn-google > svg {
        left: 16px;
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
        padding: 5px;
    }
}

@media (max-width: 389px) {
    body[data-page="login"] .btn-google,
    body[data-page="register"] .btn-google {
        min-height: 50px;
        font-size: 14px;
    }

    body[data-page="login"] .btn-google > span,
    body[data-page="register"] .btn-google > span {
        padding: 0 38px;
    }
}

@media (max-width: 767px) and (max-height: 760px) {
    body[data-page="login"] .auth-exact-stage,
    body[data-page="register"] .auth-exact-stage,
    body[data-page="forgot-password"] .auth-exact-stage,
    body[data-page="reset-password"] .auth-exact-stage {
        padding: 10px 12px 0 !important;
    }

    body[data-page="login"] .form-panel,
    body[data-page="register"] .form-panel,
    body[data-page="forgot-password"] .form-panel,
    body[data-page="reset-password"] .form-panel {
        padding: 12px 16px calc(10px + env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain !important;
        justify-content: flex-start !important;
    }

    body[data-page="login"] .form-inner,
    body[data-page="login"] .form-inner-wide,
    body[data-page="register"] .form-inner,
    body[data-page="register"] .form-inner-wide,
    body[data-page="forgot-password"] .form-inner,
    body[data-page="forgot-password"] .form-inner-wide,
    body[data-page="reset-password"] .form-inner,
    body[data-page="reset-password"] .form-inner-wide {
        min-height: 0 !important;
        display: block !important;
    }

    body[data-page="login"] .back-btn,
    body[data-page="register"] .back-btn,
    body[data-page="forgot-password"] .back-btn,
    body[data-page="reset-password"] .back-btn {
        margin-bottom: 8px !important;
    }

    body[data-page="login"] .kicker,
    body[data-page="register"] .kicker,
    body[data-page="forgot-password"] .kicker,
    body[data-page="reset-password"] .kicker {
        margin-bottom: 4px !important;
        font-size: 8.5px !important;
    }

    body[data-page="login"] .title,
    body[data-page="register"] .title,
    body[data-page="forgot-password"] .title,
    body[data-page="reset-password"] .title {
        font-size: clamp(19px, 5.6vw, 24px) !important;
        line-height: 1.02 !important;
        margin-bottom: 2px !important;
    }

    body[data-page="login"] .sub,
    body[data-page="register"] .sub,
    body[data-page="forgot-password"] .sub,
    body[data-page="reset-password"] .sub {
        font-size: 10.75px !important;
        line-height: 1.42 !important;
        margin-bottom: 8px !important;
    }

    body[data-page="login"] .btn-social,
    body[data-page="register"] .btn-social,
    body[data-page="forgot-password"] .btn-social,
    body[data-page="reset-password"] .btn-social {
        min-height: 48px !important;
        padding: 10px 14px !important;
        font-size: 13px !important;
    }

    body[data-page="login"] .btn-google,
    body[data-page="register"] .btn-google,
    body[data-page="forgot-password"] .btn-google,
    body[data-page="reset-password"] .btn-google {
        margin-bottom: 4px !important;
    }

    body[data-page="login"] .btn-google > svg,
    body[data-page="register"] .btn-google > svg,
    body[data-page="forgot-password"] .btn-google > svg,
    body[data-page="reset-password"] .btn-google > svg {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        padding: 4px !important;
    }

    body[data-page="login"] .divider,
    body[data-page="register"] .divider,
    body[data-page="forgot-password"] .divider,
    body[data-page="reset-password"] .divider {
        margin: 8px 0 !important;
    }

    body[data-page="login"] .divider-text,
    body[data-page="register"] .divider-text,
    body[data-page="forgot-password"] .divider-text,
    body[data-page="reset-password"] .divider-text {
        font-size: 10px !important;
    }

    body[data-page="login"] .form-table,
    body[data-page="register"] .form-table,
    body[data-page="forgot-password"] .form-table,
    body[data-page="reset-password"] .form-table {
        margin-bottom: 8px !important;
    }

    body[data-page="login"] .form-row,
    body[data-page="register"] .form-row,
    body[data-page="forgot-password"] .form-row,
    body[data-page="reset-password"] .form-row {
        grid-template-columns: 80px 1fr !important;
    }

    body[data-page="login"] .row-label,
    body[data-page="register"] .row-label,
    body[data-page="forgot-password"] .row-label,
    body[data-page="reset-password"] .row-label {
        padding: 0 10px !important;
        font-size: 10px !important;
    }

    body[data-page="login"] .row-input,
    body[data-page="register"] .row-input,
    body[data-page="forgot-password"] .row-input,
    body[data-page="reset-password"] .row-input {
        padding: 9px 10px !important;
        font-size: 13px !important;
    }

    body[data-page="login"] .check-row,
    body[data-page="register"] .check-row,
    body[data-page="forgot-password"] .check-row,
    body[data-page="reset-password"] .check-row {
        margin-bottom: 10px !important;
    }

    body[data-page="login"] .btn,
    body[data-page="register"] .btn,
    body[data-page="forgot-password"] .btn,
    body[data-page="reset-password"] .btn {
        padding: 10px 16px !important;
        font-size: 13px !important;
    }

    body[data-page="login"] .form-foot,
    body[data-page="register"] .form-foot,
    body[data-page="forgot-password"] .form-foot,
    body[data-page="reset-password"] .form-foot {
        margin-top: 6px !important;
        font-size: 11.5px !important;
    }

    body[data-page="login"] .contact-bar,
    body[data-page="register"] .contact-bar,
    body[data-page="forgot-password"] .contact-bar,
    body[data-page="reset-password"] .contact-bar {
        margin-top: 6px !important;
        padding-top: 6px !important;
        font-size: 10px !important;
    }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: clip;
}

.auth-exact-stage {
    font-family: var(--sans);
    background: var(--page);
    color: var(--ink);
    min-height: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 18px 16px 8px;
    width: 100%;
    max-width: 100%;
    overflow: visible;
}

body {
    font-family: var(--sans);
    overflow-x: clip;
}

@media (min-width: 768px) {
    body[data-page="login"] #bot-nav,
    body[data-page="register"] #bot-nav,
    body[data-page="forgot-password"] #bot-nav,
    body[data-page="reset-password"] #bot-nav {
        display: none;
    }

    body[data-page="login"] .auth-exact-stage,
    body[data-page="register"] .auth-exact-stage,
    body[data-page="forgot-password"] .auth-exact-stage,
    body[data-page="reset-password"] .auth-exact-stage {
        padding-top: 14px;
        padding-bottom: 14px;
    }
}

a { color: inherit; }

.shell {
    display: flex;
    width: 100%;
    max-width: 900px;
    max-width: min(900px, 100%);
    min-height: 520px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 2px 0 rgba(255,255,255,.9) inset, 0 24px 80px rgba(10,9,8,.15), 0 4px 16px rgba(10,9,8,.08), 0 0 0 1px var(--border);
    animation: shell-in .65s var(--ease) both;
}

@keyframes shell-in {
    from { opacity: 0; transform: translateY(22px) scale(.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.panel {
    flex: 0 0 340px;
    background: var(--panel-bg);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 32px 36px;
}

.panel::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .032;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 256px 256px;
    pointer-events: none;
}

.panel-glow,
.panel-glow-2,
.panel-grid { position: absolute; pointer-events: none; }

.panel-glow {
    top: -80px; right: -60px; width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(200,57,10,.18) 0%, transparent 65%);
    animation: glow-drift 10s ease-in-out infinite;
}

.panel-glow-2 {
    bottom: -40px; left: -40px; width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(200,57,10,.10) 0%, transparent 65%);
    animation: glow-drift 14s ease-in-out infinite reverse;
}

@keyframes glow-drift {
    0%,100% { transform: translate(0,0) scale(1); }
    50% { transform: translate(12px,18px) scale(1.06); }
}

.panel-grid {
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at 70% 30%, black 0%, transparent 75%);
}

.p-brand,
.p-headline,
.p-contact-card,
.p-footer { position: relative; z-index: 2; }

.p-brand {
    display: flex; align-items: center; gap: 11px; margin-bottom: 28px;
    animation: fade-up .5s var(--ease) .1s both;
}

.p-brand-copy,
.mh-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.p-brand-ring,
.mh-ring {
    display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0;
    background: #fff;
    border: 1px solid rgba(200,57,10,.34);
    box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 22px rgba(200,57,10,.22);
}

.p-brand-ring {
    width: 40px; height: 40px; border-radius: 11px;
}

.p-brand-ring svg,
.mh-ring svg,
.p-brand-ring img,
.mh-ring img {
    width: 16px; height: 18px; object-fit: contain;
}

.p-brand-ring img,
.mh-ring img {
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    max-width: 100%;
    max-height: 100%;
}

.p-brand-ring svg,
.mh-ring svg { fill: var(--accent); filter: drop-shadow(0 0 6px rgba(200,57,10,.6)); }

.p-brand-name,
.mh-name {
    font-family: var(--serif); font-style: italic; font-weight: 600; letter-spacing: -.01em; line-height: 1;
}

.p-brand-name { font-size: 20px; color: var(--panel-ink); }
.p-brand-tag {
    font-size: 9.5px;
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(245,241,236,.62);
    margin-top: 2px;
}

.p-headline { margin-bottom: 8px; animation: fade-up .55s var(--ease) .18s both; }
.p-headline-kicker { font-size: 10px; font-weight: 400; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.p-headline-title { font-family: var(--serif); font-size: clamp(24px,3.2vw,30px); font-weight: 500; line-height: 1.18; letter-spacing: -.022em; color: var(--panel-ink); }
.p-headline-title em { font-style: italic; color: rgba(245,241,236,.75); }

.p-table,
.p-footer { position: relative; z-index: 2; }

.p-table {
    margin-top: 20px;
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    overflow: hidden;
    animation: fade-up .55s var(--ease) .26s both;
}

.p-table-head {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 8px 14px;
    background: rgba(255,255,255,.04);
    border-bottom: 1px solid var(--panel-border);
}

.p-table-head span {
    font-size: 10px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--panel-ink3);
    font-weight: 400;
}

.p-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 11px 14px;
    border-bottom: 1px solid var(--panel-border);
    background: var(--panel-row);
    transition: background .2s;
    opacity: 0;
    animation: row-in .4s var(--ease) both;
}

.p-row:last-child { border-bottom: none; }
.p-row:hover { background: var(--panel-row-h); }

@keyframes row-in {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}

.p-row:nth-child(2) { animation-delay: .35s; }
.p-row:nth-child(3) { animation-delay: .43s; }
.p-row:nth-child(4) { animation-delay: .51s; }
.p-row:nth-child(5) { animation-delay: .59s; }

.p-row-left { display: flex; align-items: center; gap: 9px; }

.p-row-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(200,57,10,.10);
    border: 1px solid rgba(200,57,10,.22);
}

.p-row-icon svg {
    width: 10px;
    height: 10px;
    stroke: var(--accent);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.p-row-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 5px rgba(200,57,10,.5);
    flex-shrink: 0;
}

.p-row-label { font-size: 12.5px; font-weight: 300; color: var(--panel-ink2); letter-spacing: .01em; }

.p-row-badge {
    font-size: 10.5px;
    font-weight: 400;
    color: var(--panel-ink3);
    background: rgba(255,255,255,.05);
    border: 1px solid var(--panel-border);
    border-radius: 100px;
    padding: 2px 9px;
    letter-spacing: .02em;
}

.p-row-badge a {
    color: inherit;
    text-decoration: none;
}

.p-row-badge-accent {
    color: var(--accent);
    border-color: rgba(200,57,10,.3);
}

.p-footer {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--panel-border);
    display: flex;
    align-items: center;
    gap: 8px;
    animation: fade-up .5s var(--ease) .72s both;
}

.p-footer-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--panel-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.p-footer-icon svg {
    width: 13px;
    height: 13px;
    stroke: var(--panel-ink3);
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.p-footer-text {
    font-size: 11.5px;
    font-weight: 300;
    color: var(--panel-ink3);
    line-height: 1.5;
}

.p-footer-text strong,
.p-footer-text a {
    color: var(--panel-ink2);
    font-weight: 400;
    text-decoration: none;
}

.p-contact-card {
    margin-top: auto; margin-bottom: 18px; border: 1px solid var(--panel-border); border-radius: 14px; overflow: hidden;
    background: rgba(255,255,255,.025);
    box-shadow: 0 16px 36px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.03);
    animation: fade-up .55s var(--ease) .26s both;
}

.p-contact-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 12px 16px;
    background: rgba(255,255,255,.04);
    border-bottom: 1px solid var(--panel-border);
}

.p-contact-head span {
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--panel-ink3);
    font-weight: 400;
}

.p-contact-head span:last-child {
    text-align: right;
}

.p-contact-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    background: var(--panel-row);
}

.p-contact-line,
.p-contact-block {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.p-contact-block {
    width: 100%;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.07);
    background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.025) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.p-contact-block-link {
    align-items: center;
    text-decoration: none;
    transition: transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease);
}

.p-contact-block-link:hover {
    transform: translateY(-1px);
    border-color: rgba(200,57,10,.22);
    background: linear-gradient(180deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.04) 100%);
    box-shadow: 0 8px 22px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.04);
}

.p-contact-block-address {
    padding: 16px;
}

.p-contact-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--panel-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.p-contact-icon svg {
    width: 15px;
    height: 15px;
    stroke: var(--accent);
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.p-contact-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.p-contact-label {
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--panel-ink3);
}

.p-contact-copy span,
.p-contact-copy a {
    font-size: 12.5px;
    font-weight: 300;
    color: var(--panel-ink2);
    letter-spacing: .01em;
    line-height: 1.6;
    text-decoration: none;
}

.p-contact-address {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.p-contact-address span {
    display: block;
    font-size: 13px;
    color: var(--panel-ink);
    line-height: 1.5;
}

.p-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.p-contact-grid-single {
    grid-template-columns: 1fr;
}

.p-contact-block-contact {
    align-items: flex-start;
    padding: 16px;
}

.p-contact-mini-icon {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
}

.p-contact-mini-icon svg {
    width: 11px;
    height: 11px;
    stroke: var(--accent);
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.p-contact-pill-text {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    font-weight: 400;
    color: var(--panel-ink);
    letter-spacing: .01em;
    line-height: 1.35;
    white-space: normal;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.p-contact-pill-text-email {
    color: rgba(245,241,236,.9);
}

.p-contact-contact-lines {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.p-contact-contact-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--panel-ink);
    text-decoration: none;
    transition: color .2s var(--ease);
}

.p-contact-inline-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.p-contact-inline-icon svg {
    width: 14px;
    height: 14px;
    stroke: var(--accent);
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.p-contact-contact-line:hover {
    color: rgba(245,241,236,.76);
}

.p-contact-contact-line-email {
    color: rgba(245,241,236,.86);
    word-break: break-word;
}

@media (max-width: 420px) {
    .p-contact-grid {
        grid-template-columns: 1fr;
    }
}

.form-panel {
    flex: 1;
    background: var(--white);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 38px 36px 32px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
    max-width: 100%;
}

.form-panel::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--accent) 0%, rgba(200,57,10,.3) 50%, transparent 100%); opacity: .5;
}

.form-panel::after {
    content: '';
    position: absolute;
    right: -88px;
    bottom: -112px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200,57,10,.08) 0%, rgba(200,57,10,0) 68%);
    pointer-events: none;
}

.form-inner {
    width: 100%;
    max-width: 336px;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.form-inner-wide { max-width: 420px; }

.auth-login-page .form-inner,
.auth-register-page .form-inner {
    max-width: 348px;
}

.auth-register-page .form-inner-wide {
    max-width: 432px;
}

.screen.active { display: block; animation: fade-up .36s var(--ease) both; }

@keyframes fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.kicker,
.title,
.sub,
.alert,
.google-auth-host,
.btn-social,
.divider,
.form-table,
.check-row,
.btn,
.form-foot,
.contact-bar,
.back-btn,
.success-wrap,
.inline-actions { animation: fade-up .4s var(--ease) both; }

.kicker { font-size: 10px; font-weight: 400; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.title { font-family: var(--serif); font-size: clamp(24px,4vw,30px); font-weight: 500; line-height: 1.15; letter-spacing: -.022em; color: var(--ink); margin-bottom: 5px; }
.title em { font-style: italic; color: rgba(10,9,8,.56); }
.sub { font-size: 12.5px; font-weight: 300; color: var(--ink-3); line-height: 1.65; margin-bottom: 24px; }

.alert { display: flex; align-items: flex-start; gap: 8px; padding: 10px 13px; border-radius: var(--r); font-size: 12px; line-height: 1.55; margin-bottom: 16px; }
.alert-err { background: rgba(197,48,48,.06); border: 1px solid rgba(197,48,48,.18); color: #B83232; }
.alert-ok { background: rgba(46,125,87,.06); border: 1px solid rgba(46,125,87,.18); color: #276644; }
.alert svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.btn-social {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 58px;
    padding: 14px 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f6f0ea 100%);
    border: 1px solid rgba(10,9,8,.10);
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    transition: background .18s, border-color .18s, color .18s, transform .14s, box-shadow .18s;
    letter-spacing: .01em;
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    box-shadow: 0 10px 28px rgba(10,9,8,.08), inset 0 1px 0 rgba(255,255,255,.85);
    isolation: isolate;
}

.btn-social:hover {
    background: linear-gradient(180deg, #fff 0%, #f8f2eb 100%);
    border-color: rgba(200,57,10,.22);
    color: var(--ink);
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(10,9,8,.10), 0 0 0 4px rgba(200,57,10,.08);
}

.btn-social:active { transform: translateY(0); box-shadow: none; }
.btn-social:disabled { opacity: .78; cursor: wait; }
.btn-social::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 18%, rgba(255,255,255,.72) 50%, transparent 82%);
    transform: translateX(-140%);
    transition: transform .7s var(--ease);
    z-index: 0;
}

.btn-social:hover::before {
    transform: translateX(140%);
}

.btn-social svg { width: 18px; height: 18px; min-width: 18px; min-height: 18px; flex-shrink: 0; position: relative; z-index: 1; display: block; overflow: visible; }
.btn-social > span { position: relative; z-index: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.btn-google {
    margin-bottom: 8px;
    justify-content: center;
    padding-left: 18px;
    padding-right: 18px;
}

.google-auth-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 2px 0 10px;
    padding: 0 4px;
    color: #B83232;
    font-size: 11.5px;
    line-height: 1.45;
}

.google-auth-error[hidden] {
    display: none !important;
}

.google-auth-error svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    margin-top: 2px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.btn-google > svg {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    padding: 6px;
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 6px 16px rgba(10,9,8,.08);
    pointer-events: none;
}

.btn-google > span {
    width: 100%;
    display: block;
    text-align: center;
    padding: 0 46px;
}

.google-auth-shell {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 8px;
    overflow: visible;
    background: var(--white);
    border-radius: 999px;
}

@media (min-width: 768px) {
    body[data-page="login"] .google-auth-frame,
    body[data-page="register"] .google-auth-frame,
    body[data-page="login"] .google-auth-host,
    body[data-page="register"] .google-auth-host {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

.google-auth-frame {
    position: relative;
    width: 100%;
    max-width: 100%;
    display: block;
    margin-bottom: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.google-auth-frame[data-google-skin="transparent"] {
    --google-btn-width: 100%;
    --google-btn-height: 44px;
    cursor: pointer;
}

.google-auth-skin {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity .18s var(--ease);
}

.google-auth-frame[data-google-skin="transparent"] .google-auth-skin {
    display: flex;
}

.google-auth-frame[data-google-skin="transparent"].is-google-ready .google-auth-skin {
    opacity: 1;
}

.google-auth-skin-btn {
    width: 100%;
    max-width: 100%;
    height: var(--google-btn-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px 0 46px;
    border-radius: 999px;
    border: 1px solid var(--border-mid);
    background: transparent;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: .025em;
    line-height: 1;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
}

@media (min-width: 768px) {
    body[data-page="login"] .google-auth-frame[data-google-skin="transparent"] .google-auth-skin,
    body[data-page="register"] .google-auth-frame[data-google-skin="transparent"] .google-auth-skin {
        display: flex;
        opacity: 1;
    }
}

.google-auth-skin-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: block;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.google-auth-skin-btn span {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.google-auth-frame[data-google-skin="transparent"]:hover .google-auth-skin-btn {
    border-color: var(--border-hi);
    box-shadow: 0 0 0 4px rgba(200,57,10,.08);
}

.google-auth-frame[data-google-skin="transparent"]:focus-within .google-auth-skin-btn {
    border-color: rgba(200,57,10,.34);
    box-shadow: 0 0 0 4px rgba(200,57,10,.10);
}

.google-auth-host {
    width: 100%;
    min-height: 44px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    transition: opacity .18s var(--ease);
}

.google-auth-frame::before {
    content: none;
}

.google-auth-host:empty::before {
    content: 'Loading Google…';
    font-size: 12px;
    color: var(--ink-3);
    letter-spacing: .02em;
}

.google-auth-frame[data-google-skin="transparent"] .google-auth-host:empty::before {
    content: none;
}

.google-auth-host > div {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    position: relative;
    z-index: 1;
    overflow: visible !important;
}

.google-auth-frame[data-google-skin="transparent"].is-google-ready .google-auth-host > div {
    opacity: 0 !important;
}

.google-auth-host iframe {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    min-width: 0 !important;
    min-height: 44px;
    border-radius: 999px;
}

.google-auth-frame[data-google-skin="transparent"] .google-auth-host iframe {
    opacity: 0 !important;
    cursor: pointer;
}

.google-auth-frame.is-google-ready .google-auth-host:empty::before {
    content: none;
}

.google-auth-host--loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 1.5px solid rgba(10,9,8,.16);
    border-top-color: var(--ink);
    border-radius: 50%;
    animation: spin .65s linear infinite;
}

.google-auth-frame[data-google-skin="transparent"] .google-auth-host--loading::after {
    content: none;
}

.google-auth-host--loading {
    background: transparent;
}

.divider { display: flex; align-items: center; gap: 11px; margin: 17px 0; }
.divider-line { flex: 1; height: 1px; background: var(--border); }
.divider-text { font-size: 11px; color: var(--ink-3); white-space: nowrap; letter-spacing: .04em; }

.form-table { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 14px; }
.form-table + .form-table { margin-top: -1px; }

.form-row { display: grid; grid-template-columns: 90px 1fr; border-bottom: 1px solid var(--border); position: relative; transition: background .15s; }
.form-row:last-child { border-bottom: none; }
.form-row:focus-within { background: rgba(200,57,10,.025); z-index: 1; }
.form-row.two-col { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; }

.row-label,
.row-label-plain {
    font-size: 11px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); background: var(--surface);
}

.row-label { display: flex; align-items: center; padding: 0 12px; border-right: 1px solid var(--border); user-select: none; white-space: nowrap; }
.row-label-plain { display: flex; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border); }

.row-input,
.half-input,
.field-input,
.otp-box {
    width: 100%; font-family: var(--sans); outline: none; -webkit-appearance: none;
}

.row-input { padding: 12px 13px; background: transparent; border: none; font-size: 13.5px; font-weight: 300; color: var(--ink); transition: background .15s; }
.row-input::placeholder,
.half-input::placeholder,
.field-input::placeholder { color: var(--ink-4); }
.row-input.has-eye { padding-right: 38px; }

.row-input-wrap { position: relative; display: flex; align-items: center; width: 100%; }
.row-input-wrap .row-input { flex: 1; }
.row-input-wrap-split { gap: 0; }
.row-input-wrap-pass { flex: 1 1 auto; min-width: 0; }
.forgot-link-inline {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    padding: 0 14px;
    border-left: 1px solid var(--border);
}

.eye-btn {
    position: absolute; right: 11px; background: none; border: none; cursor: pointer; color: var(--ink-3); padding: 4px;
    display: flex; align-items: center; transition: color .15s;
}

.eye-btn:hover { color: var(--ink-2); }
.eye-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.row-forgot { display: flex; align-items: center; justify-content: space-between; padding: 0 13px; }
.row-forgot .row-input { padding-right: 0; }
.forgot-link { font-size: 11px; color: var(--ink-3); text-decoration: none; white-space: nowrap; transition: color .15s; flex-shrink: 0; }
.forgot-link:hover { color: var(--accent); }

.half-input { padding: 12px 13px; background: transparent; border: none; font-size: 13.5px; font-weight: 300; color: var(--ink); min-width: 0; }
.half-input:not(:last-child) { border-right: 1px solid var(--border); }

.field { margin-bottom: 12px; }
.field-label { font-size: 11px; font-weight: 400; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; display: block; }
.field-input { padding: 11px 13px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); font-size: 13.5px; font-weight: 300; color: var(--ink); transition: border-color .18s, box-shadow .18s, background .15s; }
.field-input:focus { border-color: rgba(200,57,10,.4); background: var(--white); box-shadow: 0 0 0 3px var(--accent-dim); }

.form-row:focus-within::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--accent-dim) inset; pointer-events: none;
}

.pw-meter { padding: 8px 14px 10px; background: var(--surface); border-top: 1px solid var(--border); }
.pw-bars { display: flex; gap: 3px; margin-bottom: 5px; }
.pw-bar { flex: 1; height: 2px; border-radius: 2px; background: var(--border); transition: background .3s; }
.pw-bar.w { background: #C53030; }
.pw-bar.f { background: #C47A0A; }
.pw-bar.g { background: var(--ok); }
.pw-bar.s { background: var(--accent); }
.pw-hint { font-size: 10.5px; color: var(--ink-3); }

.check-row { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 16px; }
.check-box {
    width: 15px; height: 15px; border-radius: 3.5px; flex-shrink: 0; margin-top: 2px; border: 1px solid var(--border-mid);
    background: var(--surface); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s; position: relative;
}

.check-box input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.check-box svg { width: 8px; height: 8px; stroke: white; fill: none; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .15s; }
.check-box.on { background: var(--accent); border-color: var(--accent); }
.check-box.on svg { opacity: 1; }
.check-label { font-size: 12px; color: var(--ink-3); line-height: 1.55; }
.check-label a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--border-hi); }

.btn {
    width: 100%; padding: 13px 20px; background: var(--accent); color: white; border: none; border-radius: var(--r); font-family: var(--sans);
    font-size: 13.5px; font-weight: 500; cursor: pointer; letter-spacing: .025em; position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .18s, transform .13s, box-shadow .18s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.1) 0%, transparent 55%); pointer-events: none; }
.btn:hover { background: var(--accent-hi); transform: translateY(-1px); box-shadow: 0 6px 20px var(--accent-glow); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn.loading { pointer-events: none; opacity: .85; }
.btn-outline { background: transparent; color: var(--ink-2); border: 1px solid var(--border-mid); box-shadow: none; }
.btn-outline::before { display: none; }
.btn-outline:hover { background: var(--surface); color: var(--ink); border-color: var(--border-hi); box-shadow: none; transform: translateY(-1px); }

.spin { display: inline-block; width: 12px; height: 12px; border: 1.5px solid rgba(255,255,255,.25); border-top-color: white; border-radius: 50%; animation: spin .65s linear infinite; vertical-align: middle; margin-right: 7px; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-foot { margin-top: 18px; text-align: center; font-size: 12.5px; color: var(--ink-3); font-weight: 300; }
.form-foot a { color: var(--ink); text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--border-hi); padding-bottom: 1px; transition: color .15s, border-color .15s; }
.form-foot a:hover { color: var(--accent); border-color: var(--accent); }

.contact-bar { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); text-align: center; font-size: 11px; color: var(--ink-3); font-weight: 300; }
.contact-bar a { color: var(--ink-3); text-decoration: none; transition: color .15s; }
.contact-bar a:hover { color: var(--accent); }

.back-btn {
    display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-family: var(--sans); font-size: 11.5px;
    color: var(--ink-3); padding: 0; margin-bottom: 20px; transition: color .15s; text-decoration: none;
}

.back-btn:hover { color: var(--accent); }
.back-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.otp-row { display: flex; gap: 6px; justify-content: center; margin: 20px 0; }
.otp-box {
    width: 44px; height: 50px; background: var(--surface); border: 1px solid var(--border-mid); border-radius: var(--r); text-align: center;
    font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--ink); transition: border-color .18s, box-shadow .18s; caret-color: transparent;
}

.otp-box:focus { border-color: rgba(200,57,10,.4); box-shadow: 0 0 0 3px var(--accent-dim); background: var(--white); }
.otp-hidden { position: absolute; opacity: 0; pointer-events: none; }

.success-wrap { text-align: center; padding: 8px 0; }
.success-ring {
    width: 52px; height: 52px; border-radius: 50%; background: var(--accent-dim); border: 1px solid rgba(200,57,10,.18);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; animation: pop .4s var(--ease) both;
}

@keyframes pop { 0% { transform: scale(.65); opacity: 0; } 70% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }

.success-ring svg { width: 20px; height: 20px; stroke: var(--accent); fill: none; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.prog-track { width: 100%; height: 2px; background: var(--border); border-radius: 2px; overflow: hidden; margin: 16px 0 20px; }
.prog-fill { height: 100%; width: 0; background: var(--accent); border-radius: 2px; transition: width 2s linear; }

.mobile-header { display: none; }

.inline-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.inline-actions.single { grid-template-columns: 1fr; }
.stack-link { margin-top: 16px; text-align: center; font-size: 12px; color: var(--ink-3); }
.stack-link a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--border-hi); }
.stack-link a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.helper-copy { font-size: 12px; color: var(--ink-3); line-height: 1.6; margin-bottom: 16px; }

@media (max-width: 760px) {
    .auth-exact-stage {
        padding: 0;
        min-height: auto;
        align-items: flex-start;
        overflow-x: clip;
    }
    .shell {
        flex-direction: column;
        border-radius: 0;
        min-height: auto;
        box-shadow: none;
        width: 100%;
        max-width: 100%;
    }
    .panel { display: none; }
    .mobile-header {
        display: none;
    }
    .mh-brand { display: flex; align-items: center; gap: 9px; }
    .mh-ring { width: 32px; height: 32px; border-radius: 9px; }
    .mh-ring svg, .mh-ring img { width: 13px; height: 14px; }
    .mh-name { font-size: 17px; color: #F5F1EC; }
    .mh-tag { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(245,241,236,.58); }
    .form-panel {
        padding: 24px 20px 24px;
        align-items: flex-start;
        width: 100%;
        min-height: auto;
        overflow-y: visible;
        overflow-x: hidden;
    }
    .form-row { grid-template-columns: 72px minmax(0, 1fr); }
    .form-row.two-col { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: stretch; }
    .form-row.two-col .half-input:not(:last-child) { border-right: 1px solid var(--border); border-bottom: none; }
    .row-label {
        display: flex;
        padding: 0 10px;
        font-size: 10px;
    }
    .form-table { border-radius: 8px; }
    .row-input,
    .half-input,
    .field-input,
    .otp-box {
        font-size: 16px;
        line-height: 1.2;
    }
    .row-input,
    .half-input,
    .field-input {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .row-forgot { flex-direction: row; align-items: center; justify-content: space-between; gap: 0; padding: 0 13px; }
    .inline-actions { grid-template-columns: 1fr; }
    .form-inner,
    .form-inner-wide {
        max-width: 100%;
    }
    .btn-social {
        min-height: 54px;
        padding: 12px 16px;
        font-size: 13px;
    }

    .btn-google > svg {
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
        padding: 5px;
    }
}

@media (max-height: 820px) and (min-width: 761px) {
    .auth-exact-stage {
        padding: 14px 14px 6px;
    }

    .panel {
        padding: 30px 28px 26px;
    }

    .form-panel {
        padding: 30px 30px 26px;
    }

    .p-brand {
        margin-bottom: 20px;
    }

    .p-table {
        margin-top: 14px;
    }

    .p-footer {
        margin-top: 14px;
        padding-top: 14px;
    }

    .sub {
        margin-bottom: 18px;
    }

    .contact-bar {
        margin-top: 16px;
        padding-top: 12px;
    }
}

@media (max-width: 400px) {
    .otp-box { width: 38px; height: 44px; font-size: 19px; }
    .btn-social { gap: 10px; padding: 12px 14px; font-size: 12.5px; }
}

@media (max-width: 940px) and (min-width: 761px) {
    .shell {
        max-width: 880px;
    }

    .panel {
        flex-basis: 320px;
        padding: 36px 28px 32px;
    }

    .form-panel {
        padding: 40px 32px;
    }

    .form-inner-wide {
        max-width: 400px;
    }
}

@media (min-width: 768px) {
    body[data-page="login"] .auth-exact-stage,
    body[data-page="register"] .auth-exact-stage,
    body[data-page="forgot-password"] .auth-exact-stage,
    body[data-page="reset-password"] .auth-exact-stage {
        padding: 10px 14px 0;
    }

    body[data-page="login"] .shell,
    body[data-page="register"] .shell,
    body[data-page="forgot-password"] .shell,
    body[data-page="reset-password"] .shell {
        max-width: min(860px, 100%);
        min-height: 0;
    }

    body[data-page="login"] .panel,
    body[data-page="register"] .panel,
    body[data-page="forgot-password"] .panel,
    body[data-page="reset-password"] .panel {
        flex-basis: 320px;
        padding: 28px 24px 22px;
    }

    body[data-page="login"] .form-panel,
    body[data-page="register"] .form-panel,
    body[data-page="forgot-password"] .form-panel,
    body[data-page="reset-password"] .form-panel {
        align-items: flex-start;
        padding: 22px 24px 6px;
        overflow-y: visible;
    }

    body[data-page="login"] .p-brand,
    body[data-page="register"] .p-brand,
    body[data-page="forgot-password"] .p-brand,
    body[data-page="reset-password"] .p-brand {
        margin-bottom: 20px;
    }

    body[data-page="login"] .p-headline,
    body[data-page="register"] .p-headline,
    body[data-page="forgot-password"] .p-headline,
    body[data-page="reset-password"] .p-headline {
        margin-bottom: 2px;
    }

    body[data-page="login"] .p-table,
    body[data-page="register"] .p-table,
    body[data-page="forgot-password"] .p-table,
    body[data-page="reset-password"] .p-table {
        margin-top: 14px;
    }

    body[data-page="login"] .p-row,
    body[data-page="register"] .p-row,
    body[data-page="forgot-password"] .p-row,
    body[data-page="reset-password"] .p-row {
        padding-top: 9px;
        padding-bottom: 9px;
    }

    body[data-page="login"] .p-contact-card,
    body[data-page="register"] .p-contact-card,
    body[data-page="forgot-password"] .p-contact-card,
    body[data-page="reset-password"] .p-contact-card {
        margin-bottom: 12px;
    }

    body[data-page="login"] .p-footer,
    body[data-page="register"] .p-footer,
    body[data-page="forgot-password"] .p-footer,
    body[data-page="reset-password"] .p-footer {
        margin-top: 8px;
        padding-top: 10px;
    }

    body[data-page="login"] .sub,
    body[data-page="register"] .sub,
    body[data-page="forgot-password"] .sub,
    body[data-page="reset-password"] .sub {
        margin-bottom: 14px;
    }

    body[data-page="login"] .back-btn,
    body[data-page="register"] .back-btn,
    body[data-page="forgot-password"] .back-btn,
    body[data-page="reset-password"] .back-btn {
        margin-bottom: 14px;
    }

    body[data-page="login"] .btn-social,
    body[data-page="register"] .btn-social,
    body[data-page="forgot-password"] .btn-social,
    body[data-page="reset-password"] .btn-social {
        min-height: 54px;
        padding: 12px 18px;
    }

    body[data-page="login"] .contact-bar,
    body[data-page="register"] .contact-bar,
    body[data-page="forgot-password"] .contact-bar,
    body[data-page="reset-password"] .contact-bar {
        margin-top: 8px;
        padding-top: 8px;
    }

    body[data-page="login"] .divider,
    body[data-page="register"] .divider,
    body[data-page="forgot-password"] .divider,
    body[data-page="reset-password"] .divider {
        margin: 12px 0;
    }

    body[data-page="login"] .form-table,
    body[data-page="register"] .form-table,
    body[data-page="forgot-password"] .form-table,
    body[data-page="reset-password"] .form-table {
        margin-bottom: 10px;
    }

    body[data-page="login"] .row-label,
    body[data-page="register"] .row-label,
    body[data-page="forgot-password"] .row-label,
    body[data-page="reset-password"] .row-label {
        padding: 0 10px;
    }

    body[data-page="login"] .row-label-plain,
    body[data-page="register"] .row-label-plain,
    body[data-page="forgot-password"] .row-label-plain,
    body[data-page="reset-password"] .row-label-plain {
        padding: 10px 12px;
    }

    body[data-page="login"] .row-input,
    body[data-page="register"] .row-input,
    body[data-page="forgot-password"] .row-input,
    body[data-page="reset-password"] .row-input,
    body[data-page="login"] .half-input,
    body[data-page="register"] .half-input,
    body[data-page="forgot-password"] .half-input,
    body[data-page="reset-password"] .half-input {
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 13px;
    }

    body[data-page="login"] .check-row,
    body[data-page="register"] .check-row,
    body[data-page="forgot-password"] .check-row,
    body[data-page="reset-password"] .check-row {
        margin-bottom: 12px;
    }

    body[data-page="login"] .btn,
    body[data-page="register"] .btn,
    body[data-page="forgot-password"] .btn,
    body[data-page="reset-password"] .btn {
        padding: 11px 18px;
    }

    body[data-page="login"] .inline-actions,
    body[data-page="register"] .inline-actions,
    body[data-page="forgot-password"] .inline-actions,
    body[data-page="reset-password"] .inline-actions {
        margin-top: 12px;
    }

    body[data-page="login"] .main-footer,
    body[data-page="register"] .main-footer,
    body[data-page="forgot-password"] .main-footer,
    body[data-page="reset-password"] .main-footer {
        padding: 4px 0 2px;
    }

    body[data-page="login"] .footer-grid,
    body[data-page="register"] .footer-grid,
    body[data-page="forgot-password"] .footer-grid,
    body[data-page="reset-password"] .footer-grid {
        gap: 10px;
    }

    body[data-page="login"] .footer-title,
    body[data-page="register"] .footer-title,
    body[data-page="forgot-password"] .footer-title,
    body[data-page="reset-password"] .footer-title {
        margin-bottom: 6px;
    }

    body[data-page="login"] .footer-list,
    body[data-page="register"] .footer-list,
    body[data-page="forgot-password"] .footer-list,
    body[data-page="reset-password"] .footer-list,
    body[data-page="login"] .footer-contact-list,
    body[data-page="register"] .footer-contact-list,
    body[data-page="forgot-password"] .footer-contact-list,
    body[data-page="reset-password"] .footer-contact-list {
        gap: 4px;
    }

    body[data-page="login"] .footer-contact-panel,
    body[data-page="register"] .footer-contact-panel,
    body[data-page="forgot-password"] .footer-contact-panel,
    body[data-page="reset-password"] .footer-contact-panel {
        gap: 8px;
    }

    body[data-page="login"] .footer-copy,
    body[data-page="register"] .footer-copy,
    body[data-page="forgot-password"] .footer-copy,
    body[data-page="reset-password"] .footer-copy {
        margin-top: 6px;
        padding-top: 6px;
    }

    body[data-page="login"] .footer-address,
    body[data-page="register"] .footer-address,
    body[data-page="forgot-password"] .footer-address,
    body[data-page="reset-password"] .footer-address {
        padding-top: 0;
    }
}

@media (min-width: 768px) and (max-height: 900px) {
    body[data-page="login"] .auth-exact-stage,
    body[data-page="register"] .auth-exact-stage,
    body[data-page="forgot-password"] .auth-exact-stage,
    body[data-page="reset-password"] .auth-exact-stage {
        padding: 6px 12px 2px;
    }

    body[data-page="login"] .shell,
    body[data-page="register"] .shell,
    body[data-page="forgot-password"] .shell,
    body[data-page="reset-password"] .shell {
        max-width: min(820px, 100%);
        border-radius: 14px;
    }

    body[data-page="login"] .panel,
    body[data-page="register"] .panel,
    body[data-page="forgot-password"] .panel,
    body[data-page="reset-password"] .panel {
        flex-basis: 300px;
        padding: 22px 20px 18px;
    }

    body[data-page="login"] .p-brand,
    body[data-page="register"] .p-brand,
    body[data-page="forgot-password"] .p-brand,
    body[data-page="reset-password"] .p-brand {
        margin-bottom: 14px;
    }

    body[data-page="login"] .p-brand-name,
    body[data-page="register"] .p-brand-name,
    body[data-page="forgot-password"] .p-brand-name,
    body[data-page="reset-password"] .p-brand-name {
        font-size: 18px;
    }

    body[data-page="login"] .p-brand-tag,
    body[data-page="register"] .p-brand-tag,
    body[data-page="forgot-password"] .p-brand-tag,
    body[data-page="reset-password"] .p-brand-tag {
        font-size: 8.5px;
    }

    body[data-page="login"] .p-headline-kicker,
    body[data-page="register"] .p-headline-kicker,
    body[data-page="forgot-password"] .p-headline-kicker,
    body[data-page="reset-password"] .p-headline-kicker {
        margin-bottom: 6px;
    }

    body[data-page="login"] .p-headline-title,
    body[data-page="register"] .p-headline-title,
    body[data-page="forgot-password"] .p-headline-title,
    body[data-page="reset-password"] .p-headline-title {
        font-size: clamp(20px, 2.4vw, 26px);
        line-height: 1.05;
    }

    body[data-page="login"] .p-table-head,
    body[data-page="register"] .p-table-head,
    body[data-page="forgot-password"] .p-table-head,
    body[data-page="reset-password"] .p-table-head {
        padding: 6px 12px;
    }

    body[data-page="login"] .p-row,
    body[data-page="register"] .p-row,
    body[data-page="forgot-password"] .p-row,
    body[data-page="reset-password"] .p-row {
        padding: 8px 12px;
    }

    body[data-page="login"] .p-row-label,
    body[data-page="register"] .p-row-label,
    body[data-page="forgot-password"] .p-row-label,
    body[data-page="reset-password"] .p-row-label {
        font-size: 11.5px;
    }

    body[data-page="login"] .p-row-badge,
    body[data-page="register"] .p-row-badge,
    body[data-page="forgot-password"] .p-row-badge,
    body[data-page="reset-password"] .p-row-badge {
        font-size: 9.5px;
    }

    body[data-page="login"] .p-footer-text,
    body[data-page="register"] .p-footer-text,
    body[data-page="forgot-password"] .p-footer-text,
    body[data-page="reset-password"] .p-footer-text {
        font-size: 10.5px;
    }

    body[data-page="login"] .form-panel,
    body[data-page="register"] .form-panel,
    body[data-page="forgot-password"] .form-panel,
    body[data-page="reset-password"] .form-panel {
        padding: 18px 20px 4px;
    }

    body[data-page="login"] .form-inner,
    body[data-page="register"] .form-inner,
    body[data-page="forgot-password"] .form-inner,
    body[data-page="reset-password"] .form-inner {
        max-width: 324px;
    }

    body[data-page="login"] .form-inner-wide,
    body[data-page="register"] .form-inner-wide,
    body[data-page="forgot-password"] .form-inner-wide,
    body[data-page="reset-password"] .form-inner-wide {
        max-width: 390px;
    }

    body[data-page="login"] .kicker,
    body[data-page="register"] .kicker,
    body[data-page="forgot-password"] .kicker,
    body[data-page="reset-password"] .kicker {
        margin-bottom: 5px;
        font-size: 9px;
    }

    body[data-page="login"] .title,
    body[data-page="register"] .title,
    body[data-page="forgot-password"] .title,
    body[data-page="reset-password"] .title {
        font-size: clamp(20px, 3vw, 26px);
        line-height: 1.04;
        margin-bottom: 3px;
    }

    body[data-page="login"] .sub,
    body[data-page="register"] .sub,
    body[data-page="forgot-password"] .sub,
    body[data-page="reset-password"] .sub {
        font-size: 11.5px;
        line-height: 1.5;
        margin-bottom: 14px;
    }

    body[data-page="login"] .alert,
    body[data-page="register"] .alert,
    body[data-page="forgot-password"] .alert,
    body[data-page="reset-password"] .alert {
        padding: 8px 11px;
        font-size: 11.5px;
        margin-bottom: 12px;
    }

    body[data-page="login"] .btn-social,
    body[data-page="register"] .btn-social,
    body[data-page="forgot-password"] .btn-social,
    body[data-page="reset-password"] .btn-social {
        min-height: 50px;
        padding: 10px 16px;
        font-size: 13px;
    }

    body[data-page="login"] .btn-google > svg,
    body[data-page="register"] .btn-google > svg,
    body[data-page="forgot-password"] .btn-google > svg,
    body[data-page="reset-password"] .btn-google > svg {
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
        padding: 5px;
    }

    body[data-page="login"] .divider,
    body[data-page="register"] .divider,
    body[data-page="forgot-password"] .divider,
    body[data-page="reset-password"] .divider {
        margin: 12px 0;
    }

    body[data-page="login"] .divider-text,
    body[data-page="register"] .divider-text,
    body[data-page="forgot-password"] .divider-text,
    body[data-page="reset-password"] .divider-text {
        font-size: 10px;
    }

    body[data-page="login"] .form-table,
    body[data-page="register"] .form-table,
    body[data-page="forgot-password"] .form-table,
    body[data-page="reset-password"] .form-table {
        margin-bottom: 10px;
    }

    body[data-page="login"] .form-row,
    body[data-page="register"] .form-row,
    body[data-page="forgot-password"] .form-row,
    body[data-page="reset-password"] .form-row {
        grid-template-columns: 82px 1fr;
    }

    body[data-page="login"] .row-label,
    body[data-page="register"] .row-label,
    body[data-page="forgot-password"] .row-label,
    body[data-page="reset-password"] .row-label {
        padding: 0 10px;
        font-size: 10px;
    }

    body[data-page="login"] .row-input,
    body[data-page="register"] .row-input,
    body[data-page="forgot-password"] .row-input,
    body[data-page="reset-password"] .row-input {
        padding: 10px 11px;
        font-size: 13px;
    }

    body[data-page="login"] .btn,
    body[data-page="register"] .btn,
    body[data-page="forgot-password"] .btn,
    body[data-page="reset-password"] .btn {
        padding: 11px 18px;
        font-size: 13px;
    }

    body[data-page="login"] .form-foot,
    body[data-page="register"] .form-foot,
    body[data-page="forgot-password"] .form-foot,
    body[data-page="reset-password"] .form-foot {
        margin-top: 8px;
        font-size: 11.5px;
    }

    body[data-page="login"] .contact-bar,
    body[data-page="register"] .contact-bar,
    body[data-page="forgot-password"] .contact-bar,
    body[data-page="reset-password"] .contact-bar {
        margin-top: 8px;
        padding-top: 8px;
        font-size: 10.5px;
    }

    body[data-page="login"] .back-btn,
    body[data-page="register"] .back-btn,
    body[data-page="forgot-password"] .back-btn,
    body[data-page="reset-password"] .back-btn {
        margin-bottom: 12px;
        font-size: 10.5px;
    }

    body[data-page="login"] .main-footer,
    body[data-page="register"] .main-footer,
    body[data-page="forgot-password"] .main-footer,
    body[data-page="reset-password"] .main-footer {
        padding: 2px 0 0;
    }

    body[data-page="login"] .footer-title,
    body[data-page="register"] .footer-title,
    body[data-page="forgot-password"] .footer-title,
    body[data-page="reset-password"] .footer-title {
        margin-bottom: 8px;
    }

    body[data-page="login"] .footer-list,
    body[data-page="register"] .footer-list,
    body[data-page="forgot-password"] .footer-list,
    body[data-page="reset-password"] .footer-list,
    body[data-page="login"] .footer-contact-list,
    body[data-page="register"] .footer-contact-list,
    body[data-page="forgot-password"] .footer-contact-list,
    body[data-page="reset-password"] .footer-contact-list {
        gap: 6px;
    }

    body[data-page="login"] .footer-contact-item,
    body[data-page="register"] .footer-contact-item,
    body[data-page="forgot-password"] .footer-contact-item,
    body[data-page="reset-password"] .footer-contact-item,
    body[data-page="login"] .footer-list a,
    body[data-page="register"] .footer-list a,
    body[data-page="forgot-password"] .footer-list a,
    body[data-page="reset-password"] .footer-list a {
        font-size: 11px;
    }

    body[data-page="login"] .footer-copy,
    body[data-page="register"] .footer-copy,
    body[data-page="forgot-password"] .footer-copy,
    body[data-page="reset-password"] .footer-copy {
        margin-top: 4px;
        padding-top: 4px;
        font-size: 10px;
    }

    body[data-page="login"] .footer-social,
    body[data-page="register"] .footer-social,
    body[data-page="forgot-password"] .footer-social,
    body[data-page="reset-password"] .footer-social {
        width: 36px;
        height: 36px;
    }
}

@media (min-width: 768px) {
    body[data-page="login"] .auth-exact-stage {
        padding: 8px 14px 0;
    }

    body[data-page="login"] .shell {
        max-width: min(820px, 100%);
        min-height: 0;
        border-radius: 14px;
    }

    body[data-page="login"] .panel {
        flex-basis: 300px;
        padding: 22px 20px 18px;
    }

    body[data-page="login"] .p-brand {
        margin-bottom: 14px;
    }

    body[data-page="login"] .p-brand-name {
        font-size: 18px;
    }

    body[data-page="login"] .p-brand-tag {
        font-size: 8.5px;
    }

    body[data-page="login"] .p-headline {
        margin-bottom: 2px;
    }

    body[data-page="login"] .p-headline-kicker {
        margin-bottom: 6px;
        font-size: 9px;
    }

    body[data-page="login"] .p-headline-title {
        font-size: clamp(20px, 2.3vw, 26px);
        line-height: 1.05;
    }

    body[data-page="login"] .p-table {
        margin-top: 12px;
    }

    body[data-page="login"] .p-table-head {
        padding: 6px 12px;
    }

    body[data-page="login"] .p-row {
        padding: 8px 12px;
    }

    body[data-page="login"] .p-row-label {
        font-size: 11.5px;
    }

    body[data-page="login"] .p-row-badge {
        font-size: 9.5px;
    }

    body[data-page="login"] .p-footer {
        margin-top: 8px;
        padding-top: 10px;
    }

    body[data-page="login"] .p-footer-text {
        font-size: 10.5px;
    }

    body[data-page="login"] .form-panel {
        align-items: flex-start;
        padding: 18px 20px 6px;
        overflow-y: visible;
    }

    body[data-page="login"] .form-inner {
        max-width: 324px;
    }

    body[data-page="login"] .kicker {
        margin-bottom: 5px;
        font-size: 9px;
    }

    body[data-page="login"] .title {
        font-size: clamp(20px, 3vw, 26px);
        line-height: 1.04;
        margin-bottom: 3px;
    }

    body[data-page="login"] .sub {
        font-size: 11.5px;
        line-height: 1.5;
        margin-bottom: 12px;
    }

    body[data-page="login"] .alert {
        padding: 8px 11px;
        font-size: 11.5px;
        margin-bottom: 10px;
    }

    body[data-page="login"] .btn-social {
        min-height: 48px;
        padding: 10px 16px;
        font-size: 13px;
    }

    body[data-page="login"] .btn-google {
        margin-bottom: 6px;
    }

    body[data-page="login"] .btn-google > svg {
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
        padding: 5px;
    }

    body[data-page="login"] .google-auth-error {
        margin: 0 0 8px;
        font-size: 10.5px;
    }

    body[data-page="login"] .divider {
        margin: 10px 0;
    }

    body[data-page="login"] .divider-text {
        font-size: 10px;
    }

    body[data-page="login"] .form-table {
        margin-bottom: 10px;
    }

    body[data-page="login"] .form-row {
        grid-template-columns: 82px 1fr;
    }

    body[data-page="login"] .row-label {
        padding: 0 10px;
        font-size: 10px;
    }

    body[data-page="login"] .row-label-plain {
        padding: 10px 12px;
    }

    body[data-page="login"] .row-input {
        padding: 10px 11px;
        font-size: 13px;
    }

    body[data-page="login"] .row-input.has-eye {
        padding-right: 36px;
    }

    body[data-page="login"] .eye-btn {
        right: 9px;
    }

    body[data-page="login"] .eye-btn svg {
        width: 13px;
        height: 13px;
    }

    body[data-page="login"] .row-forgot {
        padding: 0 11px;
    }

    body[data-page="login"] .forgot-link {
        font-size: 10.5px;
    }

    body[data-page="login"] .btn {
        padding: 11px 18px;
        font-size: 13px;
    }

    body[data-page="login"] .form-foot {
        margin-top: 8px;
        font-size: 11.5px;
    }

    body[data-page="login"] .contact-bar {
        margin-top: 8px;
        padding-top: 8px;
        font-size: 10.5px;
    }

    body[data-page="login"] .main-footer {
        padding: 8px 0 2px;
    }

    body[data-page="login"] .footer-grid {
        gap: 10px;
    }

    body[data-page="login"] .footer-title {
        margin-bottom: 6px;
    }

    body[data-page="login"] .footer-list,
    body[data-page="login"] .footer-contact-list {
        gap: 4px;
    }

    body[data-page="login"] .footer-contact-panel {
        gap: 8px;
    }

    body[data-page="login"] .footer-copy {
        margin-top: 6px;
        padding-top: 6px;
    }
}

body[data-page="login"] .shell {
    min-height: 0 !important;
}

body[data-page="login"] .form-panel {
    padding-bottom: 0 !important;
}

body[data-page="login"] .form-foot {
    margin-bottom: 0;
}

body[data-page="login"] .contact-bar {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    body[data-page="login"] .panel {
        flex-basis: 286px;
        padding: 16px 16px 10px !important;
    }

    body[data-page="login"] .p-table,
    body[data-page="login"] .p-footer {
        display: none;
    }

    body[data-page="login"] .p-table {
        margin-top: 8px;
        margin-bottom: 0;
    }

    body[data-page="login"] .p-footer {
        margin-top: 6px;
        padding-top: 8px;
        margin-bottom: 0;
    }

    body[data-page="login"] .p-table-head {
        display: none;
    }

    body[data-page="login"] .p-row {
        padding: 6px 10px;
    }

    body[data-page="login"] .p-row-label {
        font-size: 11px;
    }

    body[data-page="login"] .p-row-badge {
        font-size: 9px;
        padding: 2px 8px;
    }

    body[data-page="login"] .p-row-icon {
        width: 16px;
        height: 16px;
    }

    body[data-page="login"] .p-row-icon svg {
        width: 9px;
        height: 9px;
    }

    body[data-page="login"] .p-footer-icon {
        width: 24px;
        height: 24px;
    }

    body[data-page="login"] .p-footer-icon svg {
        width: 11px;
        height: 11px;
    }

    body[data-page="login"] .p-footer-text {
        font-size: 10px;
        line-height: 1.4;
    }

    body[data-page="login"] .form-panel {
        padding: 12px 16px 0 !important;
    }

    body[data-page="login"] .form-inner {
        max-width: 316px;
    }

    body[data-page="login"] .kicker {
        margin-bottom: 4px;
        font-size: 8.5px;
    }

    body[data-page="login"] .title {
        font-size: clamp(19px, 2.6vw, 24px);
        line-height: 1.02;
        margin-bottom: 2px;
    }

    body[data-page="login"] .sub {
        font-size: 10.75px;
        line-height: 1.42;
        margin-bottom: 8px;
    }

    body[data-page="login"] .btn-social {
        min-height: 44px;
        padding: 8px 14px;
        font-size: 12.5px;
        box-shadow: 0 6px 18px rgba(10,9,8,.06), inset 0 1px 0 rgba(255,255,255,.85);
    }

    body[data-page="login"] .btn-google {
        margin-bottom: 4px;
    }

    body[data-page="login"] .btn-google > svg {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
        padding: 4px;
    }

    body[data-page="login"] .google-auth-error {
        margin: 0 0 6px;
        font-size: 10px;
    }

    body[data-page="login"] .divider {
        margin: 8px 0;
    }

    body[data-page="login"] .divider-text {
        font-size: 9.5px;
    }

    body[data-page="login"] .form-table {
        margin-bottom: 8px;
    }

    body[data-page="login"] .form-row {
        grid-template-columns: 76px 1fr;
    }

    body[data-page="login"] .row-label {
        padding: 0 9px;
        font-size: 9.5px;
    }

    body[data-page="login"] .row-input {
        padding: 8px 10px;
        font-size: 12.5px;
    }

    body[data-page="login"] .row-input.has-eye {
        padding-right: 32px;
    }

    body[data-page="login"] .row-forgot {
        padding: 0 10px;
    }

    body[data-page="login"] .eye-btn {
        right: 8px;
        padding: 3px;
    }

    body[data-page="login"] .eye-btn svg {
        width: 12px;
        height: 12px;
    }

    body[data-page="login"] .forgot-link {
        font-size: 10px;
    }

    body[data-page="login"] .btn {
        padding: 10px 16px;
        font-size: 12.5px;
    }

    body[data-page="login"] .form-foot {
        margin-top: 6px;
        font-size: 11px;
    }

    body[data-page="login"] .contact-bar {
        margin-top: 6px;
        padding-top: 6px;
        font-size: 10px;
    }

    body[data-page="login"] .p-headline-title {
        font-size: clamp(18px, 2vw, 22px);
        line-height: 1;
    }
}

@media (min-width: 768px) {
    body[data-page="login"] .auth-exact-stage,
    body[data-page="register"] .auth-exact-stage,
    body[data-page="forgot-password"] .auth-exact-stage,
    body[data-page="reset-password"] .auth-exact-stage {
        min-height: calc(100dvh - var(--nav-h, 64px));
        align-items: center;
        padding: 18px 14px 34px !important;
    }

    body[data-page="login"] .shell,
    body[data-page="register"] .shell,
    body[data-page="forgot-password"] .shell,
    body[data-page="reset-password"] .shell {
        display: grid !important;
        grid-template-columns: 292px minmax(0, 1fr);
        max-width: min(812px, 100%) !important;
        min-height: clamp(500px, calc(100dvh - 140px), 640px) !important;
        border-radius: 16px;
        align-items: stretch !important;
        background: var(--white);
    }

    body[data-page="login"] .panel,
    body[data-page="register"] .panel,
    body[data-page="forgot-password"] .panel,
    body[data-page="reset-password"] .panel {
        min-height: 100%;
        justify-content: flex-start;
        padding: 22px 20px 20px !important;
    }

    body[data-page="login"] .p-brand,
    body[data-page="register"] .p-brand,
    body[data-page="forgot-password"] .p-brand,
    body[data-page="reset-password"] .p-brand {
        margin-bottom: 16px;
    }

    body[data-page="login"] .p-brand-name,
    body[data-page="register"] .p-brand-name,
    body[data-page="forgot-password"] .p-brand-name,
    body[data-page="reset-password"] .p-brand-name {
        font-size: 18px;
    }

    body[data-page="login"] .p-brand-tag,
    body[data-page="register"] .p-brand-tag,
    body[data-page="forgot-password"] .p-brand-tag,
    body[data-page="reset-password"] .p-brand-tag {
        font-size: 8px;
    }

    body[data-page="login"] .p-headline,
    body[data-page="register"] .p-headline,
    body[data-page="forgot-password"] .p-headline,
    body[data-page="reset-password"] .p-headline {
        margin-bottom: 0;
    }

    body[data-page="login"] .p-headline-kicker,
    body[data-page="register"] .p-headline-kicker,
    body[data-page="forgot-password"] .p-headline-kicker,
    body[data-page="reset-password"] .p-headline-kicker {
        margin-bottom: 8px;
        font-size: 8.5px;
    }

    body[data-page="login"] .p-headline-title,
    body[data-page="register"] .p-headline-title,
    body[data-page="forgot-password"] .p-headline-title,
    body[data-page="reset-password"] .p-headline-title {
        font-size: clamp(20px, 2.1vw, 24px) !important;
        line-height: 1.08 !important;
    }

    body[data-page="login"] .p-table,
    body[data-page="register"] .p-table,
    body[data-page="forgot-password"] .p-table,
    body[data-page="reset-password"] .p-table,
    body[data-page="login"] .p-footer,
    body[data-page="register"] .p-footer,
    body[data-page="forgot-password"] .p-footer,
    body[data-page="reset-password"] .p-footer {
        display: none !important;
    }

    body[data-page="login"] .form-panel,
    body[data-page="register"] .form-panel,
    body[data-page="forgot-password"] .form-panel,
    body[data-page="reset-password"] .form-panel {
        align-items: flex-start;
        padding: 22px 22px 10px !important;
        overflow: visible;
    }

    body[data-page="login"] .form-inner,
    body[data-page="forgot-password"] .form-inner,
    body[data-page="reset-password"] .form-inner {
        max-width: 322px !important;
    }

    body[data-page="register"] .form-inner,
    body[data-page="register"] .form-inner-wide {
        max-width: 404px !important;
    }

    body[data-page="login"] .kicker,
    body[data-page="register"] .kicker,
    body[data-page="forgot-password"] .kicker,
    body[data-page="reset-password"] .kicker {
        margin-bottom: 6px;
        font-size: 8.5px;
    }

    body[data-page="login"] .title,
    body[data-page="register"] .title,
    body[data-page="forgot-password"] .title,
    body[data-page="reset-password"] .title {
        font-size: clamp(22px, 2.8vw, 27px);
        line-height: 1.08;
        margin-bottom: 6px;
    }

    body[data-page="login"] .sub,
    body[data-page="register"] .sub,
    body[data-page="forgot-password"] .sub,
    body[data-page="reset-password"] .sub {
        font-size: 11.5px;
        line-height: 1.52;
        margin-bottom: 14px;
    }

    body[data-page="login"] .alert,
    body[data-page="register"] .alert,
    body[data-page="forgot-password"] .alert,
    body[data-page="reset-password"] .alert {
        padding: 8px 10px;
        font-size: 11px;
        margin-bottom: 10px;
    }

    body[data-page="login"] .btn-social,
    body[data-page="register"] .btn-social,
    body[data-page="forgot-password"] .btn-social,
    body[data-page="reset-password"] .btn-social {
        min-height: 50px;
        padding: 10px 14px;
        font-size: 12.5px;
        margin-bottom: 6px;
    }

    body[data-page="login"] .btn-google > svg,
    body[data-page="register"] .btn-google > svg,
    body[data-page="forgot-password"] .btn-google > svg,
    body[data-page="reset-password"] .btn-google > svg {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
        padding: 4px;
    }

    body[data-page="login"] .google-auth-error,
    body[data-page="register"] .google-auth-error,
    body[data-page="forgot-password"] .google-auth-error,
    body[data-page="reset-password"] .google-auth-error {
        margin: 0 0 6px;
        font-size: 10px;
    }

    body[data-page="login"] .divider,
    body[data-page="register"] .divider,
    body[data-page="forgot-password"] .divider,
    body[data-page="reset-password"] .divider {
        margin: 10px 0;
    }

    body[data-page="login"] .divider-text,
    body[data-page="register"] .divider-text,
    body[data-page="forgot-password"] .divider-text,
    body[data-page="reset-password"] .divider-text {
        font-size: 9.5px;
    }

    body[data-page="login"] .form-table,
    body[data-page="register"] .form-table,
    body[data-page="forgot-password"] .form-table,
    body[data-page="reset-password"] .form-table {
        margin-bottom: 10px;
    }

    body[data-page="login"] .form-row,
    body[data-page="register"] .form-row,
    body[data-page="forgot-password"] .form-row,
    body[data-page="reset-password"] .form-row {
        grid-template-columns: 76px 1fr;
    }

    body[data-page="login"] .row-label,
    body[data-page="register"] .row-label,
    body[data-page="forgot-password"] .row-label,
    body[data-page="reset-password"] .row-label {
        padding: 0 9px;
        font-size: 9.5px;
    }

    body[data-page="login"] .row-input,
    body[data-page="register"] .row-input,
    body[data-page="forgot-password"] .row-input,
    body[data-page="reset-password"] .row-input,
    body[data-page="login"] .half-input,
    body[data-page="register"] .half-input,
    body[data-page="forgot-password"] .half-input,
    body[data-page="reset-password"] .half-input {
        padding: 11px 10px;
        font-size: 12.5px;
    }

    body[data-page="login"] .row-input.has-eye,
    body[data-page="register"] .row-input.has-eye,
    body[data-page="forgot-password"] .row-input.has-eye,
    body[data-page="reset-password"] .row-input.has-eye {
        padding-right: 32px;
    }

    body[data-page="login"] .row-forgot,
    body[data-page="register"] .row-forgot,
    body[data-page="forgot-password"] .row-forgot,
    body[data-page="reset-password"] .row-forgot {
        padding: 0 10px;
    }

    body[data-page="login"] .eye-btn,
    body[data-page="register"] .eye-btn,
    body[data-page="forgot-password"] .eye-btn,
    body[data-page="reset-password"] .eye-btn {
        right: 8px;
        padding: 3px;
    }

    body[data-page="login"] .eye-btn svg,
    body[data-page="register"] .eye-btn svg,
    body[data-page="forgot-password"] .eye-btn svg,
    body[data-page="reset-password"] .eye-btn svg {
        width: 12px;
        height: 12px;
    }

    body[data-page="login"] .forgot-link,
    body[data-page="register"] .forgot-link,
    body[data-page="forgot-password"] .forgot-link,
    body[data-page="reset-password"] .forgot-link {
        font-size: 10px;
    }

    body[data-page="login"] .btn,
    body[data-page="register"] .btn,
    body[data-page="forgot-password"] .btn,
    body[data-page="reset-password"] .btn {
        padding: 12px 16px;
        font-size: 12.5px;
    }

    body[data-page="login"] .form-foot,
    body[data-page="register"] .form-foot,
    body[data-page="forgot-password"] .form-foot,
    body[data-page="reset-password"] .form-foot {
        margin-top: 10px;
        font-size: 11px;
        margin-bottom: 0;
    }

    body[data-page="login"] .contact-bar,
    body[data-page="register"] .contact-bar,
    body[data-page="forgot-password"] .contact-bar,
    body[data-page="reset-password"] .contact-bar {
        margin-top: 10px;
        padding-top: 8px;
        font-size: 10px;
        margin-bottom: 0;
    }

    body[data-page="login"] .main-footer,
    body[data-page="register"] .main-footer,
    body[data-page="forgot-password"] .main-footer,
    body[data-page="reset-password"] .main-footer {
        margin-top: 0;
        padding: 22px 0 10px;
        border-top: 1px solid rgba(10, 9, 8, .08);
    }

    body[data-page="login"] .footer-grid,
    body[data-page="register"] .footer-grid,
    body[data-page="forgot-password"] .footer-grid,
    body[data-page="reset-password"] .footer-grid {
        gap: 14px;
    }

    body[data-page="login"] .footer-copy,
    body[data-page="register"] .footer-copy,
    body[data-page="forgot-password"] .footer-copy,
    body[data-page="reset-password"] .footer-copy {
        margin-top: 10px;
        padding-top: 8px;
    }
}

body[data-page="login"] .sub,
body[data-page="register"] .sub,
body[data-page="forgot-password"] .sub,
body[data-page="reset-password"] .sub,
body[data-page="login"] .divider-text,
body[data-page="register"] .divider-text,
body[data-page="forgot-password"] .divider-text,
body[data-page="reset-password"] .divider-text,
body[data-page="login"] .form-foot,
body[data-page="register"] .form-foot,
body[data-page="forgot-password"] .form-foot,
body[data-page="reset-password"] .form-foot,
body[data-page="login"] .contact-bar,
body[data-page="register"] .contact-bar,
body[data-page="forgot-password"] .contact-bar,
body[data-page="reset-password"] .contact-bar,
body[data-page="login"] .forgot-link,
body[data-page="register"] .forgot-link,
body[data-page="forgot-password"] .forgot-link,
body[data-page="reset-password"] .forgot-link {
    color: rgba(10, 9, 8, .72) !important;
}

body[data-page="login"] #ptr-indicator,
body[data-page="register"] #ptr-indicator,
body[data-page="forgot-password"] #ptr-indicator,
body[data-page="reset-password"] #ptr-indicator {
    display: none !important;
}

body[data-page="login"] .alert-err,
body[data-page="register"] .alert-err,
body[data-page="forgot-password"] .alert-err,
body[data-page="reset-password"] .alert-err {
    background: #fff1f1 !important;
    border-color: rgba(197, 48, 48, .30) !important;
    color: #8f1f1f !important;
}

body[data-page="login"] .alert-ok,
body[data-page="register"] .alert-ok,
body[data-page="forgot-password"] .alert-ok,
body[data-page="reset-password"] .alert-ok {
    background: #edf9f1 !important;
    border-color: rgba(46, 125, 87, .32) !important;
    color: #1f5b3d !important;
}

body[data-page="login"] .btn-social,
body[data-page="register"] .btn-social,
body[data-page="forgot-password"] .btn-social,
body[data-page="reset-password"] .btn-social {
    background: #fffdfa !important;
    border: 1px solid rgba(10, 9, 8, .20) !important;
    color: #161311 !important;
    box-shadow: 0 10px 24px rgba(10, 9, 8, .08) !important;
}

body[data-page="login"] .form-table,
body[data-page="register"] .form-table,
body[data-page="forgot-password"] .form-table,
body[data-page="reset-password"] .form-table {
    border-color: rgba(10, 9, 8, .18) !important;
    background: #fff !important;
    box-shadow: 0 1px 0 rgba(10, 9, 8, .02), 0 8px 20px rgba(10, 9, 8, .04);
}

body[data-page="login"] .form-row,
body[data-page="register"] .form-row,
body[data-page="forgot-password"] .form-row,
body[data-page="reset-password"] .form-row {
    border-bottom-color: rgba(10, 9, 8, .14) !important;
    background: #fff !important;
}

body[data-page="login"] .form-row:focus-within,
body[data-page="register"] .form-row:focus-within,
body[data-page="forgot-password"] .form-row:focus-within,
body[data-page="reset-password"] .form-row:focus-within {
    background: #fff7f2 !important;
}

body[data-page="login"] .row-label,
body[data-page="register"] .row-label,
body[data-page="forgot-password"] .row-label,
body[data-page="reset-password"] .row-label,
body[data-page="login"] .row-label-plain,
body[data-page="register"] .row-label-plain,
body[data-page="forgot-password"] .row-label-plain,
body[data-page="reset-password"] .row-label-plain {
    background: #f3eee8 !important;
    border-color: rgba(10, 9, 8, .14) !important;
    color: rgba(10, 9, 8, .82) !important;
    font-weight: 500 !important;
}

body[data-page="login"] .row-input,
body[data-page="register"] .row-input,
body[data-page="forgot-password"] .row-input,
body[data-page="reset-password"] .row-input,
body[data-page="login"] .half-input,
body[data-page="register"] .half-input,
body[data-page="forgot-password"] .half-input,
body[data-page="reset-password"] .half-input,
body[data-page="login"] .field-input,
body[data-page="register"] .field-input,
body[data-page="forgot-password"] .field-input,
body[data-page="reset-password"] .field-input {
    color: #14110f !important;
    font-weight: 400 !important;
    background: #fff !important;
}

body[data-page="login"] .row-input::placeholder,
body[data-page="register"] .row-input::placeholder,
body[data-page="forgot-password"] .row-input::placeholder,
body[data-page="reset-password"] .row-input::placeholder,
body[data-page="login"] .half-input::placeholder,
body[data-page="register"] .half-input::placeholder,
body[data-page="forgot-password"] .half-input::placeholder,
body[data-page="reset-password"] .half-input::placeholder,
body[data-page="login"] .field-input::placeholder,
body[data-page="register"] .field-input::placeholder,
body[data-page="forgot-password"] .field-input::placeholder,
body[data-page="reset-password"] .field-input::placeholder {
    color: rgba(10, 9, 8, .46) !important;
}

body[data-page="login"] .eye-btn,
body[data-page="register"] .eye-btn,
body[data-page="forgot-password"] .eye-btn,
body[data-page="reset-password"] .eye-btn {
    color: rgba(10, 9, 8, .56) !important;
}

body[data-page="login"] .contact-bar,
body[data-page="register"] .contact-bar,
body[data-page="forgot-password"] .contact-bar,
body[data-page="reset-password"] .contact-bar {
    color: rgba(10, 9, 8, .82) !important;
    font-weight: 400 !important;
    border-top-color: rgba(10, 9, 8, .14) !important;
}

body[data-page="login"] .contact-bar a,
body[data-page="register"] .contact-bar a,
body[data-page="forgot-password"] .contact-bar a,
body[data-page="reset-password"] .contact-bar a {
    color: #111 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

body[data-page="login"] .p-contact-head span,
body[data-page="register"] .p-contact-head span,
body[data-page="forgot-password"] .p-contact-head span,
body[data-page="reset-password"] .p-contact-head span {
    color: rgba(245, 241, 236, .82) !important;
}

body[data-page="login"] .p-contact-label,
body[data-page="register"] .p-contact-label,
body[data-page="forgot-password"] .p-contact-label,
body[data-page="reset-password"] .p-contact-label {
    color: rgba(245, 241, 236, .66) !important;
    font-weight: 500 !important;
}

body[data-page="login"] .p-contact-copy span,
body[data-page="login"] .p-contact-copy a,
body[data-page="register"] .p-contact-copy span,
body[data-page="register"] .p-contact-copy a,
body[data-page="forgot-password"] .p-contact-copy span,
body[data-page="forgot-password"] .p-contact-copy a,
body[data-page="reset-password"] .p-contact-copy span,
body[data-page="reset-password"] .p-contact-copy a,
body[data-page="login"] .p-contact-address span,
body[data-page="register"] .p-contact-address span,
body[data-page="forgot-password"] .p-contact-address span,
body[data-page="reset-password"] .p-contact-address span {
    color: rgba(245, 241, 236, .96) !important;
    font-weight: 400 !important;
}

body[data-page="login"] .p-contact-block-contact,
body[data-page="register"] .p-contact-block-contact,
body[data-page="forgot-password"] .p-contact-block-contact,
body[data-page="reset-password"] .p-contact-block-contact {
    padding: 14px 16px !important;
}

body[data-page="login"] .p-contact-contact-lines,
body[data-page="register"] .p-contact-contact-lines,
body[data-page="forgot-password"] .p-contact-contact-lines,
body[data-page="reset-password"] .p-contact-contact-lines {
    gap: 6px !important;
}

body[data-page="login"] .p-contact-contact-line,
body[data-page="register"] .p-contact-contact-line,
body[data-page="forgot-password"] .p-contact-contact-line,
body[data-page="reset-password"] .p-contact-contact-line {
    color: rgba(245, 241, 236, .98) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
}

body[data-page="login"] .p-contact-contact-line-email,
body[data-page="register"] .p-contact-contact-line-email,
body[data-page="forgot-password"] .p-contact-contact-line-email,
body[data-page="reset-password"] .p-contact-contact-line-email {
    color: rgba(245, 241, 236, .98) !important;
}

body[data-page="login"] .p-contact-contact-line span:last-child,
body[data-page="register"] .p-contact-contact-line span:last-child,
body[data-page="forgot-password"] .p-contact-contact-line span:last-child,
body[data-page="reset-password"] .p-contact-contact-line span:last-child {
    white-space: nowrap !important;
}

body[data-page="forgot-password"] .panel,
body[data-page="reset-password"] .panel {
    gap: 18px;
}

body[data-page="forgot-password"] .p-contact-card,
body[data-page="reset-password"] .p-contact-card {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body[data-page="forgot-password"] .p-contact-body,
body[data-page="reset-password"] .p-contact-body {
    gap: 10px;
    padding: 14px;
}

body[data-page="forgot-password"] .p-contact-block-address,
body[data-page="forgot-password"] .p-contact-block-contact,
body[data-page="reset-password"] .p-contact-block-address,
body[data-page="reset-password"] .p-contact-block-contact {
    padding: 12px 14px !important;
}

@media (max-width: 940px) {
    body[data-page="forgot-password"] .auth-exact-stage,
    body[data-page="reset-password"] .auth-exact-stage {
        padding: 0;
    }

    body[data-page="forgot-password"] .shell,
    body[data-page="reset-password"] .shell {
        display: block !important;
        max-width: 100% !important;
        min-height: auto !important;
        border-radius: 0;
        box-shadow: none;
    }

    body[data-page="forgot-password"] .panel,
    body[data-page="reset-password"] .panel {
        display: none !important;
    }

    body[data-page="forgot-password"] .form-panel,
    body[data-page="reset-password"] .form-panel {
        width: 100%;
        padding: 24px 20px 24px !important;
        min-height: auto;
        overflow: visible;
    }

    body[data-page="forgot-password"] .form-inner,
    body[data-page="reset-password"] .form-inner {
        max-width: 100% !important;
    }
}

@media (min-width: 941px) {
    body[data-page="forgot-password"] .auth-exact-stage,
    body[data-page="reset-password"] .auth-exact-stage {
        padding-top: 8px !important;
        padding-bottom: 16px !important;
    }

    body[data-page="forgot-password"] .shell,
    body[data-page="reset-password"] .shell {
        min-height: 0 !important;
        align-items: start !important;
    }

    body[data-page="forgot-password"] .form-panel,
    body[data-page="reset-password"] .form-panel {
        padding-top: 10px !important;
    }
}

body[data-page="login"] .shell,
body[data-page="register"] .shell,
body[data-page="forgot-password"] .shell,
body[data-page="reset-password"] .shell {
    border-radius: 10px !important;
}

body[data-page="login"] .p-contact-card,
body[data-page="register"] .p-contact-card,
body[data-page="forgot-password"] .p-contact-card,
body[data-page="reset-password"] .p-contact-card {
    border-radius: 12px !important;
}

body[data-page="login"] .p-contact-block,
body[data-page="register"] .p-contact-block,
body[data-page="forgot-password"] .p-contact-block,
body[data-page="reset-password"] .p-contact-block {
    border-radius: 12px !important;
}

body[data-page="login"] .auth-exact-stage,
body[data-page="register"] .auth-exact-stage,
body[data-page="forgot-password"] .auth-exact-stage,
body[data-page="reset-password"] .auth-exact-stage {
    padding-bottom: 0 !important;
}

body[data-page="login"] .main-footer,
body[data-page="register"] .main-footer,
body[data-page="forgot-password"] .main-footer,
body[data-page="reset-password"] .main-footer {
    padding-top: 8px !important;
}

body[data-page="login"] .footer-surface,
body[data-page="register"] .footer-surface,
body[data-page="forgot-password"] .footer-surface,
body[data-page="reset-password"] .footer-surface {
    border-radius: 10px !important;
    padding: 18px 20px 12px;
}

body[data-page="login"] .footer-contact-panel,
body[data-page="register"] .footer-contact-panel,
body[data-page="forgot-password"] .footer-contact-panel,
body[data-page="reset-password"] .footer-contact-panel {
    gap: 6px;
}

body[data-page="login"] .footer-logo-wrap,
body[data-page="register"] .footer-logo-wrap,
body[data-page="forgot-password"] .footer-logo-wrap,
body[data-page="reset-password"] .footer-logo-wrap {
    width: 112px;
    height: 44px;
}

body[data-page="login"] .footer-brand-lockup,
body[data-page="register"] .footer-brand-lockup,
body[data-page="forgot-password"] .footer-brand-lockup,
body[data-page="reset-password"] .footer-brand-lockup {
    align-items: flex-start;
    justify-content: flex-start;
}

body[data-page="login"] .footer-logo,
body[data-page="register"] .footer-logo,
body[data-page="forgot-password"] .footer-logo,
body[data-page="reset-password"] .footer-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
    transform: none;
}

body[data-page="login"] .footer-grid,
body[data-page="register"] .footer-grid,
body[data-page="forgot-password"] .footer-grid,
body[data-page="reset-password"] .footer-grid {
    gap: 12px 30px;
}

body[data-page="login"] .footer-title,
body[data-page="register"] .footer-title,
body[data-page="forgot-password"] .footer-title,
body[data-page="reset-password"] .footer-title {
    margin-bottom: 6px;
}

body[data-page="login"] .footer-contact-list,
body[data-page="register"] .footer-contact-list,
body[data-page="forgot-password"] .footer-contact-list,
body[data-page="reset-password"] .footer-contact-list {
    gap: 4px;
    padding-top: 0;
}

body[data-page="login"] .footer-contact-item,
body[data-page="register"] .footer-contact-item,
body[data-page="forgot-password"] .footer-contact-item,
body[data-page="reset-password"] .footer-contact-item {
    padding: 2px 0;
}

body[data-page="login"] .footer-hours,
body[data-page="register"] .footer-hours,
body[data-page="forgot-password"] .footer-hours,
body[data-page="reset-password"] .footer-hours {
    gap: 2px;
    padding-top: 0;
}

body[data-page="login"] .footer-hours-line,
body[data-page="register"] .footer-hours-line,
body[data-page="forgot-password"] .footer-hours-line,
body[data-page="reset-password"] .footer-hours-line,
body[data-page="login"] .footer-address,
body[data-page="register"] .footer-address,
body[data-page="forgot-password"] .footer-address,
body[data-page="reset-password"] .footer-address {
    line-height: 1.45;
}

body[data-page="login"] .footer-address-block,
body[data-page="register"] .footer-address-block,
body[data-page="forgot-password"] .footer-address-block,
body[data-page="reset-password"] .footer-address-block {
    gap: 2px;
    padding-top: 0;
}

body[data-page="login"] .footer-social-block,
body[data-page="register"] .footer-social-block,
body[data-page="forgot-password"] .footer-social-block,
body[data-page="reset-password"] .footer-social-block {
    gap: 4px;
    padding-top: 0;
}

body[data-page="login"] .footer-copy,
body[data-page="register"] .footer-copy,
body[data-page="forgot-password"] .footer-copy,
body[data-page="reset-password"] .footer-copy {
    margin-top: 6px;
    padding-top: 6px;
}

@media (min-width: 1280px) {
    body[data-page="login"] .footer-grid,
    body[data-page="register"] .footer-grid,
    body[data-page="forgot-password"] .footer-grid,
    body[data-page="reset-password"] .footer-grid {
        grid-template-columns: minmax(150px, 1fr) minmax(180px, 1fr) minmax(180px, 1fr) minmax(320px, 1.25fr);
        gap: 12px 34px;
    }

    body[data-page="login"] .footer-contact-panel,
    body[data-page="register"] .footer-contact-panel,
    body[data-page="forgot-password"] .footer-contact-panel,
    body[data-page="reset-password"] .footer-contact-panel {
        grid-column: auto;
        grid-template-columns: none;
        gap: 6px;
        align-content: normal;
    }
}

body[data-page="register"] .form-table {
    border-color: rgba(10,9,8,.07);
    border-radius: 10px;
    background: rgba(255,255,255,.9);
}

body[data-page="register"] .form-row {
    border-bottom-color: rgba(10,9,8,.08);
    background: rgba(255,255,255,.82);
}

body[data-page="register"] .form-row:focus-within {
    background: rgba(200,57,10,.02);
}

body[data-page="register"] .row-label {
    padding: 0 11px;
    color: rgba(10,9,8,.74);
    background: rgba(244,240,235,.66);
}

body[data-page="register"] .row-input {
    padding: 11px 14px;
    font-weight: 400;
    color: var(--ink2);
}

body[data-page="register"] .row-input::placeholder {
    color: rgba(10,9,8,.34);
}

body[data-page="register"] .row-input.has-eye {
    padding-right: 50px;
}

body[data-page="register"] .eye-btn {
    top: 0;
    right: 0;
    bottom: 0;
    width: 44px;
    padding: 0;
    justify-content: center;
    border-left: 1px solid rgba(10,9,8,.08);
    background: rgba(250,248,245,.9);
    color: rgba(10,9,8,.5);
}

body[data-page="register"] .eye-btn:hover {
    color: rgba(10,9,8,.74);
    background: rgba(245,242,237,.96);
}

body[data-page="forgot-password"] .title,
body[data-page="reset-password"] .title {
    margin-bottom: 2px;
    line-height: 1.03;
}

body[data-page="forgot-password"] .sub,
body[data-page="reset-password"] .sub {
    max-width: 32ch;
    margin-bottom: 16px !important;
}

body[data-page="forgot-password"] .form-foot,
body[data-page="reset-password"] .form-foot {
    margin-top: 12px;
}

body[data-page="forgot-password"] .contact-bar,
body[data-page="reset-password"] .contact-bar {
    margin-top: 10px !important;
    padding-top: 10px !important;
}

body[data-page="forgot-password"] .row-label,
body[data-page="reset-password"] .row-label,
body[data-page="forgot-password"] .row-label-plain,
body[data-page="reset-password"] .row-label-plain {
    background: #f7f3ee !important;
    color: rgba(10, 9, 8, .74) !important;
    font-weight: 400 !important;
    border-color: rgba(10, 9, 8, .12) !important;
}

@media (min-width: 768px) {
    body[data-page="forgot-password"] .auth-exact-stage,
    body[data-page="reset-password"] .auth-exact-stage {
        padding: 10px 14px 0 !important;
    }

    body[data-page="forgot-password"] .shell,
    body[data-page="reset-password"] .shell {
        min-height: 0 !important;
        align-items: start !important;
    }

    body[data-page="forgot-password"] .form-panel,
    body[data-page="reset-password"] .form-panel {
        align-self: start;
        padding: 18px 22px 0 !important;
    }

    body[data-page="forgot-password"] .form-inner,
    body[data-page="reset-password"] .form-inner {
        max-width: 342px !important;
    }
}

@media (min-width: 941px) {
    body[data-page="forgot-password"] .panel,
    body[data-page="reset-password"] .panel {
        padding-bottom: 14px !important;
    }

    body[data-page="forgot-password"] .p-headline,
    body[data-page="reset-password"] .p-headline {
        margin-bottom: 0 !important;
    }

    body[data-page="forgot-password"] .p-contact-card,
    body[data-page="reset-password"] .p-contact-card {
        margin-top: 14px !important;
    }

    body[data-page="forgot-password"] .p-contact-body,
    body[data-page="reset-password"] .p-contact-body {
        padding: 12px !important;
        gap: 8px !important;
    }

    body[data-page="forgot-password"] .p-contact-block-address,
    body[data-page="reset-password"] .p-contact-block-address {
        display: flex !important;
    }

    body[data-page="forgot-password"] .p-contact-block-contact,
    body[data-page="reset-password"] .p-contact-block-contact {
        padding: 12px 14px !important;
    }
}

body[data-page="login"] .p-brand,
body[data-page="register"] .p-brand,
body[data-page="forgot-password"] .p-brand,
body[data-page="reset-password"] .p-brand {
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px !important;
}

body[data-page="login"] .p-brand-copy,
body[data-page="register"] .p-brand-copy,
body[data-page="forgot-password"] .p-brand-copy,
body[data-page="reset-password"] .p-brand-copy {
    gap: 4px;
    padding-top: 2px;
}

body[data-page="login"] .p-brand-ring,
body[data-page="register"] .p-brand-ring,
body[data-page="forgot-password"] .p-brand-ring,
body[data-page="reset-password"] .p-brand-ring {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 18px rgba(200,57,10,.16);
}

body[data-page="login"] .p-brand-name,
body[data-page="register"] .p-brand-name,
body[data-page="forgot-password"] .p-brand-name,
body[data-page="reset-password"] .p-brand-name,
body[data-page="login"] .mh-name,
body[data-page="register"] .mh-name,
body[data-page="forgot-password"] .mh-name,
body[data-page="reset-password"] .mh-name {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}

body[data-page="login"] .p-brand-name .brand-word,
body[data-page="register"] .p-brand-name .brand-word,
body[data-page="forgot-password"] .p-brand-name .brand-word,
body[data-page="reset-password"] .p-brand-name .brand-word,
body[data-page="login"] .mh-name .brand-word,
body[data-page="register"] .mh-name .brand-word,
body[data-page="forgot-password"] .mh-name .brand-word,
body[data-page="reset-password"] .mh-name .brand-word {
    white-space: nowrap;
}

body[data-page="login"] .p-brand-name .brand-sep,
body[data-page="register"] .p-brand-name .brand-sep,
body[data-page="forgot-password"] .p-brand-name .brand-sep,
body[data-page="reset-password"] .p-brand-name .brand-sep,
body[data-page="login"] .mh-name .brand-sep,
body[data-page="register"] .mh-name .brand-sep,
body[data-page="forgot-password"] .mh-name .brand-sep,
body[data-page="reset-password"] .mh-name .brand-sep {
    color: rgba(245,241,236,.38);
    font-weight: 400;
    transform: translateY(-1px);
}

body[data-page="login"] .p-brand-name,
body[data-page="register"] .p-brand-name,
body[data-page="forgot-password"] .p-brand-name,
body[data-page="reset-password"] .p-brand-name {
    font-size: clamp(17px, 1.85vw, 19px) !important;
    line-height: .94;
    font-weight: 600;
}

body[data-page="login"] .p-brand-tag,
body[data-page="register"] .p-brand-tag,
body[data-page="forgot-password"] .p-brand-tag,
body[data-page="reset-password"] .p-brand-tag {
    font-size: 9px !important;
    letter-spacing: .11em;
    color: rgba(245,241,236,.74) !important;
    margin-top: 0;
}

body[data-page="login"] .p-contact-card,
body[data-page="register"] .p-contact-card,
body[data-page="forgot-password"] .p-contact-card,
body[data-page="reset-password"] .p-contact-card {
    margin-top: clamp(18px, 3vh, 28px) !important;
    margin-bottom: 0 !important;
    background: rgba(255,255,255,.018);
    box-shadow: 0 12px 30px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.025);
}

body[data-page="login"] .p-contact-body,
body[data-page="register"] .p-contact-body,
body[data-page="forgot-password"] .p-contact-body,
body[data-page="reset-password"] .p-contact-body {
    gap: 10px;
    padding: 14px;
}

body[data-page="login"] .p-contact-block,
body[data-page="register"] .p-contact-block,
body[data-page="forgot-password"] .p-contact-block,
body[data-page="reset-password"] .p-contact-block,
body[data-page="login"] .p-contact-block-address,
body[data-page="register"] .p-contact-block-address,
body[data-page="forgot-password"] .p-contact-block-address,
body[data-page="reset-password"] .p-contact-block-address,
body[data-page="login"] .p-contact-block-contact,
body[data-page="register"] .p-contact-block-contact,
body[data-page="forgot-password"] .p-contact-block-contact,
body[data-page="reset-password"] .p-contact-block-contact {
    padding: 12px 14px !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.028) 100%);
}

body[data-page="login"] .p-contact-icon,
body[data-page="register"] .p-contact-icon,
body[data-page="forgot-password"] .p-contact-icon,
body[data-page="reset-password"] .p-contact-icon {
    width: 32px;
    height: 32px;
}

body[data-page="login"] .p-contact-copy,
body[data-page="register"] .p-contact-copy,
body[data-page="forgot-password"] .p-contact-copy,
body[data-page="reset-password"] .p-contact-copy {
    gap: 3px;
}

body[data-page="login"] .p-contact-label,
body[data-page="register"] .p-contact-label,
body[data-page="forgot-password"] .p-contact-label,
body[data-page="reset-password"] .p-contact-label {
    color: rgba(245,241,236,.48);
    letter-spacing: .11em;
}

body[data-page="login"] .p-contact-copy span,
body[data-page="register"] .p-contact-copy span,
body[data-page="forgot-password"] .p-contact-copy span,
body[data-page="reset-password"] .p-contact-copy span,
body[data-page="login"] .p-contact-copy a,
body[data-page="register"] .p-contact-copy a,
body[data-page="forgot-password"] .p-contact-copy a,
body[data-page="reset-password"] .p-contact-copy a {
    line-height: 1.52;
}

@media (max-width: 767px) {
    /* Keep auth pages edge-to-edge on mobile without forcing the same empty spacer onto every flow. */
    body[data-page="login"],
    body[data-page="register"],
    body[data-page="forgot-password"],
    body[data-page="reset-password"] {
        overflow: hidden;
        overscroll-behavior-y: none;
    }

    body[data-page="login"] .main-footer,
    body[data-page="register"] .main-footer,
    body[data-page="forgot-password"] .main-footer,
    body[data-page="reset-password"] .main-footer {
        display: none !important;
    }

    body[data-page="login"] #bot-nav,
    body[data-page="register"] #bot-nav,
    body[data-page="forgot-password"] #bot-nav,
    body[data-page="reset-password"] #bot-nav {
        display: flex !important;
    }

    body[data-page="login"] #main-scroll,
    body[data-page="register"] #main-scroll,
    body[data-page="forgot-password"] #main-scroll,
    body[data-page="reset-password"] #main-scroll {
        overflow: hidden !important;
        overscroll-behavior-y: none !important;
        -webkit-overflow-scrolling: auto !important;
        padding-bottom: 0 !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    body[data-page="login"] #main-scroll::-webkit-scrollbar,
    body[data-page="register"] #main-scroll::-webkit-scrollbar,
    body[data-page="forgot-password"] #main-scroll::-webkit-scrollbar,
    body[data-page="reset-password"] #main-scroll::-webkit-scrollbar,
    body[data-page="login"] .form-panel::-webkit-scrollbar,
    body[data-page="register"] .form-panel::-webkit-scrollbar,
    body[data-page="forgot-password"] .form-panel::-webkit-scrollbar,
    body[data-page="reset-password"] .form-panel::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
    }

    body[data-page="register"] .auth-exact-stage,
    body[data-page="forgot-password"] .auth-exact-stage,
    body[data-page="reset-password"] .auth-exact-stage,
    body[data-page="register"] .shell,
    body[data-page="forgot-password"] .shell,
    body[data-page="reset-password"] .shell,
    body[data-page="register"] .form-panel,
    body[data-page="forgot-password"] .form-panel,
    body[data-page="reset-password"] .form-panel {
        min-height: calc(100dvh - var(--nav-h) - var(--bot-h) - env(safe-area-inset-bottom));
        max-height: calc(100dvh - var(--nav-h) - var(--bot-h) - env(safe-area-inset-bottom));
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
        overflow: hidden !important;
        overscroll-behavior-y: none !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    body[data-page="login"] .auth-exact-stage,
    body[data-page="login"] .shell,
    body[data-page="login"] .form-panel {
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
    }

    body[data-page="login"] .auth-exact-stage {
        justify-content: flex-start !important;
        overflow: visible !important;
    }

    body[data-page="login"] .shell {
        padding-bottom: 0 !important;
        overflow: visible !important;
    }

    body[data-page="login"] .form-panel {
        justify-content: flex-start !important;
        padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        overflow: visible !important;
    }

    body[data-page="login"] .google-auth-frame,
    body[data-page="register"] .google-auth-frame,
    body[data-page="login"] .google-auth-host,
    body[data-page="register"] .google-auth-host {
        width: 100% !important;
        max-width: 324px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body[data-page="login"] .google-auth-shell,
    body[data-page="register"] .google-auth-shell {
        width: 100% !important;
        max-width: 352px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    body[data-page="login"] .google-auth-frame[data-google-skin="transparent"] .google-auth-skin,
    body[data-page="register"] .google-auth-frame[data-google-skin="transparent"] .google-auth-skin {
        display: flex !important;
        opacity: 1 !important;
    }

    body[data-page="login"] .google-auth-skin-btn,
    body[data-page="register"] .google-auth-skin-btn {
        padding: 0 18px 0 46px;
        font-size: 13.5px;
        font-weight: 500;
        letter-spacing: .025em;
    }

    body[data-page="login"] .google-auth-skin-btn svg,
    body[data-page="register"] .google-auth-skin-btn svg {
        width: 20px;
        height: 20px;
        left: 18px;
    }

    body[data-page="login"] .google-auth-frame[data-google-skin="transparent"] .google-auth-host > div,
    body[data-page="register"] .google-auth-frame[data-google-skin="transparent"] .google-auth-host > div,
    body[data-page="login"] .google-auth-frame[data-google-skin="transparent"] .google-auth-host iframe,
    body[data-page="register"] .google-auth-frame[data-google-skin="transparent"] .google-auth-host iframe {
        opacity: 1 !important;
    }

    body[data-page="login"] .form-inner,
    body[data-page="login"] .form-inner-wide {
        min-height: auto !important;
        display: block !important;
    }

    body[data-page="login"] .contact-bar {
        margin-top: 18px !important;
    }

    body[data-page="register"] .form-panel {
        justify-content: flex-start !important;
    }

    body[data-page="register"] .form-inner,
    body[data-page="register"] .form-inner-wide {
        min-height: clamp(520px, 66dvh, 580px) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body[data-page="register"] .contact-bar {
        margin-top: auto !important;
    }

    body[data-page="forgot-password"] .form-panel,
    body[data-page="reset-password"] .form-panel {
        justify-content: flex-start !important;
    }

    body[data-page="forgot-password"] .form-inner,
    body[data-page="forgot-password"] .form-inner-wide,
    body[data-page="reset-password"] .form-inner,
    body[data-page="reset-password"] .form-inner-wide {
        min-height: clamp(360px, 46dvh, 430px) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body[data-page="forgot-password"] .contact-bar,
    body[data-page="reset-password"] .contact-bar {
        margin-top: 18px !important;
    }
}

@media (max-width: 767px) and (max-height: 760px) {
    body[data-page="login"] .auth-exact-stage,
    body[data-page="register"] .auth-exact-stage,
    body[data-page="forgot-password"] .auth-exact-stage,
    body[data-page="reset-password"] .auth-exact-stage {
        padding: 10px 12px 0 !important;
    }

    body[data-page="login"] .form-panel,
    body[data-page="register"] .form-panel,
    body[data-page="forgot-password"] .form-panel,
    body[data-page="reset-password"] .form-panel {
        padding: 12px 16px calc(10px + env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain !important;
        justify-content: flex-start !important;
    }

    body[data-page="login"] .form-inner,
    body[data-page="login"] .form-inner-wide,
    body[data-page="register"] .form-inner,
    body[data-page="register"] .form-inner-wide,
    body[data-page="forgot-password"] .form-inner,
    body[data-page="forgot-password"] .form-inner-wide,
    body[data-page="reset-password"] .form-inner,
    body[data-page="reset-password"] .form-inner-wide {
        min-height: 0 !important;
        display: block !important;
    }

    body[data-page="login"] .back-btn,
    body[data-page="register"] .back-btn,
    body[data-page="forgot-password"] .back-btn,
    body[data-page="reset-password"] .back-btn {
        margin-bottom: 8px !important;
    }

    body[data-page="login"] .kicker,
    body[data-page="register"] .kicker,
    body[data-page="forgot-password"] .kicker,
    body[data-page="reset-password"] .kicker {
        margin-bottom: 4px !important;
        font-size: 8.5px !important;
    }

    body[data-page="login"] .title,
    body[data-page="register"] .title,
    body[data-page="forgot-password"] .title,
    body[data-page="reset-password"] .title {
        font-size: clamp(19px, 5.6vw, 24px) !important;
        line-height: 1.02 !important;
        margin-bottom: 2px !important;
    }

    body[data-page="login"] .sub,
    body[data-page="register"] .sub,
    body[data-page="forgot-password"] .sub,
    body[data-page="reset-password"] .sub {
        font-size: 10.75px !important;
        line-height: 1.42 !important;
        margin-bottom: 8px !important;
    }

    body[data-page="login"] .btn-social,
    body[data-page="register"] .btn-social,
    body[data-page="forgot-password"] .btn-social,
    body[data-page="reset-password"] .btn-social {
        min-height: 48px !important;
        padding: 10px 14px !important;
        font-size: 13px !important;
    }

    body[data-page="login"] .btn-google,
    body[data-page="register"] .btn-google,
    body[data-page="forgot-password"] .btn-google,
    body[data-page="reset-password"] .btn-google {
        margin-bottom: 4px !important;
    }

    body[data-page="login"] .btn-google > svg,
    body[data-page="register"] .btn-google > svg,
    body[data-page="forgot-password"] .btn-google > svg,
    body[data-page="reset-password"] .btn-google > svg {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        padding: 4px !important;
    }

    body[data-page="login"] .divider,
    body[data-page="register"] .divider,
    body[data-page="forgot-password"] .divider,
    body[data-page="reset-password"] .divider {
        margin: 8px 0 !important;
    }

    body[data-page="login"] .divider-text,
    body[data-page="register"] .divider-text,
    body[data-page="forgot-password"] .divider-text,
    body[data-page="reset-password"] .divider-text {
        font-size: 10px !important;
    }

    body[data-page="login"] .form-table,
    body[data-page="register"] .form-table,
    body[data-page="forgot-password"] .form-table,
    body[data-page="reset-password"] .form-table {
        margin-bottom: 8px !important;
    }

    body[data-page="login"] .form-row,
    body[data-page="register"] .form-row,
    body[data-page="forgot-password"] .form-row,
    body[data-page="reset-password"] .form-row {
        grid-template-columns: 80px 1fr !important;
    }

    body[data-page="login"] .row-label,
    body[data-page="register"] .row-label,
    body[data-page="forgot-password"] .row-label,
    body[data-page="reset-password"] .row-label {
        padding: 0 10px !important;
        font-size: 10px !important;
    }

    body[data-page="login"] .row-input,
    body[data-page="register"] .row-input,
    body[data-page="forgot-password"] .row-input,
    body[data-page="reset-password"] .row-input {
        padding: 9px 10px !important;
        font-size: 13px !important;
    }

    body[data-page="login"] .check-row,
    body[data-page="register"] .check-row,
    body[data-page="forgot-password"] .check-row,
    body[data-page="reset-password"] .check-row {
        margin-bottom: 10px !important;
    }

    body[data-page="login"] .btn,
    body[data-page="register"] .btn,
    body[data-page="forgot-password"] .btn,
    body[data-page="reset-password"] .btn {
        padding: 10px 16px !important;
        font-size: 13px !important;
    }

    body[data-page="login"] .form-foot,
    body[data-page="register"] .form-foot,
    body[data-page="forgot-password"] .form-foot,
    body[data-page="reset-password"] .form-foot {
        margin-top: 6px !important;
        font-size: 11.5px !important;
    }

    body[data-page="login"] .contact-bar,
    body[data-page="register"] .contact-bar,
    body[data-page="forgot-password"] .contact-bar,
    body[data-page="reset-password"] .contact-bar {
        margin-top: 6px !important;
        padding-top: 6px !important;
        font-size: 10px !important;
    }
}

@media (max-width: 767px) and (max-height: 760px) {
    body[data-page="login"] .auth-exact-stage,
    body[data-page="register"] .auth-exact-stage,
    body[data-page="forgot-password"] .auth-exact-stage,
    body[data-page="reset-password"] .auth-exact-stage {
        padding: 10px 12px 0 !important;
    }

    body[data-page="login"] .form-panel,
    body[data-page="register"] .form-panel,
    body[data-page="forgot-password"] .form-panel,
    body[data-page="reset-password"] .form-panel {
        padding: 12px 16px calc(10px + env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
        overscroll-behavior-y: contain !important;
        justify-content: flex-start !important;
    }

    body[data-page="login"] .form-inner,
    body[data-page="login"] .form-inner-wide,
    body[data-page="register"] .form-inner,
    body[data-page="register"] .form-inner-wide,
    body[data-page="forgot-password"] .form-inner,
    body[data-page="forgot-password"] .form-inner-wide,
    body[data-page="reset-password"] .form-inner,
    body[data-page="reset-password"] .form-inner-wide {
        min-height: 0 !important;
        display: block !important;
    }

    body[data-page="login"] .back-btn,
    body[data-page="register"] .back-btn,
    body[data-page="forgot-password"] .back-btn,
    body[data-page="reset-password"] .back-btn {
        margin-bottom: 8px !important;
    }

    body[data-page="login"] .kicker,
    body[data-page="register"] .kicker,
    body[data-page="forgot-password"] .kicker,
    body[data-page="reset-password"] .kicker {
        margin-bottom: 4px !important;
        font-size: 8.5px !important;
    }

    body[data-page="login"] .title,
    body[data-page="register"] .title,
    body[data-page="forgot-password"] .title,
    body[data-page="reset-password"] .title {
        font-size: clamp(19px, 5.6vw, 24px) !important;
        line-height: 1.02 !important;
        margin-bottom: 2px !important;
    }

    body[data-page="login"] .sub,
    body[data-page="register"] .sub,
    body[data-page="forgot-password"] .sub,
    body[data-page="reset-password"] .sub {
        font-size: 10.75px !important;
        line-height: 1.42 !important;
        margin-bottom: 8px !important;
    }

    body[data-page="login"] .btn-social,
    body[data-page="register"] .btn-social,
    body[data-page="forgot-password"] .btn-social,
    body[data-page="reset-password"] .btn-social {
        min-height: 48px !important;
        padding: 10px 14px !important;
        font-size: 13px !important;
    }

    body[data-page="login"] .btn-google,
    body[data-page="register"] .btn-google,
    body[data-page="forgot-password"] .btn-google,
    body[data-page="reset-password"] .btn-google {
        margin-bottom: 4px !important;
    }

    body[data-page="login"] .btn-google > svg,
    body[data-page="register"] .btn-google > svg,
    body[data-page="forgot-password"] .btn-google > svg,
    body[data-page="reset-password"] .btn-google > svg {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        padding: 4px !important;
    }

    body[data-page="login"] .divider,
    body[data-page="register"] .divider,
    body[data-page="forgot-password"] .divider,
    body[data-page="reset-password"] .divider {
        margin: 8px 0 !important;
    }

    body[data-page="login"] .divider-text,
    body[data-page="register"] .divider-text,
    body[data-page="forgot-password"] .divider-text,
    body[data-page="reset-password"] .divider-text {
        font-size: 10px !important;
    }

    body[data-page="login"] .form-table,
    body[data-page="register"] .form-table,
    body[data-page="forgot-password"] .form-table,
    body[data-page="reset-password"] .form-table {
        margin-bottom: 8px !important;
    }

    body[data-page="login"] .form-row,
    body[data-page="register"] .form-row,
    body[data-page="forgot-password"] .form-row,
    body[data-page="reset-password"] .form-row {
        grid-template-columns: 80px 1fr !important;
    }

    body[data-page="login"] .row-label,
    body[data-page="register"] .row-label,
    body[data-page="forgot-password"] .row-label,
    body[data-page="reset-password"] .row-label {
        padding: 0 10px !important;
        font-size: 10px !important;
    }

    body[data-page="login"] .row-input,
    body[data-page="register"] .row-input,
    body[data-page="forgot-password"] .row-input,
    body[data-page="reset-password"] .row-input {
        padding: 9px 10px !important;
        font-size: 13px !important;
    }

    body[data-page="login"] .check-row,
    body[data-page="register"] .check-row,
    body[data-page="forgot-password"] .check-row,
    body[data-page="reset-password"] .check-row {
        margin-bottom: 10px !important;
    }

    body[data-page="login"] .btn,
    body[data-page="register"] .btn,
    body[data-page="forgot-password"] .btn,
    body[data-page="reset-password"] .btn {
        padding: 10px 16px !important;
        font-size: 13px !important;
    }

    body[data-page="login"] .form-foot,
    body[data-page="register"] .form-foot,
    body[data-page="forgot-password"] .form-foot,
    body[data-page="reset-password"] .form-foot {
        margin-top: 6px !important;
        font-size: 11.5px !important;
    }

    body[data-page="login"] .contact-bar,
    body[data-page="register"] .contact-bar,
    body[data-page="forgot-password"] .contact-bar,
    body[data-page="reset-password"] .contact-bar {
        margin-top: 6px !important;
        padding-top: 6px !important;
        font-size: 10px !important;
    }
}

/* Desktop auth height polish: keep all auth cards substantial and push footer below first fold. */
@media (min-width: 941px) {
    body[data-page="login"] .auth-exact-stage,
    body[data-page="register"] .auth-exact-stage,
    body[data-page="forgot-password"] .auth-exact-stage,
    body[data-page="reset-password"] .auth-exact-stage {
        min-height: calc(100dvh - var(--nav-h, 64px)) !important;
        align-items: center !important;
        padding: 18px 14px 34px !important;
    }

    body[data-page="login"] .shell,
    body[data-page="register"] .shell,
    body[data-page="forgot-password"] .shell,
    body[data-page="reset-password"] .shell {
        min-height: clamp(500px, calc(100dvh - 140px), 640px) !important;
        align-items: stretch !important;
    }

    body[data-page="login"] .panel,
    body[data-page="register"] .panel,
    body[data-page="forgot-password"] .panel,
    body[data-page="reset-password"] .panel,
    body[data-page="login"] .form-panel,
    body[data-page="register"] .form-panel,
    body[data-page="forgot-password"] .form-panel,
    body[data-page="reset-password"] .form-panel {
        min-height: 100% !important;
        align-self: stretch !important;
    }
}

/* Center shorter desktop auth forms inside the taller polished shell. */
@media (min-width: 941px) {
    body[data-page="login"] .form-panel,
    body[data-page="forgot-password"] .form-panel,
    body[data-page="reset-password"] .form-panel {
        align-items: center !important;
        padding-top: 34px !important;
        padding-bottom: 34px !important;
    }

    body[data-page="login"] .form-inner,
    body[data-page="forgot-password"] .form-inner,
    body[data-page="reset-password"] .form-inner {
        margin-top: auto;
        margin-bottom: auto;
    }
}

/* Keep forgot/reset visually consistent with other auth pages on tablet-width desktop layouts. */
@media (min-width: 768px) and (max-width: 940px) {
    body[data-page="forgot-password"] .auth-exact-stage,
    body[data-page="reset-password"] .auth-exact-stage {
        min-height: calc(100dvh - var(--nav-h, 64px)) !important;
        align-items: center !important;
        padding: 18px 14px 34px !important;
    }

    body[data-page="forgot-password"] .shell,
    body[data-page="reset-password"] .shell {
        display: grid !important;
        grid-template-columns: 292px minmax(0, 1fr) !important;
        max-width: min(800px, calc(100vw - 100px)) !important;
        min-height: clamp(500px, calc(100dvh - 140px), 640px) !important;
        border-radius: 10px !important;
        box-shadow: 0 2px 0 rgba(255,255,255,.9) inset, 0 24px 80px rgba(10,9,8,.15), 0 4px 16px rgba(10,9,8,.08), 0 0 0 1px var(--border) !important;
        overflow: hidden !important;
        background: var(--white) !important;
        align-items: stretch !important;
    }

    body[data-page="forgot-password"] .panel,
    body[data-page="reset-password"] .panel {
        display: flex !important;
        min-height: 100% !important;
        align-self: stretch !important;
        padding: 22px 20px 20px !important;
    }

    body[data-page="forgot-password"] .form-panel,
    body[data-page="reset-password"] .form-panel {
        width: auto !important;
        min-height: 100% !important;
        align-self: stretch !important;
        align-items: center !important;
        padding: 34px 22px !important;
        overflow: visible !important;
    }
}

/* Keep login inner spacing smooth through the tablet-width auth layout. */
@media (min-width: 768px) and (max-width: 940px) {
    body[data-page="login"] .form-panel {
        align-items: center !important;
        padding-top: 34px !important;
        padding-bottom: 34px !important;
    }

    body[data-page="login"] .form-inner {
        margin-top: auto;
        margin-bottom: auto;
    }
}

/* Balance the dark auth panel contents inside the taller desktop/tablet card. */
@media (min-width: 768px) {
    body[data-page="login"] .panel,
    body[data-page="register"] .panel,
    body[data-page="forgot-password"] .panel,
    body[data-page="reset-password"] .panel {
        justify-content: center !important;
    }

    body[data-page="login"] .p-contact-card,
    body[data-page="register"] .p-contact-card,
    body[data-page="forgot-password"] .p-contact-card,
    body[data-page="reset-password"] .p-contact-card {
        margin-top: 34px !important;
        margin-bottom: 0 !important;
    }
}

/* Desktop/tablet auth control sizing polish: keep fields comfortable inside the taller card. */
@media (min-width: 768px) {
    body[data-page="login"] .google-auth-shell,
    body[data-page="register"] .google-auth-shell,
    body[data-page="forgot-password"] .google-auth-shell,
    body[data-page="reset-password"] .google-auth-shell,
    body[data-page="login"] .btn-social,
    body[data-page="register"] .btn-social,
    body[data-page="forgot-password"] .btn-social,
    body[data-page="reset-password"] .btn-social {
        min-height: 48px !important;
    }

    body[data-page="login"] .form-row,
    body[data-page="register"] .form-row,
    body[data-page="forgot-password"] .form-row,
    body[data-page="reset-password"] .form-row {
        min-height: 44px !important;
    }

    body[data-page="login"] .row-input,
    body[data-page="register"] .row-input,
    body[data-page="forgot-password"] .row-input,
    body[data-page="reset-password"] .row-input,
    body[data-page="login"] .half-input,
    body[data-page="register"] .half-input,
    body[data-page="forgot-password"] .half-input,
    body[data-page="reset-password"] .half-input {
        min-height: 43px !important;
        padding-top: 13px !important;
        padding-bottom: 13px !important;
        font-size: 13px !important;
    }

    body[data-page="login"] .btn,
    body[data-page="register"] .btn,
    body[data-page="forgot-password"] .btn,
    body[data-page="reset-password"] .btn {
        min-height: 44px !important;
        padding-top: 13px !important;
        padding-bottom: 13px !important;
        font-size: 13px !important;
    }

    body[data-page="login"] .form-foot,
    body[data-page="register"] .form-foot,
    body[data-page="forgot-password"] .form-foot,
    body[data-page="reset-password"] .form-foot {
        font-size: 11.5px !important;
        line-height: 1.35 !important;
    }

    body[data-page="login"] .contact-bar,
    body[data-page="register"] .contact-bar,
    body[data-page="forgot-password"] .contact-bar,
    body[data-page="reset-password"] .contact-bar {
        font-size: 10.5px !important;
        line-height: 1.35 !important;
    }
}