/* J-Car Gestão — camada de design (só visual; não muda comportamento).
   Regras: uma cor dominante (azul J-Car), preto e branco de apoio; hierarquia rótulo → título → dado;
   alvos de toque de 44px; foco sempre visível; respiro e textura sutil. */
:root{
  --accent:#2453d4; --accent-soft:#e6ecfc; --accent-ink:#ffffff;
  --bg:#f1f2f4; --surface:#ffffff; --surface-2:#f6f7f9; --line:#e0e3e8; --ink:#0f1216; --muted:#5a616b;
  --head:#0b0d10; --plate-band:#2453d4;
  --r:14px; --r-sm:10px;
  --shadow:0 1px 2px rgba(12,16,24,.05),0 8px 24px -12px rgba(12,16,24,.12);
  --shadow-lift:0 2px 4px rgba(12,16,24,.06),0 16px 32px -14px rgba(12,16,24,.22);
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --accent:#6f95ff; --accent-soft:#18233f; --accent-ink:#0a1023;
  --bg:#0a0c0f; --surface:#13161b; --surface-2:#191d23; --line:#262b33; --ink:#eef0f3; --muted:#9aa2ad; --head:#000;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px -18px rgba(0,0,0,.8);
  --shadow-lift:0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px -18px rgba(0,0,0,.9)}}
:root[data-theme="dark"]{
  --accent:#6f95ff; --accent-soft:#18233f; --accent-ink:#0a1023;
  --bg:#0a0c0f; --surface:#13161b; --surface-2:#191d23; --line:#262b33; --ink:#eef0f3; --muted:#9aa2ad; --head:#000;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px -18px rgba(0,0,0,.8);
  --shadow-lift:0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px -18px rgba(0,0,0,.9)}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-size:15.5px;line-height:1.5;text-rendering:optimizeLegibility;overscroll-behavior-y:none}
/* textura sutil (grão) atrás de tudo */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.shell{position:relative;z-index:1}
.top{position:sticky;z-index:30;backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);background:color-mix(in srgb,var(--head) 92%,transparent);border-bottom:1px solid #ffffff12}
.nav{position:fixed;z-index:50}
.logo{letter-spacing:.04em}
.icon-btn{width:44px;height:44px;border-radius:12px}

/* foco visível e consistente */
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:6px}
.btn:focus-visible,.chip:focus-visible,.item:focus-visible,.inp:focus-visible{outline-offset:2px}

/* hierarquia */
h1{font-size:clamp(26px,5.4vw,34px);font-weight:800;font-stretch:112%;letter-spacing:-.02em;line-height:1.08}
h2{letter-spacing:-.01em}
.sec-t{font-size:11.5px;letter-spacing:.14em;color:var(--muted);display:flex;align-items:center;gap:10px}
.sec-t::after{content:"";flex:1;height:1px;background:var(--line)}
.view{gap:20px}

/* superfícies */
.card,.item{border-radius:var(--r);box-shadow:var(--shadow);border-color:var(--line)}
.item{transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)}
@media (hover:hover){.item:hover{transform:translateY(-1px);box-shadow:var(--shadow-lift);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}}
.item:active{transform:scale(.995)}
.empty{border-radius:var(--r);background:color-mix(in srgb,var(--surface) 60%,transparent)}
.banner{border-radius:var(--r-sm)}

/* controles com alvo de toque confortável (44px) */
.btn{min-height:44px;border-radius:12px;padding:0 16px;transition:background .15s,border-color .15s,transform .1s}
.btn:active{transform:scale(.98)}
.btn.sm{min-height:36px;border-radius:10px}
@media (pointer:coarse){.btn.sm{min-height:40px}}
.btn.pri{box-shadow:0 6px 16px -8px color-mix(in srgb,var(--accent) 80%,transparent)}
@media (hover:hover){.btn:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}.btn.pri:hover{filter:brightness(1.06)}}
.inp{min-height:46px;border-radius:12px;font-size:16px;transition:border-color .15s,box-shadow .15s}
.inp:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);outline:none}
textarea.inp{line-height:1.5}
.chip{min-height:36px;border-radius:18px;padding:0 14px}
@media (pointer:coarse){.chip{min-height:40px}}
.tag{border-radius:999px}

/* menu lateral */
.nav a{min-height:44px;border-radius:12px;transition:background .15s}
.nav a.on{background:var(--accent-soft);color:var(--accent);font-weight:700}

/* modal tipo "folha" no celular */
.modal{border-radius:22px 22px 0 0;box-shadow:0 -10px 50px rgba(0,0,0,.25)}
@media (min-width:700px){.modal{border-radius:20px}}
#toast{border-radius:14px;box-shadow:var(--shadow-lift);padding:13px 18px}

/* movimento: respeita quem prefere menos animação */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* botão da conta (inserido pelo login) */
.acct-btn{width:38px;height:38px;border-radius:50%;border:1.5px solid #ffffff38;background:linear-gradient(135deg,var(--accent),#0d1f5c);color:#fff;font-weight:800;font-size:13px;letter-spacing:.04em;display:grid;place-items:center;margin-right:4px}
.acct-btn:focus-visible{outline-color:#fff}
.acct-menu{position:fixed;top:calc(env(safe-area-inset-top,0px) + 64px);right:max(12px,env(safe-area-inset-right,0px));z-index:90;width:min(300px,calc(100vw - 24px));background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lift);padding:8px;display:flex;flex-direction:column}
.acct-menu[hidden]{display:none}
.acct-who{padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:6px;display:flex;flex-direction:column;gap:2px}
.acct-who small{color:var(--muted);font-size:12.5px}
.acct-menu button{min-height:44px;text-align:left;padding:0 12px;border:0;border-radius:10px;background:none;font-weight:600}
@media (hover:hover){.acct-menu button:hover{background:var(--surface-2)}}
.acct-menu button.danger{color:var(--bad)}
.tplc label{font-size:12.5px}