/* Login, sign-up and "cadastro enviado" screens: job-site paper, the 3D scene behind (auth-scene.js,
   mounted by auth-mount.js) and a light glass card on top. Overrides the base rules in styles.css. */
.auth-mode{--au-ink:#172b28;--au-soft:#3d4f4a;--au-muted:#6b7a76;--au-line:#e1e6e2;--au-green:#217661;--au-green-deep:#185c4b;--au-yellow:#E3B23C;--au-red:#b42318;--au-mono:'JetBrains Mono',ui-monospace,monospace;--au-ease:cubic-bezier(.2,.8,.2,1);background:#f6f8f6;font-family:Archivo,Geist,'DM Sans',ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.auth-mode #app{position:relative;z-index:1}

/* Scene host: blueprint paper, then the transparent WebGL canvas with the tapes and tools. */
.auth-scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background-color:#f6f8f6;background-image:linear-gradient(#21766112 1px,transparent 1px),linear-gradient(90deg,#21766112 1px,transparent 1px),linear-gradient(#21766109 1px,transparent 1px),linear-gradient(90deg,#21766109 1px,transparent 1px);background-size:160px 160px,160px 160px,32px 32px,32px 32px;background-position:center}
.auth-scene-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .9s var(--au-ease,ease)}
.auth-scene.is-ready .auth-scene-canvas{opacity:1}
/* Soft light behind the card so the form never competes with the scene. */
.auth-scene::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 520px 460px at 50% 50%,#ffffffa6,#ffffff00 72%)}

