/* =========================================================
   KitTheme — Design mode
   ---------------------------------------------------------
   Styles for the design workspace (design-editor.js, design-canvas.js):
   the mode switch, the left design panel and its tabs, the artwork view
   with its overlay, and the design inspector. Everything reuses the
   editor's own variables from kittheme.css. The artwork the user designs
   never styles the editor: panels stay charcoal whatever the kit looks
   like.
   ========================================================= */

/* ---- mode switch and save state (header) ----
   Liquid glass (liquid-glass.css): the switch is a glass track whose
   segments paint nothing of their own until chosen. */
.kt-mode {
  display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--lg-edge); border-radius: 8px; background: var(--lg-fill);
  box-shadow: var(--lg-shadow); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
}
.kt-mode-btn {
  border: 0; border-radius: 6px; background: transparent; color: var(--kt-muted);
  padding: 4px 12px; height: 26px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background-color .14s, color .14s, box-shadow .14s;
}
.kt-mode-btn:hover { color: var(--kt-text); }
.kt-mode-btn.is-active { background: var(--lg-fill-hover); color: var(--kt-text); box-shadow: var(--lg-shadow-clear); }
/* A status that is only a button when saving failed: clear glass, which
   fills and presses only in that state. */
.kt-savestate {
  border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--kt-faint);
  box-shadow: var(--lg-shadow-clear); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  font-size: 12px; padding: 3px 8px; height: 26px; cursor: default; white-space: nowrap;
  transition: background-color .14s, border-color .14s, color .14s, transform .45s var(--lg-spring);
}
.kt-savestate.is-saving, .kt-savestate.is-pending { color: var(--kt-muted); }
.kt-savestate.is-error { color: var(--kt-red); border-color: rgba(239, 99, 99, .4); cursor: pointer; }
.kt-savestate.is-error:hover { background-color: var(--lg-fill-hover); }
.kt-savestate.is-error:active { background-color: var(--lg-fill-press); transform: var(--lg-press); transition-duration: .14s, .14s, .14s, .12s; }

/* Which panes show in which mode */
body.kt-mode-design .kt-folders-only { display: none !important; }
body:not(.kt-mode-design) .kt-design-only { display: none !important; }
/* FL preview controls are irrelevant while editing the artwork canvas. */
body.kt-mode-design.kt-artwork-focused #ktStageBar > :not(#ktDesignStageBar) { display: none; }

