/* components.css - cards, botões, inputs, badges, barras */
/* .card {
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(14,22,51,0.92), rgba(11,16,36,0.70));
  box-shadow: var(--shadow);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.card--glass {
  background: rgba(14, 22, 51, 0.60);
  backdrop-filter: blur(10px);
}
 */
.pillrow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--space-4);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.06);
  color: var(--text-1);
}

.badge--gold { border-color: rgba(245, 208, 111, 0.35); }
.badge--violet { border-color: rgba(167, 139, 250, 0.35); }
.badge--cyan { border-color: rgba(34, 211, 238, 0.35); }

.btn {
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.06);
  color: var(--text-0);
  padding: 10px 14px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.05s ease, background 0.15s ease, border-color 0.15s ease;
}

.btn:hover {
  background: rgba(255,255,255,0.09);
  border-color: var(--stroke-strong);
}

.btn:active { transform: translateY(1px); }

.btn--primary {
  border-color: rgba(245, 208, 111, 0.28);
  background: radial-gradient(120px 40px at 20% 20%, rgba(245,208,111,0.35), transparent 65%),
              linear-gradient(135deg, rgba(167,139,250,0.25), rgba(34,211,238,0.18));
}

.btn--gold {
  border-color: rgba(245, 208, 111, 0.40);
  background: linear-gradient(135deg, rgba(245,208,111,0.20), rgba(245,208,111,0.06));
}

.btn--ghost {
  background: transparent;
}

.input, .select, .textarea {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.04);
  color: var(--text-0);
  outline: none;
}

.input:focus, .select:focus, .textarea:focus {
  border-color: rgba(167, 139, 250, 0.55);
  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.10);
}

.formrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 680px) {
  .formrow { grid-template-columns: 1fr; }
  .btn { width: 100%; }
}

.label {
  display: block;
  font-size: 13px;
  color: var(--text-1);
}

.checkrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.03);
}

.note {
  font-size: 13px;
  /* color: var(--text-2); */
  margin-top: 10px;
}

.progress {
  height: 10px;
  width: 100%;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  width: 50%;
  background: linear-gradient(90deg, rgba(34,211,238,0.55), rgba(167,139,250,0.55), rgba(245,208,111,0.55));
}

.kpi {
  display: grid;
  gap: 4px;
}

.kpi__value {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--gold);
}

.kpi__label {
  font-size: 13px;
  color: var(--text-1);
}

/* ===== organizer form helpers (se não existirem no components.css) ===== */
.form .field { display: grid; gap: 6px; }
.label { font-weight: 700; color: var(--text-0); }
.input {
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.20);
  background: rgba(2,6,23,0.35);
  color: var(--text-0);
  outline: none;
}
.input:focus {
  border-color: rgba(167,139,250,0.55);
  box-shadow: 0 0 0 4px rgba(167,139,250,0.12);
}
.hint { margin-top: 2px; }
.check { display:flex; align-items:center; gap:10px; cursor:pointer; }
.check input { transform: translateY(1px); }


/*Menu responsivo*/

/* ===== NAV RESPONSIVA ===== */

.navwrap{
  display:flex;
  align-items:center;
  gap:10px;
}

/* botão hamburguer escondido no desktop */
.nav__toggle{
  display:none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

/* nav desktop padrão */
.nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* mobile: menu vira dropdown */
@media (min-width: 820px){
  .nav__toggle{ display:none; }
}
@media (max-width: 820px){
  .nav__toggle{ display:inline-flex; }

  .nav{
    display:none;                /* fechado por padrão */
    position:absolute;
    top: 64px;                   /* ajuste conforme altura da sua topbar */
    right: 12px;
    left: 12px;
    z-index: 999;
    background: rgba(12,12,18,.98);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 12px;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
  }

  .nav.nav--open{
    display:flex;
  }

  .nav__link{
    width:100%;
    padding: 12px 12px;
    border-radius: 10px;
  }
}
/* components.css - mínimo pra menu responsivo */

/* body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text-0);
} */

.container{
  width:min(1100px, calc(100% - 24px));
  margin:0 auto;
}

.page{ padding: 18px 0 40px; }

.topbar{
  background:#111118;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
  position:relative;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#494b4a;
}

.brand__logo{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
}

.brand__name{ font-weight:700; }

/* ===== DESKTOP MENU ===== */
.nav-desktop{
  display:flex;
  gap:10px;
  align-items:center;
}

.nav-desktop a{
  color:rgba(255,255,255,.85);
  text-decoration:none;
  padding:10px 12px;
  border-radius:10px;
}

.nav-desktop a:hover{
  background:rgba(255,255,255,.08);
}

/* ===== MOBILE MENU ===== */
.nav-mobile{ display:none; }  /* escondido no desktop */

.hamb{
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06);
  color:#fff;
  border-radius:10px;
  padding:8px 10px;
  font-size:18px;
  cursor:pointer;
}



