/* Case Converter — локальные стили */
.cc-io { max-width: none; min-height: 280px; }
.cc-count { margin-top: 8px; font-variant-numeric: tabular-nums; }
.cc-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cc-tabs button {
  font: 500 14px var(--font); color: var(--ink); background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 0 12px; height: 36px; cursor: pointer; white-space: nowrap;
}
.cc-tabs button:hover { background: var(--canvas); }
.cc-tabs button[aria-selected="true"] { background: var(--blue-tint); border-color: var(--blue); color: var(--blue); font-weight: 600; }
.cc-styles { border: 0; padding: 0 0 10px; }
.cc-styles[hidden] { display: none; }
.cc-opts { min-height: 58px; }
.cc-opts [hidden] { display: none; }
.cc-dev { border-top: 1px solid var(--border); padding: 0 16px; }
.cc-dev > summary { cursor: pointer; padding: 14px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.cc-dev > summary::-webkit-details-marker { display: none; }
.cc-dev > summary::after { content: "+"; color: var(--muted); font-weight: 400; }
.cc-dev[open] > summary::after { content: "−"; }
.cc-dev-note { margin: 0 0 10px; }
.cc-dev-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; padding-bottom: 16px; }
.cc-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; }
.cc-row.flash .cc-val { border-color: var(--teal); background: var(--ok-tint); }
.cc-label { font: 500 13px var(--mono); color: var(--muted); }
.cc-val {
  width: 100%; min-width: 0; min-height: 36px; padding: 7px 10px; font: 400 14px/1.45 var(--mono); color: var(--ink); background: var(--code-bg);
  border: 1px solid var(--border); border-radius: 10px; resize: none; white-space: pre; overflow-x: auto; overflow-y: hidden;
}
.cc-val:focus { outline: none; border-color: var(--blue); box-shadow: var(--focus); }
.cc-copy { padding: 0 10px; }
@media (max-width: 1000px) { .cc-dev-rows { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
  .cc-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px 10px; padding: 0 12px; scroll-snap-type: x proximity; }
  .cc-tabs::-webkit-scrollbar { display: none; }
  .cc-tabs button { height: 44px; flex: none; scroll-snap-align: start; }
  .cc-io { min-height: 180px; }
  .cc-hide-sm { display: none; }
  .cc-dev { padding: 0 12px; }
  .cc-row { grid-template-columns: minmax(0, 1fr) 44px; }
  .cc-label { grid-column: 1 / -1; }
  .cc-copy { width: 44px; height: 44px; padding: 0; }
}