/* ===========================
   SwingNotes — Dark layout (Live + Index)
   =========================== */
:root{
  --bg:#0b0f14;
  --card:#121821;
  --ink:#e6edf3;
  --muted:#9aa7b2;
  --pos:#1ecb7b;
  --neg:#ff6b6b;
  --brand:#f59e0b;
  --ring:#223042;
  --chip:#1b2430;
  --text: var(--ink);
}

*{ box-sizing:border-box }

html, body{
  height:100%;
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Inter,Roboto,Arial,sans-serif;
}

/* ====== LAYOUT ====== */
.container{ max-width:1100px; margin:0 auto; padding:28px 20px }
.muted{ color:var(--muted) }
.updated{ font-size:.9rem; color:var(--muted); opacity:.7 }

/* ====== UTILS ====== */
.pos{ color:var(--pos) }
.neg{ color:var(--neg) }

/* ===== Goal / Meta progress ===== */
.goalbar {
  margin: 16px 0 8px 0;
  padding: 16px;
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 10px 25px rgba(0,0,0,0.25);
}
.goalbar-head, .goalbar-foot {
  display:flex; align-items:center; justify-content:space-between;
  font-weight:600;
}
.goalbar-head { margin-bottom:10px; }
.goalbar-foot { margin-top:10px; font-size:12px; color:var(--muted); }

.goalbar-track {
  position:relative;
  height:14px;
  background: var(--ring);
  border-radius: 999px;
  overflow:hidden;
}
.goalbar-fill {
  position:absolute; left:0; top:0; height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--neg), #f59e0b, var(--pos));
  border-radius:999px;
  transition:width .6s ease;
}
.goalbar-marker { /* alvo (100%) */
  position:absolute; top:-2px; width:2px; height:18px;
  background: rgba(255,255,255,.25); border-radius:2px;
}
.goalbar-badge {
  display:inline-flex; gap:6px; align-items:center;
  font-size:12px; padding:4px 8px; border-radius:999px;
  background:var(--chip); color:var(--ink);
}

/* Ticks 25/50/75 */
.goalbar-tick{
  position:absolute; top:-2px; width:2px; height:18px;
  background:rgba(255,255,255,.18); border-radius:2px;
  pointer-events:none;
}
.goalbar-tick span{
  position:absolute; top:20px; left:50%;
  transform:translateX(-50%);
  font-size:11px; color:var(--muted); font-weight:600;
}
@media (max-width:560px){
  .goalbar-tick span{ font-size:10px; top:16px; }
}

/* ====== HEADER ====== */
header{
  background:none;
  border:none;
  box-shadow:none;
  text-align:center;
  margin:30px 0 25px;
  padding:0;
}
header h1{
  font-size:2rem;
  font-weight:800;
  margin:0 0 6px 0;
  color:var(--ink);
}
header > div{
  font-size:.85rem;
  color:var(--muted);
  opacity:.6;
  font-weight:500;
}

/* ====== MENU SUPERIOR ====== */
.top-menu{
  display:flex;
  justify-content:center;
  margin: 8px 0 22px;
  position: relative;
  z-index: 5;
}
.sn-btn{
  display:inline-block;
  background:var(--card);
  color:var(--ink);
  border:1px solid var(--ring);
  border-radius:12px;
  padding:10px 18px;
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.3px;
  text-decoration:none;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  transition:all .15s ease-in-out;
}
.sn-btn:hover{
  background:var(--ring);
  border-color:var(--brand);
  color:var(--pos);
  transform:translateY(-1px);
  text-decoration:none;
}

/* ====== SUMMARY GRID (4 cards do topo) ====== */
.sn-summary-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap:12px;
  margin:20px 0;
}
.sn-summary-card{
  background:var(--card);
  border-radius:16px;
  padding:12px 16px;
  box-shadow:0 0 0 1px var(--ring);
  text-align:center;
}
.sn-summary-label{ color:var(--muted); font-size:13px; }
.sn-summary-value{ font-size:18px; font-weight:600; margin-top:4px; }
.sn-summary-value.pos{ color:var(--pos); }
.sn-summary-value.neg{ color:var(--neg); }

