/* Authentication only: reuse the EasyShirt palette and existing typefaces. */
[data-view="auth"].auth-page { max-width:1600px; margin-inline:auto; padding:clamp(28px,3vw,48px) clamp(20px,3vw,48px); }
.auth-page .auth-layout { grid-template-columns:minmax(0,1fr) minmax(360px,520px); gap:clamp(32px,4vw,64px); min-height:0; align-items:center; }
.auth-page .auth-showcase h1 { font-size:clamp(2.8rem,4.7vw,4.8rem); line-height:1.02; letter-spacing:-.045em; max-width:780px; }
.auth-page .auth-showcase h1 em { font-style:normal; color:var(--ink); }
.auth-page .auth-showcase .lead { font-size:1.07rem; line-height:1.65; margin:20px 0 24px; max-width:620px; }
.auth-page .auth-preview { display:block; height:auto; width:100%; max-width:none; margin:0; padding:24px; border-radius:var(--radius); background:var(--ink); color:var(--white); text-decoration:none; isolation:isolate; transition:transform .3s,box-shadow .3s; }
.auth-page .auth-preview span { position:static; padding:0; background:none; color:inherit; border-radius:0; }
.auth-preview-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.auth-page .auth-preview .auth-project-label { font-size:.73rem; text-transform:uppercase; letter-spacing:.14em; color:var(--orange-2); }
.auth-page .auth-project-arrow { font-size:1.5rem; transition:transform .3s; }
.auth-preview-stage { height:230px; position:relative; display:grid; place-items:center; overflow:hidden; margin:10px 0; border-radius:16px; }
.auth-page .auth-preview img { width:95%; height:100%; object-fit:contain; position:absolute; inset:0; margin:auto; z-index:1; filter:drop-shadow(0 12px 12px rgba(0,0,0,.2)); transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.auth-page .auth-preview .auth-preview-ring { position:absolute; inset:0; margin:auto; width:210px; height:210px; border:1px solid rgba(255,255,255,.15); border-radius:50%; background:var(--ink-2); }
.auth-preview-caption { display:flex; flex-direction:column; gap:5px; padding-top:12px; border-top:1px solid rgba(255,255,255,.15); }
.auth-preview-caption strong { font:700 1.3rem var(--font-display); }
.auth-page .auth-preview-caption>span { color:#c1cbd2; font-size:.85rem; font-weight:400; }
.auth-page .auth-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding:0; margin:22px 0 0; list-style:none; }
.auth-page .auth-benefits li { display:flex; align-items:flex-start; gap:10px; padding:16px 0; border-top:1px solid var(--line); min-width:0; }
.auth-benefits li>[data-es-icon] { flex-shrink:0; color:var(--ink); }
.auth-benefit-copy { display:flex; flex-direction:column; gap:6px; }
.auth-benefit-copy strong { color:var(--ink); font-size:.88rem; line-height:1.35; }
.auth-benefit-copy small { color:var(--muted); font-size:.78rem; line-height:1.5; }
.auth-page .auth-card { padding:clamp(24px,3vw,38px); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 16px 44px rgba(7,17,27,.07); min-width:0; }
.auth-card-heading { display:flex; align-items:center; gap:14px; }
.auth-card-mark { display:grid; place-items:center; width:48px; height:48px; border-radius:14px; background:var(--paper); color:var(--ink); flex-shrink:0; }
.auth-card-heading .eyebrow { margin:0 0 6px; font-size:.62rem; letter-spacing:.09em; }
.auth-card-heading h2 { margin:0; font:700 clamp(1.4rem,2vw,1.8rem)/1.15 var(--font-display); letter-spacing:-.025em; }
.auth-card-intro { color:var(--muted); font-size:.9rem; line-height:1.5; margin:18px 0 24px; }
.auth-page .tabs { display:grid; grid-template-columns:1fr 1fr; padding:5px; border-radius:14px; background:var(--paper); gap:4px; margin-bottom:24px; }
.auth-page .tabs button { border:0; border-radius:10px; padding:12px 7px; background:transparent; font-size:.88rem; transition:background .2s,color .2s,transform .2s; }
.auth-page .tabs button.active { background:var(--ink); color:var(--white); box-shadow:0 2px 5px rgba(7,17,27,.1); }
.auth-page .google-button { min-height:48px; box-shadow:none; margin:0; border-radius:12px; gap:10px; transition:background .2s,transform .2s; }
.auth-page .auth-separator { margin:22px 0; font-size:.75rem; color:var(--muted); }
.auth-page #auth-form label { font-size:.88rem; margin-bottom:16px; }
.auth-page #auth-form input { min-height:50px; border-radius:12px; background:var(--white); font-size:1rem; }
.auth-page #auth-form input::placeholder { color:var(--muted); font-weight:400; }
.auth-page .password-field { position:relative; }
.auth-page .password-field input { padding-right:88px; }
.auth-page .password-toggle { min-height:40px; min-width:64px; right:5px; top:5px; border-radius:8px; font-size:.78rem; }
.auth-field-hint { font-weight:400; color:var(--muted); font-size:.76rem; }
.auth-page [hidden] { display:none!important; }
.auth-page .field-error:empty { display:none; }
.auth-page .field-error { color:var(--red); font-size:.77rem; font-weight:500; }
.auth-page input[aria-invalid="true"] { border-color:var(--red); }
.auth-page .submit-button { display:flex; justify-content:center; align-items:center; gap:8px; min-height:50px; margin-top:22px; border-radius:12px; box-shadow:0 6px 16px rgba(255,121,0,.16); }
.auth-page .submit-button span { margin:0; }
.auth-page .forgot-password { display:block; min-height:44px; margin:8px auto 0; font-size:.83rem; }
.auth-page .form-note { font-size:.76rem; color:var(--muted); line-height:1.6; margin:14px 0 0; }
.auth-privacy-note { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:22px 0 0; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:.72rem; }
.auth-privacy-note a { margin-left:auto; text-underline-offset:3px; }
.auth-feedback { padding:12px 14px; border:1px solid var(--line); border-left:3px solid var(--orange); border-radius:10px; font-size:.85rem; line-height:1.5; background:var(--paper); }
.auth-feedback[data-tone="error"] { border-left-color:var(--red); }
.auth-page :is(button,a):focus-visible { outline:3px solid var(--orange); outline-offset:4px; }
.auth-page button:disabled { cursor:wait; opacity:.6; }
.auth-page :is(button,.auth-preview):active:not(:disabled) { transform:scale(.98); }
.auth-page [aria-busy="true"] .auth-submit-arrow { width:15px; height:15px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; font-size:0; animation:auth-spin .7s linear infinite; }
@media (hover:hover) and (pointer:fine) {
  .auth-page .auth-preview:hover { transform:translateY(-4px); box-shadow:0 18px 36px rgba(7,17,27,.16); }
  .auth-page .auth-preview:hover img { transform:translateY(-5px) rotate(-2deg); }
  .auth-page .auth-preview:hover .auth-project-arrow { transform:translate(3px,-3px); }
  .auth-page .google-button:hover { background:var(--paper); }
}
@keyframes auth-arrive { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes auth-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:no-preference) {
  .auth-page:not([hidden]) .auth-showcase { animation:auth-arrive .5s ease-out both; }
  .auth-page:not([hidden]) .auth-card { animation:auth-arrive .5s .1s ease-out both; }
}
@media (max-width:900px) {
  .auth-page .auth-layout { grid-template-columns:minmax(0,1fr) minmax(340px,1fr); gap:28px; }
  .auth-page .auth-showcase h1 { font-size:2.9rem; }
  .auth-preview-stage { height:190px; }
  .auth-page .auth-benefits { grid-template-columns:1fr; gap:0; }
  .auth-page .auth-benefits li { padding:10px 0; }
}
@media (min-width:1100px) {
  .auth-page .auth-preview { display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,.9fr); gap:16px 24px; padding:28px; }
  .auth-preview-heading { grid-column:1; align-self:start; }
  .auth-preview-stage { grid-column:2; grid-row:1/3; height:250px; margin:0; }
  .auth-preview-caption { grid-column:1; align-self:end; padding-top:20px; }
  .auth-preview-caption strong { font-size:clamp(1.3rem,2vw,1.9rem); line-height:1.15; max-width:280px; }
  .auth-page .auth-preview .auth-preview-ring { width:230px; height:230px; }
}
@media (max-width:700px) {
  [data-view="auth"].auth-page { padding:28px 20px 36px; }
  .auth-page .auth-layout { display:flex; flex-direction:column; gap:26px; }
  .auth-page .auth-showcase h1 { font-size:clamp(2rem,8.8vw,2.8rem); margin:0; }
  .auth-page .auth-showcase .lead { font-size:.94rem; margin:16px 0 20px; }
  .auth-page .auth-preview { display:grid; grid-template-columns:1fr 108px; gap:8px; padding:18px; width:100%; }
  .auth-preview-heading { grid-column:1; align-self:start; }
  .auth-preview-heading .auth-project-arrow { display:none; }
  .auth-preview-stage { grid-column:2; grid-row:1/3; height:100px; margin:0; }
  .auth-page .auth-preview .auth-preview-ring { width:90px; height:90px; }
  .auth-preview-caption { grid-column:1; align-self:end; padding:0; border:0; }
  .auth-preview-caption strong { font-size:1.02rem; }
  .auth-page .auth-preview-caption>span { font-size:.72rem; }
  .auth-page .auth-benefits { margin-top:16px; }
  .auth-benefit-copy { gap:2px; }
  .auth-page .auth-card { width:100%; padding:24px; }
}
@media (prefers-reduced-motion:reduce) {
  .auth-page *, .auth-page *::before, .auth-page *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .auth-page :is(button,a,img):is(:hover,:active) { transform:none!important; }
}

