:root {
  color-scheme: dark;
  --navy: #111c2e;
  --navy-deep: #0b1423;
  --navy-soft: #18293d;
  --teal: #11858a;
  --teal-light: #56c1be;
  --champagne: #c3a16a;
  --ivory: #f7f7f3;
  --muted: #aab9c7;
  --line: rgba(206, 221, 229, .16);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--navy-deep);
  color: var(--ivory);
  font-synthesis: none;
}
* {box-sizing: border-box}
html {scroll-behavior: smooth}
body {margin: 0; min-height: 100vh; background: radial-gradient(ellipse 70% 65% at 78% 1%, #1a364a 0, transparent 70%),linear-gradient(135deg,#101b2b 0%,#0b1423 100%)}
a {color: inherit}
.site-header {border-bottom: 1px solid var(--line); background: rgba(17,28,46,.87)}
.site-header__inner {max-width: 1160px; margin: auto; padding: 18px 30px; display: flex; gap: 24px; justify-content: space-between; align-items: center}
.official-mark {display: inline-flex; align-items: center; flex-shrink: 0}
.official-mark img {display: block; width: clamp(155px,18vw,198px); height: auto}
.product-name {text-align: right; display: flex; flex-direction: column; gap: 3px}
.product-name strong {font-size: .79rem; font-weight: 720; letter-spacing: .16em; text-transform: uppercase}
.product-name small {font-size: .72rem; letter-spacing: .11em; color: var(--muted); text-transform: uppercase}
.eyebrow {font-size: .76rem; font-weight: 780; letter-spacing: .17em; text-transform: uppercase; color: var(--teal-light)}
.page-main {max-width: 1080px; margin: 42px auto 80px; padding: 0 30px}
.intro {max-width: 720px; margin: 0 0 28px}
.intro h1 {font-size: clamp(2rem,4.5vw,3.2rem); line-height: 1.14; letter-spacing: -.045em; font-weight: 680; margin: 12px 0}
.intro p {max-width: 630px; color: var(--muted); line-height: 1.65}
.card {background: linear-gradient(165deg,rgba(31,48,67,.98),rgba(21,35,52,.98));border: 1px solid var(--line);border-radius: 18px;padding: clamp(22px,3vw,32px);margin: 18px 0;box-shadow: 0 25px 68px rgba(3,10,20,.12)}
.card h2 {font-size: 1.55rem; letter-spacing: -.02em; margin: 0 0 16px}
.card h3 {font-size: 1.15rem; margin: 0 0 14px}
.card p {line-height: 1.65}
.login-card {max-width: 640px}
.grid {display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr));gap: 12px}
label {display: block; font-size: .85rem; letter-spacing: .005em; font-weight: 650; color: #dde7ee; margin: 16px 0 7px}
input, textarea, select {width: 100%; background: rgba(6,16,28,.58); color: var(--ivory); border: 1px solid rgba(177,205,219,.28); border-radius: 9px; padding: 13px 14px; font: inherit; outline: none; min-height: 46px}
input:focus-visible,textarea:focus-visible,select:focus-visible {border-color: var(--teal-light); box-shadow: 0 0 0 3px rgba(17,133,138,.20)}
input[readonly] {color: var(--muted); opacity: .85}
button, .btn {display: inline-flex; justify-content: center;align-items: center;gap: 8px; background: var(--teal); color: #fff; border: 1px solid transparent; border-radius: 10px; padding: 12px 18px; font: inherit;font-size:.91rem;font-weight:740;letter-spacing:.008em;cursor:pointer;text-decoration:none;min-height: 46px;margin: 14px 8px 4px 0;transition: background .18s,transform .18s}
button:hover,.btn:hover {background: #15999e;transform:translateY(-1px)}
button.secondary,.btn.secondary {background: transparent; color: var(--ivory); border-color: rgba(195,161,106,.68)}
button.secondary:hover,.btn.secondary:hover {background: rgba(195,161,106,.10)}
button:disabled {opacity:.45; cursor:not-allowed; transform:none}
.muted,small {color:var(--muted)}
.status {border-left: 3px solid var(--teal);background:rgba(17,133,138,.10);padding: 12px 17px;border-radius:0 9px 9px 0;margin: 16px 0;line-height:1.65}
.status.error {border-color:#df8178;background:rgba(196,79,74,.11)}
.status.safe {border-color:var(--teal-light)}
article {padding: 17px 0; border-top:1px solid var(--line)}
article strong {display:block; margin-bottom:5px}
article .muted {font-size:.88rem}
[hidden] {display:none!important}
.site-footer {border-top: 1px solid var(--line); color: #9eb0bf; padding: 23px 30px; font-size:.76rem; letter-spacing:.025em}
.site-footer__inner {max-width: 1100px; margin: auto; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
.site-footer strong {color:var(--champagne);font-weight:650}

/* Callback universal: protagonista único e confirmação sem distrações. */
.auth-main {max-width: 1110px; min-height: calc(100vh - 164px); padding: clamp(38px,8vw,88px) 30px; margin: auto; display:grid; grid-template-columns: 1fr minmax(350px,.88fr); align-items:center; gap: clamp(28px,5vw,86px)}
.auth-story h1 {font-size:clamp(2.3rem,5vw,4.5rem);line-height:1.07;letter-spacing:-.055em;font-weight:670; margin:16px 0 22px}
.auth-story h1 span {color:var(--teal-light)}
.auth-story p:not(.eyebrow) {max-width:480px; color:var(--muted);line-height:1.75; font-size:1.03rem}
.auth-story__rule {width:52px;height:3px;background:var(--champagne);margin-top:30px}
.auth-card {background:linear-gradient(155deg,#233549 0%,#17283b 100%);border:1px solid rgba(184,215,230,.24);border-radius:23px;padding:clamp(26px,4vw,44px);box-shadow:0 32px 90px rgba(2,8,17,.25)}
.auth-card__icon {width:56px;height:56px;border:1px solid rgba(86,193,190,.5);border-radius:17px;display:grid;place-items:center;color:var(--teal-light);font-size:1.6rem;margin-bottom:28px;background:rgba(17,133,138,.1)}
.auth-card h2 {font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.2;letter-spacing:-.03em;font-weight:680;margin:0 0 14px}
.auth-card p {color:var(--muted);line-height:1.7;margin:0 0 23px}
.auth-actions {display:flex;gap:10px;flex-wrap:wrap}
.auth-actions .btn {margin:0}
.auth-note {border-top:1px solid var(--line);padding-top:17px;margin-top:28px;font-size:.8rem;color:var(--muted)}
@media (max-width:760px){.site-header__inner{padding:15px 20px}.official-mark img{width:150px}.product-name strong{font-size:.66rem}.product-name small{font-size:.61rem}.page-main{margin:28px auto 60px;padding:0 20px}.auth-main{grid-template-columns:1fr;min-height:auto;padding:45px 20px;gap:28px}.auth-story h1{font-size:2.6rem}.auth-story p:not(.eyebrow){font-size:.94rem}.auth-card{padding:26px}.auth-actions{flex-direction:column}.auth-actions .btn{width:100%}}
@media (prefers-reduced-motion: reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}