/* ============================================================================
   W2 TOOL OPTIONS — STYLES (extracted from W1 backup engine, ALL tools)
   ----------------------------------------------------------------------------
   CSS เหล่านี้เดิม tool inject ผ่าน document.createElement("style") ตอน runtime
   ซึ่งใน W2 รันใน worker → "ไม่ถึง" main → option bar เลยไม่มี style (label เรียงตั้ง ฯลฯ)
   วิธีใช้ใน W2: โหลดไฟล์นี้บน main (เพิ่ม <link> ใน index.html หรือ import) ครั้งเดียว
   ใช้ตัวแปร --lay-* / --ui-* จาก input.css (มีอยู่แล้วบน main)
   ============================================================================ */

/* ===== 20-Pencil.js  (section: pencil) ===== */
.cal-pop{scrollbar-width:thin;scrollbar-color:var(--lay-scroll,#5a5a5a) transparent;font:13px/1.4 "Segoe UI",system-ui,sans-serif;color:var(--lay-text,#ddd);}
.cal-pop .cal-mi span:last-child{font-family:"Segoe UI",system-ui,sans-serif;}
.cal-pop::-webkit-scrollbar{width:10px;height:10px;}
.cal-pop::-webkit-scrollbar-track{background:transparent;}
.cal-pop::-webkit-scrollbar-thumb{background:var(--lay-scroll,#5a5a5a);border-radius:6px;border:2px solid var(--lay-panel-2,#333);}
.cal-pop::-webkit-scrollbar-thumb:hover{background:var(--lay-accent,#4a90d9);}
.cal-mi{transition:background .08s;}
.cal-mi:hover{background:rgba(255,255,255,.08);}
.cal-mi.on{outline:1px solid var(--lay-accent,#4a90d9);background:rgba(74,144,217,.16);}

/* ===== 43-rectEdit.js  (section: rect-edit) ===== */
.rect-edit-fields{display:flex;align-items:center;gap:8px}
.rect-edit-field{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--lay-muted,#8a8a8a)}
.rect-edit-field span{min-width:14px;text-align:right}

/* ===== 44b-LineEdit.js  (section: line-edit) — MUST live in this main stylesheet (not only
   the engine's _injectStyleOnce, which runs in the W2 worker stub DOM, never on main) or the
   number pills stack vertically on main. `option_pin` keeps OptionBarFlex from collapsing them. */
.line-edit-fields{display:flex;align-items:center;gap:8px}
.line-edit-field{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--lay-muted,#8a8a8a)}
.line-edit-field span{min-width:14px;text-align:right;white-space:nowrap}

/* ===== 44-ellipseCircleEdit.js  (section: ellipse-edit) ===== */
.ellipse-edit-fields{display:flex;align-items:center;gap:8px}
.ellipse-edit-fields .ee-field{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--lay-muted,#8a8a8a)}
.ellipse-edit-fields .ee-field span{min-width:14px;text-align:right}
.ellipse-edit-fields .ee-sep{width:1px;height:18px;background:var(--lay-line-soft,#404040)}
.ellipse-edit-fields .ee-modes{display:flex;align-items:center;gap:2px}

/* ===== 46-starsPolygonsEdit.js  (section: star-edit) ===== */
.star-edit-fields{display:flex;align-items:center;gap:8px}
.star-edit-fields .sp-field{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--lay-muted,#8a8a8a)}
.star-edit-fields .sp-field span{min-width:14px;text-align:right;white-space:nowrap}
.star-edit-fields .sp-sep{width:1px;height:18px;background:var(--lay-line-soft,#404040)}
.star-edit-fields .sp-modes{display:flex;align-items:center;gap:2px}

/* ===== 48-spiralEdit.js  (section: spiral-edit) ===== */
.spiral-edit-fields{display:flex;align-items:center;gap:8px}
.spiral-edit-fields .spi-field{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--lay-muted,#8a8a8a)}
.spiral-edit-fields .spi-field span{min-width:14px;text-align:right;white-space:nowrap}
.spiral-edit-fields .spi-sep{width:1px;height:18px;background:var(--lay-line-soft,#404040)}

/* 49-calligraphy.js (calligraphy) — duplicate, skipped */