@charset "UTF-8";
.stitch-main { padding-bottom:36px; }
.stitch-hero { padding-bottom:27px; }
.stitch-workspace { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:20px; align-items:start; }
.stitch-panel { min-width:0; padding:24px; border:1px solid var(--line); border-radius:14px; background:var(--paper); box-shadow:var(--shadow); }
.stitch-add-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; margin:18px 0 14px; }
.stitch-add-row .choose-button { min-height:44px; }
.stitch-add-row>p { margin:0; color:var(--muted); font-size:12px; }
.stitch-empty { display:flex; align-items:center; justify-content:center; flex-direction:column; min-height:244px; padding:28px 16px; border:1.5px dashed #afc0f4; border-radius:10px; background:#f7f9ff; text-align:center; }
.stitch-empty svg { margin-bottom:14px; color:var(--blue); }
.stitch-empty h3 { margin:0 0 8px; font-size:17px; font-weight:700; letter-spacing:-.45px; line-height:1.6; }
.stitch-empty p { margin:0; color:var(--muted); font-size:13px; line-height:1.9; }
.stitch-list { display:flex; flex-direction:column; gap:10px; margin:0; padding:0; list-style:none; counter-reset:stitch-photos; }
.stitch-list:empty { display:none; }
.stitch-item { display:grid; grid-template-columns:60px minmax(0,1fr); gap:10px 12px; min-width:0; padding:12px; border:1px solid var(--line); border-radius:9px; background:#fbfcff; }
.stitch-thumb { display:block; align-self:center; width:60px; height:60px; border:1px solid #e0e6f0; border-radius:6px; background:#edf1f7; object-fit:contain; }
.stitch-item-info { min-width:0; align-self:center; }
.stitch-item-info strong { display:block; color:var(--ink); font-size:13px; font-weight:650; line-height:1.6; overflow-wrap:anywhere; }
.stitch-item-info small,.stitch-item-info p { display:block; margin:3px 0 0; color:var(--muted); font-size:11px; line-height:1.7; overflow-wrap:anywhere; }
.stitch-item-actions { display:flex; flex-wrap:wrap; grid-column:1/-1; gap:7px; }
.stitch-item-actions button { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-width:44px; min-height:44px; padding:8px 11px; border:1px solid #d6deec; border-radius:7px; background:white; color:#42536e; font-size:12px; line-height:1.5; }
.stitch-item-actions button:hover:not(:disabled),.stitch-fit-button:hover:not(:disabled) { border-color:#a4b8fc; background:var(--pale); color:var(--blue-dark); }
.stitch-item-actions button:disabled,.stitch-fit-button:disabled { opacity:.5; }
.stitch-limit-note { margin:13px 0 0; color:var(--muted); font-size:11px; line-height:1.9; }
.stitch-preview-heading { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:7px 12px; padding-top:20px; margin-top:20px; border-top:1px solid var(--line); }
.stitch-preview-heading h3 { margin:0; font-size:14px; font-weight:650; }
.stitch-preview-heading>span { color:var(--muted); font-size:11px; }
.stitch-preview-stage { display:flex; align-items:center; justify-content:center; min-width:0; height:340px; margin-top:12px; padding:16px; overflow:hidden; border:1px solid #e3e8f2; border-radius:10px; background:#f0f3f9; }
.stitch-preview-stage canvas { display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; box-shadow:0 2px 10px #17213312; }
.stitch-preview-stage>p { margin:0; color:var(--muted); font-size:13px; line-height:1.8; text-align:center; }
.stitch-preview-help { margin-bottom:0; }
.stitch-settings .settings-sub { margin-bottom:19px; }
.stitch-field { display:block; min-width:0; margin:0; color:var(--ink); font-size:13px; font-weight:650; }
.stitch-field>.input-unit { margin-top:8px; }
.stitch-fit-button { min-height:44px; width:100%; padding:9px 12px; margin-top:8px; border:1px solid #d6deec; border-radius:7px; background:#f8faff; color:#42536e; font-size:12px; line-height:1.6; }
.stitch-spacing-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.stitch-color-field { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; margin:0; color:var(--ink); font-size:13px; font-weight:650; }
.stitch-color-field input { flex-shrink:0; width:64px; height:44px; padding:5px; border:1px solid #cdd6e6; border-radius:7px; background:white; cursor:pointer; }
#stitch-controls:disabled,#stitch-controls:disabled input { cursor:not-allowed; }
#stitch-controls:disabled input,#stitch-controls:disabled select { background:#f4f6fa; color:#7d889c; }
.stitch-dimensions { min-height:50px; padding:11px 13px; margin:0 0 14px; border:1px solid #dbe4ff; border-radius:8px; background:var(--pale); color:#42536e; font-size:12px; line-height:1.8; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.stitch-dimensions.error { border-color:#f2cfc4; background:#fff5f1; color:#a83b23; }
.stitch-settings .status { margin-top:13px; }
.stitch-result { grid-column:1/-1; }
.stitch-result .result-content { align-items:flex-start; }
.stitch-result .metrics { gap:20px; }
.stitch-result .metrics dd { font-size:20px; }
.stitch-save-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px; }
.stitch-save-actions>a,.stitch-save-actions>button { max-width:100%; min-height:48px; white-space:normal; }
.stitch-result .output-details img { max-width:100%; max-height:720px; width:auto; height:auto; object-fit:contain; }
.stitch-guide,.stitch-faq { margin-top:24px; }
.stitch-guide h2,.stitch-faq h2 { margin:0 0 18px; font-size:18px; font-weight:700; letter-spacing:-.45px; }
.stitch-guide-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; padding:0; margin:0; list-style:none; counter-reset:stitch-guide; }
.stitch-guide-steps li { min-width:0; counter-increment:stitch-guide; }
.stitch-guide-steps strong { display:flex; gap:8px; align-items:baseline; font-size:14px; font-weight:650; line-height:1.6; }
.stitch-guide-steps strong::before { content:"0" counter(stitch-guide); flex-shrink:0; color:var(--blue); font-size:11px; font-weight:750; }
.stitch-guide-steps p { margin:9px 0 0; color:var(--muted); font-size:12px; line-height:1.9; }
.stitch-faq details+details { border-top:1px solid var(--line); }
.stitch-faq summary { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:56px; padding:14px 0; color:var(--ink); font-size:13px; font-weight:650; line-height:1.8; cursor:pointer; list-style:none; }
.stitch-faq summary::-webkit-details-marker { display:none; }
.stitch-faq summary::after { content:"+"; flex-shrink:0; color:#7a91c9; font-size:18px; font-weight:400; }
.stitch-faq details[open] summary::after { content:"−"; }
.stitch-faq details p { max-width:860px; margin:0 0 18px; color:var(--muted); font-size:13px; line-height:1.9; }
@media(min-width:1020px) {
  .stitch-item { grid-template-columns:60px minmax(0,1fr) auto; }
  .stitch-item-actions { grid-column:auto; align-content:center; flex-wrap:nowrap; gap:5px; }
  .stitch-item-actions button { padding:7px; font-size:11px; }
}
@media(max-width:800px) {
  .stitch-workspace { grid-template-columns:minmax(0,1fr); }
  .stitch-preview-stage { height:320px; }
  .stitch-guide-steps { grid-template-columns:minmax(0,1fr); gap:18px; }
  .stitch-guide-steps p { margin-top:5px; }
}
@media(max-width:560px) {
  .stitch-panel { padding:19px 16px; border-radius:12px; }
  .stitch-workspace { gap:15px; }
  .stitch-hero { padding:27px 0 23px; }
  .stitch-hero h1 { font-size:29px; }
  .stitch-hero .intro { font-size:13px; }
  .stitch-empty { min-height:218px; padding:22px 12px; }
  .stitch-empty h3 { font-size:16px; }
  .stitch-empty p { font-size:12px; }
  .stitch-item { padding:10px; }
  .stitch-preview-stage { height:300px; padding:12px; }
  .stitch-spacing-fields { gap:10px; }
  .stitch-result { padding:19px 16px; }
  .stitch-result .result-content { flex-direction:column; align-items:stretch; gap:18px; }
  .stitch-result .metrics { gap:10px; }
  .stitch-result .metrics dd { font-size:16px; letter-spacing:-.3px; }
  .stitch-result .metrics dt { font-size:11px; }
  .stitch-save-actions { justify-content:stretch; }
  .stitch-save-actions>a,.stitch-save-actions>button { width:100%; }
  .stitch-guide,.stitch-faq { margin-top:18px; }
  .stitch-guide h2,.stitch-faq h2 { font-size:17px; margin-bottom:12px; }
  .stitch-faq summary { font-size:12px; }
  .stitch-faq details p { font-size:12px; }
}