/*! © 2026 Cengiz Ilerler. All rights reserved. https://cengiz.ilerler.info/ */
.tool-box.ci { width: 100%; }
.ci-lbl { font: 600 11px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.ci-grid { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 20px; align-items: start; }
.ci-set { display: flex; flex-wrap: wrap; gap: 16px 12px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--abyss); }
.ci-f { display: flex; flex-direction: column; gap: 7px; min-width: 0; flex: 1 1 100%; }
.ci-f > .g-seg { align-self: flex-start; }
.ci-f.ci-rate { flex: 0 1 120px; } .ci-f.ci-grow { flex: 1 1 170px; }
.ci-in { width: 100%; min-width: 0; padding: 10px 13px; border: 1px solid rgba(238,244,246,.22); border-radius: 10px; background: var(--deep); color: var(--foam); font: 500 16px/1.3 var(--sans); font-variant-numeric: tabular-nums; }
.ci-in:focus { outline: none; border-color: var(--sea); }
.ci-in::placeholder { color: rgba(169,188,200,.6); }
.ci-sel { appearance: auto; color-scheme: dark; font-size: 15px; }
.ci-u { position: relative; display: block; min-width: 0; }
.ci-u .ci-in { padding-right: 84px; }
.ci-rate .ci-u .ci-in { padding-right: 30px; }
.ci-u i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); max-width: 76px; font: 500 13px/1.1 var(--sans); font-style: normal; color: var(--mist); text-align: right; pointer-events: none; }
.ci-two { display: flex; align-items: center; gap: 10px; }
.ci-two > .ci-in { flex: 1; }
.ci-two .g-seg { flex: none; }
.ci-res { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ci-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.ci-tile { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--abyss); min-width: 0; }
.ci-tile b { font: 400 clamp(22px, 19px + .6vw, 30px)/1.15 var(--serif); color: var(--foam); overflow-wrap: anywhere; }
.ci-tile.is-sea { border-color: rgba(98,207,224,.55); } .ci-tile.is-sea b { color: var(--sea); }
.ci-tile.is-good b { color: var(--seaglass); }
.ci-tile.is-warn { border-color: rgba(242,166,90,.55); } .ci-tile.is-warn b { color: var(--amber); }
.ci-s { font: 400 13px/1.45 var(--sans); color: var(--mist); }
.ci-card { border: 1px solid var(--line); border-radius: 12px; background: var(--abyss); min-width: 0; }
.ci-ch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); font: 600 13px/1.3 var(--mono); color: var(--foam); }
.ci-sp { flex: 1; }
.ci-key { display: inline-flex; align-items: center; gap: 6px; font: 500 12px var(--sans); color: var(--mist); }
.ci-key i { width: 10px; height: 10px; border-radius: 3px; }
.ci-key .is-put { background: var(--sea); } .ci-key .is-int { background: var(--seaglass); }
.ci-chart { padding: 10px 12px 0; }
.ci-svg { display: block; width: 100%; height: auto; }
.ci-svg .ax { stroke: rgba(169,188,200,.35); }
.ci-svg .yl { font: 500 11px var(--sans); fill: var(--mist); }
.ci-svg .hit { fill: transparent; }
.ci-svg .put { fill: var(--sea); fill-opacity: .8; } .ci-svg .int { fill: var(--seaglass); fill-opacity: .8; }
.ci-svg g.is-on .put, .ci-svg g.is-on .int { fill-opacity: 1; }
.ci-svg g.is-on .hit { fill: rgba(238,244,246,.05); }
.ci-read { margin: 0; padding: 6px 16px 14px; font: 400 13.5px/1.45 var(--sans); color: var(--body); font-variant-numeric: tabular-nums; }
.ci-scroll { overflow-x: auto; max-height: 560px; overflow-y: auto; }
.ci-tbl { width: 100%; border-collapse: collapse; font: 400 14px/1.4 var(--sans); color: var(--body); font-variant-numeric: tabular-nums; }
.ci-tbl th { position: sticky; top: 0; padding: 9px 12px; background: var(--abyss); text-align: right; font: 600 11px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); white-space: nowrap; }
.ci-tbl td { padding: 7px 12px; border-top: 1px solid var(--line); text-align: right; white-space: nowrap; }
.ci-tbl th:first-child, .ci-tbl td:first-child { text-align: left; padding-left: 16px; }
.ci-tbl th:last-child, .ci-tbl td:last-child { padding-right: 16px; }
.ci-tbl tr.ci-st td { color: var(--mist); }
@media (max-width: 899px) {
  .ci-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .ci-set { padding: 14px; }
  .ci-tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ci-tile { padding: 12px; }
  .ci-tbl th, .ci-tbl td { padding-left: 7px; padding-right: 7px; }
  .ci-tbl th:first-child, .ci-tbl td:first-child { padding-left: 12px; }
  .ci-tbl th:last-child, .ci-tbl td:last-child { padding-right: 12px; }
  .ci-tbl th { white-space: normal; }
}