html.i18n-pending body{visibility:hidden}
.draw-page{--draw-pink:#ed4d87;--draw-red:#ff4964;background:linear-gradient(180deg,#fff6f9 0,#f7f1e9 68%);color:var(--ink)}
.draw-shell{width:min(1180px,calc(100% - 36px));min-height:72vh;margin:auto;padding:54px 0 90px}.draw-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:34px}.draw-heading h1{margin:8px 0 12px;font-size:clamp(42px,6vw,78px);line-height:.95;letter-spacing:-.065em}.draw-heading h1 span{display:inline-block;margin-left:8px;padding:7px 11px;border-radius:999px;background:#ffe077;color:#4a3325;font-size:12px;letter-spacing:.02em;vertical-align:middle}.draw-heading>div>p:last-child{max-width:630px;margin:0;color:var(--muted);font-size:16px}.draw-help{padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font-weight:750;text-decoration:none}
.draw-source,.draw-editor{padding:26px;border:1px solid color-mix(in srgb,var(--line) 85%,#ed4d87);border-radius:24px;background:color-mix(in srgb,var(--card) 94%,#fff0f5);box-shadow:0 24px 70px rgba(91,46,63,.08)}.draw-section-title{display:flex;align-items:center;gap:13px;margin-bottom:22px}.draw-section-title>span{display:grid;width:38px;height:38px;flex:0 0 38px;place-items:center;border-radius:50%;background:var(--ink);color:#fff;font-size:11px;font-weight:850}.draw-section-title h2,.draw-section-title p{margin:0}.draw-section-title h2{font-size:22px;letter-spacing:-.035em}.draw-section-title p{margin-top:2px;color:var(--muted);font-size:12px}.draw-section-title>button{margin-left:auto;border:0;background:transparent;color:var(--draw-pink);font-weight:800;cursor:pointer}
.draw-source-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px}.draw-source-actions>button,.draw-source-actions>label{display:grid;grid-template-columns:50px 1fr;grid-template-rows:1fr 1fr;gap:0 12px;align-items:center;min-height:112px;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--surface,#fff);color:var(--ink);text-align:left;cursor:pointer;transition:.2s}.draw-source-actions>button:hover,.draw-source-actions>label:hover,.draw-source-actions>label.dragging{border-color:var(--draw-pink);transform:translateY(-2px);box-shadow:0 14px 30px rgba(185,73,112,.12)}.draw-source-actions span{grid-row:1/3;display:grid;width:50px;height:50px;place-items:center;border-radius:15px;background:#ffe5ee;color:var(--draw-pink);font-size:24px}.draw-source-actions b{align-self:end;font:800 15px/1.3 inherit}.draw-source-actions small{align-self:start;color:var(--muted);font-size:11px}.draw-error{min-height:19px;margin:10px 0 0;color:#b4233d;font-size:12px;font-weight:650}
.draw-editor{margin-top:22px}.draw-stage-wrap{position:relative;padding:18px 18px 76px;border-radius:20px;background:#2d2528}.draw-stage{position:relative;display:grid;width:fit-content;max-width:100%;max-height:min(68vh,780px);margin:auto;overflow:hidden;border-radius:12px;background:repeating-conic-gradient(#e5dfe1 0 25%,#f4f1f2 0 50%) 50%/20px 20px;box-shadow:0 18px 55px #0004;isolation:isolate}.draw-stage canvas{grid-area:1/1;display:block;max-width:100%;max-height:min(68vh,780px);width:auto;height:auto}.draw-stage #sketchCanvas,.draw-stage #removeCanvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.draw-stage #removeCanvas{z-index:3}.draw-stage #sketchCanvas{z-index:2}.brush-cursor{position:fixed;z-index:1000;display:none;width:28px;height:28px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px var(--draw-pink),0 2px 8px #0005;pointer-events:none;transform:translate(-50%,-50%)}.draw-stage.pointer-active .brush-cursor{display:block}.draw-loading{position:absolute;inset:0;z-index:6;display:grid;place-content:center;justify-items:center;gap:9px;padding:25px;background:rgba(38,25,31,.72);color:white;text-align:center;backdrop-filter:blur(7px)}.draw-loading[hidden]{display:none}.draw-loading .troxinh-spinner{width:42px;height:42px}.draw-loading small{color:#f4dce5}
.draw-toolbar{position:absolute;left:50%;bottom:16px;z-index:7;display:flex;align-items:center;gap:7px;max-width:calc(100% - 32px);padding:7px;border:1px solid #ffffff24;border-radius:16px;background:rgba(255,255,255,.94);box-shadow:0 12px 35px #0003;transform:translateX(-50%);backdrop-filter:blur(12px)}.draw-toolbar button{display:flex;align-items:center;gap:6px;min-height:42px;padding:0 13px;border:1px solid transparent;border-radius:11px;background:transparent;color:#5c4950;font:750 12px/1 inherit;white-space:nowrap;cursor:pointer}.draw-toolbar button span{font-size:18px}.draw-toolbar button.active{border-color:#f3aac4;background:#ffe7f0;color:#b93265}.draw-toolbar button:disabled{opacity:.4;cursor:not-allowed}.draw-toolbar label{display:grid;grid-template-columns:max-content minmax(90px,150px) 24px;align-items:center;gap:8px;padding:0 10px;color:#6d5961;font-size:10px;font-weight:750;white-space:nowrap}.draw-toolbar input{accent-color:var(--draw-pink)}.draw-toolbar output{color:var(--draw-pink);font-weight:850}
.draw-prompt{padding:22px 4px 0}.draw-prompt>label{display:block;margin-bottom:8px;font-size:13px;font-weight:800}.draw-prompt>label small{margin-left:5px;color:var(--muted);font-weight:550}.draw-prompt>div{display:grid;grid-template-columns:1fr auto;gap:10px}.draw-prompt textarea{min-height:64px;padding:14px;border:1px solid var(--line);border-radius:13px;background:var(--control,#fff);color:var(--ink);font:inherit;resize:vertical}.draw-prompt .primary{min-width:150px;border-radius:13px;background:var(--draw-pink)}.draw-prompt .primary:disabled{opacity:.45;cursor:not-allowed}.draw-prompt>p:not(.draw-error){margin:7px 0 0;color:var(--muted);font-size:11px}
.design-picker,.draw-result{width:min(1040px,calc(100% - 28px));max-height:calc(100dvh - 28px);padding:0;border:0;border-radius:22px;background:var(--card);color:var(--ink);box-shadow:0 30px 100px #2d172066}.design-picker::backdrop,.draw-result::backdrop{background:rgba(39,25,31,.67);backdrop-filter:blur(6px)}.design-picker>section,.draw-result>section{padding:24px}.design-picker header,.draw-result header{position:static;height:auto;padding:0 0 18px;border:0;background:transparent;backdrop-filter:none}.design-picker h2,.draw-result h2{margin:3px 0 0;font-size:30px}.design-picker header>button,.draw-result header>button{display:grid;width:38px;height:38px;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--surface-2,#f7eef1);color:var(--ink);font-size:23px;cursor:pointer}.design-picker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-height:62vh;overflow:auto}.design-picker-card{padding:0;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--surface,#fff);cursor:pointer}.design-picker-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#eee}.design-picker-card span{display:block;padding:10px;color:var(--ink);font-size:11px;font-weight:750}.design-picker-state{grid-column:1/-1;padding:50px 20px;color:var(--muted);text-align:center}.design-picker-state button{margin-top:12px;border:0;background:none;color:var(--draw-pink);font-weight:800;cursor:pointer}
.draw-result{width:min(1120px,calc(100% - 24px))}.draw-result h2 span{color:var(--draw-pink)}.draw-compare{display:grid;grid-template-columns:1fr 1fr;gap:12px}.draw-compare figure{position:relative;display:grid;place-items:center;min-width:0;min-height:260px;margin:0;padding:12px;border-radius:16px;background:#ede8e9}.draw-compare figcaption{position:absolute;top:20px;left:20px;z-index:2;padding:6px 10px;border-radius:999px;background:#fff;color:#513b44;font-size:10px;font-weight:900}.draw-compare img{display:block;max-width:100%;max-height:58vh;border-radius:9px;object-fit:contain}.draw-result-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.draw-result-actions button{min-height:43px;padding:0 18px;border:1px solid var(--line);border-radius:11px;background:var(--surface,#fff);color:var(--ink);font-weight:800;cursor:pointer}.draw-result-actions .primary{border-color:var(--draw-pink);background:var(--draw-pink);color:#fff}.draw-result-actions button:disabled{opacity:.45;cursor:not-allowed}.draw-result-error{min-height:18px;margin:12px 0 0;color:#b4233d;font-size:12px;font-weight:650}
@media(max-width:800px){.draw-shell{width:min(100% - 22px,680px);padding:32px 0 70px}.draw-heading{align-items:start}.draw-help{display:none}.draw-heading h1{font-size:46px}.draw-heading h1 span{margin-left:2px}.draw-source,.draw-editor{padding:16px;border-radius:18px}.draw-source-actions{grid-template-columns:1fr}.draw-source-actions>button,.draw-source-actions>label{min-height:92px;padding:14px}.draw-stage-wrap{margin-inline:-6px;padding:10px 8px 132px;border-radius:15px}.draw-stage,.draw-stage canvas{max-height:58vh}.draw-toolbar{bottom:10px;display:grid;grid-template-columns:1fr 1fr;width:calc(100% - 16px);max-width:none}.draw-toolbar button{justify-content:center}.draw-toolbar label{grid-column:1/-1;grid-template-columns:max-content 1fr 24px;height:40px}.draw-prompt{padding-top:16px}.draw-prompt>div{grid-template-columns:1fr}.draw-prompt .primary{min-height:48px}.design-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.draw-compare{grid-template-columns:1fr;max-height:65vh;overflow:auto}.draw-compare figure{min-height:200px}.draw-compare img{max-height:44vh}.draw-result-actions{display:grid;grid-template-columns:1fr 1fr}.draw-result-actions .primary{grid-column:1/-1;grid-row:1}.draw-result-actions button{width:100%}}
@media(max-width:420px){.draw-heading h1{font-size:39px}.draw-section-title>span{width:34px;height:34px;flex-basis:34px}.draw-section-title h2{font-size:19px}.design-picker-grid{grid-template-columns:1fr 1fr}.design-picker>section,.draw-result>section{padding:16px}}
.draw-stage{touch-action:none}.draw-stage #removeCanvas{z-index:2;pointer-events:none}.draw-stage #sketchCanvas{z-index:3;pointer-events:none}.draw-stage #interactionCanvas{position:absolute;inset:0;z-index:4;width:100%;height:100%;pointer-events:none}

/* Compact workspace aligned with the TroXinh Score layout. */
.draw-page{overflow-x:hidden;background:var(--surface-3)}
.draw-shell{width:min(1180px,calc(100% - 48px));min-height:0;padding:28px 0 88px}
.draw-heading{display:block;margin:0 0 16px;padding:10px 4px}
.draw-heading .eyebrow{color:var(--draw-pink)}
.draw-heading h1{margin:6px 0 10px;font-size:clamp(52px,5.25vw,68px);line-height:.94;letter-spacing:-.067em;white-space:nowrap}
.draw-heading h1 em{color:var(--draw-pink);font-style:normal}
.draw-heading>div>p:last-child{max-width:610px;font-size:15px}
.draw-source,.draw-editor{min-height:650px;margin:0;padding:0;overflow:hidden;border:1px solid var(--line);border-radius:28px;background:var(--surface);box-shadow:0 28px 90px color-mix(in srgb,var(--ink) 12%,transparent)}
.draw-source{display:grid;grid-template-columns:minmax(330px,390px) minmax(0,1fr)}
.draw-source[hidden],.draw-editor[hidden]{display:none}
.draw-source-control{padding:28px 26px;border-right:1px solid var(--line);background:var(--surface-2)}
.draw-section-title{align-items:flex-start;margin-bottom:22px}
.draw-section-title>span{width:auto;height:auto;flex:0 0 auto;border-radius:0;background:transparent;color:var(--draw-pink);font-size:11px}
.draw-section-title h2{font-size:18px;letter-spacing:-.025em}
.draw-section-title p{max-width:245px;line-height:1.45}
.draw-source-actions{display:grid;grid-template-columns:1fr;gap:10px}
.draw-source-actions>label{display:grid;grid-template-columns:1fr;grid-template-rows:auto;place-items:center;align-content:center;min-height:250px;padding:24px;border:1.5px dashed color-mix(in srgb,var(--draw-pink) 65%,var(--line));border-radius:19px;background:var(--surface);text-align:center}
.draw-source-actions>label .draw-upload-icon{display:grid;width:58px;height:58px;margin:0 0 16px;place-items:center;border:1px solid color-mix(in srgb,var(--draw-pink) 48%,var(--line));border-radius:18px;background:color-mix(in srgb,var(--draw-pink) 10%,var(--surface));color:var(--draw-pink);box-shadow:0 12px 30px color-mix(in srgb,var(--draw-pink) 12%,transparent)}
.draw-upload-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.draw-source-actions>label b{margin-bottom:7px;font-size:15px}
.draw-source-actions>button{display:grid;grid-template-columns:38px 1fr;grid-template-rows:1fr 1fr;min-height:68px;padding:12px 14px;border-radius:13px}
.draw-source-actions>button span{grid-row:1/3;width:38px;height:38px;border-radius:11px;font-size:17px}
.draw-source-actions>button b{font-size:12px}.draw-source-actions>button small{font-size:10px}
.draw-source-empty{display:grid;min-height:648px;padding:32px;place-items:center;align-content:center;text-align:center;background:radial-gradient(circle at 75% 10%,color-mix(in srgb,var(--yellow) 18%,transparent),transparent 35%),var(--surface)}
.draw-source-empty img{width:100px;filter:drop-shadow(0 15px 22px #6e3a3130)}
.draw-source-empty h2{margin:18px 0 7px;font-size:25px}.draw-source-empty p{max-width:430px;margin:0;color:var(--muted);font-size:12px;line-height:1.55}
.draw-editor{display:grid;grid-template-columns:minmax(330px,390px) minmax(0,1fr);grid-template-rows:auto 1fr}
.draw-editor>.draw-section-title{grid-column:1;grid-row:1;margin:0;padding:28px 26px 18px;border-right:1px solid var(--line);background:var(--surface-2)}
.draw-editor>.draw-section-title>button{font-size:11px}
.draw-editor>.draw-stage-wrap{grid-column:2;grid-row:1/3;display:grid;align-content:center;min-width:0;margin:0;padding:24px 24px 86px;border-radius:0;background:radial-gradient(circle at 75% 10%,color-mix(in srgb,var(--yellow) 14%,transparent),transparent 35%),var(--surface)}
.draw-stage{max-height:540px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);box-shadow:0 16px 45px color-mix(in srgb,var(--ink) 10%,transparent)}
.draw-stage canvas{max-height:540px}
.draw-toolbar{bottom:18px;border-color:var(--line);box-shadow:0 10px 28px color-mix(in srgb,var(--ink) 12%,transparent)}
.draw-prompt{grid-column:1;grid-row:2;align-self:stretch;padding:8px 26px 26px;border-right:1px solid var(--line);background:var(--surface-2)}
.draw-prompt>div{grid-template-columns:1fr}.draw-prompt textarea{min-height:108px;resize:none}.draw-prompt .primary{min-height:52px;width:100%}
.draw-prompt>p:not(.draw-error){line-height:1.45}

@media(max-width:900px){
 .draw-shell{width:min(100% - 28px,720px);padding-top:28px}
 .draw-heading h1{font-size:clamp(44px,8vw,54px)}
 .draw-source,.draw-editor{grid-template-columns:1fr;min-height:0}
 .draw-source-control,.draw-editor>.draw-section-title,.draw-prompt{border-right:0}
 .draw-source-empty{display:none}
 .draw-editor{grid-template-rows:auto auto auto}
 .draw-editor>.draw-section-title{grid-column:1;grid-row:1}
 .draw-editor>.draw-stage-wrap{grid-column:1;grid-row:2;min-height:560px;padding:20px 18px 86px;border-top:1px solid var(--line)}
 .draw-prompt{grid-column:1;grid-row:3;padding-top:22px}
}
@media(max-width:560px){
 .draw-shell{width:calc(100% - 28px);padding:20px 0 64px}
 .draw-heading{padding:12px 6px;text-align:center}
 .draw-heading h1{margin-top:12px;font-size:clamp(48px,14vw,60px);white-space:normal}
 .draw-heading>div>p:last-child{font-size:14px;line-height:1.5}
 .draw-source,.draw-editor{border-radius:21px}
 .draw-source-control,.draw-editor>.draw-section-title,.draw-prompt{padding-left:20px;padding-right:20px}
 .draw-source-empty{min-height:390px;padding:24px 20px}
 .draw-editor>.draw-stage-wrap{min-height:0;padding:14px 10px 132px}
 .draw-stage,.draw-stage canvas{max-height:58vh}
}

/* Semantic Draw controls */
.draw-context{position:absolute;left:50%;bottom:82px;z-index:7;width:min(720px,calc(100% - 32px));padding:10px 12px;border:1px solid #f1d2de;border-radius:16px;background:rgba(255,255,255,.94);box-shadow:0 10px 30px #4d243214;transform:translateX(-50%);backdrop-filter:blur(14px)}
.draw-context[hidden]{display:none}.context-row{display:flex;align-items:center;gap:6px;min-height:34px;overflow-x:auto}.context-row+.context-row{margin-top:6px}.context-row>b{min-width:68px;color:var(--muted);font-size:10px}.context-row button{min-height:30px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font:700 10px/1 inherit;white-space:nowrap}.context-row button.active{border-color:#ff8db7;background:#ffeaf2;color:#d53772}.draw-swatch{width:30px;min-width:30px!important;padding:0!important;background:var(--swatch)!important;box-shadow:inset 0 0 0 1px #0000000d}.draw-swatch.active{box-shadow:0 0 0 2px #fff,0 0 0 4px #ff6fa5}.draw-swatch span{position:absolute;width:1px;height:1px;overflow:hidden}.color-picker{display:flex!important;grid-template-columns:none!important;gap:4px!important;padding:0 4px!important;font-size:9px!important}.color-picker input{width:28px;height:28px;padding:2px;border:0;background:none}.intensity{display:flex!important;grid-template-columns:auto 85px!important;margin-left:auto}.intensity input{width:85px}
.draw-toolbar{min-height:56px;gap:3px;border-color:#f1d2de;background:rgba(255,255,255,.95)}.draw-toolbar>i{width:1px;height:28px;margin:0 3px;background:#f1d2de}.draw-toolbar button{flex-direction:column;justify-content:center;gap:2px;min-width:54px;min-height:44px;padding:3px 7px;border-radius:11px;font-size:9px}.draw-toolbar button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.draw-toolbar button.active{border-color:#f4b5cc;background:#ffedf4;color:#ff4f91}.draw-toolbar button>span{font-size:9px}.draw-toolbar label{grid-template-columns:max-content minmax(70px,110px) 20px;padding:0 5px}.draw-stage-wrap:has(.draw-context:not([hidden])){padding-bottom:160px}
@media(max-width:700px){.draw-editor>.draw-stage-wrap{padding-bottom:94px}.draw-stage-wrap:has(.draw-context:not([hidden])){padding-bottom:172px}.draw-toolbar{left:8px;right:8px;bottom:10px;display:flex;width:auto;max-width:none;overflow-x:auto;transform:none;scrollbar-width:none}.draw-toolbar::-webkit-scrollbar{display:none}.draw-toolbar button{flex:0 0 48px;min-width:48px}.draw-toolbar button>span{display:none}.draw-toolbar>i{flex:0 0 1px}.draw-toolbar label{flex:0 0 142px;grid-column:auto}.draw-context{bottom:76px;width:calc(100% - 16px);padding:8px}.context-row>b{min-width:55px}.draw-context .intensity{margin-left:0}}

/* Full-canvas Draw workspace */
.draw-editor{position:relative;display:block;height:clamp(680px,calc(100vh - 118px),850px);min-height:680px;padding:12px;border-radius:28px;background:color-mix(in srgb,var(--surface) 96%,#fff0f6)}
.draw-editor>.draw-stage-wrap{position:relative;display:block;width:100%;height:100%;min-height:0;padding:0;border:0;border-radius:18px;background:#f7eef2;overflow:hidden}
.draw-stage{width:100%;height:100%;max-height:none;border:0;border-radius:18px;box-shadow:none;background:#eee8ea}
.draw-stage canvas,.draw-stage .after-overlay{width:100%;height:100%;max-height:none;object-fit:contain}
.after-overlay{position:absolute;inset:0;z-index:4;pointer-events:none}.draw-stage #interactionCanvas{z-index:5}
.draw-mode-card,.draw-top-actions{position:absolute;top:16px;z-index:8;display:flex;border:1px solid #f1d2de;background:rgba(255,255,255,.86);box-shadow:0 8px 25px #43212d12;backdrop-filter:blur(14px)}
.draw-mode-card{left:16px;align-items:flex-start;gap:9px;width:190px;padding:10px 12px;border-radius:12px}.draw-mode-card svg,.draw-top-actions svg,.draw-prompt svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.draw-mode-card b,.draw-mode-card small{display:block}.draw-mode-card b{font-size:13px}.draw-mode-card small{margin-top:2px;color:var(--muted);font-size:9px;line-height:1.35}
.draw-top-actions{right:16px;gap:5px;padding:5px;border-radius:12px}.draw-top-actions button{display:flex;align-items:center;gap:5px;min-height:38px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:750 10px/1 inherit}.draw-top-actions button:hover:not(:disabled),.draw-top-actions button.active{background:#ffedf4;color:var(--draw-pink)}.draw-top-actions button:disabled{opacity:.38}
.draw-prompt{position:absolute;left:50%;bottom:150px;z-index:8;width:min(650px,calc(100% - 32px));padding:0;border:0;background:transparent;transform:translateX(-50%)}.draw-prompt>div{display:flex;align-items:center;gap:9px;height:52px;padding:5px 5px 5px 14px;border:1px solid #f1d2de;border-radius:15px;background:rgba(255,255,255,.94);box-shadow:0 10px 30px #4d24321c;backdrop-filter:blur(14px)}.draw-prompt>div>span{color:var(--draw-pink)}.draw-prompt input{min-width:0;flex:1;height:100%;border:0;outline:0;background:transparent;color:var(--ink);font:inherit}.draw-prompt .primary{display:flex;align-items:center;justify-content:center;gap:6px;width:auto;min-width:118px;min-height:40px;padding:0 15px;border:0;border-radius:11px;background:#ef4382;color:#fff;font-weight:800}.draw-prompt>p{position:absolute;top:55px;left:12px;margin:0!important;font-size:9px!important}.draw-prompt .draw-error{left:auto;right:12px;color:#b4233d}
.draw-prompt #drawHint{display:none}
.draw-context{bottom:88px;width:max-content;max-width:calc(100% - 32px);padding:6px 9px}.context-row{min-height:38px}.context-row+.context-row{margin:0 0 0 5px}.draw-context{display:flex}.draw-context .context-row>b{display:none}.draw-context .context-row button{min-height:34px}.draw-context .intensity{margin-left:8px}.draw-toolbar{bottom:16px;min-height:60px}.draw-toolbar button{min-width:58px}.draw-toolbar .dock-size{display:none}
.layers-popover{position:absolute;right:20px;bottom:84px;z-index:10;width:260px;padding:10px;border:1px solid #f1d2de;border-radius:14px;background:rgba(255,255,255,.96);box-shadow:0 14px 42px #3d202b24;backdrop-filter:blur(16px)}.layers-popover header{position:static;height:auto;padding:3px 5px 8px;border:0;background:none}.layers-popover header button{border:0;background:none;font-size:20px}.layer-row{display:grid;grid-template-columns:34px 1fr 34px;align-items:center;min-height:42px;border-top:1px solid var(--line)}.layer-row button{border:0;background:none;color:var(--muted)}.layer-row button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}.layer-row input{min-width:0;border:0;background:none;color:var(--ink);font:700 11px/1 inherit}.layer-row.selected{background:#fff0f5}.stroke-note{position:absolute;z-index:12;width:190px;padding:8px;border:1px solid #f1d2de;border-radius:12px;background:#fff;box-shadow:0 10px 28px #3118222b}.stroke-note input{width:100%;height:34px;padding:0 8px;border:1px solid var(--line);border-radius:8px}.stroke-note div{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}.stroke-note button{border:0;background:none;color:var(--draw-pink);font-size:10px;font-weight:800}
@media(max-width:900px){.draw-editor{height:calc(100dvh - 90px);min-height:620px;padding:8px}.draw-editor>.draw-stage-wrap{min-height:0;padding:0}.draw-prompt{bottom:144px}.draw-context{bottom:80px}.draw-toolbar{left:8px;right:8px;width:auto}.draw-mode-card{top:10px;left:10px}.draw-top-actions{top:10px;right:10px}.draw-top-actions span{display:none}}
@media(max-width:560px){.draw-heading{display:none}.draw-shell{width:100%;padding:0}.draw-editor{height:calc(100dvh - 64px);min-height:560px;padding:0;border:0;border-radius:0}.draw-editor>.draw-stage-wrap,.draw-stage{border-radius:0}.draw-mode-card{width:155px}.draw-prompt{bottom:142px;width:calc(100% - 16px)}.draw-prompt .primary{min-width:44px;width:44px;padding:0}.draw-prompt .primary span{display:none}.draw-context{left:8px;right:8px;bottom:76px;display:flex;width:auto;max-width:none;overflow-x:auto;transform:none}.layers-popover{right:8px;bottom:76px;width:240px}}

/* Keep the image frame geometrically stable across every drawing mode. */
.draw-editor>.draw-stage-wrap,.draw-stage-wrap:has(.draw-context:not([hidden])){padding:0!important}
.draw-stage{display:grid;place-items:center;overflow:hidden;border:1px solid #ead5dd;background:#f4edef}
.draw-stage canvas{grid-area:1/1;width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;object-fit:contain}
.draw-stage #removeCanvas,.draw-stage #sketchCanvas,.draw-stage #interactionCanvas{inset:auto;top:50%;left:50%;transform:translate(-50%,-50%)}
.draw-prompt{bottom:84px}
.draw-context{bottom:144px}
.context-size{display:flex;align-items:center;width:104px;height:34px;padding:0 8px}.context-size input{width:100%;accent-color:var(--draw-pink)}
@media(max-width:900px){.draw-prompt{bottom:78px}.draw-context{bottom:138px}}
@media(max-width:560px){.draw-prompt{bottom:76px}.draw-context{bottom:136px}}

/* Fixed image frame above a separate drawing control rail. */
.draw-editor>.draw-stage-wrap{display:flex!important;flex-direction:column;align-content:initial!important;overflow:visible;background:transparent}
.draw-stage{order:0;flex:0 0 calc(100% - 196px);width:100%;height:calc(100% - 196px);min-height:420px;background:#f4edef;transform:none}
.draw-stage #baseCanvas{transform:scale(var(--draw-zoom,1));transform-origin:center}
.draw-stage #removeCanvas,.draw-stage #sketchCanvas,.draw-stage #interactionCanvas{transform:translate(-50%,-50%) scale(var(--draw-zoom,1));transform-origin:center}
.draw-stage .after-overlay{transform:scale(var(--draw-zoom,1));transform-origin:center}
.draw-context{position:relative;order:1;left:auto;bottom:auto;width:max-content;max-width:calc(100% - 16px);margin:8px auto 0;transform:none;box-shadow:none}
.draw-prompt{position:relative;order:2;left:auto;bottom:auto;width:min(650px,calc(100% - 16px));margin:8px auto 0;transform:none}
.draw-prompt>p{display:none}
.draw-toolbar{position:relative;order:3;left:auto;bottom:auto;width:max-content;max-width:calc(100% - 16px);margin:8px auto 0;transform:none;box-shadow:none}
.layers-popover{bottom:72px}
@media(max-width:900px){.draw-editor>.draw-stage-wrap{padding:8px!important}.draw-stage{min-height:360px}.draw-context,.draw-prompt,.draw-toolbar{bottom:auto}.draw-toolbar{left:auto;right:auto;width:max-content;max-width:calc(100% - 8px)}}
@media(max-width:560px){.draw-editor>.draw-stage-wrap{padding:6px!important}.draw-stage{flex-basis:calc(100% - 190px);height:calc(100% - 190px);min-height:300px;border-radius:14px}.draw-context,.draw-prompt,.draw-toolbar{left:auto;right:auto;bottom:auto}.draw-context{display:flex;width:max-content;max-width:100%;margin-top:6px;overflow-x:auto}.draw-prompt{width:100%;margin-top:6px}.draw-toolbar{width:100%;max-width:100%;margin-top:6px}.layers-popover{right:8px;bottom:68px}}

/* Centered camera surface with zoom and hand-pan. */
.draw-stage canvas{position:absolute!important;top:50%!important;left:50%!important;width:var(--surface-width)!important;height:var(--surface-height)!important;max-width:none!important;max-height:none!important;transform:translate(-50%,-50%) translate(var(--pan-x,0),var(--pan-y,0)) scale(var(--draw-zoom,1))!important;transform-origin:center!important}
.draw-stage .after-overlay{inset:auto;top:50%;left:50%;width:var(--surface-width);height:var(--surface-height);object-fit:fill;transform:translate(-50%,-50%) translate(var(--pan-x,0),var(--pan-y,0)) scale(var(--draw-zoom,1));transform-origin:center}
.draw-stage.is-panning{cursor:grab}.draw-stage.is-panning:active{cursor:grabbing}.draw-stage.is-panning .brush-cursor{display:none}
.draw-prompt .primary{min-width:88px;min-height:36px;padding:0 10px;font-size:9px;line-height:1}.draw-prompt .primary span{font-size:12px}.draw-prompt .primary svg{width:13px;height:13px}
@media(max-width:560px){.draw-prompt .primary{min-width:36px;width:36px;min-height:36px;padding:0}.draw-toolbar button{flex-basis:44px;min-width:44px}}
.design-picker-card{position:relative}.design-picker-card>.troxinh-spinner{position:absolute;z-index:1;top:calc(40% - 10px);left:calc(50% - 10px);width:20px;height:20px;padding:0}.design-picker-card:not(.loading)>.troxinh-spinner{display:none}.design-picker-card.failed img{opacity:.35}