/* ---- left design panel ---- */
.kt-design-left { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.kt-design-tabs { display: flex; border-bottom: 1px solid var(--kt-line-soft); padding: 0 6px; flex: none; }
.kt-design-tab {
  flex: 1; border: 0; background: none; color: var(--kt-muted);
  padding: 10px 4px 8px; font-size: 12px; font-weight: 600; letter-spacing: .3px; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.kt-design-tab:hover { color: var(--kt-text); }
.kt-design-tab.is-active { color: var(--kt-text); border-bottom-color: var(--kt-accent); }
.kt-design-panel { padding: 10px 10px 30px; }
.kt-design-panel h3, .kt-dsec-title {
  margin: 12px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--kt-muted);
  display: flex; align-items: center; gap: 6px;
}
.kt-design-panel h3:first-child { margin-top: 2px; }
.kt-dhint { font-size: 12px; color: var(--kt-faint); line-height: 1.45; margin: 4px 0 10px; }
.kt-dempty { color: var(--kt-faint); text-align: center; padding: 26px 10px; font-size: 12.5px; line-height: 1.5; }

/* template gallery */
.kt-tpl-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.kt-tpl-card {
  border: 1px solid var(--kt-line); border-radius: 8px; background: var(--kt-panel-2); overflow: hidden;
  display: flex; flex-direction: column;
}
.kt-tpl-card.is-current { border-color: var(--kt-accent-outline); box-shadow: 0 0 0 1px var(--kt-accent-outline); }
.kt-tpl-thumb { display: block; width: 100%; height: auto; background: #101010; border-bottom: 1px solid var(--kt-line-soft); }
.kt-tpl-body { padding: 8px 10px 9px; }
.kt-tpl-body b { display: block; font-size: 13px; }
.kt-tpl-body small { display: block; color: var(--kt-faint); font-size: 11.5px; line-height: 1.4; margin-top: 2px; }
.kt-tpl-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.kt-tpl-preview-bar {
  position: sticky; top: 0; z-index: 2; margin: -10px -10px 10px; padding: 8px 10px;
  background: var(--kt-accent-soft); border-bottom: 1px solid var(--kt-accent-outline);
  font-size: 12.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.kt-tpl-preview-bar b { flex: 1; }
.kt-palette-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.kt-palette-chip {
  display: inline-flex; gap: 0; border: 1px solid var(--kt-line); border-radius: 6px; overflow: hidden; padding: 0; cursor: pointer; background: none;
  height: 22px; width: 66px;
}
.kt-palette-chip:hover { border-color: var(--kt-faint); }
.kt-palette-chip span { flex: 1; }
.kt-mytheme { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--kt-line-soft); font-size: 13px; }
.kt-mytheme .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-mytheme .kt-linkbtn { padding: 0 3px; }

/* artwork list */
.kt-target-list { display: flex; flex-direction: column; gap: 2px; }
.kt-target {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; border: 1px solid transparent;
  background: none; color: var(--kt-text); font: inherit; text-align: left; cursor: pointer; width: 100%;
}
.kt-target:hover { background: var(--kt-panel-2); }
.kt-target.is-selected { background: var(--kt-accent-soft); border-color: var(--kt-accent-outline); }
.kt-target-thumb {
  flex: none; width: 74px; height: 26px; border-radius: 3px; background:
    repeating-conic-gradient(var(--kt-check-a) 0% 25%, var(--kt-check-b) 0% 50%) 0 0 / 10px 10px;
  display: grid; place-items: center; overflow: hidden;
}
.kt-target-thumb canvas, .kt-target-thumb img { max-width: 100%; max-height: 100%; display: block; }
.kt-target-thumb.is-tall { height: 40px; }
.kt-target-text { flex: 1; min-width: 0; }
.kt-target-text b { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-target-text small { display: block; color: var(--kt-faint); font-size: 11px; }
.kt-target.is-kit .kt-target-thumb { background: var(--kt-panel-2); color: var(--kt-accent); }
.kt-target.is-kit .kt-target-thumb svg { width: 18px; height: 18px; }
.kt-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; background: var(--kt-panel-2); color: var(--kt-muted); border: 1px solid var(--kt-line); }
.kt-tag.own { color: var(--kt-accent); border-color: var(--kt-accent-outline); }
.kt-tag.hidden { color: var(--kt-yellow); }
.kt-tag.detached { color: var(--kt-faint); }

/* layer list */
.kt-layer-tools { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.kt-layer-tools .kt-btn { height: 26px; padding: 0 8px; font-size: 12px; }
.kt-layer-tools .kt-btn svg { width: 13px; height: 13px; }
.kt-layer-list { display: flex; flex-direction: column; gap: 1px; user-select: none; }
.kt-layer {
  display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 5px; min-height: 30px;
  border: 1px solid transparent; cursor: pointer; font-size: 12.5px;
}
.kt-layer:hover { background: var(--kt-panel-2); }
.kt-layer.is-selected { background: var(--kt-accent-soft); border-color: var(--kt-accent-outline); }
.kt-layer.is-hidden .kt-layer-name { color: var(--kt-faint); }
.kt-layer.is-child { margin-left: 18px; }
.kt-layer.kt-drop-before { box-shadow: inset 0 2px 0 var(--kt-accent); }
.kt-layer.kt-drop-after { box-shadow: inset 0 -2px 0 var(--kt-accent); }
.kt-layer-ico { width: 18px; height: 18px; flex: none; display: grid; place-items: center; color: var(--kt-muted); }
.kt-layer-ico svg { width: 14px; height: 14px; }
.kt-layer-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-layer-name input { width: 100%; font: inherit; background: var(--kt-panel-2); border: 1px solid var(--kt-accent); border-radius: 4px; color: var(--kt-text); padding: 1px 4px; }
.kt-layer-btn { width: 22px; height: 22px; border: 0; background: none; color: var(--kt-faint); cursor: pointer; border-radius: 4px; display: grid; place-items: center; padding: 0; }
.kt-layer-btn:hover { color: var(--kt-text); background: var(--kt-line-soft); }
.kt-layer-btn.is-on { color: var(--kt-text); }
.kt-layer-btn svg { width: 13px; height: 13px; }
.kt-layer-warn { color: var(--kt-yellow); font-size: 11px; font-weight: 700; }
/* the Background row: pinned under every layer, not draggable */
.kt-layer.kt-layer-bg { margin-top: 4px; border-top: 1px dashed var(--kt-line); border-radius: 0 0 6px 6px; }
.kt-layer.kt-layer-bg.is-selected { border-top-style: solid; border-radius: 6px; }
.kt-layer-bg .kt-layer-name small { display: block; font-size: 11px; color: var(--kt-faint); overflow: hidden; text-overflow: ellipsis; }
.kt-layer-pin { cursor: default; opacity: .5; }
.kt-layer-pin:hover { background: none; color: var(--kt-faint); }

/* pictures (assets) */
.kt-asset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kt-asset { border: 1px solid var(--kt-line); border-radius: 6px; overflow: hidden; background: var(--kt-panel-2); }
.kt-asset-thumb { height: 64px; display: grid; place-items: center; background: repeating-conic-gradient(var(--kt-check-a) 0% 25%, var(--kt-check-b) 0% 50%) 0 0 / 12px 12px; }
.kt-asset-thumb img { max-width: 100%; max-height: 100%; }
.kt-asset-body { padding: 5px 7px 6px; font-size: 11.5px; }
.kt-asset-body b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.kt-asset-body small { color: var(--kt-faint); display: block; }
.kt-asset-actions { display: flex; flex-wrap: wrap; gap: 2px 6px; margin-top: 3px; }
.kt-asset-actions .kt-linkbtn { padding: 0; font-size: 11.5px; }
.kt-dropzone {
  border: 1px dashed var(--kt-line); border-radius: 8px; padding: 14px 10px; text-align: center; color: var(--kt-faint); font-size: 12px; margin-bottom: 10px;
}
.kt-dropzone.dragover { border-color: var(--kt-accent); color: var(--kt-text); background: var(--kt-accent-soft); }

/* ---- stage bar (design): its own row under the width/zoom controls ---- */
body.kt-mode-design .kt-stage-bar { flex-wrap: wrap; row-gap: 6px; }
.kt-design-stagebar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 100%; order: 10; }
body.kt-mode-design .kt-stage-bar .kt-linkbtn { margin-left: 0; }
/* glass track, clear segments; the chosen one is the brighter glass */
.kt-seg {
  display: inline-flex; padding: 2px; border: 1px solid var(--lg-edge); border-radius: 6px; background: var(--lg-fill); gap: 1px;
  box-shadow: var(--lg-shadow); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
}
.kt-seg button { border: 0; background: transparent; color: var(--kt-muted); padding: 2px 9px; height: 22px; font-size: 12px; border-radius: 4px; cursor: pointer; font-weight: 600; transition: background-color .14s, color .14s, box-shadow .14s; }
.kt-seg button.is-active { background: var(--lg-fill-hover); color: var(--kt-text); box-shadow: var(--lg-shadow-clear); }
.kt-seg button:hover { color: var(--kt-text); }
.kt-design-stagebar .kt-select { width: auto; min-height: 26px; padding: 2px 6px; }
.kt-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--kt-muted); cursor: pointer; white-space: nowrap; }
.kt-toggle input { accent-color: var(--kt-accent); }