/* links mobile - FECHADO por padrão */
.mobile-links{
  display:none;
  position:absolute;
  top:60px;        /* ajuste se precisar */
  left:0;
  right:0;
  margin:0 12px;
  background:#111118;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  z-index:999;
}

.mobile-links a{
  display:block;
  color:rgba(255,255,255,.90);
  text-decoration:none;
  padding:12px;
  border-radius:10px;
}

.mobile-links a:hover{
  background:rgba(255,255,255,.08);
}

/* ===== breakpoint 768px ===== */
@media (max-width: 768px){
  .nav-desktop{ display:none; } /* some com menu desktop */
  .nav-mobile{ display:block; } /* aparece sanduíche */
}

/* ===== HISTÓRICO DE RESULTADOS ===== */
.hist_item { padding: 10px 0; }
.hist_head { display:flex; flex-direction:column; gap:6px; }
.hist_head .nums { font-weight:700; letter-spacing:0.5px; }
.hist_msg { margin:8px 0 10px; }
.hist_grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:10px; }
.hist_box { border:1px solid var(--line, rgba(255,255,255,.12)); border-radius:12px; padding:10px; }
.hist_box span { display:block; opacity:.8; font-size:12px; }
.hist_box strong { display:block; font-size:18px; margin-top:4px; }
.badge { padding:2px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.2); font-size:12px; }
.badge--hot { background: rgba(255,120,0,.15); border-color: rgba(255,120,0,.35); }
.badge--good { background: rgba(0,180,255,.12); border-color: rgba(0,180,255,.3); }
.badge--neutral { background: rgba(255,255,255,.06); }
.mini { font-size: 13px; margin-top: 8px; }
.alert { padding:10px 12px; border-radius:12px; margin-bottom:10px; }
.alert--warn { background: rgba(255,180,0,.12); border:1px solid rgba(255,180,0,.25); }
.stack { display:flex; flex-direction:column; gap:12px; }
.pill-info { padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.12); }
.pill-ok   { border-color: rgba(0,255,140,.25); background: rgba(0,255,140,.06); }
.pill-warn { border-color: rgba(255,180,0,.28); background: rgba(255,180,0,.07); }
.pill-hot  { border-color: rgba(255,80,0,.30);  background: rgba(255,80,0,.08); }



/* ===== Theme-friendly nav toggle (usa vars do tema) ===== */
.nav__toggle{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.70);
  color: var(--text-0);
}
@media (max-width: 820px){
  .nav{
    background: var(--surface);
    border: 1px solid var(--border);
  }
  .nav__link:hover{ background: rgba(15,23,42,.04); }
}

/* MATRIZ */
#msGrid{
  display:grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 8px;
  max-width: 560px;
}

.ms-note{
  margin-top: 6px;
  color: #5b6770;
}

.ms-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
}

.ms-tutorial{
  display: grid;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid #e1e6eb;
  background: #fff;
}

.ms-cell{
  border: 2px solid #2ea44f;
  background:#fff;
  border-radius:6px;
  padding: 10px 0;
  font-weight: 900;
  cursor:pointer;
}

.ms-cell.is-on{
  background:#2ea44f;
  color:#fff;
}

/* RESULTADO */
.ms-card{
  background:#fff;
  border:1px solid #e1e6eb;
  border-radius:10px;
  padding:14px;
  margin: 14px 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  text-align:center;
}

.ms-card__title{
  font-weight:900;
  font-size:18px;
}

.ms-card__subtitle{
  font-weight: 600;
  font-size: 14px;
  color: #5b6770;
}

.ms-card__msg{
  margin-top:8px;
  font-weight:900;
  font-size:18px;
}

.ms-balls{
  margin-top:14px;
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

.ms-ball{
  /* width:52px;
  height:52px; */
  padding: 5px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:#fff;
}

.ms-ball.hit{ background:#1f9d55; }
.ms-ball.miss{ background:#c0392b; }

.ms-picked{ font-size:18px; margin-bottom:8px; }
.ms-instr{ color:#5b6770; margin-bottom:12px; }
.hitLegend{ color:#1f9d55; font-weight:900; }
.missLegend{ color:#c0392b; font-weight:900; }

.ms-empty, .ms-loading{
  background:#fff;
  border:1px solid #e1e6eb;
  border-radius:10px;
  padding:14px;
  margin-top:12px;
  text-align:center;
  color:#5b6770;
}