html,body{margin:0;height:100%}
body{font-family:'Source Serif 4',Georgia,serif;-webkit-font-smoothing:antialiased;background:var(--stage);color:var(--text);transition:background .3s}
a{color:#C5A059;text-decoration:none}
*{box-sizing:border-box}
input{font-family:inherit}
input::placeholder{color:var(--muted);opacity:.7}
button{font-family:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #C5A059;outline-offset:2px}
.rp-scroll{scrollbar-width:none}.rp-scroll::-webkit-scrollbar{display:none}
[data-theme="dark"]{--bg:#0A111E;--surface:#0F203C;--surface2:#12264A;--line:rgba(197,160,89,.18);--line2:rgba(255,255,255,.07);--text:#EEF2F8;--muted:#8E9BB4;--gold:#C5A059;--goldText:#D4B072;--btn:linear-gradient(135deg,#2B4EB0 0%,#1E3A8A 55%,#152A68 100%);--card:linear-gradient(150deg,#1E3A8A 0%,#14295F 48%,#0F203C 100%);--chipOn:#1E3A8A;--stage:#04070D;--input:#0C1A31;--shadow:0 12px 30px rgba(0,0,0,.35);--tabbar:rgba(10,17,30,.94);--sheet:#0F1C33;--fill:#1E3A8A;--fill2:#3F5F9E}
[data-theme="light"]{--bg:#F4F6F9;--surface:#FFFFFF;--surface2:#E9EDF3;--line:rgba(197,160,89,.4);--line2:rgba(15,32,60,.08);--text:#0F203C;--muted:#566381;--gold:#C5A059;--goldText:#85652A;--btn:linear-gradient(135deg,#1E3A8A 0%,#0F203C 100%);--card:linear-gradient(150deg,#1E3A8A 0%,#14295F 50%,#0F203C 100%);--chipOn:#0F203C;--stage:#D9DEE6;--input:#FFFFFF;--shadow:0 8px 24px rgba(15,32,60,.08);--tabbar:rgba(255,255,255,.95);--sheet:#FFFFFF;--fill:#1E3A8A;--fill2:#9AACCF}

/* Layout mobile-first: tela cheia no celular, coluna centralizada no desktop */
#root{min-height:100dvh;display:flex;justify-content:center}
.shell{position:relative;width:100%;max-width:460px;min-height:100dvh;height:100dvh;background:var(--bg);color:var(--text);overflow:hidden}
@media (min-width:520px){.shell{height:min(900px,100dvh);margin:auto;border-radius:36px;box-shadow:0 0 0 1px var(--line),0 40px 80px rgba(0,0,0,.45)}#root{align-items:center}}
.fill{position:absolute;inset:0}
.safe-top{padding-top:max(env(safe-area-inset-top),18px)}

.card{border-radius:22px;background:var(--surface);border:1px solid var(--line2);box-shadow:var(--shadow)}
.seg{display:flex;background:var(--surface2);border-radius:14px;padding:4px;gap:4px}
.seg button{flex:1;height:40px;border:0;border-radius:11px;font:600 14px/1 inherit;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;background:transparent;color:var(--muted)}
.seg button.on{background:var(--chipOn);color:#fff}
.field{display:flex;flex-direction:column;gap:8px}
.field>span{font:500 13px/1 'Source Serif 4',serif;color:var(--muted)}
.inp{height:52px;border-radius:14px;background:var(--input);border:1px solid var(--line2);display:flex;align-items:center;gap:10px;padding:0 14px}
.inp input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:16px}
.inp i{font-size:19px;color:var(--goldText)}
.btn{height:54px;border:0;border-radius:16px;background:var(--btn);color:#fff;font:600 16px/1 'Source Serif 4',serif;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:var(--shadow);transition:filter .15s,transform .1s}
.btn:hover{filter:brightness(1.1)}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.6}
.btn i{color:#C5A059}
.btn-o{background:transparent;border:1px solid var(--line);color:var(--text);box-shadow:none}
.btn-o:hover{background:var(--surface)}
.ibtn{width:38px;height:38px;border-radius:12px;border:1px solid var(--line2);background:var(--surface);color:var(--text);font-size:18px;display:flex;align-items:center;justify-content:center;position:relative}
.chip{flex:none;height:36px;padding:0 14px;border-radius:12px;border:1px solid var(--line2);background:var(--surface);color:var(--text);font:500 14px/1 'Source Serif 4',serif}
.chip.on{background:var(--chipOn);color:#fff;border-color:#C5A059}
.err{display:flex;gap:8px;align-items:center;font:500 13px/1.3 'Source Serif 4',serif;color:#E07A8F}
.tag{align-self:flex-start;font:600 11px/1 'Source Serif 4',serif;color:var(--goldText);background:rgba(197,160,89,.13);padding:5px 8px;border-radius:6px}
.avatar{width:46px;height:46px;flex:none;border-radius:14px;background:linear-gradient(135deg,#1E3A8A,#0F203C);color:#C5A059;font:600 15px/1 'Source Serif 4',serif;display:flex;align-items:center;justify-content:center;position:relative}
.sw{width:46px;height:28px;flex:none;border-radius:14px;border:0;background:var(--surface2);position:relative;transition:background .2s}
.sw.on{background:#C5A059}
.sw span{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:left .2s}
.sw.on span{left:21px}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}.gold{color:var(--goldText)}
.row{display:flex;justify-content:space-between;gap:12px;font:400 15px/1.2 'Source Serif 4',serif}
.dot{width:8px;height:8px;border-radius:2px;flex:none}
.h2{margin:0;font:600 26px/1.15 'Source Serif 4',serif}

@keyframes rpSpin{0%{transform:rotateY(-22deg) rotateX(10deg)}50%{transform:rotateY(22deg) rotateX(2deg)}100%{transform:rotateY(-22deg) rotateX(10deg)}}
@keyframes rpFloatA{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes rpFloatB{0%,100%{translate:0 0}50%{translate:0 8px}}
@keyframes rpRing{0%{transform:rotate(-14deg) scale(1)}50%{transform:rotate(-10deg) scale(1.03)}100%{transform:rotate(-14deg) scale(1)}}
@keyframes rpSplash{0%{opacity:0;transform:scale(.86) translateY(8px)}100%{opacity:1;transform:none}}
@keyframes rpBar{0%{width:0}100%{width:100%}}
@keyframes rpFade{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
@keyframes rpUp{0%{transform:translateY(100%)}100%{transform:none}}
@keyframes rpPulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes rpScan{0%{top:18%}50%{top:78%}100%{top:18%}}
@keyframes rpRot{to{transform:rotate(360deg)}}
.fade{animation:rpFade .4s both}
.spin{animation:rpRot 1s linear infinite}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* atributo hidden sempre vence classes que definem display (evita caixas de erro/campos "fantasmas") */
[hidden]{display:none!important}
/* feedback de carregamento: botões de ação (data-act) ganham um spinner; botões de formulário trocam o rótulo (setBusy) */
button.is-busy{pointer-events:none;opacity:.9}
button.is-busy[data-act]::after{content:"";flex:none;width:16px;height:16px;margin-left:8px;border:2px solid rgba(197,160,89,.35);border-top-color:#C5A059;border-radius:50%;animation:rpRot .8s linear infinite}
/* preenchimento automático: detecta (animação) e mantém o visual do tema */
@keyframes rpAutofill{from{opacity:1}to{opacity:1}}
input:-webkit-autofill{animation-name:rpAutofill;animation-duration:1ms}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-text-fill-color:var(--text);caret-color:var(--text);box-shadow:0 0 0 1000px var(--input) inset;transition:background-color 9999s ease-out 0s}