@import "https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600&family=DM+Sans:wght@400;500;600&display=swap";
:root{--bg:#f0ede8;--surface:#fff;--panel-bg:#fafaf9;--border:#e2ddd8;--border2:#d0cac3;--accent:#b9a700;--accent2:#ad8e00;--text:#1a1a1a;--muted:#8a8279;--muted2:#b0a99f;--panel-w:280px;--top-h:52px;--bot-h:64px;--safe-b:env(safe-area-inset-bottom,0px)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;height:100dvh;font-family:DM Sans,Sarabun,sans-serif;overflow:hidden}.bmk-root{flex-direction:column;height:100dvh;display:flex;overflow:hidden}.topbar{height:var(--top-h);background:var(--surface);border-bottom:1px solid var(--border);z-index:20;flex-shrink:0;align-items:center;gap:14px;padding:0 18px;display:flex}.topbar-menu{cursor:pointer;width:36px;height:36px;color:var(--text);background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;display:flex}.topbar-menu:active{background:var(--bg)}.is-desktop .topbar-menu{display:none}.logo{letter-spacing:-.02em;font-size:17px;font-weight:700}.logo em{color:var(--accent);font-style:normal}.topbar-center{flex:1;justify-content:center;align-items:center;gap:24px;display:flex}.topbar-action{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:6px;align-items:center;gap:6px;padding:6px 10px;font-size:13px;transition:all .15s;display:flex}.topbar-action:hover{color:var(--text);background:var(--bg)}.topbar-action svg{width:15px;height:15px}.topbar-action.active{color:var(--accent);background:#2d7a4f1f}.btn-newroom{background:var(--accent);color:#fff;cursor:pointer;white-space:nowrap;border:none;border-radius:20px;align-items:center;gap:5px;padding:7px 16px;font-size:13px;font-weight:600;transition:background .15s;display:flex}.btn-newroom:hover{background:var(--accent2)}.btn-newroom svg{width:13px;height:13px}.main{flex:1;display:flex;position:relative;overflow:hidden}.left-panel{width:var(--panel-w);background:var(--panel-bg);border-right:1px solid var(--border);z-index:15;flex-direction:column;flex-shrink:0;display:flex;overflow:hidden}.left-panel.is-overlay{position:absolute;top:0;bottom:0;left:0;box-shadow:4px 0 24px #00000026}.overlay-backdrop{z-index:14;cursor:pointer;background:#00000040;position:absolute;inset:0}.panel-header{border-bottom:1px solid var(--border);flex-shrink:0;padding:14px 14px 10px}.panel-close{float:right;cursor:pointer;width:28px;height:28px;color:var(--muted);background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;display:flex}.panel-close:active{background:var(--bg)}.panel-back{color:var(--muted);cursor:pointer;align-items:center;gap:6px;margin-bottom:12px;font-size:13px;font-weight:500;display:flex}.panel-back svg{width:14px;height:14px}.panel-back:hover{color:var(--text)}.panel-title{font-size:14px;font-weight:600}.view-toggle{align-items:center;gap:6px;margin-top:8px;display:flex}.view-btn{border:1px solid var(--border);cursor:pointer;width:30px;height:30px;color:var(--muted);background:0 0;border-radius:6px;justify-content:center;align-items:center;transition:all .15s;display:flex}.view-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.view-btn svg{width:14px;height:14px}.view-sep{flex:1}.cat-scroll{scrollbar-width:none;border-bottom:1px solid var(--border);-webkit-overflow-scrolling:touch;flex-shrink:0;gap:6px;padding:10px 14px;display:flex;overflow-x:auto}.cat-scroll::-webkit-scrollbar{display:none}.cat-btn{white-space:nowrap;border:1px solid var(--border2);background:var(--surface);color:var(--muted);cursor:pointer;border-radius:14px;padding:5px 12px;font-family:DM Sans,sans-serif;font-size:12px;font-weight:500;transition:all .15s}.cat-btn:hover{border-color:var(--accent);color:var(--accent)}.cat-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.product-scroll{scrollbar-width:thin;-webkit-overflow-scrolling:touch;flex:1;padding:10px;overflow-y:auto}.product-grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.product-card{cursor:pointer;background:var(--surface);border:2px solid #0000;border-radius:8px;transition:all .18s;position:relative;overflow:hidden}.product-card:hover{border-color:var(--border2);transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.product-card.selected{border-color:var(--accent)}.product-card.selected:after{content:"✓";background:var(--accent);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;font-size:10px;font-weight:700;display:flex;position:absolute;top:4px;right:4px}.product-thumb{aspect-ratio:1;object-fit:cover;width:100%;display:block}.product-name{padding:5px 6px 2px;font-size:10px;font-weight:500;line-height:1.3}.product-price{color:var(--accent);padding:0 6px 5px;font-size:10px;font-weight:600}.empty-state{text-align:center;color:var(--muted);grid-column:1/-1;padding:30px 10px;font-size:12px}.pagination{border-top:1px solid var(--border);flex-shrink:0;justify-content:center;align-items:center;gap:4px;padding:10px;display:flex}.page-btn{border:1px solid var(--border);background:var(--surface);cursor:pointer;width:28px;height:28px;color:var(--muted);border-radius:6px;justify-content:center;align-items:center;font-size:12px;transition:all .15s;display:flex}.page-btn:hover{border-color:var(--accent);color:var(--accent)}.page-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.page-btn:disabled{opacity:.4;cursor:not-allowed}.canvas-wrap{background:#e8e4df;flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.upload-zone{cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:14px;width:100%;height:100%;transition:background .2s;display:flex}.upload-zone:hover,.upload-zone.drag{background:#2d7a4f0f}.upload-icon{border:2px dashed var(--accent);width:64px;height:64px;color:var(--accent);opacity:.7;border-radius:50%;justify-content:center;align-items:center;display:flex}.upload-icon svg{width:26px;height:26px}.upload-zone strong{font-size:15px;font-weight:600}.upload-zone p{color:var(--muted);font-size:13px}.canvas-toolbar{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border);z-index:10;background:#ffffffeb;border-radius:20px;align-items:center;gap:6px;padding:5px 10px;display:none;position:absolute;top:14px;left:50%;transform:translate(-50%)}.canvas-toolbar.show{display:flex}.ctool-btn{color:var(--muted);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:12px;align-items:center;gap:5px;padding:4px 8px;font-size:12px;font-weight:500;transition:all .15s;display:flex}.ctool-btn:hover{color:var(--text);background:var(--bg)}.ctool-btn svg{width:14px;height:14px}.ctool-divider{background:var(--border);width:1px;height:16px}.zoom-label{text-align:center;min-width:36px;font-size:12px;font-weight:600}.compare-divider-el{pointer-events:none;z-index:6;background:#ffffffeb;width:3px;position:absolute;top:0;bottom:0;transform:translate(-50%);box-shadow:0 0 12px #0006}.compare-handle-el{z-index:7;cursor:ew-resize;pointer-events:none;background:#fff;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;display:flex;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 2px 18px #0000004d}.compare-label{color:#fff;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:7;background:#00000085;border-radius:10px;padding:3px 10px;font-size:11px;font-weight:600;position:absolute;top:14px}.compare-label.before{left:14px}.compare-label.after{background:#bdb000d9;right:14px}.canvas-wrap.compare-mode{cursor:ew-resize}.right-panel{background:var(--surface);border-left:1px solid var(--border);flex-direction:column;flex-shrink:0;width:0;transition:width .25s;display:flex;overflow:hidden}.right-panel.open{width:240px}.rp-header{border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;padding:14px 16px 12px;display:flex}.rp-title{font-size:13px;font-weight:600}.rp-close{cursor:pointer;width:24px;height:24px;color:var(--muted);background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;display:flex}.rp-close:hover{background:var(--bg)}.rp-body{scrollbar-width:thin;flex:1;padding:14px 16px;overflow-y:auto}.sl-row{margin-bottom:18px}.sl-label{color:var(--muted);letter-spacing:.05em;text-transform:uppercase;justify-content:space-between;margin-bottom:7px;font-size:11px;font-weight:600;display:flex}.sl-label span{color:var(--accent);font-size:11px;font-weight:700}input[type=range]{-webkit-appearance:none;background:var(--border2);cursor:pointer;touch-action:none;border-radius:2px;outline:none;width:100%;height:3px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;border:2px solid #fff;border-radius:50%;width:15px;height:15px;transition:transform .15s;box-shadow:0 1px 4px #0003}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.rp-divider{background:var(--border);height:1px;margin:16px 0}.rp-actions{gap:8px;margin-top:4px;display:flex}.mini-btn{border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:7px;flex:1;padding:8px;font-family:DM Sans,sans-serif;font-size:12px;font-weight:500;transition:all .15s}.mini-btn:hover{border-color:var(--accent);color:var(--accent)}.loading-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:30;background:#f0ede8cc;flex-direction:column;justify-content:center;align-items:center;gap:16px;display:none;position:absolute;inset:0}.loading-overlay.show{display:flex}.spinner{border:3px solid var(--border2);border-top-color:var(--accent);border-radius:50%;width:40px;height:40px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{color:var(--muted);font-size:13px;font-weight:500}.bottombar{height:var(--bot-h);background:var(--surface);border-top:1px solid var(--border);z-index:10;flex-shrink:0;align-items:center;gap:12px;padding:0 18px;display:flex}.selected-chip{flex:1;align-items:center;gap:8px;display:flex}.selected-thumb{object-fit:cover;border:1px solid var(--border);border-radius:6px;width:36px;height:36px}.selected-text{font-size:13px}.selected-text strong{font-weight:600;display:block}.selected-text span{color:var(--muted);font-size:12px}.m-sheet{background:var(--surface);z-index:25;max-height:75dvh;padding-bottom:var(--safe-b);will-change:transform;border-top-left-radius:16px;border-top-right-radius:16px;flex-direction:column;transition:transform .32s cubic-bezier(.32,.72,.24,1);display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -4px 24px #0000001f}.m-sheet--closed{transform:translateY(100%)}.m-sheet--peek{transform:translateY(calc(100% - 180px))}.m-sheet--full{transform:translateY(0)}.m-sheet__handle{cursor:grab;flex-shrink:0;justify-content:center;align-items:center;padding:10px 0 6px;display:flex}.m-sheet__bar{background:var(--border2);border-radius:2px;width:36px;height:4px}.m-sheet__tabs{border-bottom:1px solid var(--border);flex-shrink:0;display:flex}.m-sheet__tab{text-align:center;cursor:pointer;color:var(--muted);background:0 0;border:none;border-bottom:2px solid #0000;flex:1;padding:10px 0;font-family:inherit;font-size:13px;font-weight:600;transition:all .15s}.m-sheet__tab.active{color:var(--accent);border-bottom-color:var(--accent)}.m-sheet__body{-webkit-overflow-scrolling:touch;flex:1;overflow-y:auto}.m-sheet__products{padding:8px;overflow-y:auto}.m-sheet__adjust{padding:14px 16px}.m-fab{bottom:calc(12px + var(--safe-b));background:var(--surface);z-index:20;cursor:pointer;border-radius:12px;align-items:center;gap:10px;padding:10px 14px;display:flex;position:fixed;left:12px;right:12px;box-shadow:0 2px 16px #00000026}.m-fab__thumb{object-fit:cover;border:1px solid var(--border);border-radius:8px;width:40px;height:40px}.m-fab__info{flex:1}.m-fab__info strong{font-size:13px;font-weight:600;display:block}.m-fab__info span{color:var(--accent);font-size:12px}.m-fab svg{color:var(--muted);flex-shrink:0}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}@media (max-width:639px){:root{--top-h:48px}.topbar{gap:6px;padding:0 8px}.logo{font-size:15px}.topbar-action{gap:0;padding:6px;font-size:0}.topbar-action svg{width:18px;height:18px}.btn-newroom{gap:0;padding:7px 10px;font-size:0}.btn-newroom svg{width:15px!important;height:15px!important}.topbar-center{gap:8px}.left-panel{display:none}.upload-icon{width:52px;height:52px}.upload-icon svg{width:22px;height:22px}.upload-zone strong{font-size:14px}.canvas-toolbar{gap:4px;padding:4px 8px;top:10px}.zoom-label{min-width:30px;font-size:11px}input[type=range]::-webkit-slider-thumb{width:20px;height:20px}input[type=range]{height:4px}.compare-handle-el{width:36px;height:36px}.bottombar{display:none}}@media (min-width:640px) and (max-width:1023px){.left-panel:not(.is-overlay){display:none}.right-panel.open{width:220px}.m-sheet,.m-fab{display:none!important}}@media (min-width:1024px){.topbar{gap:14px;padding:0 18px}.left-panel{display:flex}.m-sheet,.m-fab{display:none!important}.topbar-menu{display:none}}