*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --navy:       #1A3A4A;
    --teal:       #4A9B8E;
    --teal-hover: #3D8578;
    --bg:         #F8F7F4;
    --surface:    #FFFFFF;
    --border:     #E8E4DC;
    --text:       #1A1A1A;
    --muted:      #6B7280;
    --error-bg:   #FEF2F2;
    --error-bd:   #FECACA;
    --error-tx:   #C0392B;
    --font-d: 'DM Serif Display', serif;
    --font-b: 'Inter', sans-serif;
}

html, body { height: 100%; font-family: var(--font-b); color: var(--text); }
body { display: flex; height: 100vh; overflow: hidden; }

/* ── Painel esquerdo (marca) ── */
.brand {
    width: 44%;
    background-color: var(--navy);
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 52px 56px;
    position: relative; overflow: hidden;
}
.brand::before, .brand::after { content: ''; position: absolute; border-radius: 50%; border: 1px solid rgba(74,155,142,0.18); }
.brand::before { width: 480px; height: 480px; top: -160px; right: -180px; }
.brand::after  { width: 300px; height: 300px; bottom: 40px; left: -100px; }

.brand-logo { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.brand-logo svg { width: 28px; height: 28px; stroke: var(--teal); fill: none; stroke-width: 1.5; }
.brand-logo span { font-family: var(--font-d); font-size: 17px; color: rgba(255,255,255,0.9); }

.brand-body { position: relative; z-index: 1; }
.brand-body h1 { font-family: var(--font-d); font-size: 42px; line-height: 1.1; color: #fff; margin-bottom: 20px; }
.brand-body h1 em { color: var(--teal); font-style: normal; }
.brand-body p { font-size: 15px; line-height: 1.65; color: rgba(255,255,255,0.55); max-width: 300px; }

.brand-steps { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; margin-top: 36px; }
.step { display: flex; align-items: center; gap: 12px; }
.step-num { width: 26px; height: 26px; border-radius: 50%; background: rgba(74,155,142,0.2); border: 1px solid rgba(74,155,142,0.4); color: var(--teal); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.step-txt { font-size: 13px; color: rgba(255,255,255,0.55); }

.brand-footer { font-size: 12px; color: rgba(255,255,255,0.25); position: relative; z-index: 1; }

/* ── Painel direito (formulário) ── */
.form-side { flex: 1; background-color: var(--bg); overflow-y: auto; padding: 48px 40px; position: relative; }
.form-card { width: 100%; max-width: 400px; margin: 0 auto; }
.form-card h2 { font-family: var(--font-d); font-size: 34px; color: var(--navy); margin-bottom: 6px; }
.form-card .subtitle { font-size: 14px; color: var(--muted); margin-bottom: 32px; }

.error { background: var(--error-bg); border: 1px solid var(--error-bd); color: var(--error-tx); padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 20px; }

.section-label { font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; margin-top: 24px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.section-label:first-of-type { margin-top: 0; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--navy); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 7px; }
.field input { width: 100%; padding: 12px 15px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 15px; font-family: var(--font-b); background: var(--surface); color: var(--text); transition: border-color 0.15s, box-shadow 0.15s; outline: none; }
.field input::placeholder { color: #C0BAB2; }
.field input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(74,155,142,0.14); }
.field input.invalid { border-color: var(--error-tx); box-shadow: 0 0 0 3px rgba(192,57,43,0.1); }
.field-hint { font-size: 11px; color: var(--muted); margin-top: 5px; }

.btn { width: 100%; padding: 13px; background-color: var(--teal); color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; font-family: var(--font-b); cursor: pointer; margin-top: 8px; transition: background-color 0.15s, transform 0.1s; }
.btn:hover  { background-color: var(--teal-hover); }
.btn:active { transform: scale(0.99); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.form-foot { text-align: center; margin-top: 24px; font-size: 13px; color: var(--muted); }
.form-foot a { color: var(--teal); text-decoration: none; font-weight: 500; }
.form-foot a:hover { text-decoration: underline; }

/* ── Dark mode ── */
[data-theme="dark"] {
    --navy: #F3F4F6; --teal: #56B3A6; --teal-hover: #4A9B8E;
    --bg: #111827; --surface: #1F2937; --border: #374151;
    --text: #F9FAFB; --muted: #9CA3AF;
    --error-bg: rgba(192,57,43,0.15); --error-bd: rgba(192,57,43,0.4); --error-tx: #FCA5A5;
}
[data-theme="dark"] .brand { background-color: #1F2937; }

.btn-theme { position: absolute; top: 20px; right: 20px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s; }
.btn-theme:hover { color: var(--navy); border-color: var(--teal); }
.btn-theme svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 768px) {
    .brand { display: none; }
    .form-side { padding: 40px 24px; }
    body { overflow-y: auto; height: auto; }
}