:root{--bg:#fff7e6;--ink:#2b2b3a;--acc:#2d7ff9;--card:#fff;--line:#e8dcc4}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:-apple-system,"Arial Hebrew",Arial,sans-serif;overscroll-behavior:none}
button{font:inherit;color:inherit;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:8px 14px;min-height:44px;cursor:pointer}
button.on{background:var(--acc);color:#fff;border-color:var(--acc)}
button.pri{background:var(--acc);color:#fff;border-color:var(--acc)}
button.dng{color:#c62828}
button:disabled{opacity:.35}
input,select{font:inherit;padding:8px 12px;border:2px solid var(--line);border-radius:12px;min-height:44px;background:#fff}
#app{height:100%;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)}
header.bar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#fff;border-bottom:2px solid var(--line);flex-wrap:wrap}
header.bar h1{margin:0;font-size:20px;flex:1;min-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp{flex:1}
#sync{font-size:13px;padding:4px 10px;border-radius:20px;background:#e8f5e9;color:#2e7d32;white-space:nowrap}
#sync.pending,#sync.syncing{background:#fff8e1;color:#b26a00}
#sync.offline,#sync.error,#sync.nocode,#sync.badcode{background:#ffebee;color:#c62828}
.lib{padding:20px;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px;align-content:start}
.nbk{position:relative;aspect-ratio:3/4;border-radius:6px 16px 16px 6px;color:#fff;padding:14px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 4px 10px #0003;border-right:10px solid #0003;cursor:pointer}
.nbk b{font-size:18px;text-shadow:0 1px 2px #0005}
.nbk small{opacity:.9}
.nbk .mn{position:absolute;top:8px;left:8px;min-height:36px;padding:2px 10px;background:#fff9;border:0}
.nbk.new{background:#fff;color:var(--acc);border:3px dashed var(--acc);align-items:center;justify-content:center;font-size:44px;box-shadow:none}
.tools{display:flex;gap:6px;align-items:center;padding:6px 10px;background:#fffdf7;border-bottom:2px solid var(--line);flex-wrap:wrap}
.tools .g{display:flex;gap:4px;align-items:center;padding-inline-end:8px;border-inline-end:2px solid var(--line)}
.sw{width:34px;height:34px;min-height:34px;padding:0;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px var(--line)}
.sw.on{box-shadow:0 0 0 3px var(--acc)}
.wd{width:44px;padding:0;display:flex;align-items:center;justify-content:center}
.wd i{display:block;background:currentColor;border-radius:9px;width:24px}
.editor{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:8px;background:#d9d3c4;text-align:center}
.pagewrap{position:relative;margin:0 auto;box-shadow:0 3px 14px #0004;background:#fffdf7;direction:ltr}
.pagewrap canvas{position:absolute;inset:0;width:100%;height:100%}
.live{touch-action:pan-x pan-y pinch-zoom}
.nav{display:flex;gap:8px;align-items:center;justify-content:center;padding:6px;background:#fff;border-top:2px solid var(--line)}
.modal{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:10;padding:16px}
.modal .box{background:#fff;border-radius:20px;padding:20px;max-width:560px;width:100%;max-height:92%;overflow:auto;display:flex;flex-direction:column;gap:12px}
.modal h2{margin:0}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.th{position:relative;cursor:pointer;border:3px solid transparent;border-radius:6px;background:#eee}
.th.cur{border-color:var(--acc)}
.th canvas{display:block;width:100%}
.th span{position:absolute;bottom:2px;right:4px;background:#fffc;border-radius:8px;padding:0 6px;font-size:12px}
@media print{body{display:none}}