:root { --ve-accent:#6d28d9; --ve-ink:#252733; --ve-muted:#626673; --ve-line:#dfe1e7; --ve-bg:#f5f5f8; --ve-font:'Noto Sans Thai','Manrope',system-ui,sans-serif; color-scheme:light; }
*{box-sizing:border-box}body{margin:0;color:var(--ve-ink);background:var(--ve-bg);font:400 14px/1.6 var(--ve-font)}button,input,textarea,select{font:inherit}button{cursor:pointer;color:inherit}button:disabled{opacity:.4;cursor:not-allowed}[hidden]{display:none!important}button,a,summary,input,textarea,select{outline-offset:3px}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--ve-accent)}::selection{background:#e5d5ff;color:#35126a}input,textarea{caret-color:var(--ve-accent)}svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}button,a{ -webkit-tap-highlight-color:transparent}a{color:inherit;text-underline-offset:4px}
.ve-topbar{display:flex;align-items:center;gap:18px;min-height:66px;padding:10px 20px;background:#20212a;color:#f5f5f8;position:relative;z-index:5}.ve-home{color:#fff;font-weight:600;font-size:16px;text-decoration:none;padding-right:18px;border-right:1px solid #555760}.ve-topbar h1{font:500 14px/1.5 var(--ve-font);margin:0}.ve-history{display:flex;gap:4px}.ve-icon-button{display:grid;place-items:center;width:36px;min-height:38px;background:transparent;border:1px solid transparent;border-radius:5px;padding:7px}.ve-icon-button:hover:not(:disabled){background:#ffffff14}.ve-devices{display:flex;gap:3px;margin:auto}.ve-devices button{border:0;border-radius:5px;padding:8px 12px;min-height:38px;background:transparent;color:#d5d6de}.ve-devices button[aria-pressed=true]{background:#46434f;color:#fff}.ve-top-actions{display:flex;align-items:center;gap:10px}.ve-button{min-height:40px;padding:8px 14px;border:1px solid #b6bac6;border-radius:5px;background:#fff;color:var(--ve-ink);line-height:1.5}.ve-topbar .ve-button:not(.ve-primary){border-color:#646672;background:transparent;color:#fff}.ve-primary{background:var(--ve-accent);border-color:var(--ve-accent);color:#fff}.ve-primary:hover{background:#5b21b6}.ve-file-menu{position:relative}.ve-file-menu summary{cursor:pointer;padding:8px 12px;min-height:40px;list-style:none}.ve-file-menu summary::-webkit-details-marker{display:none}.ve-file-menu[open] summary{background:#ffffff14;border-radius:5px}.ve-file-menu>div{position:absolute;right:0;top:45px;width:220px;display:flex;flex-direction:column;background:#fff;color:var(--ve-ink);padding:6px;box-shadow:0 12px 28px #10121b26;border-radius:7px}.ve-file-menu>div button{text-align:start;min-height:42px;padding:8px 12px;border:0;background:#fff;border-radius:4px}.ve-file-menu>div button:hover{background:#f1eafa}.ve-statusbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:34px;padding:6px 22px;background:#fff;border-bottom:1px solid var(--ve-line);font-size:12px;color:var(--ve-muted)}.ve-statusbar p{margin:0}.ve-workspace{display:grid;grid-template-columns:52px 324px minmax(0,1fr);height:calc(100dvh - 100px);min-height:500px}.ve-rail{display:flex;flex-direction:column;gap:10px;background:#292a34;padding:16px 7px}.ve-rail button{display:grid;place-items:center;min-height:40px;width:38px;background:transparent;border:0;border-radius:5px;color:#c9cad3}.ve-rail button[aria-pressed=true]{color:#fff;background:#6d28d9}.ve-rail button:hover{background:#464752}.ve-sidebar{background:#fff;border-right:1px solid #cdd0da;display:flex;flex-direction:column;min-width:0;overflow:auto}.ve-panel-head{display:flex;justify-content:space-between;align-items:center;padding:20px 20px 14px;gap:12px}.ve-panel-head h2{font:500 19px/1.5 var(--ve-font);margin:0;overflow-wrap:anywhere}.ve-panel-head button{border-color:var(--ve-line)}.ve-panel-head button:hover{background:#f0eafb}.ve-panel-tabs{display:flex;border-bottom:1px solid var(--ve-line);padding:0 20px;gap:22px}.ve-panel-tabs button{border:0;background:#fff;min-height:44px;padding:10px 4px;color:var(--ve-muted);border-bottom:2px solid transparent}.ve-panel-tabs button[aria-pressed=true]{color:#5b21b6;border-bottom-color:var(--ve-accent);font-weight:500}.ve-inspector{padding:22px 20px;flex:1;min-width:0}.ve-inspector h3{font:500 15px/1.6 var(--ve-font);margin:26px 0 14px}.ve-inspector h3:first-child{margin-top:0}.ve-field{display:flex;flex-direction:column;gap:7px;margin-bottom:19px;min-width:0}.ve-field label{font-size:13px;font-weight:500}.ve-field :is(input:not([type=checkbox]),select,textarea){width:100%;min-width:0;border:1px solid #bdc2cd;border-radius:5px;background:#fff;color:#292c36;min-height:40px;padding:8px 10px;line-height:1.6}.ve-field textarea{resize:vertical;min-height:92px}.ve-field input[type=range]{padding:0;border:0;accent-color:var(--ve-accent);min-height:32px}.ve-field input[type=color]{padding:4px;min-height:42px}.ve-field input[type=checkbox]{accent-color:var(--ve-accent);width:18px;height:18px;align-self:start}.ve-help{font-size:12px;line-height:1.8;color:var(--ve-muted);margin:0}.ve-sidebar-note{font-size:12px;line-height:1.8;padding:16px 20px;margin:0;color:var(--ve-muted);border-top:1px solid var(--ve-line)}.ve-divider{border:0;border-top:1px solid var(--ve-line);margin:26px 0}.ve-inline{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ve-inline .ve-field{min-width:0}.ve-small-button{min-height:34px;padding:5px 9px;border:1px solid #bdc2cd;border-radius:4px;color:#454753;background:#fff;font-size:12px}.ve-small-button:hover{background:#f2edf9}.ve-danger{color:#9b313e}.ve-actions{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 20px}.ve-upload{display:block;width:100%;font-size:12px;margin:14px 0}.ve-upload::file-selector-button{min-height:38px;padding:7px 10px;border:1px solid #b7bccc;border-radius:5px;background:white;color:var(--ve-ink);font:400 12px/1.5 var(--ve-font);margin-right:8px}.ve-image-preview{width:100%;max-height:180px;object-fit:contain;background:#f1f2f5;border:1px solid var(--ve-line);border-radius:5px}.ve-asset-list{display:flex;flex-direction:column;gap:8px;margin:14px 0 24px}.ve-asset-button{display:flex;align-items:center;gap:12px;text-align:start;padding:8px;border:1px solid var(--ve-line);border-radius:5px;background:#fff;min-height:58px}.ve-asset-button img{width:58px;height:42px;object-fit:cover;border-radius:3px;background:#e9eaee}.ve-asset-button span{font-size:13px;overflow-wrap:anywhere}.ve-asset-button:hover{border-color:#9f83cc;background:#faf7ff}.ve-nav-list{display:flex;flex-direction:column;gap:6px}.ve-nav-row{display:grid;grid-template-columns:1fr 24px;gap:10px;align-items:center;border:1px solid var(--ve-line);border-radius:5px;padding-right:8px}.ve-nav-row button{text-align:start;border:0;background:#fff;padding:12px;min-height:46px;font-size:13px}.ve-nav-row button[aria-current=true]{background:#f1eafa;color:#5b21b6}.ve-nav-row input{width:17px;height:17px;accent-color:var(--ve-accent)}.ve-item{border-top:1px solid var(--ve-line);padding-top:18px;margin-top:22px}.ve-item:first-child{margin-top:0;border-top:0;padding-top:0}.ve-item-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:16px}.ve-item-heading h3{margin:0;font-size:14px}.ve-item-heading .ve-actions{margin:0}.ve-notice{border:1px solid #d9c9ef;background:#faf7ff;border-radius:6px;padding:12px;margin:0 0 20px;font-size:13px;line-height:1.8}.ve-error-summary{padding:14px 18px;margin:16px 20px 0;border:1px solid #c67979;background:#fff4f4;border-radius:5px;font-size:13px}.ve-error-summary button{display:block;min-height:36px;text-align:start;padding:5px 0;border:0;background:transparent;color:#923342;text-decoration:underline}.ve-stage{min-width:0;display:flex;flex-direction:column;background:#e7e8ee;overflow:hidden}.ve-stage-top{display:flex;justify-content:space-between;gap:16px;padding:12px 24px;font-size:12px;color:#565b69;border-bottom:1px solid #d7d9e2;flex:none}.ve-canvas-area{position:relative;flex:1;overflow:auto;min-height:0;padding:24px;display:flex;justify-content:center;align-items:flex-start}.ve-frame-wrap{position:relative;flex:none;background:white;box-shadow:0 8px 24px #171b2920;overflow:hidden}#ve-frame{display:block;position:absolute;left:0;top:0;border:0;transform-origin:top left;background:#fff}.ve-loading{position:absolute;inset:24px;display:grid;place-items:center;background:#f4f4f7;color:#535769;font-size:14px}.ve-stage-hint{font-size:12px;color:#5b6071;margin:0;padding:8px 20px;text-align:center;border-top:1px solid #d7d9e2;flex:none}.ve-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:20;max-width:calc(100vw - 40px);padding:12px 20px;background:#252733;color:#fff;border-radius:7px;box-shadow:0 8px 25px #1a20302b;font-size:13px;line-height:1.7}.ve-mobile-tabs{display:none}body.ve-preview .ve-sidebar,body.ve-preview .ve-rail{display:none}body.ve-preview .ve-workspace{grid-template-columns:minmax(0,1fr)}body.ve-preview .ve-topbar #ve-preview{background:#eee5ff;color:#4a168d;border-color:#d2bcf1}
@media(max-width:1100px){.ve-topbar{gap:10px;padding:10px 12px}.ve-topbar h1{display:none}.ve-workspace{grid-template-columns:46px 300px minmax(0,1fr)}.ve-rail{padding-inline:4px}.ve-home{padding-right:10px}.ve-canvas-area{padding:16px}.ve-stage-top{padding-inline:16px}.ve-button{padding-inline:11px}}
@media(max-width:760px){.ve-topbar{flex-wrap:wrap;gap:8px;padding:10px 12px}.ve-home{font-size:14px}.ve-history{margin-right:auto}.ve-devices{order:2;margin:0 auto 0 0}.ve-top-actions{display:contents}.ve-top-actions #ve-preview{margin-left:auto}.ve-top-actions #ve-save{font-size:12px}.ve-file-menu{order:2}.ve-statusbar{padding:7px 14px;align-items:flex-start;font-size:12px}.ve-statusbar>span{display:none}.ve-mobile-tabs{display:flex;gap:8px;padding:8px 14px;background:#fff;border-bottom:1px solid var(--ve-line)}.ve-mobile-tabs button{flex:1;min-height:40px;border:1px solid #bfc4ce;background:#fff;border-radius:5px}.ve-mobile-tabs button[aria-pressed=true]{background:#f1eafa;color:#5b21b6;border-color:#ad8cd9}.ve-workspace{display:block;height:calc(100dvh - 198px);min-height:390px}.ve-rail{display:none}.ve-sidebar{height:100%;border:0}.ve-stage{display:none;height:100%}.ve-workspace[data-pane=canvas] .ve-sidebar{display:none}.ve-workspace[data-pane=canvas] .ve-stage{display:flex}.ve-field :is(input,select,textarea){font-size:16px}.ve-panel-head{padding-top:16px}.ve-canvas-area{padding:10px}.ve-stage-hint{font-size:12px;padding:8px 10px}body.ve-preview .ve-stage{display:flex}.ve-devices button{padding:7px 10px}.ve-inspector{padding:20px}.ve-topbar .ve-button{font-size:12px}.ve-file-menu>div{left:auto;right:0}.ve-toast{bottom:16px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Keep the workspace inside the available viewport, including wrapped mobile actions. */
body.visual-editor{height:100dvh;overflow:hidden;display:flex;flex-direction:column}.ve-topbar,.ve-statusbar,.ve-mobile-tabs{flex:none}.ve-workspace{flex:1;min-height:0;height:auto}.ve-sidebar{scrollbar-width:thin;scrollbar-color:#a9adba #f5f5f8}.ve-stage-top{font-variant-numeric:tabular-nums}
@media(max-width:760px){.ve-workspace{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:52px minmax(0,1fr);height:auto;min-height:0}.ve-rail{display:flex;flex-direction:row;gap:16px;padding:6px 14px;grid-row:1}.ve-sidebar,.ve-stage{grid-row:2;height:100%}.ve-sidebar{grid-column:1}.ve-stage{grid-column:1}body.ve-preview .ve-workspace{grid-template-rows:minmax(0,1fr)}body.ve-preview .ve-stage{grid-row:1}.ve-file-menu>div{position:fixed;right:12px;top:112px}}