:root{
  --navy:#0E1A2B; --coral:#D2421F; --coral-2:#F2553A; --bg:#F5F3EF; --card:#FFFFFF; --ink:#0E1A2B;
  --muted:#5A6474; --line:#E6E1D8; --sky:#8EC0EA; --sand:#D9B26F; --ok:#15803D; --warn:#B45309; --bad:#B91C1C;
  --radius:18px; --display:'Bricolage Grotesque',system-ui,sans-serif; --text:'Outfit',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--text);-webkit-font-smoothing:antialiased}
body{min-height:100vh;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
a{color:var(--coral)} a:hover{color:#A93517}
button,input,select{font:inherit;color:inherit}
.wrap{max-width:560px;margin:0 auto}
main{display:flex;flex-direction:column;gap:14px;padding:10px 16px 24px}
h1,h2,h3{margin:0}
.display{font-family:var(--display);font-weight:800;letter-spacing:-.01em}
.muted{color:var(--muted)}
.small{font-size:13px}
.greet{display:flex;justify-content:space-between;align-items:center;padding:20px 20px 4px}
.greet h1{font-family:var(--display);font-size:26px;font-weight:800}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;text-decoration:none}
.top{background:var(--navy);color:#fff;padding:22px 20px 20px;display:flex;flex-direction:column;gap:4px}
.top .kicker{font-size:13px;color:var(--sky);font-weight:600}
.top h1{font-family:var(--display);font-size:28px;font-weight:800;line-height:1.1}
.top p{margin:0;font-size:14px;color:#C9D4E0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:10px}
.hero{background:var(--navy);color:#fff;border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:12px}
.hero .big{font-family:var(--display);font-size:42px;font-weight:800;line-height:1.05}
.stack{display:flex;gap:2px;border-radius:6px;overflow:hidden;height:10px}
.legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:6px}
.legend div{display:flex;align-items:center;gap:8px;font-size:13px;color:#C9D4E0;white-space:nowrap;min-width:0}
.legend strong{color:#fff;font-weight:600;margin-left:auto}
.dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.row-head{display:flex;justify-content:space-between;align-items:baseline}
.row-head h2{font-size:18px;font-weight:700}
.tiles{display:flex;gap:10px}
.tile{flex:1 1 0;min-height:92px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 12px;display:flex;flex-direction:column;justify-content:space-between;gap:6px;text-decoration:none;color:var(--ink)}
.tile .bar{width:28px;height:6px;border-radius:3px}
.tile .n{font-family:var(--display);font-size:26px;font-weight:800;line-height:1}
.tile .t{font-size:13px;line-height:1.3;color:var(--muted)}
.item{display:flex;align-items:center;gap:12px;padding-top:10px;border-top:1px solid var(--line)}
.item .grow{display:flex;flex-direction:column;gap:2px;flex-grow:1;min-width:0}
.tag{font-size:12px;font-weight:700}
.pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;border:1.5px solid currentColor;background:#fff;white-space:nowrap}
.ok{color:var(--ok)} .warn{color:var(--warn)} .bad{color:var(--bad)}
.bg-ok{background:var(--ok)} .bg-warn{background:var(--warn)} .bg-bad{background:var(--bad)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
label.f{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--muted);min-width:0}
.f input,.f select{height:44px;width:100%;border:1px solid var(--line);border-radius:10px;padding:0 10px;font-size:16px;color:var(--ink);background:#fff}
.check{display:flex;align-items:center;gap:10px;min-height:44px;font-size:15px}
.check input{width:22px;height:22px;accent-color:var(--ok);flex-shrink:0}
.btn{display:flex;align-items:center;justify-content:center;min-height:52px;border:none;border-radius:12px;background:var(--coral);color:#fff;font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;padding:0 16px;width:100%}
.btn:disabled{background:#D6CFC4;color:var(--ink);cursor:not-allowed}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.seg{display:flex;gap:6px}
.seg button{flex:1 1 0;min-height:44px;border-radius:10px;border:1px solid var(--line);font-size:14px;font-weight:700;background:#fff;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.opt{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px}
.opt.best{border:2px solid var(--coral)}
.opt.off{opacity:.62}
.kv{display:flex;flex-direction:column}
.kv span:first-child{font-size:11px;color:var(--muted);font-weight:600}
.kv span:last-child{font-size:15px;font-weight:600}
.meter{height:8px;border-radius:4px;background:#EFE9DF;overflow:hidden}
.meter i{display:block;height:8px}
.verdict{border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:6px;border:1.5px solid}
.verdict.vale{background:#ECFDF3;border-color:var(--ok)}
.verdict.marginal{background:#FFF7E8;border-color:var(--warn)}
.verdict.nao_vale{background:#FDEDED;border-color:var(--bad)}
.verdict .big{font-family:var(--display);font-size:30px;font-weight:800}
.copy{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.copy button{min-height:40px;min-width:72px;border-radius:10px;border:1px solid var(--line);background:#fff;font-weight:700;cursor:pointer}
.toast{position:fixed;left:50%;bottom:100px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:12px 16px;border-radius:12px;font-size:14px;z-index:20;max-width:90vw}
.err{color:var(--bad);font-size:14px;font-weight:600}
.bars{display:flex;gap:8px;align-items:flex-end;width:132px}
.bars div{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1 1 0}
.bars i{display:block;width:100%;border-radius:6px 6px 2px 2px}
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t td,table.t th{padding:8px 4px;border-top:1px solid var(--line);text-align:right}
table.t th{font-size:12px;color:var(--muted);font-weight:600;border-top:none}
table.t td:first-child,table.t th:first-child{text-align:left}
nav.menu{position:fixed;left:0;right:0;bottom:0;height:calc(76px + env(safe-area-inset-bottom));padding-bottom:calc(8px + env(safe-area-inset-bottom));background:var(--navy);display:flex;justify-content:space-around;align-items:center;z-index:10}
nav.menu a{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:52px;flex:1 1 0;min-height:48px;justify-content:center;text-decoration:none;color:#9FB0C4;font-size:11px;font-weight:600}
nav.menu a .ind{width:24px;height:3px;border-radius:2px;background:transparent}
nav.menu a[aria-current="page"]{color:#fff}
nav.menu a[aria-current="page"] .ind{background:var(--coral-2)}
.skeleton{height:120px;border-radius:var(--radius);background:linear-gradient(90deg,#ece8e1,#f4f1ec,#ece8e1);background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{to{background-position:-200% 0}}
@media (min-width:700px){ .wrap{max-width:720px} main{padding:16px 24px 32px} }

/* entrada (padrão do site vaicommilhas.com) */
body.auth{background:#FFF6EC;padding-bottom:0}
body.auth nav.menu,body.auth #banner{display:none}
.auth-wrap{min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:28px 16px 40px}
.brand{display:flex;align-items:center;gap:10px;color:#0C1B2A}
.brand .mk{width:44px;height:44px;border-radius:12px;background:#0C1B2A;display:flex;align-items:center;justify-content:center}
.brand .mk svg{width:34px;height:30px}
.brand b{display:block;font-family:var(--display);font-size:18px}
.brand small{display:block;color:#FF5436;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.auth-h{font-family:var(--display);font-weight:800;font-size:40px;line-height:1.02;letter-spacing:-.02em;color:#0C1B2A;margin-top:14px}
.auth-h .hl{color:#FF5436;background:linear-gradient(transparent 82%,#FFC83D 82%)}
.auth-sub{margin:0;color:#5B6776;font-size:16px;line-height:1.45}
.auth-card{background:#fff;border:1px solid #E8DAC6;border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:14px;box-shadow:0 10px 30px -12px rgba(12,27,42,.25)}
body.auth .btn{background:#FF5436;border-radius:999px}
body.auth .btn:hover{background:#D63B1F}
body.auth .btn.ghost{background:transparent;color:#0C1B2A;border:1px solid #E6D9C8}
body.auth .btn.ghost:hover{background:#FFF6EC}
body.auth .seg button[aria-pressed="true"]{background:#0C1B2A;border-color:#0C1B2A}
.bn{margin:8px 16px 0;padding:10px 14px;border-radius:12px;background:#FFF7E8;border:1px solid var(--warn);color:var(--ink);font-size:14px;font-weight:600}
.bn.bad{background:#FDEDED;border-color:var(--bad)}
@media (min-width:700px){.auth-wrap{max-width:440px;margin:0 auto}}
.btn.sm{min-height:44px;font-size:13px;padding:0 6px;white-space:nowrap}
.fb .f select{height:40px;font-size:14px}
.seg button{padding:0 4px}

/* ---------- computador ---------- */
.side-brand,.side-only{display:none!important}
@media (min-width:1000px){
  body{padding-bottom:0;padding-left:240px}
  nav.menu{top:0;bottom:0;right:auto;width:240px;height:auto;padding:22px 14px;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:4px}
  nav.menu .side-brand{display:flex!important;align-items:center;gap:10px;color:#fff;padding:4px 8px 22px}
  nav.menu .side-brand .mk{width:40px;height:40px;border-radius:11px;background:#FFF6EC1A;display:flex;align-items:center;justify-content:center}
  nav.menu .side-brand svg{width:30px;height:26px}
  nav.menu .side-brand b{display:block;font-family:var(--display);font-size:16px}
  nav.menu .side-brand small{display:block;color:var(--coral-2);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
  nav.menu a{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:12px;min-height:46px;padding:0 12px;border-radius:12px;font-size:15px;position:relative}
  nav.menu a .ind{position:absolute;left:0;top:12px;width:3px;height:22px}
  nav.menu a:hover{background:#FFFFFF12;color:#fff}
  nav.menu a[aria-current="page"]{background:#FFFFFF1A}
  nav.menu .side-only{display:flex!important;margin-top:auto}
  .wrap{max-width:1160px}
  main{padding:20px 32px 40px}
  .top{padding:28px 32px 24px}
  .top h1{font-size:34px}
  .greet{padding:28px 32px 4px}
  .bn{margin:12px 32px 0}
  .tile{min-height:110px}
  .grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* telas em duas colunas */
  body[data-route="painel"] main,body[data-route="estoque"] main,body[data-route="mensal"] main,body[data-route="cpf"] main,body[data-route="contas"] main,body[data-route="admin"] main,body[data-route="inicio"] main,body[data-route="cartoes"] main,body[data-route="cartao"] main{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:18px}
  body[data-route="painel"] main>.hero,body[data-route="painel"] main>div,body[data-route="estoque"] main>.hero,body[data-route="estoque"] main>form,body[data-route="mensal"] main>.seg,body[data-route="mensal"] main>form,body[data-route="cpf"] main>p,body[data-route="contas"] main>section:first-child,body[data-route="admin"] main>p{grid-column:1/-1}
  body[data-route="estoque"] main>section:nth-of-type(2):only-of-type{grid-column:1/-1}
  /* formulários e listas mais largos, sem esticar demais */
  body[data-route="lancar"] main,body[data-route="venda"] main,body[data-route="emitir"] main,body[data-route="importar"] main,body[data-route="planilha"] main,body[data-route="promo"] main,body[data-route="usuarios"] main{max-width:820px}
  .hero .big{font-size:52px}
  table.t{font-size:15px}
  .seg{max-width:520px}
  body.auth{padding-left:0}
  .toast{bottom:32px}
}
@media (min-width:1000px){
  main>.wide{grid-column:1/-1}
  .hero .legend{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ffg{grid-template-columns:repeat(3,minmax(0,1fr))}
  #ff>.grid2:last-child{max-width:520px}
}
@media (min-width:1400px){ .wrap{max-width:1280px} }
@media (max-width:420px){nav.menu a{font-size:10px;min-width:0}nav.menu a svg{width:20px;height:20px}}