/*! © 2026 Cengiz Ilerler. All rights reserved. https://cengiz.ilerler.info/ */
.tool-box.ds { width: 100%; }
.ds-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 14px; }
.ds-lbl { font: 600 11px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.ds-sel { padding: 6px 10px; border: 1px solid rgba(238,244,246,.22); border-radius: 9px; background: var(--deep); color: var(--foam); font: 500 13.5px var(--sans); appearance: auto; color-scheme: dark; }
.ds-sel:focus { outline: none; border-color: var(--sea); }
.ds-status { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1.4 var(--sans); color: var(--mist); }
.ds-status .is-ok { color: var(--seaglass); } .ds-status .is-bad { color: var(--coral); }
.ds-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mist); display: inline-block; flex: none; }
.ds-dot.is-ok { background: var(--seaglass); } .ds-dot.is-bad { background: var(--coral); }
.ds-sp { flex: 1; }
.ds-tog[aria-pressed="true"] { background: var(--foam); border-color: var(--foam); color: var(--abyss); }
.ds-ph .pill-sm svg { width: 15px; height: 15px; margin-right: 4px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; vertical-align: -3px; }
.ds-panes { display: grid; grid-template-columns: minmax(0, 1.05fr) 10px minmax(0, .9fr) 10px minmax(0, 1.15fr); grid-template-rows: minmax(0, 1fr); height: var(--ds-h, 560px); }
.ds-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--deep); overflow: hidden; }
.ds-left { position: relative; }
.ds-left.is-drop { border-color: var(--sea); box-shadow: 0 0 0 3px rgba(98,207,224,.18); }
.ds-ph { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); font: 600 13.5px/1.3 var(--mono); color: var(--foam); }
.ds-ph .g-seg button { font-size: 12px; padding: 4px 9px; }
.ds-ph .pill-sm { padding: 4px 10px; font-size: 12px; }
.ds .g-seg button:disabled { text-decoration: none; }
.ds-fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ds-ttl { white-space: nowrap; }
.ds-split { cursor: col-resize; position: relative; touch-action: none; border-radius: 4px; }
.ds-split::after { content: ''; position: absolute; left: 4px; top: 30%; bottom: 30%; width: 2px; border-radius: 1px; background: rgba(169,188,200,.25); }
.ds-split:hover::after, .ds-split.is-drag::after, .ds-split:focus-visible::after { background: var(--sea); }
.ds-split:focus-visible { outline: none; }
.ds-grip { height: 14px; margin: 2px 0 12px; cursor: row-resize; position: relative; touch-action: none; }
.ds-grip::after { content: ''; position: absolute; left: 50%; top: 5px; width: 48px; height: 4px; margin-left: -24px; border-radius: 2px; background: rgba(169,188,200,.3); }
.ds-grip:hover::after, .ds-grip.is-drag::after, .ds-grip:focus-visible::after { background: var(--sea); }
.ds-grip:focus-visible { outline: none; }
.ds-in { flex: 1 1 auto; display: flex; min-height: 0; background: var(--trench); }
.ds-wait { margin: auto; color: var(--mist); font-size: 14px; }
.ds-wait.is-bad { color: var(--coral); }
.ds-in .cm-editor { flex: 1 1 auto; min-width: 0; height: 100%; background: transparent; color: var(--body); font: 400 13px/1.7 var(--mono); }
.ds-in .cm-editor.cm-focused { outline: none; }
.ds-in .cm-scroller { font-family: var(--mono); line-height: 1.7; overflow: auto; }
.ds-in .cm-content { padding: 10px 0; caret-color: var(--foam); }
.ds-in .cm-line { padding: 0 14px 0 6px; }
.ds-in .cm-gutters { background: transparent; border: 0; color: #3E5668; }
.ds-in .cm-lineNumbers .cm-gutterElement { padding: 0 6px 0 10px; min-width: 30px; }
.ds-in .cm-foldGutter .cm-gutterElement { color: var(--mist); cursor: pointer; }
.ds-in .cm-activeLine { background: rgba(238,244,246,.035); }
.ds-in .cm-activeLineGutter { background: transparent; color: var(--mist); }
.ds-in .cm-cursor { border-left: 2px solid var(--foam); }
.ds-in .cm-selectionBackground, .ds-in .cm-focused .cm-selectionBackground, .ds-in .cm-content ::selection { background: rgba(98,207,224,.22) !important; }
.ds-in .cm-matchingBracket { background: rgba(98,207,224,.18); color: var(--foam) !important; }
.ds-in .cm-selectionMatch { background: rgba(202,179,246,.16); }
.ds-in .cm-placeholder { color: #557083; }
.ds-in .cm-panels { background: var(--deep); color: var(--body); border-color: var(--line); }
.ds-in .cm-panel.cm-search input, .ds-in .cm-panel.cm-search button { font: 400 13px var(--sans); color: var(--foam); background: var(--tide); border: 1px solid var(--line); border-radius: 6px; }
.ds-in .ds-errline { background: rgba(225,127,107,.14); }
.ds-t-k { color: var(--dusk); } .ds-t-s { color: var(--seaglass); } .ds-t-n { color: #F2A0C4; } .ds-t-p { color: var(--harbor); }
.ds-t-g { color: #E6D67A; } .ds-t-c { color: #6F8797; font-style: italic; } .ds-t-o { color: var(--mist); } .ds-t-bad { color: var(--coral); }
.ds-err { display: block; width: 100%; margin: 0; padding: 10px 14px; border: 0; border-top: 1px solid rgba(225,127,107,.45); background: rgba(225,127,107,.08); color: var(--coral); font: 500 13px/1.45 var(--mono); text-align: left; cursor: pointer; }
.ds-err[hidden] { display: none; }
.ds-view { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 10px 12px 14px; }
.ds-none { margin: 40px auto; max-width: 300px; font: 400 14px/1.5 var(--sans); color: var(--mist); text-align: center; }
.ds-none.is-bad { color: var(--coral); }
.ds-note { margin: 0 0 10px; font: 400 13px/1.45 var(--sans); color: var(--mist); }
.ds-note.is-bad, .ds-out .is-bad { color: var(--coral); }
.ds-path { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--line); }
.ds-path code { flex: 1 1 auto; min-width: 0; padding: 3px 8px; border-radius: 5px; background: var(--tide); font: 500 12.5px var(--mono); color: var(--foam); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-path code.is-hint { background: none; padding-left: 0; font: 400 12.5px var(--sans); color: var(--mist); }
.ds-path .pill-sm { flex: none; }
.ds-tree { font: 400 13px/1.85 var(--mono); color: var(--body); }
.ds-n { margin: 0; }
.ds-kids { padding-left: 16px; border-left: 1px solid var(--hair); margin-left: 6px; }
.ds-n summary { list-style: none; cursor: pointer; }
.ds-n summary::-webkit-details-marker { display: none; }
.ds-n summary::before { content: '▸'; display: inline-block; width: 14px; color: var(--mist); transition: transform .12s; }
.ds-n[open] > summary::before { transform: rotate(90deg); }
.ds-leaf { padding-left: 14px; }
.ds-row { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; padding: 0 6px; border-radius: 6px; cursor: pointer; }
.ds-row:hover { background: rgba(238,244,246,.05); }
.ds-row.is-on { background: rgba(238,244,246,.08); box-shadow: inset 2px 0 var(--foam); }
.ds-row.is-hit { background: rgba(202,179,246,.14); box-shadow: inset 2px 0 var(--dusk); }
.ds-k { color: var(--harbor); } .ds-k.is-i { color: var(--mist); } .ds-k.is-root { color: var(--mist); }
.ds-b { color: #6F8797; font-size: 11.5px; }
.ds-v.is-str { color: var(--seaglass); } .ds-v.is-num { color: #F2A0C4; } .ds-v.is-bool, .ds-v.is-null { color: var(--dusk); }
.ds-more { margin: 4px 0 4px 14px; }
.ds-scroll { overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.ds-tbl { width: 100%; border-collapse: collapse; font: 400 13px/1.4 var(--sans); color: var(--body); font-variant-numeric: tabular-nums; }
.ds-tbl th { position: sticky; top: 0; padding: 0; background: var(--deep); text-align: left; white-space: nowrap; }
.ds-tbl th button { width: 100%; padding: 8px 10px; border: 0; background: none; color: var(--mist); font: 600 11px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; text-align: left; cursor: pointer; }
.ds-tbl th button:hover { color: var(--foam); }
.ds-tbl td { padding: 6px 10px; border-top: 1px solid var(--line); white-space: nowrap; }
.ds-tbl .ds-ix { width: 1%; padding: 6px 10px; color: #557083; font: 500 12px var(--mono); }
.ds-tbl td.is-str { color: var(--seaglass); } .ds-tbl td.is-num { color: #F2A0C4; text-align: right; } .ds-tbl td.is-bool, .ds-tbl td.is-null { color: var(--dusk); }
.ds-tbl td.is-arr, .ds-tbl td.is-obj { color: var(--mist); font-family: var(--mono); font-size: 12px; }
.ds-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px 0; }
.ds-opts:empty { display: none; }
.ds-opt { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px var(--sans); color: var(--mist); }
.ds-opts .g-seg button { font-size: 12px; padding: 4px 10px; }
.ds-out { flex: 1 1 auto; min-height: 0; margin: 10px 12px; padding: 10px 12px; border-radius: 10px; background: var(--trench); color: var(--body); font: 400 12.5px/1.7 var(--mono); white-space: pre; overflow: auto; tab-size: 4; }
.ds-dim { color: var(--mist); font-family: var(--sans); }
.ds-cnote { margin: 0; padding: 9px 12px; border-top: 1px solid var(--line); font: 400 12.5px/1.45 var(--sans); color: var(--mist); }
.ds-cnote:empty { display: none; }
.ds-qcard { border: 1px solid var(--line); border-radius: 12px; background: var(--deep); }
.ds-qh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.ds-qh .g-seg button { font-size: 12.5px; }
.ds-q { flex: 0 1 520px; min-width: 200px; padding: 8px 12px; border: 1px solid rgba(238,244,246,.22); border-radius: 9px; background: var(--abyss); color: var(--foam); font: 500 13.5px var(--mono); }
.ds-q:focus { outline: none; border-color: var(--sea); }
.ds-qn { display: inline-flex; align-items: center; gap: 6px; font: 500 13px var(--sans); color: var(--mist); }
.ds-qn:has(.is-ok) { color: var(--seaglass); }
.ds-qn:has(.is-bad) { color: var(--coral); }
.ds-qres { padding: 12px 14px; }
.ds-qres .ds-note { margin: 0; }
.ds-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ds-chip { padding: 4px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--tide); color: var(--body); font: 500 12.5px var(--mono); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-chip:hover { border-color: var(--sea); color: var(--sea); }
.ds-qfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
@media (min-width: 900px) {
  html.tool-full .tool-box.ds, html.tool-full .ds-ed { display: flex; flex-direction: column; }
  html.tool-full .ds-ed { flex: 1 1 auto; min-height: 0; }
  html.tool-full .ds-panes { flex: 1 1 0; min-height: 260px; height: auto; }
  html.tool-full .ds-grip { visibility: hidden; height: 12px; margin: 0; }
}
@media (max-width: 899px) {
  .ds-panes { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: none; height: auto; gap: 12px; }
  .ds-split { display: none; }
  .ds-in { height: 380px; flex: none; }
  .ds-view { max-height: 460px; }
  .ds-out { max-height: 420px; }
  .ds-grip { display: none; }
  .ds-qcard { margin-top: 12px; }
}