/* Shared look of the betting calculators (copied from seo_tax_calculator.html, 18.10.2026) */
.kc-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; }
  @media (max-width: 820px) { .kc-grid { grid-template-columns: 1fr; } }
  .kc-field { margin-bottom: 14px; }
  .kc-field label { display: block; font-size: 13px; color: rgba(226,232,240,.7); margin-bottom: 6px; }
  .kc-input { width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(2,6,23,.5); color: #fff; font-size: 16px; font-family: var(--font-mono, monospace); }
  .kc-input:focus { outline: none; border-color: #2dd4bf; box-shadow: 0 0 0 3px rgba(45,212,191,.15); }
  .kc-legs { display: flex; flex-direction: column; gap: 8px; }
  .kc-leg { display: flex; gap: 8px; align-items: center; }
  .kc-leg span { width: 64px; flex-shrink: 0; font-size: 13px; color: rgba(226,232,240,.6); }
  .kc-x { flex-shrink: 0; width: 38px; height: 42px; border-radius: 10px; border: 0; background: rgba(255,255,255,.06); color: #e2e8f0; cursor: pointer; font-size: 16px; }
  .kc-x:hover { background: rgba(248,113,113,.2); color: #fff; }
  .kc-add { margin-top: 8px; padding: 9px 14px; border-radius: 10px; border: 1px dashed rgba(45,212,191,.5); background: transparent; color: #2dd4bf; cursor: pointer; font-weight: 600; }
  .kc-add:hover { background: rgba(45,212,191,.08); }
  .kc-toggle { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: rgba(226,232,240,.85); margin-bottom: 10px; cursor: pointer; }
  .kc-toggle input { margin-top: 3px; accent-color: #2dd4bf; width: 16px; height: 16px; }
  .kc-result-main { text-align: center; padding: 18px 10px 14px; border-radius: 12px; background: rgba(45,212,191,.08); border: 1px solid rgba(45,212,191,.25); margin-bottom: 14px; }
  .kc-result-main .lbl { font-size: 13px; color: rgba(226,232,240,.7); }
  .kc-result-main .val { font-size: clamp(30px, 5vw, 40px); font-weight: 800; color: #fff; font-family: var(--font-mono, monospace); line-height: 1.2; }
  .kc-result-main .sub { font-size: 14px; font-weight: 700; font-family: var(--font-mono, monospace); }
  .kc-pos { color: #10b981; } .kc-neg { color: #f87171; }
  .kc-rows { list-style: none; padding: 0; margin: 0; }
  .kc-rows li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 14px; }
  .kc-rows li span:last-child { font-family: var(--font-mono, monospace); color: #fff; text-align: right; }
  .kc-note { font-size: 13px; line-height: 1.6; color: rgba(226,232,240,.7); margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.04); }
  .kc-note.warn { background: rgba(245,158,11,.1); color: #fbbf24; }
  .kc-prose p, .kc-prose li { line-height: 1.75; color: rgba(226,232,240,.85); }
  .kc-prose h2 { margin-top: 6px; }
  .kc-faq details { border-bottom: 1px solid rgba(255,255,255,.08); padding: 12px 0; }
  .kc-faq summary { cursor: pointer; font-weight: 600; color: #fff; list-style: none; }
  .kc-faq summary::-webkit-details-marker { display: none; }
  .kc-faq summary::after { content: "+"; float: right; color: #2dd4bf; font-weight: 700; }
  .kc-faq details[open] summary::after { content: "–"; }
  .kc-faq p { margin: 10px 0 0; line-height: 1.7; color: rgba(226,232,240,.8); }

  .kc-seg { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
  .kc-seg button { padding:8px 12px; border-radius:999px; border:1px solid rgba(45,212,191,.4); background:transparent; color:#e2e8f0; cursor:pointer; font-weight:600; font-size:13px; }
  .kc-seg button.on { background:#2dd4bf; color:#0f172a; }
  .kc-legs .kc-leg select { flex-shrink:0; width:96px; padding:10px 6px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:rgba(2,6,23,.5); color:#fff; }
  .kc-two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .kc-tools { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
  .kc-tool { display:block; padding:18px; border-radius:12px; border:1px solid rgba(45,212,191,.22); background:rgba(15,23,42,.6); text-decoration:none; color:#e2e8f0; }
  .kc-tool:hover { border-color:#2dd4bf; background:rgba(45,212,191,.06); }
  .kc-tool strong { display:block; color:#2dd4bf; font-size:17px; margin-bottom:6px; }
  .kc-tool span { font-size:14px; line-height:1.55; color:rgba(226,232,240,.8); }