/*
 * KNITFORM — Atelier UI / v1.2
 * Warm paper, violet ink and a quietly tactile workspace.
 * CSS-only visual refresh. All IDs, interactions and exports remain unchanged.
 */

:root {
  color-scheme: light;
  --bg: #f7f5f1;
  --paper: #fffefd;
  --paper-alt: #fcfaf8;
  --ink: #302b3c;
  --ink-soft: #554d65;
  --muted: #81798e;
  --line: #e9e3e9;
  --line-strong: #dcd4e1;
  --navy: #2e2841;
  --accent: #7663ad;
  --accent-dark: #5e4c95;
  --accentlight: #f2eefa;
  --peach: #e7aa95;
  --good: #2d806d;
  --bad: #ad5261;
  --shadow: 0 10px 38px rgba(53, 42, 70, .045), 0 2px 7px rgba(53, 42, 70, .02);
  --shadow-hover: 0 15px 35px rgba(71, 56, 98, .10);
  --radius: 19px;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif;
  color: var(--ink);
  font-synthesis: none;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(ellipse at 5% 9%, rgba(235, 218, 231, .30), transparent 35%),
    radial-gradient(ellipse at 91% 36%, rgba(230, 217, 241, .27), transparent 33%),
    var(--bg);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .42; transform: none !important; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
::selection { background: #e4dafa; color: #33264f; }
:focus-visible {
  outline: 3px solid rgba(118, 99, 173, .48);
  outline-offset: 3px;
}

/* ── Studio header ───────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 78px;
  padding: 13px clamp(17px, 2.3vw, 38px);
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 42px);
  background: linear-gradient(120deg, #2c263f 0%, #34304a 62%, #3e3552 100%);
  color: #fff;
  box-shadow: 0 7px 24px rgba(39, 31, 56, .16);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.topbar::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--peach), #bca4d6 36%, transparent 78%);
  opacity: .72;
  pointer-events: none;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  min-width: 190px;
}
.brand-icon {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border: 1px solid rgba(226, 206, 244, .34);
  background: rgba(230, 211, 255, .07);
  border-radius: 14px;
  color: #e3c6ff;
  font-size: 32px;
  line-height: 1;
  box-shadow: inset 0 0 16px rgba(252, 229, 255, .035);
}
.brand strong {
  display: block;
  font-size: 19px;
  line-height: 1.05;
  letter-spacing: .135em;
  font-weight: 830;
}
.brand small {
  display: block;
  margin-top: 6px;
  color: #c6bcd7;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .27em;
}
.top-tag {
  max-width: 325px;
  color: #c5bad5;
  font-size: 12px;
  white-space: nowrap;
  padding-left: 19px;
  border-left: 1px solid rgba(255,255,255,.14);
}
.top-actions {
  display: flex;
  margin-left: auto;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.save-indicator {
  margin-right: 7px;
  color: #bdded1;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

/* ── Controls ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 39px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font-weight: 700;
  letter-spacing: -.017em;
  line-height: 1.2;
  white-space: nowrap;
  transition: background .16s ease, border-color .16s ease,
    color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn-quiet {
  border-color: rgba(235, 222, 246, .21);
  background: rgba(255,255,255,.035);
  color: #f0ecf6;
}
.btn-quiet:hover:not(:disabled) {
  background: rgba(255,255,255,.11);
  border-color: rgba(238, 221, 250, .45);
}
.btn-primary {
  background: linear-gradient(125deg, #816bb9, #6e58a5);
  border-color: #7964b2;
  color: #fff;
  box-shadow: 0 4px 12px rgba(99, 74, 158, .16);
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(125deg, #907ac7, #6b559e);
  box-shadow: 0 7px 16px rgba(99, 74, 158, .23);
}
.btn-outline {
  background: #fff;
  color: #514763;
  border-color: #e3dce8;
  box-shadow: 0 1px 2px rgba(57, 44, 80, .025);
}
.btn-outline:hover:not(:disabled) {
  background: #f9f6ff;
  border-color: #bfaee2;
  color: var(--accent-dark);
}
.btn-danger {
  background: #fff9f9;
  color: #a95869;
  border-color: #efdfe0;
}
.btn-danger:hover:not(:disabled) { background: #ffeef1; border-color: #e9b9bf; }
.btn-sm { min-height: 34px; padding: 7px 11px; font-size: 12px; }
.full-width { width: 100%; }
.hidden { display: none !important; }

/* ── Workspace structure ────────────────────────────────────────── */
.workspace {
  display: grid;
  grid-template-columns: 306px minmax(0, 1fr);
  max-width: 1790px;
  margin: 0 auto;
  gap: 20px;
  padding: 24px;
}
.sidebar, .main-content { display: flex; flex-direction: column; min-width: 0; }
.sidebar { gap: 16px; align-self: start; }
.main-content { gap: 18px; }
.panel {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 23px 24px;
  box-shadow: var(--shadow);
}
.sidebar .panel { padding: 21px 20px; }
.section-eyebrow {
  font-size: 10px;
  font-weight: 850;
  color: var(--accent);
  letter-spacing: .14em;
  margin-bottom: 7px;
}
h1 { font-size: clamp(29px, 3.3vw, 42px); font-weight: 780; line-height: 1.25; letter-spacing: -.055em; }
h2 { font-size: 18px; font-weight: 790; letter-spacing: -.038em; line-height: 1.4; }
h3 { margin: 10px 0 5px; font-size: 14px; font-weight: 770; }
.sidebar h2 { margin-bottom: 19px; }
.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}
.panel-head h2 { margin-bottom: 5px; }
.panel-head p, .subline { font-size: 12px; color: var(--muted); line-height: 1.65; }
.button-group { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.tiny, .field-footnote { color: var(--muted); font-size: 11px; line-height: 1.8; }

/* ── Inputs ──────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin-top: 13px; }
.field > span { color: #64596f; font-size: 11px; font-weight: 730; }
.field small { color: #9a92a3; font-size: 10px; font-weight: 550; }
.field input, .field select, .field textarea, .inline-select select {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #e3dce5;
  border-radius: 10px;
  outline: 0;
  background: #fcfbfd;
  color: var(--ink);
  box-shadow: inset 0 1px 1px rgba(35, 28, 50, .012);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.field input::placeholder, .field textarea::placeholder { color: #aaa1af; }
.field textarea { resize: vertical; min-height: 74px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #cfc1d9; }
.field input:focus, .field select:focus, .field textarea:focus, .inline-select select:focus {
  background: #fff;
  border-color: #9c88cd;
  box-shadow: 0 0 0 4px rgba(142, 118, 192, .12);
}
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.field-footnote { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #e9e1e9; }
.field-spaced { margin-top: 21px; }

/* ── Sidebar palette ─────────────────────────────────────────────── */
.settings-panel { background: linear-gradient(160deg, #fffefd 84%, #fcf7f7); }
.palette-panel { overflow: hidden; }
.palette-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 2px;
  background: linear-gradient(90deg, #c0ace5, #e7c1bd, transparent);
  opacity: .72;
}
.active-tool-badge {
  display: grid;
  place-items: center;
  min-width: 39px;
  height: 39px;
  padding: 0 7px;
  border: 1px solid #e1d7f5;
  border-radius: 12px;
  color: var(--accent-dark);
  background: var(--accentlight);
  font-size: 15px;
  font-weight: 820;
}
.palette {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.palette-item {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 50px;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid #e8e2eb;
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.palette-item:hover:not(.selected) { background: #faf8ff; border-color: #cbbce7; transform: translateY(-1px); }
.palette-item.selected {
  background: #f4f0ff;
  border-color: #8e77bf;
  box-shadow: inset 0 0 0 1px rgba(122, 98, 177, .33), 0 3px 9px rgba(110, 89, 170, .08);
}
.palette-item .symbol {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 29px;
  height: 30px;
  padding: 0 3px;
  border: 1px solid #e5dfeb;
  border-radius: 8px;
  background: #f7f5f9;
  color: #443856;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
}
.palette-item.selected .symbol { color: #5a4895; border-color: #ded3f4; background: #e8dff9; }
.palette-label { flex: 1; min-width: 0; }
.palette-item .name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 790; }
.palette-item small { display: block; color: #a097a8; font-size: 10px; white-space: nowrap; }
.palette-item .remove-tool { flex: 0 0 auto; margin-left: auto; padding: 2px; color: #ad5d72; font-size: 11px; }
.custom-form { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.custom-form .field { margin-top: 9px; }
.custom-form .btn { margin-top: 13px; }
.sidebar-help { margin-top: 13px; }

/* ── Yarn swatches ───────────────────────────────────────────────── */
.yarn-panel { background: linear-gradient(145deg, #fffefd 0%, #fdfaf9 100%); }
.yarn-palette { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 2px 0; }
.yarn-chip {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border: 3px solid #fff;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 850;
  text-shadow: 0 1px 4px rgba(19, 15, 31, .5);
  box-shadow: 0 0 0 1px #ded6e0, 0 2px 6px rgba(51, 39, 67, .09);
  transition: box-shadow .16s ease, transform .16s ease;
}
.yarn-chip:hover { transform: translateY(-2px); }
.yarn-chip.selected { box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px #ece6f6; }
.color-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; font-size: 11px; color: #6d6278; }
.color-row input { width: 42px; height: 32px; border: 0; padding: 0; background: transparent; }

/* ── Title feature ───────────────────────────────────────────────── */
.hero {
  isolation: isolate;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 164px;
  padding: 30px clamp(24px, 3vw, 40px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 22px;
  background: linear-gradient(112deg, #35304c 0%, #524667 65%, #65547c 100%);
  color: #fff;
  box-shadow: 0 12px 32px rgba(62, 47, 91, .13);
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, transparent 0 30px, rgba(244,226,252,.029) 31px 32px),
    radial-gradient(circle at 91% 20%, rgba(229,194,235,.17), transparent 26%);
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 320px;
  height: 320px;
  right: -82px;
  top: -109px;
  border: 1px solid rgba(252, 231, 250, .15);
  border-radius: 50%;
  box-shadow: 0 0 0 44px rgba(255,255,255,.018), 0 0 0 88px rgba(255,255,255,.014);
}
.hero > div { position: relative; z-index: 1; max-width: 720px; }
.hero .section-eyebrow { color: #e4bdc5; letter-spacing: .19em; }
.hero h1 { margin-top: 4px; font-size: clamp(28px, 3.5vw, 43px); font-weight: 730; }
.hero p { margin-top: 10px; color: #e6deec; font-size: 12px; line-height: 1.8; }
.hero-asterisk {
  position: relative;
  z-index: 1;
  margin-right: 16px;
  font-size: clamp(85px, 11vw, 155px);
  line-height: 1;
  font-weight: 250;
  color: #dac3ed;
  opacity: .83;
  transform: rotate(-17deg);
  text-shadow: 0 6px 35px rgba(251, 212, 255, .2);
  pointer-events: none;
}

/* ── Numbers at a glance ────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 98px;
  gap: 3px;
  padding: 18px 21px;
  background: #fffefd;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 19px;
  width: 31px;
  height: 3px;
  border-radius: 0 0 6px 6px;
  background: #b5a0d5;
}
.stat:nth-child(2)::before { background: #dfac9b; }
.stat:nth-child(3)::before { background: #a4bdae; }
.stat:nth-child(4)::before { background: #bdb2d2; }
.stat > span { font-size: 11px; font-weight: 650; color: #827b8e; }
.stat strong { font-size: 27px; font-weight: 780; letter-spacing: -.055em; line-height: 1.35; }
.stat strong small { color: #9f96a7; font-size: 12px; font-weight: 570; letter-spacing: 0; }
.stat strong.error { color: var(--bad); }

/* ── Chart editor ────────────────────────────────────────────────── */
.chart-panel { padding-bottom: 18px; }
.chart-panel > .panel-head { padding-bottom: 16px; border-bottom: 1px solid #f0ebf0; }
.chart-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid #eae4ed;
  border-radius: 13px;
  background: linear-gradient(110deg, #f8f5fb, #fcfafc);
}
.toolbar-active { display: flex; align-items: center; min-width: 120px; gap: 10px; margin-right: auto; }
.toolbar-active strong { display: block; font-size: 12px; font-weight: 800; }
.toolbar-active small { color: #93899f; font-size: 10px; }
.toolbar-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 38px;
  height: 38px;
  padding: 0 6px;
  border: 1px solid #e0d4f2;
  border-radius: 11px;
  color: var(--accent-dark);
  background: #eee7fb;
  font-weight: 820;
}
.toolbar-divider { height: 25px; width: 1px; background: #ddd4e6; }
.inline-select { display: flex; align-items: center; gap: 7px; color: #766c81; font-size: 11px; white-space: nowrap; }
.inline-select select { width: 86px; padding: 8px; background: #fff; }
.chart-scroll {
  position: relative;
  min-height: 230px;
  max-height: 700px;
  overflow: auto;
  padding: 23px 19px;
  border: 1px solid #e5dee9;
  border-radius: 13px;
  background-color: #fdfcff;
  background-image:
    linear-gradient(to right, rgba(146, 127, 176, .042) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(146, 127, 176, .042) 1px, transparent 1px);
  background-size: 34px 34px;
  scrollbar-color: #c5bad8 transparent;
}
.chart { display: flex; flex-direction: column; gap: 5px; min-width: max-content; }
.chart-row { display: flex; align-items: center; gap: 10px; min-width: max-content; }
.row-number {
  display: grid;
  place-items: center;
  width: 73px;
  min-width: 73px;
  min-height: 36px;
  padding: 6px 5px;
  border: 1px solid #e5dfeb;
  border-radius: 9px;
  background: #fff;
  color: #746884;
  font-size: 11px;
  font-weight: 770;
  white-space: nowrap;
}
.chart-row.selected .row-number {
  border-color: #b6a1d8;
  background: #eee7fb;
  color: #574585;
  box-shadow: 0 2px 8px rgba(112, 89, 163, .1);
}
.chart-row.invalid .row-count { color: var(--bad); }
.row-direction { width: 25px; min-width: 25px; text-align: center; color: #a095b1; font-size: 16px; font-weight: 780; }
.stitch-track { display: flex; align-items: stretch; min-height: 36px; border-radius: 5px; }
.stitch-track.rtl { justify-content: flex-end; }
.stitch-track.ltr { justify-content: flex-start; }
.stitch-cell {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #dcd4e4;
  background: var(--cellColor, #fff);
  color: #33293f;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: -.025em;
  white-space: nowrap;
  cursor: crosshair;
  user-select: none;
  transition: filter .12s, box-shadow .12s, border-color .12s;
}
.stitch-cell.selected-row { border-color: #ab96d2; }
.stitch-cell:hover { z-index: 2; filter: brightness(.965); outline: 2px solid var(--accent); outline-offset: -2px; }
.stitch-cell:active { filter: brightness(.94); }
.stitch-cell .stitch-code { overflow: hidden; text-overflow: ellipsis; padding: 0 3px; }
.stitch-cell .yarn-dot { position: absolute; right: 3px; bottom: 2px; width: 6px; height: 6px; border-radius: 50%; border: 1px solid rgba(255,255,255,.88); }
.row-count { width: 88px; min-width: 88px; color: #8b8298; font-size: 10px; white-space: nowrap; }
.chart-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 14px; color: #978d9f; font-size: 10px; }
.chart-legend, .chart-legend-item { display: flex; align-items: center; flex-wrap: wrap; }
.chart-legend { gap: 10px; }
.chart-legend-item { gap: 5px; white-space: nowrap; }
.legend-sym { padding: 2px 6px; border: 1px solid #ded4f2; border-radius: 5px; background: #f1eafb; color: #604b98; font-weight: 800; }

/* ── Row composer and repeats ────────────────────────────────────── */
.bottom-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(270px, 1fr); gap: 18px; }
.row-panel, .repeat-panel { min-width: 0; }
.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 6px 11px;
  border: 1px solid #c9e4d8;
  border-radius: 999px;
  background: #ecf8f2;
  color: var(--good);
  font-size: 11px;
  font-weight: 760;
  white-space: nowrap;
}
.status-badge.bad { border-color: #efcdd4; background: #fff0f2; color: var(--bad); }
.row-summary {
  padding: 14px 16px;
  border: 1px solid #eae4ee;
  border-radius: 11px;
  background: #f9f7fb;
  color: #70667e;
  font-size: 12px;
  line-height: 1.9;
}
.row-summary b { color: #463953; }
.dsl-input { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: 12px; line-height: 1.85; }
.row-panel .button-group { margin-top: 13px; }
.validation-box {
  margin-top: 14px;
  padding: 12px 13px;
  border: 1px solid #cee9dc;
  border-radius: 11px;
  background: #f1faf5;
  color: #28785d;
  font-size: 12px;
  line-height: 1.7;
}
.validation-box.bad { border-color: #efcbd2; background: #fff4f5; color: #a54355; }
.repeat-panel { background: linear-gradient(145deg, #fffefd 80%, #fcf9fc); }
.repeat-panel .button-group { margin-top: 20px; }
.three-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 19px 0; }
.three-fields .field { margin: 0; }
.repeat-panel hr { border: 0; border-top: 1px solid var(--line); margin: 25px 0 20px; }

/* ── Written instructions ───────────────────────────────────────── */
.written-panel { background: linear-gradient(155deg, #fffefd 60%, #fefcff); }
.written-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(295px, 1fr)); gap: 11px; }
.written-row {
  padding: 14px 16px;
  border: 1px solid #e8e1ea;
  border-radius: 12px;
  background: #fdfcff;
  cursor: pointer;
  text-align: left;
  transition: border-color .16s, background .16s, box-shadow .16s, transform .16s;
}
.written-row:hover { border-color: #c0afe0; background: #faf7ff; box-shadow: 0 6px 15px rgba(89, 67, 119, .055); transform: translateY(-1px); }
.written-row.invalid { border-color: #eebdc8; }
.written-row-title { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 7px; color: var(--accent-dark); font-size: 12px; font-weight: 820; }
.written-row-title small { color: #a499ad; font-size: 10px; font-weight: 600; }
.written-row p { font-size: 12px; line-height: 1.8; word-break: keep-all; }
.written-row .row-note-line { margin-top: 7px; color: #867c90; font-size: 11px; }
.footer { padding: 10px 0 32px; color: #aaa0ad; text-align: center; font-size: 11px; }

/* ── Non-blocking feedback ───────────────────────────────────────── */
.toast {
  position: fixed;
  z-index: 100;
  bottom: 24px;
  left: 50%;
  padding: 12px 19px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
  background: #373046;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 28px);
  box-shadow: 0 14px 36px rgba(50, 37, 70, .2);
  transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── Layout adaptations ──────────────────────────────────────────── */
@media (max-width: 1500px) {
  .top-tag { display: none; }
  .workspace { grid-template-columns: 284px minmax(0, 1fr); gap: 16px; padding: 18px; }
  .sidebar .panel { padding: 18px 17px; }
  .panel { padding: 20px; }
  .hero { padding: 26px; }
  .chart-toolbar { gap: 7px; }
  .btn-sm { padding: 7px 9px; }
}
@media (max-width: 1090px) {
  .topbar { position: relative; flex-wrap: wrap; gap: 12px; }
  .top-actions { flex: 1 1 auto; }
  .workspace { display: block; }
  .sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin-bottom: 18px; }
  .sidebar .yarn-panel { grid-column: span 2; }
  .main-content { gap: 16px; }
  .bottom-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .topbar { padding: 13px; }
  .brand { min-width: 0; }
  .brand-icon { width: 36px; height: 36px; border-radius: 11px; font-size: 27px; }
  .brand strong { font-size: 17px; }
  .brand small { font-size: 8px; }
  .top-actions { width: 100%; justify-content: flex-start; }
  .top-actions .btn { padding: 8px 9px; min-height: 34px; font-size: 11px; }
  .save-indicator { font-size: 10px; }
  .workspace { padding: 11px; }
  .sidebar { display: flex; }
  .sidebar .panel, .panel { padding: 17px; }
  .hero { min-height: 0; padding: 27px 20px; border-radius: 17px; }
  .hero h1 { font-size: 29px; }
  .hero p { font-size: 11px; }
  .hero-asterisk { margin: 0 -5px 0 8px; font-size: 65px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .stat { padding: 16px; min-height: 83px; }
  .stat strong { font-size: 24px; }
  .panel-head { gap: 11px; }
  .chart-scroll { padding: 12px 9px; }
  .chart-toolbar { gap: 6px; }
  .chart-toolbar .toolbar-divider { display: none; }
  .chart-toolbar .toolbar-active { flex: 1 1 100%; }
  .written-list { grid-template-columns: 1fr; }
}
@media (max-width: 390px) {
  .field-grid { grid-template-columns: 1fr; }
  .palette { grid-template-columns: 1fr 1fr; }
  .three-fields { gap: 6px; }
  .three-fields .field input { padding: 9px 6px; }
  .hero-asterisk { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ── v1.2 Pattern language workspace ────────────────────────── */
.palette-panel .panel-head { margin-bottom: 11px; }
.palette-panel .library-search { margin-top: 9px; }
.palette-panel .library-search input { background: #fff; padding-left: 15px; }
.palette-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 5px; }
.filter-pill {
  cursor: pointer; border: 1px solid #e6dfec; background: #fff;
  border-radius: 30px; padding: 5px 10px; color: #726780;
  font: inherit; font-size: 10px; font-weight: 750; line-height: 1.35;
  transition: background .15s, border-color .15s, color .15s;
}
.filter-pill:hover { border-color: #ac9bcb; color: #554578; }
.filter-pill.selected { border-color: #806bad; color: #fff; background: #7663ad; }
.palette-count { margin: 10px 0 8px; }
.palette {
  max-height: 384px;
  padding: 3px 4px 8px 2px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: #d1c3e1 #faf9fc;
  scrollbar-width: thin;
  align-content: start;
}
.palette-item { min-height: 58px; padding: 8px 6px; gap: 7px; }
.palette-item .symbol { min-width: 32px; height: 36px; font-size: 11px; overflow-wrap: anywhere; }
.palette-item .name { font-size: 11.5px; }
.palette-item small { font-size: 9px; overflow: hidden; text-overflow: ellipsis; }
.empty-library { grid-column: 1/-1; font-size: 12px; color: #8c8297; padding: 22px 8px; line-height: 1.7; }
.tool-detail {
  border: 1px solid #e4d9ef; border-radius: 14px;
  background: linear-gradient(140deg, #faf7ff, #fffdfa);
  padding: 13px 14px; margin-bottom: 13px;
  color: #534961; box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.tool-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.tool-detail-head strong { font-size: 12px; color: #3d3157; }
.tool-detail-head span { flex: none; padding: 2px 6px; background: #eee6f9; color: #67538f; border-radius: 5px; font-size: 10px; }
.tool-detail p { font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.tool-detail .detail-english { color: #9075a3; font-size: 10px; margin-bottom: 4px; }
.tool-detail .detail-note { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #daccd9; color: #a06455; }
.tool-remove { display: block; font: inherit; margin-top: 10px; border: 0; background: none; text-decoration: underline; color: #ad5261; cursor: pointer; font-size: 11px; padding: 0; }
.dictionary-panel { padding-top: 25px; scroll-margin-top: 104px; }
.dictionary-panel .panel-head { margin-bottom: 17px; }
.dictionary-toolbar { display: flex; gap: 14px; align-items: end; margin-bottom: 13px; }
.dictionary-toolbar .field { flex: 1; margin-top: 0; }
.dictionary-toolbar .dictionary-term { flex: 0 0 215px; }
.dictionary-notice {
  padding: 12px 16px; border: 1px solid #e9e1ee;
  border-left: 3px solid #a18aba; border-radius: 10px;
  background: #faf8fd; color: #756783; font-size: 12px; line-height: 1.7;
  word-break: keep-all;
}
.dictionary-count { font-size: 11px; color: #958ba0; margin: 15px 0 11px; font-weight: 650; }
.dictionary-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.reference-card {
  display: flex; flex-direction: column; min-width: 0; gap: 6px;
  background: #fff; border: 1px solid #e9e3ed; border-radius: 14px;
  padding: 16px; transition: border-color .17s, box-shadow .17s;
}
.reference-card:hover { border-color: #cfc1dc; box-shadow: 0 7px 17px rgba(73,54,103,.06); }
.reference-card.is-term { background: #fbfafc; }
.reference-top { display: flex; gap: 7px; align-items: center; margin-bottom: 5px; }
.reference-symbol {
  flex: 0 0 auto; min-width: 42px; height: 38px; padding: 0 4px;
  display: grid; place-items: center; background: #f2edf8;
  border: 1px solid #e5dbed; color: #574779; border-radius: 9px;
  font-size: 14px; font-weight: 800; line-height: 1;
}
.reference-abbr { font: 800 12px/1.3 ui-monospace,Consolas,monospace; color: #474058; overflow-wrap: anywhere; }
.reference-type { color: #87778f; background: #f6f3f8; border-radius: 5px; padding: 3px 6px; margin-left: auto; font-size: 10px; white-space: nowrap; }
.reference-name { font-size: 15px; font-weight: 800; color: #352f45; word-break: keep-all; }
.reference-en { color: #8c8297; font-size: 12px; }
.reference-uk { align-self: start; border: 1px solid #edd9c9; border-radius: 6px; padding: 3px 7px; color: #94664b; background: #fdf5ec; font-size: 11px; font-weight: 750; }
.reference-count { color: #665583; font-size: 12px; font-weight: 760; }
.reference-instruction { color: #63596d; font-size: 12.5px; line-height: 1.65; word-break: keep-all; }
.reference-note { background: #fff8ef; border-radius: 7px; padding: 7px 8px; color: #9d6f48; font-size: 10.5px; line-height: 1.6; }
.reference-use {
  margin-top: auto; padding: 8px 9px; border: 1px solid #e4daef; border-radius: 8px;
  color: #6b598d; background: #faf7ff; font: inherit; font-size: 11px; font-weight: 750;
  text-align: center; cursor: pointer;
}
.reference-use:hover { border-color: #ac92d1; background: #f0e8fb; }
.reference-static { margin-top: auto; font-size: 10px; color: #aaa1b2; }
.dictionary-more { margin-top: 14px; }
.source-links { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; border-top: 1px solid #f0eaf1; padding-top: 16px; margin-top: 19px; color: #8a8094; font-size: 11px; }
.source-links strong { color: #594c68; }
.source-links a { color: #70579c; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.source-links a:hover { color: #aa7898; }
@media (max-width: 1450px) { .dictionary-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 700px) {
  .dictionary-toolbar { display: block; }
  .dictionary-toolbar .field + .field { margin-top: 12px; }
  .dictionary-grid { grid-template-columns: 1fr; }
  .palette { max-height: 350px; }
  .reference-card { padding: 13px; }
}

/* ── Printer-friendly chart & written instructions ──────────────── */
@media print {
  :root { --paper: #fff; --ink: #151515; --line: #ddd; }
  html, body { background: #fff !important; color: #111; }
  .topbar, .sidebar, .chart-toolbar, .button-group, .chart-foot,
  .row-panel, .repeat-panel, .dictionary-panel, .footer, .toast { display: none !important; }
  .workspace { display: block; padding: 0; margin: 0; }
  .main-content { gap: 8px; }
  .hero { min-height: 0; padding: 0 0 12px; border: 0; border-bottom: 1px solid #ddd; border-radius: 0; background: #fff !important; box-shadow: none; color: #111; }
  .hero::before, .hero::after, .hero-asterisk { display: none; }
  .hero .section-eyebrow, .hero p { color: #444; }
  .hero h1 { font-size: 24px; }
  .panel { padding: 8px 0; border: 0; border-radius: 0; box-shadow: none; break-inside: avoid; }
  .panel-head { margin-bottom: 7px; padding-bottom: 0 !important; }
  .stats { display: flex; gap: 0; }
  .stat { flex: 1; min-height: 0; padding: 10px; border: 0; border-right: 1px solid #ddd; border-radius: 0; box-shadow: none; }
  .stat::before { display: none; }
  .stat strong { font-size: 18px; }
  .chart-scroll { max-height: none; min-height: 0; overflow: visible; padding: 9px 0; border: 0; background: #fff; }
  .chart { gap: 2px; }
  .stitch-cell { height: 24px !important; min-width: 0; }
  .row-number { min-height: 24px; padding: 4px; }
  .written-list { display: block; }
  .written-row { margin-bottom: 5px; padding: 8px 10px; break-inside: avoid; }
}


/* === v1.3 / SVG stitch notation system === */
.symbol-holder { display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; min-width:0; min-height:0; flex:0 0 auto; }
.symbol-holder > svg { display:block; width:100%; height:100%; overflow:visible; color:currentColor; }
.palette-item .symbol { width:48px; min-width:48px; height:42px; padding:4px; border-radius:9px; }
.palette-item .symbol svg { max-width:100%; max-height:100%; }
.active-tool-badge { width:48px; min-width:48px; height:48px; display:grid;place-items:center; padding:5px; }
.active-tool-badge .symbol-holder { width:39px;height:37px; }
.toolbar-icon .symbol-holder { width:37px;height:33px; }
.stitch-cell .stitch-code { display:flex; width:100%;height:100%;min-width:0;padding:2px 3px 4px;align-items:center;justify-content:center; }
.stitch-cell .stitch-code svg { width:100%;height:100%;max-height:31px;color:#2c2737;stroke-width:4; }
.legend-sym { width:37px;height:32px;display:grid;place-items:center;padding:2px 4px; }
.legend-sym svg { width:100%;height:100%; }
.reference-symbol { width:55px;min-width:55px;height:47px;padding:5px; }
.reference-symbol svg { width:100%;height:100%; }
.detail-symbol-source { font-size:10px !important;color:#7a6c98 !important;background:#f7f4fc;padding:7px 9px;border-radius:7px; }
.symbol-source-tag { display:inline-flex; align-self:start;align-items:center;gap:4px;margin-bottom:4px;border:1px solid #e1d8ed;border-radius:999px;padding:3px 9px;color:#6f5f86;background:#f5f1fa;font-size:10px;font-weight:750; }
.reference-card:has(.symbol-source-tag) { border-left:3px solid #d4c6e7; }
.reference-card .reference-top { min-height:49px; }
#chartConvention { width:135px; }
.chart-legend-item { border:1px solid #ece6f1;border-radius:8px;padding:3px 8px;background:#fdfbff;font-weight:650; }
@media (max-width: 600px){ #chartConvention {width:125px;} .palette-item .symbol{width:43px;min-width:43px;} }

/* === v1.4 / Publication workflow, output modes and print-ready sheets === */
.export-panel { scroll-margin-top: 100px; position:relative; }
.export-panel .panel-head { align-items:center; }
.export-badge { display:inline-flex; align-self:flex-start; white-space:nowrap; padding:6px 11px; border:1px solid #dacfe7; border-radius:100px; color:#6a5486; background:#f6f1fc; font:700 10px/1.4 ui-monospace,Consolas,monospace;letter-spacing:.06em; }
.export-types { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; margin-top:18px; }
.export-type { display:flex; position:relative;flex-direction:column;gap:5px;align-items:flex-start;min-height:146px; padding:17px 15px 14px;background:#fff; border:1.5px solid #e6e0e9; border-radius:14px; cursor:pointer;transition:background .16s, border-color .16s, box-shadow .16s,transform .16s; }
.export-type:hover { border-color:#bca9d1; transform:translateY(-1px); }
.export-type.chosen, .export-type:has(input:checked) { border-color:#8166aa; box-shadow:0 0 0 3px #eae2f6; background:linear-gradient(145deg,#fcf9ff,#f7f3fd); }
.export-type input { position:absolute;right:13px;top:14px;accent-color:#7460a5; width:15px;height:15px; }
.export-type-icon {display:grid;place-items:center; width:45px;height:43px; background:#f4eef8;border-radius:10px;color:#6d528f;font:700 19px/1 'Noto Sans KR',Pretendard,Arial,sans-serif;letter-spacing:-.08em; }
.export-type-code { font:750 13px/1 ui-monospace,Consolas,monospace;letter-spacing:0; }
.export-type strong {color:#332d43;font-size:14px;line-height:1.3;}
.export-type small {font-size:11px;color:#918699;line-height:1.45;word-break:keep-all;}
.export-options {display:flex;align-items:center;flex-wrap:wrap;gap:12px 19px; margin:19px 0; padding:14px 16px;border:1px solid #eee8f3;border-radius:12px;background:#fbf9fd;}
.export-options .inline-select {color:#5c5069; font-size:12px;}
.export-options select {margin-left:5px;padding:7px 27px 7px 9px;}
.export-check {display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#584b69;cursor:pointer;}
.export-check input {width:15px;height:15px;accent-color:#7b63a4;}
.export-preview-head {display:flex;gap:12px;align-items:center;justify-content:space-between;margin:18px 1px 10px;}
.export-preview-head strong {font-size:14px;color:#3b344d;}
.export-preview-head span {color:#91859c;font-size:11px;text-align:right;}
.export-preview {display:flex;flex-direction:column;gap:10px;overflow:hidden;background:#fff;border:1px solid #e8e3ed;border-radius:12px;padding:20px 19px;box-shadow:inset 0 0 0 1px #f7f5f9;}
.preview-meta {color:#766682;font-size:11px;font-weight:750;border-bottom:1px solid #efeaf2;padding-bottom:10px;}
.preview-chart {max-width:100%; overflow:auto;background:#fff;}
.preview-chart svg {display:block;max-height:180px;width:auto;max-width:100%;margin:0 auto;}
.preview-lines {display:flex;flex-direction:column;gap:7px;}
.preview-line {display:grid;grid-template-columns:73px minmax(0,1fr);gap:10px;font-size:12px;border-bottom:1px dashed #f0edf3;padding-bottom:7px;line-height:1.6;}
.preview-line b {white-space:nowrap;color:#70568c;font:750 11px/1.6 ui-monospace,Consolas,monospace;}
.preview-line span {overflow-wrap:anywhere;color:#564b62;}
.preview-ellipsis {font-size:11px;color:#98909e;}
.preview-foot {font-size:11px;color:#96889e;border-top:1px solid #f1edf3;padding-top:10px;margin:0;}
.export-tip {padding:10px 13px;background:#f8f5fc;border-left:3px solid #a48abf;color:#72677d;border-radius:6px;font-size:12px;line-height:1.65;margin:15px 0;}
.export-actions {display:flex;flex-wrap:wrap;gap:9px;align-items:center;}
.export-actions .btn {min-height:42px;}
.export-actions .export-pdf {padding-left:25px;padding-right:25px;}
#knitformPrint {display:none;}
@media (max-width:1150px){.export-types{grid-template-columns:repeat(2,minmax(0,1fr));}.export-type{min-height:128px;}}
@media (max-width:550px){.export-types{gap:8px;}.export-type{padding:13px 11px;min-height:130px;}.export-options{display:grid;grid-template-columns:1fr 1fr;}.export-options .inline-select{grid-column:span 2}.export-actions>.btn{flex:1 1 100%;}.preview-line{grid-template-columns:58px minmax(0,1fr);}}

@media print {
  *,*::before,*::after {box-shadow:none !important;text-shadow:none !important;}
  html,body{width:auto!important;min-width:0!important;max-width:none!important;margin:0!important;padding:0!important;background:#fff!important;}
  body > :not(#knitformPrint) {display:none !important;}
  #knitformPrint {display:block!important; color:#24202b!important;background:#fff!important;font:11px/1.48 'Noto Sans KR','Malgun Gothic','Apple SD Gothic Neo',sans-serif;}
  #knitformPrint * {box-sizing:border-box;}
  #knitformPrint .print-sheet {display:block;position:relative;padding:0;margin:0 0 8mm;page-break-after:always;break-after:page;background:#fff;color:#24202b;}
  #knitformPrint .print-sheet:last-child {page-break-after:auto;break-after:auto;}
  #knitformPrint .print-header {display:block;padding:0 0 3.5mm;border-bottom:1px solid #bbb0c6;margin-bottom:4mm;}
  #knitformPrint .print-overline {font:700 8px/1.3 Arial,sans-serif;color:#806796;letter-spacing:.16em;}
  #knitformPrint .print-header h1 {margin:2mm 0 1.5mm!important;color:#292239!important;font-size:22px!important;line-height:1.2;font-weight:800;}
  #knitformPrint .print-header p {font-size:11px;color:#706479;margin:0;}
  #knitformPrint .print-summary {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3mm;margin:0 0 5mm;padding:3mm 0;border-bottom:1px solid #eeebf0;}
  #knitformPrint .print-summary-item {display:flex;flex-direction:column;gap:1mm;min-width:0;}
  #knitformPrint .print-summary-item small {font-size:9px;color:#837889;}
  #knitformPrint .print-summary-item strong {font-size:10px;color:#3b3546;overflow-wrap:anywhere;}
  #knitformPrint .print-project-notes {grid-column:1/-1;margin:0;font-size:10px;color:#645a6b;white-space:pre-wrap;overflow-wrap:anywhere;}
  #knitformPrint .print-svg-frame {width:100%;overflow:visible;margin:5mm 0 0;}
  #knitformPrint .print-chart-svg {display:block;max-width:100%;width:100%;height:auto;max-height:174mm;object-fit:contain;}
  #knitformPrint .print-row-notes {font-size:10px;max-height:38mm;overflow:hidden;margin:3mm 0;break-inside:avoid;}
  #knitformPrint .print-row-notes strong {display:block;margin-bottom:1.5mm;}
  #knitformPrint .print-row-notes div {padding:1mm 0;border-bottom:1px dashed #eee6f1;overflow-wrap:anywhere;}
  #knitformPrint .print-folio {font-size:9px;color:#81788b;border-top:1px solid #ece6f1;margin-top:4mm;padding-top:2mm;}
  #knitformPrint .print-text-rows {display:block;}
  #knitformPrint .print-text-row {padding:3mm 0;border-bottom:1px solid #ebe5ef;break-inside:avoid;page-break-inside:avoid;}
  #knitformPrint .print-text-row-title {display:flex;align-items:baseline;justify-content:space-between;gap:8mm;margin-bottom:1.4mm;}
  #knitformPrint .print-text-row-title strong {font-weight:800;font-size:11px;color:#59466b;}
  #knitformPrint .print-text-row-title span {font-size:10px;color:#746b7c;white-space:nowrap;}
  #knitformPrint .print-pattern-instruction {margin:0;font-size:11px;overflow-wrap:anywhere;word-break:break-word;line-height:1.6;}
  #knitformPrint .print-text-note {margin:1mm 0 0;font-size:10px;color:#81718c;overflow-wrap:anywhere;}
  #knitformPrint .print-has-error {border-left:2px solid #b82d48;padding-left:2mm;}
  #knitformPrint .print-legend-grid {display:grid;grid-template-columns:1fr 1fr;gap:3mm;}
  #knitformPrint .print-legend-entry {display:grid;grid-template-columns:13mm minmax(0,1fr);gap:3mm;border:1px solid #e7e0eb;border-radius:2mm;min-height:26mm;padding:3mm;break-inside:avoid;page-break-inside:avoid;}
  #knitformPrint .print-legend-icon {width:12mm;height:12mm;background:#faf7fc;border:1px solid #ebe5f1;display:flex;align-items:center;justify-content:center;}
  #knitformPrint .print-legend-icon svg {display:block;width:100%;height:100%;}
  #knitformPrint .print-legend-body strong {display:block;font-size:10px;color:#44334e;margin:0 0 1mm;}
  #knitformPrint .print-legend-body small {display:block;font-size:8.3px;color:#87738f;}
  #knitformPrint .print-legend-body p {margin:1.5mm 0 0;font-size:9px;line-height:1.5;overflow-wrap:anywhere;}
  #knitformPrint .print-legend-body small.print-note {margin-top:1mm;color:#9d5e43;}
  #knitformPrint .print-disclaimer {font-size:9px;color:#75697d;padding-top:3mm;border-top:1px solid #eee;}
  /* A very small chart and its short key can share one A4 sheet. */
  #knitformPrint .print-chart-with-legend .print-legend-section {margin-top:5mm;padding-top:3mm;border-top:1px solid #e7e0eb;break-inside:avoid;page-break-inside:avoid;}
  #knitformPrint .print-chart-with-legend .print-legend-inline-heading {font-size:12px!important;font-weight:800;color:#59466b;margin:0 0 2mm;line-height:1.4;}
  #knitformPrint .print-chart-with-legend .print-legend-entry {min-height:20mm;padding:2mm;}
  #knitformPrint .print-chart-with-legend .print-disclaimer {margin:2mm 0 0;padding-top:2mm;}
  #knitformPrint.print-landscape .print-summary {margin-bottom:3mm;}
  #knitformPrint.print-landscape .print-chart-svg {max-height:100mm;}
  #knitformPrint.print-landscape .print-legend-entry {min-height:22mm;}
  print-color-adjust:exact; -webkit-print-color-adjust:exact;
}

/* KNITFORM v1.5 — quick chart editing */
.range-help{display:flex;align-items:center;gap:9px;padding:10px 15px;margin:0 0 10px;border:1px solid #ddd5ed;border-radius:10px;background:#f8f5ff;color:#62527b;font-size:12px;font-weight:650;line-height:1.6}
.range-help-dot{font-size:17px;color:#9178c6}
.chart-toolbar #rangeMode{min-width:146px;width:auto;max-width:205px}
.stitch-cell{touch-action:none}
.stitch-cell.range-selected{z-index:3;filter:brightness(.98);background-image:linear-gradient(rgba(104,74,190,.17),rgba(104,74,190,.17));outline:2px solid #7550b9;outline-offset:-2px}
.stitch-cell.range-partial{outline:2px dashed #c2793e;outline-offset:-2px;background-image:linear-gradient(rgba(241,172,106,.25),rgba(241,172,106,.25))}
.stitch-cell.range-selected:hover{filter:none}
@media (max-width:760px){.range-help{font-size:11px;padding:9px 11px}}
@media print {.range-help{display:none !important}}

/* KNITFORM v1.6 — motif library, active-row tracker, magic ring */
.crochet-start{margin:15px 0 8px;padding:15px;border-radius:16px;border:1px solid #dfd5ec;background:linear-gradient(150deg,#f8f4ff,#fffbf7);display:grid;gap:10px;}
.magic-controls{display:grid;gap:12px}.magic-ring-preview{min-height:190px;display:grid;place-items:center;background:#fff;border:1px dashed #d5c8e1;border-radius:14px;}
.magic-ring-preview svg{width:min(220px,100%);height:auto;display:block}.magic-ring-preview.hidden,.crochet-start.hidden,.magic-controls.hidden{display:none!important}
#castOnCount:disabled{background:#eeeaf2;color:#8f899b;cursor:not-allowed}
.workflow-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;margin-bottom:20px;align-items:stretch}
.workflow-grid>.panel{min-width:0;background:linear-gradient(150deg,#fffefd,#fdfafe);}
.motif-list{display:grid;gap:7px;max-height:230px;overflow:auto;padding:3px 2px 5px;}
.motif-entry{appearance:none;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;border-radius:12px;border:1px solid #e4ddec;background:#fdfcff;padding:12px 13px;color:#423b50;font:inherit;}
.motif-entry strong{font-size:13px;overflow-wrap:anywhere}.motif-entry small{color:#85798d;font-size:11px;white-space:nowrap}.motif-entry:hover{background:#f5effd;border-color:#b8a9d9}.motif-entry.selected{background:#f1e9ff;border-color:#9e87ca;box-shadow:0 0 0 2px #bfa9dc44}
.motif-empty{margin:6px 2px;color:#958a9d;font-size:12px}.motif-selected-info{margin:10px 0 8px;padding:10px 12px;background:#f4f0f9;border-radius:11px;font-size:12px;color:#655273}
.motif-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:11px 0}.motif-actions #motifDeleteBtn{grid-column:span 2}
.progress-head{margin:24px 0 8px;display:flex;justify-content:space-between;gap:10px;align-items:center}.progress-head strong{font-size:18px;color:#3d324a}.progress-head span{font-size:14px;color:#756289;font-weight:750}
.progress-meter{height:10px;background:#e9e1f0;border-radius:999px;overflow:hidden;margin:0 0 18px}.progress-meter span{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#9e80c9,#d69da9);transition:width .25s ease}
.progress-current{padding:18px;border-radius:17px;background:linear-gradient(150deg,#f5effc,#fff9f6);border:1px solid #e2d4e9;min-height:140px;margin-bottom:18px}
.progress-current #progressRowMeta{display:block;font-size:12px;font-weight:700;color:#8f7697;margin-bottom:12px}.progress-row-abbr{font-weight:780;overflow-wrap:anywhere;color:#3f3154;font-size:21px;line-height:1.55}.progress-row-written{font-size:12px;color:#776b82;line-height:1.7;margin-top:9px}
.progress-actions{display:flex;gap:9px;flex-wrap:wrap}.progress-actions>.btn{flex:1 1 auto}.progress-actions-secondary{margin:9px 0 12px}
.chart-row.progress-current-row .row-number{box-shadow:inset 4px 0 #a784d1;background:#f1e9fa;color:#4c366f}.chart-row.progress-current-row .stitch-track{outline:2px dashed #b9a0d8;outline-offset:2px;border-radius:4px}
.print-magic-preview{width:50mm;margin:0 auto 1mm;max-height:37mm;overflow:hidden}.print-magic-preview svg{width:100%;height:100%;max-height:37mm}.print-magic-caption{font-size:9px;color:#6a5c70;text-align:center;margin:0 0 2mm}
@media(max-width:980px){.workflow-grid{grid-template-columns:1fr}}
@media(max-width:620px){.motif-actions{grid-template-columns:1fr}.motif-actions #motifDeleteBtn{grid-column:auto}.motif-entry{flex-direction:column;align-items:flex-start;gap:2px}.progress-row-abbr{font-size:18px}}
@media print{.workflow-grid,.crochet-start{display:none!important}}

/* KNITFORM v1.6.1 — compact companion and motif workflow */
.workflow-grid-refined{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:18px}
.workflow-grid-refined>.panel{padding:23px 23px 20px;overflow:hidden}
.workflow-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}
.workflow-heading .section-eyebrow{margin-bottom:5px}
.workflow-heading h2{font-size:18px;margin:0}
.workflow-count{flex:0 0 auto;font-size:11px;font-weight:760;color:#705b92;background:#f2edf9;border:1px solid #e7def1;border-radius:99px;padding:5px 11px;white-space:nowrap}
.workflow-description{font-size:12px;color:#8b8293;margin:8px 0 16px;line-height:1.6}
.motif-save-line{display:flex;align-items:flex-end;gap:9px}
.motif-save-line .field{margin:0;flex:1;gap:6px}
.motif-save-line .field>span,.motif-search-field>span{font-size:11px;color:#71697b}
.motif-save-button{flex:0 0 78px;height:43px;min-height:43px;padding:10px}
.motif-search-field{margin:17px 0 7px;gap:6px}
.motif-list{display:grid;gap:7px;max-height:220px;min-height:0;overflow-y:auto;padding:3px 2px 5px}
.motif-entry{width:100%;gap:11px;padding:9px 11px;background:#fff;border-color:#ebe5ef;min-height:55px;border-radius:12px}
.motif-entry-icon{width:35px;height:35px;flex:0 0 35px;display:grid;place-items:center;border-radius:9px;background:#f5f0fb;color:#8e74b1;font-size:19px}
.motif-entry-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.motif-entry strong{font-size:12px;line-height:1.35}.motif-entry small{font-size:11px;color:#888092;white-space:normal}
.motif-entry-arrow{font-size:23px;color:#c1b4d2;line-height:1}
.motif-entry.selected{background:#f6f1fd;border-color:#ad97d1;box-shadow:0 0 0 1px #cbb8e7}
.motif-entry.selected .motif-entry-icon{background:#e7dbf8;color:#7352a6}
.motif-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:#faf8fc;border:1px dashed #e7dfed;padding:16px 18px;margin:3px 0;border-radius:13px;text-align:center;line-height:1.55}
.motif-empty-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#efe7f7;color:#8167a2;font-size:23px;margin-bottom:3px}
.motif-empty strong{font-size:12px;font-weight:750;color:#655b72}
.motif-empty span:last-child{font-size:11px;color:#92889e;max-width:300px}
.motif-selected-info{margin:12px 0 6px;padding:9px 11px;background:#f1ebf9;color:#695380;font-size:12px;font-weight:700;border-radius:10px}
.motif-composer{margin-top:12px;border-top:1px solid #eee8f2;padding-top:14px}
.motif-composer-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.motif-composer-heading strong{font-size:12px;color:#584b6a}.motif-composer-heading span{font-size:11px;color:#9c92a5}
.motif-repeat-grid{margin:8px 0 10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.motif-repeat-grid .field{margin:0;gap:5px}
.motif-repeat-grid input{padding:8px 11px}
.motif-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:12px 0 10px}
.motif-actions .btn{min-width:0;white-space:normal;padding:10px 5px;font-size:12px}
.motif-footer{display:flex;justify-content:space-between;align-items:center;gap:11px}
.motif-footer>span{font-size:10px;color:#91879c;line-height:1.5;max-width:350px}
.btn-danger-link{background:transparent!important;color:#ad6476;border-color:transparent!important;box-shadow:none!important;min-height:33px;padding:6px 8px;font-size:11px;white-space:nowrap}
.btn-danger-link:hover:not(:disabled){background:#fff0f2!important;color:#a34156;transform:none}
.progress-hero{margin-top:20px;padding:15px 16px 13px;border-radius:14px;border:1px solid #e8e0f0;background:#faf7ff}
.progress-hero .progress-head{margin:0 0 11px}
.progress-hero .progress-head strong{font-size:23px;line-height:1.3;letter-spacing:-.04em}
.progress-hero .progress-head span{font-size:18px;color:#7c60ac}
.progress-hero .progress-meter{height:8px;margin:0 0 8px;background:#e6dff0}
.progress-completed-label{font-size:11px;color:#93899f;text-align:right}
.progress-current{min-height:0;margin:12px 0 10px;padding:15px 15px 13px;background:#fff;border:1px solid #ece5f0;border-radius:14px}
.progress-current-heading{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:12px;flex-wrap:wrap}
.progress-current #progressRowMeta{display:inline-flex;align-items:center;border-radius:99px;padding:6px 10px;background:#eee8f8;color:#71539e;font-weight:750;margin:0;font-size:11px}
.progress-token-toggle{border:0;background:transparent;padding:5px 3px;font-size:11px;font-weight:700;color:#806da1;cursor:pointer;border-radius:4px}
.progress-token-toggle:hover:not(:disabled){color:#5a4088;text-decoration:underline}
.progress-token-toggle:disabled{opacity:.4;cursor:not-allowed}
.progress-row-abbr{display:flex;gap:6px;align-items:flex-start;align-content:flex-start;flex-wrap:wrap;max-height:160px;min-height:36px;overflow:auto;padding:1px 0 3px;font-size:13px;line-height:1.45;letter-spacing:0}
.stitch-token{display:inline-flex;align-items:center;background:#f7f4fa;border:1px solid #eae3ef;color:#463956;border-radius:8px;font-size:13px;font-weight:760;padding:7px 10px;white-space:normal;overflow-wrap:anywhere;max-width:100%}
.stitch-token-repeat{background:#f0e9fa;border-color:#ddd0ec;color:#674c93}
.stitch-token-complete{color:#287b63;border-color:#bfdecc;background:#f0faf3}
.progress-row-count{font-size:11px;font-weight:650;color:#8b8196;margin-top:9px}
.progress-row-count.bad{color:#b15365}
.progress-details{background:#faf9fc;border:1px solid #ede8f1;border-radius:12px;margin:0 0 14px;overflow:hidden}
.progress-details summary{cursor:pointer;padding:12px 14px;font-size:12px;font-weight:740;color:#6d5e7c;display:flex;align-items:center;justify-content:space-between;list-style:none}
.progress-details summary::-webkit-details-marker{display:none}
.progress-details summary span{transition:transform .2s ease;font-size:18px;line-height:1}
.progress-details[open] summary span{transform:rotate(180deg)}
.progress-details[open] summary{border-bottom:1px solid #ebe6f0}
.progress-details .progress-row-written{font-size:12px;color:#756d80;line-height:1.75;padding:13px 14px 16px;margin:0;overflow-wrap:anywhere;max-height:250px;overflow:auto}
.progress-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:9px;margin:0}
.progress-actions>.btn{white-space:normal;min-height:42px}
.progress-actions-secondary{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:10px 0 0}
.progress-actions-secondary #progressLocateBtn{flex:1;min-width:0;font-size:12px;white-space:normal}
.progress-actions-secondary #progressResetBtn{flex:0 0 auto}
@media(max-width:1120px){.workflow-grid-refined{grid-template-columns:1fr}}
@media(max-width:620px){.workflow-grid-refined>.panel{padding:19px 16px}.motif-actions{grid-template-columns:1fr 1fr}.motif-entry{flex-direction:row;align-items:center}.progress-hero .progress-head strong{font-size:21px}.motif-footer>span{font-size:10px}.progress-row-abbr{max-height:180px}}
@media(max-width:400px){.workflow-heading h2{font-size:16px}.workflow-count{padding:4px 7px}.motif-save-button{flex-basis:64px}.motif-footer{flex-direction:column;align-items:flex-start}.progress-actions-secondary{flex-wrap:wrap}.progress-actions-secondary #progressLocateBtn{flex:1 1 100%}}
@media print{.workflow-grid-refined{display:none!important}}

/* ─── v1.8 / Reduced-clutter workstation ─────────────────────────── */
.studio-nav{max-width:1790px;margin:0 auto;padding:10px 24px 0;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.studio-tabs{display:flex;gap:5px;align-items:center;background:#eee9f4;border:1px solid #e8e0f0;border-radius:13px;padding:5px;flex-wrap:wrap}
.studio-tab{appearance:none;border:0;border-radius:9px;background:transparent;color:#746780;padding:10px 13px;font:inherit;font-size:12px;font-weight:780;cursor:pointer;white-space:nowrap}
.studio-tab:hover{color:#594978;background:#faf7fe}
.studio-tab.is-active{color:#fff;background:#7560ae;box-shadow:0 4px 10px #604c8c33}
.studio-actions{display:flex;align-items:center;gap:6px}
.studio-actions .btn{min-height:34px}
.kf-file-menu{position:relative;z-index:30}
.kf-file-menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px}
.kf-file-menu summary::-webkit-details-marker{display:none}
.kf-file-dropdown{position:absolute;right:0;top:calc(100% + 9px);display:grid;gap:5px;padding:9px;background:#fff;border:1px solid #e2dceb;border-radius:12px;min-width:170px;box-shadow:0 16px 40px #29213922}
.kf-file-dropdown .btn{color:#483c5c;justify-content:flex-start;text-align:left;width:100%}
body:not(.kf-show-settings) .sidebar .settings-panel,body:not(.kf-show-settings) .sidebar .yarn-panel{display:none!important}
body .hero{display:none!important}
body[data-studio-view='edit'] .workflow-grid,body[data-studio-view='edit'] .export-panel,body[data-studio-view='edit'] .written-panel,body[data-studio-view='edit'] .dictionary-panel{display:none!important}
body[data-studio-view='progress'] .sidebar,body[data-studio-view='progress'] .stats,body[data-studio-view='progress'] .chart-panel,body[data-studio-view='progress'] .bottom-grid,body[data-studio-view='progress'] .motif-panel,body[data-studio-view='progress'] .export-panel,body[data-studio-view='progress'] .written-panel,body[data-studio-view='progress'] .dictionary-panel{display:none!important}
body[data-studio-view='motifs'] .sidebar,body[data-studio-view='motifs'] .stats,body[data-studio-view='motifs'] .chart-panel,body[data-studio-view='motifs'] .bottom-grid,body[data-studio-view='motifs'] .progress-panel,body[data-studio-view='motifs'] .export-panel,body[data-studio-view='motifs'] .written-panel,body[data-studio-view='motifs'] .dictionary-panel{display:none!important}
body[data-studio-view='export'] .sidebar,body[data-studio-view='export'] .stats,body[data-studio-view='export'] .chart-panel,body[data-studio-view='export'] .bottom-grid,body[data-studio-view='export'] .workflow-grid,body[data-studio-view='export'] .dictionary-panel{display:none!important}
body[data-studio-view='reference'] .sidebar,body[data-studio-view='reference'] .stats,body[data-studio-view='reference'] .chart-panel,body[data-studio-view='reference'] .bottom-grid,body[data-studio-view='reference'] .workflow-grid,body[data-studio-view='reference'] .export-panel,body[data-studio-view='reference'] .written-panel{display:none!important}
body:not([data-studio-view='edit']) .workspace{display:block;max-width:1250px}
body:not([data-studio-view='edit']) .workflow-grid{display:block}
body:not([data-studio-view='edit']) .workflow-grid>.panel{max-width:100%}
body:not([data-studio-view='edit']) .studio-actions #toggleSettingsBtn,body:not([data-studio-view='edit']) .studio-actions #focusBtn{display:none}
body.kf-focus .sidebar,body.kf-focus .stats,body.kf-focus .bottom-grid{display:none!important}
body.kf-focus .workspace{display:block;max-width:1790px}
body.kf-focus .chart-scroll{max-height:calc(100vh - 305px);overflow:auto}
body[data-studio-view='edit'] .stats{display:flex;flex-wrap:wrap;gap:8px}
body[data-studio-view='edit'] .stats .stat{padding:9px 13px;min-height:0;flex:1 1 130px;box-shadow:none;border:1px solid #e9e2ef;border-radius:12px}
body[data-studio-view='edit'] .stats .stat strong{font-size:19px}
body[data-studio-view='edit'] .stats .stat span{font-size:10px}
body[data-studio-view='edit'] .main-content{gap:11px}
body[data-studio-view='edit'] .sidebar{position:sticky;top:82px;max-height:calc(100vh - 90px);overflow:auto;scrollbar-width:thin}
.palette-entry{position:relative;min-width:0}
.palette-entry .palette-item{width:100%;height:100%;padding-right:29px}
.palette-fav{position:absolute;top:5px;right:4px;z-index:1;border:none;background:transparent;color:#afa4bc;border-radius:6px;font-size:17px;padding:5px;cursor:pointer}
.palette-fav:hover,.palette-fav.is-favorite{color:#c38a4e;background:#fff6e9}
.palette-panel .palette{max-height:42vh;overflow:auto;scrollbar-width:thin}
.kf-chart-advanced{position:relative;flex:0 0 auto;align-self:center}
.kf-chart-advanced>summary{list-style:none;cursor:pointer}
.kf-chart-advanced>summary::-webkit-details-marker{display:none}
.kf-chart-advanced-controls{position:absolute;right:0;top:calc(100% + 7px);z-index:20;width:min(540px,calc(100vw - 38px));display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:13px;background:#fff;border:1px solid #e1d9eb;border-radius:14px;box-shadow:0 15px 40px #33274420}
.kf-chart-advanced-controls .inline-select{min-width:100%}
.chart-toolbar{overflow:visible}
.repeat-drawer{min-width:0;grid-column:auto;align-self:start}
.repeat-drawer>summary{cursor:pointer;padding:15px 18px;list-style:none;border-radius:13px;border:1px solid #e9e2ef;background:#fdfbff;color:#675288;font-size:13px;font-weight:800}
.repeat-drawer>summary small{font-size:10px;font-weight:600;color:#aa9bad;margin-left:8px}
.repeat-drawer>summary::-webkit-details-marker{display:none}
.repeat-drawer[open]>.repeat-panel{margin-top:9px}
.kf-written-toggle-line{display:flex;justify-content:flex-end;padding:8px 13px 0}
.kf-shortcut-dialog{border:1px solid #dfd2ee;border-radius:18px;background:#fff;color:#382f46;width:min(420px,calc(100vw - 28px));padding:22px;box-shadow:0 18px 80px #29203955}
.kf-shortcut-dialog::backdrop{background:#24203388}
.kf-shortcut-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}
.kf-shortcut-dialog dl{display:grid;grid-template-columns:90px 1fr;gap:10px;font-size:13px}
.kf-shortcut-dialog dt{border-radius:6px;background:#f0ebfa;padding:5px 8px;color:#66508b;font-weight:800}
.kf-shortcut-dialog dd{padding:5px 0;margin:0}
@media(max-width:1090px){.studio-nav{padding:10px 14px 0}.studio-tabs{flex:1 1 100%}.studio-tab{flex:1 1 auto}body[data-studio-view='edit'] .sidebar{position:static;max-height:none;overflow:visible}}
@media(max-width:700px){.studio-nav{padding:8px 11px 0;gap:8px}.studio-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}.studio-tab{font-size:11px;padding:9px 5px}.studio-actions{width:100%;justify-content:flex-end}.kf-file-dropdown{right:0}.palette-panel .palette{max-height:270px}body[data-studio-view='edit'] .stats .stat{flex:1 1 40%;padding:9px 11px}.kf-chart-advanced-controls{right:-8px}}
@media print{.studio-nav,.kf-file-menu,.kf-chart-advanced,.kf-shortcut-dialog{display:none!important}body .workspace{display:none!important}body #knitformPrint{display:block!important}}

/* v1.8 / Row range repeat preview */
.repeat-panel .repeat-preview{margin:12px 0 10px;padding:12px 14px;border-radius:11px;border:1px solid #bbdfcd;background:#f2fbf6;color:#29684b;font-size:12px;font-weight:650;line-height:1.7;word-break:keep-all}
.repeat-panel .repeat-preview.invalid{border-color:#ecd4c4;background:#fff7f2;color:#9d5638}
.repeat-panel #repeatBtn:disabled{background:#c5bdce;color:#fff;box-shadow:none;cursor:not-allowed}
.repeat-drawer[open]>summary{border-color:#c6b4e1;background:#f6f1fc}

/* v1.8 release — concise narrative / setup method / multi-format PDF */
.start-method-panel{margin:13px 0 2px;padding:13px;border:1px solid #ebe5f2;border-radius:12px;background:#fcfaff}
.start-method-panel .tiny{margin:7px 0 0}
.foundation-controls{display:grid;gap:12px;margin-top:12px}
.foundation-controls small{display:block;font-size:11px;color:#8c8197;line-height:1.5;margin-top:5px}
.progress-display-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.progress-view-select{font-size:11px;font-weight:700;color:#766688;display:flex;gap:6px;align-items:center;white-space:nowrap}
.progress-view-select select{border:1px solid #e5ddeb;border-radius:10px;background:#fff;padding:7px 23px 7px 9px;color:#4b395c;font-size:12px;max-width:160px}
.progress-row-written-inline{font-size:15px;font-weight:650;line-height:1.9;color:#403451;background:#fff;border:1px solid #ebe2f4;border-radius:12px;padding:13px 15px;margin:6px 0 10px;overflow-wrap:anywhere;white-space:pre-line}
.progress-row-abbr+.progress-row-written-inline:not(.hidden){margin-top:14px}
#progressWrittenToolbar{justify-content:flex-end;padding-top:9px}
.export-types{grid-template-columns:repeat(5,minmax(0,1fr))}
#exportPreview .preview-line span{white-space:pre-line}
#knitformPrint .print-narrative{padding-top:3mm;border-top:1px dashed #e5dce9;margin-top:3mm;white-space:pre-line}
@media(max-width:1150px){.export-types{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.export-types{grid-template-columns:repeat(2,minmax(0,1fr))}.progress-current-heading{flex-wrap:wrap;gap:8px}.progress-display-actions{width:100%;justify-content:space-between}.progress-row-written-inline{font-size:13px;padding:11px 12px}}

/* Keep PDF workspace focused on export controls; narrative is in the preview/PDF. */
body:not([data-studio-view="export"]) .written-drawer{display:none!important}
.written-drawer{margin-top:16px;border-radius:16px}
.written-drawer>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center;padding:17px 20px;color:#57446f;border:1px solid #e7deee;border-radius:14px;background:#f9f6fc;font-weight:700}
.written-drawer>summary::-webkit-details-marker{display:none}
.written-drawer>summary small{font-weight:500;color:#9488a1}
.written-drawer[open]>summary{border-radius:14px 14px 0 0}
.written-drawer>.written-panel{margin-top:0;border-radius:0 0 14px 14px}
@media print{#knitformPrint .print-summary{grid-template-columns:repeat(5,minmax(0,1fr))}}
/* ========================================================================
   KNITFORM v1.9 — ATELIER PRO / visual system
   Design-only layer: no ID changes, no markup changes, no JS changes.
   Screen media only; the established A4/PDF print rules remain unchanged.
   ======================================================================== */
@media screen {
  :root {
    --bg: #f4f4f6;
    --paper: #ffffff;
    --paper-alt: #fbfbfd;
    --ink: #242432;
    --ink-soft: #4d4c60;
    --muted: #747485;
    --line: #e7e7ee;
    --line-strong: #d5d4e0;
    --navy: #262538;
    --accent: #6956ab;
    --accent-dark: #52408e;
    --accentlight: #f2f0f9;
    --peach: #d7a59b;
    --good: #24765e;
    --bad: #b34858;
    --shadow: 0 3px 16px rgba(34, 33, 51, .025);
    --shadow-hover: 0 8px 22px rgba(39, 36, 61, .07);
    --radius: 15px;
  }
  html { background: var(--bg); }
  body {
    background: #f4f4f6;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.55;
    letter-spacing: -.011em;
  }
  button, select, input, textarea { letter-spacing: inherit; }
  :focus-visible { outline: 2px solid #8070c9; outline-offset: 2px; }
  ::selection { background: #e5dffa; color: #32234f; }

  /* Header / utility menu */
  .topbar {
    min-height: 68px;
    gap: 14px;
    padding: 11px clamp(18px, 2.2vw, 35px);
    background: #272539;
    border-bottom: 1px solid #3a364d;
    box-shadow: 0 3px 15px rgba(22, 20, 38, .11);
  }
  .topbar::after { height: 1px; opacity: .18; background: #b3a0d6; }
  .brand { min-width: 162px; gap: 10px; }
  .brand-icon {
    width: 39px; height: 39px; border-radius: 11px;
    background: #373249; border-color: #5c5374; color: #e1d4fa;
    box-shadow: none; font-size: 27px;
  }
  .brand strong { font-size: 17px; font-weight: 800; letter-spacing: .14em; }
  .brand small { margin-top: 4px; font-size: 8px; letter-spacing: .25em; color: #b9b1cc; }
  .top-tag { color: #b0aabc; border-left-color: #50495f; }
  .top-actions { gap: 7px; }
  .save-indicator { color: #acd6bb; font-size: 11px; margin-right: 9px; }
  .top-actions .btn-quiet { color: #eceaf5; border-color: #504b62; background: transparent; }
  .top-actions .btn-quiet:hover { background: #3b3650; border-color: #79708e; }
  .kf-file-dropdown {
    border: 1px solid #e5e4ee; background: #fff;
    border-radius: 12px; box-shadow: 0 14px 35px #2420322c;
  }
  .kf-file-dropdown .btn { color: #3e3b52; border: none; }
  .kf-file-dropdown .btn:hover { background: #f1eff8; }

  /* Top navigation: quiet and compact */
  .studio-nav { padding-top: 14px; padding-bottom: 0; gap: 14px; }
  .studio-tabs {
    gap: 3px; padding: 4px; background: #eae9f0; border-color: #e0dfe8;
    border-radius: 11px;
  }
  .studio-tab {
    border-radius: 8px; padding: 9px 14px;
    color: #666274; font-size: 12px; font-weight: 690;
    transition: background .14s, color .14s, box-shadow .14s;
  }
  .studio-tab:hover:not(.is-active) { background: #f7f6fa; color: #403a54; }
  .studio-tab.is-active { background: #fff; color: #4e408b; box-shadow: 0 1px 5px rgba(41, 36, 62, .09); }
  .studio-actions { gap: 7px; }
  .studio-actions .btn { min-height: 35px; background: #fff; }

  /* Working surfaces and hierarchy */
  .workspace { max-width: 1780px; grid-template-columns: 276px minmax(0, 1fr); gap: 17px; padding: 16px 24px 28px; }
  .sidebar { gap: 12px; }
  .main-content { gap: 13px; }
  .panel {
    padding: 22px; border: 1px solid var(--line);
    border-radius: 15px; background: #fff;
    box-shadow: var(--shadow);
  }
  .sidebar .panel { padding: 19px 17px; }
  .panel::before { display: none; }
  .section-eyebrow { color: #8274a8; font-size: 9px; font-weight: 800; letter-spacing: .135em; margin-bottom: 5px; }
  h1, h2, h3 { color: #282637; }
  h2 { font-size: 17px; font-weight: 760; letter-spacing: -.045em; }
  h3 { font-size: 13px; font-weight: 740; }
  .panel-head { margin-bottom: 16px; gap: 11px; }
  .panel-head p, .subline { color: #858394; font-size: 11.5px; line-height: 1.6; }
  .tiny, .field-footnote, .sidebar-help { color: #898697; font-size: 10.5px; }

  /* Fields and buttons: precise, tactile */
  .field { gap: 6px; margin-top: 11px; }
  .field > span { font-size: 11px; font-weight: 700; color: #615d70; }
  .field input, .field select, .field textarea, .inline-select select {
    border-radius: 9px; border: 1px solid #dedde7;
    background: #fdfdff; color: #302d3d;
    box-shadow: none; transition: border-color .15s, background .15s, box-shadow .15s;
  }
  .field input:hover, .field select:hover, .field textarea:hover { border-color: #c6c0d6; }
  .field input:focus, .field select:focus, .field textarea:focus {
    border-color: #8775bc; background: #fff;
    box-shadow: 0 0 0 3px rgba(106, 87, 171, .10);
  }
  .btn { min-height: 38px; border-radius: 9px; font-size: 12px; font-weight: 720; box-shadow: none; }
  .btn:hover:not(:disabled) { transform: none; }
  .btn-primary { border: 1px solid #6956ab; background: #6956ab; color: #fff; box-shadow: 0 2px 6px rgba(83, 61, 152, .14); }
  .btn-primary:hover:not(:disabled) { background: #56448f; border-color: #56448f; box-shadow: 0 3px 9px rgba(83, 61, 152, .18); }
  .btn-outline { border-color: #dedce9; background: #fff; color: #504960; box-shadow: none; }
  .btn-outline:hover:not(:disabled) { background: #f7f5fc; border-color: #b8abda; color: #51408c; }
  .btn-danger { background: #fff; border-color: #eddde1; color: #a7525c; }
  .btn-sm { min-height: 34px; font-size: 11px; }
  button:disabled { opacity: .48; }

  /* Stats deliberately subordinate to chart */
  body[data-studio-view='edit'] .main-content { gap: 12px; }
  body[data-studio-view='edit'] .stats { gap: 8px; }
  body[data-studio-view='edit'] .stats .stat {
    border-color: #e6e5ed; border-radius: 11px; padding: 11px 15px;
    min-height: 70px; background: #fff;
  }
  body[data-studio-view='edit'] .stats .stat::before { top: 0; left: 0; width: 3px; height: 100%; border-radius: 11px 0 0 11px; background: #9f93bd; opacity: .7; }
  body[data-studio-view='edit'] .stats .stat:nth-child(2)::before { background: #c79c93; }
  body[data-studio-view='edit'] .stats .stat:nth-child(3)::before { background: #79a899; }
  body[data-studio-view='edit'] .stats .stat:nth-child(4)::before { background: #8a88a3; }
  body[data-studio-view='edit'] .stats .stat span { color: #7c788a; font-size: 10px; }
  body[data-studio-view='edit'] .stats .stat strong { font-size: 21px; color: #302c43; letter-spacing: -.035em; }

  /* Stitch palette */
  .palette-panel .panel-head { margin-bottom: 9px; }
  .active-tool-badge { min-width: 37px; height: 37px; border-radius: 10px; background: #f0edf9; border-color: #e2dcf1; color: #59438f; }
  .palette-filters { gap: 5px; margin: 11px 0 7px; }
  .filter-pill { border-color: #e4e2eb; color: #686277; font-size: 10px; padding: 6px 9px; font-weight: 690; }
  .filter-pill:hover { border-color: #b3a5d7; background: #faf9fd; }
  .filter-pill.selected { background: #6956ab; border-color: #6956ab; color: #fff; }
  .palette { gap: 6px; }
  .palette-panel .palette { max-height: min(48vh, 460px); padding: 2px 4px 5px 2px; }
  .palette-item { min-height: 55px; gap: 7px; padding: 7px; border-color: #e7e6ed; border-radius: 10px; }
  .palette-item:hover:not(.selected) { background: #f7f6fb; border-color: #c7bedc; transform: none; }
  .palette-item.selected { background: #f4f1fc; border-color: #8873be; box-shadow: inset 0 0 0 1px rgba(113, 88, 172, .13); }
  .palette-item .symbol { height: 33px; min-width: 32px; border-radius: 7px; background: #f5f4f8; border-color: #e6e4ed; }
  .palette-item.selected .symbol { background: #e8e1f8; }
  .palette-item .name { font-size: 11px; }
  .palette-item small { color: #8b8798; font-size: 9px; }
  .palette-fav { color: #aaa4b7; }
  .tool-detail { margin: 13px 0; padding: 12px; border-radius: 10px; background: #f8f7fb; border-color: #e9e6ef; box-shadow: none; }
  .tool-detail-head strong { color: #4d4266; }
  .tool-detail-head span { background: #eeebf6; }
  .tool-detail .detail-note { color: #9a6259; }
  .sidebar-help { border-top: 1px solid #efedf3; padding-top: 12px; }

  /* Chart: distinct canvas with clear precision grid */
  .chart-panel { border-color: #dfe0e9; padding: 22px 22px 17px; }
  .chart-panel > .panel-head { margin-bottom: 14px; padding-bottom: 14px; border-color: #eeedf2; }
  .chart-toolbar {
    gap: 9px; margin-bottom: 12px; padding: 11px 12px;
    border-radius: 11px; background: #f7f7fa; border: 1px solid #e7e6ef;
  }
  .toolbar-icon { height: 36px; min-width: 36px; border-radius: 9px; background: #ece8f7; color: #51418b; border-color: #ded5f1; }
  .toolbar-active strong { color: #322d45; font-size: 12px; }
  .toolbar-active small { color: #8c8898; }
  .toolbar-divider { background: #dcdbe6; }
  .chart-scroll {
    min-height: 290px; max-height: 750px;
    border-radius: 12px; border: 1px solid #dfe0e9;
    padding: 20px 18px;
    background-color: #fff;
    background-image: linear-gradient(to right, #f1f1f6 1px, transparent 1px), linear-gradient(to bottom, #f1f1f6 1px, transparent 1px);
    background-size: 32px 32px;
    scrollbar-color: #c7c3d7 #f8f8fb;
  }
  .row-number { background: #fdfdff; color: #666177; border-color: #e4e2ed; border-radius: 8px; }
  .chart-row.selected .row-number { background: #eeeaf9; border-color: #a391d0; color: #57468c; box-shadow: none; }
  .stitch-cell { border-color: #cecbd7; color: #282533; }
  .stitch-cell.selected-row { border-color: #9684c7; }
  .stitch-cell:hover { filter: none; outline: 2px solid #725eb5; }
  .chart-foot { color: #777484; }
  .legend-sym { border-color: #e2ddf0; background: #f3f0fa; color: #5b4893; }
  .range-help, .repeat-drawer>summary { background: #f8f7fc; border-color: #e8e4f0; }
  .repeat-drawer>summary { color: #5f5080; }
  .repeat-drawer[open]>summary { background: #f2eefb; }
  .kf-chart-advanced-controls { box-shadow: 0 14px 35px rgba(39, 30, 57, .12); border-color: #e2deeb; }
  .start-method-panel { background: #f8f7fb; border-color: #e7e4ee; }

  /* Progress, export and reference screens */
  .workflow-grid-refined > .panel, .progress-panel, .export-panel, .dictionary-panel { border-color: #e4e3eb; }
  .progress-hero { background: #f5f3fa; border-color: #e9e5f2; }
  .progress-hero .progress-head strong { color: #302b47; }
  .progress-hero .progress-head span { color: #6956ab; }
  .progress-hero .progress-meter { background: #e1dbea; }
  .progress-meter span { background: #745db5; }
  .progress-current { background: #fff; border-color: #e5e3ec; }
  .progress-current #progressRowMeta { background: #eeeaf8; color: #604e95; }
  .progress-row-abbr { color: #322943; }
  .progress-details { background: #faf9fc; border-color: #e8e5ef; }
  .progress-row-written-inline { background: #faf9fd; border-color: #e9e5f1; }
  .export-type, .reference-card { border-radius: 12px; box-shadow: none; }
  .export-type:has(input:checked) { border-color: #7f6bbb; background: #f5f2fc; }
  .export-preview { background: #fff; }
  .dictionary-notice { background: #f8f7fb; border-color: #e9e6f1; }
  .reference-card:hover { box-shadow: 0 6px 18px rgba(36, 29, 55, .045); }
  .written-drawer > summary { background: #f7f6fb; border-color: #e7e4ee; }
  .footer { color: #9a97a5; }
  .kf-shortcut-dialog { border-color: #dfdae9; box-shadow: 0 24px 70px rgba(30, 28, 45, .25); }

  /* Responsive workbench */
  @media (max-width: 1500px) {
    .workspace { grid-template-columns: 270px minmax(0, 1fr); gap: 14px; padding: 16px 18px 25px; }
    .sidebar .panel { padding: 18px 15px; }
  }
  @media (max-width: 1090px) {
    .topbar { position: relative; }
    .workspace { display: block; padding: 15px; }
    body[data-studio-view='edit'] .sidebar { position: static; max-height: none; overflow: visible; }
  }
  @media (max-width: 700px) {
    .topbar { min-height: 0; padding: 13px 15px; gap: 9px; }
    .brand-icon { width: 37px; height: 37px; }
    .top-actions { gap: 6px; }
    .studio-nav { padding: 11px 12px 0; }
    .studio-tabs { gap: 3px; }
    .studio-tab { padding: 9px 5px; font-size: 11px; }
    .studio-actions { gap: 6px; }
    .workspace { padding: 12px; }
    .panel, .sidebar .panel { border-radius: 13px; padding: 17px 14px; }
    body[data-studio-view='edit'] .stats .stat { padding: 11px 12px; }
    .chart-toolbar { padding: 10px; }
    .chart-scroll { min-height: 260px; padding: 13px 10px; }
    .palette-panel .palette { max-height: 285px; }
    .export-type { border-radius: 10px; }
  }
}

/* Mobile palette: browse stitches horizontally instead of a tall wall of cards. */
@media screen and (max-width: 700px) {
  .palette-panel .palette {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    padding: 4px 3px 11px;
  }
  .palette-panel .palette-entry { flex: 0 0 156px; scroll-snap-align: start; }
  .palette-panel .palette-item { min-height: 56px; }
  .palette-panel .palette .empty-library { flex: 1 0 100%; }
  .palette-count { margin-top: 8px; }
  .palette-panel .tool-detail { margin-top: 8px; }
}

/* KNITFORM v1.9.1 — keep stitch groups and chart continuation readable in PDF */
@media screen {
  #exportChartWidthWrap { white-space: normal; }
  #exportChartWidthWrap select { max-width: 225px; }
}
@media print {
  #knitformPrint .print-continuation {
    background: #f5f2fa; border: 1px solid #e7dff1; color: #53466c;
    border-radius: 2mm; padding: 2.6mm 3mm; margin: 0 0 3mm;
    font-size: 9px; font-weight: 720; word-break: keep-all;
    break-inside: avoid; page-break-inside: avoid;
  }
  #knitformPrint .print-svg-frame { break-inside: avoid; page-break-inside: avoid; }
  #knitformPrint .print-sheet { margin-bottom: 0; }
  #knitformPrint .print-text-row { break-inside: avoid; page-break-inside: avoid; }
  #knitformPrint .print-text-row-title { break-after: avoid; page-break-after: avoid; }
  #knitformPrint .print-pattern-instruction { word-break: keep-all; overflow-wrap: normal; line-height: 1.75; margin: 0 0 1.2mm; }
  #knitformPrint .print-instruction-unit {
    display: inline-block; vertical-align: baseline;
    white-space: normal; max-width: 100%; overflow-wrap: anywhere;
    break-inside: avoid; page-break-inside: avoid;
  }
  #knitformPrint .print-instruction-separator { display:inline; white-space:nowrap; color:#8b7a9c; }
  #knitformPrint .print-text-sheet .print-summary { margin-bottom: 4mm; }
  #knitformPrint .print-text-sheet .print-folio { margin-top: 3mm; }
}


/* KNITFORM v2.0.1 — native scrolling for the whole left sidebar.
   No grab-to-scroll, no draggable separator, no nested vertical palette scrolling. */
@media screen and (min-width: 1091px) {
  body[data-studio-view="edit"]:not(.kf-focus) .workspace {
    grid-template-columns: 276px minmax(0, 1fr);
    gap: 17px;
    align-items: start;
  }
  body[data-studio-view="edit"]:not(.kf-focus) .sidebar {
    grid-column: 1;
    position: sticky;
    top: 90px;
    height: calc(100vh - 106px);
    height: calc(100dvh - 106px);
    min-height: 220px;
    max-height: calc(100vh - 106px);
    max-height: calc(100dvh - 106px);
    align-self: start;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-gutter: stable;
    scrollbar-width: auto;
    scrollbar-color: #9a8ead #f0edf5;
    overscroll-behavior-y: contain;
    overscroll-behavior-x: none;
    scroll-behavior: auto;
    padding: 0 3px 4px 0;
    border-radius: 12px;
  }
  body[data-studio-view="edit"]:not(.kf-focus) .sidebar:focus-visible {
    outline: 2px solid #8a70c2;
    outline-offset: 2px;
  }
  body[data-studio-view="edit"]:not(.kf-focus) .sidebar::-webkit-scrollbar {
    width: 12px;
  }
  body[data-studio-view="edit"]:not(.kf-focus) .sidebar::-webkit-scrollbar-track {
    background: #f0edf5;
    border-radius: 8px;
  }
  body[data-studio-view="edit"]:not(.kf-focus) .sidebar::-webkit-scrollbar-thumb {
    background: #a59ab9;
    border: 2px solid #f0edf5;
    border-radius: 8px;
  }
  body[data-studio-view="edit"]:not(.kf-focus) .sidebar::-webkit-scrollbar-thumb:hover {
    background: #806da5;
  }
  /* Independent stitch-library scrolling. */
  body[data-studio-view="edit"]:not(.kf-focus) .sidebar .palette-panel .palette {
    max-height: min(48vh, 460px);
    max-height: min(48dvh, 460px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #a79bc4 #f5f1f9;
  }
  body[data-studio-view="edit"]:not(.kf-focus) .main-content {
    grid-column: 2;
    min-width: 0;
  }
}
@media screen and (max-width: 1090px) {
  /* Tablet and phone: keep the natural page scroll and mobile horizontal palette. */
  body[data-studio-view="edit"] .sidebar {
    position: static;
    height: auto;
    max-height: none;
    overflow: visible;
  }
}


/* KNITFORM v2.0.4 — content-first spacing, no oversized empty canvas. */
@media screen {
  body[data-studio-view="edit"] .chart-scroll {
    min-height: 124px;
  }
  .export-preview {gap: 7px;padding: 13px 15px;}
  .export-preview .preview-meta {padding-bottom: 7px;}
  .export-preview .preview-lines {gap: 4px;}
  .export-preview .preview-line {gap: 7px;line-height:1.5;padding-bottom: 5px;}
  .export-preview .preview-foot {padding-top: 7px;}
  .progress-row-abbr {gap: 4px;}
  .progress-row-abbr .progress-token {padding-top: 5px;padding-bottom: 5px;}
}
@media print {
  #knitformPrint .print-sheet-chart-stacked .print-chart-bands {display:flex;flex-direction:column;gap:2.5mm;}
  #knitformPrint .print-chart-band {break-inside:avoid;page-break-inside:avoid;}
  #knitformPrint .print-chart-band .print-continuation {margin:0 0 1mm;padding:1.5mm 2.5mm;border:0;border-left:2px solid #c2b2d8;background:#f7f5fa;}
  #knitformPrint .print-chart-band .print-svg-frame {margin:1.5mm 0 0;}
  #knitformPrint .print-sheet-chart-stacked .print-chart-svg {max-height:unset;}
  #knitformPrint .print-sheet-chart-stacked .print-folio {margin-top:2mm;}
  #knitformPrint .print-text-row {padding:2mm 0;}
  #knitformPrint .print-text-row-title {margin-bottom:.7mm;}
  #knitformPrint .print-pattern-instruction {line-height:1.55;margin:0 0 .55mm;}
  #knitformPrint .print-text-sheet .print-summary {margin-bottom:2.5mm;}
  #knitformPrint .print-legend-grid {gap:2mm;}
  #knitformPrint .print-legend-entry {min-height:19mm;padding:2.1mm;}
  #knitformPrint .print-legend-body p {margin-top:.8mm;line-height:1.4;}
}
@media screen and (max-width:700px) {
  body[data-studio-view="edit"] .chart-scroll {min-height:105px;}
}

/* === v2.0.5 · publication repeat markers === */
.repeat-marker-editor {margin-top:22px;padding:16px 15px;border:1px solid #e4dced;border-radius:13px;background:#fcfbfe;}
.repeat-marker-editor h3 {margin:0 0 6px;font-size:15px;color:#4d3a69;}
.repeat-marker-editor .subline {margin:0 0 12px;font-size:11px;}
.repeat-marker-editor .field-grid {margin:10px 0;}
.repeat-marker-editor .field {min-width:0;}
.repeat-marker-editor .tiny {margin:9px 0;color:#81748b;font-size:11px;line-height:1.55;}
.repeat-mark-list {display:grid;gap:7px;margin-top:12px;}
.repeat-mark-item {display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid #e5daed;border-radius:9px;background:#fff;}
.repeat-mark-text {font-size:11px;line-height:1.5;color:#59486b;overflow-wrap:anywhere;}
.repeat-mark-item .btn {flex-shrink:0;}
.chart-repeat-row .row-number {border-left:3px solid #9567c1;}
.stitch-cell.repeat-mark-cell {box-shadow:inset 0 2px #9a73c4,inset 0 -2px #9a73c4;}
.repeat-mark-tag {font-size:11px;font-weight:750;color:#6d488e;padding:6px 9px;border-left:3px solid #9a72c5;background:#f6f1fb;border-radius:4px;margin:4px 0;}
.repeat-mark-tag.repeat-mark-end {color:#806d91;background:#faf8fc;border-color:#c4b0d8;}
.preview-line span {white-space:pre-line;}
@media print {
  #knitformPrint .print-repeat-notes {display:block;border:1px solid #e3d5ed;border-radius:2mm;padding:1.5mm 3mm;margin:2.5mm 0 1mm;background:#fbf9fd;font-size:9px;line-height:1.45;color:#5b476c;break-inside:avoid;}
  #knitformPrint .print-repeat-notes strong {display:block;color:#663e91;margin-bottom:.5mm;}
  #knitformPrint .print-repeat-directive {margin:1mm 0 2mm;padding:1mm 2mm;border-left:2px solid #9a72c5;background:#f8f4fc;font-size:10px;font-weight:750;color:#654a85;break-inside:avoid;}
  #knitformPrint .print-repeat-end {margin:2mm 0 0;background:#fbf9fd;color:#766386;border-color:#bea8d5;}
}

/* KNITFORM v2.0.6 — fill A4 chart pages with whole, readable chart rows. */
@media print {
  #knitformPrint .print-sheet-chart .print-chart-svg {
    width:var(--kf-print-chart-width,100%);
    max-width:100%;
    height:auto;
    max-height:none;
    object-fit:contain;
  }
  #knitformPrint .print-sheet-chart .print-svg-frame {margin-top:2mm;}
  #knitformPrint .print-sheet-chart .print-chart-bands {align-items:start;}
  #knitformPrint .print-sheet-chart .print-folio {margin-top:2mm;}
}

/* v2.0.7 — direct keyboard repeat range controls */
.repeat-mark-number-fields {margin-top:10px;padding:10px 12px 6px;border-radius:10px;border:1px solid #e6dff0;background:#fff;}
.repeat-mark-number-fields .field-grid {margin:0;}
.repeat-mark-number-fields input {font-variant-numeric:tabular-nums;}
.repeat-mark-range-preview {margin:9px 0 11px;padding:8px 10px;border:1px solid #d7ebdf;border-radius:8px;background:#f5faf7;color:#345f47;font-size:12px;line-height:1.55;}
.repeat-mark-range-preview.invalid {border-color:#ecd5d5;background:#fff7f7;color:#a43a4a;}
@media(max-width:480px){.repeat-mark-number-fields {padding:10px;} .repeat-mark-number-fields .field-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}}

/* v2.0.8 — two-click repeat marker mode */
#repeatMarkScope:has(option[value="clicks"]:checked){border-color:#7b65b5;}
.repeat-mark-range-preview {min-height:36px;}

/* v2.0.8 — native repeat conditions and compact written-pattern printing */
.repeat-marker-editor #repeatMarkRangePreview {white-space:pre-line;line-height:1.65;}
.repeat-marker-editor #repeatMarkCountField.hidden,
.repeat-marker-editor #repeatMarkTargetField.hidden,
.repeat-marker-editor #repeatMarkLengthScopeField.hidden {display:none!important;}
@media print {
  #knitformPrint .print-finish-note {margin:3mm 0 1mm;padding:2mm 3mm;border-top:1px solid #e7dff1;background:#faf8fc;break-inside:avoid;page-break-inside:avoid;font-size:10px;line-height:1.55;color:#564669;}
  #knitformPrint .print-finish-note strong {display:block;margin-bottom:1mm;color:#63488a;}
  #knitformPrint .print-finish-note p {margin:0;}
}

@media print {
  /* Keep folios on their own sheets instead of orphaning them onto a new page. */
  #knitformPrint .print-sheet {min-height:273mm;padding-bottom:9mm;}
  #knitformPrint .print-folio {position:absolute;left:0;right:0;bottom:0;margin:0!important;}
  #knitformPrint.print-landscape .print-sheet {min-height:186mm;}
}

/* KF-SIDEBAR-FIX-START */

/* Desktop: one reliable sidebar scrollbar */
@media screen and (min-width: 1091px) {

  body[data-studio-view="edit"]:not(.kf-focus) #stitchSidebar {
    position: sticky;
    top: 90px;

    display: flex;
    flex-direction: column;

    height: calc(100vh - 106px);
    height: calc(100dvh - 106px);

    max-height: calc(100vh - 106px);
    max-height: calc(100dvh - 106px);

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;

    scrollbar-width: auto;
    scrollbar-color: #9a8ead #f0edf5;
  }

  /* Prevent panels from being compressed */
  body[data-studio-view="edit"]:not(.kf-focus)
  #stitchSidebar > .panel {
    flex: 0 0 auto;
  }

  /* Do not clip the stitch library */
  body[data-studio-view="edit"]:not(.kf-focus)
  #stitchSidebar .palette-panel {
    overflow: visible;
  }

  /* One column, no nested scrolling */
  body[data-studio-view="edit"]:not(.kf-focus)
  #stitchSidebar .palette-panel .palette {
    display: grid;
    grid-template-columns: minmax(0, 1fr);

    max-height: none;
    overflow: visible;

    align-content: start;
    gap: 7px;
  }

  /* Wider, readable stitch cards */
  body[data-studio-view="edit"]:not(.kf-focus)
  #stitchSidebar .palette-entry {
    min-width: 0;
  }

  body[data-studio-view="edit"]:not(.kf-focus)
  #stitchSidebar .palette-item {
    width: 100%;
    min-height: 56px;
    min-width: 0;
  }

  body[data-studio-view="edit"]:not(.kf-focus)
  #stitchSidebar .palette-item .symbol {
    width: 42px;
    min-width: 42px;
    flex: 0 0 42px;
  }

  body[data-studio-view="edit"]:not(.kf-focus)
  #stitchSidebar .palette-label {
    min-width: 0;
  }

  body[data-studio-view="edit"]:not(.kf-focus)
  #stitchSidebar .palette-item .name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* KF-SIDEBAR-FIX-END */


/* KF-PRINT-FLOW-V3-START */
/* Natural paged-media flow: no character-count pagination or empty legend sheet. */
@media print {
  #knitformPrint .print-flow-sheet {
    page: knitform-flow;
    display: block;
    position: static;
    min-height: 0;
    padding: 0;
    margin: 0;
    break-before: auto;
    break-after: auto;
    page-break-after: auto;
  }
  #knitformPrint .print-flow-sheet .print-folio { display: none; }
  #knitformPrint .print-flow-sheet .print-text-row {
    padding: .88mm 0;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  #knitformPrint .print-flow-sheet .print-text-row-title { margin-bottom: .3mm; }
  #knitformPrint .print-flow-sheet .print-repeat-directive {
    font-size: 9.5px;
    margin: .5mm 0 .75mm;
    padding: .5mm 2mm;
    line-height: 1.35;
  }
  #knitformPrint .print-flow-sheet .print-repeat-end { margin: .75mm 0 0; }
  #knitformPrint .print-flow-sheet .print-pattern-instruction {
    font-size: 10.75px;
    line-height: 1.43;
    margin: 0;
  }
  #knitformPrint .print-flow-sheet .print-legend-section {
    margin-top: 5mm;
    break-before: auto;
    break-after: auto;
    page-break-after: auto;
  }
  #knitformPrint .print-flow-sheet .print-legend-section .print-header {
    padding-top: 1.5mm;
    margin-bottom: 3mm;
  }
  #knitformPrint .print-flow-sheet .print-legend-grid {
    break-inside: auto;
  }
  #knitformPrint .print-flow-sheet .print-disclaimer {
    break-before: avoid;
    page-break-before: avoid;
    margin: 2mm 0 0;
    padding-top: 2mm;
  }
  #knitformPrint .print-flow-sheet .print-legend-entry {
    min-height: 15.5mm;
    padding: 1.5mm;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  #knitformPrint .print-flow-sheet .print-legend-icon { width: 10.5mm; height: 10.5mm; }
  #knitformPrint .print-flow-sheet .print-legend-entry { grid-template-columns: 11mm minmax(0,1fr); gap: 2mm; }
}
/* KF-PRINT-FLOW-V3-END */


/* KF-PRINT-READABILITY-V1-START */
/* Clear row hierarchy without restoring oversized page breaks. */
@media print {
  #knitformPrint .print-flow-sheet .print-text-row {
    padding: 1mm 1.4mm;
    margin: 0 -1.4mm;
    border-bottom: 1px solid #e1d7eb;
  }
  #knitformPrint .print-flow-sheet .print-text-row:nth-child(even) {
    background: #faf9fc;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  #knitformPrint .print-flow-sheet .print-text-row-title { margin-bottom: .45mm; }
  #knitformPrint .print-flow-sheet .print-text-row-title strong {
    color: #493363;
    font-size: 11.4px;
    letter-spacing: .005em;
  }
  #knitformPrint .print-flow-sheet .print-text-row-title span {
    font-size: 9.6px;
    color: #61546e;
    font-variant-numeric: tabular-nums;
  }
  #knitformPrint .print-flow-sheet .print-pattern-instruction {
    font-size: 11.05px;
    line-height: 1.48;
    color: #211c2b;
    margin: 0;
  }
  #knitformPrint .print-flow-sheet .print-repeat-directive {
    font-size: 9.8px;
    line-height: 1.4;
    color: #503673;
    padding: .65mm 2.3mm;
  }
  #knitformPrint .print-flow-sheet .print-finish-note { font-size: 10.1px; }
  #knitformPrint .print-flow-sheet .print-legend-entry {
    min-height: 15.5mm;
    border-color: #dbd1e6;
  }
  #knitformPrint .print-flow-sheet .print-legend-body strong {
    color: #392746;
    font-size: 10.35px;
  }
  #knitformPrint .print-flow-sheet .print-legend-body small { color: #64566f; }
  #knitformPrint .print-flow-sheet .print-legend-body p {
    font-size: 9.15px;
    line-height: 1.45;
  }
}
/* KF-PRINT-READABILITY-V1-END */

/* KF-PROGRESS-REPEAT-START */
/* Progress-only styling. PDF print styles and editor layout stay unchanged. */
.progress-repeat-state{margin:12px 0 0;padding:12px 14px;border:1px solid #d9c9ed;background:#f3edfc;border-left:4px solid #9072be;color:#523b7e;font-size:12px;font-weight:750;border-radius:10px;line-height:1.65}
.progress-until-actions{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0}
.progress-until-actions .btn{flex:1 1 155px}
.progress-repeat-state.hidden,.progress-until-actions.hidden{display:none!important}
@media(max-width:600px){.progress-repeat-state{font-size:11px}.progress-until-actions{flex-direction:column}}
/* KF-PROGRESS-REPEAT-END */