/* Acréscimos da versão com backend: autenticação, indicador de sincronização, barra de carregamento. */
#login .box{max-height:94vh;overflow:auto}
#login form>button{width:100%;margin-top:6px;padding:14px;font-size:16px}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 0 12px;padding:4px;border-radius:12px;background:rgba(255,255,255,.07)}
.tab{background:transparent!important;color:#b7c9bf!important;box-shadow:none!important;min-height:40px;padding:8px}
.tab.on{background:rgba(255,255,255,.16)!important;color:#fff!important}
.hint{color:#9bab9f;font-size:13px;text-align:left;margin:2px 2px 0}
#login .err{margin-top:4px}
button:disabled{opacity:.55;cursor:progress}
#ld{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;background:linear-gradient(90deg,transparent,var(--a),transparent);background-size:40% 100%;background-repeat:no-repeat;opacity:0;transition:opacity .2s;pointer-events:none}
#ld.on{opacity:1;animation:ldm 1s linear infinite}
@keyframes ldm{from{background-position:-40% 0}to{background-position:140% 0}}
#sy{position:fixed;right:12px;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:30;padding:6px 12px;border-radius:99px;font-size:12px;font-weight:600;background:var(--card);color:var(--t2);box-shadow:0 4px 14px rgba(0,0,0,.18),inset 0 0 0 1px var(--line);opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;pointer-events:none}
#sy.on{opacity:1;transform:none}
#sy[data-s=offline],#sy[data-s=error]{color:var(--r)}
#sy[data-s=ok]{color:var(--g)}

/* aviso de nova versão (PWA) */
#upd{position:fixed;left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:80;display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:440px;margin:0 auto;padding:10px 12px 10px 16px;border-radius:16px;background:var(--hero);color:#fff;font-size:14px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.3)}
#upd.hide{display:none}
#upd button{background:var(--a);color:#fff;border:0;border-radius:12px;padding:10px 16px;font-weight:700;min-height:40px;cursor:pointer}
#upd button:focus-visible{outline:3px solid #ffc72c;outline-offset:2px}
@media (prefers-reduced-motion:reduce){#ld.on{animation:none}}

.top .sub.dt{text-transform:none}.top .sub.dt::first-letter{text-transform:uppercase}

/* ===== Perfil onboarding ===== */
#intro:has(.ob-shell){background:#f5f3ee;color:#202a31;padding:clamp(14px,4vw,40px);overflow:auto;align-items:stretch}
:root[data-theme="dark"] #intro:has(.ob-shell){background:#14191d;color:#edf0ee}
.ob-shell{width:min(100%,720px);min-height:min(860px,calc(100dvh - 32px));margin:auto;display:flex;flex-direction:column;background:#fffdfa;border:1px solid #e5e1d8;border-radius:28px;padding:clamp(22px,5vw,56px);box-shadow:0 18px 60px rgba(35,44,48,.07)}
:root[data-theme="dark"] .ob-shell{background:#1d2429;border-color:#303a40}
.ob-header{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ob-brand{font:800 26px/1 var(--fd);letter-spacing:-.07em;color:#202a31}.ob-brand span{color:#6857a6}
:root[data-theme="dark"] .ob-brand{color:#edf0ee}
.ob-step{font-size:10px;letter-spacing:.12em;font-weight:800;color:#778087}
.ob-progress{height:3px;background:#e9e6df;border-radius:20px;margin:28px 0 0;overflow:hidden}
.ob-progress i{display:block;height:100%;background:#6857a6;transition:width .25s}
.ob-content{width:min(100%,510px);margin:auto;display:flex;flex-direction:column;padding:clamp(38px,8vh,80px) 0 24px}
.ob-kicker{color:#6857a6}
.ob-content h1,.ob-finish h1{font:700 clamp(30px,5vw,42px)/1.1 var(--fd);letter-spacing:-.05em;margin:0;color:#202a31}
:root[data-theme="dark"] .ob-content h1,:root[data-theme="dark"] .ob-finish h1{color:#edf0ee}
.ob-content>p,.ob-finish>p{font-size:15px;color:#778087;line-height:1.6;margin:14px 0 30px}
.ob-field{display:flex;align-items:center;gap:12px;border-bottom:1px solid #d9d5cb;padding:12px 0}
.ob-field input{width:100%;font:500 24px var(--fd);background:transparent;border:0;outline:none;color:#202a31;padding:8px 0}
.ob-field span{color:#778087;font-size:14px}
:root[data-theme="dark"] .ob-field input{color:#edf0ee}
.ob-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.ob-option{background:transparent!important;color:#202a31!important;border:1px solid #e5e1d8!important;border-radius:14px!important;box-shadow:none!important;text-align:left;padding:16px!important;display:flex;flex-direction:column;gap:7px;min-height:60px}
.ob-option span{font-weight:700}
.ob-option small{font-size:12px;line-height:1.45;color:#778087;font-weight:500}
.ob-option.selected{border-color:#6857a6!important;background:#f0edf8!important;color:#403568!important}
:root[data-theme="dark"] .ob-option{color:#edf0ee!important;border-color:#303a40!important}
:root[data-theme="dark"] .ob-option.selected{background:#302a43!important;color:#e6defe!important;border-color:#b3a2ee!important}
.ob-error{min-height:22px;color:#c65c60;font-size:13px;padding-top:6px}
.ob-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px}
.ob-next{border:0!important;background:#6857a6!important;color:#fff!important;border-radius:12px!important;padding:14px 20px!important;min-width:160px;font-weight:700;box-shadow:none!important}
.ob-next span{margin-left:12px}
.ob-back{background:transparent!important;color:#778087!important;border:1px solid #e5e1d8!important;border-radius:12px!important;padding:13px 18px!important;box-shadow:none!important}
.ob-foot{font-size:11px;color:#92999c;line-height:1.5;margin-top:22px}
.ob-finish{align-items:center;justify-content:center;text-align:center;gap:18px}
.ob-finish .ob-brand{align-self:flex-start}
.ob-finish-mark{width:64px;height:64px;border-radius:50%;background:#e3f0ec;color:#3f8c83;display:grid;place-items:center;font-size:30px;font-weight:700}
.ob-finish .ob-kicker{margin-top:16px}
.ob-finish .ob-next{margin-top:16px}
@media(max-width:560px){#intro:has(.ob-shell){padding:0}.ob-shell{border-radius:0;border:0;min-height:100dvh;padding:24px 22px}.ob-choices{grid-template-columns:1fr}.ob-content{padding:42px 0 24px}.ob-option{padding:14px!important}}

/* Login: mesma identidade discreta do novo onboarding */
#login{background:#f5f3ee;color:#202a31}
:root[data-theme="dark"] #login{background:#14191d;color:#edf0ee}
#login .box{background:#fffdfa;border:1px solid #e5e1d8;color:#202a31;border-radius:24px;padding:32px 28px;max-width:420px;box-shadow:0 18px 60px rgba(35,44,48,.08)}
:root[data-theme="dark"] #login .box{background:#1d2429;border-color:#303a40;color:#edf0ee}
#login .wm{color:#202a31;font-size:42px;letter-spacing:-.07em}
:root[data-theme="dark"] #login .wm{color:#edf0ee}
#login .box>p{color:#778087!important}
#login input{background:#f3f1eb;color:#202a31;border:1px solid #e5e1d8;border-radius:12px;padding:14px;text-align:left}
:root[data-theme="dark"] #login input{background:#252e34;color:#edf0ee;border-color:#303a40}
#login form>button,#login .box>button:not(.eye){background:#6857a6;color:#fff;border-radius:12px;box-shadow:none}
#login .tabs{background:#eeece5;border-radius:12px}
#login .tab{color:#778087!important}
#login .tab.on{background:#fffdfa!important;color:#403568!important;box-shadow:0 1px 3px rgba(0,0,0,.06)!important}
:root[data-theme="dark"] #login .tabs{background:#252e34}
:root[data-theme="dark"] #login .tab.on{background:#1d2429!important;color:#e6defe!important}
#login .hint{color:#778087}
#login .eye{color:#6857a6}