/* Keep the shared dialog unchanged outside the sign-in challenge. */
#modal-backdrop:has(#mfa-signin-form) { z-index:10000; background:rgba(7,17,27,.65); backdrop-filter:blur(6px); padding:20px; }
#app-dialog:has(#mfa-signin-form) { width:min(520px,100%); padding:0; border-radius:var(--radius); box-shadow:var(--shadow); max-height:calc(100dvh - 40px); }
#app-dialog:has(#mfa-signin-form) .dialog-head { background:var(--ink); color:var(--white); padding:26px 24px; gap:16px; }
#app-dialog:has(#mfa-signin-form) #dialog-title { display:flex; align-items:center; gap:14px; margin:0; font:700 clamp(1.25rem,3vw,1.55rem)/1.2 var(--font-display); letter-spacing:-.025em; }
#app-dialog:has(#mfa-signin-form) #dialog-title svg { flex-shrink:0; color:var(--orange-2); }
#app-dialog:has(#mfa-signin-form) .icon-button { width:44px; height:44px; flex-shrink:0; border-radius:12px; background:var(--ink-2); color:var(--white); font-size:1.3rem; }
#mfa-signin-form { padding:28px; margin:0; }
#mfa-signin-form .mfa-step { margin:0 0 12px; color:var(--ink); font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }
#mfa-signin-form .mfa-intro { margin:0 0 24px; color:var(--muted); font-size:.94rem; line-height:1.6; }
#mfa-signin-form label { display:block; margin:0 0 10px; color:var(--ink); font-weight:700; font-size:.88rem; }
#mfa-signin-code { display:block; width:100%; min-height:76px; padding:14px 12px 14px 24px; border:1px solid var(--line); border-radius:14px; background:var(--paper); color:var(--ink); font:700 clamp(1.65rem,5vw,2.2rem)/1.2 var(--font-ui); font-variant-numeric:tabular-nums; text-align:center; letter-spacing:.4em; transition:border-color .2s,box-shadow .2s; }
#mfa-signin-code::placeholder { color:var(--muted); opacity:.6; }
#mfa-signin-code:focus { border-color:var(--orange); outline:3px solid var(--orange); outline-offset:3px; }
#mfa-signin-code[aria-invalid="true"] { border-color:var(--red); }
#mfa-signin-form .mfa-code-hint { margin:12px 0 0; font-size:.76rem; line-height:1.5; color:var(--muted); }
#mfa-signin-form .mfa-error { margin:16px 0 0; padding:12px 14px; border-left:3px solid var(--red); border-radius:8px; background:var(--paper); color:var(--red); font-size:.85rem; line-height:1.5; }
#mfa-signin-form [hidden] { display:none!important; }
#mfa-signin-form .modal-actions-bar { display:flex; flex-direction:column; align-items:stretch; gap:8px; margin-top:24px; }
#mfa-signin-form .modal-actions-bar button { width:100%; min-height:48px; border-radius:12px; font-size:.88rem; transition:transform .2s,background .2s; }
#mfa-signin-form .primary { display:flex; align-items:center; justify-content:center; gap:10px; }
#mfa-signin-form .secondary { border:0; background:transparent; box-shadow:none; color:var(--muted); }
#mfa-signin-form .mfa-submit-icon { display:flex; }
#mfa-signin-form[aria-busy="true"] .mfa-submit-icon svg { display:none; }
#mfa-signin-form[aria-busy="true"] .mfa-submit-icon { width:18px; height:18px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:auth-spin .7s linear infinite; }
#mfa-signin-form button:disabled { opacity:.65; cursor:wait; }
#mfa-signin-form .mfa-reassurance { display:flex; justify-content:center; align-items:center; gap:7px; color:var(--muted); font-size:.75rem; margin:12px 0 22px; }
#mfa-signin-form .mfa-help { border-top:1px solid var(--line); padding-top:18px; }
#mfa-signin-form .mfa-help summary { cursor:pointer; color:var(--ink); font-size:.82rem; font-weight:700; min-height:32px; }
#mfa-signin-form .mfa-help p { margin:8px 0 0; color:var(--muted); font-size:.8rem; line-height:1.6; }
#app-dialog:has(#mfa-signin-form) :is(button,summary):focus-visible { outline:3px solid var(--orange); outline-offset:3px; }
#mfa-signin-form button:active:not(:disabled) { transform:scale(.98); }
@media (prefers-reduced-motion:no-preference) {
  #app-dialog[open]:has(#mfa-signin-form) { animation:auth-arrive .28s ease-out both; }
}
@media (max-width:480px) {
  #modal-backdrop:has(#mfa-signin-form) { padding:12px; }
  #app-dialog:has(#mfa-signin-form) { max-height:calc(100dvh - 24px); }
  #app-dialog:has(#mfa-signin-form) .dialog-head { padding:20px 18px; gap:8px; }
  #app-dialog:has(#mfa-signin-form) #dialog-title { gap:10px; }
  #mfa-signin-form { padding:22px 18px; }
  #mfa-signin-code { letter-spacing:.3em; padding-left:20px; }
}
@media (prefers-reduced-motion:reduce) {
  #app-dialog:has(#mfa-signin-form), #mfa-signin-form *, #app-dialog:has(#mfa-signin-form) button { animation:none!important; transition:none!important; transform:none!important; }
}