:root{--ink:#172033;--muted:#748096;--border:#e6ebf2;--blue:#2563eb;--blue-soft:#eff6ff;--bg:#f6f8fb;--white:#fff;--shadow:0 12px 40px rgba(28,43,69,.08)}*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Inter,"Sarabun",Arial,sans-serif;color:var(--ink)}body{overflow:hidden}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}.topbar{height:66px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 20px;position:relative;z-index:40}.brand a{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:800;font-size:20px;letter-spacing:-.6px}.brand-icon{background:var(--blue);color:#fff;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;font-size:21px;letter-spacing:0}.brand-light{font-weight:500;color:#59647a}.brand{display:flex;align-items:center;gap:8px}.version{font:700 9px Arial,sans-serif;color:#64748b;background:#eff3f8;border-radius:4px;padding:4px 5px}.top-actions{display:flex;gap:7px;align-items:center}.btn{border:1px solid var(--border);color:#26344a;background:#fff;min-height:36px;border-radius:9px;padding:7px 12px;font-weight:600;font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap}.btn:hover{background:#f8faff;border-color:#c9d9fa}.btn:focus-visible,.tool-btn:focus-visible,.template-card:focus-visible{outline:3px solid #93c5fd;outline-offset:2px}.btn.primary{background:var(--blue);border-color:var(--blue);color:white;padding:8px 15px}.btn.primary:hover{background:#1d4ed8}.btn.ghost{border-color:transparent}.btn.compact{min-width:27px;padding:3px;min-height:28px}.btn.language{min-width:42px}.btn.outline{background:transparent}.btn.small{min-height:30px;padding:5px 8px}.btn.fill-width{width:100%;margin-top:8px}.top-separator{height:25px;width:1px;background:var(--border);margin:0 4px}.app-shell{height:calc(100vh - 66px);display:grid;grid-template-columns:266px minmax(0,1fr) 282px}.sidebar{background:#fff;min-height:0;display:flex;flex-direction:column}.left-sidebar{border-right:1px solid var(--border)}.right-sidebar{border-left:1px solid var(--border)}.side-head{padding:23px 19px 12px;display:flex;justify-content:space-between;align-items:center}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:800;color:#8ea0ba;margin-bottom:4px}.side-head h2{font-size:18px;margin:0}.side-scroll{padding:0 17px 22px;overflow-y:auto;min-height:0;scrollbar-width:thin}.input-search{border:1px solid var(--border);border-radius:10px;padding:8px 10px;display:flex;align-items:center;gap:7px;margin:8px 0 13px}.input-search:focus-within{border-color:#8fb4ff}.input-search span{font-size:22px;color:#8290a5}.input-search input{border:0;outline:none;width:100%;min-width:0;font-size:12px;background:transparent}.chips{display:flex;gap:5px;flex-wrap:wrap}.chip{border:1px solid #e7ecf3;background:#f8fafc;color:#617088;border-radius:50px;padding:5px 9px;font-size:11px;font-weight:600}.chip.active{background:var(--blue);color:#fff;border-color:var(--blue)}.side-help{font-size:11px;color:#8491a3;margin:13px 0}.template-list{display:grid;grid-template-columns:1fr 1fr;gap:11px}.template-card{display:block;border:1px solid var(--border);background:#fff;text-align:left;padding:7px;border-radius:11px;transition:transform .12s,border-color .12s;min-width:0}.template-card:hover{border-color:#a8c3ff;transform:translateY(-2px)}.template-card.active{border-color:var(--blue);background:#f3f7ff}.mini-page{background:white;width:100%;aspect-ratio: .707;border:1px solid #e2e8f0;box-shadow:0 2px 6px #0f172a08;border-radius:3px;padding:11% 9%;display:flex;flex-direction:column;gap:8%;overflow:hidden}.mini-page .mini-title{height:9%;width:68%;background:#303d55;border-radius:1px}.mini-page .mini-sub{height:4%;width:95%;background:#b4becb;border-radius:1px}.mini-page .mini-line{height:1%;width:100%;background:#d7dfea}.mini-page .mini-box{height:23%;border:1px solid #b4becb}.mini-page .mini-cols{height:28%;display:flex;gap:5px}.mini-page .mini-cols i{flex:1;border:1px solid #b4becb}.mini-page .mini-dots{height:20%;background:repeating-linear-gradient(to bottom,#aeb8c8 0,#aeb8c8 1px,transparent 1px,transparent 12px)}.template-name{font-size:12px;font-weight:700;display:block;margin-top:7px;line-height:1.25}.template-type{font-size:10px;color:#8592a4;display:block}.side-footer{margin:20px 0;font-size:12px}.main-area{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--bg)}.toolstrip{min-height:58px;padding:10px 16px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:7px}.tools-primary{display:flex;gap:3px;flex-wrap:wrap}.tool-btn{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:50px;padding:2px 6px;border:0;border-radius:8px;background:transparent;color:#53627a;font-size:10px}.tool-btn:hover{background:var(--blue-soft);color:var(--blue)}.tool-icon{font-size:21px;line-height:24px;color:#2d4364}.toolstrip-right{display:flex;align-items:center;gap:5px}.save-status{font-size:10px;color:#8694a8;white-space:nowrap;margin-right:7px}.save-status::first-letter{color:#20a377}#zoomSelect{border:1px solid var(--border);background:#fff;border-radius:7px;font-size:11px;padding:5px 4px}.workspace-scroll{min-height:0;min-width:0;overflow:auto;flex:1;overscroll-behavior:contain}.workspace-inner{min-width:100%;min-height:100%;display:flex;align-items:flex-start;justify-content:center;padding:36px 40px 60px}.page-wrap{position:relative;flex:none;transition:width .1s,height .1s}.paper{position:absolute;top:0;left:0;background:white;box-shadow:0 13px 48px rgba(29,43,69,.17),0 1px 3px #6b778a36;transform-origin:0 0;overflow:hidden;user-select:none}.paper.show-guides:before{content:"";position:absolute;pointer-events:none;inset:10mm;border:1px dashed #d5dce8;z-index:0}.paper-element{position:absolute;touch-action:none;white-space:pre-wrap;overflow:visible;outline:1px solid transparent;min-width:2mm;min-height:2mm}.paper-element.is-text{padding:0;word-wrap:break-word;overflow-wrap:anywhere;line-height:1.32;cursor:text;touch-action:pan-y}.paper-element .editable-text{min-height:100%;width:100%;white-space:pre-wrap;overflow-wrap:anywhere;outline:none;cursor:text;user-select:text}.paper-element.is-line{min-height:0!important}.paper-element.is-rect,.paper-element.is-ellipse,.paper-element.is-image,.paper-element.is-line{cursor:move}.paper-element.selected{outline:1px dashed #3b82f6;outline-offset:2px;z-index:1000!important}.drag-handle,.resize-handle{position:absolute;z-index:9;background:var(--blue);color:#fff;box-shadow:0 1px 5px #173a6a55;touch-action:none;cursor:grab}.drag-handle{left:-11px;top:-11px;width:22px;height:22px;border-radius:6px;font-size:13px;display:grid;place-items:center;line-height:1}.resize-handle{right:-6px;bottom:-6px;width:13px;height:13px;border:2px solid #fff;border-radius:4px;cursor:nwse-resize}.paper-element.is-ellipse{border-radius:50%}.paper-element.is-image img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.statusbar{height:36px;padding:0 18px;display:flex;gap:8px;justify-content:space-between;align-items:center;background:#fff;border-top:1px solid var(--border);font-size:11px;color:#8491a5}.statusbar a{font-size:11px}.settings-scroll{padding:4px 18px 30px}.panel{padding:17px 0;border-bottom:1px solid var(--border)}.panel h3{font-size:14px;margin:0 0 12px}.panel-title-row{display:flex;align-items:center;justify-content:space-between}.panel label{display:block;color:#6b788c;font-size:11px;margin:11px 0 5px;font-weight:600}.panel input[type=number],.panel select{border:1px solid var(--border);background:#fff;color:#263449;border-radius:8px;padding:8px;width:100%;font-size:12px;min-width:0}.panel input:focus,.panel select:focus{outline:2px solid #bcd2fb;border-color:#8bb5ff}.panel input[type=color]{width:100%;height:35px;border:1px solid var(--border);padding:3px;border-radius:8px;background:#fff}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.segmented{display:flex;border-radius:8px;background:#eff3f8;padding:3px;gap:3px}.segmented button{border:0;background:transparent;border-radius:6px;color:#617087;padding:7px;flex:1;font-size:11px;font-weight:600}.segmented button.active{background:white;box-shadow:0 1px 4px #1e293b1e;color:var(--blue)}.panel label.check-line{display:flex;align-items:center;gap:7px;margin-top:13px;font-size:11px}.check-line input{accent-color:var(--blue)}.empty-selection{border:1px dashed #dae3ee;background:#f8fafc;border-radius:9px;padding:18px 14px;color:#94a1b4;text-align:center;font-size:12px;line-height:1.65}.tiny-danger{color:#b91c1c;background:transparent;border:0;font-size:11px}.row-tools{display:flex;flex-wrap:wrap;gap:4px;margin-top:12px}.explain{font-size:11px;color:#8593a6;line-height:1.55}.side-links{display:flex;gap:12px;padding:17px 0;font-size:11px}.close-mobile,.mobile-nav{display:none}#toast{pointer-events:none;position:fixed;left:50%;bottom:55px;transform:translate(-50%,18px);background:#172033;color:#fff;padding:10px 18px;z-index:1000;border-radius:12px;box-shadow:0 10px 30px #0f172a22;font-size:13px;opacity:0;transition:opacity .2s,transform .2s;max-width:min(90vw,450px);text-align:center}#toast.show{opacity:1;transform:translate(-50%,0)}#overlay{display:none}
@media(max-width:1200px){.app-shell{grid-template-columns:225px minmax(0,1fr) 244px}.save-status{display:none}.topbar{padding:0 10px}.top-actions{gap:3px}.btn{padding:7px 9px}}
@media(max-width:960px){.topbar{height:57px}.brand a{font-size:17px}.brand-icon{width:30px;height:30px;font-size:17px}.version,.top-actions .desktop,.top-separator{display:none}.app-shell{height:calc(100dvh - 57px - 65px);grid-template-columns:minmax(0,1fr)}.sidebar{position:fixed;top:57px;bottom:65px;width:min(83vw,330px);z-index:60;transition:transform .2s;box-shadow:0 12px 30px #11182717}.left-sidebar{left:0;transform:translateX(-110%)}.right-sidebar{right:0;transform:translateX(110%)}.sidebar.open{transform:translateX(0)}#overlay.active{display:block;position:fixed;inset:57px 0 65px;background:#0b152a7d;z-index:55}.close-mobile{display:block;background:none;border:0;font-size:25px;color:#64748b}.mobile-nav{height:65px;position:fixed;bottom:0;left:0;right:0;z-index:50;display:flex;justify-content:space-around;background:white;border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom)}.mobile-nav button{background:none;border:0;flex:1;display:flex;gap:2px;flex-direction:column;align-items:center;justify-content:center;font-size:21px;color:#416086}.mobile-nav span{font-size:10px;font-weight:600}.toolstrip{padding:9px 7px;overflow-x:auto;min-height:61px}.tools-primary{flex-wrap:nowrap;gap:0}.tool-btn{min-width:43px;font-size:10px}.toolstrip-right{flex:none}.workspace-inner{padding:24px 16px 50px}.statusbar{font-size:10px;padding:0 8px}.statusbar span:nth-child(2){display:none}#toast{bottom:80px}}
@media(max-width:390px){.brand-light{display:none}.top-actions{gap:2px}.btn.primary{padding:7px 9px}.toolstrip-right #zoomOut,.toolstrip-right #zoomIn{display:none}}
@media print{@page{size:210mm 297mm;margin:0}html,body{height:auto!important;margin:0!important;overflow:visible!important;background:#fff!important}.topbar,.left-sidebar,.right-sidebar,.toolstrip,.statusbar,.mobile-nav,#toast,#overlay{display:none!important}.app-shell,.main-area,.workspace-scroll,.workspace-inner,.page-wrap{display:block!important;height:auto!important;width:auto!important;min-height:0!important;min-width:0!important;margin:0!important;padding:0!important;overflow:visible!important;position:static!important;box-shadow:none!important;background:#fff!important}.paper{position:relative!important;transform:none!important;box-shadow:none!important;outline:none!important;overflow:hidden!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}.paper-element.selected{outline:none!important}.drag-handle,.resize-handle{display:none!important}.paper.show-guides:before{display:none!important}.paper-element .editable-text{outline:none!important}}