/* ============================================================
   Calcutax — Calculadora de Importação
   Tema: tropical brasileiro (verde, amarelo, azul e branco)
   ============================================================ */

:root{
  --bg:#E8F4FD;
  --card:#ffffff;
  --ink:#11293A;
  --muted:#5C7064;
  --primary:#00944D;
  --primary-dark:#006B2F;
  --primary-soft:#E3F5EA;
  --accent:#FFC629;
  --ok:#0B8A3E;
  --ok-soft:#E3F5EA;
  --danger:#dc2626;
  --danger-soft:#fdecec;
  --amber-bg:#FFF6DC;
  --amber-ink:#7A5200;
  --border:#DCE8E2;
  --radius:16px;
  --shadow:0 1px 2px rgba(16,41,58,.05), 0 10px 28px -14px rgba(16,41,58,.18);
  /* paleta da marca (bandeira tropical) — fonte única, lida também pelo export.js */
  --brand-blue:#002776;
  --brand-blue-2:#00569C;
  --brand-blue-sky:#0093C8;
  --brand-blue-mid:#0058A8;
  --brand-blue-bright:#0077C8;
  --brand-gold:#FFDE59;
  --brand-blue-pale:#CDE2F7;
  --brand-blue-label:#9FC9EE;
  --brand-green-dark:#006B2F;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:linear-gradient(180deg,#E8F4FD 0%,#F0FAF2 45%,#FBF6E3 100%);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
::selection{background:#FFC629;color:#143C2B}
input,button,select{font-family:inherit;font-size:inherit;color:inherit}

/* ---------- Header ---------- */
header.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 86% 12%, rgba(255,198,41,.42) 0%, rgba(255,198,41,0) 32%),
    linear-gradient(120deg,var(--brand-blue) 0%,var(--brand-blue-2) 55%,var(--brand-blue-sky) 100%);
  color:#fff;
  padding:26px 18px 88px;
}
.hero-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:64px;display:block}

/* ---------- Animação do topo: avião ➜ navio ---------- */
.hero-anim{position:relative;z-index:2;max-width:1020px;margin:22px auto 56px;height:clamp(64px,11vw,112px);overflow:hidden}
.hero-anim svg{width:100%;height:100%;display:block}
#anim-plane{animation:ctPlaneFly 18s linear infinite}
#anim-plane .pl-bob{animation:ctBob 2.4s ease-in-out infinite alternate}
#anim-ship{animation:ctShipSail 18s linear infinite}
#anim-ship .sh-bob{animation:ctBob 3.2s ease-in-out infinite alternate}
#anim-anchor{animation:ctAnchor 18s linear infinite}
.ct-wave-front{animation:ctWave 6s linear infinite}
.ct-wave-back{animation:ctWave 9s linear infinite reverse}
.ct-cloud-a{animation:ctCloud 75s linear infinite}
.ct-cloud-b{animation:ctCloud 55s linear infinite;animation-delay:-28s}
.ct-smoke circle{animation:ctSmoke 2.2s ease-out infinite}
.ct-smoke circle:nth-child(2){animation-delay:.7s}
.ct-smoke circle:nth-child(3){animation-delay:1.4s}
@keyframes ctPlaneFly{
  0%{transform:translate(-180px,36px);opacity:1}
  22%{transform:translate(240px,28px)}
  38%{transform:translate(980px,16px);opacity:1}
  42%{transform:translate(1050px,12px);opacity:0}
  100%{transform:translate(1050px,12px);opacity:0}
}
@keyframes ctShipSail{
  0%,40%{transform:translate(-220px,40px);opacity:0}
  43%{transform:translate(-180px,40px);opacity:1}
  70%{transform:translate(620px,40px);opacity:1}
  80%{transform:translate(800px,40px);opacity:1}
  82%,93%{transform:translate(830px,40px);opacity:1}
  100%{transform:translate(830px,40px);opacity:0}
}
@keyframes ctAnchor{
  0%,82%{opacity:0;transform:translateY(-10px)}
  84%{opacity:1;transform:translateY(-4px)}
  90%,93%{opacity:1;transform:translateY(8px)}
  96%,100%{opacity:0;transform:translateY(8px)}
}
@keyframes ctBob{from{transform:translateY(0)}to{transform:translateY(3px)}}
@keyframes ctWave{from{transform:translateX(0)}to{transform:translateX(-100px)}}
@keyframes ctCloud{from{transform:translateX(0)}to{transform:translateX(-1600px)}}
@keyframes ctSmoke{0%{opacity:.5;transform:translate(0,0) scale(.5)}100%{opacity:0;transform:translate(-16px,-30px) scale(1.5)}}
@media (prefers-reduced-motion: reduce){
  .hero-anim *{animation:none!important}
  #anim-plane{opacity:0}
  #anim-ship{transform:translate(830px,40px)}
  #anim-anchor{opacity:0}
}
.hero-inner{max-width:1020px;margin:0 auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap;position:relative;z-index:2}
.logo{
  width:52px;height:52px;border-radius:14px;flex:0 0 auto;
  background:rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.22);
}
.hero h1{margin:0;font-size:24px;letter-spacing:-.02em}
.hero p{margin:2px 0 0;font-size:13.5px;opacity:.85}
.hero .tag{
  margin-left:auto;background:rgba(255,198,41,.18);border:1px solid rgba(255,222,102,.55);color:#FFE484;
  padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap;
}

