/* sticker.css - Compact Sticker Designer (Refactored) */

/* ===== 1. CSS Variables (กำหนดธีมสีและค่าคงที่ไว้ที่เดียว) ===== */
:root {
  --bg-main: #0b1220;
  --bg-dark: #0f172a;
  --bg-panel: #111827;
  --bg-input: #1f2937;
  --bg-hover: #374151;
  --bg-input-2: #243447;
  --border-dark: #1f2937;
  --border-input: #374151;
  --border-hover: #4b5563;
  --txt-main: #e2e8f0;
  --txt-light: #cbd5e1;
  --txt-muted: #94a3b8;
  --txt-dim: #64748b;
  --txt-dark: #475569;
  --accent: #10b981;
  --accent-light: #34d399;
  --accent-dim: #064e3b;
  --accent-dark: #059669;
  --gold: #fbbf24;
  --orange: #f59e0b;
  --purple: #a855f7;
  --cyan: #06b6d4;
  --pink: #ec4899;
  --red: #f87171;
  --blue: #3b82f6;
  --indigo: #8b5cf6;
  --font-main: 'Sarabun', 'Prompt', sans-serif;
}

/* ===== 2. Reset & Base ===== */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100vh; width: 100vw; overflow: hidden;
  font-family: var(--font-main); background: var(--bg-main); color: var(--txt-main); user-select: none;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }

/* ===== 3. Topbar & Statusbar ===== */
.topbar {
  height: 46px; background: var(--bg-panel); border-bottom: 1px solid var(--border-dark);
  display: flex; align-items: center; padding: 0 10px; gap: 8px;
  position: relative; z-index: 50; flex-wrap: nowrap; overflow-x: auto;
}
.brand { display: flex; align-items: center; gap: 6px; color: var(--gold); font-weight: 700; font-size: 0.95rem; white-space: nowrap; }
.tb-group { display: flex; align-items: center; gap: 4px; padding: 0 6px; border-left: 1px solid var(--border-dark); height: 32px; }
.tb-group:first-of-type, .brand + .tb-group { border-left: none; }
.tb-lbl { font-size: 0.72rem; color: var(--txt-muted); margin: 0; white-space: nowrap; }
.tb-num { width: 56px !important; background: var(--bg-input); color: #fff; border: 1px solid var(--border-input); }
.tb-x { color: var(--txt-dim); padding: 0 2px; }
#paperSize { width: 110px; background: var(--bg-input); color: #fff; border: 1px solid var(--border-input); font-size: 0.78rem; }
#zoomSlider { width: 110px; accent-color: var(--accent); }
.tb-zoom { font-size: 0.75rem; color: var(--txt-muted); min-width: 40px; text-align: right; }
.btn-dark { background: var(--bg-input); border: 1px solid var(--border-input); color: var(--txt-main); }
.btn-dark:hover { background: var(--bg-hover); color: #fff; }
.btn-sm { padding: 3px 8px; font-size: 0.78rem; }
#animToggleTop { transition: all 0.2s; font-weight: 600; }
#animToggleTop:hover { background: var(--bg-hover) !important; border-color: var(--accent) !important; }
#animToggleTop.active {
  background: var(--accent) !important; border-color: var(--accent-light) !important; color: #fff !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.statusbar {
  height: 28px; background: var(--bg-dark); border-top: 1px solid var(--border-dark);
  display: flex; align-items: center; gap: 10px; padding: 0 12px;
  font-size: 0.72rem; color: var(--txt-muted);
}
.statusbar .sep { color: #334155; }
.statusbar .sw, .slider-row .sw { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--txt-light); margin: 0; cursor: pointer; }
.statusbar .sw input[type="number"] { width: 44px; background: var(--bg-input); color: #fff; border: 1px solid var(--border-input); font-size: 0.7rem; padding: 1px 4px; border-radius: 3px; }
.muted { color: var(--txt-dim); }

/* ===== 4. Main Layout & Stage ===== */
.main { display: flex; height: calc(100vh - 46px - 28px); }
.main > .stage, .stage { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--bg-dark); }
.canvas-wrap {
  flex: 1; position: relative; overflow: auto; padding: 24px; display: block;
  background-color: var(--bg-main);
  background-image: linear-gradient(45deg, #1a2334 25%, transparent 25%), linear-gradient(-45deg, #1a2334 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #1a2334 75%), linear-gradient(-45deg, transparent 75%, #1a2334 75%);
  background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.canvas-stack { position: relative; margin: 0 auto; }
.layer-canvas { position: absolute; top: 0; left: 0; box-shadow: 0 14px 40px rgba(0,0,0,0.6); }
#bgGrid { background: #fff; z-index: 1; }
#board { z-index: 2; background: transparent; }
#overlay { z-index: 3; pointer-events: none; background: transparent; }
#brushIndicator { position: absolute; pointer-events: none; z-index: 4; background: rgba(249,115,22,0.18); border: 1px dashed #f97316; transform: translate(-50%, -50%); display: none; }
#marquee { position: absolute; border: 1px dashed var(--accent); background: rgba(16,185,129,0.1); pointer-events: none; z-index: 5; display: none; }
#guides { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
#guides .gline { position: absolute; background: var(--orange); opacity: 0.85; box-shadow: 0 0 6px var(--orange); }
#guides .gline.h { height: 1px; left: 0; right: 0; }
#guides .gline.v { width: 1px; top: 0; bottom: 0; }

/* ===== 5. Left Rail & Tool Groups ===== */
.rail {
  width: 96px; background: var(--bg-panel); border-right: 1px solid var(--border-dark);
  display: flex; flex-direction: column; padding: 4px 0; position: relative; max-height: 100%; overflow-y: auto; overflow-x: hidden;
}
.rail::-webkit-scrollbar { width: 4px; }
.rail::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: 2px; }
.rail hr { width: 85%; border-color: var(--border-dark); margin: 4px auto; }
.tool-group { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 4px 6px; position: relative; width: 100%; }
.tool-group + .tool-group { border-top: 1px solid var(--border-dark); margin-top: 2px; padding-top: 6px; }
.tool-group-label {
  grid-column: 1 / -1; font-size: 0.55rem; font-weight: 700; color: var(--txt-dark);
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 2px; user-select: none;
  pointer-events: none; transition: color 0.15s; text-align: center;
}
.tool-group:hover .tool-group-label { color: var(--accent); }
.tool-group .rail-btn { width: 36px; height: 36px; font-size: 0.82rem; justify-self: center; }
.tool-group:last-child .rail-btn:hover { background: rgba(248, 113, 113, 0.15); color: var(--red); border-color: var(--red); }

.rail-btn {
  width: 38px; height: 38px; background: transparent; border: 1px solid transparent; color: var(--txt-light);
  border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; position: relative; transition: all 0.15s ease;
}
.rail-btn:hover { background: var(--bg-input); color: #fff; border-color: var(--border-input); }
.rail-btn.active {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); color: #fff !important;
  border-color: var(--accent-light) !important; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25), 0 0 14px rgba(16, 185, 129, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.rail-btn.active::before {
  content: ''; position: absolute; left: -7px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%; background: var(--accent-light); border-radius: 2px;
  box-shadow: 0 0 8px var(--accent-light), 0 0 2px #fff; animation: railPulse 1.8s ease-in-out infinite;
}
@keyframes railPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; box-shadow: 0 0 12px var(--accent-light), 0 0 4px #fff; } }
.list-caret { position: absolute; right: 2px; bottom: 2px; font-size: 0.55rem; opacity: 0.7; }

/* ===== 6. Tooltip & Popups ===== */
#railTooltip {
  position: fixed; pointer-events: none; z-index: 9999; background: linear-gradient(135deg, #1e293b 0%, var(--bg-dark) 100%);
  border: 1px solid var(--accent); border-radius: 6px; padding: 6px 10px 6px 12px; color: #fff; font-size: 0.78rem; font-weight: 600;
  white-space: nowrap; opacity: 0; transform: translateX(-6px) translateY(-50%); transition: opacity 0.15s ease, transform 0.15s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 12px rgba(16, 185, 129, 0.35); max-width: 280px;
}
#railTooltip.show { opacity: 1; transform: translateX(0) translateY(-50%); }
#railTooltip::before, #railTooltip::after { content: ''; position: absolute; left: -6px; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-right-color: var(--accent); border-left: none; }
#railTooltip::after { left: -4px; border: 5px solid transparent; border-right-color: var(--bg-dark); border-left: none; }
#railTooltip .tip-title { color: var(--gold); font-weight: 700; font-size: 0.82rem; display: flex; align-items: center; gap: 6px; }
#railTooltip .tip-desc { color: var(--txt-light); font-size: 0.7rem; font-weight: 400; margin-top: 3px; white-space: normal; line-height: 1.35; }
#railTooltip .tip-key { display: inline-block; background: var(--bg-hover); color: var(--gold); padding: 1px 6px; border-radius: 3px; font-size: 0.65rem; font-family: 'Courier New', monospace; font-weight: 700; border: 1px solid var(--border-hover); box-shadow: 0 1px 0 var(--bg-input); line-height: 1.4; }

.popup {
  position: fixed; background: var(--bg-input); border: 1px solid var(--border-input); border-radius: 6px; padding: 6px;
  display: none; z-index: 1000; min-width: 140px; box-shadow: 0 6px 22px rgba(0,0,0,0.5); max-height: calc(100vh - 16px); overflow-y: auto;
}
.popup.show { display: block; }
.popup-title { font-size: 0.7rem; color: var(--txt-muted); text-transform: uppercase; padding: 2px 6px 6px; border-bottom: 1px solid var(--border-input); margin-bottom: 4px; }
.popup button { display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; color: var(--txt-main); border: none; padding: 6px 8px; text-align: left; font-size: 0.82rem; border-radius: 4px; cursor: pointer; }
.popup button:hover { background: var(--accent); color: #fff; }

/* ===== 7. Right Sidebar & Properties ===== */
.right { width: 280px; background: var(--bg-panel); border-left: 1px solid var(--border-dark); display: flex; flex-direction: column; }
.rtabs { display: flex; border-bottom: 1px solid var(--border-dark); }
.rtab { flex: 1; background: transparent; border: none; color: var(--txt-muted); padding: 8px 4px; font-size: 0.78rem; cursor: pointer; border-bottom: 2px solid transparent; }
.rtab:hover { color: #fff; background: #1a2334; }
.rtab.active { color: var(--accent); border-bottom-color: var(--accent); }
.rpane { display: none; padding: 8px; overflow-y: auto; flex: 1; }
.rpane.active { display: block; }

.grp { background: var(--bg-dark); border: 1px solid var(--border-dark); border-radius: 6px; margin-bottom: 6px; padding: 0; }
.grp summary { list-style: none; padding: 6px 10px; font-size: 0.8rem; font-weight: 600; color: var(--gold); cursor: pointer; user-select: none; display: flex; justify-content: space-between; align-items: center; }
.grp summary::-webkit-details-marker { display: none; }
.grp summary::after { content: "▸"; color: var(--txt-dim); transition: transform 0.15s; }
.grp[open] summary::after { transform: rotate(90deg); }
.grp-body { padding: 8px 10px; border-top: 1px solid var(--border-dark); }
.lbl { font-size: 0.72rem; color: var(--txt-muted); margin: 4px 0 2px; display: block; }
.form-control, .form-select { background: var(--bg-input); color: #fff; border: 1px solid var(--border-input); font-size: 0.78rem; }
.form-control:focus, .form-select:focus { background: var(--bg-input); color: #fff; border-color: var(--accent); box-shadow: none; }
input[type="color"] { height: 28px; padding: 0; border: 1px solid var(--border-input); background: var(--bg-input); border-radius: 4px; cursor: pointer; }
input[type="range"] { accent-color: var(--accent); }

/* Slider Row */
.slider-row { display: flex; align-items: center; gap: 6px; margin: 4px 0 2px; }
.slider-row input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); }
.slider-row input[type="number"] { width: 58px; flex-shrink: 0; background: var(--bg-input); color: #fff; border: 1px solid var(--border-input); font-size: 0.75rem; padding: 3px 4px; border-radius: 3px; text-align: right; font-family: 'Courier New', monospace; }
.slider-row input[type="number"]:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); }
.slider-row .lbl { margin: 0; white-space: nowrap; min-width: 70px; font-size: 0.72rem; color: var(--txt-muted); }
.slider-row .lbl span { color: var(--gold); font-weight: 600; }

/* Border Accents for Groups */
#grpMagickMorph, #grpquick, #grpAppearance, #grpWand { border: 1px solid var(--accent-light) !important; }
#grpBrush, #grpGradient, #grpText { border: 1px solid var(--purple) !important; }
#grpPos, #grpShadow, #grpImage, #grpbackg { border: 1px solid var(--orange) !important; }

/* Custom Star & Poly Panels */
#grpCustomStar, #grpCustomPoly { background: linear-gradient(45deg, #221144 30%, #dddddd 100%); border: 1px solid var(--cyan) !important; }
#grpCustomStar summary, #grpCustomPoly summary { color: #22d3ee; }
#grpCustomStar input[type="range"], #grpCustomPoly input[type="range"] { accent-color: var(--orange); }
#grpCustomStar input[type="number"]:focus { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2); }
#grpCustomPoly input[type="number"]:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.2); }
#csObjPreview, #cpObjPreview { image-rendering: crisp-edges; }

/* Align & Quick Color & Head Grid */
.align-grid .align-btn { min-height: 30px; line-height: 1; }
.align-grid .align-btn.active { background: var(--accent) !important; border-color: var(--accent-light) !important; color: #ffffff !important; box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.35); }
.qc-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.qc-swatch { width: 100%; aspect-ratio: 1; border-radius: 3px; cursor: pointer; border: 1px solid var(--border-input); transition: transform 0.1s; }
.qc-swatch:hover { transform: scale(1.15); border-color: #fff; }
.head-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; }
.head-btn { background: var(--bg-input); border: 1px solid var(--border-input); color: var(--txt-light); padding: 4px 0; border-radius: 4px; cursor: pointer; font-size: 0.85rem; }
.head-btn:hover { background: var(--bg-hover); color: #fff; }
.head-btn.active { background: var(--orange); color: var(--bg-input); border-color: var(--orange); }

/* ===== 8. Layers Panel ===== */
.layer-list { display: flex; flex-direction: column; gap: 3px; }
.lyr-item { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--bg-dark); border: 1px solid var(--border-dark); border-radius: 4px; cursor: pointer; font-size: 0.78rem; }
.lyr-item:hover { background: #1a2334; }
.lyr-item.selected { border-color: var(--accent); background: #0d1f2a; }
.lyr-item.is-group { background: linear-gradient(135deg, var(--accent-dim) 0%, #065f46 100%); border-left: 4px solid var(--accent); }
.lyr-item.is-group:hover { background: linear-gradient(135deg, #065f46 0%, #047857 100%); }
.lyr-item.is-group.selected { border-color: var(--accent-light); background: linear-gradient(135deg, #047857 0%, var(--accent-dark) 100%); box-shadow: 0 0 8px rgba(16, 185, 129, 0.4); }
.lyr-item.is-group.partial { border-color: #6ee7b7; opacity: 0.85; }
.lyr-icon { width: 18px; text-align: center; color: var(--txt-muted); cursor: grab; user-select: none; flex-shrink: 0; }
.lyr-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: text; cursor: text; }
.lyr-btn { background: transparent; border: none; color: var(--txt-muted); cursor: pointer; padding: 2px 4px; font-size: 0.75rem; border-radius: 3px; }
.lyr-btn:hover { background: var(--bg-hover); color: #fff; }
.lyr-btn.off { color: var(--txt-dark); }
.group-badge { display: inline-block; background: var(--accent); color: #fff; font-size: 0.65rem; font-weight: 700; padding: 1px 6px; border-radius: 10px; margin-left: 6px; min-width: 18px; text-align: center; }
.group-name { font-weight: 600; color: #6ee7b7; }

/* ===== 9. Special Panels (Emboss, 3D, Morph, Fonts) ===== */
#grpEmboss, #grp3D { background: linear-gradient(135deg, #1a1a2e 0%, #2d1b3d 100%); }
#grpEmboss { border: 1px solid var(--orange) !important; }
#grpEmboss summary { color: var(--gold); }
#grpEmboss input[type="range"] { accent-color: var(--orange); }
.emboss-type-btn { transition: all 0.2s; font-size: 0.75rem; }
.emboss-type-btn.active[data-etype="emboss"] { background: #d97706 !important; color: #fff !important; border-color: #d97706 !important; box-shadow: 0 0 10px rgba(245, 158, 11, 0.5); }
.emboss-type-btn.active[data-etype="deboss"] { background: #0891b2 !important; color: #fff !important; border-color: #0891b2 !important; box-shadow: 0 0 10px rgba(6, 182, 212, 0.5); }

#grp3D { border: 1px solid var(--purple) !important; }
#grp3D summary { color: #c084fc; }
.mode3d-btn { transition: all 0.2s; font-size: 0.85rem; padding: 6px 0; }
.mode3d-btn.active[data-mode3d="none"] { background: #6b7280 !important; color: #fff !important; border-color: #6b7280 !important; }
.mode3d-btn.active[data-mode3d="extrude"] { background: #d97706 !important; color: #fff !important; border-color: #d97706 !important; box-shadow: 0 0 10px rgba(245, 158, 11, 0.5); }
.mode3d-btn.active[data-mode3d="isometric"] { background: #0891b2 !important; color: #fff !important; border-color: #0891b2 !important; box-shadow: 0 0 10px rgba(6, 182, 212, 0.5); }
.mode3d-btn.active[data-mode3d="perspective"] { background: var(--accent-dark) !important; color: #fff !important; border-color: var(--accent-dark) !important; box-shadow: 0 0 10px rgba(16, 185, 129, 0.5); }
#grp3D input[type="range"] { accent-color: var(--purple); }

#imgRemoveBg { background: linear-gradient(135deg, #0891b2 0%, var(--cyan) 100%); border: none; color: #fff; font-weight: 600; transition: all 0.2s; }
#imgRemoveBg:hover { background: linear-gradient(135deg, #0e7490 0%, #0891b2 100%); box-shadow: 0 0 12px rgba(6, 182, 212, 0.5); transform: translateY(-1px); }

#grpMorph { background: linear-gradient(135deg, #1a1a2e 0%, #1b2d3d 50%, #2d1b3d 100%); border: 1px solid var(--pink) !important; position: relative; overflow: hidden; }
#grpMorph::before { content: ''; position: absolute; inset: 0; background: linear-gradient(45deg, rgba(236, 72, 153, 0.05) 0%, rgba(168, 85, 247, 0.05) 50%, rgba(59, 130, 246, 0.05) 100%); animation: morphBgShift 8s ease-in-out infinite; pointer-events: none; }
@keyframes morphBgShift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-10px, -5px); } }
#grpMorph summary, #grpMorph .grp-body { color: #f472b6; position: relative; z-index: 1; }
#grpMorph input[type="range"] { accent-color: var(--pink); }
#grpMorph select { background: var(--bg-input); color: #fff; border: 1px solid var(--border-input); }
#grpMorph select:focus { border-color: var(--pink); box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.2); }

#grpCustomFonts { background: linear-gradient(135deg, #1a1a2e 0%, #1b3d2d 100%); border: 1px solid var(--accent) !important; }
#grpCustomFonts summary { color: var(--accent-light); }
#grpCustomFonts input[type="file"] { background: var(--bg-input); color: var(--txt-main); border: 1px solid var(--border-input); padding: 4px 6px; }
#grpCustomFonts input[type="file"]::file-selector-button { background: var(--accent); color: #fff; border: none; padding: 4px 10px; border-radius: 3px; cursor: pointer; font-size: 0.75rem; margin-right: 8px; }
#grpCustomFonts input[type="file"]::file-selector-button:hover { background: var(--accent-dark); }
.custom-font-list { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; }
.custom-font-list::-webkit-scrollbar { width: 4px; }
.custom-font-list::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: 2px; }
.custom-font-item { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--bg-input); border: 1px solid var(--border-input); border-radius: 4px; font-size: 0.75rem; transition: all 0.15s; }
.custom-font-item:hover { border-color: var(--accent); background: var(--bg-input-2); }
.custom-font-item .font-preview { font-size: 1rem; color: var(--gold); min-width: 70px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; }
.custom-font-item .font-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--txt-main); min-width: 0; }
.custom-font-item .remove-btn { background: transparent; border: none; color: var(--txt-muted); cursor: pointer; padding: 4px 6px; font-size: 0.8rem; border-radius: 3px; flex-shrink: 0; transition: all 0.15s; }
.custom-font-item .remove-btn:hover { background: rgba(248, 113, 113, 0.15); color: var(--red); }
.custom-font-empty { text-align: center; padding: 16px 8px; color: var(--txt-dim); font-size: 0.75rem; font-style: italic; border: 1px dashed var(--border-input); border-radius: 4px; background: rgba(15, 23, 42, 0.5); }
#txtFont option:disabled { color: var(--txt-dim); font-style: italic; font-size: 0.7rem; }

/* ===== 10. Presets Panel ===== */
.preset-toolbar { padding: 6px; background: var(--bg-dark); border: 1px solid var(--border-dark); border-radius: 6px; margin-bottom: 8px; }
.preset-info { padding: 8px 10px; background: linear-gradient(135deg, #1e293b 0%, var(--bg-dark) 100%); border: 1px solid var(--border-input); border-radius: 6px; font-size: 0.75rem; color: var(--txt-muted); display: flex; align-items: center; gap: 6px; }
.preset-info .obj-type { display: inline-block; background: var(--accent); color: #fff; padding: 1px 8px; border-radius: 10px; font-size: 0.7rem; font-weight: 600; margin-left: 4px; }
.preset-groups { display: flex; flex-direction: column; gap: 6px; }
.preset-group { background: var(--bg-dark); border: 1px solid var(--border-dark); border-radius: 6px; overflow: hidden; }
.preset-group-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: #1e293b; cursor: pointer; user-select: none; font-size: 0.8rem; font-weight: 600; color: var(--gold); border-bottom: 1px solid var(--border-input); }
.preset-group-header:hover { background: #334155; }
.preset-group-header .group-badge { background: var(--accent); color: #fff; padding: 1px 8px; border-radius: 10px; font-size: 0.65rem; font-weight: 700; }
.preset-group-header .caret { transition: transform 0.2s; color: var(--txt-dim); }
.preset-group.collapsed .caret { transform: rotate(-90deg); }
.preset-group.collapsed .preset-list { display: none; }
.preset-list { padding: 4px; display: flex; flex-direction: column; gap: 3px; max-height: 300px; overflow-y: auto; }
.preset-item { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: #1e293b; border: 1px solid var(--border-input); border-radius: 4px; font-size: 0.75rem; color: var(--txt-main); cursor: pointer; transition: all 0.15s; }
.preset-item:hover { background: #334155; border-color: var(--accent); }
.preset-item .preset-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preset-item .preset-preview { width: 24px; height: 24px; border-radius: 3px; border: 1px solid var(--border-hover); flex-shrink: 0; }
.preset-item .preset-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; }
.preset-item:hover .preset-actions { opacity: 1; }
.preset-item .preset-btn { background: transparent; border: none; color: var(--txt-muted); cursor: pointer; padding: 2px 4px; border-radius: 3px; font-size: 0.7rem; }
.preset-item .preset-btn:hover { background: var(--border-hover); color: #fff; }
.preset-item .preset-btn.apply { color: var(--accent); }
.preset-item .preset-btn.delete { color: var(--red); }
.preset-empty { padding: 12px; text-align: center; color: var(--txt-dim); font-size: 0.75rem; font-style: italic; }
.preset-group[data-group="shape"] .preset-group-header, .preset-group[data-group="shape"] .group-badge { color: var(--orange); background: var(--orange); }
.preset-group[data-group="text"] .preset-group-header, .preset-group[data-group="text"] .group-badge { color: var(--blue); background: var(--blue); }
.preset-group[data-group="image"] .preset-group-header, .preset-group[data-group="image"] .group-badge { color: var(--indigo); background: var(--indigo); }
.preset-group[data-group="effect"] .preset-group-header, .preset-group[data-group="effect"] .group-badge { color: var(--pink); background: var(--pink); }
.preset-list::-webkit-scrollbar { width: 4px; }
.preset-list::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: 2px; }

/* ===== 11. Animation Timeline ===== */
.anim-timeline { height: 140px; background: var(--bg-dark); border-top: 2px solid var(--accent); display: flex; flex-direction: column; padding: 8px; gap: 6px; flex-shrink: 0; }
.timeline-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.timeline-btn-group { display: flex; gap: 2px; }
.timeline-info { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; }
.timeline-label { color: var(--txt-muted); font-weight: 600; }
.timeline-value { color: var(--gold); font-weight: 700; min-width: 40px; }
.timeline-options { display: flex; gap: 12px; margin-left: auto; }
.timeline-frames { flex: 1; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 4px; background: #1e293b; border-radius: 4px; }
.timeline-frames::-webkit-scrollbar { height: 6px; }
.timeline-frames::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: 3px; }
.timeline-frame { flex-shrink: 0; width: 80px; background: var(--bg-dark); border: 2px solid var(--border-input); border-radius: 4px; cursor: pointer; transition: all 0.15s; position: relative; overflow: hidden; }
.timeline-frame:hover { border-color: var(--accent); transform: translateY(-2px); }
.timeline-frame.active { border-color: var(--accent); box-shadow: 0 0 12px rgba(16, 185, 129, 0.5); }
.timeline-frame.active::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); }
.frame-thumb { width: 100%; height: 60px; display: block; background: #fff; image-rendering: pixelated; }
.frame-badge { position: absolute; top: 0; left: 0; background: rgba(0,0,0, 0.9); color: #ff0; font-size: 0.3rem; font-weight: 700; padding: 0; border-radius: 2px; z-index: 10; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); pointer-events: none; }
.timeline-frame.active .frame-badge { background: var(--accent); box-shadow: 0 0 8px rgba(16, 185, 129, 0.8); }
.frame-info { padding: 1px; font-size: 0.7rem; color: var(--txt-main); text-align: center; background: #1e293b; border-top: 1px solid var(--border-input); font-weight: 600; }
.frame-info b { color: var(--gold); font-size: 0.8rem; margin-right: 2px; }
.timeline-frame.active .frame-info { background: var(--accent-dim); color: var(--accent-light); }
#animToggle.active { background: var(--accent) !important; border-color: var(--accent-light) !important; color: #fff !important; }
#animExportModal .slider-row { margin: 8px 0; }
#animExportModal .progress { background: #1e293b; border: 1px solid var(--border-input); }
#animExportModal .progress-bar { background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 100%); }
#animClearAll { border-color: var(--red) !important; color: var(--red) !important; transition: all 0.15s; }
#animClearAll:hover { background: rgba(248, 113, 113, 0.15) !important; color: #fff !important; border-color: #ef4444 !important; }

/* ===== 12. Tween & Transition Dialogs ===== */
#tweenDialog .crop-modal-body { display: flex; gap: 0; padding: 0; }
#tweenCurvePreview { image-rendering: crisp-edges; }
#tweenDialog .sw { font-size: 0.75rem; padding: 4px 8px; background: #1e293b; border: 1px solid var(--border-input); border-radius: 4px; transition: all 0.15s; }
#tweenDialog .sw:hover { border-color: var(--accent); background: var(--bg-input-2); }
#tweenDialog .sw input[type="checkbox"]:checked + span { color: var(--accent); font-weight: 600; }
#tweenInfo { transition: all 0.2s; }
#tweenInfo b { font-size: 1.1em; }
.tween-checker {
  background-color: #1e293b; min-height: 160px;
  background-image: linear-gradient(45deg, #334155 25%, transparent 25%), linear-gradient(-45deg, #334155 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #334155 75%), linear-gradient(-45deg, transparent 75%, #334155 75%);
  background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}
#tweenPreviewCanvas { image-rendering: auto; }
#twPreviewScrub { accent-color: var(--accent); }
#twExportBtn:disabled, #tweenGenerate:disabled { opacity: 0.6; cursor: not-allowed; }

.transition-type-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 10px; }
.transition-type-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; background: var(--bg-input); border: 1px solid var(--border-input); border-radius: 6px; color: var(--txt-main); font-size: 0.72rem; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.transition-type-btn i { font-size: 1.05rem; color: var(--txt-muted); }
.transition-type-btn:hover { background: var(--bg-hover); border-color: var(--border-hover); }
.transition-type-btn.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent-light); }
.transition-type-btn.active i { color: var(--accent-light); }
.direction-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.direction-btn { padding: 8px 0; background: var(--bg-input); border: 1px solid var(--border-input); border-radius: 6px; color: var(--txt-main); font-size: 1rem; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.direction-btn:hover { background: var(--bg-hover); }
.direction-btn.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent-light); }
#transitionPreview { background: var(--bg-dark); border: 1px solid var(--border-input); border-radius: 6px; }

/* ===== 13. Print & Misc ===== */
@media print {
  body * { visibility: hidden; }
  .canvas-wrap, .canvas-wrap * { visibility: visible; }
  .canvas-wrap { position: absolute; left: 0; top: 0; padding: 0; background: white; }
  #bgGrid, #overlay, #brushIndicator, #marquee, #guides { display: none !important; }
  #board { box-shadow: none; position: relative !important; background: white !important; }
}
.no-change-link, .no-change-link:link, .no-change-link:visited, .no-change-link:hover, .no-change-link:active { color: #ffffff !important; text-decoration: none !important; }

/* ===== 14. Custom Thai Fonts ===== */
@font-face { font-family: 'Charm'; src: url('font/Charm-Regular.ttf') format('truetype'); font-weight: 400; }
@font-face { font-family: 'Charm'; src: url('font/Charm-Bold.ttf') format('truetype'); font-weight: 700; }
@font-face { font-family: 'Charmonman'; src: url('font/Charmonman-Regular.ttf') format('truetype'); font-weight: 400; }
@font-face { font-family: 'Charmonman'; src: url('font/Charmonman-Bold.ttf') format('truetype'); font-weight: 700; }
@font-face { font-family: 'Chonburi'; src: url('font/Chonburi-Regular.ttf') format('truetype'); font-weight: 400; }
@font-face { font-family: 'Itim'; src: url('font/Itim-Regular.ttf') format('truetype'); font-weight: 400; }
@font-face { font-family: 'Krub'; src: url('font/Krub-ExtraLight.ttf') format('truetype'); font-weight: 200; }
@font-face { font-family: 'Krub'; src: url('font/Krub-ExtraLightItalic.ttf') format('truetype'); font-weight: 200; font-style: italic; }
@font-face { font-family: 'Krub'; src: url('font/Krub-Light.ttf') format('truetype'); font-weight: 300; }
@font-face { font-family: 'Krub'; src: url('font/Krub-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; }
@font-face { font-family: 'Krub'; src: url('font/Krub-Regular.ttf') format('truetype'); font-weight: 400; }
@font-face { font-family: 'Krub'; src: url('font/Krub-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'Krub'; src: url('font/Krub-Medium.ttf') format('truetype'); font-weight: 500; }
@font-face { font-family: 'Krub'; src: url('font/Krub-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; }
@font-face { font-family: 'Krub'; src: url('font/Krub-SemiBold.ttf') format('truetype'); font-weight: 600; }
@font-face { font-family: 'Krub'; src: url('font/Krub-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; }
@font-face { font-family: 'Krub'; src: url('font/Krub-Bold.ttf') format('truetype'); font-weight: 700; }
@font-face { font-family: 'Krub'; src: url('font/Krub-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; }
@font-face { font-family: 'Pattaya'; src: url('font/Pattaya-Regular.ttf') format('truetype'); font-weight: 400; }
@font-face { font-family: 'Srisakdi'; src: url('font/Srisakdi-Regular.ttf') format('truetype'); font-weight: 400; }
@font-face { font-family: 'Srisakdi'; src: url('font/Srisakdi-Bold.ttf') format('truetype'); font-weight: 700; }
@font-face { font-family: 'Taviraj'; src: url('font/Taviraj-Thin.ttf') format('truetype'); font-weight: 100; }
@font-face { font-family: 'Taviraj'; src: url('font/Taviraj-ThinItalic.ttf') format('truetype'); font-weight: 100; font-style: italic; }
@font-face { font-family: 'Taviraj'; src: url('font/Taviraj-ExtraLight.ttf') format('truetype'); font-weight: 200; }
@font-face { font-family: 'Taviraj'; src: url('font/Taviraj-ExtraLightItalic.ttf') format('truetype'); font-weight: 200; font-style: italic; }
@font-face { font-family: 'Taviraj'; src: url('font/Taviraj-Light.ttf') format('truetype'); font-weight: 300; }
@font-face { font-family: 'Taviraj'; src: url('font/Taviraj-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; }
@font-face { font-family: 'Taviraj'; src: url('font/Taviraj-Regular.ttf') format('truetype'); font-weight: 400; }
@font-face { font-family: 'Taviraj'; src: url('font/Taviraj-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'Taviraj'; src: url('font/Taviraj-Medium.ttf') format('truetype'); font-weight: 500; }
@font-face { font-family: 'Taviraj'; src: url('font/Taviraj-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; }
@font-face { font-family: 'Taviraj'; src: url('font/Taviraj-SemiBold.ttf') format('truetype'); font-weight: 600; }
@font-face { font-family: 'Taviraj'; src: url('font/Taviraj-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; }
@font-face { font-family: 'Taviraj'; src: url('font/Taviraj-Bold.ttf') format('truetype'); font-weight: 700; }
@font-face { font-family: 'Taviraj'; src: url('font/Taviraj-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; }
@font-face { font-family: 'Taviraj'; src: url('font/Taviraj-ExtraBold.ttf') format('truetype'); font-weight: 800; }
@font-face { font-family: 'Taviraj'; src: url('font/Taviraj-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; }
@font-face { font-family: 'Taviraj'; src: url('font/Taviraj-Black.ttf') format('truetype'); font-weight: 900; }
@font-face { font-family: 'Taviraj'; src: url('font/Taviraj-BlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; }
@font-face { font-family: 'Thasadith'; src: url('font/Thasadith-Regular.ttf') format('truetype'); font-weight: 400; }
@font-face { font-family: 'Thasadith'; src: url('font/Thasadith-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'Thasadith'; src: url('font/Thasadith-Bold.ttf') format('truetype'); font-weight: 700; }
@font-face { font-family: 'Thasadith'; src: url('font/Thasadith-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; }
@font-face { font-family: 'FONTNONGNAM'; src: url('font/FONTNONGNAM.ttf') format('truetype'); font-weight: 400; }
@font-face { font-family: 'JS Angsumalin'; src: url('font/JS Angsumalin Regular.ttf') format('truetype'); font-weight: 400; }
@font-face { font-family: 'JS Chalit'; src: url('font/JS Chalit Regular.ttf') format('truetype'); font-weight: 400; }
@font-face { font-family: 'JS Chawlewhieng'; src: url('font/JS Chawlewhieng Regular.ttf') format('truetype'); font-weight: 400; }
@font-face { font-family: 'TS-Country-NP'; src: url('font/TS-Country-NP.ttf') format('truetype'); font-weight: 400; }
@font-face { font-family: 'TS-Country-B-NP'; src: url('font/TS-Country-B-NP.ttf') format('truetype'); font-weight: 700; }
@font-face { font-family: 'TS-Country-EXTRA-NP'; src: url('font/TS-Country-EXTRA-NP.ttf') format('truetype'); font-weight: 800; }
@font-face { font-family: 'TS-kaewPet Extra-NP'; src: url('font/TS-kaewPet Extra-NP.ttf') format('truetype'); font-weight: 400; }
@font-face { font-family: 'ANGSUMA'; src: url('font/ANGSUMA.ttf') format('truetype'); font-weight: 400; }