/*
 * 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;}
  #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}}