/* Konformista concept pages: the working Results page (suite-results.js). CONCEPT ONLY.
   Colours, sizes and type are the app's own (desktop_app/tokens.py, app.py's results page). */
.kr-app {
  --kr-bg0: #0a0807; --kr-bg1: #121010; --kr-bg2: #191716; --kr-bg3: #221f1d; --kr-bg4: #2a2623;
  --kr-line: rgba(255, 220, 150, 0.08); --kr-line2: rgba(255, 220, 150, 0.14); --kr-line3: rgba(255, 220, 150, 0.22);
  --kr-text: #efeae0; --kr-dim: #b8ad97; --kr-mut: #948a7b; --kr-off: #6f675c;
  --kr-gold: #c69d1b; --kr-gold-hi: #d4ae2e; --kr-ring: rgba(212, 168, 74, 0.55); --kr-wash: rgba(212, 168, 74, 0.14);
  --kr-error: #c9333f; --kr-warn: #e8892c; --kr-review: #e3d050; --kr-rebuilt: #3b9fc9; --kr-info: #4fa05f; --kr-placeholder: #9f6ad6;
  position: relative; display: flex; flex-direction: column; overflow: hidden; text-align: left;
  border-radius: 14px; border: 1px solid var(--kr-line2); background: var(--kr-bg1); color: var(--kr-text);
  font: 400 13px/1.4 'Inter Tight', -apple-system, sans-serif; box-shadow: 0 60px 120px -50px rgba(0, 0, 0, 1);
}
.kr-app button, .kr-app input, .kr-app select { font: inherit; color: inherit; }
.kr-app :focus-visible { outline: 2px solid var(--kr-gold-hi); outline-offset: 1px; }
.kr-app .mono, .kr-tc, .kr-rec, .kr-trk, .kr-crumb span, .kr-cat-n b { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* header */
.kr-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 64px; padding: 0 20px; background: var(--kr-bg0); border-bottom: 1px solid var(--kr-line); }
.kr-crumb { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kr-crumb b { font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kr-crumb span { font-size: 10px; color: var(--kr-dim); white-space: nowrap; }
.kr-word { font-family: 'Urbanist', sans-serif; font-weight: 200; font-size: 20px; letter-spacing: 3px; color: var(--kr-gold-hi); }
.kr-back { justify-self: end; border: 0; background: none; color: var(--kr-dim); cursor: pointer; padding: 6px 8px; border-radius: 6px; }
.kr-back:hover { color: var(--kr-text); background: var(--kr-bg2); }

/* two columns */
.kr-main { display: grid; grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.6fr); height: 470px; }
.kr-left { display: flex; flex-direction: column; min-height: 0; padding: 14px 14px 0 18px; }
.kr-switch { display: flex; margin-bottom: 14px; }
.kr-switch button { flex: 1; padding: 5px 10px; border: 1px solid rgba(255, 220, 150, 0.16); margin-left: -1px; background: var(--kr-bg1); font-weight: 600; font-size: 12px; color: var(--kr-dim); cursor: pointer; }
.kr-switch button:first-child { border-radius: 3px 0 0 3px; margin-left: 0; }
.kr-switch button:last-child { border-radius: 0 3px 3px 0; }
.kr-switch button:hover { color: var(--kr-text); }
.kr-switch button[aria-checked="true"] { position: relative; z-index: 1; background: var(--kr-bg4); border-color: var(--kr-ring); color: var(--kr-text); }
.kr-cap { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--kr-dim); }
.kr-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.kr-pills button { height: 22px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--kr-line2); background: none; font-size: 12px; color: var(--kr-dim); cursor: pointer; }
.kr-pills button:hover { color: var(--kr-text); }
.kr-pills button[aria-pressed="true"] { background: var(--kr-text); border-color: var(--kr-text); color: var(--kr-bg0); font-weight: 600; }
.kr-cats { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 0 4px 14px 0; }
.kr-cat { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px;
  border: 1px solid transparent; border-radius: 4px; background: var(--kr-bg1); cursor: pointer; text-align: left; }
