:root{--bg:#edf1ee;--panel:#fff;--line:#d9e1dc;--text:#1e2a24;--muted:#6d7b73;--accent:#2f5d50;--accent2:#dfece7;--danger:#a64040;--shadow:0 14px 40px #23342a18;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}button,input,select{font:inherit}button{cursor:pointer}.hidden{display:none!important}.app-shell{display:grid;grid-template-columns:250px 180px 1fr;grid-template-rows:64px 1fr;height:100dvh}.topbar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:calc(8px + var(--safe-top)) 16px 8px;border-bottom:1px solid var(--line);background:#fffffff2;backdrop-filter:blur(16px);z-index:20}.brand{display:flex;align-items:center;gap:10px}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--accent);color:#fff;font-size:20px}.brand strong{display:block}.brand small{display:block;color:var(--muted);font-size:11px}.top-actions{display:flex;gap:8px;align-items:center}.save-state{font-size:12px;color:var(--muted);padding:6px 9px;background:#f5f7f5;border-radius:999px}.sidebar,.pagesbar{background:#f8faf8;border-right:1px solid var(--line);min-height:0;overflow:hidden}.sidebar{grid-column:1;grid-row:2}.pagesbar{grid-column:2;grid-row:2;background:#fbfcfb}.sidebar-head,.pages-head{height:58px;padding:10px 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}.pages-head small{display:block;color:var(--muted);font-size:10px;text-transform:uppercase}.pages-head strong{display:block;max-width:115px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notebook-list,.page-list{height:calc(100% - 58px);overflow:auto;padding:10px}.notebook-item,.page-item{width:100%;border:1px solid transparent;background:transparent;border-radius:13px;text-align:left;padding:10px;display:flex;align-items:center;gap:10px;margin-bottom:6px}.notebook-item:hover,.page-item:hover{background:#fff;border-color:var(--line)}.notebook-item.active,.page-item.active{background:#fff;border-color:#bfcfc6;box-shadow:0 4px 14px #26382f0c}.notebook-color{width:13px;height:36px;border-radius:8px;flex:0 0 auto}.notebook-meta,.page-meta{min-width:0;flex:1}.notebook-meta strong,.page-meta strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}.notebook-meta small,.page-meta small{color:var(--muted);font-size:10px}.page-thumb{width:32px;height:42px;border:1px solid var(--line);border-radius:5px;background-color:#fff;flex:0 0 auto}.page-thumb.lined{background-image:repeating-linear-gradient(#fff 0 8px,#dce7e1 9px)}.page-thumb.grid{background-image:linear-gradient(#e0e8e3 1px,transparent 1px),linear-gradient(90deg,#e0e8e3 1px,transparent 1px);background-size:8px 8px}.page-thumb.dotted{background-image:radial-gradient(#cfdad4 1px,transparent 1px);background-size:8px 8px}.workspace{grid-column:3;grid-row:2;min-width:0;min-height:0;display:grid;grid-template-rows:auto 1fr 32px}.toolbar{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:8px 10px;background:#fffffff3;border-bottom:1px solid var(--line);overflow-x:auto;z-index:10}.tool-group{display:flex;gap:5px;align-items:center;flex:0 0 auto}.tool{border:1px solid transparent;background:transparent;border-radius:11px;padding:7px 9px;min-width:56px;color:var(--text)}.tool span{display:block;font-size:9px;color:var(--muted);margin-top:2px}.tool.active{background:var(--accent2);border-color:#b8ccc1}.tool.active span{color:var(--accent)}.primary,.ghost,.danger,.icon-btn{border-radius:10px;border:1px solid var(--line);padding:8px 11px;background:#fff;color:var(--text);font-weight:650}.primary{background:var(--accent);border-color:var(--accent);color:#fff}.danger{color:#fff;background:var(--danger);border-color:var(--danger)}.icon-btn{padding:7px 9px;min-width:34px}.color-control{display:flex;align-items:center}.color-control input{position:absolute;opacity:0;width:1px;height:1px}.color-control span{width:31px;height:31px;border-radius:50%;background:#1f2937;border:3px solid #fff;box-shadow:0 0 0 1px var(--line);display:block}.range-control{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}.range-control input{width:90px}.range-control output{min-width:20px;color:var(--text)}.toggle{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);white-space:nowrap}.canvas-stage{position:relative;overflow:auto;background:#dfe5e1;padding:28px;display:flex;align-items:flex-start;justify-content:center;touch-action:pan-x pan-y}.paper-wrap{position:relative;width:min(100%,1050px);aspect-ratio:210/297;background:#fff;box-shadow:var(--shadow);border-radius:2px;flex:0 0 auto;overflow:hidden;touch-action:none}.paper-wrap.template-lined{background-image:repeating-linear-gradient(to bottom,#fff 0,#fff 34px,#dfe9e4 35px)}.paper-wrap.template-grid{background-image:linear-gradient(#e2ebe6 1px,transparent 1px),linear-gradient(90deg,#e2ebe6 1px,transparent 1px);background-size:35px 35px}.paper-wrap.template-dotted{background-image:radial-gradient(#cdd9d2 1.2px,transparent 1.2px);background-size:24px 24px}.paper-wrap.template-blank{background:#fff}.paper-wrap canvas,.text-layer{position:absolute;inset:0;width:100%;height:100%}.text-layer{pointer-events:none}.text-object{position:absolute;white-space:pre-wrap;transform-origin:top left;color:#202a25}.statusbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:5px 12px calc(5px + var(--safe-bottom));border-top:1px solid var(--line);background:#fafbfa;color:var(--muted);font-size:10px}.empty-state{position:absolute;inset:0;display:grid;place-items:center;align-content:center;text-align:center;padding:30px;z-index:5}.empty-state>div{font-size:64px}.empty-state h2{margin:10px 0 5px}.empty-state p{max-width:500px;color:var(--muted)}.dialog{border:none;padding:0;background:transparent}.dialog::backdrop{background:#17231d77;backdrop-filter:blur(3px)}.dialog-card{width:min(92vw,520px);background:#fff;border-radius:20px;padding:18px;box-shadow:0 30px 80px #0004;display:grid;gap:14px}.compact-dialog{width:min(92vw,440px)}.dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.dialog-head h2{margin:2px 0 0}.dialog-head small{color:var(--muted);text-transform:uppercase;font-size:10px;letter-spacing:.08em}.close-btn{border:none;background:#f2f4f2;border-radius:10px;width:34px;height:34px;font-size:20px}.dialog label{display:grid;gap:6px;font-size:12px;color:var(--muted)}.dialog input,.dialog select{border:1px solid var(--line);border-radius:10px;padding:10px 11px;background:#fff;color:var(--text)}.form-grid.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.dialog-actions{display:flex;justify-content:flex-end;gap:8px}.template-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.template-grid button{border:1px solid var(--line);background:#fff;border-radius:14px;padding:10px;display:grid;gap:8px}.template-preview{height:100px;border:1px solid var(--line);border-radius:7px;background:#fff}.template-preview.lined{background-image:repeating-linear-gradient(#fff 0 13px,#dfe9e4 14px)}.template-preview.grid{background-image:linear-gradient(#e2ebe6 1px,transparent 1px),linear-gradient(90deg,#e2ebe6 1px,transparent 1px);background-size:14px 14px}.template-preview.dotted{background-image:radial-gradient(#cdd9d2 1px,transparent 1px);background-size:12px 12px}.stack-actions{display:grid;gap:8px}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);background:#1d2a23;color:#fff;padding:10px 14px;border-radius:12px;font-size:12px;opacity:0;pointer-events:none;transition:.18s;z-index:100}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:980px){.app-shell{grid-template-columns:210px 150px 1fr}.tool span{display:none}.tool{min-width:auto}.range-control span,.toggle span{display:none}}
@media(max-width:760px){.app-shell{grid-template-columns:1fr;grid-template-rows:58px 1fr}.topbar{grid-column:1;grid-row:1}.sidebar,.pagesbar{position:fixed;top:58px;bottom:0;z-index:40;width:min(82vw,290px);box-shadow:20px 0 50px #0002;transition:transform .2s}.sidebar{left:0;transform:translateX(-102%)}.sidebar.open{transform:translateX(0)}.pagesbar{left:0;transform:translateX(-102%)}.pagesbar.open{transform:translateX(0)}.workspace{grid-column:1;grid-row:2}.toolbar{padding:6px}.canvas-stage{padding:12px}.statusbar span:nth-child(2){display:none}.brand small,.save-state{display:none}.top-actions .ghost{display:none}.paper-wrap{width:100%}.form-grid.two{grid-template-columns:1fr}.range-control input{width:70px}}