/* Stitch Tracker: big, calm controls for stitchers of every age. */
.st { --st-ink: #1f2d2a; --st-sage: #2f6f5a; --st-coral: #bd4b2d; --st-mist: #f6f8f7; --st-line: #e3e9e6; font-size: 18px; }
.st-loading, .st-notice { background: var(--st-mist); border-radius: 14px; padding: 16px 18px; }
.st-app { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.st-head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.st-title { font-size: 24px; font-weight: 800; margin: 0; }
.st-progress { flex: 1 1 240px; }
.st-progress__bar { height: 14px; background: var(--st-line); border-radius: 10px; overflow: hidden; }
.st-progress__bar span { display: block; height: 100%; background: var(--st-sage); transition: width .3s; }
.st-progress__text { font-weight: 800; font-size: 17px; margin-top: 4px; }
.st-stage { position: relative; background: #fff; border: 2px solid var(--st-line); border-radius: 18px; overflow: hidden; height: min(72vh, 760px); touch-action: none; user-select: none; }
.st-stage canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.st-stage.is-marking canvas { cursor: crosshair; }
.st-tools { position: absolute; right: 12px; top: 36px; display: flex; flex-direction: column; gap: 8px; }
.st-tools button, .st-bar button { font: inherit; font-weight: 800; border: 0; border-radius: 14px; min-width: 52px; min-height: 52px; padding: 0 14px; background: #fff; color: var(--st-ink); box-shadow: 0 2px 8px rgba(31,45,42,.18); cursor: pointer; }
.st-tools button { font-size: 26px; }
.st-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.st-bar { display: flex; flex-wrap: wrap; gap: 10px; }
.st-bar .st-mark { background: var(--st-coral); color: #fff; min-width: 190px; }
.st-bar .st-mark[aria-pressed="true"] { background: var(--st-sage); }
.st-bar button:disabled { opacity: .45; cursor: default; }
.st-legend { margin: 0; font-size: 16px; color: #3f4c49; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.st-key { display: inline-block; width: 18px; height: 18px; border-radius: 4px; vertical-align: middle; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.st-key--todo { background: #f3b9b4; }
.st-key--done { background: #e76f51; }
.st-key--fdone { background: rgb(190,214,202); }
.st-help { background: var(--st-mist); border-radius: 14px; padding: 12px 14px; font-size: 17px; line-height: 1.5; margin: 0; }
.st-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.st-palette { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: min(64vh, 680px); overflow: auto; }
.st-palette button { width: 100%; display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; text-align: left; font: inherit; background: #fff; border: 2px solid var(--st-line); border-radius: 14px; padding: 8px 10px; cursor: pointer; }
.st-palette button[aria-pressed="true"] { border-color: var(--st-coral); box-shadow: 0 0 0 3px rgba(189,75,45,.2); }
.st-swatch { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-size: 22px; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.st-color strong { display: block; font-size: 17px; }
.st-color small { display: block; font-size: 15px; color: #4d5b57; }
.st-color .st-mini { height: 6px; background: var(--st-line); border-radius: 6px; margin-top: 5px; overflow: hidden; }
.st-color .st-mini span { display: block; height: 100%; background: var(--st-sage); }
.st-all { font: inherit; font-weight: 800; border: 2px dashed var(--st-line); background: var(--st-mist); border-radius: 14px; min-height: 48px; cursor: pointer; }
.st-save { font-size: 15px; color: #4d5b57; min-height: 1.4em; }
.st-demo-btn { margin-top: 6px; }
.st-mine-title { font-size: 24px; margin-top: 30px; }
.st-mine { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.st-mine a { display: flex; flex-direction: column; gap: 6px; background: var(--st-mist, #f6f8f7); border-radius: 16px; padding: 14px; text-decoration: none; color: #1f2d2a; }
.st-mine img { width: 100%; height: 160px; object-fit: cover; border-radius: 10px; }
.st-mine strong { color: #2f6f5a; }
.st-product { background: #eef3fb; border-radius: 14px; padding: 12px 14px; font-size: 17px; margin-top: 14px; }
.st-product__btn { display: inline-block; background: #2f6f5a; color: #fff !important; font-weight: 800; text-decoration: none; padding: 10px 18px; border-radius: 40px; }
@media (max-width: 900px) {
  .st-app { grid-template-columns: minmax(0, 1fr); }
  .st-stage { height: 62vh; }
  .st-palette { max-height: none; flex-direction: row; overflow-x: auto; padding-bottom: 6px; }
  .st-palette li { flex: 0 0 210px; }
}
@media (max-width: 600px) {
  .st-stage { height: min(70vh, calc(100vw + 60px)); }
  .st-tools { flex-direction: row; top: auto; bottom: 12px; }
  .st-bar button { flex: 1 1 auto; }
}

/* Patterns from other shops: unlock cards, upload form, own list */
.st-own { margin-top: 36px; }
.st-notice.is-ok { background: #e6f0ea; }
.st-unlock__lead { font-size: 19px; }
.st-unlock__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 16px 0; }
.st-unlock__card { border: 2px solid #e3e9e6; border-radius: 18px; padding: 20px 22px; background: #fff; }
.st-unlock__card.is-club { background: #f6f8f7; }
.st-unlock__card p { margin: 0 0 12px; }
.st-unlock__price { font-size: 30px; font-weight: 800; color: #1f2d2a; }
.st-unlock__price span { font-size: 17px; font-weight: 700; color: #4d5b57; }
.st-unlock__small { font-size: 16px; margin-top: 10px !important; }
.st-formats { font-size: 17px; color: #3f4c49; }
.st-import { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; background: #f6f8f7; border-radius: 16px; padding: 16px 18px; }
.st-import label { flex: 1 1 100%; font-size: 18px; }
.st-import input[type="file"] { font: inherit; font-size: 17px; flex: 1 1 260px; min-height: 52px; }
.st-own__count { font-weight: 700; color: #4d5b57; margin-bottom: 0; }
.st-own__list li { display: flex; flex-direction: column; gap: 8px; }
.st-own__list li > a { flex: 1; }
.st-own__list small { font-size: 15px; color: #4d5b57; }
.st-own__delete { font: inherit; font-size: 16px; font-weight: 700; color: #a33f25; background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 6px 0; min-height: 44px; }