.notebook{position:fixed;inset:0;z-index:40;background:#dfe7ef;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);height:100dvh;overflow:hidden}
.notebook[hidden]{display:none}.nb-head{background:var(--navy);color:white;display:flex;gap:10px;align-items:center;padding:8px 12px;flex-shrink:0}.nb-head input{min-width:0;flex:1;border:0;border-bottom:1px solid #54718b;background:transparent;color:white;font-size:17px;padding:8px}.nb-head button{white-space:nowrap}.nb-status{font-size:12px;color:#b8d5ec;min-width:90px}.nb-tools{display:flex;align-items:center;gap:5px;padding:6px 10px;background:#fff;border-bottom:1px solid #c7d5e2;overflow-x:auto;flex-shrink:0}.nb-tools>*{flex-shrink:0;white-space:nowrap}.nb-tools button,.nb-tools select{min-height:44px;flex-shrink:0;border:1px solid #dbe4ed;border-radius:7px;background:#f4f8fc;color:#13243a;padding:7px 11px;cursor:pointer}.nb-tools button[aria-pressed=true]{background:#176eb6;color:white;border-color:#176eb6}.nb-tools .nb-divider{height:28px;width:1px;background:#dbe4ed;flex-shrink:0;margin:0 4px}.nb-tools label{display:flex;align-items:center;gap:5px;white-space:nowrap;font-size:13px;flex-shrink:0}.nb-tools input[type=color]{width:40px;height:38px;padding:2px;border:1px solid #dbe4ed;background:white}.nb-tools input[type=checkbox]{width:18px;height:18px}.nb-tools button:disabled{opacity:.4;cursor:default}.nb-viewport{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:18px;touch-action:pan-x pan-y}.nb-sheet{position:relative;margin:0 auto;background:#fff;box-shadow:0 5px 25px #173a5925;flex-shrink:0;overflow:hidden}.nb-sheet canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}.nb-sheet textarea{position:absolute;inset:0;width:100%;height:100%;resize:none;border:0;background:transparent;color:#13243a;outline:none;line-height:1.6;padding:6%;z-index:2}.nb-sheet textarea[hidden]{display:none}.nb-footer{background:#fff;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 10px;flex-shrink:0;border-top:1px solid #c7d5e2}.nb-footer .nb-pages{display:flex;gap:5px;align-items:center;min-width:0}.nb-footer button{min-height:40px;padding:6px 10px}.nb-hint{font-size:12px;color:#63768a}.nb-note-thumb{height:90px;max-width:100px;object-fit:contain;border:1px solid #dbe4ed;background:white;border-radius:5px;margin-right:12px}.note-library-tools{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}.note-library-tools input{flex:1;min-width:180px;padding:10px;border:1px solid var(--line);border-radius:8px}.nb-result{position:absolute;z-index:5;right:12px;top:65px;background:white;box-shadow:var(--shadow);border:1px solid var(--line);border-radius:12px;padding:16px;width:min(440px,calc(100% - 24px));max-height:75%;overflow:auto}.nb-result textarea{width:100%;min-height:140px;border:1px solid var(--line);padding:10px;font:inherit}.nb-result h3{margin:0 0 8px}.nb-result .toolbar{justify-content:space-between}.nb-result[hidden]{display:none}
@media(max-width:600px){.nb-head{gap:5px;padding:5px}.nb-status{min-width:0;max-width:65px;font-size:10px}.nb-head input{font-size:15px}.nb-head .secondary{padding:7px}.nb-viewport{padding:8px}.nb-hint{display:none}.nb-tools{padding:4px 6px}.nb-footer{padding:3px 5px}.nb-footer button{padding:4px 8px}.nb-footer span{font-size:12px}}
@media(max-height:480px){.nb-head{padding:3px 8px}.nb-tools{padding:2px 6px}.nb-tools button,.nb-tools select{min-height:36px}.nb-head button{min-height:36px}.nb-footer button{min-height:32px}.nb-footer{padding:2px 8px}.nb-viewport{padding:8px}}