/* Held back until the region check answers, so the form never flashes in
   front of someone we cannot serve. Released by the head script's timeout
   even if the lookup never returns. */
html.geo-wait .auth-card{visibility:hidden}

/* Seven Broker account screen: centred card over the hero background, site nav on top */
.account-body{
  padding-top:76px;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;
  background:
    radial-gradient(ellipse 60% 42% at 26% 8%,rgba(212,19,31,.22),transparent 70%),
    radial-gradient(ellipse 52% 40% at 78% 30%,rgba(212,19,31,.12),transparent 70%),
    linear-gradient(168deg,#1A1214 0%,#140F11 38%,#120D0F 100%);
}
html[data-theme="light"] .account-body{
  background:
    radial-gradient(ellipse 60% 42% at 26% 8%,rgba(212,19,31,.10),transparent 70%),
    radial-gradient(ellipse 52% 40% at 78% 30%,rgba(212,19,31,.06),transparent 70%),
    linear-gradient(168deg,#FDFBFB 0%,#FBF9F9 38%,#F5F1F1 100%);
}

.auth2{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(24px,4vh,48px) 16px 28px;
}
.auth-card{
  width:min(432px,100%);
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:clamp(22px,4vw,34px);
  box-shadow:0 24px 70px rgba(0,0,0,.38);
}
html[data-theme="light"] .auth-card{box-shadow:0 24px 70px rgba(23,18,21,.12)}

.auth-greeting{color:var(--text-secondary);font-size:.88rem;margin-bottom:4px}
.auth-form{display:grid;gap:16px}
.auth-form[hidden],.auth-soon[hidden]{display:none}
.auth-form h1{font-size:clamp(1.35rem,2.6vw,1.8rem)}
.auth-sub{color:var(--text-secondary);margin-top:-8px}
.auth-form label{display:grid;gap:7px;font-size:.9rem;font-weight:600}
.auth-form label span{color:var(--text-secondary)}
.auth-form input[type="text"],.auth-form input[type="email"],.auth-form input[type="password"]{
  background:var(--canvas);border:1px solid var(--line);border-radius:10px;
  color:var(--text-primary);font:400 1rem var(--font-b);padding:13px 14px;
  transition:border-color .25s var(--ease-out);
}
.auth-form input:focus{outline:none;border-color:var(--accent)}
.auth-form input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.check{grid-template-columns:auto 1fr;align-items:start;font-weight:400!important}
.check input{margin-top:4px;accent-color:var(--accent);width:16px;height:16px}
.check span{color:var(--text-secondary);font-size:.82rem;line-height:1.5}
.auth-cta{width:100%}
.auth-err{color:var(--accent-hover);font-size:.88rem}

.auth-switch{
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  color:var(--text-secondary);font-size:.88rem;margin-top:2px;
}
.auth-switch a{color:var(--menu-on);font-weight:600;text-decoration:none}
.auth-switch a:hover{color:var(--accent-hover)}
.auth-switch-right{margin-inline-start:auto}
#pane-criar .auth-switch{justify-content:center}

.auth-soon{display:grid;gap:16px}
.auth-soon h2{font-size:clamp(1.3rem,2.6vw,1.7rem)}
.auth-soon p{color:var(--text-secondary)}
/* visitor country: flag + name, above the heading */
/* country on one line, the address on the next, both centred in the card */
.geo-country{
  display:flex;flex-direction:column;align-items:center;gap:9px;margin:20px 0 22px;
  font-weight:600;color:var(--text-primary)!important;
}
.geo-line{display:inline-flex;align-items:center;gap:10px}
.geo-country[hidden]{display:none}
.flag-country{width:28px;height:28px}

/* legal notices: same container width as the card, with their own spacing */
.auth-legal{
  width:min(432px,100%);margin:20px auto 0;padding:0 clamp(14px,4vw,22px);
}
.auth-risk{
  text-align:center;color:var(--text-secondary);font-size:.75rem;line-height:1.6;
}
.auth-risk + .auth-risk{margin-top:10px}

/* 480, not 440: the folded iPhone Duo is 466 wide and 678 tall. Inside the old band it
   kept the centred card, which on a screen that short pushes the form off the fold. */
@media (max-width:480px){
  .auth2{justify-content:flex-start;padding-top:18px}
}

/* ---------- sign in with a provider ----------
   The buttons are drawn from whatever the server says is configured, so a
   provider without credentials is never a button that cannot work. Each one
   carries its own mark and nothing else: the marks are the only thing that
   tells them apart at a glance, so the row stays plain and lets them do it. */
.auth-social{display:grid;gap:12px}
.auth-social[hidden]{display:none}
.auth-or{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  color:var(--text-secondary);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
}
.auth-or::before,.auth-or::after{content:"";height:1px;background:var(--line)}
.sso-list{display:grid;gap:9px}
.sso{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:12px 14px;
  background:var(--canvas);border-radius:10px;
  /* a control has to be visible as a control: --line alone left the edge at
     1.3:1 against the button's own fill, under the 3:1 a non-text element needs */
  border:1px solid color-mix(in srgb, var(--line) 25%, var(--text-secondary));
  color:var(--text-primary);font:600 .95rem var(--font-b);cursor:pointer;
  transition:border-color .2s var(--ease-out),background .2s var(--ease-out);
}
.sso:hover{border-color:var(--text-primary);background:var(--wash)}
.sso:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sso:active{background:var(--wash)}
.sso[disabled]{opacity:.5;cursor:not-allowed}
.sso[disabled]:hover{border-color:color-mix(in srgb, var(--line) 25%, var(--text-secondary));background:var(--canvas)}
.sso svg{width:18px;height:18px;flex:none}
/* Apple and Microsoft ship one-colour marks, so they follow the text */
.sso-apple svg,.sso-microsoft-mono svg{fill:currentColor}
.sso-note{color:var(--text-secondary);font-size:.84rem;text-align:center}
.sso-note[hidden]{display:none}
.sso-note.is-bad{color:var(--accent-hover)}
.sso-busy{position:relative;color:transparent}
.sso-busy::after{
  content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;
  border:2px solid var(--text-secondary);border-top-color:transparent;border-radius:50%;
  animation:sso-spin .7s linear infinite;
}
@keyframes sso-spin{to{transform:rotate(360deg)}}
.in-via{color:var(--text-secondary);font-size:.82rem;letter-spacing:.04em}

/* ---------- checking a withdrawal ----------
   One question, one answer. The rows say enough to confirm the document and
   nothing that identifies whoever is holding it. */
.vf-card{width:min(520px,100%)}
/* the shared sub-heading is pulled up 8px, which works under a one-line title and
   collides under a two-line one; this heading wraps on a phone */
.vf-card h1{line-height:1.2}
.vf-card .auth-sub{margin-top:10px}
.vf-form{display:grid;gap:16px;margin-top:22px}
.vf-form input{
  background:var(--canvas);border:1px solid var(--line);border-radius:10px;
  color:var(--text-primary);font:400 1.05rem var(--font-m);letter-spacing:.06em;
  padding:13px 14px;text-transform:uppercase;
  transition:border-color .25s var(--ease-out);
}
.vf-form input:focus{outline:none;border-color:var(--accent)}
.vf-form input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vf-out{margin-top:26px;border-top:1px solid var(--line);padding-top:22px}
.vf-out[hidden]{display:none}
.vf-state{font-weight:600;display:flex;align-items:center;gap:10px}
.vf-state::before{content:"";width:9px;height:9px;border-radius:50%;flex:none;background:var(--text-secondary)}
.vf-state.is-ok::before{background:var(--up)}
.vf-state.is-bad::before{background:var(--accent)}
.vf-rows{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;margin:20px 0 0}
.vf-rows:empty{margin:0}
.vf-rows dt{color:var(--text-secondary);font-size:.86rem}
.vf-rows dd{text-align:right;color:var(--text-primary);font-size:.95rem}
.vf-note{color:var(--text-secondary);font-size:.82rem;line-height:1.6;margin-top:22px}