/*! © 2026 Cengiz Ilerler. All rights reserved. https://cengiz.ilerler.info/ */
.tool-box.df { width: 100%; --del: rgba(225,127,107,.13); --del-s: rgba(225,127,107,.42); --add: rgba(122,204,158,.12); --add-s: rgba(122,204,158,.40);
  --min: rgba(94,151,208,.24); --min-s: rgba(94,151,208,.6); --mov: rgba(202,179,246,.10); --row: 22px; --cols: minmax(0, var(--fl, 1fr)) 44px minmax(0, var(--fr, 1fr)) 14px; }
.df-tb { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.df-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.df-row .tool-l { width: auto; margin-right: -2px; }
.df-gap { flex: 1 1 auto; }
.df .g-seg button { white-space: nowrap; }
.df-p { height: 36px; padding: 0 14px; white-space: nowrap; }
.df-p svg { width: 13px; height: 13px; margin-left: 6px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -1px; }
.df-pn { margin-left: 6px; font: 600 11px/1 var(--mono); color: var(--amber); }
.df-pn:empty { display: none; }
.df-ib { height: 36px; min-width: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0; border: 1px solid var(--hair-3); border-radius: 999px; background: transparent; color: var(--foam); cursor: pointer; }
.df-ib:hover:not(:disabled) { border-color: var(--sea); color: var(--sea); }
.df-ib[aria-pressed="true"] { border-color: var(--foam); background: var(--foam); color: var(--abyss); }
.df-ib[aria-pressed="true"]:hover { color: var(--abyss); }
.df-ib:disabled { opacity: .35; cursor: default; }
.df-ib[hidden] { display: none; }
.df-ib > svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.df-ibn { padding: 0 11px; }
.df-ibn > svg + svg { width: 13px; height: 13px; margin-left: -1px; stroke-width: 2; }
.df-ibn .df-pn { margin-left: 0; }
.df-iseg { flex-wrap: nowrap; }
.df .df-iseg button { min-width: 0; width: 40px; height: 28px; padding: 0; display: inline-grid; place-items: center; }
.df .df-iseg button[hidden] { display: none; }
.df-iseg svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.df-iseg svg .dot { stroke-width: 2; }
.df-sep { flex: none; width: 1px; height: 24px; background: var(--hair-2); }
.df-erow, .df.is-edit .df-r1 { display: none; }
.df.is-edit .df-erow { display: flex; }
.df-eh { font: 400 14px/1.4 var(--sans); color: var(--mist); }
.df-compare { height: 40px; }
.df-msg { margin: 0; font: 400 13.5px/1.45 var(--sans); color: var(--mist); }
.df-msg.is-bad { color: var(--coral); }
.df-msg[hidden] { display: none; }
.df-tb .df-r1 { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "sum tools dl"; align-items: center; gap: 10px 12px; margin-right: 14px; }
.df-tools { grid-area: tools; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 12px; }
.df-r1 > [data-df-dl] { grid-area: dl; }
.df-sum { grid-area: sum; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
@media (max-width: 899px) { .df-tb .df-r1 { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tools dl" "sum sum"; } }
.df-sum span { height: 26px; padding: 0 10px; display: inline-flex; align-items: center; vertical-align: middle; border-radius: 999px; font: 500 12px/1 var(--mono); white-space: nowrap; }
.df-sum .a { background: var(--add); color: var(--seaglass); } .df-sum .d { background: var(--del); color: var(--coral); }
.df-sum .c { box-shadow: inset 0 0 0 1px var(--hair-3); color: var(--mist); } .df-sum .m { background: var(--min); color: #9DC3EA; }
.df-sum .mv { box-shadow: inset 0 0 0 1px rgba(202,179,246,.55); color: var(--dusk); }
.df-sum .same { height: auto; min-height: 26px; padding: 0; font: 400 13.5px/1.35 var(--sans); color: var(--seaglass); white-space: normal; }
.df-sw { width: 40px; height: 22px; flex: none; border-radius: 99px; border: 0; padding: 2px; background: var(--foam); cursor: pointer; display: inline-flex; justify-content: flex-end; }
.df-sw::after { content: ""; width: 18px; height: 18px; border-radius: 99px; background: var(--abyss); }
.df-sw[aria-pressed="false"] { justify-content: flex-start; background: var(--tide); box-shadow: inset 0 0 0 1px var(--hair-3); }
.df-sw[aria-pressed="false"]::after { background: var(--mist); }
.df .is-off { opacity: .4; pointer-events: none; }
.df-fmtw { position: relative; display: inline-flex; }
.df-menu { position: absolute; z-index: 30; top: 44px; right: 0; width: 260px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--deep); box-shadow: 0 18px 40px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 2px; }
.df-menu[hidden] { display: none; }
.df-mrow { display: flex; align-items: center; gap: 10px; padding: 6px 8px; font: 400 13.5px/1.3 var(--sans); color: var(--body); }
.df-mrow .tool-l { font-size: 10.5px; letter-spacing: .14em; }
.df-msort { padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--hair); cursor: pointer; }
.df-menu > button { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border: 0; border-radius: 9px; background: none; color: var(--foam); font: 500 14px/1.2 var(--sans); text-align: left; cursor: pointer; }
.df-menu > button:hover, .df-menu > button:focus-visible { background: rgba(98,207,224,.10); color: var(--sea); }
.df-sel { position: relative; display: inline-flex; flex: 1; min-width: 0; }
.df-selb { width: 100%; height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px 0 12px; border: 1px solid var(--hair-3); border-radius: 999px; background: transparent; color: var(--foam); font: 500 13px/1 var(--sans); text-align: left; cursor: pointer; }
.df-selb:hover, .df-selb[aria-expanded="true"] { border-color: var(--sea); }
.df-selb > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-selb > svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--mist); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.df-selb[aria-expanded="true"] > svg { transform: rotate(180deg); }
.df-opts { position: absolute; z-index: 2; top: 38px; left: 0; right: 0; display: flex; flex-direction: column; gap: 2px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--deep); box-shadow: 0 18px 40px rgba(0,0,0,.55); }
.df-opts[hidden] { display: none; }
.df-opts button { min-height: 32px; padding: 7px 10px; border: 0; border-radius: 8px; background: none; color: var(--foam); font: 500 13.5px/1.2 var(--sans); text-align: left; cursor: pointer; }
.df-opts button:hover, .df-opts button:focus-visible { outline: none; background: rgba(98,207,224,.10); color: var(--sea); }
.df-opts button[aria-selected="true"] { background: var(--foam); color: var(--abyss); }
.df-files { display: grid; grid-template-columns: var(--cols); margin-bottom: 0; }
.df-file { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; min-width: 0; padding: 8px 10px 0 14px; border: 1px solid var(--line); border-radius: 10px 10px 0 0; background: var(--tide); }
.df-file .df-nm { flex: 1 1 0; min-width: 0; height: 36px; display: flex; align-items: center; font: 500 14px/18px var(--mono); color: var(--foam); }
.df-nm > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.df-stat { flex: 0 0 calc(100% + 24px); display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 30px; margin: 8px -10px 0 -14px; padding: 0 14px; border-top: 1px solid var(--hair); }
.df-file small { font: 400 12px/1.3 var(--sans); color: var(--mist); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.df-file small button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline dotted rgba(169,188,200,.5); text-underline-offset: 3px; }
.df-file small button:hover { color: var(--sea); }
.df-pos { flex: none; width: calc(16ch + 11px); height: 14px; padding-right: 10px; border-right: 1px solid var(--hair-2); overflow: hidden;
  font: 500 12px/14px var(--mono); font-variant-numeric: tabular-nums; color: var(--foam); white-space: nowrap; }
.df-pos.is-dim { color: rgba(169,188,200,.55); }
.df-acts { display: inline-flex; gap: 4px; flex: none; }
.df-fa { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; padding: 0; border: 1px solid var(--hair-3); border-radius: 999px; background: none; color: var(--foam); cursor: pointer; }
.df-fa.is-done { border-color: var(--seaglass); color: var(--seaglass); }
.df-fa:hover { border-color: var(--sea); color: var(--sea); }
.df-fa[hidden] { display: none; }
.df-fa svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.df-swap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.df-swap button { width: 28px; height: 28px; flex: none; display: grid; place-items: center; padding: 0; border-radius: 999px; border: 0; background: var(--tide); color: var(--foam); cursor: pointer; }
.df-swap button:hover:not(:disabled) { color: var(--sea); }
.df-swap button[aria-pressed="true"] { background: var(--foam); color: var(--abyss); }
.df-swap button:disabled { opacity: .35; cursor: default; }
.df-swap svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.df-file { align-content: space-between; }
.df.is-drop .df-file { border-color: var(--sea); }
.df-rulers { display: grid; grid-template-columns: var(--cols); }
.df-dr { display: flex; height: 24px; border: 1px solid var(--line); border-top: 0; border-bottom: 0; background: var(--deep); font: 400 13px/24px var(--mono); }
.df-dr-no { flex: none; width: 44px; padding-right: 8px; text-align: right; font: 600 9.5px/24px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(169,188,200,.5); }
.df-dr-clip { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.df-rin { position: relative; height: 100%; width: 1000ch;
  background: linear-gradient(to right, rgba(169,188,200,.32) 1px, transparent 1px) .5ch 100% / 1ch 4px repeat-x,
              linear-gradient(to right, rgba(169,188,200,.5) 1px, transparent 1px) 4.5ch 100% / 5ch 8px repeat-x,
              linear-gradient(to right, rgba(169,188,200,.75) 1px, transparent 1px) 9.5ch 100% / 10ch 12px repeat-x; }
.df-rin b { position: absolute; top: 0; width: 0; display: flex; justify-content: center; font-weight: 400; }
.df-rin b i { font: 500 10px/15px var(--mono); font-style: normal; color: var(--mist); }
.df-rin .df-at { position: absolute; top: 0; bottom: 0; width: 1ch; background: rgba(98,207,224,.16); box-shadow: inset 0 -2px 0 var(--sea); }
.df-rin .df-at[hidden] { display: none; }
.df.is-wrap .df-rulers, .df.is-one .df-rulers, .df.is-table .df-rulers { display: none; }
.df-view { position: relative; display: grid; grid-template-columns: var(--cols); height: max(360px, calc(100vh - 230px)); overflow: hidden; border: 1px solid var(--line); background: var(--abyss); }
.df-pane { position: relative; min-width: 0; overflow: auto; font-family: var(--mono); font-size: 13px; line-height: var(--row); tab-size: 4; scrollbar-width: thin; scrollbar-color: rgba(169,188,200,.35) transparent; }
.df-pane:focus { outline: none; }
.df-pane:focus-visible { outline: 1px solid var(--sea); outline-offset: -1px; }
.df-pane > .df-rows { display: grid; grid-template-columns: minmax(100%, max-content); align-content: start; padding-bottom: 8px; }
.df-l { --tint: transparent; position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); min-height: var(--row); background: var(--tint); }
.df-l .df-no { position: sticky; left: 0; z-index: 1; padding-right: 10px; text-align: right; color: rgba(169,188,200,.55); user-select: none; background: linear-gradient(var(--tint), var(--tint)), var(--abyss); }
.df-l .df-t { white-space: pre; color: var(--body); padding-right: 14px; }
.df-l.is-del { --tint: var(--del); } .df-l.is-add { --tint: var(--add); } .df-l.is-minor { --tint: var(--min); } .df-l.is-moved { --tint: var(--mov); }
.df-l.is-del .df-no, .df-l.is-add .df-no { color: var(--mist); }
.df-l.is-gap { background: repeating-linear-gradient(135deg, rgba(238,244,246,.035) 0 6px, transparent 6px 12px); }
.df-l.is-gap .df-no { background: transparent; }
.df-l.is-cur .df-no { box-shadow: inset 2px 0 0 var(--foam); }
.df-l.is-moved .df-no { color: var(--dusk); box-shadow: inset 2px 0 0 var(--dusk); }
.df-l.is-focus .df-t { box-shadow: inset 0 0 0 1px rgba(238,244,246,.18); }
.df mark { color: var(--foam); border-radius: 2px; }
.df mark.df-d { background: var(--del-s); } .df mark.df-a { background: var(--add-s); } .df mark.df-m { background: var(--min-s); }
.df mark.df-f { background: color-mix(in srgb, var(--dusk) 55%, var(--abyss)); }
.df mark.df-f.is-cur { background: var(--amber); color: var(--abyss); }
.df-fold { height: 30px; display: flex; align-items: center; border-block: 1px dashed var(--hair-2); background: rgba(238,244,246,.03); font: 400 12px/1 var(--sans); color: var(--mist); cursor: pointer; }
.df-fold:hover { color: var(--sea); }
.df-fold span { position: sticky; left: 0; display: block; width: var(--pw, 100%); text-align: center; }
.df-mv { margin-left: 14px; vertical-align: 1px; height: 18px; padding: 0 8px; border: 1px solid rgba(202,179,246,.55); border-radius: 999px; background: var(--abyss); color: var(--dusk); font: 500 11px/16px var(--sans); cursor: pointer; }
.df-mv:hover { border-color: var(--sea); color: var(--sea); }
.df-ws { color: rgba(169,188,200,.42); }
.df-eol { display: inline-block; margin-left: 8px; padding: 0 4px; border-radius: 3px; font: 600 9px/14px var(--mono); letter-spacing: .04em; color: rgba(169,188,200,.6); box-shadow: inset 0 0 0 1px rgba(169,188,200,.28); vertical-align: 1px; }
.df-mid { position: relative; overflow: hidden; border-inline: 1px solid var(--line); background: linear-gradient(var(--hair-3), var(--hair-3)) 50% 0 / 1px 100% no-repeat, var(--deep); cursor: col-resize; touch-action: none; }
.df-mid:hover:not(:has(button:hover)), .df.is-splitting .df-mid { background-image: linear-gradient(var(--sea), var(--sea)); }
.df.is-splitting, .df.is-splitting * { cursor: col-resize !important; user-select: none; }
.df-split { position: relative; display: block; cursor: col-resize; touch-action: none; outline: none; border-radius: 6px; }
.df-split::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 50%; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--hair-3); }
.df-split:hover::before, .df.is-splitting .df-split::before, .df-split:focus-visible::before { background: var(--sea); }
.df-split:focus-visible { box-shadow: inset 0 0 0 1px rgba(98,207,224,.55); }
.df-mid-in { position: absolute; left: 0; right: 0; top: 0; }
.df-mid-in > div { position: absolute; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.df-mid button { width: 30px; height: 20px; padding: 0; border: 0; border-radius: 6px; background: var(--tide); color: var(--foam); font: 500 14px/1 var(--sans); cursor: pointer; }
.df-mid button:hover { color: var(--abyss); background: var(--sea); }
.df-map { position: relative; overflow: hidden; background: var(--deep); border-left: 1px solid var(--line); cursor: pointer; }
.df-map i { position: absolute; left: 2px; right: 2px; min-height: 2px; border-radius: 1px; }
.df-map .df-vp { position: absolute; left: 0; right: 0; top: 0; border: 1px solid rgba(238,244,246,.45); background: rgba(238,244,246,.06); pointer-events: none; }
.df.is-one .df-view, .df.is-one .df-files { grid-template-columns: minmax(0, 1fr) 14px; }
.df.is-one [data-df-right], .df.is-one .df-mid { display: none; }
.df.is-one .df-l { grid-template-columns: 44px 44px minmax(0, 1fr); }
.df.is-one .df-l .df-no + .df-no { left: 44px; }
.df.is-one .df-files { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); }
.df.is-wrap .df-pane > .df-rows { grid-template-columns: minmax(0, 1fr); }
.df.is-wrap .df-l .df-t { white-space: pre-wrap; overflow-wrap: anywhere; }
.df-grip { display: grid; grid-template-columns: minmax(0, var(--fl, 1fr)) 44px minmax(0, var(--fr, 1fr)); margin-right: 14px; position: relative; height: 14px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; background: var(--deep); cursor: ns-resize; touch-action: none; outline: none; }
.df-grip::before { content: ""; grid-column: 2 / 3; position: absolute; left: 50%; top: 4px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--hair-3); }
.df-grip::after { content: ""; grid-column: 1 / -1; position: absolute; left: 0; right: 0; top: 0; bottom: -19px; }
.df-grip:hover::before, .df.is-sizing .df-grip::before, .df-grip:focus-visible::before { background: var(--sea); }
.df-grip:focus-visible { border-color: rgba(98,207,224,.55); }
.df.is-sizing, .df.is-sizing * { cursor: ns-resize !important; -webkit-user-select: none; user-select: none; }
.df-view.is-empty::after { content: attr(data-empty); position: absolute; inset: 0; display: grid; place-items: center; font: 400 15px/1.4 var(--sans); color: var(--mist); pointer-events: none; }
.df-det { margin-right: 14px; border: 1px solid var(--line); border-top: 0; background: var(--deep); font-family: var(--mono); font-size: 13px; line-height: var(--row); tab-size: 4; }
.df-det .df-l:not(.is-gap) .df-no { background: linear-gradient(var(--tint), var(--tint)), var(--deep); }
.df-det .df-l .df-t { white-space: pre-wrap; overflow-wrap: anywhere; }
.df.is-wrap .df-det, .df.is-table .df-det { display: none; }
.df-edit { display: grid; grid-template-columns: var(--cols); }
.df-edit[hidden] { display: none; }
.df.is-edit .df-view, .df.is-edit .df-det, .df.is-edit .df-rulers, .df.is-edit .df-grip { display: none; }
.df-ed { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-top: 0; background: var(--abyss); }
.df-ed:focus-within { border-color: rgba(98,207,224,.55); }
.df-ed-ruler { position: relative; height: 24px; overflow: hidden; padding-left: 50px; border-bottom: 1px solid var(--line); background: var(--deep); font: 400 13px/24px var(--mono); }
.df-ed-ruler .df-rin { margin-left: 14px; }
.df-ed-body { position: relative; display: flex; height: max(360px, calc(100vh - 260px)); }
.df-ed-gut { flex: none; width: 50px; overflow: hidden; border-right: 1px solid var(--line); }
.df-ed-gut > div { padding: 8px 10px 8px 0; text-align: right; font: 400 12.5px/22px var(--mono); color: rgba(169,188,200,.55); white-space: pre; }
.df-ed-gut .on { color: var(--foam); }
.df-ed-area { position: relative; flex: 1; min-width: 0; }
.df-ed-cur { position: absolute; left: 0; right: 0; height: 22px; background: rgba(238,244,246,.045); pointer-events: none; }
.df-ed-cur[hidden] { display: none; }
.df-ed-area textarea { position: absolute; inset: 0; width: 100%; height: 100%; resize: none; padding: 8px 14px; border: 0; background: transparent; color: var(--foam); caret-color: var(--sea); font: 400 13px/22px var(--mono); white-space: pre; overflow: auto; tab-size: 4; outline: none; }
.df-ed-area textarea::placeholder { color: rgba(169,188,200,.55); font-family: var(--sans); }
.df-find { position: absolute; top: 8px; right: 26px; z-index: 5; display: flex; gap: 6px; padding: 6px 8px 6px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--deep); box-shadow: 0 12px 30px rgba(0,0,0,.45); font-family: var(--sans); }
.df-find[hidden] { display: none; }
.df-find[data-at="r"] { right: auto; left: 12px; }
.df-find[data-at="b"] { right: auto; left: calc(50% - 7px); transform: translateX(-50%); }
.df-chev { width: 22px; border: 0; border-radius: 6px; background: none; color: var(--mist); cursor: pointer; display: grid; place-items: center; }
.df-chev svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; transform: rotate(-90deg); }
.df-chev[aria-expanded="true"] svg { transform: none; }
.df-frows { display: flex; flex-direction: column; gap: 6px; }
.df-fr { display: flex; align-items: center; gap: 6px; }
.df-fr[hidden] { display: none; }
.df-find .df-frows { width: 538px; }
.df-fin { display: flex; align-items: center; width: 334px; height: 30px; padding: 0 3px 0 10px; border: 1px solid var(--hair-3); border-radius: 8px; background: var(--abyss); }
.df-fr:first-child > .df-fin { flex: 1 1 0; width: auto; min-width: 0; }
.df-fin:focus-within { border-color: var(--sea); }
.df-fin input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--foam); font: 500 13px/1 var(--mono); outline: none; }
.df-tg { display: inline-flex; gap: 2px; flex: none; }
.df-tg button { height: 22px; min-width: 24px; padding: 0 4px; border: 0; border-radius: 5px; background: none; color: var(--mist); font: 600 11.5px/1 var(--mono); cursor: pointer; }
.df-tg button:hover { color: var(--sea); }
.df-tg button[aria-pressed="true"] { background: var(--foam); color: var(--abyss); }
.df-ab { position: relative; display: inline-block; padding: 0 2px 1px; line-height: 1; }
.df-ab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 4px; border: 1.4px solid currentColor; border-top: 0; border-radius: 0 0 1px 1px; }
.df-cnt { flex: none; font: 500 12px/1 var(--mono); color: var(--mist); white-space: nowrap; }
.df-cnt:empty { display: none; }
.df-cnt.is-none { color: var(--coral); }
.df-fib { width: 28px; height: 28px; border: 0; border-radius: 7px; background: none; color: var(--foam); cursor: pointer; display: grid; place-items: center; }
.df-fib:hover { color: var(--sea); }
.df-fib svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.df-fib[data-df-rone] svg, .df-fib[data-df-rall] svg { width: 18px; height: 18px; stroke-width: 1.6; }
.df-fx { margin-left: auto; }
.df-find .df-iseg { padding: 2px; }
.df .df-find .df-iseg button { width: 30px; height: 24px; }
.df-find .df-iseg svg { width: 16px; height: 16px; }
.df-find .df-iseg svg .on { fill: currentColor; }
.df-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: rgba(4,11,17,.72); }
.df-modal[hidden] { display: none; }
.df-dlg { width: min(940px, 100%); max-height: calc(100vh - 48px); overflow: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--deep); box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.df-dlg-h { display: flex; align-items: center; gap: 12px; padding: 18px 20px 4px 22px; }
.df-dlg-h h2 { margin: 0; font: 400 26px/1.1 var(--serif); color: var(--foam); }
.df-x { width: 36px; height: 36px; flex: none; margin-left: auto; display: grid; place-items: center; border: 1px solid var(--hair-3); border-radius: 50%; background: none; color: var(--foam); cursor: pointer; }
.df-x:hover { border-color: var(--sea); color: var(--sea); }
.df-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.df-rtabs { margin: 0 22px; }
.df-panel { padding: 16px 22px 20px; min-height: 250px; }
.df-panel[hidden] { display: none; }
.df-rh { margin: 0 0 4px; font: 600 11px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--mist); }
.df-rp { margin: 0 0 12px; font: 400 13px/1.45 var(--sans); color: var(--mist); }
.df-panel.df-ign { min-height: 0; }
.df-ign-top { display: grid; grid-template-columns: minmax(0, auto) minmax(240px, 1fr); gap: 16px 40px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.df-ign-c2 { padding-left: 32px; border-left: 1px solid var(--line); }
.df-ign-g { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 20px; align-items: center; margin-top: 10px; }
.df-ign-k { font: 500 13.5px/1.3 var(--sans); color: var(--mist); }
.df-ign-b { display: flex; flex-wrap: wrap; gap: 8px; }
.df-ign-sw { display: flex; align-items: center; gap: 12px; margin-top: 14px; font: 400 14px/1.35 var(--sans); color: var(--body); cursor: pointer; }
.df-info { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; margin-left: 2px; border: 1px solid var(--hair-3); border-radius: 50%; font: 600 10px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--mist); cursor: help; }
.df-rh .df-info { margin-left: 8px; vertical-align: 1px; }
.df-rh-own { margin: 18px 0 12px; }
.df-rl { display: flex; flex-direction: column; gap: 8px; }
.df-rf { display: flex; align-items: center; gap: 8px; }
.df-rl ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.df-rl li { display: flex; align-items: center; gap: 8px; }
.df-box { flex: 1; display: flex; align-items: center; min-width: 0; height: 38px; padding: 0 4px 0 12px; border: 1px solid var(--hair-3); border-radius: 10px; background: var(--abyss); }
.df-box:focus-within { border-color: var(--sea); }
.df-box input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--foam); font: 500 13px/1 var(--mono); outline: none; }
.df-box input::placeholder { color: rgba(169,188,200,.6); font-family: var(--sans); }
.df-box .df-tg button, .df-box .df-tg span { height: 26px; min-width: 28px; display: inline-grid; place-items: center; }
.df-box .df-tg span { padding: 0 4px; border-radius: 5px; color: var(--mist); font: 600 11.5px/1 var(--mono); }
.df-box .df-tg span.on { background: var(--foam); color: var(--abyss); }
.df-rl li .df-box { border-color: transparent; background: var(--tide); }
.df-rl li code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13px/1.3 var(--mono); color: var(--foam); }
.df-rl li .df-rm { width: 36px; height: 36px; border-color: transparent; color: var(--mist); }
.df-rl li .df-rm:hover { border-color: var(--sea); color: var(--sea); }
.df-add { width: 38px; height: 38px; }
.df-add > svg { width: 20px; height: 20px; stroke-width: 1.8; }
.df-bad { margin: 0; font: 400 13px/1.4 var(--sans); color: var(--coral); }
.df-bad[hidden] { display: none; }
.df-dir { width: 40px; height: 38px; flex: none; display: grid; place-items: center; border: 1px solid var(--hair-3); border-radius: 10px; background: none; color: var(--foam); cursor: pointer; }
button.df-dir:hover { border-color: var(--sea); color: var(--sea); }
span.df-dir { border-color: transparent; color: var(--mist); cursor: default; }
.df-dir svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.df-dir svg .on { fill: currentColor; }
.df-as { flex: none; color: var(--mist); font: 400 15px/1 var(--sans); }
.df-dlg-f { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); }
.df-done { height: 40px; }
.df-dl { width: min(560px, 100%); }
.df-dl-body { padding: 18px 22px 8px; display: flex; flex-direction: column; gap: 16px; }
.df-dlf { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 12px; }
.df-dlf input { height: 40px; padding: 0 14px; border: 1px solid var(--hair-3); border-radius: 10px; background: var(--abyss); color: var(--foam); font: 400 15px/1 var(--sans); }
.df-dlf input:focus { outline: none; border-color: var(--sea); }
.df-dlf .g-seg { justify-self: start; }
.df-dl-n { margin: 0; font: 400 13px/1.5 var(--sans); color: var(--mist); }
.df-tbl { border-collapse: separate; border-spacing: 0; font: 400 13px/1.4 var(--mono); }
.df-tbl th, .df-tbl td { padding: 4px 12px; border-bottom: 1px solid var(--hair); border-right: 1px solid var(--hair); white-space: pre; text-align: left; vertical-align: top; color: var(--body); }
.df-tbl thead th { position: sticky; top: 0; z-index: 2; background: var(--tide); color: var(--foam); font: 600 12px/1.3 var(--sans); }
.df-tbl .df-tno { position: sticky; left: 0; z-index: 1; min-width: 44px; text-align: right; color: rgba(169,188,200,.55); background: var(--abyss); user-select: none; }
.df-tbl thead .df-tno { z-index: 3; background: var(--tide); }
.df-tbl .df-tside { color: var(--mist); font: 500 11px/1.2 var(--sans); }
.df-tbl tr.is-del td { background: var(--del); } .df-tbl tr.is-add td { background: var(--add); }
.df-tbl tr.is-gap td { background: repeating-linear-gradient(135deg, rgba(238,244,246,.035) 0 6px, transparent 6px 12px); }
.df-tbl td.is-ch { background: var(--del); } .df-tbl td.is-ch + td.is-ch2, .df-tbl td.is-ch2 { background: var(--add); }
.df-tbl td.is-minor { background: var(--min); }
.df-tbl tr.is-moved td:first-child { box-shadow: inset 2px 0 0 var(--dusk); color: var(--dusk); }
.df-tbl th.is-only { background: var(--add); color: var(--seaglass); } .df-tbl th.is-onlyl { background: var(--del); color: var(--coral); }
.df-tbl td.is-colgap, .df-tbl th.is-colgap { background: repeating-linear-gradient(135deg, rgba(238,244,246,.035) 0 6px, transparent 6px 12px); }
.df-tbl th.is-ign, .df-tbl td.is-ign { opacity: .55; }
.df-th { display: inline-flex; align-items: center; gap: 6px; }
.df-th svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.df-thb { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--mist); cursor: pointer; display: inline-grid; place-items: center; opacity: 0; }
.df-tbl th:hover .df-thb, .df-thb:focus-visible, .df-thb[aria-expanded="true"] { opacity: 1; }
.df-thb:hover { color: var(--sea); }
.df-thm { position: absolute; z-index: 40; width: 250px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--deep); box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.df-thm button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--foam); font: 500 13.5px/1.2 var(--sans); text-align: left; cursor: pointer; }
.df-thm button:hover { background: rgba(98,207,224,.10); color: var(--sea); }
.df-thm svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 759px) {
  .df-ign-top { grid-template-columns: minmax(0, 1fr); }
  .df-ign-c2 { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .df-ign-sw { min-height: 32px; }
  .df-row { gap: 10px 8px; }
  .df-tb .df-r1 { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tools dl" "sum sum"; align-items: start; gap: 10px 8px; }
  .df-tb .df-r1 { margin-right: 0; }
  .df-det, .df-grip { margin-right: 0; }
  .df-grip { grid-template-columns: minmax(0, 1fr); }
  .df-grip::before { grid-column: 1 / 2; }
  .df-tools { justify-content: flex-start; gap: 10px 8px; }
  .df-r1 > [data-df-dl] { margin-top: 2px; }
  .df-r1 .df-br { flex: 0 0 100%; width: auto; height: 0; background: none; }
  .df-r1 .df-sep:not(.df-br) { display: none; }
  .df-r1 .df-gap { display: none; }
  .df .df-iseg button { width: 36px; }
  .tool-box.df { --cols: minmax(0, 1fr) 14px; }
  .df-files, .df.is-one .df-files, .df.is-table .df-files { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .df-files > span:last-child { display: none; }
  .df-swap { flex-direction: row; gap: 10px; padding: 6px 0; }
  .df-swap button { width: 36px; height: 36px; }
  .df-swap svg { width: 18px; height: 18px; }
  .df-file { border-radius: 10px; flex-wrap: wrap; }
  .df-acts { margin-left: auto; }
  .df-files .df-file + .df-swap + .df-file { margin-bottom: 8px; }
  .df-view, .df.is-one .df-view { grid-template-columns: minmax(0, 1fr); height: max(320px, calc(100vh - 180px)); border-radius: 10px 10px 0 0; }
  .df-map, .df-mid, [data-df-right] { display: none; }
  .df-edit { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .df-edit > span { display: none; }
  .df-ed { border-top: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
  .df-ed-body { height: 45vh; }
  .df-find, .df-find[data-at] { left: 6px; right: 6px; transform: none; }
  .df-find .df-frows { flex: 1; min-width: 0; width: auto; }
  .df-fin { width: auto; min-width: 0; flex: 1 1 0; height: 38px; }
  .df-fr:first-child .df-fin { flex-basis: calc(100% - 44px); }
  .df-fr { flex-wrap: wrap; }
  .df-fr > .df-cnt, .df-fr > .df-fnav, .df-fr > .df-iseg { order: 2; }
  .df-fx { order: 1; }
  .df-cnt { min-width: 0; }
  .df-fib { width: 32px; height: 32px; }
  .df-fin .df-tg button { height: 32px; min-width: 32px; }
  .df .df-find .df-iseg button { width: 32px; height: 32px; }
  .df-chev { width: 32px; }
  .df .df-iseg button { height: 32px; }
  .df-stat { align-items: flex-start; }
  .df-pos { margin-top: 9px; }
  .df-file .df-stat small { white-space: normal; overflow: visible; line-height: 20px; padding: 6px 0; }
  .df-file small button { display: inline-block; padding: 6px 0; margin: -6px 0; }
  .df-rf { flex-wrap: wrap; }
  .df-dlg .g-seg button { min-height: 32px; }
  .df-rf .df-box { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .df-chev svg, .df-selb > svg { transition: none; } }
.df-alert { width: min(460px, calc(100vw - 32px)); }
.df-al-p { margin: 0; padding: 8px 22px 20px; font: 400 15px/1.55 var(--sans); color: var(--body); overflow-wrap: anywhere; }
.df-al-p b { color: var(--foam); font-weight: 500; }
.df-alert .df-dlg-f { display: flex; justify-content: flex-end; gap: 10px; }
.df-al-open[hidden] { display: none; }