/* Auth-only composition; shared product tokens remain untouched. */
html.cf-auth-root, .cf-auth {
  width:100%; min-width:0; margin:0; padding:0;
  max-width:none; border:0; border-radius:0; box-shadow:none;
}
.cf-auth { margin:0; background:#fff; color:#1b1c1e; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; }
.cf-auth * { box-sizing:border-box; }
.cf-login-page {
  width:100%; min-width:0; max-width:none;
  height:100vh; height:100dvh; min-height:100vh;
  margin:0; padding:0; border:0; border-radius:0; box-shadow:none;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
}
.cf-showcase { position:relative; min-width:0; min-height:0; background:#17191c; color:var(--cf-text-primary,#f2f4f7); display:flex; flex-direction:column; padding:42px 48px 26px; overflow:auto; }
.cf-showcase-top { display:flex; align-items:center; gap:20px; z-index:2; }
.cf-tabs { display:flex; flex:1; gap:clamp(14px,2.6vw,42px); }
.cf-tabs button,.cf-motion { font:inherit; color:#a6a9ae; border:0; background:none; padding:12px 0; border-radius:0; cursor:pointer; box-shadow:none; }
.cf-tabs button { font-size:13px; position:relative; min-height:44px; }
.cf-tabs button::after { content:""; position:absolute; height:1px; background:#f2f4f7; bottom:2px; left:0; right:0; transform:scaleX(0); transition:transform .4s; }
.cf-tabs button[aria-selected=true] { color:#fff; }
.cf-tabs button[aria-selected=true]::after { transform:scaleX(1); }
.cf-motion { font-size:17px; width:44px; height:44px; flex:none; }
.cf-auth button:focus-visible { outline:2px solid var(--cf-red,#e8334a); outline-offset:5px; }
.cf-scenes { position:relative; flex:1; min-height:280px; }
/* The scene recedes as a whole; artwork and copy arrive at different speeds. */
.cf-scene {
  position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:center; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .65s ease, visibility .65s;
}
.cf-scene.is-active { opacity:1; visibility:visible; }
.cf-art {
  display:block; width:calc(100% + 36px); margin-left:-18px;
  max-height:500px; flex:1; min-height:0; overflow:visible;
  opacity:0; transform:translateY(16px) scale(.97); transform-origin:50% 58%;
  transition:opacity .65s ease, transform .8s cubic-bezier(.2,.65,.25,1);
}
.cf-scene.is-active .cf-art { opacity:1; transform:none; }
.cf-art text { fill:#acb1b7; stroke:none; font:10px Inter,"Segoe UI",sans-serif; letter-spacing:1.4px; }
.cf-art .cf-art-title { fill:#e3e3dd; font-size:26px; font-weight:450; letter-spacing:-.7px; }
/* Static matte layers provide depth without filters, blur or moving shadows. */
.cf-art-atmosphere { fill:none; stroke:#24282d; stroke-width:1; opacity:.75; }
.cf-art-shadow { fill:#0b0d10; opacity:.5; }
.cf-art-depth { fill:#1e2227; stroke:#343a41; stroke-width:1; }
.cf-art-surface { fill:#2b3036; stroke:#515861; stroke-width:1; }
.cf-art-chip { fill:#32383e; stroke:#596168; stroke-width:1; }
.cf-art-screen { fill:#22272d; stroke:#3e454d; stroke-width:1; }
.cf-art-edge { fill:none; stroke:#969b9f; stroke-opacity:.3; stroke-width:1; }
.cf-art-muted { fill:none; stroke:#666e77; stroke-width:1; }
.cf-art-guide { fill:none; stroke:#48505a; stroke-width:1; }
.cf-art-context-lines { fill:none; stroke:#4a535d; stroke-width:1; opacity:.65; }
.cf-art-line { fill:none; stroke:var(--cf-red,#e8334a); stroke-width:1.8; stroke-linecap:round; }
.cf-art-ink { fill:#e1ded6; }
.cf-art-secondary { fill:#757f88; }
.cf-art-play-disc { fill:#20252b; stroke:#777e84; stroke-width:1; }
.cf-art-check { fill:none; stroke:#e1ded6; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cf-art-accent,.cf-art-dot { fill:var(--cf-red,#e8334a); stroke:none; }
.cf-art-draw { stroke-dasharray:100; stroke-dashoffset:0; }
.cf-art-inputs { opacity:.5; }
.cf-art-orbit { transform-origin:300px 230px; }
/* Timelines restart on scene entry. Most of each frame remains still. */
.is-active .cf-art-draw { animation:cf-line 7s cubic-bezier(.4,0,.2,1) infinite; }
.is-active .cf-art-float { animation:cf-drift 7s ease-in-out infinite; }
.is-active .cf-art-align { animation:cf-align 7s cubic-bezier(.2,.65,.25,1) infinite; }
.is-active .cf-art-inputs { animation:cf-recede 7s ease infinite; }
.is-active .cf-art-resolve { animation:cf-resolve 7s ease infinite; }
.is-active .cf-art-orbit { animation:cf-orbit 7s cubic-bezier(.4,0,.4,1) infinite; }
.cf-scene *, .cf-showcase[data-running=false] .cf-scene * { animation-play-state:paused; }
.cf-showcase[data-running=true] .is-active * { animation-play-state:running; }
@keyframes cf-line { 0%,8% { stroke-dashoffset:100; } 64%,100% { stroke-dashoffset:0; } }
@keyframes cf-drift { 0%,100% { transform:translateY(3px); } 55% { transform:translateY(-3px); } }
@keyframes cf-align { 0%,12% { transform:translateX(-142px); } 65%,100% { transform:translateX(0); } }
@keyframes cf-recede { 0%,30% { opacity:.85; } 65%,100% { opacity:.3; } }
@keyframes cf-resolve { 0%,26% { opacity:.25; } 65%,100% { opacity:1; } }
@keyframes cf-orbit { 0%,6% { transform:rotate(0); } 94%,100% { transform:rotate(360deg); } }
.cf-scene-copy {
  min-height:155px; padding-bottom:36px; opacity:0; transform:translateY(8px);
  transition:opacity .35s ease, transform .55s cubic-bezier(.2,.65,.25,1);
}
.cf-scene.is-active .cf-scene-copy { opacity:1; transform:none; transition-delay:.12s; }
.cf-scene-number { color:#92979e; font-size:10px; letter-spacing:1.8px; }
.cf-scene-copy h2 { color:#f5f5f5; font-size:clamp(32px,3.5vw,52px); font-weight:450; line-height:1.15; letter-spacing:-1.5px; margin:14px 0 10px; }
.cf-scene-copy p { color:#9fa5ad; font-size:13px; line-height:1.6; max-width:370px; margin:0; }
.cf-showcase-foot { display:flex; justify-content:space-between; gap:14px; color:#8c929a; font-size:9px; letter-spacing:1.5px; padding-top:18px; border-top:1px solid #34373b; }
.cf-showcase-foot span { font-size:8px; }
.cf-login-form-panel { position:relative; display:flex; align-items:center; justify-content:center; padding:clamp(24px,5vh,64px) 40px; min-width:0; min-height:0; overflow:auto; background:#fff; }
.cf-login-locale { position:absolute; top:20px; right:32px; display:flex; align-items:center; gap:9px; margin:0; color:#a0a3a7; font-size:12px; }
.cf-login-locale button { min-height:32px; padding:4px 2px; border:0; border-radius:0; background:none; box-shadow:none; color:#73767c; font:inherit; cursor:pointer; }
.cf-login-locale button[aria-pressed=true] { color:#202124; font-weight:600; }
.cf-login-locale button:disabled { cursor:wait; opacity:.6; }
.cf-locale-status { position:absolute; top:100%; right:0; width:220px; font-size:12px; line-height:1.5; text-align:right; overflow-wrap:anywhere; }
.cf-locale-status:empty { display:none; }
@media (max-width:800px) { .cf-login-locale { top:8px; right:24px; } }
.cf-login-content { width:100%; max-width:370px; margin:auto; flex-shrink:0; }
.cf-login-brand-lockup { display:flex; align-items:center; gap:10px; font-size:19px; font-weight:600; letter-spacing:-.6px; margin-bottom:46px; }
.cf-login-brand-lockup svg { width:25px; height:25px; color:var(--cf-red,#e8334a); }
.cf-login-content h1 { font-size:28px; font-weight:550; line-height:1.25; letter-spacing:-1px; margin:0 0 14px; color:#17191c; }
.cf-login-subtitle { color:#6b6e74; font-size:14px; line-height:1.7; min-height:3.4em; margin:0 0 28px; }
.cf-login-google { width:100%; min-height:52px; border:1px solid #d6d7d9; border-radius:6px; background:#fff; color:#202124; box-shadow:none; display:flex; justify-content:center; align-items:center; gap:12px; padding:13px 18px; font:500 14px Inter,"Segoe UI",sans-serif; cursor:pointer; }
.cf-login-google:hover { background:#f7f8f9; border-color:#b5b8bd; }
.cf-login-google:disabled { cursor:wait; opacity:.65; }
.cf-login-google svg { width:19px; height:19px; flex:none; }
.cf-login-messages { border-left:2px solid var(--cf-red,#e8334a); padding:8px 14px; background:#fcf4f5; margin:0 0 20px; color:#882a37; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.cf-login-messages p { margin:0; }
.cf-login-progress { display:block; font-size:12px; line-height:1.6; color:#696d73; margin-top:10px; }
.cf-login-progress:empty { display:none; }
.cf-login-availability { font-size:12px; line-height:1.6; min-height:3.2em; margin:16px 0 0; color:#73767c; overflow-wrap:anywhere; }
@media (max-width:1100px) { .cf-showcase { padding:28px 28px 22px; } .cf-showcase-top { gap:10px; } .cf-tabs { gap:24px; } .cf-login-form-panel { padding:44px 32px; } }
@media (max-width:800px) { .cf-login-page { height:auto; min-height:100vh; min-height:100dvh; grid-template-columns:1fr; grid-template-rows:auto auto; } .cf-login-form-panel { grid-row:1; padding:44px 24px 42px; } .cf-login-brand-lockup { margin-bottom:28px; } .cf-showcase { min-height:520px; padding:20px 24px; } .cf-scenes { min-height:400px; } .cf-art { max-height:270px; } .cf-scene-copy { min-height:118px; padding-bottom:18px; } .cf-scene-copy h2 { font-size:32px; margin:10px 0; } .cf-tabs { gap:26px; } .cf-showcase-foot span { display:none; } }
@media (min-width:801px) and (max-height:720px) { .cf-showcase { min-height:0; padding-top:20px; } .cf-scenes { min-height:280px; } .cf-art { max-height:310px; } .cf-scene-copy { min-height:122px; } .cf-scene-copy h2 { font-size:36px; } .cf-login-brand-lockup { margin-bottom:35px; } }
@media (prefers-reduced-motion:reduce) {
  .cf-scene, .cf-scene .cf-art, .cf-scene .cf-scene-copy, .cf-tabs button::after { transition:none; }
  .cf-showcase .cf-scene .cf-art * { animation:none; }
}