/* ====== SEÇÕES E RODAPÉ COMO CARDS ====== */
section, footer{
  background:var(--card);
  border:1px solid var(--ring);
  border-radius:16px;
  padding:14px 18px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  margin-bottom:16px;
}
h2{
  font-size:22px;
  margin:6px 0 10px 0;
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--ink);
}

/* ====== CARDS BASE ====== */
.card, .sn-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border:1px solid var(--ring);
  border-radius:18px;
  padding:12px 14px;
  box-shadow:0 10px 26px rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
}

/* ====== GRID genérico (cards de tickers) ====== */
.grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:12px }
.badge{ font-size:11px; padding:2px 6px; border-radius:999px; background:var(--chip); border:1px solid var(--ring); color:var(--muted) }
.rows{ display:grid; gap:6px; margin-top:6px }
.row{ display:flex; justify-content:space-between; gap:8px }
.k{ color:var(--muted); font-size:12px; opacity:.9 }
.v{ font-weight:700 }
.empty{ border:1px dashed var(--ring); padding:18px; border-radius:12px; color:var(--muted); text-align:center }
.sort{ background:var(--card); border:1px solid var(--ring); color:var(--ink); border-radius:10px; padding:8px 10px }

/* ====== CARDS DE TOTAIS (index) ====== */
.sum-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  grid-auto-rows: 1fr;
  gap:12px;
  margin:6px 0 16px;
}
.sum-card{
  background:var(--card);
  border:1px solid var(--ring);
  border-radius:16px;
  padding:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.sum-k{ font-size:.86rem; opacity:.85; margin-bottom:6px }
.sum-v{ font-size:1.2rem; font-weight:800; letter-spacing:.2px }
@media (max-width:960px){ .sum-cards{ grid-template-columns: repeat(2, minmax(220px,1fr)); } }
@media (max-width:560px){ .sum-cards{ grid-template-columns: 1fr; } }

/* ====== SELL SUMMARY GRID — escopado ====== */
#sell-cards .sn-summary-grid{
  display:grid;
  gap:12px;
  margin-top:8px;
  grid-template-columns:repeat(2, minmax(260px, 1fr));
  grid-template-areas:
    "ultimo ultimo"
    "melhor ultimo_profit"
    "pior   ultimo_loss";
}
@media (max-width:900px){
  #sell-cards .sn-summary-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "ultimo"
      "melhor"
      "ultimo_profit"
      "pior"
      "ultimo_loss";
  }
}
.sn-card.ultimo{ grid-area:ultimo }
.sn-card.melhor{ grid-area:melhor }
.sn-card.ultimo_profit{ grid-area:ultimo_profit }
.sn-card.pior{ grid-area:pior }
.sn-card.ultimo_loss{ grid-area:ultimo_loss }

.sn-head{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:.98rem; letter-spacing:.2px }
.sn-icon{ font-size:1.05rem }
.sn-row{ margin-top:8px; font-size:.92rem; line-height:1.35rem }

/* chips */
.sn-chip{
  display:inline-block; padding:2px 8px; border-radius:999px;
  font-size:.78rem; font-weight:600; margin-right:6px; margin-bottom:6px;
  border:1px solid var(--ring);
  background:rgba(255,255,255,.06);
  color:var(--ink);
  word-break:break-word;
}

/* estados */
.sn-pnl-pos,.sn-pos{ color:var(--pos); font-weight:700 }
.sn-pnl-neg,.sn-neg{ color:var(--neg); font-weight:700 }
.sn-tkr{ font-weight:700 }
.sn-muted{ opacity:.8; color:var(--muted) }

/* ====== PROJECT SUMMARY GRID — live ====== */
.sn-proj-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:12px;
  margin:8px 0 22px 0;
}
.sn-metric-head{ font-size:.86rem; opacity:.85; margin-bottom:6px }
.sn-metric-value{ font-size:1.15rem; font-weight:800; letter-spacing:.2px }

/* quadradinhos de métrica */
.metric{
  border:1px solid var(--ring);
  border-radius:14px;
  padding:10px 12px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}

/* ====== RODAPÉ ====== */
footer{
  text-align:center;
  color:var(--muted);
  font-size:.85rem;
  opacity:.7;
}

/* ====== LINKS ====== */
a{ color:var(--pos); text-decoration:none }
a:hover{ text-decoration:underline }