*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #080812;
  color: #e2e8f0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 100dvh;
  padding-bottom: 44px;
  -webkit-tap-highlight-color: transparent;
}

#app { max-width: 440px; margin: 0 auto; }

/* ── Header ──────────────────────────────────────── */
.header {
  padding: 14px 16px 12px;
  padding-top: calc(14px + env(safe-area-inset-top));
  background: #080812;
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  display: flex; justify-content: space-between; align-items: center;
}
.header-title {
  font-size: 21px; font-weight: 900;
  background: linear-gradient(90deg,#a78bfa,#60a5fa);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.header-sub { font-size: 11px; color: #334155; margin-top: 1px; }
.header-right { display: flex; gap: 6px; align-items: center; }

.cur-btn {
  padding: 5px 9px; border-radius: 14px; font-size: 12px;
  cursor: pointer; font-weight: 700;
  border: 1.5px solid rgba(255,255,255,0.08);
  background: transparent; color: #334155;
  font-family: inherit; transition: all 0.15s;
}
.cur-btn.on { border-color: #a78bfa; background: rgba(167,139,250,0.18); color: #a78bfa; }

#install-btn {
  display: none; padding: 5px 10px; border-radius: 14px; font-size: 11px;
  cursor: pointer; font-weight: 700; border: 1.5px solid rgba(52,211,153,0.4);
  background: rgba(52,211,153,0.12); color: #34d399; font-family: inherit;
}

/* ── Cards ───────────────────────────────────────── */
#cards {
  padding: 8px 12px 0;
  display: flex; flex-direction: column; gap: 10px;
}

.card {
  background: #111122; border-radius: 18px;
  border-left: 4px solid var(--cc); overflow: hidden;
  transition: box-shadow 0.4s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.card-head {
  padding: 11px 14px 10px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.card-title { display: flex; align-items: center; gap: 8px; }
.card-dot { width:9px; height:9px; border-radius:50%; background:var(--cc); flex-shrink:0; }
.card-lbl { font-weight:700; font-size:14px; color:#94a3b8; }

.rank-badge {
  display: none; font-size:10px; font-weight:800; color:var(--cc);
  background: rgba(var(--ccr),0.13); padding:2px 9px; border-radius:10px;
  border: 1px solid rgba(var(--ccr),0.27);
  text-transform: uppercase; letter-spacing: 0.06em;
}

.rm-btn {
  background: rgba(239,68,68,0.10); border: 1px solid rgba(239,68,68,0.20);
  color: #f87171; width:30px; height:30px; border-radius:8px;
  cursor:pointer; font-size:20px; display:flex; align-items:center; justify-content:center;
  font-family: inherit;
}

.card-body { padding:12px 14px 14px; display:flex; flex-direction:column; gap:10px; }

/* ── Inputs ──────────────────────────────────────── */
.lbl { font-size:10px; color:#334155; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; margin-bottom:4px; }

input {
  width:100%; background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.1); border-radius:11px;
  color:#e2e8f0; outline:none; font-family:inherit;
  -webkit-appearance:none; -moz-appearance:textfield; appearance:none;
  transition: border-color 0.2s;
}
input:focus { border-color: rgba(255,255,255,0.25); }
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance:none; appearance:none; }

.inp-name { padding:9px 12px; font-size:14px; }

.g2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.g3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }

.pw { position:relative; }
.pfx {
  position:absolute; left:8px; top:50%; transform:translateY(-50%);
  color:#475569; font-size:11px; font-weight:700; pointer-events:none;
}
.inp-price { padding:12px 8px 12px 26px; font-size:20px; font-weight:800; text-align:right; }
.inp-price.wide { padding-left:34px; }
.inp-n { padding:12px 6px; font-size:20px; font-weight:800; text-align:center; }
.inp-n.sm { font-size:17px; }
.inp-price.sm { font-size:17px; }

/* ── Chips ───────────────────────────────────────── */
.chips-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.chips-scroll::-webkit-scrollbar { display:none; }
.chips-row { display:flex; gap:6px; width:max-content; padding-bottom:2px; }

.chip {
  padding:8px 14px; border-radius:22px; flex-shrink:0;
  border:1.5px solid rgba(255,255,255,0.09);
  background:rgba(255,255,255,0.04); color:#475569;
  font-weight:500; font-size:14px; cursor:pointer;
  transition:all 0.15s; white-space:nowrap; font-family:inherit;
}
.chip.on {
  border-color:var(--cc); background:rgba(var(--ccr),0.13);
  color:var(--cc); font-weight:800;
}
.chip.special { border-style:dashed; }
.chip.special.on { border-style:solid; }

/* ── Result box ──────────────────────────────────── */
.res-box {
  padding:12px 14px; border-radius:13px; margin-top:2px;
  background:rgba(255,255,255,0.04); border:1.5px solid rgba(255,255,255,0.07);
  transition:background 0.3s, border-color 0.3s;
}
.res-box.best { background:rgba(var(--ccr),0.083); border-color:rgba(var(--ccr),0.267); }

.res-main { display:flex; justify-content:space-between; align-items:flex-start; }
.res-lbl { font-size:10px; color:#334155; margin-bottom:3px; }
.res-val { font-size:22px; font-weight:900; line-height:1; color:#e2e8f0; transition:color 0.3s; }
.res-val.best { color:var(--cc); }
.res-check { font-size:28px; filter:drop-shadow(0 0 8px rgba(var(--ccr),0.6)); }

.res-pct { text-align:right; }
.res-pct-v { font-size:22px; font-weight:900; color:#f87171; line-height:1; }
.res-pct-l { font-size:10px; color:#475569; margin-top:2px; }

.sec-metrics {
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px;
  padding-top:10px; border-top:1px solid rgba(255,255,255,0.06); margin-top:10px;
}
.mm { display:flex; flex-direction:column; align-items:center; gap:2px; }
.mm-l { font-size:9px; color:#334155; text-transform:uppercase; letter-spacing:0.05em; text-align:center; }
.mm-v { font-size:12px; font-weight:700; color:#64748b; transition:color 0.3s; }
.mm-v.best { color:var(--cc); }

/* ── Add button ──────────────────────────────────── */
#add-wrap { padding:10px 12px 0; }
#add-btn {
  width:100%; padding:16px; border-radius:18px;
  border:2px dashed rgba(167,139,250,0.2); background:rgba(167,139,250,0.04);
  color:#5b21b6; font-size:16px; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit;
}
.add-ct { font-size:12px; color:#3b0764; font-weight:400; }

/* ── Winner banner ───────────────────────────────── */
#winner { margin:12px 12px 4px; }
.w-card { padding:14px 16px; border-radius:18px; border:2px solid; }
.w-top { font-size:10px; color:#64748b; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:5px; }
.w-name { font-size:22px; font-weight:900; line-height:1.2; }
.w-name-sub { font-weight:400; color:#94a3b8; font-size:15px; }
.w-meta { display:flex; align-items:center; gap:10px; margin-top:7px; flex-wrap:wrap; }
.w-ppu { font-size:15px; font-weight:700; color:#e2e8f0; }
.w-extra { font-size:12px; color:#94a3b8; }
.w-save { font-size:13px; font-weight:800; color:#fff; background:#16a34a; padding:3px 10px; border-radius:20px; }

/* ── Equivalências ───────────────────────────────── */
#equiv-wrap { padding:10px 12px 0; }
.eq-card { background:#111122; border-radius:18px; padding:16px; }
.eq-title { font-size:11px; color:#334155; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:12px; }

.eq-pair { padding:13px 14px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:13px; margin-bottom:8px; }
.eq-pair:last-child { margin-bottom:0; }

.eq-hd { font-size:12px; color:#64748b; margin-bottom:9px; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.05); }

.eq-hi { padding:9px 12px; border-radius:10px; margin-bottom:8px; background:rgba(74,222,128,0.08); border:1px solid rgba(74,222,128,0.18); display:flex; justify-content:space-between; align-items:center; }
.eq-hi-t { font-size:12px; color:#64748b; }
.eq-hi-v { font-size:17px; font-weight:900; color:#4ade80; line-height:1; text-align:right; flex-shrink:0; margin-left:10px; }

.eq-rows { display:flex; flex-direction:column; gap:5px; }
.eq-row { display:flex; gap:8px; align-items:flex-start; }
.eq-ic { font-size:13px; flex-shrink:0; margin-top:1px; }
.eq-tx { font-size:12px; color:#64748b; line-height:1.6; }

/* ── Empty state ─────────────────────────────────── */
#empty-wrap { padding:10px 12px 0; }
.empty-card { text-align:center; padding:36px 20px; background:#111122; border-radius:18px; border:1px dashed rgba(255,255,255,0.06); }
.empty-ic { font-size:44px; margin-bottom:12px; }
.empty-tx { font-size:14px; color:#334155; line-height:1.7; }
.empty-tx b { color:#475569; }

/* ── Footer ──────────────────────────────────────── */
#footer { text-align:center; font-size:11px; color:#1e293b; padding:12px 16px 4px; }

/* ════════════════════════════════════════════════════
   LAYOUT RESPONSIVO
   ════════════════════════════════════════════════════ */

/*
  Mobile (padrão, < 640px)
  ─────────────────────────
  Coluna única. col-aside (winner + equiv) aparece acima
  dos cards via order, para o resultado ficar visível
  sem precisar rolar a página.
*/
.layout {
  display: flex;
  flex-direction: column;
}

.col-aside { order: -1; }
.col-main  { order:  1; }

/* ── Tablet (≥ 640px) ────────────────────────────── */
@media (min-width: 640px) {
  #app {
    max-width: 920px;
  }

  .layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 8px 16px 0;
  }

  /* Restaura ordem natural: cards à esquerda, aside à direita */
  .col-main  { flex: 1; min-width: 0; order: 0; }
  .col-aside { width: 300px; flex-shrink: 0; order: 0; position: sticky; top: 62px; }

  /* Remove padding horizontal que era necessário no modo coluna única */
  #cards     { padding-left: 0; padding-right: 0; }
  #add-wrap  { padding-left: 0; padding-right: 0; }
  #empty-wrap { padding-left: 0; padding-right: 0; }
  #winner    { margin-left: 0; margin-right: 0; }
  #equiv-wrap { padding-left: 0; padding-right: 0; }
}

/* ── Desktop (≥ 1024px) ──────────────────────────── */
@media (min-width: 1024px) {
  #app {
    max-width: 1200px;
  }

  .layout {
    gap: 24px;
    padding: 12px 24px 0;
  }

  .col-aside {
    width: 380px;
    top: 66px;
  }

  /* Cards em grid 2 colunas para aproveitar a largura disponível */
  #cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  /* Tipografia ligeiramente maior no desktop */
  .header-title { font-size: 24px; }
  .w-name       { font-size: 24px; }
  .res-val      { font-size: 24px; }
}