:root{--bg:#e9edf3;--bar:#1c2330;--bar2:#232c3d;--ink:#111418;--muted:#6b778a;--accent:#2f5bff;--danger:#e5383b;--line:#d5dde8;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px)}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--ink);-webkit-text-size-adjust:100%;-webkit-touch-callout:none;overscroll-behavior:none;margin:0;font:15px/1.4 -apple-system,system-ui,Segoe UI,Roboto,sans-serif;overflow:hidden}#app{height:100%}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.4;cursor:default}h1,h2,h3{margin:0}.muted{color:var(--muted)}.small{font-size:13px}.spacer{flex:1}.sep{background:#ffffff24;align-self:stretch;width:1px;margin:6px 4px}.ibtn{color:#dfe6f2;touch-action:manipulation;background:0 0;border:0;border-radius:10px;flex:none;place-items:center;width:42px;height:42px;display:inline-grid}.ibtn:hover:not(:disabled){background:#ffffff1a}.ibtn.active{background:var(--accent);color:#fff}.ibtn.danger{color:#ff8a8d}.btn{border:1px solid var(--line);touch-action:manipulation;background:#fff;border-radius:10px;min-height:40px;padding:9px 14px}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}.btn.ghost{background:0 0}.field{border:1px solid var(--line);width:100%;font:inherit;color:var(--ink);background:#fff;border-radius:10px;padding:10px 12px}.cloud[data-status=idle]{color:#7ee2a0}.cloud[data-status=error],.cloud[data-status=auth]{color:#ffb15c}.cloud[data-status=pending],.cloud[data-status=syncing]{color:#8fb0ff}.library{flex-direction:column;height:100%;display:flex}.libbar{padding:calc(10px + var(--safe-t)) calc(16px + var(--safe-r)) 10px calc(16px + var(--safe-l));background:var(--bar);color:#fff;flex-wrap:wrap;align-items:center;gap:8px;display:flex}.libbar .btn{background:var(--bar2);color:#fff;border-color:#ffffff26}.libbar .btn.primary{background:var(--accent)}.brand{align-items:center;gap:10px;display:flex}.brand h1{letter-spacing:.2px;font-size:20px}.logo{background:var(--accent);border-radius:9px;place-items:center;width:34px;height:34px;display:grid}.libbody{padding:20px calc(20px + var(--safe-r)) calc(20px + var(--safe-b)) calc(20px + var(--safe-l));flex:1;overflow:auto}.grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:22px 18px;display:grid}.card{flex-direction:column;gap:8px;display:flex}.cover{background:var(--c);aspect-ratio:3/4;border:0;border-radius:6px 12px 12px 6px;padding:8px 8px 8px 14px;display:block;box-shadow:0 6px 16px #141e3238}.thumbbox{background:#fff;border-radius:3px;align-items:flex-start;width:100%;height:100%;display:flex;overflow:hidden}.thumbbox canvas{width:100%;height:auto;display:block}.meta{justify-content:space-between;align-items:flex-start;gap:4px;display:flex}.meta .ibtn{color:var(--muted);width:36px;height:36px}.meta .ibtn:hover:not(:disabled){background:#0000000f}.ctitle{overflow-wrap:anywhere;display:block}.meta small{color:var(--muted)}.empty{text-align:center;color:var(--muted);padding:60px 20px}.editor{flex-direction:column;height:100%;display:flex}.topbar,.toolbar{background:var(--bar);color:#fff;padding:6px calc(8px + var(--safe-r)) 6px calc(8px + var(--safe-l));scrollbar-width:none;align-items:center;gap:2px;display:flex;overflow-x:auto}.topbar{padding-top:calc(6px + var(--safe-t))}.toolbar{background:var(--bar2)}.title-input{color:#fff;background:0 0;border:0;border-radius:8px;min-width:120px;max-width:34vw;padding:8px;font-size:16px;font-weight:600}.title-input:focus{outline:2px solid var(--accent);background:#ffffff0f}.pagelabel{font-variant-numeric:tabular-nums;color:#c9d3e6;text-align:center;white-space:nowrap;min-width:52px;padding:0 4px}.body{flex:1;min-height:0;display:flex}.stage{touch-action:none;background:var(--bg);-webkit-user-select:none;user-select:none;flex:1;min-width:0;position:relative;overflow:hidden}.stage[data-tool=pen],.stage[data-tool=highlighter]{cursor:crosshair}.stage[data-tool=eraser]{cursor:none}.stage[data-tool=text]{cursor:text}.cv{touch-action:none;width:100%;height:100%;position:absolute;inset:0}.cv.live{pointer-events:none}.thumbs{background:#d9e0ea;flex-direction:column;flex:none;gap:10px;width:132px;padding:10px;display:flex;overflow-y:auto}.thumbs[hidden]{display:none}.thumb{color:var(--muted);background:0 0;border:2px solid #0000;border-radius:8px;flex-direction:column;align-items:center;gap:2px;padding:3px;font-size:12px;display:flex}.thumb canvas{background:#fff;width:100%;height:auto;box-shadow:0 1px 5px #00000040}.thumb.active{border-color:var(--accent);color:var(--ink)}.swatches{align-items:center;gap:6px;padding:0 4px;display:flex}.swatch{border:2px solid #ffffff8c;border-radius:50%;flex:none;width:28px;height:28px;padding:0}.modal .swatch{border-color:#0003}.swatch.active{box-shadow:0 0 0 3px var(--accent)}.swatch.custom{appearance:none;background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);overflow:hidden}.swatch.custom::-webkit-color-swatch-wrapper{opacity:0}.range{accent-color:#8fb0ff;flex:none;width:130px}.wdot{border-radius:50%;flex:none;margin:0 4px 0 2px;display:inline-block}.selbar{background:var(--bar);z-index:5;border-radius:12px;gap:2px;padding:4px;display:flex;position:absolute;box-shadow:0 4px 14px #0000004d}.selbar[hidden]{display:none}.textedit{z-index:6;border:1.5px dashed var(--accent);resize:none;background:#ffffffeb;border-radius:4px;outline:none;margin:0;padding:0;position:absolute;overflow:hidden}.textedit[hidden]{display:none}.modal{z-index:50;background:#0f141e80;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.sheet{background:#fff;border-radius:16px;flex-direction:column;gap:12px;width:min(520px,100%);max-height:90vh;padding:20px;display:flex;overflow:auto;box-shadow:0 20px 50px #00000059}.sheet h2{font-size:18px}.sheet h3{margin-top:8px;font-size:15px}.sheet p{margin:0}.btnrow{justify-content:flex-end;gap:8px;margin-top:4px;display:flex}.btnrow.wrap{flex-wrap:wrap;justify-content:flex-start}.row{align-items:center;gap:8px;display:flex}.form{flex-direction:column;gap:8px;display:flex}.check{align-items:flex-start;gap:10px;display:flex}.check input{flex:none;width:18px;height:18px;margin-top:3px}.settings{flex-direction:column;gap:10px;display:flex}.status{font-weight:600}.status.idle{color:#1d8a45}.status.error,.status.auth{color:#c2410c}.seg{border:1px solid var(--line);border-radius:10px;display:flex;overflow:hidden}.seg button{border:0;border-right:1px solid var(--line);background:#fff;flex:1;padding:9px 4px}.seg button:last-child{border-right:0}.seg button.active{background:var(--accent);color:#fff}.popmenu{z-index:60;background:#fff;border-radius:12px;flex-direction:column;min-width:220px;padding:6px;display:flex;position:fixed;box-shadow:0 10px 30px #00000047}.popmenu button{text-align:left;background:0 0;border:0;border-radius:8px;align-items:center;gap:10px;padding:10px 12px;display:flex}.popmenu button:hover:not(:disabled){background:#eef2f8}.popmenu button.danger{color:var(--danger)}#toast{left:50%;bottom:calc(24px + var(--safe-b));color:#fff;opacity:0;pointer-events:none;z-index:80;text-align:center;background:#1c2330;border-radius:12px;max-width:min(560px,92vw);padding:11px 16px;transition:all .25s;position:fixed;transform:translate(-50%,20px)}#toast.show{opacity:1;transform:translate(-50%)}@media (max-width:760px){.title-input{min-width:80px;max-width:24vw}.range{width:90px}}