/*! © 2026 Cengiz Ilerler. All rights reserved. https://cengiz.ilerler.info/ */
.tool-box.up { width: 100%; }
.up-views { margin: 0 0 22px; }
.up-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px 36px; align-items: start; }
.up-right:empty { display: none; }
.up-right .up-sec { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 900px) { .up-top { grid-template-columns: minmax(0, 1fr); } .up-right .up-sec { margin-top: 8px; } }
.up-left > .tool-h { margin-bottom: 12px; }
.up-acts { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.up .tool-h { flex-wrap: wrap; }
.up-in { min-height: 0; word-break: break-all; }
#up-in { min-height: 100px; }
.up [data-up-chg] .pill-sm { margin-left: 2px; }
.up-parts { margin-top: 6px; gap: 12px; }
.up-parts dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.up-parts code { font: 500 14px/1.5 var(--mono); color: var(--foam); overflow-wrap: anywhere; word-break: break-all; }
.up-mask { letter-spacing: .14em; }
.up-mist { font: 400 14px/1.5 var(--sans); color: var(--mist); }
.up-segs { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.up-segs span { padding: 3px 9px; border-radius: 6px; background: var(--tide); font: 400 13px/1.4 var(--mono); color: var(--body); }
.up-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border: 1px solid var(--hair-3); border-radius: 999px; font: 600 11px/1 var(--sans); letter-spacing: .04em; color: var(--mist); white-space: nowrap; }
.up-tag.is-sea { border-color: var(--sea); color: var(--sea); }
.up-tag.is-amber { border-color: var(--amber); color: var(--amber); }
.up-tag.is-bad { border-color: var(--coral); color: var(--coral); }
.up-n { font-weight: 500; letter-spacing: .06em; text-transform: none; }
.up-sp { display: inline-flex; align-items: center; gap: 8px; }
.up-spl { font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mist); }
.up-sp .g-seg button { min-width: 34px; padding: 6px 10px; font-family: var(--mono); }
.up-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.up-row { display: grid; grid-template-columns: 22px minmax(110px, 1fr) 12px minmax(160px, 2.2fr) auto; grid-template-areas: "on k eq v ctl" ". tags tags tags tags"; align-items: center; gap: 6px 10px; }
.up-on { grid-area: on; width: 18px; height: 18px; margin: 0; accent-color: var(--seaglass); cursor: pointer; }
.up-k { grid-area: k; }
.up-v { grid-area: v; }
.up-eq { grid-area: eq; text-align: center; font: 500 15px/1 var(--mono); color: var(--mist); }
.up-ctl { grid-area: ctl; display: inline-flex; gap: 4px; }
.up-tags { grid-area: tags; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.up-tags[hidden] { display: none; }
.up-k, .up-v { width: 100%; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid rgba(238, 244, 246, .22); border-radius: 8px; background: var(--abyss); color: var(--foam); font: 400 14px/1 var(--mono); outline: none; }
.up-k { color: var(--sea); }
.up-k:focus, .up-v:focus { border-color: var(--sea); }
.up-k::placeholder, .up-v::placeholder { color: var(--mist); opacity: .7; }
@media (pointer: coarse) { .up-k, .up-v { font-size: 16px; } }
.up-row.is-off .up-k, .up-row.is-off .up-v, .up-row.is-off .up-eq { opacity: .45; text-decoration: line-through; }
.up-b { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--mist); cursor: pointer; }
.up-b:hover { border-color: var(--sea); color: var(--sea); }
.up-b:disabled { opacity: .3; cursor: default; pointer-events: none; }
.up-b svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.up-say { font: 400 13px/1.45 var(--sans); color: var(--body); }
.up-tags .pill-sm { height: 26px; padding: 0 10px; font-size: 12px; }
a.up-a { display: inline-flex; align-items: center; text-decoration: none; }
.up-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--hair); font: 500 14px/1.3 var(--sans); color: var(--mist); }
.up-crumb { padding: 0; border: 0; background: none; font: inherit; color: var(--sea); cursor: pointer; }
.up-crumb:hover { text-decoration: underline; }
.up-crumb.is-here { color: var(--foam); font-family: var(--mono); }
.up-back { margin-left: auto; }
.up-inner { margin-top: 14px; }
.up-inner .tool-l { display: block; margin-bottom: 8px; }
.up-key { font: 500 13px/1 var(--mono); letter-spacing: 0; text-transform: none; color: var(--sea); }
.up-cin { min-height: 88px; }
.up-inner .tool-text { min-height: 76px; }
.up-inner .tool-hint { margin: 8px 0 0; }
[data-up-level] > .tool-msg:first-child { margin-top: 14px; }
.up-cset { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 14px 0 18px; }
.up-plus { display: inline-flex; align-items: center; gap: 8px; font: 400 14px/1 var(--sans); color: var(--body); cursor: pointer; }
.up-plus input { width: 16px; height: 16px; margin: 0; accent-color: var(--seaglass); }
.up-plus[hidden] { display: none; }
.up-cout { min-height: 54px; margin-top: 6px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--tide); }
.up-cout code { font: 400 15px/1.55 var(--mono); color: var(--foam); white-space: pre-wrap; word-break: break-all; }
@media (max-width: 640px) {
  .up-row { grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "on k ctl" ". v v" ". tags tags"; }
  .up-eq { display: none; }
  .up-acts { justify-content: flex-start; }
}