:root {
    --ht-blue: var(--blue, #1565C0);
    --ht-green: var(--green, #43A047);
    --ht-orange: var(--orange, #FB8C00);
    --ht-bg: var(--bg, #F7F9FC);
    --ht-text: var(--text, #1F2937);
    --ht-muted: var(--muted, #6B7280);
    --ht-border: var(--border, #E5E7EB);
    --ht-card: var(--card, #FFFFFF);
}

body.ht-auth-page {
    margin: 0;
    min-height: 100vh;
    display: block;
    background:
        radial-gradient(circle at top left, rgba(21,101,192,.08), transparent 34rem),
        var(--ht-bg);
    color: var(--ht-text);
}

.ht-shell {
    width: min(760px, calc(100% - 32px));
    margin: 0 auto;
    padding: 44px 0 74px;
}

.ht-header {
    padding: 0 4px 26px;
}

.ht-logo-link { display: inline-block; }
.ht-logo {
    display: block;
    width: min(330px, 72vw);
    height: auto;
}

.ht-auth-card {
    border: 1px solid var(--ht-border);
    border-radius: 22px;
    padding: clamp(26px, 5vw, 46px);
    background: var(--ht-card);
    box-shadow: 0 18px 50px rgba(31,41,55,.08);
}

.ht-kicker {
    display: inline-block;
    background: #EDF8EE;
    color: #2C7A31;
    border: 1px solid #D8EEDB;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 800;
    margin-bottom: 14px;
}

.ht-auth-card h1 {
    font-size: clamp(2rem,5vw,3.1rem);
    line-height: 1.03;
    margin: 0 0 14px;
    color: var(--ht-blue);
}

.ht-lead {
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--ht-muted);
    margin: 0 0 28px;
}

.ht-form { display: grid; gap: 18px; }
.ht-form label { display: grid; gap: 7px; font-weight: 750; }
.ht-form label span { font-size: .95rem; }
.ht-form small { font-weight: 500; color: var(--ht-muted); }

.ht-form input {
    width: 100%;
    border: 1px solid #CBD5E1;
    border-radius: 12px;
    min-height: 52px;
    padding: 12px 14px;
    font: inherit;
    color: var(--ht-text);
    background: #fff;
    outline: none;
}

.ht-form input:focus {
    border-color: var(--ht-blue);
    box-shadow: 0 0 0 4px rgba(21,101,192,.10);
}

.ht-code {
    text-align: center;
    font-size: 1.7rem!important;
    font-weight: 800;
    letter-spacing: .35em;
}

.ht-primary, .ht-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    min-height: 52px;
    padding: 12px 18px;
    font: inherit;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.ht-primary {
    border: 0;
    background: var(--ht-blue);
    color: #fff;
}

.ht-primary:hover { filter: brightness(.95); }

.ht-secondary {
    border: 1px solid var(--ht-blue);
    color: var(--ht-blue);
    background: #fff;
}

.ht-secondary:hover { background: #F3F7FD; }

.ht-existing {
    margin-top: 25px;
    padding-top: 22px;
    border-top: 1px solid var(--ht-border);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.ht-error, .ht-success, .ht-info {
    padding: 14px 16px;
    border-radius: 12px;
    margin: 0 0 20px;
    line-height: 1.45;
}
.ht-error { background:#FFF2F2; color:#9B1C1C; border:1px solid #F7CACA; }
.ht-success { background:#EFFAF1; color:#216E35; border:1px solid #CBE8D2; }
.ht-info { background:#F7F9FC; color:var(--ht-muted); border:1px solid var(--ht-border); }
.ht-help { font-size:.93rem; color:var(--ht-muted); line-height:1.55; margin:20px 0; }
.ht-text-link { color:var(--ht-blue); font-weight:750; text-decoration:none; }

@media(max-width:600px) {
    .ht-shell { width:min(100% - 20px,760px); padding-top:24px; }
    .ht-logo { width:min(275px,78vw); }
    .ht-auth-card { border-radius:17px; padding:24px 19px; }
    .ht-existing { align-items:stretch; flex-direction:column; }
    .ht-secondary { width:100%; }
}


/* v1.9.2: prevent duplicate submits while OTP mail / verification is processed */
.ht-primary:disabled, .ht-primary[aria-busy="true"] {
    opacity: .68;
    cursor: wait;
    filter: none;
}