/* ---------- Stepper ---------- */
.stepper{
  max-width:1020px;margin:18px auto 26px;padding:0 14px;
  display:flex;align-items:flex-start;gap:6px;
}
.step-dot{
  flex:1;background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:3px;
  cursor:pointer;box-shadow:var(--shadow);transition:.18s;min-width:0;
}
.step-dot .num{
  width:26px;height:26px;border-radius:50%;background:#EDF3EF;color:#47614F;
  font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;
}
.step-dot .lbl{font-size:11.5px;font-weight:600;color:var(--muted);text-align:center;line-height:1.25}
.step-dot.active{border-color:var(--primary);outline:2px solid rgba(0,148,77,.18)}
.step-dot.active .num{background:var(--primary);color:#fff}
.step-dot.active .lbl{color:var(--primary-dark)}
.step-dot.done .num{background:var(--accent);color:#5C4300}
.step-dot.done .lbl{color:#8A6A12}
.step-dot.locked{opacity:.55;cursor:not-allowed}

/* ---------- Layout ---------- */
main{max-width:1020px;margin:0 auto;padding:0 14px 60px}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin-bottom:18px;border:1px solid rgba(220,232,226,.7)}
.card h2{margin:0 0 4px;font-size:17px;display:flex;align-items:center;gap:8px;letter-spacing:-.01em}
.card h2 .ic{width:30px;height:30px;border-radius:9px;background:var(--primary-soft);color:var(--primary-dark);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.card .sub{margin:0 0 16px;color:var(--muted);font-size:13px}
.step{display:none;animation:fadein .25s ease}
.step.active{display:block}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Form ---------- */
label.fl{display:block;font-size:12.5px;font-weight:700;color:#334155;margin-bottom:5px}
.hint{font-size:12px;color:var(--muted);margin-top:4px}
.input-wrap{position:relative}
.input-wrap .suffix{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:12px;font-weight:700;pointer-events:none}
input[type=text]{
  width:100%;padding:10px 58px 10px 12px;border:1.5px solid var(--border);border-radius:10px;
  background:#fbfcfe;outline:none;transition:border .15s, box-shadow .15s;
}
input[type=text]:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,148,77,.12);background:#fff}
input.p-name{padding-right:12px}
select{
  width:100%;padding:10px 34px 10px 12px;border:1.5px solid var(--border);border-radius:10px;
  background:#fbfcfe url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235C7064' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  appearance:none;-webkit-appearance:none;outline:none;cursor:pointer;transition:border .15s, box-shadow .15s;
}
select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,148,77,.12);background-color:#fff}
.err{color:var(--danger);font-size:12.5px;margin-top:6px;display:none}
.err.show{display:block}

/* ---------- Regime (tipo de importação) ---------- */
.reg-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:760px){.reg-cards{grid-template-columns:1fr}}
.reg-card{position:relative}
.reg-card input{position:absolute;opacity:0;pointer-events:none}
.reg-card label{
  display:flex;flex-direction:column;gap:5px;height:100%;cursor:pointer;
  border:2px solid var(--border);border-radius:14px;padding:14px 14px;background:#fbfcfe;transition:.15s;
}
.reg-card label:hover{border-color:#9FC9B8}
.reg-card input:checked + label{border-color:var(--primary);background:#F2FBF5;box-shadow:0 0 0 3px rgba(0,148,77,.12)}
.reg-card .rc-emoji{font-size:22px;line-height:1}
.reg-card .rc-title{font-weight:800;font-size:13.5px;line-height:1.3;color:var(--ink)}
.reg-card .rc-desc{font-size:11.8px;color:var(--muted);line-height:1.4}
.reg-card input:checked + label .rc-title{color:var(--primary-dark)}
.regime-note{
  margin-top:14px;background:#F2F8F4;border:1px solid #CFE3D8;border-radius:12px;
  padding:11px 14px;font-size:12.8px;color:#3D5247;line-height:1.5;
}

/* ---------- Products ---------- */
.plist-head{
  display:grid;grid-template-columns:minmax(130px,1fr) 64px 110px 110px 96px 34px;gap:8px;
  font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;
  margin-bottom:8px;padding:0 2px;
}
.prow{display:grid;grid-template-columns:minmax(130px,1fr) 64px 110px 110px 96px 34px;gap:8px;align-items:center;margin-bottom:10px}
.prow .p-qty,.prow .p-unit,.prow .p-decl{text-align:left}
.p-total{font-weight:700;font-size:13.5px;color:#334155;padding:0 4px;white-space:nowrap}
.p-total .tl{display:none;font-size:10.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
input.p-decl{padding-right:12px;background:#FFFDF2}
input.p-decl:focus{background:#fff}
.p-del{
  width:34px;height:38px;border:1.5px solid var(--border);background:#fff;border-radius:10px;
  color:#94a3b8;cursor:pointer;font-size:15px;line-height:1;transition:.15s;
}
.p-del:hover{color:var(--danger);border-color:var(--danger);background:var(--danger-soft)}
@media(max-width:660px){
  .plist-head{display:none}
  .prow{grid-template-columns:1fr 1fr;grid-template-areas:"name name" "qty unit" "decl total" "del del";row-gap:8px}
  .prow .p-name{grid-area:name}
  .prow .p-qty{grid-area:qty}
  .prow .p-unit{grid-area:unit}
  .prow .p-decl{grid-area:decl}
  .prow .p-total{grid-area:total;align-self:center}
  .prow .p-del{grid-area:del;justify-self:end;align-self:center}
  .p-total .tl{display:block}
}

.summary-bar{
  display:flex;flex-wrap:wrap;gap:10px 26px;background:#F2F8F4;border:1px dashed #CFE3D8;
  border-radius:12px;padding:12px 16px;margin-top:14px;
}
.summary-bar .sItem{font-size:12.5px;color:var(--muted)}
.summary-bar .sItem b{display:block;font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:11px;padding:12px 22px;font-weight:700;font-size:14.5px;cursor:pointer;transition:.15s;
}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark)}
.btn-ghost{background:transparent;color:#475569;border:1.5px solid var(--border)}
.btn-ghost:hover{border-color:#94a3b8;background:#f8fafc}
.btn-soft{background:var(--primary-soft);color:var(--primary-dark)}
.btn-soft:hover{background:#D2EEDD}
.btn-amber{background:var(--accent);color:#3d2b00}
.btn-amber:hover{filter:brightness(.96)}
.btn-sm{padding:8px 14px;font-size:13px;border-radius:9px}
.step-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:6px;flex-wrap:wrap}
.step-nav .left{margin-right:auto}

/* ---------- Warnings / notices ---------- */
.warn{border-radius:12px;padding:12px 14px;font-size:13px;margin-top:12px;display:none;align-items:flex-start;gap:10px}
.warn.show{display:flex}
.warn .wicon{font-size:16px;line-height:1.4}
.warn.amber{background:var(--amber-bg);color:var(--amber-ink);border:1px solid #f3e3bf}
.warn.red{background:var(--danger-soft);color:#8f1d1d;border:1px solid #f5c9c9}
.warn.blue{background:#E3F1FC;color:#0B4F8A;border:1px solid #BBDDF6}

/* ---------- Cost rows ---------- */
.cost-list{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.cost-row{
  display:flex;align-items:center;gap:14px;border:1.5px solid var(--border);border-radius:13px;
  padding:12px 14px;background:#fbfcfe;transition:.15s;flex-wrap:wrap;
}
.cost-row.on{border-color:#BFE5CC;background:#F6FCF8}
.cost-row.off .cost-text{opacity:.55}
.cost-row.disabled{opacity:.5}
.cost-row.hidden{display:none}
.cost-main{display:flex;align-items:center;gap:12px;flex:1;min-width:230px}
.switch{position:relative;display:inline-block;width:42px;height:24px;flex:0 0 auto}
.switch input{opacity:0;width:0;height:0}
.slider{
  position:absolute;inset:0;background:#cbd5e1;border-radius:999px;cursor:pointer;transition:.18s;
}
.slider:before{
  content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;
  transition:.18s;box-shadow:0 1px 3px rgba(15,23,42,.3);
}
.switch input:checked + .slider{background:var(--ok)}
.switch input:checked + .slider:before{transform:translateX(18px)}
.switch input:disabled + .slider{cursor:not-allowed;opacity:.6}
.cost-text{min-width:0}
.cost-text strong{display:block;font-size:14px}
.cost-text small{display:block;font-size:11.8px;color:var(--muted);line-height:1.35;margin-top:1px}
.badge{
  display:inline-block;font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap;
  background:#EDF3EF;color:#47614F;margin-left:6px;vertical-align:1px;
}
.badge.green{background:var(--ok-soft);color:#046c4e}
.badge.amber{background:var(--amber-bg);color:var(--amber-ink)}
.badge.blue{background:#E3F1FC;color:#0B4F8A}
.cost-input{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cost-input input{width:104px;padding:9px 44px 9px 11px}
.cost-input .suffix{right:10px}
.cost-input .auto{
  font-size:12.5px;color:#6B4D00;background:#FFF6DC;
  border-radius:9px;padding:8px 12px;font-weight:700;max-width:280px;line-height:1.35;
}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  border:1.5px solid var(--border);background:#fff;border-radius:999px;padding:4px 11px;
  font-size:12px;font-weight:700;color:#5b6b84;cursor:pointer;transition:.13s;
}
.chip:hover{border-color:var(--primary);color:var(--primary-dark)}
.chip.sel{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-dark)}
.mini-total{
  margin-top:16px;background:linear-gradient(120deg,var(--brand-blue),var(--brand-blue-mid));color:#fff;border-radius:13px;padding:14px 18px;
  border-left:8px solid var(--accent);
  display:flex;flex-wrap:wrap;gap:6px 28px;align-items:center;justify-content:space-between;
}
.mini-total .mt-l{font-size:12px;opacity:.75;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.mini-total .mt-v{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--brand-gold)}
.mini-total .mt-u{font-size:12.5px;opacity:.85}

details.faq{margin-top:14px;font-size:13px}
details.faq summary{cursor:pointer;font-weight:700;color:var(--primary-dark);font-size:13.5px}
details.faq .faq-body{background:#F2F8F4;border-radius:12px;padding:12px 16px;margin-top:8px;color:#475569}
details.faq code{background:#E4F0E9;padding:1px 6px;border-radius:6px;font-size:12px}

/* ---------- Results ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.stat{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;border:1px solid rgba(220,232,226,.7)}
.stat .st-l{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.stat .st-v{font-size:23px;font-weight:800;margin-top:6px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat .st-x{font-size:12px;color:var(--muted);margin-top:2px}
.stat.hero-stat{background:linear-gradient(120deg,var(--brand-blue) 0%,var(--brand-blue-bright) 100%);color:#fff;border:none}
.stat.hero-stat .st-l{color:var(--brand-blue-label)}
.stat.hero-stat .st-v{color:var(--brand-gold)}
.stat.hero-stat .st-x{color:var(--brand-blue-pale)}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.stats{grid-template-columns:1fr}}

.tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:12px}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
.tbl th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  background:#F2F8F4;padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap;
}
.tbl td{padding:10px 12px;border-bottom:1px solid #eef2f7;vertical-align:top}
.tbl tr:last-child td{border-bottom:none}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .small{font-size:11.5px;color:var(--muted);display:block;margin-top:2px}
.tbl tr.subtotal td{background:#F2F8F4;font-weight:700;color:#334155}
.tbl tr.grand td{background:var(--brand-blue);color:#fff;font-weight:800;font-size:15px}
.tbl tr.grand td.num{color:var(--brand-gold)}
.tbl tr.grand td .small{color:var(--brand-blue-pale);font-weight:500}
.tbl tr.best td{background:#F2FBF5}
.tbl tr.best td:first-child{box-shadow:inset 4px 0 0 var(--primary)}

.bar{display:flex;height:16px;border-radius:999px;overflow:hidden;margin:14px 0 12px;background:#EDF3EF}
.bar span{height:100%;min-width:2px;transition:width .3s}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12.5px}
.legend .li{display:flex;align-items:center;gap:7px;color:#475569}
.legend .dot{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.legend b{font-variant-numeric:tabular-nums}

/* ---------- Marketplaces ---------- */
.mk-config{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:14px 16px;
  background:#F2F8F4;border:1px solid #CFE3D8;border-radius:13px;padding:16px;margin-bottom:16px;
}
.mk-config .full{grid-column:1/-1}
.mk-foot{font-size:11.8px;color:var(--muted);margin-top:12px;line-height:1.55}
.mk-foot b{color:#47614F}
.seg-mini{display:flex;background:#fff;border:1.5px solid var(--border);border-radius:10px;padding:3px;gap:3px}
.seg-mini button{
  flex:1;border:none;background:transparent;border-radius:8px;padding:7px 10px;font-weight:700;font-size:12.5px;
  color:#5b6b84;cursor:pointer;transition:.13s;white-space:nowrap;
}
.seg-mini button.sel{background:var(--primary);color:#fff}
.checkline{display:flex;align-items:flex-start;gap:9px;margin-top:12px;font-size:13.5px;cursor:pointer}
.checkline input{width:17px;height:17px;margin-top:2px;accent-color:var(--primary);cursor:pointer}

.res-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--brand-blue);color:#fff;padding:11px 20px;border-radius:12px;font-size:13.5px;font-weight:600;
  opacity:0;pointer-events:none;transition:.25s;z-index:99;max-width:90vw;text-align:center;
  box-shadow:0 10px 30px rgba(15,23,42,.35);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

footer{
  max-width:1020px;margin:0 auto;padding:0 16px 40px;color:#6E8276;font-size:12px;line-height:1.6;
}
footer b{color:#47614F}
.print-only{display:none}

@media print{
  body{background:#fff}
  header.hero{padding:10px 0;color:#000;background:#fff}
  header.hero h1{color:#000}
  header.hero p,.hero .tag{color:#333}
  .stepper,.step:not(#step4),.res-actions,.no-print,footer{display:none!important}
  #step4{display:block!important}
  .card{box-shadow:none;border:1px solid #ddd;page-break-inside:avoid}
  .stat{border:1px solid #ddd}
  .print-only{display:block;margin:0 0 10px;font-size:12px;color:#555}
  .stat.hero-stat,.tbl tr.grand td,.mini-total{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---------- Importação automática (URL / arquivo) ---------- */
.imp-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.imp-or{text-align:center;color:var(--muted);font-size:12px;font-weight:700;margin:10px 0}
.imp-actions{display:flex;gap:10px;flex-wrap:wrap}
.imp-paste{width:100%;margin-top:8px;border:1.5px solid var(--border);border-radius:10px;padding:10px 12px;font:inherit;font-size:13px;background:#fbfcfe;resize:vertical;box-sizing:border-box}
.imp-paste:focus{outline:none;border-color:var(--primary)}
.imp-status{margin-top:10px;font-size:13px;display:none;border-radius:10px;padding:10px 12px;line-height:1.5}
.imp-status.show{display:block}
.imp-status.blue{background:#E3F1FC;color:#0B4F8A}
.imp-status.green{background:var(--ok-soft);color:#046c4e}
.imp-status.amber{background:var(--amber-bg);color:var(--amber-ink)}
.imp-status.red{background:var(--danger-soft);color:#8f1d1d}
.imp-status img{max-height:120px;border-radius:8px;margin-top:8px;display:block}
#import-card.drag{outline:3px dashed var(--primary);outline-offset:5px}

/* ---------- Modal de confirmação ---------- */
.modal-root{position:fixed;inset:0;background:rgba(2,20,50,.55);display:flex;align-items:center;justify-content:center;z-index:60;padding:16px}
.modal{background:#fff;border-radius:16px;max-width:760px;width:100%;max-height:86vh;overflow:auto;padding:20px;box-shadow:0 24px 60px rgba(2,20,50,.35)}
.modal h3{margin:0 0 4px;font-size:16px}
.modal .m-meta{font-size:12.5px;color:var(--muted);margin-bottom:10px}
.modal .m-scroll{max-height:44vh;overflow:auto;margin:10px 0;border:1px solid var(--border);border-radius:10px}
.modal .m-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}

/* ---------- Exportar / compartilhar ---------- */
.exp-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ================== RESPONSIVO GERAL ================== */

/* ---------- Tablets (até 900px) ---------- */
@media(max-width:900px){
  main{padding:0 12px 50px}
  .card{padding:20px}
  .stats{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Celulares (até 660px) ---------- */
@media(max-width:660px){
  header.hero{padding:16px 12px 72px}
  .hero-inner{gap:10px}
  .logo{width:42px;height:42px;border-radius:11px}
  .logo svg{width:26px;height:26px}
  .hero h1{font-size:20px}
  .hero p{font-size:11.5px}
  .hero .tag{font-size:11px;padding:5px 10px}
  .hero-anim{height:64px;margin:14px auto 38px}

  /* botão instalar app */
  #btn-install{background:rgba(255,198,41,.95);color:#3d2b00;border:none;border-radius:999px;
    padding:9px 14px;font-weight:800;font-size:12.5px;cursor:pointer;font-family:inherit}
  #btn-install:hover{filter:brightness(1.06)}

  .stepper{gap:4px;margin:14px auto 20px}
  .step-dot{padding:8px 2px;border-radius:11px}
  .step-dot .num{width:22px;height:22px;font-size:11px}
  .step-dot .lbl{font-size:9.5px}

  .card{padding:16px 14px;border-radius:14px}
  .card h2{font-size:15.5px}
  .card h2 .ic{width:26px;height:26px}
  .card .sub{font-size:12.3px}

  /* evita zoom automático do iOS/Safari */
  input[type=text], input[type=textarea], select, textarea{font-size:16px}
  .imp-paste{font-size:16px}
  .btn{min-height:46px}

  .step-nav{flex-direction:column}
  .step-nav .btn{width:100%}
  .step-nav .left{margin:0}
  .res-actions{flex-direction:column}
  .res-actions .btn{width:100%}
  .exp-actions{flex-direction:column}
  .exp-actions .btn{width:100%}

  .imp-row{flex-direction:column;align-items:stretch}
  .imp-row .input-wrap{min-width:0}
  .summary-bar{gap:8px 14px;padding:10px 12px}

  .stats{grid-template-columns:1fr 1fr;gap:10px}
  .stat{padding:14px}
  .stat .st-v{font-size:19px}
  .stat.hero-stat .st-v{font-size:20px}

  .mk-config{grid-template-columns:1fr;gap:12px}
  .seg-mini{flex-direction:column}
  .seg-mini button{min-height:44px}

  .cost-row{padding:11px 12px;gap:10px}
  .cost-main{min-width:0;width:100%}
  .cost-input{width:100%;justify-content:flex-end}
  .cost-input input{flex:1;min-width:0}

  .mini-total{padding:12px 14px;gap:8px}
  .mini-total .mt-v{font-size:18px}

  .tbl{min-width:560px}
  .tbl-wrap{-webkit-overflow-scrolling:touch}

  .modal{padding:14px;margin:6px;max-height:92vh}
  .m-actions{flex-direction:column}
  .m-actions .btn{width:100%}

  footer{padding:0 12px 50px;font-size:11.3px}
  details.faq .faq-body{padding:10px 12px}
}

/* ---------- Celulares pequenos (até 400px) ---------- */
@media(max-width:400px){
  .hero .tag{display:none}
  .step-dot .lbl{display:none}
  .step-dot .num{width:26px;height:26px}
  .stats{grid-template-columns:1fr}
  .prow{grid-template-columns:1fr;grid-template-areas:"name" "qty" "unit" "decl" "total" "del"}
  .prow .p-del{justify-self:stretch;width:100%}
}

/* ---------- botão instalar app (base, fora do media query) ---------- */
#btn-install{
  background:rgba(255,198,41,.95);color:#3d2b00;border:none;border-radius:999px;
  padding:9px 16px;font-weight:800;font-size:12.5px;cursor:pointer;font-family:inherit;
  margin-left:8px;white-space:nowrap;
}
#btn-install:hover{filter:brightness(1.06)}

/* foco programático nas trocas de passo (acessibilidade) */
.step:focus{outline:none}