/* Derived from the existing A.3.1 AuthShell / LoginScreen and approved
   Sóbrio / Acento apagado theme. No dependency on application navigation. */
:root { --ink:#0e0f0c; --ink2:#222421; --paper:#f1f0eb; --card:#faf9f5; --line:#d7d4ca; --accent:#6f9d63; --bad:#a8402f; --badbg:#f1dcd4; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--ink); }
body { font-family:Geist,system-ui,sans-serif; -webkit-font-smoothing:antialiased; font-feature-settings:"ss01","cv11"; color:var(--ink); }
button,input { font:inherit; }
button { cursor:pointer; }
button:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
[hidden] { display:none!important; }
.auth-shell { min-height:100vh; min-height:100svh; display:flex; background:var(--ink); }
.presentation { width:44%; flex-shrink:0; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; padding:48px; color:var(--paper); }
.brand { display:flex; align-items:center; gap:12px; font-family:'Space Grotesk',Geist,system-ui,sans-serif; font-weight:600; font-size:26px; letter-spacing:-.025em; }
.mark { display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex-shrink:0; border-radius:50%; background:var(--paper); }
.mark svg { width:50%; height:50%; fill:var(--ink); }
.introduction { position:relative; z-index:1; padding:48px 0; }
.introduction h2 { margin:0; font-family:'Space Grotesk',Geist,system-ui,sans-serif; font-size:56px; line-height:1.02; letter-spacing:-.025em; font-weight:600; }
.introduction p { font-size:14px; line-height:1.6; color:rgba(241,240,235,.65); margin:20px 0 0; max-width:400px; }
.copyright { font-size:11px; color:rgba(241,240,235,.55); margin:0; position:relative; z-index:1; }
.ring { position:absolute; border-radius:50%; border:1px solid rgba(241,240,235,.1); pointer-events:none; }
.ring-large { width:420px; height:420px; bottom:-96px; right:-96px; }
.ring-small { width:280px; height:280px; bottom:-40px; right:-40px; }
.access { flex:1; display:flex; justify-content:center; align-items:center; padding:24px; min-width:0; }
.login-wrap { width:100%; max-width:460px; }
.login-card { position:relative; background:var(--card); border:1px solid var(--line); border-radius:28px; padding:32px; }
.login-card::after { content:''; position:absolute; top:14px; right:14px; width:7px; height:7px; border-radius:50%; background:var(--accent); }
h1 { font-family:'Space Grotesk',Geist,system-ui,sans-serif; font-size:32px; line-height:1; font-weight:600; letter-spacing:-.025em; margin:0; }
.intro { color:#4a483f; font-size:13px; line-height:1.6; margin:8px 0 28px; }
.field { margin-bottom:16px; }
.field label { display:block; color:#4a483f; font-size:11px; text-transform:uppercase; font-weight:500; letter-spacing:.14em; margin-bottom:6px; }
.input-wrap { display:flex; align-items:center; background:rgba(241,240,235,.58); border:1px solid var(--line); border-radius:16px; transition:border-color .2s,box-shadow .2s; }
.input-wrap:focus-within { border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
.input-wrap>svg { width:15px; height:15px; margin-left:16px; color:#5a584f; flex-shrink:0; }
svg:not(.mark svg) { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
input { width:100%; flex:1; min-width:0; border:0; background:transparent; padding:0 16px; height:44px; font-size:14px; color:var(--ink); outline:none; border-radius:16px; }
input::placeholder { color:#76746b; }
.show-password { flex-shrink:0; background:none; border:0; padding:0; width:44px; height:44px; display:flex; align-items:center; justify-content:center; color:#5a584f; border-radius:12px; }
.show-password:hover { color:var(--ink); }
.show-password svg { width:17px; height:17px; }
.submit { margin-top:8px; display:flex; align-items:center; justify-content:center; gap:8px; border:0; background:var(--ink); color:var(--paper); border-radius:10px; height:48px; width:100%; font-size:14px; font-weight:500; transition:background .2s; }
.submit:hover { background:var(--ink2); }
.submit svg { width:15px; height:15px; }
.submit:disabled { opacity:.7; cursor:wait; }
.error { display:flex; gap:10px; color:var(--bad); background:var(--badbg); padding:12px 16px; margin-bottom:20px; border-radius:16px; font-size:12.5px; line-height:1.5; }
.error>svg { width:16px; height:16px; flex-shrink:0; margin-top:2px; }
.error:focus { outline:none; }
.mobile-brand,.mobile-copyright { display:none; }
.noscript { font-size:12px; color:#4a483f; line-height:1.5; margin-bottom:0; }
@media(max-width:1023px) {
 .presentation { display:none; }
 .mobile-brand { display:flex; margin-bottom:24px; font-size:20px; gap:10px; }
 .mobile-brand .mark { width:34px; height:34px; background:var(--ink); }
 .mobile-brand .mark svg { fill:var(--paper); }
 .mobile-copyright { display:block; margin:20px 0 0; font-size:11px; text-align:center; color:rgba(241,240,235,.65); }
 input { font-size:16px; }
}
@media(max-width:360px) { .access { padding:16px; } .login-card { padding:24px; } .mobile-brand { font-size:18px; } }
@media(prefers-reduced-motion:no-preference) { .login-card { animation:fade-up .3s cubic-bezier(.2,.7,.3,1); } @keyframes fade-up { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } } }