@font-face{font-family:NotoThai;src:url('/static/fonts/NotoSansThai-SemiBold.ttf')}@font-face{font-family:Scto;src:url('/static/fonts/Scto Grotesk B Bold.otf')}
@font-face{font-family:SctoRegular;src:url('/static/fonts/Scto Grotesk B Regular.otf')}
:root{--page:#f3f4f6;--surface:#fff;--raised:#fff;--text:#171719;--muted:#626772;--border:#767c85;--accent:#f50a3c;--action:#c5002a;--focus:#2463eb;--danger:#b42318;--warning:#a15c00;--ok:#146c43;--canvas-scale:.5}
*{box-sizing:border-box}body{margin:0;background:var(--page);color:var(--text);font:14px/1.45 "Segoe UI",sans-serif}button,input,select,textarea{font:inherit}button{min-height:36px;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:8px;padding:6px 10px;cursor:pointer}button:hover{background:#eef0f3}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[contenteditable]:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.primary{background:var(--action);color:#fff;border-color:var(--action)}.danger{color:var(--danger)}label{display:grid;gap:5px;color:var(--muted)}input,select,textarea{width:100%;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--text);padding:7px}textarea{resize:vertical}.app-head{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:#171719;color:#fff;position:sticky;top:0;z-index:50}.app-head>div{display:flex;align-items:center;gap:12px}.app-head button{background:#2a2a2e;color:#fff;border-color:#555}.app-head .primary{background:#f50a3c}.head-actions{flex-wrap:wrap}.workspace{display:grid;grid-template-columns:230px minmax(500px,1fr) 245px;gap:14px;padding:14px;align-items:start}.rail,.inspector,.sku-dock{background:var(--surface);border:1px solid #d3d6dc;border-radius:12px;padding:12px}.rail,.inspector{display:grid;gap:12px;position:sticky;top:72px;max-height:calc(100vh - 86px);overflow:auto}.section-head{display:flex;align-items:center;justify-content:space-between;gap:6px}.promo-list,.saved-jobs{display:grid;gap:6px}.promo-card,.saved-card{display:grid;gap:2px;text-align:left}.promo-card.active{border:2px solid var(--focus);background:#edf3ff}.promo-card small,.hint,#skuDetail{color:var(--muted)}.editor-area{display:grid;gap:8px;justify-items:center;min-width:0}.canvas-toolbar{width:450px;display:flex;justify-content:space-between;gap:12px;color:var(--muted)}.artboard{width:450px;height:600px;position:relative;background:#fff;color:#000;overflow:hidden;box-shadow:0 8px 26px #0002;container-type:size}.logo-box{position:absolute;left:62px;top:60px;width:241px;height:50px;display:grid;place-items:center;font:700 24px Scto}.campaign-text{position:absolute;left:0;top:122px;width:332px;text-align:center;font:20px Scto}.date-text{position:absolute;left:0;top:152px;width:332px;text-align:center;font:15px NotoThai}.locked-text{cursor:text;border-radius:3px}.locked-text:hover{box-shadow:0 0 0 1px #2463eb88}.sku-zone{position:absolute;left:38px;top:194px;width:257px;height:286px;display:flex;justify-content:center;align-items:flex-end}.sku-zone img{max-width:100%;max-height:100%;object-fit:contain}.sku-zone img:not([src]){display:none}.sku-zone span{color:#777}.gwp-panel{position:absolute;left:318px;top:60px;width:120px;background:#eeeced;border-radius:6px;min-height:80px}.tier{position:relative}.tier-title{min-height:26px;background:#000;color:#fff;border-radius:5px;display:grid;place-items:center;text-align:center;padding:3px 6px;font:12px NotoThai;cursor:text}.tier-reward{text-align:center;padding:5px 4px 4px;font:9px NotoThai;min-height:18px;cursor:text}.gift-row{position:relative;width:100px;margin:0 auto 5px;min-height:48px;display:flex;align-items:flex-end;justify-content:center;gap:5px;border:1px dashed transparent;border-radius:5px;padding:3px}.gift-row.active{border-color:var(--focus);background:#2463eb10}.gift-row.disabled{min-height:24px;align-items:center;border-color:#999;color:#666}.gift-row.drag-over{border:2px solid var(--focus);background:#dbe8ff}.row-tools{display:flex;justify-content:space-between;align-items:center;font-size:8px;padding:0 10px 2px;color:#555}.row-tools button{min-height:20px;padding:0 5px;border-radius:4px;font-size:8px}.gwp-item{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;transform-origin:center bottom;cursor:grab}.gwp-item.dragging{opacity:.35}.gwp-item.selected{filter:drop-shadow(0 0 2px var(--focus))}.gwp-item img{display:block;max-width:100%;max-height:100%;object-fit:contain;pointer-events:none}.gwp-label{font:8px Scto;white-space:nowrap;margin-top:3.65px}.gwp-label.top{order:-1;margin:0 0 3.65px}.gwp-label.hidden{display:none}.resize-dot{position:absolute;right:-3px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--focus);border:1px solid #fff;display:none}.gwp-item.selected .resize-dot{display:block}.footnote{position:absolute;left:318px;top:470px;width:120px;text-align:center;font:9px NotoThai}.issues{display:grid;gap:6px}.issue{padding:7px;border-radius:6px;background:#fff4e5;color:#6b3b00}.issue.error{background:#fff0ef;color:#8a1c13}.sku-dock{margin:0 14px 18px;display:grid;gap:12px}.sku-entry{display:grid;grid-template-columns:minmax(260px,1fr) 160px 120px;gap:12px;align-items:end}.sku-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}.sku-card{border:1px solid #d3d6dc;border-radius:9px;padding:9px;display:grid;gap:8px}.sku-card-head{display:flex;justify-content:space-between;gap:6px}.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.gallery-choice{min-height:58px;padding:2px;overflow:hidden}.gallery-choice img{width:100%;height:54px;object-fit:contain}.gallery-choice.active{border:3px solid var(--focus)}.empty-thumb{height:54px;display:grid;place-items:center;background:#eee;color:#666}.panel-overflow{box-shadow:0 0 0 3px var(--danger)}
@media(max-width:1050px){.workspace{grid-template-columns:190px minmax(470px,1fr)}.inspector{position:static;grid-column:1/-1;max-height:none;grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.app-head{height:auto;min-height:58px;align-items:flex-start;padding:10px}.workspace{grid-template-columns:1fr}.rail,.inspector{position:static;max-height:none}.inspector{grid-template-columns:1fr}.canvas-toolbar{width:min(450px,100%)}.editor-area{overflow:auto;justify-items:start}.sku-entry{grid-template-columns:1fr}.head-actions{justify-content:flex-end}.artboard{transform-origin:top left}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.row-tools{height:19px;position:absolute;right:2px;top:2px;z-index:6;justify-content:flex-end;gap:3px;padding:1px;border-radius:4px;background:#fffffff2;box-shadow:0 1px 4px #0002;opacity:0;pointer-events:none;transform:translateY(-2px)}
.gift-row:not(.disabled):hover .row-tools,.gift-row.active .row-tools,.gift-row:not(.disabled):focus-within .row-tools{opacity:1;pointer-events:auto}.gift-row.disabled .row-tools{pointer-events:none!important}.row-placeholder{display:block;width:100%;text-align:center;color:#777;font-size:7px;line-height:12px;position:relative;z-index:7;cursor:pointer}
.row-tools button{min-height:17px;padding:0 4px;font-size:7px;opacity:.78}
.gift-row.disabled{min-height:14px;height:14px;margin-bottom:3px;font-size:7px}
#panelMeter.has-error{color:var(--danger);font-weight:700}.locked-text.has-error{box-shadow:inset 0 0 0 2px var(--danger);background:#fff0ef;color:#8a1c13}.tier-title.locked-text.has-error{background:#6f1510;color:#fff}.artboard.has-overflow{box-shadow:0 8px 26px #0002,inset 0 0 0 4px var(--danger)}
.gwp-item{display:block}.gwp-item img{position:absolute;left:0}.gwp-label{position:absolute;left:50%;transform:translateX(-50%);margin:0}.gwp-label.top{order:initial;margin:0}.resize-dot{top:auto}
.logo-box img{display:block;max-width:100%;max-height:100%;object-fit:contain}.logo-controls{display:grid;gap:8px;padding:10px;border:1px solid var(--border);border-radius:9px}.inline-check{display:flex;align-items:center;gap:7px}.inline-check input{width:auto}.sku-card.active{box-shadow:0 0 0 3px var(--focus)}.sku-preview{min-height:28px;padding:2px 6px}.gwp-gift-tag{position:absolute;right:-7px;z-index:4;background:#f50a3c;color:#fff;border-radius:2px;padding:1px 3px;font:700 6px Scto;transform:rotate(55deg);transform-origin:center;box-shadow:0 0 0 1px #fff}body.export-mode{background:#fff}body.export-mode .app-head,body.export-mode .workspace>aside,body.export-mode .canvas-toolbar,body.export-mode .sku-dock{display:none!important}body.export-mode .workspace{display:block;padding:0}body.export-mode .editor-area{display:block}body.export-mode .artboard{box-shadow:none}body.export-mode .row-tools,body.export-mode .resize-dot,body.export-mode .gift-row.disabled{display:none!important}body.export-mode .gift-row,body.export-mode .locked-text{outline:none!important;box-shadow:none!important;border-color:transparent!important}body.export-mode .gwp-panel{box-shadow:none!important}body.export-mode .gwp-item{filter:none!important}
.campaign-text{font-family:SctoRegular;font-weight:400;letter-spacing:.7px}.logo-box{left:66px;width:190px;height:48px}.campaign-text{width:323px}.date-text{left:31.5px;width:260px}.tier-title{font-size:11px;padding-left:2px;padding-right:2px;white-space:pre-line}.tier-reward{height:21px;min-height:21px;padding:2px 3px;line-height:17px}.tier-title,.tier-reward,.date-text,.footnote{font-family:Scto,NotoThai}.gift-row{padding:0 3px}.sku-zone{left:30px;top:185px;width:273px;height:295px}
.sku-zone img{transform-origin:center bottom}.sku-scales{display:grid;grid-template-columns:1fr 1fr;gap:10px}.sku-scales label{grid-template-columns:1fr auto;align-items:center}.sku-scales input{grid-column:1/-1}
.row-separator{height:15px;display:flex;align-items:center;justify-content:center;gap:4px;font:8px Scto;color:#555}.row-separator::before,.row-separator::after{content:"";width:28px;border-top:1px solid #888}.row-gift-tag{right:-5px}

/* Shared Central Creative Tools shell. Artwork colors remain isolated in #artboard. */
:root{--bg:var(--page);--ink:var(--text);--panel:var(--surface);--line:var(--border);--brand-accent:#f50a3c;--focus-ring:#2463eb;color-scheme:light}
:root[data-theme="dark"]{--page:#16171a;--surface:#1e2024;--raised:#25272c;--text:#eef0f2;--muted:#b9bdc3;--border:#44474e;--focus:#ff6685;--focus-ring:#ff6685;color-scheme:dark}
.suite-header{display:flex;align-items:center;gap:28px;height:52px;padding:0 24px;background:#202124;color:#fff;border-bottom:1px solid rgb(255 255 255 / 6%)}
.suite-brand{flex:0 0 260px;min-width:260px;display:flex;align-items:baseline;gap:6px}.suite-kicker{font-size:14px;font-weight:720;letter-spacing:.2px;white-space:nowrap}.suite-brand h1,.suite-brand p{display:none}
#buildVersion{display:inline-flex;align-items:center;min-width:78px;min-height:44px;justify-content:flex-start;white-space:nowrap;font-size:11px;opacity:.6;font-weight:400;background:transparent!important;border:0!important;color:inherit;cursor:pointer;padding:0 2px;text-decoration:underline dotted;border-radius:0!important;box-shadow:none!important}
.suite-nav{flex:1;display:flex;align-self:stretch;align-items:stretch;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none}.suite-nav::-webkit-scrollbar{display:none}.suite-nav a,.suite-nav>span{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border:0;border-bottom:3px solid transparent;padding:0 14px;background:transparent;color:#b9bdc3;font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap}.suite-nav a:hover{color:#fff;background:rgb(255 255 255 / 3%)}.suite-nav .active{color:#fff;border-color:var(--brand-accent);background:#292b2e}
.theme-button{margin-left:auto;align-self:center;min-height:32px;display:inline-flex;align-items:center;gap:7px;border:1px solid #44464b;border-radius:7px;padding:6px 10px;background:#2a2c30;color:#fff}.theme-button:active{transform:scale(.97)}.theme-icon{display:grid;width:18px;height:18px;place-items:center}.theme-icon-svg{grid-area:1/1;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}:root[data-theme="dark"] .theme-icon-moon{display:none}:root[data-theme="light"] .theme-icon-sun{display:none}
.version-modal{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(10,11,13,.72)}.version-modal.open,.version-modal.closing{display:flex}.version-dialog{width:min(420px,100%);max-width:460px;max-height:calc(100vh - 32px);overflow:auto;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:24px;box-shadow:0 20px 60px #0006;text-align:left}.version-dialog strong{display:block;font-size:18px}.version-body{max-height:60vh;overflow-y:auto;margin:10px 0;font-size:13px;line-height:1.55}.version-entry-title{font-weight:600;margin:8px 0 4px}.version-entry-list{margin:0;padding-left:18px}.version-actions{display:flex;justify-content:flex-end}.version-actions button{min-height:36px;background:var(--action);color:#fff;border-color:var(--action)}
.version-modal.open{animation:fade-in .16s ease-out}.version-modal.open .version-dialog{animation:modal-in .18s ease-out}.suite-nav a,.theme-button{transition:background-color .16s ease,color .16s ease,border-color .16s ease,transform .12s ease}@keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-in{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}
.rail,.inspector,.sku-dock{border-color:var(--border)}:root[data-theme="dark"] button:hover{background:#30333a}:root[data-theme="dark"] .promo-card.active{background:#273247}:root[data-theme="dark"] .issue{background:#49371e;color:#ffe2b6}:root[data-theme="dark"] .issue.error{background:#4b2928;color:#ffd5d2}:root[data-theme="dark"] .empty-thumb{background:#292b30;color:#c7c9cd}
.app-head{position:sticky;top:0;height:58px}.artboard{background:#fff;color:#000;filter:none!important;mix-blend-mode:normal}
@media(max-width:760px){.suite-header{height:auto;min-height:76px;padding:13px 16px;flex-wrap:wrap;gap:11px}.suite-brand{min-width:0;flex-basis:100%}.suite-nav{width:100%;margin-left:0;flex-wrap:wrap;overflow-x:visible;gap:6px 8px}.suite-nav>*{flex:0 0 auto}.suite-nav a,.suite-nav>span,.theme-button{min-height:40px}.theme-button{margin-left:auto}.app-head{height:auto;min-height:58px;padding:10px 14px;align-items:flex-start;gap:10px;flex-direction:column}.app-head>div{width:100%}.app-head>div:first-child{min-height:28px}.app-head .head-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.app-head .head-actions button{min-width:0;padding-inline:5px;white-space:nowrap}.workspace{padding-top:14px}.editor-area{width:100%;overflow-x:auto;justify-items:start}.canvas-toolbar,.artboard{margin-inline:auto}}
@media(prefers-reduced-motion:reduce){.suite-nav a,.theme-button,.version-modal,.version-dialog{animation:none!important;transition:none!important}}
body.export-mode .suite-header,body.export-mode #feedback-root{display:none!important}
.sku-entry{grid-template-columns:minmax(260px,1fr) 160px minmax(120px,220px)}.sku-actions{display:grid;gap:6px}.sku-card.trimmed{box-shadow:inset 0 0 0 2px #28a66a}
.tier:first-child .tier-title{border-radius:5px 5px 0 0}.tier:not(:first-child) .tier-title{border-radius:0}
.canvas-toolbar,.artboard{zoom:var(--canvas-zoom,1)}body.export-mode .canvas-toolbar,body.export-mode .artboard{zoom:1}
@media(min-width:761px){.workspace{grid-template-columns:230px auto 245px;justify-content:center;gap:20px}}.sku-gallery{display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:8px}.sku-card{flex:0 0 240px;scroll-snap-align:start}
@media(max-width:760px){.sku-dock{margin-inline:14px;min-width:0}.sku-entry{grid-template-columns:minmax(0,1fr)}.sku-entry>*,.sku-gallery{min-width:0;width:100%}.sku-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.sku-actions button{min-width:0}.sku-card{flex-basis:min(240px,calc(100vw - 54px))}}

/* Focused editor workspace */
.utility-popover{position:fixed;z-index:55;top:118px;left:50%;translate:-50% 0;width:min(760px,calc(100vw - 28px));max-height:calc(100vh - 140px);overflow:auto;padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:0 0 12px 12px;box-shadow:0 18px 45px #0005}.utility-popover[hidden]{display:none}.utility-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.utility-close{min-width:36px;padding:0;font-size:20px}.utility-grid{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:12px}.logo-controls{grid-template-columns:1fr 1fr;align-items:end;border:0;padding:0}.logo-controls .logo-file,.logo-controls>small{grid-column:1/-1}.logo-file{border:1px dashed var(--border);border-radius:9px;padding:10px}.logo-file.drag,.logo-box.logo-drag{outline:3px solid var(--focus);background:#dbe8ff}.logo-file span{font-size:12px}.logo-draft-actions{display:flex;gap:8px}.logo-draft-actions button{flex:1}.saved-jobs{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.rail{align-content:start}.workspace{grid-template-columns:190px auto 270px}.canvas-toolbar{align-items:center}.zoom-controls{display:flex;align-items:center;gap:5px}.zoom-controls button{min-height:30px;padding:2px 8px}.zoom-controls output{min-width:46px;text-align:center;font-variant-numeric:tabular-nums}.canvas-viewport{max-width:calc(100vw - 516px);max-height:calc(100vh - 158px);overflow:auto;padding:2px;overscroll-behavior:contain}.canvas-viewport.panning{cursor:grabbing;user-select:none}.artboard{transform-origin:top left}
.tier{cursor:default}.tier.tier-selected{box-shadow:inset 0 0 0 1px #2463eb99}.gift-row{border:0;background:transparent}.gift-row.disabled{display:none}.row-tools,.row-placeholder{display:none!important}.gift-row.drop-ready{outline:1px dashed var(--focus);background:#2463eb10}.gift-row.drag-over{outline:2px solid var(--focus);border:0}.row-layout-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0}.row-layout-switch button{display:grid;place-items:center;gap:2px}.row-layout-switch button span{font-size:18px;line-height:1}.row-layout-switch button[aria-pressed="true"]{border-color:var(--focus);box-shadow:inset 0 0 0 1px var(--focus);background:#edf3ff;color:#173f96}.inspector #tierInspector,.inspector #gwpInspector{display:grid;gap:10px}.inspector [hidden]{display:none!important}.issues:not(:empty){border-top:1px solid var(--border);padding-top:10px}
body.export-mode .tier.tier-selected{box-shadow:none}.logo-box{transition:outline-color .12s ease,background-color .12s ease}.tier{transition:box-shadow .12s ease}.gift-row{transition:outline-color .12s ease,background-color .12s ease}
@media(max-width:1050px){.workspace{grid-template-columns:170px minmax(0,1fr)}.canvas-viewport{max-width:calc(100vw - 226px)}.inspector{grid-column:1/-1}}
@media(max-width:760px){.utility-popover{top:auto;bottom:0;left:0;translate:0;width:100%;max-height:78vh;border-radius:14px 14px 0 0}.utility-grid,.logo-controls{grid-template-columns:1fr}.workspace{grid-template-columns:1fr}.rail{position:static}.canvas-viewport{max-width:100%;max-height:none;width:100%}.canvas-toolbar{width:100%;flex-wrap:wrap}.zoom-controls{order:2}.app-head .head-actions{grid-template-columns:repeat(3,minmax(0,1fr))}}
body.dragging-gwp .gift-row:not(.disabled){outline:1px dashed var(--focus);background:#2463eb10}
body.export-mode .canvas-viewport{max-width:none;max-height:none;overflow:visible;padding:0}body.export-mode .utility-popover{display:none!important}
.tier-count-control{display:grid;gap:7px;padding-bottom:10px;border-bottom:1px solid var(--border)}.tier-count-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.tier-count-switch button[aria-pressed="true"]{border-color:var(--focus);box-shadow:inset 0 0 0 1px var(--focus);background:#edf3ff;color:#173f96}.gwp-panel[data-tier-count="1"]{left:256px;top:226px;width:181px;min-height:199px}.artboard:has(.gwp-panel[data-tier-count="1"]) .footnote{left:256px;width:181px}.gwp-panel[data-tier-count="1"] .gift-row{width:169px}.gwp-panel[data-tier-count="1"] .tier-title{font-size:13px}.gwp-panel[data-tier-count="1"] .tier-reward{font-size:10px}
.artboard:has(.gwp-panel[data-tier-count="1"]) .logo-box{left:130px}.artboard:has(.gwp-panel[data-tier-count="1"]) .campaign-text{width:450px}.artboard:has(.gwp-panel[data-tier-count="1"]) .date-text{left:95px}.artboard:has(.gwp-panel[data-tier-count="1"]) .sku-zone{left:20px;width:216px}
:root[data-theme="dark"] .tier-count-switch button[aria-pressed="true"],:root[data-theme="dark"] .row-layout-switch button[aria-pressed="true"]{background:#273247;color:#fff}