#cm-gearcalc{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#111; }
#cm-gearcalc *{ box-sizing:border-box; }
#cm-gearcalc .wrap{ max-width:1200px; margin:0 auto; padding:14px; }

#cm-gearcalc h2{ margin:0 0 6px; font-size:20px; }
#cm-gearcalc .sub{ margin:0 0 14px; color:#555; font-size:13px; }

#cm-gearcalc .grid{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:980px){ #cm-gearcalc .grid{ grid-template-columns:1fr 1fr; } }

#cm-gearcalc .panel{
  border:1px solid #ddd; background:#fff;
  padding:14px; border-radius:12px;
}
#cm-gearcalc .panel h3{ margin:0 0 10px; font-size:16px; }
#cm-gearcalc .smallTitle{ margin:0 0 8px; font-size:14px; }

#cm-gearcalc .blocks{ display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:12px; }
#cm-gearcalc .block{
  border:1px solid #eee; background:#fafafa;
  border-radius:12px;
  padding:10px;
  min-width:0;
}
#cm-gearcalc .blockTitle{
  font-size:12px;
  font-weight:900;
  color:#333;
  margin:0 0 8px 0;
  letter-spacing:.2px;
  text-transform:uppercase;
}

#cm-gearcalc .row{ display:flex; gap:10px; flex-wrap:wrap; }
#cm-gearcalc .field{ flex:1 1 200px; min-width:160px; }

#cm-gearcalc label{ display:block; font-size:12px; color:#555; margin:0 0 6px; }
#cm-gearcalc select, #cm-gearcalc input{
  width:100%; padding:9px 10px; border:1px solid #ccc; border-radius:10px;
  font-size:14px; background:#fff;
}

#cm-gearcalc .rings{ display:flex; gap:8px; flex-wrap:wrap; }
#cm-gearcalc .rings input{ width:92px; text-align:center; }

/* ✔ důležité: tabulka bude scrollovat a nikdy nepřeteče */
#cm-gearcalc .tableWrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}

#cm-gearcalc .outGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
/* souhrn POD tabulkou na všech šířkách (nežere místo) */
#cm-gearcalc [data-summary]{ order:2; }

#cm-gearcalc .summary{
  border:1px solid #eee; background:#fafafa;
  padding:12px; border-radius:12px; font-size:13px; color:#222;
}
#cm-gearcalc .summary b{ font-weight:800; }
#cm-gearcalc .summary .kv{ display:flex; justify-content:space-between; gap:10px; margin:6px 0; }
#cm-gearcalc .summary .kv span{ color:#555; }
#cm-gearcalc .summary .hr{ height:1px; background:#e7e7e7; margin:10px 0; }

#cm-gearcalc table{ width:100%; border-collapse:collapse; table-layout:fixed; min-width:520px; }
#cm-gearcalc th, #cm-gearcalc td{
  border:1px solid #eee; padding:6px 6px; font-size:12px;
  text-align:center; vertical-align:middle;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#cm-gearcalc th{ background:#f5f5f5; font-weight:800; }
#cm-gearcalc td.cog{ font-weight:800; background:#fbfbfb; }
#cm-gearcalc td.inrange{ background: rgba(46, 204, 113, 0.14); }

#cm-gearcalc .cadenceBox{
  margin-top:14px; border:1px solid #ddd; background:#fff;
  padding:14px; border-radius:12px;
}
#cm-gearcalc .cadTop{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
#cm-gearcalc .cadVal{ font-weight:900; }
#cm-gearcalc input[type="range"]{ accent-color:#c40000; }

#cm-gearcalc .speedGrid{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:12px; }
@media (min-width:980px){ #cm-gearcalc .speedGrid{ grid-template-columns:1fr 1fr; } }

#cm-gearcalc .muted{ color:#666; font-size:12px; }

#cm-gearcalc .shareBar{
  margin-top:12px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
#cm-gearcalc .shareMsg{ font-size:12px; color:#666; }
#cm-gearcalc .shareBtn{
  border:1px solid #ccc;
  background:#fff;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
}

#cm-gearcalc .outGrid{ display:grid; grid-template-columns:1fr; gap:12px; } /* souhrn pod tabulkou */
#cm-gearcalc .tableWrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
#cm-gearcalc table{ min-width:520px; }
/* === ZHUŠTĚNÍ TABULEK (hlavní i rychlosti) === */
#cm-gearcalc table {
  font-size: 12px;          /* menší písmo */
}

#cm-gearcalc th,
#cm-gearcalc td {
  padding: 4px 6px;         /* bylo třeba 10–12px, teď je to mnohem užší */
  text-align: center;
}

/* první sloupec (Pastorek) užší */
#cm-gearcalc th:first-child,
#cm-gearcalc td:first-child {
  width: 55px;
  white-space: nowrap;
  font-weight: 600;
}

/* hlavičky převodníků ještě o fous menší */
#cm-gearcalc th {
  font-size: 11.5px;
}

/* trochu víc kompaktní řádky */
#cm-gearcalc tr {
  line-height: 1.2;
}

/* ==== CM GearCalc: Shoptet-normalize form controls ==== */
#cm-gearcalc label{
  line-height: 1.2;
  margin-bottom: 6px;
}

/* sjednocení výšky a vnitřků input/select (Shoptet to často rozbíjí globálně) */
#cm-gearcalc select,
#cm-gearcalc input[type="number"],
#cm-gearcalc input[type="text"]{
  height: 42px;
  line-height: 42px;
  padding: 0 12px;
  border-radius: 10px;
}

/* range nechat být */
#cm-gearcalc input[type="range"]{
  height: auto;
  line-height: normal;
  padding: 0;
}

/* čísla převodníků (46/30) ať nejsou “moc vysoká” uvnitř */
#cm-gearcalc .rings input[type="number"]{
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  width: 88px;
}

/* některé šablony cpou selectům extra vnitřní prvky → srovnání */
#cm-gearcalc select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-position: right 12px center;
}

/* ==== Užší tabulky: zmenšit sloupce, ale zachovat čitelnost ==== */
/* první sloupec "Pastorek" */
#cm-gearcalc th[style*="width:60px"],
#cm-gearcalc td.cog{
  width: 52px !important;
}

/* obecně menší padding v tabulkách */
#cm-gearcalc th, 
#cm-gearcalc td{
  padding: 4px 4px;
  font-size: 11px;
}

/* ať se tabulka vejde víc do panelu */
#cm-gearcalc table{
  table-layout: fixed;
}

/* ==== Rozvržení výsledků: souhrn pod tabulku (na užších obrazovkách vždy) ==== */
#cm-gearcalc .outGrid{
  grid-template-columns: 1fr !important;
}

/* na širokých obrazovkách můžeš klidně nechat souhrn vedle, ale ty chceš spíš pod:
   pokud chceš pod VŽDY, nech to takhle. Pokud chceš vedle na desktopu, řekni a přepnu. */