.pattern-entry{display:flex;gap:14px;align-items:center;margin:22px 0;padding:18px;border:1px solid #dfc6d0;border-radius:17px;background:#faf0f4;transition:background .2s,border-color .2s}
.pattern-entry:hover{background:#f7e5ed;border-color:#bc8298}
.pattern-entry-icon{font-size:38px;color:var(--berry);line-height:1}
.pattern-entry strong{display:block;font-size:15px}.pattern-entry small{display:block;font-size:12px;color:var(--muted);margin-top:4px}.pattern-entry>span:last-child{margin-left:auto;font-size:24px;color:var(--berry)}

/* Mode colors belong to the controls and desk; chart pixels keep their source palette. */
.pattern-workbench,.pattern-workbench [data-pattern-kind=cross_stitch]{--berry:#9d405e;--berry-dark:#713047;--pattern-border:#e8dbe0;--pattern-soft:#f6eef1;--pattern-sage:#59745d;--pattern-caption:#78656d;--pattern-tint:#fcf8fa;--pattern-stage:#f3eeed;--pattern-dot:#dbcdd37a;--pattern-sampler:#f3e3e8;--pattern-scrollbar:#cda9b8}
.pattern-workbench[data-pattern-kind=beads],.pattern-workbench [data-pattern-kind=beads]{--berry:#196c73;--berry-dark:#115159;--pattern-border:#d1e3e1;--pattern-soft:#edf5f3;--pattern-sage:#59745d;--pattern-caption:#57716f;--pattern-tint:#f7fbfa;--pattern-stage:#eef4f2;--pattern-dot:#bdd7d27a;--pattern-sampler:#dcefeb;--pattern-scrollbar:#91bdb6}
.pattern-workbench [hidden]{display:none!important}
.pattern-workbench :is(button,select,input,summary,a):focus-visible{outline:2px solid var(--berry);outline-offset:3px}
.pattern-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin:0 0 23px;padding:4px 0}
.pattern-heading .back-link{display:inline-flex;align-items:center;min-height:32px;margin:0;font-size:12px}
.pattern-heading h1{display:flex;align-items:center;gap:14px;font-family:ShopRound,'PingFang SC',sans-serif;font-size:28px;line-height:1.4;margin:4px 0 0;font-weight:600}
.pattern-heading h1{color:var(--berry)}
.pattern-admin-tag{font-family:'PingFang SC',sans-serif;font-size:11px;font-weight:400;letter-spacing:0;color:var(--berry);background:var(--pattern-soft);border-radius:5px;padding:3px 7px;white-space:nowrap}
.pattern-source{display:flex;align-items:center;gap:12px;max-width:340px;padding:6px 0;min-width:0}
.pattern-source img{width:44px;height:52px;object-fit:contain;border:3px solid var(--white);border-radius:4px;box-shadow:0 0 0 1px var(--pattern-border);flex:none}
.pattern-source>span:first-of-type{min-width:0}.pattern-source small{display:block;font-size:11px;color:var(--muted);margin-bottom:3px}
.pattern-source strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:500;font-size:13px;line-height:1.65;overflow-wrap:anywhere}
.pattern-source>span:last-child{font-size:16px;color:var(--berry)}
.pattern-layout{display:grid;grid-template-columns:252px minmax(0,1fr);border:1px solid var(--pattern-border);border-radius:20px;background:var(--white);align-items:start;box-shadow:0 5px 24px #65434d04}
.pattern-settings{padding:24px 20px;min-width:0}
.pattern-mode{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:var(--pattern-soft);border-radius:11px;margin-bottom:24px}
.pattern-mode button{--mode-accent:#9d405e;--mode-soft:#f6e8ee;color:var(--mode-accent);border:1px solid transparent;display:flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:7px 3px;border-radius:8px;font-size:13px;transition:background .15s,color .15s}
.pattern-mode button[data-pattern-mode=beads]{--mode-accent:#196c73;--mode-soft:#dcefeb}
.pattern-mode button>span{font-size:17px;line-height:1}
.pattern-mode button:not([aria-pressed=true]):not(:disabled):hover{background:var(--mode-soft);border-color:var(--mode-accent)}
.pattern-mode button[aria-pressed=true]{background:var(--mode-accent);color:white;border-color:var(--mode-accent);box-shadow:0 2px 5px #46383d12}
.pattern-mode button:disabled[aria-pressed=false]{opacity:.45}.pattern-license-note{color:var(--pattern-caption);font-size:11px;margin:-15px 0 19px;line-height:1.7}
#pattern-form{display:grid;gap:15px}#pattern-form label{display:grid;gap:7px;font-size:12px;color:var(--pattern-caption);font-weight:400}
#pattern-form select{width:100%;min-width:0;border:1px solid var(--pattern-border);border-radius:8px;background:var(--white);font-size:13px;min-height:42px;padding:9px 10px;color:var(--ink)}
#pattern-form>.primary{min-height:44px;font-size:13px;border-radius:9px}
.pattern-controls>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;font-weight:600;cursor:pointer;min-height:40px;list-style:none}
.pattern-controls>summary::-webkit-details-marker,.pattern-crop>summary::-webkit-details-marker,.pattern-help>summary::-webkit-details-marker,.pattern-palette>summary::-webkit-details-marker{display:none}
.pattern-controls>summary small{font-size:10px;font-weight:400;color:var(--muted);margin-left:7px}
.pattern-controls>summary:after{content:'−';color:var(--muted);font-size:17px;font-weight:400}.pattern-controls:not([open])>summary:after{content:'+'}
#pattern-settings-summary{display:none}
.pattern-fields{padding-top:13px}.pattern-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 10px}
.pattern-field-hint{font-size:11px;line-height:1.8;color:var(--pattern-caption);margin:12px 0 18px}
.pattern-crop{border-top:1px solid var(--pattern-border);border-bottom:1px solid var(--pattern-border)}
.pattern-crop summary{display:flex;align-items:center;gap:8px;min-height:48px;cursor:pointer;list-style:none;font-size:12px}.pattern-crop summary:before{content:'+';color:var(--berry);font-size:16px}.pattern-crop[open] summary:before{content:'−'}.pattern-crop summary>span{margin-left:auto;font-size:11px;color:var(--muted)}
.pattern-crop-preview{position:relative;max-width:160px;overflow:hidden;margin:2px auto 18px;background:var(--pattern-soft);line-height:0;border-radius:3px}.pattern-crop-preview img{display:block;width:100%;height:auto}.pattern-crop-preview>div{position:absolute;border:2px solid var(--berry);box-shadow:0 0 0 300px #46383d80;pointer-events:none}
.pattern-crop-inputs{display:grid;grid-template-columns:1fr 1fr;gap:10px}#pattern-form .pattern-crop-inputs label{position:relative;gap:4px;font-size:11px}.pattern-crop-inputs input{width:100%;min-width:0;min-height:42px;border-radius:8px;padding:9px 27px 9px 10px;font-size:13px}.pattern-crop-inputs label>span{position:absolute;bottom:10px;right:10px;pointer-events:none;color:var(--muted)}
.pattern-reset-crop{font-size:12px;color:var(--berry);min-height:44px;padding:10px 0;text-decoration:underline;text-underline-offset:4px}.pattern-crop p{font-size:11px;color:var(--muted);line-height:1.8;margin:0 0 15px}
#pattern-message{font-size:12px;line-height:1.7;min-height:0;margin:0;overflow-wrap:anywhere;color:var(--berry-dark)}#pattern-message:empty{display:none}.pattern-output>#pattern-message:not(:empty){padding:10px 12px;margin-bottom:12px;background:var(--pattern-soft);border-radius:8px}
.pattern-history{display:grid;gap:9px;font-size:12px;color:var(--pattern-caption);margin-top:24px}.pattern-history select{width:100%;min-width:0;font-size:11px;min-height:42px;border-radius:8px;border-color:var(--pattern-border);padding:8px;background:var(--white);text-overflow:ellipsis}
.pattern-help{margin-top:18px}.pattern-help summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;cursor:pointer;min-height:40px;color:var(--pattern-caption);font-size:11px}.pattern-help summary:after{content:'+';font-size:15px}.pattern-help[open] summary:after{content:'−'}.pattern-help p{color:var(--pattern-caption);font-size:11px;line-height:1.85;margin:8px 0}
.pattern-output{min-width:0;padding:20px 24px 24px;border-left:1px solid var(--pattern-border)}
.pattern-job-status{display:flex;align-items:center;gap:9px;padding:12px 14px;background:var(--pattern-soft);border:1px solid var(--pattern-border);border-radius:9px;margin-bottom:16px;scroll-margin-top:20px}
.pattern-job-status>div{flex:1;min-width:0}.pattern-job-status h2{font-size:12px;font-weight:500;margin:0;line-height:1.6}.pattern-job-status p{font-size:12px;color:var(--pattern-caption);line-height:1.7;margin:3px 0 0;overflow-wrap:anywhere}
.pattern-job-icon{width:7px;height:7px;border-radius:50%;flex:none;background:var(--berry)}
.pattern-job-status[data-status=ready]{padding:0;border:0;border-radius:0;background:none;min-height:24px;margin-bottom:9px;color:var(--pattern-sage)}.pattern-job-status[data-status=ready]>div{display:flex;align-items:center;gap:10px}.pattern-job-status[data-status=ready] p{font-size:11px;margin:0;color:var(--muted)}.pattern-job-status[data-status=ready] .pattern-job-icon{background:var(--pattern-sage);width:6px;height:6px}
.pattern-job-status[data-status=failed]{background:#fff8ec;border-color:#eadbc1}.pattern-job-status[data-status=failed] .pattern-job-icon{background:#9b793c}.pattern-job-status:is([data-status=queued],[data-status=processing]) .pattern-job-icon{animation:pattern-working 1.5s ease-in-out infinite}
.pattern-job-status button{flex:none;min-height:44px;font-size:12px;padding:8px 12px}
.pattern-placeholder{display:flex;min-height:480px;align-items:center;justify-content:center;flex-direction:column;text-align:center;border:1px dashed var(--pattern-border);background:var(--pattern-tint);border-radius:12px;padding:26px}
.pattern-placeholder h2{font-family:ShopRound,'PingFang SC',sans-serif;font-size:21px;margin:24px 0 8px}.pattern-placeholder p{font-size:13px;color:var(--pattern-caption);margin:0 0 9px}.pattern-placeholder>span{font-size:12px;color:var(--muted);line-height:1.8}
.pattern-sampler{font-family:monospace;line-height:1.35;font-size:24px;color:var(--berry);padding:18px 21px;background:var(--pattern-sampler);border:6px solid var(--white);outline:1px solid var(--pattern-border);border-radius:5px;transform:rotate(-5deg);box-shadow:3px 6px 0 #eddee43b}
.pattern-export-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}.pattern-export-row h2{font-family:ShopRound,'PingFang SC',sans-serif;font-size:19px;font-weight:600;margin:0}.pattern-export-row h2{color:var(--berry)}.pattern-export-row>div{display:flex;gap:7px;flex-wrap:wrap}.pattern-export-row button{font-size:12px;min-height:40px;padding:8px 13px;border-radius:8px;white-space:nowrap}.pattern-export-row .pattern-preview-download{color:var(--berry)}
.pattern-viewbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.pattern-views{display:flex;gap:3px;background:var(--pattern-soft);padding:3px;border-radius:9px;min-width:0}.pattern-views button{font-size:12px;min-height:36px;border-radius:6px;padding:6px 12px;white-space:nowrap;color:var(--pattern-caption)}.pattern-views button[aria-pressed=true]{background:var(--white);color:var(--berry);box-shadow:0 1px 4px #71566012}.pattern-views button:hover{color:var(--berry)}
.pattern-zoom{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--pattern-caption)}.pattern-zoom select{font-size:12px;padding:7px 10px;min-height:36px;border-radius:8px;background:var(--white);border-color:var(--pattern-border);width:112px}
.pattern-export-note{font-size:12px;color:var(--berry-dark);padding:9px 12px;margin:0 0 12px;border-left:2px solid var(--berry);background:var(--pattern-soft);border-radius:0 6px 6px 0}.pattern-export-note:empty{display:none}
.pattern-stage{height:clamp(360px,calc(100dvh - 450px),620px);max-height:clamp(360px,calc(100dvh - 450px),620px);overflow:auto;overscroll-behavior:contain;padding:22px;background:radial-gradient(var(--pattern-dot) .7px,transparent .9px) 0 0/8px 8px,var(--pattern-stage);border:1px solid var(--pattern-border);border-radius:10px;scrollbar-color:var(--pattern-scrollbar) var(--pattern-soft)}
.pattern-stage canvas{display:block;max-width:none;height:auto;image-rendering:auto;margin:0 auto;background:var(--white);box-shadow:0 1px 2px #6a4b5815,0 8px 22px #6a4b5810}
.pattern-statbar{display:grid;grid-template-columns:1fr .7fr 1fr 1.7fr;gap:12px;padding:17px 0 13px;border-bottom:1px solid var(--pattern-border)}.pattern-statbar div{min-width:0}.pattern-statbar span{display:block;font-size:11px;color:var(--pattern-caption);margin-bottom:3px}.pattern-statbar strong{font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.01em}
.pattern-inspection{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin-bottom:10px}.pattern-cell{font-size:11px;color:var(--pattern-caption);margin:8px 0;line-height:1.7;overflow-wrap:anywhere}.pattern-inspection button{flex:none;min-height:40px;border-radius:7px;background:var(--pattern-soft);font-size:11px;color:var(--berry);padding:8px 10px}
.pattern-palette{border:1px solid var(--pattern-border);border-radius:10px;overflow:hidden}.pattern-palette>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;cursor:pointer;min-height:54px;padding:13px 17px;font-size:13px;font-weight:500}.pattern-palette>summary small{font-size:11px;font-weight:400;color:var(--muted);margin-left:8px}.pattern-palette>summary>span:last-child{font-size:11px;font-weight:400;color:var(--pattern-caption)}.pattern-palette>summary>span:last-child:after{content:'+';margin-left:15px;font-size:16px}.pattern-palette[open]>summary>span:last-child:after{content:'−'}
.pattern-palette-content{padding:0 17px 17px}.pattern-palette-note{font-size:12px;color:var(--pattern-caption);line-height:1.8;margin:0 0 12px}.pattern-palette-scroll{max-height:330px;overflow:auto}.pattern-palette table{font-size:12px;text-align:left}.pattern-palette th{position:sticky;top:0;z-index:1;background:var(--pattern-soft);font-size:11px}.pattern-palette th,.pattern-palette td{padding:8px 12px;border-bottom:1px solid var(--pattern-border);white-space:nowrap}.pattern-palette :is(th,td):last-child{text-align:right;font-variant-numeric:tabular-nums}.pattern-symbol{display:inline-grid;place-items:center;min-width:44px;min-height:40px;border:1px solid var(--pattern-border);border-radius:6px;background:var(--white);font-family:monospace;font-weight:600;color:var(--ink)}.pattern-symbol:hover{border-color:var(--berry)}.pattern-symbol[aria-pressed=true]{background:var(--berry);color:white;border-color:var(--berry)}
.pattern-color-chip{display:inline-block;width:20px;height:20px;border-radius:4px;border:1px solid #00000014;vertical-align:middle;margin-right:10px}.pattern-hex{font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px;color:var(--pattern-caption)}.pattern-quality,#pattern-size-note{font-size:11px;line-height:1.85;color:var(--pattern-caption);margin:12px 0 0}
.pattern-locked{display:flex;align-items:center;gap:30px;max-width:900px;margin:30px auto;padding:32px}.pattern-locked img{width:160px;height:200px;object-fit:contain;flex:none}.pattern-locked h1{font-size:24px}.pattern-locked p{font-size:14px}
@keyframes pattern-working{50%{opacity:.3;box-shadow:0 0 0 4px #9d405e0d}}
@media(max-width:1100px){.pattern-layout{grid-template-columns:230px minmax(0,1fr)}.pattern-settings{padding:20px 16px}.pattern-output{padding:18px}.pattern-viewbar{flex-wrap:wrap}.pattern-zoom{margin-left:auto}.pattern-export-row{flex-wrap:wrap}.pattern-statbar{grid-template-columns:1fr 1fr;row-gap:12px}.pattern-stage{padding:16px}}
@media(max-width:800px){
  .pattern-heading{gap:16px;margin-bottom:17px}.pattern-heading h1{font-size:24px;gap:8px}.pattern-source{max-width:42%;gap:9px}.pattern-source img{width:38px;height:46px}.pattern-source small{display:none}.pattern-source strong{font-size:12px}.pattern-source>span:last-child{display:none}
  .pattern-layout{grid-template-columns:minmax(0,1fr);border-radius:16px}.pattern-settings{padding:14px 16px 0}.pattern-mode{margin-bottom:6px;max-width:360px}.pattern-mode button{min-height:40px}.pattern-license-note{margin:8px 0;font-size:11px}
  #pattern-form{gap:10px}.pattern-controls>summary{min-height:52px;flex-wrap:wrap;column-gap:12px;position:relative;padding-right:20px}.pattern-controls>summary small{display:none}.pattern-controls>summary:after{position:absolute;right:0;top:12px}.pattern-controls>summary>span:first-child{font-size:12px;font-weight:500}#pattern-settings-summary{display:block;font-size:11px;font-weight:400;color:var(--pattern-caption)}
  .pattern-fields{padding-top:4px;padding-bottom:5px}.pattern-field-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.pattern-field-hint{margin-bottom:12px}.pattern-crop-inputs{grid-template-columns:repeat(4,minmax(0,1fr))}.pattern-help{margin-top:4px}.pattern-help summary{min-height:36px}.pattern-help p{font-size:12px}.pattern-history{margin-top:14px;grid-template-columns:auto minmax(0,1fr);align-items:center}
  .pattern-output{border-left:0;padding:13px 16px 16px}.pattern-job-status[data-status=ready]{margin-bottom:9px}.pattern-job-status p{font-size:11px}.pattern-job-status button{padding:8px}.pattern-export-row{flex-wrap:nowrap;gap:10px;margin-bottom:12px}.pattern-export-row h2{font-size:17px}.pattern-export-row button{min-height:42px;padding:8px 11px}.pattern-viewbar{flex-wrap:nowrap}.pattern-stage{height:440px;max-height:440px;padding:14px}.pattern-statbar{grid-template-columns:1fr .7fr 1fr 1.7fr;gap:10px}.pattern-placeholder{min-height:340px}.pattern-symbol{min-height:44px}
  .pattern-locked{flex-direction:column;text-align:center;padding:24px;gap:16px}.pattern-locked img{width:120px;height:150px}.pattern-locked h1{font-size:21px}
}
@media(max-width:480px){
  .pattern-heading{gap:12px;margin-bottom:14px}.pattern-heading h1{font-size:21px;flex-wrap:wrap;gap:6px;margin-top:2px}.pattern-heading .back-link{font-size:11px;min-height:28px}.pattern-admin-tag{font-size:10px;padding:2px 5px}.pattern-source{max-width:40%}.pattern-source img{width:30px;height:38px}.pattern-source strong{font-size:11px;line-height:1.6}.pattern-source{gap:7px}
  .pattern-settings{padding:12px 12px 0}.pattern-mode{max-width:none}.pattern-mode button{min-height:40px}.pattern-field-grid{grid-template-columns:1fr 1fr}.pattern-controls>summary{row-gap:0}.pattern-controls>summary>span:first-child{font-size:12px}.pattern-crop-inputs{grid-template-columns:1fr 1fr}
  .pattern-output{padding:12px}.pattern-export-row{flex-wrap:wrap;row-gap:8px}.pattern-export-row h2{display:block;font-size:15px;flex-basis:100%}.pattern-export-row>div{gap:5px;width:100%}.pattern-export-row button{padding:8px 10px;font-size:11px;min-height:44px;flex:1}.pattern-preview-download{order:3}.pattern-export-row:has(.pattern-preview-download)>div{width:100%}.pattern-export-row:has(.pattern-preview-download) button{flex:1}
  .pattern-viewbar{display:flex;gap:7px;flex-wrap:nowrap}.pattern-views{flex:1;justify-content:space-between;gap:0}.pattern-views button{flex:1;min-height:40px;font-size:11px;padding:6px 4px}.pattern-zoom{font-size:11px;margin-left:auto}.pattern-zoom>span{display:none}.pattern-zoom select{min-height:44px;font-size:11px;padding:6px 4px;width:86px}.pattern-stage{height:360px;max-height:360px;padding:10px;border-radius:7px}
  .pattern-statbar{grid-template-columns:1fr 1fr;padding:13px 0;gap:10px 16px}.pattern-statbar div{display:flex;align-items:baseline;gap:7px}.pattern-statbar span{margin:0;font-size:11px}.pattern-statbar strong{font-size:12px}.pattern-statbar div:last-child{grid-column:1/-1}.pattern-statbar div:nth-child(3){grid-column:2;grid-row:1}.pattern-statbar div:nth-child(2){grid-column:1;grid-row:2}.pattern-statbar div:last-child{grid-column:2;grid-row:2;display:block}.pattern-statbar div:last-child span{display:block;margin-bottom:2px}
  .pattern-inspection{align-items:flex-start;flex-wrap:wrap;gap:0;min-height:38px}.pattern-cell{font-size:11px}.pattern-inspection button{min-height:44px;margin-bottom:9px;max-width:100%}.pattern-palette>summary{padding:12px;font-size:12px;min-height:50px}.pattern-palette>summary small{margin-left:5px}.pattern-palette>summary>span:last-child:after{margin-left:8px}.pattern-palette-content{padding:0 10px 12px}.pattern-palette th,.pattern-palette td{padding:8px 4px}.pattern-color-chip{width:16px;height:16px;margin-right:5px}.pattern-hex{font-size:10px}.pattern-symbol{min-width:38px}.pattern-palette-note{font-size:11px}.pattern-placeholder{min-height:290px;padding:20px}.pattern-placeholder h2{font-size:18px}.pattern-placeholder>span{font-size:11px}
  .pattern-entry{padding:15px;gap:11px}.pattern-entry small{font-size:10px}
}
@media(max-width:360px){.pattern-viewbar{flex-wrap:wrap}.pattern-views{flex-basis:100%}.pattern-zoom>span{display:block}.pattern-export-row button{padding:8px}}
@media(prefers-reduced-motion:reduce){.pattern-entry,.pattern-mode button{transition:none}.pattern-job-icon{animation:none!important}}
/* iOS Safari zooms into focused fields under 16px; line-height and padding keep the control heights. */
@media(max-width:600px){#pattern-form select,.pattern-crop-inputs input,.pattern-history select,.pattern-zoom select{font-size:16px;line-height:1.25}#pattern-form select{padding-top:8px;padding-bottom:8px}.pattern-zoom select{padding-top:5px;padding-bottom:5px}}
@media(max-width:480px){.pattern-zoom select{width:100px}}