/* Login isolado. Referência de composição: 21st Sign In Split Screen (19050). */
:root { color-scheme:dark; --login-bg:#0f1511; --login-card:#19221b; --login-raised:#243026; --login-line:#334238; --login-strong:#546759; --login-text:#f1f4e9; --login-muted:#a5b3a8; --login-accent:#c3ef6b; --login-error:#f09b91; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { display:flow-root; min-height:100svh; margin:0; background:radial-gradient(ellipse at 30% 0%,#34462724,transparent 60%),var(--login-bg); background-repeat:no-repeat; color:var(--login-text); font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
[hidden] { display:none!important; }
button,input,textarea { font:inherit; }
button { cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button:disabled { cursor:wait; }
button:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible { outline:2px solid var(--login-accent); outline-offset:4px; }
::selection { color:var(--login-bg); background:var(--login-accent); }
.login-layout { display:grid; grid-template-columns:1.05fr 1fr; width:calc(100% - 80px); max-width:1120px; min-height:min(740px,calc(100svh - 80px)); margin:40px auto; border:1px solid var(--login-line); border-radius:32px; background:#161e18; box-shadow:0 30px 100px #0003; }
.login-story { display:flex; flex-direction:column; justify-content:space-between; min-width:0; padding:44px; border-right:1px solid #344537; border-radius:31px 0 0 31px; background:radial-gradient(ellipse at 70% 70%,#bce9700b,transparent 66%),linear-gradient(145deg,#283626,#19241b 58%,#1b271e); }
.login-brand-row { display:flex; align-items:center; gap:15px; }
.login-brand { display:block; width:178px; max-width:calc(100% - 50px); height:auto; }
.login-club { flex:none; padding:4px 7px; color:#c4d5b5; border:1px solid #6b825b65; border-radius:6px; font-size:8px; letter-spacing:.12em; font-weight:650; }
.login-intro { padding:52px 0 20px; }
.login-eyebrow { color:var(--login-accent); font-size:9px; letter-spacing:.14em; line-height:1.6; font-weight:750; margin:0 0 13px; }
.login-intro h2 { font-size:clamp(37px,4.1vw,53px); line-height:1.1; font-weight:720; letter-spacing:-.052em; margin:0 0 21px; }
.login-intro h2 span { color:var(--login-accent); }
.login-intro-copy { font-size:14px; line-height:1.85; color:#b4c2b5; max-width:35ch; margin:0; }
.login-scene { position:relative; width:100%; height:210px; margin:24px 0 12px; overflow:hidden; }
.login-scene::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at center,#c3ef6b0f,transparent 65%); }
.login-pitch { position:absolute; width:360px; height:184px; top:7px; left:50%; transform:translateX(-50%) perspective(700px) rotateX(40deg) rotateZ(-10deg); border:1px solid #c3ef6b38; border-radius:14px; background:repeating-linear-gradient(90deg,#c3ef6b05 0 36px,transparent 36px 72px); box-shadow:0 20px 60px #0002; }
.login-pitch-line { position:absolute; inset:0 auto 0 50%; width:1px; background:#c3ef6b26; }
.login-pitch-circle { position:absolute; top:50%; left:50%; width:76px; height:76px; transform:translate(-50%,-50%); border:1px solid #c3ef6b32; border-radius:50%; }
.login-pitch-box { position:absolute; top:25%; bottom:25%; left:-1px; width:53px; border:1px solid #c3ef6b26; border-radius:0 5px 5px 0; }
.login-pitch-box::after { content:""; position:absolute; top:-1px; bottom:-1px; left:307px; width:53px; border:1px solid #c3ef6b26; border-radius:5px 0 0 5px; }
.login-scene-mark { position:absolute; top:43px; left:50%; display:grid; place-items:center; width:96px; height:96px; transform:translateX(-50%); background:#293b27; border:1px solid #b9dd7870; border-radius:50%; box-shadow:0 18px 32px #0004,0 0 0 7px #c3ef6b08,0 0 0 17px #c3ef6b04; animation:login-mark-in .8s cubic-bezier(.2,.7,.3,1); }
.login-scene-mark img { width:72px; height:72px; display:block; border-radius:50%; }
.login-scene-label { position:absolute; bottom:15px; left:0; right:0; color:#a5b99c; text-align:center; font-size:7px; letter-spacing:.17em; }
.login-features { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.login-features > span { display:flex; align-items:center; gap:7px; padding:7px 9px; border:1px solid #4c604552; border-radius:9px; color:#c1cdbb; font-size:10px; white-space:nowrap; background:#101b1240; }
.login-features svg { width:14px; height:14px; fill:none; stroke:#bfd992; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.login-story-footer { margin:20px 0 0; color:#8fa28e; font-size:11px; }
.login-access { display:flex; flex-direction:column; justify-content:center; padding:44px 48px; min-width:0; }
.login-card { position:relative; min-width:0; animation:login-in .4s cubic-bezier(.2,.7,.3,1); }
.login-access-icon { display:grid; place-items:center; width:44px; height:44px; margin-bottom:23px; border:1px solid #627b4559; border-radius:14px; background:#c3ef6b09; color:var(--login-accent); }
.login-access-icon svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.login-card h1 { font-size:31px; line-height:1.2; font-weight:700; letter-spacing:-.045em; margin:0 0 12px; overflow-wrap:anywhere; }
.login-description { margin:0 0 28px; color:var(--login-muted); font-size:13px; line-height:1.8; max-width:38ch; }
.login-field { margin:0 0 20px; min-width:0; }
.login-field label { display:block; margin:0 0 9px; color:#d9e2d7; font-size:12px; font-weight:600; }
.login-input-wrap { position:relative; min-width:0; }
.login-field input { display:block; width:100%; min-width:0; min-height:54px; border:1px solid #455749; border-radius:13px; padding:14px 14px 14px 43px; background:#101912; color:var(--login-text); font-size:16px; line-height:1.5; transition:border-color .18s,box-shadow .18s,background .18s; }
.login-field input::placeholder { color:#89998b; opacity:1; }
.login-field input:focus { border-color:#b0d375; background:#142016; box-shadow:0 0 0 3px #c3ef6b0d; outline:none; }
.login-field input[aria-invalid="true"] { border-color:var(--login-error); }
.login-field input:disabled { opacity:.7; }
.login-field-icon { position:absolute; left:15px; top:18px; width:17px; height:17px; pointer-events:none; fill:none; stroke:#8fa28f; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:stroke .18s; }
.login-input-wrap:focus-within .login-field-icon { stroke:var(--login-accent); }
.login-password-wrap input { padding-right:89px; }
.login-password-toggle { position:absolute; top:5px; right:5px; min-width:74px; min-height:44px; padding:8px 9px; border:0; border-radius:9px; background:transparent; color:#b9c8b2; font-size:12px; font-weight:600; }
.login-password-toggle:hover { color:var(--login-text); background:var(--login-raised); }
.login-password-toggle:disabled { opacity:.6; }
.login-caps { margin:8px 0 0; color:var(--login-muted); font-size:12px; }
.login-error { margin:0 0 18px; padding:12px 14px; border:1px solid #f09b9138; border-radius:12px; background:#f09b9110; color:var(--login-error); font-size:13px; line-height:1.65; overflow-wrap:anywhere; }
.login-submit { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:54px; padding:14px 18px; border:1px solid #cbed8b; border-radius:13px; background:linear-gradient(110deg,#c3ef6b,#d0f288); color:#1a2813; box-shadow:0 5px 19px #c3ef6b0c; font-size:14px; font-weight:700; transition:background .18s,box-shadow .18s,scale .16s; }
.login-submit:hover:not(:disabled) { background:#d3fa89; box-shadow:0 6px 25px #c3ef6b1c; }
.login-submit:active:not(:disabled) { scale:.985; }
.login-submit:disabled { opacity:.75; }
.login-submit-arrow { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:translate .2s; }
.login-submit:hover:not(:disabled) .login-submit-arrow { translate:3px 0; }
.login-spinner { width:16px; height:16px; border:2px solid #19231240; border-top-color:#192312; border-radius:50%; animation:login-spin .7s linear infinite; }
.login-progress { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.login-help { margin:13px 0 0; }
.login-help summary { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; padding:10px 0; list-style:none; color:#b5c2af; font-size:12px; cursor:pointer; }
.login-help summary::-webkit-details-marker { display:none; }
.login-help summary:hover { color:var(--login-accent); }
.login-help summary svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5; transition:rotate .2s; }
.login-help[open] summary svg { rotate:180deg; }
.login-help p { color:var(--login-muted); margin:4px 0 13px; font-size:12px; line-height:1.7; }
.login-help-actions { display:flex; flex-wrap:wrap; gap:9px; margin:14px 0; }
.login-help-actions a,.login-help-actions button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 13px; border:1px solid #c7ef7838; border-radius:10px; background:#c7ef780a; color:#c7ef78; font:inherit; font-size:12px; cursor:pointer; text-decoration:none; }
#login-help-message { width:100%; min-height:96px; background:#101813; color:#eef2e9; font:inherit; font-size:16px; padding:12px; border:1px solid #344439; border-radius:10px; }
#login-help-status { font-size:12px; line-height:1.6; }
.login-mode { margin-top:18px; padding-top:12px; border-top:1px solid var(--login-line); }
.login-mode button { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:44px; padding:9px 4px; border:0; background:none; color:#9aac98; text-align:center; font-size:12px; }
.login-mode button:hover { color:var(--login-accent); }
.login-mode button span { font-size:16px; }
.login-mode button:disabled { opacity:.5; }
.login-access-footer { text-align:center; margin:13px 0 0; color:#849680; font-size:10px; }
.login-noscript { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); margin:0; width:max-content; max-width:calc(100% - 32px); padding:14px 18px; border:1px solid var(--login-strong); border-radius:12px; background:var(--login-raised); color:var(--login-text); font-size:13px; }
@keyframes login-in { from { opacity:.35; translate:0 10px; } to { opacity:1; translate:0 0; } }
@keyframes login-mark-in { from { opacity:0; transform:translateX(-50%) translateY(10px) scale(.9); } to { opacity:1; transform:translateX(-50%) translateY(0) scale(1); } }
@keyframes login-spin { to { transform:rotate(360deg); } }
@media (min-width:1000px) and (max-width:1150px) { .login-story { padding:36px 30px; } .login-access { padding:38px 32px; } .login-intro h2 { font-size:41px; } }
@media (max-width:999px) {
  .login-layout { display:block; width:100%; max-width:520px; min-height:100svh; padding:max(36px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); margin:0 auto; background:transparent; border:0; box-shadow:none; }
  .login-story { display:block; padding:0; border:0; background:none; }
  .login-brand-row { justify-content:center; margin-bottom:28px; }
  .login-brand { width:164px; }
  .login-intro,.login-story-footer { display:none; }
  .login-access { padding:0; }
  .login-card { padding:32px 30px 20px; border:1px solid #41523e; border-radius:27px; background:linear-gradient(145deg,#253123 0%,var(--login-card) 42%); box-shadow:0 18px 50px #0002; }
  .login-access-icon { position:absolute; top:27px; right:27px; width:32px; height:32px; border-radius:10px; margin:0; }
  .login-access-icon svg { width:17px; height:17px; }
  .login-card > .login-eyebrow { margin-right:42px; margin-bottom:18px; }
  .login-mode { margin:14px 15px 0; border:0; padding-top:0; }
  .login-access-footer { margin-top:6px; }
}
@media (min-width:601px) and (max-width:999px) and (min-height:701px) { .login-layout { display:flex; flex-direction:column; justify-content:center; padding-block:50px; } .login-brand-row { margin-bottom:32px; } }
@media (max-width:600px), (max-width:1000px) and (max-height:500px) {
  .login-layout { min-height:var(--login-viewport-height,100svh); padding:clamp(24px,5svh,42px) max(18px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); }
  .login-brand-row { margin-bottom:26px; }
  .login-brand { width:158px; }
  .login-card { padding:28px 23px 19px; border-radius:25px; }
  .login-access-icon { top:23px; right:22px; }
  .login-card h1 { font-size:28px; }
  .login-description { font-size:13px; margin-bottom:25px; line-height:1.7; }
  .login-field { margin-bottom:19px; }
  .login-field label { font-size:13px; }
  .login-field input { min-height:56px; scroll-margin-block:18px; }
  .login-field-icon { top:19px; }
  .login-password-toggle { top:6px; right:5px; }
  .login-submit { min-height:56px; font-size:15px; }
  .login-help summary,.login-mode button { min-height:48px; font-size:12px; }
  body[data-login-keyboard="true"] .login-layout { padding-top:max(12px,env(safe-area-inset-top)); }
  body[data-login-keyboard="true"] :is(.login-story,.login-access-footer,.login-description,.login-access-icon) { display:none; }
  body[data-login-keyboard="true"] .login-card > .login-eyebrow { display:none; }
  body[data-login-keyboard="true"] .login-card { padding-top:20px; }
  body[data-login-keyboard="true"] .login-card h1 { font-size:24px; margin-bottom:20px; }
}
@media (max-width:359px) {
  .login-layout { padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right)); }
  .login-card { padding-inline:18px; }
  .login-card h1 { font-size:25px; }
  .login-brand { width:148px; }
}
@media (max-width:600px) and (max-height:700px) {
  .login-layout { padding-top:max(20px,env(safe-area-inset-top)); }
  .login-brand-row { margin-bottom:19px; }
  .login-card { padding-top:25px; }
  .login-description { margin-bottom:20px; }
  .login-field { margin-bottom:16px; }
  .login-field input,.login-submit { min-height:52px; }
  .login-field-icon { top:17px; }
  .login-password-toggle { top:4px; }
}
@media (max-width:1000px) and (max-height:500px) {
  .login-layout { display:block; width:100%; max-width:570px; border:0; margin:0 auto; background:none; box-shadow:none; padding-top:max(16px,env(safe-area-inset-top)); }
  .login-story { display:block; border:0; background:none; padding:0; }
  .login-brand-row { justify-content:center; margin-bottom:15px; }
  .login-intro,.login-story-footer,.login-access-footer { display:none; }
  .login-brand { width:124px; }
  .login-access { padding:0; }
  .login-card { padding:22px; }
  .login-card h1 { font-size:24px; }
  .login-description { font-size:12px; margin-bottom:18px; }
  .login-field { margin-bottom:14px; }
}
@media (min-width:601px) and (max-width:1000px) and (max-height:500px) {
  #login-form { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 14px; }
  #login-form > .login-field[hidden] + .login-field,#login-form > .login-error,#login-form > .login-submit,#login-form > .login-progress { grid-column:1/-1; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } .login-submit:active:not(:disabled) { scale:1; } }