/* Without WebGL: printed tapes in CSS, crossing behind the card. */
.auth-scene-flat{display:none;position:absolute;inset:0}
.auth-scene.is-flat .auth-scene-flat{display:block}
.auth-tape{position:absolute;left:-20%;width:140%;height:54px;background:repeating-linear-gradient(-45deg,#111214 0 26px,#E3B23C 26px 52px);box-shadow:0 14px 26px -12px #1f2a2666,inset 0 3px 0 #0000001f,inset 0 -3px 0 #0000001f;animation:auth-tape-run 9s linear infinite}
.auth-tape-a{top:46%;transform:rotate(-18deg)}
.auth-tape-b{top:44%;transform:rotate(21deg);animation-direction:reverse}
.auth-tape-c{top:84%;height:42px;transform:rotate(-4deg);animation-duration:13s}
@keyframes auth-tape-run{to{background-position:147px 0}}

/* Layout */
.auth-mode .login-wrap{max-width:480px;min-height:100dvh;margin:0 auto;padding:48px 20px 28px;display:flex;flex-direction:column;justify-content:center}

/* Card: light glass over the scene, caution stripe on top, drafting corners. */
.auth-mode .login-card{position:relative;background:#ffffffe8;-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border:1px solid #12141712;border-radius:22px;padding:38px 34px 26px;box-shadow:inset 0 1px 0 #fff,0 1px 2px #1f2a2614,0 12px 24px -14px #1f2a262e,0 40px 80px -36px #1f2a2659;animation:auth-card-in .75s var(--au-ease) both}
.auth-mode .login-card::before{content:'';position:absolute;left:22px;right:22px;top:0;height:7px;border-radius:0 0 6px 6px;background:repeating-linear-gradient(-45deg,var(--au-ink) 0 9px,var(--au-yellow) 9px 18px);box-shadow:0 2px 6px -2px #0004}
.auth-mode .login-card::after{content:'';position:absolute;inset:10px;pointer-events:none;border-radius:14px;--c:#b4bac4;background:linear-gradient(var(--c),var(--c)) top left/12px 1.5px,linear-gradient(var(--c),var(--c)) top left/1.5px 12px,linear-gradient(var(--c),var(--c)) top right/12px 1.5px,linear-gradient(var(--c),var(--c)) top right/1.5px 12px,linear-gradient(var(--c),var(--c)) bottom left/12px 1.5px,linear-gradient(var(--c),var(--c)) bottom left/1.5px 12px,linear-gradient(var(--c),var(--c)) bottom right/12px 1.5px,linear-gradient(var(--c),var(--c)) bottom right/1.5px 12px;background-repeat:no-repeat}
.auth-mode .login-card>*{position:relative;z-index:1;animation:auth-rise .6s var(--au-ease) both}
.auth-mode .login-card>:nth-child(2){animation-delay:.06s}
.auth-mode .login-card>:nth-child(3){animation-delay:.1s}
.auth-mode .login-card>:nth-child(4){animation-delay:.14s}
.auth-mode .login-card>:nth-child(5){animation-delay:.18s}
.auth-mode .login-card>:nth-child(n+6){animation-delay:.22s}
@keyframes auth-card-in{from{opacity:0;transform:translateY(22px) scale(.975);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes auth-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Header */
.auth-mode .login-brand{font-family:Geist,'DM Sans',sans-serif;font-size:24px;letter-spacing:-.03em;margin-bottom:24px;transition:transform .2s var(--au-ease)}
.auth-mode .login-brand:hover{transform:translateX(2px)}
.auth-mode .login-brand .brand-mark{width:38px;height:38px;filter:drop-shadow(0 4px 8px #21766133)}
.auth-mode .login-card .eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0;font:700 11px var(--au-mono);letter-spacing:.14em;color:var(--au-green)}
.auth-mode .login-card .eyebrow::before{content:'';width:9px;height:9px;border-radius:2px;background:var(--au-yellow);box-shadow:0 0 0 1.5px var(--au-ink)}
.auth-mode .login-card h1{margin:12px 0 8px;font-family:Archivo,Geist,sans-serif;font-size:30px;font-weight:700;line-height:1.12;letter-spacing:-.03em;color:var(--au-ink);text-wrap:balance}
.auth-mode .login-intro{margin:0;color:var(--au-soft);font-size:15px;line-height:1.55}
.auth-mode .login-card>p:not([class]){color:var(--au-soft);font-size:15px;line-height:1.6}

/* Form */
.auth-mode .login-card form{gap:16px;margin-top:24px}
.auth-mode .login-card .field{gap:7px;font-size:13px;font-weight:600;color:var(--au-soft);transition:color .15s}
.auth-mode .login-card .field:focus-within{color:var(--au-green)}
.auth-mode .login-card input,.auth-mode .login-card select,.auth-mode .login-card textarea{width:100%;min-height:50px;padding:12px 14px;border:1.5px solid var(--au-line);border-radius:12px;background:#fff;color:var(--au-ink);font-size:16px;font-weight:450;transition:border-color .15s,box-shadow .2s var(--au-ease),background .15s}
.auth-mode .login-card input::placeholder{color:#a3a9b3}
.auth-mode .login-card input:hover,.auth-mode .login-card select:hover,.auth-mode .login-card textarea:hover{border-color:#c3c9d4}
.auth-mode .login-card input:focus,.auth-mode .login-card select:focus,.auth-mode .login-card textarea:focus{outline:none;border-color:var(--au-green);box-shadow:0 0 0 4px #21766124}
.auth-mode .login-card input:user-invalid,.auth-mode .login-card select:user-invalid{border-color:var(--au-red);box-shadow:0 0 0 4px #b423181a}
.auth-mode .login-card .help{margin:-6px 0 0;font-size:12.5px;color:var(--au-muted)}
.auth-mode .password-field{border:1.5px solid var(--au-line);border-radius:12px;background:#fff;transition:border-color .15s,box-shadow .2s var(--au-ease)}
.auth-mode .password-field:hover{border-color:#c3c9d4}
.auth-mode .password-field:focus-within{border-color:var(--au-green);box-shadow:0 0 0 4px #21766124}
.auth-mode .login-card .password-field input{border:0;box-shadow:none;background:transparent;min-height:47px}
.auth-mode .password-field button{min-height:36px;margin-right:6px;padding:0 12px;border-radius:8px;color:var(--au-green);font:700 11px var(--au-mono);letter-spacing:.06em;text-transform:uppercase;transition:background .15s}
.auth-mode .password-field button:hover{background:#21766112}

/* Submit: vivid blue, lifts on hover, spinner while the request runs (the button is disabled meanwhile). */
.auth-mode .login-submit{position:relative;overflow:hidden;min-height:52px;margin-top:4px;border-radius:12px;background:linear-gradient(180deg,#2b8a71,var(--au-green-deep));color:#fff;font:700 15px Archivo,Geist,sans-serif;letter-spacing:.01em;box-shadow:inset 0 1px 0 #ffffff40,0 10px 22px -10px #217661b3;transition:transform .15s var(--au-ease),box-shadow .2s,filter .2s}
.auth-mode .login-submit::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,#ffffff47 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--au-ease)}
.auth-mode .login-submit:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.06);box-shadow:inset 0 1px 0 #ffffff40,0 16px 28px -12px #217661cc}
.auth-mode .login-submit:hover:not(:disabled)::before{transform:translateX(120%)}
.auth-mode .login-submit:active:not(:disabled){transform:translateY(0) scale(.985)}
.auth-mode .login-submit:focus-visible{outline:3px solid #21766166;outline-offset:3px}
.auth-mode .login-submit:disabled,.auth-mode .login-submit[aria-busy="true"],.auth-mode .login-submit.is-loading{opacity:1;cursor:progress;color:transparent;filter:saturate(.85)}
.auth-mode .login-submit:disabled::after,.auth-mode .login-submit[aria-busy="true"]::after,.auth-mode .login-submit.is-loading::after{content:'';position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:2.5px solid #ffffff59;border-top-color:#fff;animation:auth-spin .7s linear infinite}
.auth-mode .login-card form:has(.login-submit:disabled) input{opacity:.7}
@keyframes auth-spin{to{transform:rotate(360deg)}}

.auth-mode .form-error{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 14px;border:1px solid #ecc7c2;border-left:4px solid var(--au-red);border-radius:10px;background:#fdf3f1;color:#8f1d14;font-size:13.5px;animation:auth-shake .42s var(--au-ease)}
.auth-mode .form-error[hidden]{display:none}
.auth-mode .form-error::before{content:'!';flex:none;display:grid;place-items:center;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--au-red);color:#fff;font:800 12px Archivo,sans-serif}
@keyframes auth-shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

/* Switch between login and sign-up, help text, footer. */
.auth-mode .auth-switch{margin-top:18px;padding:14px 0 6px;border-top:1px dashed #d5dae2;color:var(--au-green);font:700 14px Archivo,Geist,sans-serif;min-height:0;transition:color .15s}
.auth-mode .auth-switch:hover{color:var(--au-green-deep);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.auth-mode .login-help{margin:8px 0 0;text-align:center;color:var(--au-muted);font-size:12.5px}
.auth-mode .login-footer{align-self:center;margin:20px 0 0;padding:7px 14px;border-radius:999px;background:#ffffffd9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #1214170f;color:var(--au-soft);font:600 11px var(--au-mono);letter-spacing:.1em;text-transform:uppercase;box-shadow:0 6px 16px -10px #1f2a2640}
.auth-mode .login-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:10px auto 0;padding:7px 12px;border-radius:8px;background:#ffffffed;font-size:12px}
.auth-mode .login-legal a{color:#245d50;text-decoration:underline;text-underline-offset:3px}
.auth-mode .signup-terms a{color:#135a4a;text-decoration:underline;text-underline-offset:2px}
.auth-mode .pending-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:#FBF1D6;color:#7a5a12;box-shadow:inset 0 0 0 1.5px #E3B23C;font-size:28px}

/* Sign-up card (.login-card--signup, added by the sign-up form): wider, fields in two columns on desktop. */
.auth-mode .login-wrap:has(.login-card--signup){max-width:760px}
.auth-mode .login-card--signup form{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
.auth-mode .login-card--signup form>*{grid-column:1/-1}
.auth-mode .login-card--signup form>.field{grid-column:auto}

@media(max-width:600px){
 .auth-mode .login-wrap{padding:24px 16px 20px;justify-content:flex-start}
 .auth-mode .login-card{padding:32px 20px 22px;border-radius:20px;background:#fffffff2}
 .auth-mode .login-card h1{font-size:26px}
 .auth-mode .login-card--signup form{grid-template-columns:minmax(0,1fr)}
 .auth-mode .login-card--signup form>.field{grid-column:1/-1}
 .auth-scene::after{background:#f6f8f633}
 .auth-tape{height:40px}
}
@media(max-width:600px) and (min-height:700px){.auth-mode .login-wrap{justify-content:center}}
@media(prefers-reduced-motion:reduce){
 .auth-mode .login-card,.auth-mode .login-card>*,.auth-mode .form-error,.auth-tape{animation:none}
 .auth-mode .login-submit,.auth-mode .login-submit::before,.auth-scene-canvas{transition:none}
 .auth-mode .login-submit:disabled::after{animation-duration:1.6s}
}
/* Terms: one compact line, a small checkbox beside the text (the input rule above is for text fields). */
.auth-mode .login-card .signup-terms{display:flex;align-items:flex-start;gap:10px;margin:2px 0 0;padding:0;font-size:13px;line-height:1.5;color:var(--au-soft);cursor:pointer}
.auth-mode .login-card .signup-terms input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;min-height:0;margin:0;padding:0;border:1.5px solid #b9c2bd;border-radius:6px;background:#fff;box-shadow:none;cursor:pointer;display:grid;place-items:center;transition:background .15s,border-color .15s}
.auth-mode .login-card .signup-terms input[type=checkbox]::after{content:'';width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px);opacity:0}
.auth-mode .login-card .signup-terms input[type=checkbox]:checked{background:var(--au-green);border-color:var(--au-green)}
.auth-mode .login-card .signup-terms input[type=checkbox]:checked::after{opacity:1}
.auth-mode .login-card .signup-terms input[type=checkbox]:focus-visible{outline:2px solid var(--au-green);outline-offset:2px;box-shadow:none}
.auth-mode .login-card .signup-terms input[type=checkbox]:user-invalid{border-color:var(--au-red);box-shadow:none}
.auth-mode .login-card .signup-terms span{flex:1;min-width:0}