.kr-cat[hidden] { display: none; }
.kr-cat:hover { background: var(--kr-bg2); }
.kr-cat.is-open { background: var(--kr-wash); border-color: var(--kr-ring); }
.kr-cat-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kr-cat-t b { font-weight: 500; font-size: 13px; }
.kr-cat-t span { font-size: 12px; color: var(--kr-dim); }
.kr-cat-n { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.kr-cat-n b { font-weight: 400; font-size: 13px; }
.kr-cat-n span { font-size: 10px; font-weight: 600; letter-spacing: .06em; color: var(--kr-mut); }

/* severity chips: fill at .12, border at .25 */
.kr-chip, .kr-badge { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: 9px; white-space: nowrap;
  font-size: 11px; font-weight: 600; color: var(--s);
  background: color-mix(in srgb, var(--s) 12%, transparent); border: 1px solid color-mix(in srgb, var(--s) 25%, transparent); }
.kr-chip i, .kr-badge i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* the right column */
.kr-right { display: flex; flex-direction: column; min-height: 0; background: var(--kr-bg2); border-left: 1px solid var(--kr-line); }
.kr-empty { margin: auto; max-width: 300px; text-align: center; color: var(--kr-dim); }
.kr-empty span { display: block; font-size: 18px; color: var(--kr-mut); }
.kr-empty b { display: block; margin-top: 8px; color: var(--kr-text); font-weight: 600; font-size: 14px; }
.kr-empty p { margin: 6px 0 0; font-size: 12px; line-height: 1.5; }
.kr-rhead { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--kr-line); flex-wrap: wrap; }
.kr-rhead b { font-size: 15px; font-weight: 600; }
.kr-rhead > span { font-size: 12px; color: var(--kr-dim); }
.kr-rhead input { margin-left: auto; width: 220px; height: 24px; padding: 0 8px; border-radius: 4px; border: 1px solid rgba(255, 220, 150, 0.16); background: var(--kr-bg1); font-size: 12px; }
.kr-rhead input::placeholder { color: var(--kr-mut); }
.kr-quiet { height: 24px; padding: 0 10px; border-radius: 4px; border: 1px solid rgba(255, 220, 150, 0.16); background: var(--kr-bg3); font-size: 12px; font-weight: 600; cursor: pointer; }
.kr-quiet:hover { border-color: var(--kr-line3); }
.kr-cards { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.kr-card { padding: 10px 12px; border-radius: 4px; border: 1px solid var(--kr-line); background: var(--kr-bg1); cursor: pointer; }
.kr-card:hover { border-color: var(--kr-line3); }
.kr-card.is-on { border-color: var(--kr-ring); box-shadow: inset 0 0 0 1px var(--kr-ring); }
.kr-card-row { display: flex; align-items: baseline; gap: 12px; min-width: 0; margin-bottom: 7px; }
.kr-trk { color: var(--kr-mut); font-size: 12px; }
.kr-rec { font-size: 13px; }
.kr-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kr-badge { cursor: pointer; }
.kr-badge.is-solid { background: var(--s); border-color: var(--s); color: #120f0c; }
.kr-note { margin-top: 8px; padding: 2px 0 2px 10px; border-left: 2px solid var(--s); color: var(--kr-dim); font-size: 12px; line-height: 1.5; }
.kr-note p { margin: 0; }
.kr-showing { margin: 0; padding: 8px 14px 10px; font-size: 12px; color: var(--kr-dim); border-top: 1px solid var(--kr-line); }

/* the timeline drawer */
.kr-drawer { border-top: 1px solid var(--kr-line); background: var(--kr-bg0); }
.kr-dhead { display: flex; align-items: center; gap: 14px; padding: 8px 18px; }
.kr-tc { font-size: 12px; padding: 2px 8px; border-radius: 4px; background: var(--kr-bg2); border: 1px solid var(--kr-line); }
.kr-dsum { font-size: 12px; color: var(--kr-dim); white-space: pre; }
.kr-dbody { padding: 0 18px 10px 0; }
.kr-dinner { position: relative; }
.kr-drawer.is-shut .kr-dbody { display: none; }
.kr-ruler, .kr-lane { display: grid; grid-template-columns: 46px minmax(0, 1fr); }
.kr-ruler { height: 31px; cursor: pointer; }
.kr-lab { display: flex; align-items: center; justify-content: center; font: 500 10px 'JetBrains Mono', monospace; color: var(--kr-mut); }
.kr-track { position: relative; }
.kr-ruler .kr-track { border-bottom: 1px solid var(--kr-line); }
.kr-ruler .kr-track > i { position: absolute; bottom: 0; width: 1px; height: 5px; background: rgba(255, 255, 255, .16); }
.kr-ruler .kr-track > i.big { height: 9px; background: rgba(255, 255, 255, .3); }
.kr-ruler .kr-track > span { position: absolute; top: 2px; transform: translateX(3px); font: 400 9px 'JetBrains Mono', monospace; color: var(--kr-mut); white-space: nowrap; }
.kr-marks { position: absolute; left: 0; right: 0; bottom: 1px; height: 9px; }
.kr-mk { position: absolute; bottom: 0; width: 7px; height: 9px; margin-left: -3px; background: var(--s); clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); }
.kr-mk--ed { background: #8d8574; }
.kr-lane { height: 22px; margin-top: 2px; }
.kr-blk { position: absolute; top: 2px; bottom: 2px; border-radius: 2px; cursor: pointer;
  background: color-mix(in srgb, var(--t, #5b6b7a) 44%, transparent); border: 1px solid color-mix(in srgb, var(--t, #5b6b7a) 67%, transparent); }
.kr-blk.is-urgent { background: color-mix(in srgb, var(--t) 59%, transparent); }
.kr-blk:hover { border-color: var(--t, #5b6b7a); }
.kr-blk.is-faded { opacity: .2; }
.kr-blk.is-ring { box-shadow: 0 0 0 2px #d4ae2e; opacity: 1; z-index: 2; }
.kr-blk.is-hole { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 3px, transparent 3px 6px); border: 1px dashed rgba(255, 255, 255, .18); }
.kr-head { position: absolute; top: 0; bottom: 6px; width: 1px; background: #d4ae2e; pointer-events: none; z-index: 3; }
.kr-head::before { content: ''; position: absolute; top: 0; left: -4px; border: 4px solid transparent; border-top: 6px solid #d4ae2e; }

/* the send bar */
/* the app lays this out on one row at 1600 px; in a page-width window it takes two: the
   options above, the pickers and the buttons below */
.kr-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 18px; padding: 14px 18px; border-top: 1px solid var(--kr-line); background: linear-gradient(#1a1612, #121010); }
.kr-bar .kr-opts { grid-column: 1 / -1; }
.kr-opts { display: flex; gap: 16px; }
.kr-grid { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; gap: 8px 14px; }
.kr-check { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--kr-text); cursor: pointer; white-space: nowrap; }
.kr-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kr-check span { width: 15px; height: 15px; border-radius: 3px; border: 1px solid rgba(255, 220, 150, 0.26); background: var(--kr-bg2); flex: none; }
.kr-check input:checked + span { background: var(--kr-gold); border-color: var(--kr-gold); }
.kr-check input:focus-visible + span { outline: 2px solid var(--kr-gold-hi); outline-offset: 1px; }
.kr-check.is-off { color: var(--kr-off); cursor: not-allowed; }
.kr-check.is-off span { opacity: .45; }
.kr-pickers { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.kr-pick { display: flex; align-items: center; gap: 8px; }
.kr-pick[hidden] { display: none; }
.kr-pick span { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--kr-dim); }
.kr-pick select { height: 26px; padding: 0 8px; border-radius: 4px; border: 1px solid rgba(255, 220, 150, 0.16); background: var(--kr-bg2); font-size: 12px; }
.kr-pick select:disabled { color: var(--kr-off); }
.kr-go { display: flex; gap: 10px; }
.kr-export { height: 40px; padding: 0 16px; border-radius: 6px; border: 1px solid rgba(255, 220, 150, 0.16); background: var(--kr-bg3); font-weight: 600; cursor: pointer; }
.kr-export[hidden] { display: none; }
.kr-send { height: 40px; padding: 0 18px; border-radius: 6px; border: 0; background: var(--kr-gold); color: #1a1408; font-weight: 700; cursor: pointer; white-space: nowrap; }
.kr-send:hover { background: var(--kr-gold-hi); }

.kr-toast { position: absolute; left: 50%; bottom: 76px; z-index: 10; transform: translate(-50%, 10px); opacity: 0; pointer-events: none;
  max-width: calc(100% - 40px); padding: 9px 14px; border-radius: 8px; background: #000; border: 1px solid var(--kr-line3); font-size: 13px;
  transition: opacity .25s ease, transform .3s ease; }
.kr-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Source media: its row above the categories, and the list it opens */
[data-media-slot] { margin: 0 4px 6px 0; }
.kr-chip--dot { width: 20px; justify-content: center; padding: 0; }
.kr-msum { display: inline; font-size: 12px; }
.kr-count { border: 0; padding: 0; background: none; font-size: 12px; cursor: pointer; }
.kr-count.is-on { text-decoration: underline; text-underline-offset: 3px; }
.kr-count:hover { text-decoration: underline; text-decoration-style: dotted; }
.kr-mbtns { display: flex; gap: 6px; margin-left: auto; }
.kr-quiet:disabled { color: var(--kr-off); cursor: default; }
.kr-msub { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 14px; border-bottom: 1px solid var(--kr-line); font-size: 12px; color: var(--kr-dim); }
.kr-msub input { margin-left: auto; width: 220px; height: 24px; padding: 0 8px; border-radius: 4px; border: 1px solid rgba(255, 220, 150, 0.16); background: var(--kr-bg1); font-size: 12px; }
.kr-file .kr-card-row { flex-wrap: wrap; align-items: center; row-gap: 4px; margin-bottom: 4px; }
.kr-meta { font: 400 11px 'JetBrains Mono', monospace; color: #6aa6d4; white-space: nowrap; }
.kr-times { font: 400 11px 'JetBrains Mono', monospace; color: var(--kr-dim); }
.kr-status { margin-left: auto; height: 20px; padding: 0 8px; border-radius: 9px; display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; color: var(--s);
  background: color-mix(in srgb, var(--s) 12%, transparent); border: 1px solid color-mix(in srgb, var(--s) 25%, transparent); }
.kr-inspect { height: 22px; font-size: 11px; }
.kr-how { margin: 0; font-size: 11px; color: var(--kr-dim); }
.kr-path { margin: 2px 0 0; font: 400 11px 'JetBrains Mono', monospace; color: var(--kr-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kr-none { margin: 20px 0; text-align: center; color: var(--kr-dim); }
.kr-blk.is-lit { background: color-mix(in srgb, var(--t, #5b6b7a) 80%, transparent); border: 2px solid #efeae0; z-index: 1; }

/* nested sequences kept whole, Premiere's labels, and the per-sequence choices */
.kr-blk.is-nest { overflow: hidden; background: color-mix(in srgb, var(--t, #5b6b7a) 44%, transparent);
  box-shadow: inset 0 3px 0 -1px color-mix(in srgb, var(--t, #5b6b7a) 90%, white 10%); }
.kr-blk.is-nest span { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); font: 600 8px/1 'Inter Tight', sans-serif; letter-spacing: .04em; color: rgba(255, 255, 255, .8); white-space: nowrap; }
.kr-blk.is-label { background: color-mix(in srgb, var(--t) 69%, transparent); border-color: color-mix(in srgb, var(--t) 85%, black 15%); }
.kr-pick--nest { position: relative; }
.kr-pick--nest > .kr-pick { display: flex; }
.kr-per { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 5; display: flex; flex-direction: column; gap: 8px; min-width: 300px;
  padding: 12px; border-radius: 8px; background: var(--kr-bg3); border: 1px solid var(--kr-line3); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .9); }
.kr-per[hidden] { display: none; }
.kr-per-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; }
.kr-per-row b { font: 500 11px 'JetBrains Mono', monospace; }
.kr-per-row select { height: 24px; padding: 0 6px; border-radius: 4px; border: 1px solid rgba(255, 220, 150, 0.16); background: var(--kr-bg2); font-size: 12px; }
.kr-per .kr-quiet { align-self: flex-end; }

/* scrollbars as the app draws them (conform_bridge.qss 1058): 8px, no track, a faint warm handle;
   the timeline's own are 10px and stronger (timeline_preview.py 2290) */
.kr-app * { scrollbar-width: thin; scrollbar-color: rgba(255, 220, 150, 0.1) transparent; }
.kr-app *::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
.kr-app *::-webkit-scrollbar-track, .kr-app *::-webkit-scrollbar-corner { background: transparent; }
.kr-app *::-webkit-scrollbar-thumb { background: rgba(255, 220, 150, 0.1); border-radius: 4px; min-height: 20px; }
.kr-app *::-webkit-scrollbar-thumb:hover { background: rgba(255, 220, 150, 0.2); }
.kr-app .kr-dbody { scrollbar-color: rgba(255, 220, 150, 0.22) transparent; }
.kr-app .kr-dbody::-webkit-scrollbar { height: 10px; }
.kr-app .kr-dbody::-webkit-scrollbar-thumb { background: rgba(255, 220, 150, 0.22); min-width: 28px; }
.kr-app .kr-dbody::-webkit-scrollbar-thumb:hover { background: rgba(255, 220, 150, 0.38); }

/* the app's tooltip card (tooltip_cards.py) */
.kr-tip { position: absolute; z-index: 40; max-width: 320px; padding: 7px 10px; border-radius: 4px; background: #1a1814; border: 1px solid #c9a227;
  font-size: 12px; line-height: 1.45; color: var(--kr-text); opacity: 0; pointer-events: none; transition: opacity .12s ease; }
.kr-tip.is-on { opacity: 1; }

/* a send that finished turns the button amber (app 18440) */
.kr-send.is-sent { background: #e8892c; color: #1a1408; }

/* modal dialogs over the page (choiceDialog, modalBody) */
.kr-layer { position: absolute; inset: 0; z-index: 30; display: none; }
.kr-layer.is-on { display: block; }
.kr-modal-back, .kr-box-back { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(5, 4, 3, 0.62); }
.kr-box-back { z-index: 2; background: rgba(5, 4, 3, 0.4); }
.kr-dialog { display: flex; flex-direction: column; width: min(560px, 100%); max-height: 100%; border-radius: 8px; overflow: hidden;
  background: #191716; border: 1px solid var(--kr-line2); box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .95); }
.kr-dialog--send { width: min(520px, 100%); }
.kr-dbody2 { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 28px 20px; }
.kr-eyebrow, .kr-cap2 { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .6px; color: #948a7b; }
.kr-cap2 { margin-top: 18px; }
.kr-dtitle { margin: 0; font-size: 21px; font-weight: 600; color: var(--kr-text); }
.kr-dtitle i { font-style: normal; color: #3a3530; font-weight: 400; }
.kr-dtitle span { font: 400 14px 'JetBrains Mono', monospace; color: #c9a227; }
.kr-dtitle--sm { font-size: 15px; }
.kr-ddesc { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: #948a7b; }
.kr-small { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: #948a7b; }
.kr-link { border: 0; background: none; padding: 0; color: #c9a227; font-size: 12px; text-decoration: underline; cursor: pointer; }
.kr-ref { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: 13px; color: var(--kr-text); }
.kr-ref p { margin: 0; }
.kr-dbody2 hr { border: 0; height: 1px; background: var(--kr-line); margin: 18px 0 0; }
.kr-dbody2 select, .kr-proj, .kr-shell { height: 32px; border-radius: 3px; border: 1px solid rgba(255, 220, 150, 0.12); background: #0a0807; color: var(--kr-text); font-size: 13px; padding: 0 8px; }
.kr-dbody2 select:disabled { color: var(--kr-off); }
.kr-wide { width: 100%; max-width: 360px; }
.kr-shell { display: flex; align-items: stretch; padding: 0; height: 36px; overflow: hidden; }
.kr-shell + .kr-shell { margin-top: 8px; }
.kr-shell input { flex: 1; min-width: 0; border: 0; background: none; padding: 0 12px; font: 400 13px 'JetBrains Mono', monospace; color: var(--kr-text); }
.kr-shell > span { flex: 1; min-width: 0; display: flex; align-items: center; padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kr-shell > span.is-empty { color: #948a7b; }
.kr-ext { flex: none !important; padding: 0 14px !important; font: 400 13px 'JetBrains Mono', monospace; color: #c9a227; background: rgba(201, 162, 39, 0.08); border-left: 1px solid rgba(255, 220, 150, 0.12); }
.kr-shell button { flex: none; border: 0; border-left: 1px solid rgba(255, 220, 150, 0.12); background: #221f1d; padding: 0 14px; font-weight: 600; font-size: 13px; cursor: pointer; }
.kr-shell button:disabled { color: var(--kr-off); cursor: default; }
.kr-shell.is-off { opacity: .55; }
.kr-row { display: flex; align-items: center; gap: 10px; min-height: 40px; border-bottom: 1px solid rgba(255, 220, 150, 0.06); }
.kr-row--in { justify-content: space-between; padding-left: 28px; }
.kr-row--in > span { font-size: 13px; font-weight: 600; }
.kr-row--wrap { flex-wrap: wrap; padding: 6px 0; }
.kr-row .is-dim, .kr-row--in > span.is-dim { color: var(--kr-off); }
.kr-proj { min-width: 210px; }
.kr-dots { width: 26px; height: 26px; padding: 0; }
.kr-tog { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.kr-tog input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kr-tog span { position: relative; width: 32px; height: 18px; border-radius: 9px; background: #221f1d; border: 1px solid rgba(255, 220, 150, 0.16); flex: none; transition: background .15s; }
.kr-tog span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #948a7b; transition: transform .15s, background .15s; }
.kr-tog input:checked + span { background: #c9a227; border-color: #c9a227; }
.kr-tog input:checked + span::after { transform: translateX(14px); background: #1a1408; }
.kr-tog input:focus-visible + span { outline: 2px solid var(--kr-gold-hi); outline-offset: 2px; }
.kr-tog.is-off { color: var(--kr-off); cursor: default; }
.kr-tog.is-off span { opacity: .45; }
.kr-media { padding: 4px 0 0; }
.kr-media .kr-small { margin: 4px 0 10px 23px; }
.kr-media .kr-shell { margin-left: 23px; }
.kr-media .kr-row--in { padding-left: 23px; border: 0; }
.kr-media.is-off { opacity: .5; }
.kr-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 28px; border-top: 1px solid var(--kr-line); background: #191716; }
.kr-primary { min-height: 40px; padding: 0 20px; border: 0; border-radius: 6px; background: #c69d1b; color: #1a1408; font-weight: 700; cursor: pointer; }
.kr-primary:hover { background: #d4ae2e; }
.kr-cancel { min-height: 40px; padding: 0 18px; border-radius: 6px; border: 1px solid rgba(255, 220, 150, 0.16); background: #221f1d; font-weight: 600; cursor: pointer; }
.kr-cancel:disabled { color: var(--kr-off); cursor: default; }
.kr-cancel.kr-sm, .kr-dots { min-height: 30px; padding: 0 12px; font-size: 12px; }
.kr-box { width: min(440px, 100%); max-height: 100%; overflow-y: auto; border-radius: 8px; background: #221f1d; border: 1px solid var(--kr-line3); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .95); }
.kr-box > b { display: block; padding: 18px 20px 0; font-size: 14px; }
.kr-box > p { margin: 8px 0 0; padding: 0 20px; font-size: 12px; line-height: 1.55; color: var(--kr-dim); white-space: pre-line; }
.kr-box-tick { margin: 12px 20px 0; }
.kr-box .kr-foot { margin-top: 16px; background: none; padding: 12px 20px; }

/* the status panel in the right column while an export or send runs (NewSendPanel) */
.kr-status-panel { padding: 22px 24px; overflow-y: auto; }
.kr-sthead { margin: 4px 0 2px; font-size: 22px; font-weight: 300; color: var(--kr-text); }
.kr-sthead.is-busy { animation: kr-pulse 1.6s ease-in-out infinite; }
@keyframes kr-pulse { 50% { opacity: .55; } }
.is-ok .kr-sthead { color: #7ab87a; }
.is-bad .kr-sthead { color: #d4745a; }
.kr-bar2 { height: 2px; margin: 12px 0 14px; background: var(--kr-line2); border-radius: 1px; overflow: hidden; }
.kr-bar2 i { display: block; height: 100%; background: #c69d1b; transition: width .2s linear; }
.is-ok .kr-bar2 i { background: #7ab87a; }
.kr-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--kr-dim); }
.kr-steps li::before { content: '○'; display: inline-block; width: 18px; color: #3a3530; }
.kr-steps li.is-on { color: var(--kr-text); }
.kr-steps li.is-on::before { content: '●'; color: #c69d1b; }
.kr-steps li.is-done::before { content: '●'; color: #7ab87a; }
.kr-card2 { margin-top: 16px; padding: 12px 14px; border-radius: 4px; background: var(--kr-bg1); border: 1px solid var(--kr-line); }
.kr-card2 .kr-cap2 { margin: 0 0 4px; }
.kr-card2 p { margin: 0; font-size: 12px; color: var(--kr-dim); }
.kr-mono { font-family: 'JetBrains Mono', monospace; color: var(--kr-text) !important; word-break: break-all; }
.kr-stop { margin-top: 18px; height: 32px; padding: 0 14px; border-radius: 6px; border: 1px solid #c9333f; background: none; color: #e5555f; font-weight: 600; cursor: pointer; }

/* the section around it */
.results-hint { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 28px 0 0; font-size: 14px; color: var(--dim, #a3a199); }
.results-hint span::before { content: '→'; margin-right: 8px; color: var(--gold, #d4a84a); }

@media (max-width: 1100px) {
  .kr-opts { flex-wrap: wrap; }
}
@media (max-width: 860px) {
  .kr-top { grid-template-columns: 1fr auto; }
  .kr-word { display: none; }
  .kr-back { display: none; }
  .kr-top { grid-template-columns: minmax(0, 1fr); }
  .kr-main { grid-template-columns: minmax(0, 1fr); height: auto; }
  .kr-cats { max-height: 300px; }
  .kr-right { border-left: 0; border-top: 1px solid var(--kr-line); min-height: 320px; max-height: 460px; }
  .kr-rhead input, .kr-msub input { margin-left: 0; width: 100%; order: 5; }
  .kr-mbtns { margin-left: 0; flex-wrap: wrap; }
  .kr-dbody { overflow-x: auto; }
  .kr-dinner { min-width: 680px; }
  .kr-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .kr-grid { display: contents; }
  .kr-bar { grid-template-columns: minmax(0, 1fr); }
  .kr-go { width: 100%; }
  .kr-send { flex: 1; }
  .kr-toast { bottom: 90px; }
  .kr-dbody2 { padding: 18px 16px; }
  .kr-foot { padding: 12px 16px; }
  .kr-row--in { padding-left: 0; flex-wrap: wrap; }
  .kr-proj { min-width: 0; width: 100%; }
}