/* Chronos authentication: product preview + focused, accessible forms. */
.auth-page { background:#f3f5f9; color:#18243c; }
.auth-main { max-width:1280px; margin:auto; padding:24px 32px 30px; }
.auth-header { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:24px; }
.auth-header>a:first-child { padding:0; }
.auth-header>a:first-child>div:first-child { background:#245ce4; box-shadow:0 6px 16px #245ce422; border-radius:13px; }
.auth-back { display:flex; gap:9px; align-items:center; font-size:13px; font-weight:600; color:#56627a; }
.auth-back:hover { color:#245ce4; }
.auth-layout { display:grid; grid-template-columns:1fr 1fr; align-items:start; background:#fff; border:1px solid #e4e9f2; border-radius:28px; box-shadow:0 20px 70px #1c315c0a; padding:12px; gap:12px; }
.auth-story { position:sticky; top:20px; overflow:hidden; padding:42px 34px 30px; border-radius:20px; background:#101d35; color:#fff; isolation:isolate; }
.auth-story::before { content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at 90% 20%,#1d477d66,transparent 60%),linear-gradient(135deg,#15264300 55%,#2b657233); }
.auth-story::after { content:''; z-index:-1; position:absolute; width:430px; height:430px; right:-260px; top:-120px; border:1px solid #ffffff0c; border-radius:50%; box-shadow:0 0 0 60px #ffffff03,0 0 0 120px #ffffff02; }
.auth-eyebrow { display:flex; align-items:center; gap:9px; font-size:10px; letter-spacing:1.7px; font-weight:600; color:#b6c7e5; }
.auth-eyebrow>span { width:6px; height:6px; background:#82e2c5; border-radius:50%; box-shadow:0 0 0 4px #82e2c512; }
.auth-story h2 { margin:25px 0 18px; font-family:Poppins,Inter,sans-serif; font-size:clamp(30px,3.05vw,41px); line-height:1.2; font-weight:600; letter-spacing:-1.6px; }
.auth-story h2 em { font-style:normal; color:#9be5da; }
.auth-story-copy { color:#aebed5; font-size:14px; line-height:1.8; }
.auth-preview { margin:30px 0 24px; background:#fcfdff; border:1px solid #ffffff25; border-radius:15px; overflow:hidden; box-shadow:0 18px 50px #0003; color:#23334c; transform:rotate(-1.2deg); }
.preview-top { display:flex; align-items:center; gap:8px; background:#edf2f9; border-bottom:1px solid #e0e7f2; padding:12px 15px; font-size:11px; }
.preview-symbol { display:grid; place-items:center; color:#fff; background:#306ae9; width:21px; height:21px; border-radius:6px; }
.preview-demo { margin-left:auto; color:#75839b; font-size:7px; font-weight:600; letter-spacing:1px; }
.preview-body { padding:18px; }
.preview-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.preview-heading small { font-size:8px; letter-spacing:1.2px; color:#8391a8; font-weight:600; }
.preview-heading h3 { font-size:16px; font-weight:700; letter-spacing:-.4px; margin-top:4px; }
.preview-calendar { display:grid; place-items:center; width:35px; height:35px; background:#eff4fe; border-radius:10px; color:#3868d6; }
.preview-calendar svg { width:19px; height:19px; }
.preview-week { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; margin:17px 0 12px; }
.preview-week>span { display:flex; flex-direction:column; gap:6px; align-items:center; padding:9px 4px; font-size:8px; border:1px solid #e8edf4; border-radius:9px; color:#8692a7; }
.preview-week b { font-size:15px; font-weight:600; color:#415370; }
.preview-week .selected { background:#2d62dd; border-color:#2d62dd; color:#d8e4ff; box-shadow:0 4px 10px #2d62dd20; }
.preview-week .selected b { color:#fff; }
.preview-appointment { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #eef1f6; }
.preview-appointment time { font-size:10px; color:#8997ac; font-variant-numeric:tabular-nums; }
.preview-avatar { display:grid; place-items:center; width:30px; height:30px; flex-shrink:0; border-radius:10px; color:#498779; background:#e9f4ef; font-size:9px; font-weight:700; }
.preview-avatar.lilac { color:#8271a4; background:#f0edf9; }
.preview-appointment strong { display:block; font-size:11px; font-weight:600; }
.preview-appointment small { display:block; font-size:8px; color:#7f8ba1; margin-top:3px; }
.preview-check { margin-left:auto; border-radius:50%; background:#eaf7f0; color:#38946d; width:17px; height:17px; text-align:center; font-size:10px; }
.preview-ai { display:flex; align-items:center; gap:10px; margin-top:14px; background:#f0f3ff; border:1px solid #e1e7fe; border-radius:9px; padding:12px; }
.preview-ai>span { font-size:24px; color:#6679c7; }
.preview-ai strong { display:block; font-size:10px; font-weight:600; color:#4e5a8d; }
.preview-ai p { font-size:8px; color:#7d86a7; margin-top:3px; }
.auth-story-features { display:flex; flex-wrap:wrap; gap:10px 16px; color:#c7d4e8; font-size:10px; }
.auth-story-features i { font-style:normal; color:#8bdac7; margin-right:4px; }
.auth-story-foot { margin-top:22px; padding-top:19px; border-top:1px solid #ffffff15; color:#9aadc9; font-size:11px; line-height:1.9; }
.auth-story-foot small { color:#8094b1; font-size:9px; }
.auth-card { min-width:0; width:100%; max-width:540px; justify-self:center; padding:40px 34px 32px; scroll-margin-top:16px; outline:none; }
.auth-form-eyebrow { color:#77859f; letter-spacing:1.6px; font-size:9px; font-weight:700; margin-bottom:13px; }
.auth-card h1 { font-family:Poppins,Inter,sans-serif; font-size:27px; line-height:1.3; font-weight:600; letter-spacing:-1px; color:#16263e; }
#authSubtitle { margin-top:10px; font-size:13px; color:#627189; line-height:1.6; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; background:#f1f4f8; border:1px solid #e8edf3; padding:5px; border-radius:12px; gap:4px; margin-top:25px; }
.auth-tabs button { border-radius:8px; padding:10px 8px; font-size:12px; font-weight:600; color:#748199; transition:background .18s,color .18s,box-shadow .18s; }
.auth-tabs button[aria-selected="true"] { color:#245cce; background:#fff; box-shadow:0 2px 5px #1f3f6b12; }
.auth-form-body { padding-top:24px; }
.auth-card label { font-size:12px; font-weight:600; color:#40516b; }
.auth-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { background:#fbfcfe; border:1px solid #dfe6f0; border-radius:10px; font-size:13px; min-height:47px; transition:box-shadow .18s,border-color .18s; }
.auth-card input::placeholder { color:#9aa6b8; font-weight:400; }
.auth-card input:not([type="checkbox"]):focus { border-color:#5d85e4; background:#fff; box-shadow:0 0 0 3px #427be41a; outline:none; }
.auth-card input[type="checkbox"] { accent-color:#2c62db; width:16px; height:16px; flex-shrink:0; }
.auth-card button[type="submit"], .auth-card #forgotSendCodeBtn, .auth-card #forgotResetBtn { border-radius:10px; background:#2b60da; box-shadow:0 6px 16px #2b60da22; font-size:13px; min-height:47px; transition:background .18s,transform .18s; }
.auth-card button[type="submit"]:hover, .auth-card #forgotSendCodeBtn:hover, .auth-card #forgotResetBtn:hover { background:#224db4; }
.auth-card button:disabled { cursor:wait; opacity:.6; }
.auth-card .auth-login-options { gap:10px; flex-wrap:wrap; padding:2px 0 7px; }
.auth-login-options label, .auth-login-options a { font-size:11px; }
.auth-legal { font-size:11px; line-height:1.8; color:#637187; text-align:center; }
.auth-legal a { color:#657590; text-decoration:underline; text-underline-offset:3px; }
.auth-trial { margin-top:18px; background:#f0faf6; border:1px solid #d9eee3; border-radius:10px; padding:14px; }
.auth-trial #planTitle { font-size:12px; font-weight:600; color:#377f66; }
.auth-trial #planDesc { font-size:11px; line-height:1.65; color:#688478; }
.auth-trial a { color:#337b64; font-size:10px; }
.auth-plan-details { border:1px solid #dfe6f0; border-radius:11px; }
.auth-plan-details summary { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px; cursor:pointer; list-style:none; }
.auth-plan-details summary::-webkit-details-marker { display:none; }
.auth-plan-details summary strong { display:block; font-size:12px; color:#334761; }
.auth-plan-details summary small { display:block; font-size:10px; margin-top:5px; color:#738198; line-height:1.5; }
.auth-plan-edit { color:#3166d4; font-size:10px; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.auth-plan-details[open] .auth-plan-edit b { transform:rotate(180deg); }
.auth-plan-details[open]>summary { border-bottom:1px solid #e8edf4; }
.auth-plan-details input[type="radio"]:focus-visible+span { outline:2px solid #2b60da; outline-offset:2px; }
.auth-trial-condition { color:#65748b; font-size:11px; line-height:1.7; }
.auth-social-signup { padding:4px 0; }
.auth-social-buttons { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.auth-social-buttons>div { max-width:100%; }
.auth-social-buttons button { padding:11px 12px; font-size:11px; border-radius:10px; }
#googleLoginMount { max-width:100%; overflow:hidden; }
.auth-password { position:relative; }
.auth-card .auth-password input { padding-right:48px; }
.auth-password-toggle { display:grid; place-items:center; position:absolute; right:3px; top:5px; bottom:1px; width:42px; border-radius:8px; color:#7a8aa2; }
.auth-password-toggle:hover { color:#2b60da; background:#edf3ff; }
.auth-password-toggle svg { width:18px; height:18px; }
.auth-password-hint { font-size:11px; line-height:1.5; color:#65748b; margin-top:6px; }
.auth-password-hint[data-valid="true"] { color:#278261; }
.auth-footer { display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; margin:22px 4px 0; color:#66758c; font-size:10px; }
.auth-footer nav { display:flex; gap:20px; }
.auth-footer a:hover { color:#2b60da; }
.auth-page :is(a,button,summary):focus-visible { outline:3px solid #769cff; outline-offset:3px; }
.auth-skip { position:fixed; top:-100px; left:20px; z-index:100; background:#fff; border:2px solid #2b60da; border-radius:8px; padding:12px; }
.auth-skip:focus { top:12px; }
.auth-page .whatsapp-fab { padding:12px; background:#fff; color:#268466; border:1px solid #d7e8e2; box-shadow:0 4px 20px #18374c12; bottom:16px; right:16px; }
.auth-page .whatsapp-fab__label { display:none; }
.auth-page .whatsapp-hint { display:none; }
.auth-page .whatsapp-fab.is-attention { animation:none; }
@media(min-width:1500px) { .auth-main { padding-top:36px; } .auth-layout { margin-top:30px; } }
@media(max-width:1050px) { .auth-main { padding:20px; } .auth-story { padding:32px 24px 26px; } .auth-card { padding:34px 22px 28px; } .auth-story h2 { font-size:32px; } }
@media(max-width:820px) {
  .auth-main { max-width:560px; padding:22px 20px 75px; }
  .auth-header { margin-bottom:22px; }
  .auth-header>a:first-child>div:first-child { width:34px; height:34px; border-radius:10px; }
  .auth-header>a:first-child>div:last-child { font-size:15px; }
  .auth-back { font-size:10px; gap:4px; }
  .auth-layout { display:flex; flex-direction:column; padding:0; gap:0; border-radius:20px; }
  .auth-card { order:-1; padding:28px; }
  .auth-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { font-size:16px; }
  .auth-card label { font-size:13px; }
  .auth-login-options label, .auth-login-options a { font-size:12px; }
  .auth-story { position:relative; top:auto; border-radius:0 0 19px 19px; padding:26px 28px; width:100%; }
  .auth-story h2 { font-size:25px; letter-spacing:-.8px; margin:14px 0 10px; }
  .auth-story h2 br:first-child { display:none; }
  .auth-story h2 br:first-child::after { content:' '; }
  .auth-story h2 em { margin-left:.2em; }
  .auth-story-copy { font-size:12px; }
  .auth-preview { display:none; }
  .auth-story-features { margin-top:18px; font-size:9px; }
  .auth-story-foot { margin-top:16px; padding-top:12px; font-size:10px; }
  .auth-footer { font-size:9px; gap:12px; margin-top:18px; }
  .auth-eyebrow { font-size:8px; letter-spacing:1.2px; }
}
@media(max-width:380px) {
  .auth-main { padding:16px 12px 72px; }
  .auth-header { gap:8px; }
  .auth-header>a:first-child { gap:7px; }
  .auth-header>a:first-child>div:last-child { font-size:13px; }
  .auth-back { font-size:9px; }
  .auth-card { padding:24px 18px; }
  .auth-card h1 { font-size:23px; }
  .auth-plan-details summary { gap:6px; padding:11px; }
  .auth-plan-edit { font-size:9px; }
  .auth-social-buttons { flex-direction:column; align-items:stretch; }
}
@media(prefers-reduced-motion:reduce) { .auth-page *, .auth-page *::before, .auth-page *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }