:root {
    color-scheme: light;
    --bg: #f5f7fb;
    --surface: #ffffff;
    --text: #192337;
    --muted: #667085;
    --border: #d9e0ea;
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --input: #ffffff;
    --shadow: 0 18px 55px rgba(23, 35, 58, 0.09);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; background: #ffffff; color: var(--text); }
.page { display: flex; justify-content: center; align-items: center; padding: 50px 20px 90px; background: transparent; border: none; box-shadow: none; }
.panel { width: 100%; max-width: 490px; padding: 40px; background: transparent; border: none; border-radius: 0; box-shadow: none; }
h1 { font-size: 33px; margin: 0 0 10px; letter-spacing: -0.7px; }
.intro { color: var(--muted); line-height: 1.55; margin: 0 0 27px; }
.google-button { display: flex; justify-content: center; min-height: 48px; }
.divider { display: flex; align-items: center; gap: 14px; margin: 24px 0; color: var(--muted); font-size: 13px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
label { display: block; font-size: 15px; font-weight: 650; margin: 0 0 9px; }
input { width: 100%; padding: 15px 15px; border: 1px solid var(--border); border-radius: 10px; font: inherit; color: var(--text); background: var(--input); outline: none; }
input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.panel button { width: 100%; margin-top: 14px; padding: 15px 16px; border: 0; border-radius: 10px; background: var(--accent); color: white; font: inherit; font-weight: 650; cursor: pointer; }
.panel button:hover { background: var(--accent-hover); }
.panel button:disabled { opacity: .65; cursor: not-allowed; }
#code-panel { margin-top: 22px; }
.hidden { display: none !important; }
#message { min-height: 18px; margin: 17px 0 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.footer-text { margin: 23px 0 0; text-align: center; color: var(--muted); font-size: 14px; }
.panel a { color: var(--accent); }
@media (max-width: 520px) { .page { padding: 24px 15px 55px; } .panel { padding: 27px 22px; } h1 { font-size: 29px; } }

/* Verification-code countdown and button loading indicators */
.code-hint { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.panel button.is-loading { position: relative; pointer-events: none; }
.panel button .button-spinner { display: none; width: 16px; height: 16px; margin-left: 10px; vertical-align: -3px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: signup-spin .75s linear infinite; }
.panel button.is-loading .button-spinner { display: inline-block; }
.panel button:disabled:hover { background: var(--accent); }
@keyframes signup-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .panel button .button-spinner { animation-duration: 1.5s; } }

.signup-footer{--hj-panel:#ffffff;--hj-panel2:#ffffff2;--hj-text:#142748;--hj-muted:#60718f;--hj-border:#dfe7f3;--hj-soft:#eaf1ff;--hj-accent:#5368ff;--hj-accent2:#3975f2;--hj-footer-bg:#f5f9ff;--hj-shadow:0 14px 42px rgba(30,57,102,.055);color:var(--hj-text);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.signup-footer *{box-sizing:border-box}.signup-footer a{text-decoration:none}.signup-footer .hj-status-dot{display:inline-block;flex:none;width:9px;height:9px;border-radius:50%;background:#28c9a2;box-shadow:0 0 0 5px rgba(40,201,162,.12)}
.hj-footer{background:var(--hj-footer-bg);border-top:1px solid var(--hj-border);padding:70px 0 0}.hj-footer-grid{display:grid;grid-template-columns:1.65fr .75fr 1fr 1.25fr;gap:46px;padding-bottom:56px}.hj-footer-brand img{width:205px;max-width:100%;height:auto;display:block;margin-bottom:19px}.hj-footer-brand p{font-size:14px;line-height:1.85;color:var(--hj-muted);margin:0 0 14px;max-width:380px}.hj-footer-brand .hj-footer-values{color:var(--hj-text);font-size:13px}.hj-footer-column{display:flex;flex-direction:column;align-items:flex-start;gap:17px}.hj-footer-column h3{font-size:15px;font-weight:800;margin:8px 0 7px;color:var(--hj-text)}.hj-footer-column a{font-size:13px;color:var(--hj-muted);line-height:1.5;overflow-wrap:anywhere;transition:color .2s}.hj-footer-column a:hover,.hj-footer-bottom a:hover{color:var(--hj-accent2)}.hj-footer-availability{display:flex;align-items:center;gap:11px;font-size:12px;font-weight:700;color:var(--hj-text);line-height:1.5}.hj-footer-column small{color:var(--hj-muted);font-size:11px;line-height:1.6}.hj-footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--hj-border);padding:24px 0 29px;font-size:12px;color:var(--hj-muted)}.hj-footer-bottom div{display:flex;gap:24px;flex-wrap:wrap}.hj-footer-bottom a{color:var(--hj-muted)}.hj-home :focus-visible,.hj-footer :focus-visible{outline:3px solid var(--hj-accent2);outline-offset:4px}

.signup-footer{padding-top:clamp(34px,4vw,52px)}
.signup-footer .hj-shell{width:min(100%,1320px);max-width:none;padding-inline:clamp(18px,4.3vw,70px)}
.signup-footer .hj-footer-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,.75fr) minmax(0,1fr) minmax(0,1.25fr);gap:clamp(18px,2.8vw,38px);padding-bottom:35px}
.signup-footer .hj-footer-column{gap:12px;min-width:0}
.signup-footer .hj-footer-bottom{padding-block:18px}
.signup-footer .hj-footer-brand .hj-footer-values{margin-top:15px;padding-left:14px;border-left:3px solid var(--hj-accent)}
.signup-footer .hj-footer-grid>*{min-width:0}
.signup-footer .hj-footer-column a,.signup-footer .hj-footer-brand p{overflow-wrap:anywhere}
@media(max-width:1050px){.signup-footer .hj-footer-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
@media(max-width:760px){.signup-footer .hj-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.signup-footer .hj-footer-grid{grid-template-columns:1fr;gap:25px}.signup-footer .hj-footer-bottom{flex-direction:column;align-items:flex-start}}


/* Sign-up layout: visual only; auth IDs, scripts and API calls unchanged */
body{overflow-x:hidden}
.signup-page{--signup-card:var(--surface);--signup-text:var(--text);--signup-muted:var(--muted);--signup-line:var(--border);position:relative;isolation:isolate;overflow:hidden;min-height:clamp(560px,75vh,790px);padding:clamp(38px,5vw,74px) 20px;align-items:center}
.signup-layout{width:min(100%,1130px);margin:auto;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(24px,5vw,95px);align-items:center;position:relative;z-index:1}
.signup-glow{position:absolute;pointer-events:none;border-radius:50%;filter:blur(80px);opacity:.38;z-index:0}
.signup-glow-one{width:450px;height:450px;top:-190px;left:-200px;background:rgba(65,116,255,.17)}
.signup-glow-two{width:390px;height:390px;bottom:-170px;right:-140px;background:rgba(35,190,230,.13)}
.signup-aside{min-width:0;padding:10px 0}
.signup-eyebrow{display:inline-flex;align-items:center;gap:11px;color:#6395ff;font-size:11px;font-weight:800;letter-spacing:.12em;line-height:1.6}
.signup-dot{width:9px;height:9px;flex:none;background:#27cba5;border-radius:50%;box-shadow:0 0 0 5px rgba(39,203,165,.13)}
.signup-aside h2{font-size:clamp(34px,3.5vw,55px);font-weight:850;letter-spacing:-.055em;line-height:1.13;margin:22px 0 20px;overflow-wrap:normal}
.signup-aside h2 span{color:#74a9ff}
.signup-aside>p{font-size:clamp(14px,1.4vw,17px);line-height:1.85;color:var(--signup-muted);max-width:480px}
.signup-highlights{display:grid;gap:17px;margin-top:28px;color:var(--signup-muted);font-size:14px}
.signup-highlights div{display:flex;gap:13px;align-items:center}
.signup-highlights span{display:grid;place-items:center;flex:none;width:33px;height:33px;border-radius:11px;background:rgba(78,113,255,.12);color:#648dff;font-size:17px}
.signup-page .panel{width:100%;max-width:490px;margin:auto;padding:clamp(26px,3.2vw,42px);background:var(--signup-card);border:1px solid var(--signup-line);border-radius:24px;box-shadow:var(--shadow);min-width:0}
.signup-page .panel h1{font-size:clamp(29px,3vw,36px);margin-bottom:10px}
.signup-page .panel .intro{font-size:14px;line-height:1.75}
.signup-page .panel input{min-width:0;transition:border-color .2s,box-shadow .2s}
.signup-page .panel button{min-height:50px;transition:background .2s,transform .2s,box-shadow .2s}
.signup-page .panel button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 12px 25px rgba(55,95,230,.16)}
.signup-page .google-button{min-width:0;max-width:100%;overflow:hidden}
.signup-page .divider{white-space:normal;text-align:center}
.signup-page .footer-text{overflow-wrap:anywhere}
.signup-reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1);transition-delay:var(--signup-delay,0ms)}
.signup-reveal.signup-visible{opacity:1;transform:translateY(0)}
@media(max-width:820px){.signup-layout{grid-template-columns:1fr;max-width:560px;gap:22px}.signup-aside{text-align:center}.signup-aside>p{margin-inline:auto}.signup-highlights{display:none}.signup-aside h2{font-size:clamp(32px,5.6vw,43px)}.signup-page{padding:40px 16px 54px}}
@media(max-width:480px){.signup-page{padding:26px 13px 42px}.signup-page .panel{padding:25px 19px;border-radius:19px}.signup-aside h2{font-size:clamp(29px,8vw,37px)}.signup-aside>p{font-size:14px}.signup-page .panel h1{font-size:29px}}
@media(prefers-reduced-motion:reduce){.signup-reveal{opacity:1!important;transform:none!important;transition:none!important}.signup-page .panel button{transition:none!important}}