/* ---- FL preview in design mode ---- */
body.kt-mode-design .kt-fl-editable .fl-name { cursor: default; }
body.kt-mode-design .kt-fl-editable .fl-item-row:not([data-footer]) { cursor: pointer; }
.kt-design-art img { outline-offset: 2px; }
.fl-item-row.selected + .kt-design-art img, body.kt-mode-design .fl-item-row.selected ~ .fl-bitmap img { outline: 2px solid var(--kt-accent) !important; }
body.kt-mode-design.kt-clean-preview .fl-item-row.selected { background: none; }
body.kt-mode-design.kt-clean-preview .fl-item-row.selected ~ .fl-bitmap img { outline: none !important; }
.kt-design-empty { padding-top: 2px !important; padding-bottom: 4px !important; }
.kt-design-empty-btn {
  font: 600 11px/1.2 var(--kt-font); color: var(--kt-muted); background: none; cursor: pointer;
  border: 1px dashed rgba(150, 150, 150, .5); border-radius: 4px; padding: 3px 8px; height: 22px; width: 148px; text-align: left;
}
.kt-design-empty-btn:hover { color: var(--kt-text); border-color: var(--kt-accent); }
body.kt-clean-preview .kt-design-empty { display: none; }

/* ---- artwork view ---- */
.kt-art-view { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--kt-bg); position: relative; }
.kt-art-scroll { flex: 1; overflow: auto; min-height: 0; }
.kt-art-stage { position: relative; margin: 0 auto; display: inline-block; padding: 40px; }
.kt-art-canvas {
  display: block; box-shadow: 0 16px 44px rgba(0, 0, 0, .4);
  background: repeating-conic-gradient(var(--kt-check-a) 0% 25%, var(--kt-check-b) 0% 50%) 0 0 / 16px 16px;
}
.kt-art-view.no-checker .kt-art-canvas { background: none; }
.kt-art-overlay { position: absolute; left: 40px; top: 40px; overflow: visible; touch-action: none; }
.kt-art-overlay .sel { fill: none; stroke: var(--kt-accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.kt-art-overlay .sel.locked { stroke-dasharray: 4 3; }
.kt-art-overlay .hover { fill: none; stroke: var(--kt-accent); stroke-opacity: .55; stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.kt-art-overlay .handle { fill: #fff; stroke: var(--kt-accent); stroke-width: 1.5; cursor: pointer; }
.kt-art-overlay .handle.rot { fill: var(--kt-accent); stroke: #fff; }
.kt-art-overlay .guide { stroke: #ff4fa3; stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.kt-art-overlay .marquee { fill: var(--kt-accent-soft); stroke: var(--kt-accent); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.kt-art-overlay .safe { fill: none; stroke: rgba(150, 150, 150, .35); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.kt-art-overlay .badge { font: 700 11px var(--kt-font); fill: #fff; }
.kt-art-overlay .badge-bg { fill: var(--kt-yellow); }
.kt-art-view.is-clean .kt-art-overlay > * { display: none; }
.kt-art-textedit {
  position: absolute; z-index: 5; margin: 0; padding: 0; border: 1px solid var(--kt-accent); outline: none; resize: none;
  background: rgba(20, 20, 20, .85); color: #fff; overflow: hidden; white-space: pre-wrap; line-height: 1.1;
}
.kt-art-hint { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 12px; font-size: 11.5px; color: var(--kt-faint); background: var(--kt-panel); border-top: 1px solid var(--kt-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-art-empty { margin: auto; max-width: 360px; text-align: center; color: var(--kt-muted); padding: 40px 20px; font-size: 13.5px; }

/* ---- design inspector ---- */
/* The header: what is selected, and the one scope choice. */
.kt-editing {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center;
  padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--kt-line); border-radius: 10px; background: var(--kt-panel-2);
}
.kt-editing-name { min-width: 0; }
.kt-editing-name b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-editing-name small { display: block; color: var(--kt-muted); font-size: 11.5px; margin-top: 1px; line-height: 1.35; }
.kt-editing-scope { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--kt-muted); white-space: nowrap; }
.kt-editing-scope .kt-select { width: auto; min-height: 28px; padding: 3px 26px 3px 8px; font-size: 12.5px; font-weight: 600; color: var(--kt-text); border-color: var(--kt-accent-outline); }
.kt-editing-fixed b { color: var(--kt-text); }
.kt-editing-note { grid-column: 1 / -1; margin: 2px 0 0; font-size: 11.5px; color: var(--kt-faint); line-height: 1.4; }
@container (max-width: 300px) { .kt-editing { grid-template-columns: 1fr; } }
.kt-inspector { container-type: inline-size; }
.kt-reset { border: 0; background: none; color: var(--kt-faint); cursor: pointer; font-size: 11px; padding: 0 3px; text-decoration: underline; text-underline-offset: 2px; }
.kt-reset:hover { color: var(--kt-accent); }
/* per-field: override dot, note, ⋯ menu */
.kt-field > label { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }
.kt-label-note { font-weight: 400; color: var(--kt-faint); font-size: 11px; text-transform: none; letter-spacing: 0; }
.kt-ovr { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--kt-accent); flex: none; }
.kt-pm {
  margin-left: auto; width: 20px; height: 18px; border: 0; border-radius: 4px; background: none; color: var(--kt-faint); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0; opacity: .55; flex: none;
}
.kt-field:hover .kt-pm, .kt-pm:focus-visible { opacity: 1; }
.kt-pm:hover, .kt-pm:focus-visible { color: var(--kt-text); background: var(--kt-line-soft); }
.kt-subhead { margin: 10px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--kt-faint); display: flex; align-items: center; gap: 6px; }
.kt-dsec-body > .kt-subhead:first-child { margin-top: 0; }
.kt-textrow .kt-srcbtn { width: 28px; padding: 0; flex: none; }
.kt-alignrow { margin-bottom: 0; align-items: center; }
.kt-alignrow .kt-sep { width: 1px; height: 18px; background: var(--kt-line); margin: 0 2px; }
.kt-btnrow .kt-btn[aria-pressed="true"] { border-color: var(--kt-accent); color: var(--kt-accent); }
.kt-effect-toggle { margin: 6px 0 4px; font-weight: 600; }
.kt-effect-body { padding: 4px 0 2px 22px; border-left: 2px solid var(--kt-line-soft); margin: 0 0 8px 6px; }
.kt-effect-body .kt-field { margin-bottom: 8px; }
.kt-ovr-list { list-style: none; margin: 0 0 8px; padding: 0; font-size: 12px; }
.kt-ovr-list li { display: flex; align-items: center; gap: 6px; padding: 3px 0; border-bottom: 1px solid var(--kt-line-soft); }
.kt-ovr-list li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the compact font picker button */
.kt-fontrow-ctl { margin-bottom: 8px; }
.kt-fontpick {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; min-height: 40px; padding: 5px 10px; text-align: left;
  border: 1px solid var(--kt-line); border-radius: 6px; background: var(--kt-panel-2); color: var(--kt-text); cursor: pointer;
}
.kt-fontpick:hover, .kt-fontpick:focus-visible { border-color: var(--kt-accent); outline: none; }
.kt-fontpick-name { font-size: 17px; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-fontpick-meta { font: 500 11px/1.2 var(--kt-font); color: var(--kt-faint); letter-spacing: 0; }
/* icon layer */
.kt-icon-preview { display: flex; align-items: center; gap: 10px; padding: 8px; margin-bottom: 8px; border: 1px solid var(--kt-line); border-radius: 8px; background: repeating-conic-gradient(var(--kt-check-a) 0% 25%, var(--kt-check-b) 0% 50%) 0 0 / 12px 12px; }
.kt-icon-preview svg { width: 56px; height: 56px; flex: none; }
.kt-icon-preview .none { color: var(--kt-faint); font-size: 12.5px; }
.kt-icon-preview-text { min-width: 0; background: var(--kt-panel); padding: 4px 8px; border-radius: 6px; }
.kt-icon-preview-text b { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-icon-preview-text small { color: var(--kt-faint); font-size: 11px; }
.kt-asset.is-icon .kt-asset-thumb { color: var(--kt-text); }
.kt-asset.is-icon .kt-asset-thumb svg { width: 40px; height: 40px; }
.kt-color-row { display: flex; gap: 6px; align-items: center; }
.kt-color-row input[type=color] { width: 34px; height: 28px; padding: 2px; border: 1px solid var(--kt-line); border-radius: 5px; background: var(--kt-panel-2); cursor: pointer; flex: none; }
.kt-color-row .kt-input { min-height: 28px; padding: 3px 7px; font-family: var(--kt-mono); font-size: 12px; }
.kt-color-row input[type=range] { width: 52px; flex: none; }
.kt-color-row .kt-select { width: auto; min-height: 28px; padding: 2px 4px; font-size: 11.5px; max-width: 96px; flex: none; }
.kt-num-row { display: flex; gap: 6px; align-items: center; }
.kt-num-row input[type=range] { flex: 1; width: auto; min-width: 40px; }
.kt-num-row .kt-input { width: 64px; flex: none; min-height: 28px; padding: 3px 6px; }
.kt-num-row input[type=number].kt-input { width: 64px; min-width: 0; }
.kt-num-row .kt-select { width: auto; min-height: 28px; padding: 2px 4px; font-size: 11.5px; max-width: 90px; flex: none; }
.kt-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; }
.kt-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 8px; }
@container (max-width: 340px) {
  .kt-grid2, .kt-grid3 { grid-template-columns: minmax(0, 1fr); }
}
.kt-stop-picker { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.kt-stop-picker .kt-btn { display: inline-flex; align-items: center; gap: 6px; }
.kt-stop-picker [aria-pressed="true"] { border-color: var(--kt-accent); box-shadow: 0 0 0 1px var(--kt-accent), var(--lg-shadow); }
.kt-stop-swatch { width: 18px; height: 18px; border: 1px solid var(--kt-line); border-radius: 4px; }
.kt-grid2 .kt-field, .kt-grid3 .kt-field { margin-bottom: 4px; }
.kt-grid2 .kt-input, .kt-grid3 .kt-input { min-height: 28px; padding: 3px 7px; }
.kt-btnrow { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.kt-btnrow .kt-btn { height: 26px; padding: 0 8px; font-size: 12px; }
.kt-btnrow .kt-btn.is-active { border-color: var(--kt-accent); color: var(--kt-accent); }
.kt-btnrow .kt-btn svg { width: 13px; height: 13px; }
.kt-stops { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.kt-stop { display: grid; grid-template-columns: 16px minmax(0, 1fr); grid-template-areas: "n color" "n link" "n at" "n range" "n remove"; gap: 6px; align-items: center; padding: 6px 6px 6px 0; border-top: 1px solid var(--kt-line-soft); }
.kt-stop:first-child { border-top: 0; }
.kt-stop .kt-stop-n { grid-area: n; font-size: 11px; font-weight: 700; color: var(--kt-faint); text-align: center; }
.kt-stop .kt-color-row { grid-area: color; }
.kt-stop .kt-color-row .kt-input { min-width: 0; }
.kt-stop > .kt-select { grid-area: link; width: auto; min-height: 28px; padding: 2px 4px; font-size: 11.5px; max-width: 110px; }
.kt-stop .kt-stop-at { grid-area: at; display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--kt-muted); white-space: nowrap; }
.kt-stop .kt-stop-at .kt-input { width: 56px; min-height: 26px; padding: 2px 6px; }
.kt-stop .kt-stop-at input[type=number].kt-input { width: 56px; }
.kt-stop input[type=range] { grid-area: range; width: auto; }
.kt-stop .kt-layer-btn { grid-area: remove; flex: none; justify-self: end; }
.kt-grad-preview { height: 22px; border-radius: 5px; border: 1px solid var(--kt-line); margin-bottom: 8px; background-clip: padding-box; }
.kt-preset-row { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.kt-preset-chip { width: 34px; height: 22px; border: 1px solid var(--kt-line); border-radius: 5px; cursor: pointer; padding: 0; flex: none; }
.kt-preset-chip:hover, .kt-preset-chip:focus-visible { border-color: var(--kt-accent); outline: none; box-shadow: 0 0 0 2px var(--kt-accent-outline); }
.kt-preset-row .kt-btn.small { height: 24px; padding: 0 8px; font-size: 11.5px; }
/* pill presets: the real render on a fixed dark stage (artwork, not interface) */
.kt-pill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; margin-bottom: 8px; }
.kt-pill-chip {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; min-width: 0; padding: 4px 4px 5px;
  border: 1px solid var(--kt-line); border-radius: 6px; background: var(--kt-panel-2); color: var(--kt-muted);
  font: 500 11px/1.2 var(--kt-font); text-align: center; cursor: pointer; transition: border-color .12s, color .12s;
}
.kt-pill-chip:hover { border-color: var(--kt-faint); color: var(--kt-text); }
.kt-pill-chip:focus-visible { outline: 2px solid var(--kt-accent); outline-offset: 1px; }
.kt-pill-chip[aria-pressed="true"] { border-color: var(--kt-accent); color: var(--kt-text); }
.kt-pill-thumb { display: block; aspect-ratio: 8 / 3; border-radius: 4px; background: #0e0e10; overflow: hidden; }
.kt-pill-thumb canvas { display: block; width: 100%; height: 100%; }
.kt-pill-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-pill-mine { position: relative; min-width: 0; }
/* "Forget" sits over the pill's render: regular glass, red on hover */
.kt-pill-forget {
  position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; padding: 0; border: 1px solid var(--lg-edge); border-radius: 4px;
  background: var(--lg-fill); color: var(--kt-muted); font-size: 10px; line-height: 1; cursor: pointer; opacity: 0;
  box-shadow: var(--lg-shadow); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  transition: background-color .12s, border-color .12s, color .12s, transform .45s var(--lg-spring);
}
.kt-pill-mine:hover .kt-pill-forget, .kt-pill-forget:focus-visible { opacity: 1; }
.kt-pill-forget:hover { color: var(--kt-red); border-color: var(--kt-red); background-color: var(--lg-fill-hover); }
.kt-pill-forget:active { background-color: var(--lg-fill-press); transform: var(--lg-press); transition-duration: .12s, .12s, .12s, .12s; }
/* sections: a full-width toggle row, a summary when collapsed */
.kt-dsec { border: 1px solid var(--kt-line-soft); border-radius: 8px; margin-bottom: 8px; background: var(--kt-panel); }
.kt-dsec > .kt-dsec-title {
  display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; padding: 9px 11px; border: 0; background: none; color: var(--kt-text);
  font: 700 12px/1.2 var(--kt-font); letter-spacing: .5px; text-transform: uppercase; text-align: left; cursor: pointer; border-radius: 8px;
}
.kt-dsec > .kt-dsec-title:hover { background: var(--kt-panel-2); }
.kt-dsec > .kt-dsec-title:focus-visible { outline: 2px solid var(--kt-accent); outline-offset: -2px; }
.kt-dsec-name { flex: none; }
.kt-dsec-sum { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 11.5px/1.2 var(--kt-font); text-transform: none; letter-spacing: 0; color: var(--kt-faint); text-align: right; }
.kt-dsec > .kt-dsec-title .kt-caret { margin-left: auto; font-weight: 400; color: var(--kt-faint); flex: none; }
.kt-dsec-sum + .kt-caret { margin-left: 0; }
.kt-dsec-body { padding: 2px 11px 6px; }
.kt-dsec.is-closed > .kt-dsec-body { display: none; }
.kt-dsec .kt-field { margin-bottom: 8px; }
.kt-inline-note { font-size: 11.5px; color: var(--kt-faint); margin: -2px 0 8px; line-height: 1.4; }
.kt-inline-note.warn { color: var(--kt-yellow); }
.kt-danger-link { color: var(--kt-red); }
.kt-text-bind { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.kt-text-bind .kt-select { flex: 0 0 118px; min-height: 28px; padding: 2px 6px; font-size: 12px; }
.kt-text-bind .kt-input { min-height: 28px; padding: 3px 7px; }
.kt-textarea.short { min-height: 56px; font-family: var(--kt-font); font-size: 13px; }

/* ---- popovers (property menus, text source, compact font picker) ---- */
.kt-pop {
  position: fixed; z-index: 120; min-width: 200px; max-width: min(360px, calc(100vw - 16px)); max-height: min(420px, calc(100vh - 16px));
  display: flex; flex-direction: column; border: 1px solid var(--kt-line); border-radius: 8px; background: var(--kt-panel); color: var(--kt-text);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45); font-size: 12.5px; overflow: hidden;
}
html[data-theme="light"] .kt-pop { box-shadow: 0 12px 34px rgba(0, 0, 0, .2); }
.kt-pop-head { padding: 8px 10px 6px; border-bottom: 1px solid var(--kt-line-soft); }
.kt-pop-head b { display: block; font-size: 12.5px; }
.kt-pop-head small { display: block; color: var(--kt-faint); font-size: 11px; margin-top: 1px; }
.kt-pop-search { padding: 8px; }
.kt-pop-search .kt-input { min-height: 28px; padding: 3px 8px; }
.kt-pop-items { padding: 4px; overflow: auto; }
.kt-pop-item {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 8px; border: 0; border-radius: 5px; background: none; color: var(--kt-text);
  font: inherit; text-align: left; cursor: pointer;
}
.kt-pop-item:hover, .kt-pop-item:focus-visible { background: var(--kt-accent-soft); outline: none; }
.kt-pop-item:disabled { color: var(--kt-faint); cursor: default; background: none; }
.kt-pop-item.is-danger { color: var(--kt-red); }
.kt-pop-check { width: 12px; flex: none; color: var(--kt-accent); font-size: 11px; }
.kt-pop-label { min-width: 0; }
.kt-pop-label small { display: block; color: var(--kt-faint); font-size: 11px; }
.kt-pop-sep { height: 1px; background: var(--kt-line-soft); margin: 4px 2px; }
.kt-pop-list { overflow: auto; flex: 1; min-height: 0; }
.kt-pop-foot { display: flex; align-items: center; gap: 8px; padding: 8px; border-top: 1px solid var(--kt-line-soft); }
.kt-pop-note { color: var(--kt-faint); font-size: 11px; line-height: 1.35; }
.kt-pop-fonts { max-height: min(520px, calc(100vh - 16px)); }
.kt-fontgroup-title { padding: 6px 10px 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--kt-faint); }
.kt-fontgroup-more { margin: 2px 10px 6px; font-size: 12px; }
.kt-fontrow {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 10px; cursor: pointer; border-radius: 5px; margin: 0 4px;
}
.kt-fontrow:hover, .kt-fontrow:focus-visible { background: var(--kt-accent-soft); outline: none; }
.kt-fontrow.is-current { box-shadow: inset 0 0 0 1px var(--kt-accent-outline); }
.kt-fontrow-name { flex: 1; min-width: 0; font-size: 17px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-font-status { color: var(--kt-faint); font-size: 10.5px; white-space: nowrap; flex: none; }
.kt-star { border: 0; background: none; color: var(--kt-faint); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 4px; flex: none; }
.kt-star:hover, .kt-star:focus-visible { color: var(--kt-text); background: var(--kt-line-soft); outline: none; }
.kt-star.is-on { color: var(--kt-yellow); }

/* ---- the font and icon browsers (roomy dialogs) ---- */
.kt-modal.xl { width: min(1100px, 100%); height: min(760px, calc(100vh - 32px)); max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.kt-modal.xl .kt-modal-body { flex: 1; min-height: 0; display: flex; padding: 0; }
.kt-modal.xl .kt-modal-foot { flex-wrap: wrap; }
.kt-browser { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }
.kt-browser-top { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--kt-line-soft); flex-wrap: wrap; }
.kt-browser-search { flex: 2 1 220px; min-height: 32px; }
.kt-browser-sample { flex: 1 1 160px; min-height: 32px; }
.kt-browser-size { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--kt-muted); }
.kt-browser-size input { width: 90px; }
.kt-browser-main { display: grid; grid-template-columns: 160px minmax(0, 1fr) 280px; flex: 1; min-height: 0; }
.kt-browser-side { border-right: 1px solid var(--kt-line-soft); overflow: auto; padding: 10px 8px; }
.kt-browser-side-title { padding: 8px 8px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--kt-faint); }
.kt-browser-side-note { padding: 8px; font-size: 11px; color: var(--kt-faint); line-height: 1.4; }
.kt-browser-filter {
  display: block; width: 100%; text-align: left; padding: 6px 8px; border: 0; border-radius: 5px; background: none; color: var(--kt-muted); font: 500 12.5px var(--kt-font); cursor: pointer;
}
.kt-browser-filter:hover, .kt-browser-filter:focus-visible { color: var(--kt-text); background: var(--kt-panel-2); outline: none; }
.kt-browser-filter.is-active { color: var(--kt-text); background: var(--kt-accent-soft); }
.kt-browser-list { overflow: auto; padding: 8px 12px; min-width: 0; }
.kt-browser-list:focus-visible { outline: 2px solid var(--kt-accent); outline-offset: -2px; }
.kt-browser-detail { border-left: 1px solid var(--kt-line-soft); overflow: auto; padding: 14px 16px; }
.kt-browser-empty { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 28px 8px; color: var(--kt-faint); font-size: 12.5px; line-height: 1.45; }
.kt-browser-empty b { color: var(--kt-text); font-size: 13.5px; }
.kt-browser-foot-note { font-size: 11px; color: var(--kt-faint); line-height: 1.35; min-width: 160px; }
/* font rows */
.kt-fb-row { padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; margin-bottom: 2px; min-width: 0; }
.kt-fb-row:hover { background: var(--kt-panel-2); }
.kt-fb-row:focus-visible { outline: 2px solid var(--kt-accent); outline-offset: -2px; }
.kt-fb-row.is-selected { border-color: var(--kt-accent-outline); background: var(--kt-accent-soft); }
.kt-fb-row-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kt-fb-name { font-size: 12.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-fb-meta { color: var(--kt-faint); font-size: 11px; white-space: nowrap; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kt-fb-sample { margin-top: 4px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 1.2em; }
.kt-fb-row.is-loading .kt-fb-sample { opacity: .5; }
.kt-fb-row.is-failed .kt-font-status { color: var(--kt-yellow); }
.kt-fb-localbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 4px 0 10px; }
.kt-fb-localbar .kt-input { flex: 1 1 160px; min-height: 28px; }
.kt-fb-localbar .kt-pop-note { flex: 2 1 260px; }
.kt-fb-local .kt-btnrow { margin: 6px 0 0; }
.kt-fb-big { min-height: 96px; padding: 12px 0 14px; line-height: 1.1; word-break: break-word; border-bottom: 1px solid var(--kt-line-soft); margin-bottom: 10px; }
.kt-fb-title { margin: 0 0 4px; font-size: 15px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kt-fb-line { margin: 0 0 8px; font-size: 12px; color: var(--kt-muted); line-height: 1.45; }
.kt-fb-line a { color: var(--kt-accent); }
.kt-fb-weights { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.kt-fb-weights .kt-btn small { color: var(--kt-faint); font-weight: 500; }
.kt-fb-weights .kt-btn.is-active { border-color: var(--kt-accent); color: var(--kt-accent); }
.kt-fb-var { font-size: 11px; color: var(--kt-faint); align-self: center; }
/* icon grid */
.kt-icon-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; align-content: start; }
.kt-icon-results .kt-browser-empty { grid-column: 1 / -1; }
.kt-icon-tile {
  aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--kt-line-soft); border-radius: 8px; background: var(--kt-panel-2); color: var(--kt-text); cursor: pointer; padding: 0;
}
.kt-icon-tile svg { width: 28px; height: 28px; }
.kt-icon-tile:hover { border-color: var(--kt-faint); }
.kt-icon-tile:focus-visible { outline: 2px solid var(--kt-accent); outline-offset: 1px; }
.kt-icon-tile.is-selected { border-color: var(--kt-accent); background: var(--kt-accent-soft); }
.kt-ib-big { display: grid; place-items: center; padding: 18px; margin-bottom: 10px; border: 1px solid var(--kt-line); border-radius: 10px; background: repeating-conic-gradient(var(--kt-check-a) 0% 25%, var(--kt-check-b) 0% 50%) 0 0 / 14px 14px; color: var(--kt-text); }
.kt-ib-big svg { width: 120px; height: 120px; }
@media (max-width: 900px) {
  .kt-browser-main { grid-template-columns: 130px minmax(0, 1fr); }
  .kt-browser-detail { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--kt-line-soft); max-height: 40%; }
}

@media (max-width: 1180px) and (min-width: 981px) {
  .kt-asset-grid { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .kt-art-scroll { max-height: 70vh; }
}
@media (prefers-reduced-motion: reduce) {
  .kt-art-canvas { transition: none; }
}