/* Tablica Planeta Matematyka — style wg design systemu (kontur 2px ink, twarde cienie, kolory z logo) */
:root{
  --violet:#5e17eb;--violet-hover:#4a0fc4;--green:#7ed957;--magenta:#cb6ce6;--ink:#0f172a;--muted:#475569;
  --line:#e2e8f0;--line-strong:#cbd5e1;--surface:#fff;--surface-soft:#f8fafc;--magenta-tint:#fbf2fe;--violet-tint:#f4edfe;--green-tint:#f1fbe9;
  --focus-soft:#e9d5f7;--error:#b91c1c;--success:#2f7d14;
  --font-sans:'Plus Jakarta Sans',Inter,system-ui,sans-serif;--font-hand:'Caveat','Comic Sans MS',cursive;--font-math:'Cambria Math',Cambria,Georgia,serif;
  --radius-sm:8px;--radius-md:10px;--radius-lg:12px;--radius-xl:14px;--radius-2xl:18px;--radius-pill:99px;
  --shadow-btn:3px 3px 0 var(--ink);--shadow-btn-pressed:1px 1px 0 var(--ink);
  --shadow-violet:5px 5px 0 var(--violet);--shadow-magenta:5px 5px 0 var(--magenta);--shadow-green:5px 5px 0 var(--green);
  --topbar-h:54px;--toolbar-h:52px;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{font-family:var(--font-sans);color:var(--ink);background:var(--surface) radial-gradient(var(--line) 1.5px,transparent 1.5px) 0 0/24px 24px;line-height:1.5;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
[hidden]{display:none!important}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--magenta);outline-offset:2px}
svg.ic,.pm-btn svg,.tool svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sep{width:2px;height:28px;background:var(--line);margin:0 6px;flex:none}

/* Przyciski (Button z DS) */
.pm-btn{display:inline-flex;align-items:center;gap:8px;font:600 15px/1.2 var(--font-sans);padding:12px 20px;border-radius:var(--radius-md);border:2px solid var(--ink);box-shadow:var(--shadow-btn);background:var(--surface);color:var(--violet);cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .15s,background .2s;white-space:nowrap}
.pm-btn:hover{transform:translate(2px,2px);box-shadow:var(--shadow-btn-pressed)}
.pm-btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:var(--shadow-btn)}
.pm-btn-primary{background:var(--violet);color:var(--surface)}
.pm-btn-primary:hover{background:var(--violet-hover)}
.pm-btn-sm{padding:8px 12px;font-size:14px;min-height:40px}
.pm-btn-sm svg{width:20px;height:20px}
.pm-select{font:600 14px var(--font-sans);padding:8px 10px;border:2px solid var(--ink);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);min-height:40px;cursor:pointer}
.pm-tag{display:inline-block;font-size:13px;font-weight:700;padding:5px 12px;border:2px solid var(--ink);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);transform:rotate(-1.5deg)}
.pm-tag-green{background:var(--green)}
.pm-check{display:flex;gap:10px;align-items:center;font-weight:600;font-size:15px;padding:8px 0}
.pm-check input{width:20px;height:20px;accent-color:var(--violet)}
.pm-field label{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.pm-field input{width:100%;padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);margin-bottom:16px}
.pm-field input:focus{border-color:var(--violet);outline:3px solid var(--focus-soft)}
.lbl{display:inline}
@media(max-width:900px){.lbl{display:none}}

/* Strona główna */
.home{min-height:100%;display:flex;flex-direction:column}
.home-head{display:flex;align-items:center;gap:16px;height:72px;padding:0 24px;border-bottom:2px solid var(--ink);background:rgba(255,255,255,.95)}
.brand{display:inline-flex;align-items:center;gap:12px;font-weight:800;font-size:1.2rem;color:var(--ink);text-decoration:none}
.brand b{color:var(--violet);font-weight:800}
.brand-mark{width:44px;height:38px;color:var(--ink)}
.home-body{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:40px 20px}
.home-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px}
.home h1{font-size:clamp(1.8rem,3.4vw,2.4rem);font-weight:800;line-height:1.15;letter-spacing:-.02em}
.lead{color:var(--muted);max-width:60ch;margin-top:6px}
.home-actions{display:flex;gap:12px;flex-wrap:wrap}
.board-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.board-card{background:var(--surface);border:2px solid var(--ink);border-radius:var(--radius-xl);padding:0;box-shadow:var(--shadow-violet);display:flex;flex-direction:column;overflow:hidden;transition:transform .15s,box-shadow .15s}
.board-grid>.board-card:nth-child(3n+2){box-shadow:var(--shadow-magenta)}
.board-grid>.board-card:nth-child(3n){box-shadow:var(--shadow-green)}
.board-card .thumb{display:block;width:100%;aspect-ratio:16/9;background:#fff;border-bottom:2px solid var(--ink);cursor:pointer;padding:0;border-top:0;border-left:0;border-right:0}
.board-card .thumb svg{width:100%;height:100%;display:block}
.board-card .meta{padding:14px 16px 12px}
.board-card h3{font-size:1.05rem;font-weight:700;line-height:1.2;letter-spacing:-.01em;word-break:break-word}
.board-card .sub{color:var(--muted);font-size:.85rem;margin-top:4px}
.board-card .acts{display:flex;gap:8px;padding:0 12px 12px;flex-wrap:wrap}
.board-card .acts .pm-btn{padding:6px 10px;font-size:13px;min-height:34px;box-shadow:2px 2px 0 var(--ink)}
.empty{color:var(--muted);padding:40px 0;text-align:center}
.home-auth{margin-left:auto;display:flex;align-items:center;gap:10px}
.home-auth .pm-btn{padding:8px 14px;font-size:14px;box-shadow:2px 2px 0 var(--ink)}
.home-auth .pm-btn svg{width:18px;height:18px}
.auth-state{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:var(--success)}
.auth-state svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dlg-lead{color:var(--muted);font-size:14px;margin:0 0 16px;text-align:left}
.form-error{color:var(--error);font-weight:600;font-size:14px;margin:-6px 0 14px}
.home-foot{padding:20px;text-align:center;color:var(--muted);font-size:.85rem}

/* Edytor: układ. Lżejsze przyciski niż na stronie: cienki kontur, bez twardych cieni, żeby kartka była na pierwszym planie. */
.editor{position:fixed;inset:0;display:grid;grid-template-rows:var(--topbar-h) var(--toolbar-h) 1fr;background:var(--surface-soft)}
.editor .pm-btn,.editor .pm-select,.editor .tool{border:1.5px solid var(--line-strong);box-shadow:none;color:var(--ink);background:var(--surface)}
.editor .pm-btn:hover,.editor .tool:hover{transform:none;box-shadow:none;background:var(--violet-tint);border-color:var(--violet)}
.editor .pm-btn:disabled{opacity:.4;background:var(--surface);border-color:var(--line-strong)}
.topbar{display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid var(--line);background:var(--surface);min-width:0}
.top-mark{width:34px;height:30px;color:var(--ink);flex:none}
.board-name{flex:1;min-width:80px;font:700 17px var(--font-sans);letter-spacing:-.01em;border:1.5px solid transparent;border-radius:var(--radius-sm);padding:6px 10px;background:transparent}
.board-name:hover{border-color:var(--line-strong)}
.board-name:focus{border-color:var(--violet);outline:none;background:var(--surface)}
.save-state{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.sync-state{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.sync-state::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--muted)}
.sync-state[data-state="online"]::before{background:var(--success)}
.sync-state[data-state="offline"]::before,.sync-state[data-state="version"]::before,.sync-state[data-state="full"]::before{background:var(--error)}
.sync-state[data-state="readonly"]::before{background:var(--violet)}
.pager{display:flex;gap:6px;align-items:center}
.page-count{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;min-width:52px;text-align:center}
.top-actions{display:flex;gap:6px;align-items:center}

.toolbar{display:flex;align-items:center;gap:12px;padding:0 12px;border-bottom:1px solid var(--line);background:var(--surface);overflow-x:auto;scrollbar-width:none}
.toolbar::-webkit-scrollbar{display:none}
.tools{display:flex;gap:4px;align-items:center;flex:none}
.tool{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--radius-md);cursor:pointer;transition:background .15s,border-color .15s;padding:0}
.tool svg{width:21px;height:21px}
.editor .tool.active{background:var(--violet);color:#fff;border-color:var(--violet)}
.editor .tool[data-tool=laser].active{background:#e11d48;border-color:#e11d48}
.opts{display:flex;gap:14px;align-items:center;flex:none}
.opt-group{display:flex;gap:6px;align-items:center}
.opt-group[hidden]{display:none}
.opt-label{font-size:12px;font-weight:700;color:var(--muted);margin-right:2px}
.opt.swatch{width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(15,23,42,.25);cursor:pointer;padding:0;background:var(--c,#fff);position:relative;transition:transform .12s}
.opt.swatch:hover{transform:scale(1.1)}
.opt.swatch.active{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--violet)}
.opt.swatch.fill-none{background:#fff}
.opt.swatch.fill-none::after{content:"";position:absolute;inset:3px;border-radius:50%;background:linear-gradient(135deg,transparent 46%,var(--ink) 46% 54%,transparent 54%)}
.opt.swatch.fill-light{background:linear-gradient(135deg,#fff 50%,rgba(94,23,235,.25) 50%)}
.opt.swatch.fill-solid{background:var(--violet)}
.opt.width{width:38px;height:28px;border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);background:#fff;cursor:pointer;display:grid;place-items:center;padding:0}
.opt.width i{display:block;border-radius:99px;background:var(--ink);width:20px}
.opt.width.active{background:var(--violet-tint);border-color:var(--violet)}

/* Obszar roboczy: panel kartek po lewej (zwijany) + scena */
.work{display:grid;grid-template-columns:164px 1fr;min-height:0}
.work.pages-collapsed{grid-template-columns:1fr}
.pages-panel{width:164px;display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--surface);min-height:0}
.pages-panel.collapsed{display:none}
.thumbs{display:flex;flex-direction:column;gap:10px;overflow-y:auto;flex:1;min-height:0;padding:12px;scrollbar-width:thin}
.pages-foot{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-top:1px solid var(--line)}
.pages-foot .pm-btn{justify-content:center}
.thumb-page{flex:none;width:100%;aspect-ratio:16/9;border:1.5px solid var(--line-strong);border-radius:6px;background:#fff;cursor:pointer;padding:0;position:relative;overflow:hidden;transition:border-color .12s}
.thumb-page:hover{border-color:var(--violet)}
.thumb-page svg{width:100%;height:100%;display:block;pointer-events:none}
.thumb-page .n{position:absolute;left:4px;bottom:3px;font-size:11px;font-weight:800;background:#fff;border:1px solid var(--line-strong);border-radius:5px;padding:0 5px;line-height:1.4}
.thumb-page.active{border-color:var(--violet);outline:2px solid var(--violet);outline-offset:0}
.thumb-page.active .n{background:var(--violet);color:#fff;border-color:var(--violet)}
.thumb-page.drop-before::before,.thumb-page.drop-after::after{content:"";position:absolute;left:0;right:0;height:4px;background:var(--magenta)}
.thumb-page.drop-before::before{top:-7px}.thumb-page.drop-after::after{bottom:-7px}

.stage{position:relative;overflow:hidden;display:grid;place-items:center;padding:12px;min-height:0;min-width:0;background:#e9edf3}
.page-wrap{position:relative;width:min(100%,calc((100vh - var(--topbar-h) - var(--toolbar-h) - 20px) * 16 / 9));aspect-ratio:16/9;max-height:100%}
.page{display:block;width:100%;height:100%;background:#fff;border:1.5px solid #94a3b8;border-radius:4px;box-shadow:0 2px 12px rgba(15,23,42,.14);touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair}
.page.tool-select{cursor:default}
.page.tool-hand{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cpath d='M8 12V5.5a1.5 1.5 0 013 0V11M11 5a1.5 1.5 0 013 0v6M14 6.5a1.5 1.5 0 013 0V13M17 9.5a1.5 1.5 0 013 0V15a6 6 0 01-6 6h-2.5a6 6 0 01-4.9-2.5L4 15.5a1.6 1.6 0 012.4-2L8 15v-3' fill='%23fff' stroke='%23fff' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 12V5.5a1.5 1.5 0 013 0V11M11 5a1.5 1.5 0 013 0v6M14 6.5a1.5 1.5 0 013 0V13M17 9.5a1.5 1.5 0 013 0V15a6 6 0 01-6 6h-2.5a6 6 0 01-4.9-2.5L4 15.5a1.6 1.6 0 012.4-2L8 15v-3' fill='%23fff' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 14 14,grab}
.page.tool-hand.dragging{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cpath d='M8 12V5.5a1.5 1.5 0 013 0V11M11 5a1.5 1.5 0 013 0v6M14 6.5a1.5 1.5 0 013 0V13M17 9.5a1.5 1.5 0 013 0V15a6 6 0 01-6 6h-2.5a6 6 0 01-4.9-2.5L4 15.5a1.6 1.6 0 012.4-2L8 15v-3' fill='%23fff' stroke='%23fff' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 12V5.5a1.5 1.5 0 013 0V11M11 5a1.5 1.5 0 013 0v6M14 6.5a1.5 1.5 0 013 0V13M17 9.5a1.5 1.5 0 013 0V15a6 6 0 01-6 6h-2.5a6 6 0 01-4.9-2.5L4 15.5a1.6 1.6 0 012.4-2L8 15v-3' fill='%23fff' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 14 14,grabbing}
.page.pan-ready{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cpath d='M8 12V5.5a1.5 1.5 0 013 0V11M11 5a1.5 1.5 0 013 0v6M14 6.5a1.5 1.5 0 013 0V13M17 9.5a1.5 1.5 0 013 0V15a6 6 0 01-6 6h-2.5a6 6 0 01-4.9-2.5L4 15.5a1.6 1.6 0 012.4-2L8 15v-3' fill='%23fff' stroke='%23fff' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 12V5.5a1.5 1.5 0 013 0V11M11 5a1.5 1.5 0 013 0v6M14 6.5a1.5 1.5 0 013 0V13M17 9.5a1.5 1.5 0 013 0V15a6 6 0 01-6 6h-2.5a6 6 0 01-4.9-2.5L4 15.5a1.6 1.6 0 012.4-2L8 15v-3' fill='%23fff' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 14 14,grab!important}
.editor .tool:disabled{opacity:.5;cursor:default;background:var(--surface-soft);border-color:var(--line)}
.editor .tool:disabled:hover{background:var(--surface-soft);border-color:var(--line)}
.page.tool-pen,.page.tool-marker,.page.tool-eraser,.page.tool-laser,.page.tool-line,.page.tool-arrow,.page.tool-rect,.page.tool-ellipse,.page.tool-triangle,.page.tool-axes,.page.tool-text{cursor:none}
.page.dragging{cursor:grabbing}
.page-axes{pointer-events:none}
.page-template{pointer-events:none}
#layer-live,#layer-laser,#layer-ui{pointer-events:none}
#layer-ui .handle-hit{pointer-events:all}
/* Kursor: ciemna obwódka z białym pierścieniem, więc widać go na białej kartce i na kolorowych elementach */
.cursor-preview{position:absolute;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%);z-index:5}
.cursor-preview.dot{box-shadow:0 0 0 1px #fff,0 0 0 2px rgba(15,23,42,.35)}
.cursor-preview.laser{box-shadow:0 0 0 1.5px #fff,0 0 8px #e11d48}
.cursor-preview.eraser{border:1.5px dashed var(--ink);box-shadow:0 0 0 1.5px #fff;background:rgba(255,255,255,.5)}
.cursor-preview.cross{border-radius:0;background:transparent!important}
.cursor-preview.cross::before,.cursor-preview.cross::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink);opacity:.8;box-shadow:0 0 0 .5px rgba(255,255,255,.9)}
.cursor-preview.cross::before{width:1px;height:100%;transform:translate(-50%,-50%)}
.cursor-preview.cross::after{width:100%;height:1px;transform:translate(-50%,-50%)}
.text-editor{position:absolute;z-index:6;border:2px dashed var(--violet);border-radius:4px;background:rgba(255,255,255,.92);padding:0;margin:0;resize:none;overflow:hidden;outline:none;line-height:1.25;white-space:pre;min-width:40px;color:inherit}

/* Dialogi i toast */
/* Okna: zawsze na środku ekranu (reset margin:0 zabierał im wyśrodkowanie) */
.pm-dialog{margin:auto;inset:0;border:1px solid var(--line-strong);border-radius:16px;padding:0;width:min(92vw,460px);max-height:min(88vh,720px);overflow:auto;box-shadow:0 24px 60px rgba(15,23,42,.22),0 2px 6px rgba(15,23,42,.08);background:#fff;color:var(--ink)}
.pm-dialog.dlg-small{width:min(92vw,400px)}
.pm-dialog[open]{animation:dlg-in .16s ease-out}
@keyframes dlg-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.pm-dialog::backdrop{background:rgba(15,23,42,.45);backdrop-filter:blur(2px)}
.pm-dialog form{padding:20px 22px 18px}
.pm-dialog h2{font-size:1.15rem;font-weight:800;letter-spacing:-.01em;margin:0}
.dlg-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.dlg-x{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
.dlg-x:hover{background:var(--surface-soft);color:var(--ink)}
.dlg-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.dlg-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.dlg-foot.end{justify-content:flex-end}
.pm-dialog .pm-btn{box-shadow:none;border:1.5px solid var(--line-strong);padding:9px 16px;font-size:14px;color:var(--ink)}
.pm-dialog .pm-btn:hover{transform:none;box-shadow:none;background:var(--surface-soft)}
.pm-dialog .pm-btn-primary{background:var(--violet);border-color:var(--violet);color:#fff}
.pm-dialog .pm-btn-primary:hover{background:var(--violet-hover)}
.pm-dialog .pm-btn-danger{background:var(--error);border-color:var(--error);color:#fff}
.pm-dialog .pm-btn-danger:hover{background:#991b1b}
.pm-dialog .pm-field input{margin-bottom:0}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px 8px;border:1.5px solid var(--line-strong);border-radius:12px;background:#fff;font:600 13px/1.25 var(--font-sans);color:var(--ink);cursor:pointer;text-align:center;transition:border-color .15s,background .15s}
.tile svg{width:24px;height:24px;fill:none;stroke:var(--violet);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tile:hover{border-color:var(--violet);background:var(--violet-tint)}
.dlg-note{font-size:12.5px;color:var(--muted);margin:8px 2px 0;text-align:center}
.set-list{margin-top:16px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 14px;cursor:pointer}
.set-row+.set-row{border-top:1px solid var(--line)}
.set-row:hover{background:var(--surface-soft)}
.set-row b{display:block;font-size:14px;font-weight:700}
.set-row small{display:block;font-size:12.5px;color:var(--muted);line-height:1.35;margin-top:1px}
.switch{appearance:none;-webkit-appearance:none;flex:none;width:40px;height:24px;border-radius:99px;background:var(--line-strong);position:relative;cursor:pointer;transition:background .15s;margin:0}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.3);transition:transform .15s}
.switch:checked{background:var(--violet)}
.switch:checked::after{transform:translateX(16px)}
.switch:focus-visible{outline:3px solid var(--magenta);outline-offset:2px}
.keys{margin-top:14px;font-size:13px}
.keys summary{cursor:pointer;font-weight:700;color:var(--muted);padding:6px 2px;list-style:none;display:flex;align-items:center;gap:6px}
.keys summary::-webkit-details-marker{display:none}
.keys summary::before{content:"";width:0;height:0;border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s}
.keys[open] summary::before{transform:rotate(90deg)}
.keys dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:8px 2px 0;padding:12px 14px;background:var(--surface-soft);border-radius:10px}
.keys dt{font-weight:700;white-space:nowrap;color:var(--ink)}
.keys dd{margin:0;color:var(--muted)}
.link-danger{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:6px 4px;font:600 13px var(--font-sans);color:var(--error);cursor:pointer;border-radius:6px}
.link-danger svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.link-danger:hover{background:#fef2f2}
@media(max-width:520px){.tiles{grid-template-columns:1fr}.tile{flex-direction:row;justify-content:flex-start;padding:11px 14px}}
@media(max-height:520px){.pm-dialog{max-height:94vh}.pm-dialog form{padding:12px 16px 10px}.dlg-head{margin-bottom:10px}.tiles .tile{flex-direction:row;padding:8px 10px;gap:8px}.tile svg{width:20px;height:20px}.dlg-note{display:none}.set-list{margin-top:10px}.set-row{padding:7px 12px}.dlg-foot{margin-top:10px;padding-top:10px}}
@media(prefers-reduced-motion:reduce){.pm-dialog[open]{animation:none}}
.hint{font-size:13px;color:var(--muted);margin-top:16px;line-height:1.5}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;font-weight:600;font-size:14px;padding:10px 16px;border-radius:var(--radius-md);box-shadow:4px 4px 0 var(--green);z-index:50;max-width:90vw}
.toast.warn{background:var(--error);box-shadow:4px 4px 0 var(--magenta)}

/* Elementy na kartce */
.el-text{white-space:pre;user-select:none}
.el-text.f-sans{font-family:var(--font-sans);font-weight:600}
.el-text.f-hand{font-family:var(--font-hand);font-weight:600}
.el-text.f-math{font-family:var(--font-math);font-style:italic}
.sel-box{fill:none;stroke:var(--violet);stroke-width:1;vector-effect:non-scaling-stroke}
.sel-stem{stroke:var(--violet);stroke-width:1;vector-effect:non-scaling-stroke}
.sel-outline{fill:none;stroke:var(--magenta);stroke-width:2;vector-effect:non-scaling-stroke}
.handle{fill:#fff;stroke:var(--violet);stroke-width:1.25;vector-effect:non-scaling-stroke;pointer-events:none}
.handle-hit{fill:transparent;stroke:none;pointer-events:all;cursor:pointer}
.handle.rot{fill:#fff;stroke:var(--violet)}
.marquee{fill:rgba(94,23,235,.05);stroke:var(--violet);stroke-width:1;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}
.laser-dot{fill:#e11d48;filter:drop-shadow(0 0 6px #e11d48)}
.peer-name{font:600 12px 'Plus Jakarta Sans',system-ui,sans-serif}
.peer-cursor,#layer-peers{pointer-events:none}
.laser-trail{fill:none;stroke:#e11d48;stroke-linecap:round;stroke-linejoin:round;opacity:.85}

/* Druk (eksport PDF) */
.print-root{display:none}
@media print{
  @page{size:1920px 1080px;margin:0}
  body{background:#fff}
  body>*:not(.print-root){display:none!important}
  .print-root{display:block}
  .print-root svg.pp{display:block;width:1920px;height:1080px;page-break-after:always;break-after:page}
  .print-root svg.pp:last-child{page-break-after:auto;break-after:auto}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.pm-btn:hover,.tool:hover{transform:none}}
/* Telefony i małe tablety: zwarty układ, pasek w jednym rzędzie, panel kartek nad kartką */
@media(max-width:900px){
  :root{--topbar-h:46px;--toolbar-h:48px}
  body{touch-action:manipulation}
  .topbar{gap:6px;padding:0 6px}
  .top-mark,.save-state{display:none}
  /* stan połączenia zostaje widoczny: kropka i krótki napis (pełny tekst w title) */
  .sync-state{font-size:0;gap:0;flex:none}
  .sync-state::after{content:attr(data-short);font-size:12px;margin-left:5px}
  .sync-state[data-state="online"]::after{content:none}
  .sync-state::before{width:10px;height:10px}
  .board-name{font-size:15px;min-width:40px;padding:4px 6px}
  .editor .pm-btn-sm{padding:6px 8px;min-height:34px}
  .editor .pm-btn-sm svg{width:18px;height:18px}
  .page-count{min-width:40px;font-size:13px}
  .pager{gap:4px}.top-actions{gap:4px}
  .toolbar{gap:6px;padding:0 6px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tools{gap:4px}.opts{gap:8px}
  .tool{width:36px;height:36px;border-radius:8px}.tool svg{width:19px;height:19px}
  .tool-shape{width:46px}.width-btn{width:48px}
  .sep{display:none}
  .opt.swatch{width:24px;height:24px}
  .work{grid-template-columns:1fr;position:relative}
  .pages-panel{position:absolute;left:0;top:0;bottom:0;z-index:20;width:140px;box-shadow:4px 0 16px rgba(15,23,42,.12)}
  .thumbs{padding:8px;gap:8px}
  .pages-foot{padding:8px}
  .stage{padding:6px}
  .page-wrap{width:min(100%,calc((100vh - var(--topbar-h) - var(--toolbar-h) - 12px) * 16 / 9))}
  .zoom-ctl{right:6px;bottom:6px;padding:2px;gap:2px}
  .zoom-ctl .pm-btn{min-width:30px;padding:4px 6px;font-size:14px}
  .zoom-ctl #zoom-level{min-width:48px;font-size:12px}
  .toast{bottom:12px;font-size:13px}
}
@media(max-width:600px) and (orientation:portrait){
  :root{--toolbar-h:92px}
  .toolbar{flex-wrap:wrap;overflow:visible;row-gap:4px;align-content:center}
  .board-name{display:none}
  /* górny pasek w dwóch rzędach zamiast uciętych przycisków; kartka i tak ma pod sobą wolne miejsce */
  .editor{grid-template-rows:auto auto minmax(0,1fr);grid-template-columns:minmax(0,1fr)}
  .tools,.opts,.opt-group{flex-wrap:wrap;row-gap:4px}
  .topbar{flex-wrap:wrap;height:auto;padding:5px 6px;row-gap:5px;justify-content:space-between}
  .topbar .pm-btn-sm{flex:none}
  .toolbar{height:auto;padding:5px 6px}
  .stage{align-items:start}
}

.zoom-ctl{position:absolute;right:18px;bottom:18px;z-index:7;display:flex;gap:4px;background:rgba(255,255,255,.92);border:1px solid var(--line-strong);border-radius:12px;padding:4px}
.zoom-ctl .pm-btn{min-width:38px;justify-content:center;padding:6px 8px;border-color:transparent;font-size:15px}
.zoom-ctl #zoom-level{min-width:58px;font-size:13px}
.sel-locked{stroke:var(--magenta)!important}

.el-marker{mix-blend-mode:multiply}
.cursor-preview.square{border-radius:2px;opacity:.6}

.shape-tool{position:relative}
.tool-shape{width:52px;gap:2px;display:flex;align-items:center;justify-content:center}
.tool-shape .caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.7}
.shape-menu{position:fixed;z-index:40;min-width:230px;background:#fff;border:1.5px solid var(--line-strong);border-radius:12px;padding:6px;box-shadow:0 6px 20px rgba(15,23,42,.12);display:grid;gap:2px}
.shape-opt{display:flex;align-items:center;gap:10px;padding:8px 10px;border:0;border-radius:8px;background:none;font:600 14px var(--font-sans);color:var(--ink);cursor:pointer;text-align:left}
.shape-opt svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.shape-opt kbd{margin-left:auto;font:600 11px var(--font-sans);color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 5px}
.shape-opt:hover{background:var(--violet-tint)}
.shape-opt.active{background:var(--violet);color:#fff}
.shape-opt.active kbd{color:#fff;border-color:rgba(255,255,255,.5)}
.shape-hint{font-size:12px;color:var(--muted);padding:6px 10px 4px;margin:0}

.width-btn{width:56px}
.w-line{display:block;width:22px;border-radius:99px;background:var(--ink)}
.width-menu{min-width:190px}
.width-menu .w-line{width:28px;flex:none}
.shape-opt.active .w-line{background:#fff}

/* Palec i rysik: przyciski co najmniej 44 px, kolory 32 px (także na dużym tablecie) */
@media(pointer:coarse),(max-width:900px){
  .editor .pm-btn-sm{min-height:44px;min-width:44px;justify-content:center}
  .tool{width:44px;height:44px}.tool svg{width:21px;height:21px}
  .tool-shape{width:56px}.width-btn{width:56px;height:44px}
  .opt.swatch{width:32px;height:32px}
  .zoom-ctl .pm-btn{min-width:44px;min-height:44px}
  .zoom-ctl #zoom-level{min-width:56px}
  .shape-opt{padding:12px 12px}
  .dlg-x{min-width:44px;min-height:44px}
}
@media(pointer:coarse) and (min-width:901px){:root{--toolbar-h:60px;--topbar-h:58px}}
@media(max-width:900px){:root{--topbar-h:54px;--toolbar-h:56px}}
@media(max-width:600px) and (orientation:portrait){
  .toolbar{padding:5px 4px}.tools{gap:4px;flex:1 1 100%;min-width:0}.opts{flex:1 1 100%;min-width:0}
  .tool-shape{width:44px}.tool-shape .caret{display:none}
}
/* Telefon w poziomie: wszystkie przyciski w pasku po lewej, kartka zajmuje resztę */
@media(max-width:1000px) and (max-height:520px) and (orientation:landscape){
  .editor{grid-template-columns:154px 1fr;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"top work" "tools work"}
  .topbar{grid-area:top;height:auto;display:flex;flex-wrap:wrap;gap:4px;padding:5px 6px 4px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);overflow:visible}
  .toolbar{grid-area:tools;height:auto;display:flex;flex-wrap:wrap;align-content:flex-start;gap:4px;padding:5px 6px;border-bottom:0;border-right:1px solid var(--line);overflow-y:auto;overflow-x:hidden;min-height:0;scrollbar-width:none}
  .work{grid-area:work}
  .pager,.top-actions,.tools,.opts,.opt-group,#opt-colors,#opt-mcolors,#opt-widths,#opt-sel,#opt-fill,#opt-text{display:contents}
  .board-name,.save-state,.top-mark,.sep,.lbl,.opt-label{display:none}
  .editor .pm-btn-sm{padding:0;width:44px;height:40px;min-height:0;min-width:0;justify-content:center;flex:none}
  .sync-state{width:44px;height:40px;justify-content:center;flex:none;flex-direction:column}
  .sync-state::after{margin-left:0;font-size:10px}
  .editor .pm-btn-sm svg{width:18px;height:18px}
  .page-count{width:44px;min-width:0;font-size:12px;text-align:center;line-height:40px}
  .tool{width:44px;height:40px;flex:none}
  .tool svg{width:18px;height:18px}
  .tool-shape,.width-btn{width:44px;height:40px}
  .tool-shape .caret,.width-btn .caret{display:none}
  .opt.swatch{width:30px;height:30px;margin:3px 2px;flex:none}
  .pm-select{width:140px;flex:none}
  .pages-panel{width:132px}
  .page-wrap{width:min(100%,calc((100vh - 12px) * 16 / 9))}
  .stage{align-items:center}
}

/* Nawigator: widoczny obszar przy przybliżeniu */
.vp{position:absolute;display:block;border:2px solid var(--violet);background:rgba(94,23,235,.12);border-radius:2px;pointer-events:none;box-shadow:0 0 0 999px rgba(15,23,42,.18);z-index:1}
.thumb-page .vp{min-width:6px;min-height:4px}
.thumb-page.navigable{cursor:move;overflow:hidden}
.thumb-page.navigable .n{z-index:2}
.minimap{position:absolute;right:18px;bottom:66px;z-index:7;width:180px;aspect-ratio:16/9;background:#fff;border:1px solid var(--line-strong);border-radius:6px;box-shadow:0 4px 14px rgba(15,23,42,.14);overflow:hidden;cursor:move;touch-action:none}
.mm-page,.mm-page svg{width:100%;height:100%;display:block;pointer-events:none}
@media(max-width:900px){.minimap{right:6px;bottom:48px;width:130px}}

.thumb-page img,.board-card .thumb img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ask-text{font-size:15px;font-weight:600;line-height:1.45;margin:4px 0 0}
.scribble-fade{animation:scribble-out .25s ease-out forwards;pointer-events:none}
@keyframes scribble-out{to{opacity:0}}
@media(prefers-reduced-motion:reduce){.scribble-fade{animation:none;opacity:0}}

/* ---------- Współpraca (etap 2, krok 10): udostępnianie, uczestnicy, podgląd, nowa wersja ---------- */
.editor .share-btn{color:var(--violet)}
.people-btn span{font-weight:700;font-size:13px;min-width:1ch}
.dlg-share{width:min(94vw,520px)}
.share-need{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:12px;background:var(--surface-soft);border:1px solid var(--line);font-size:14px;margin:0}
.share-need p{margin:0}
.share-link+.share-link{margin-top:14px}
.share-link label{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:700;font-size:14px;margin-bottom:6px}
.share-link label small{font-weight:500;color:var(--muted);font-size:12.5px}
.share-link label svg,.ro-note svg{width:18px;height:18px;fill:none;stroke:var(--violet);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.link-row{display:flex;gap:8px}
.link-row input{flex:1;min-width:0;padding:9px 12px;border:1.5px solid var(--line-strong);border-radius:var(--radius-md);font:500 13px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);background:var(--surface-soft)}
.link-row input:focus{border-color:var(--violet);outline:3px solid var(--focus-soft)}
.pm-dialog .link-row .pm-btn{padding:8px 12px}
.link-row .pm-btn.copied{border-color:var(--success);color:var(--success)}
.dlg-share .dlg-note{text-align:left;margin-top:14px}
.ro-note{display:flex;align-items:center;gap:10px;margin:0;font-size:14px;color:var(--ink);white-space:nowrap}
.editor.readonly .tools,.editor.readonly .opts,.editor.readonly #btn-add-page,.editor.readonly #btn-undo,.editor.readonly #btn-redo,.editor.readonly .pages-foot{display:none}
.editor.readonly .page{cursor:default}
.people-pop{position:fixed;top:calc(var(--topbar-h) - 4px);right:12px;z-index:40;width:min(92vw,300px);background:#fff;border:1.5px solid var(--line-strong);border-radius:16px;box-shadow:0 12px 32px rgba(15,23,42,.16);padding:14px 16px}
.people-pop .pm-field label{display:flex;flex-direction:column;gap:2px;font-size:13px}
.people-pop .pm-field label small{font-weight:500;color:var(--muted);font-size:12px}
.nick-row{display:flex;align-items:center;gap:8px}
.nick-row input{flex:1;min-width:0;margin:0;padding:8px 10px;border:1.5px solid var(--line-strong);border-radius:var(--radius-md);font:600 14px var(--font-sans)}
.people-pop h3{font-size:13px;font-weight:700;color:var(--muted);margin:14px 0 6px;text-transform:none}
.people-list{list-style:none;margin:0;padding:0;max-height:40vh;overflow-y:auto}
.people-list li{display:flex;align-items:center;gap:8px;padding:6px 2px;font-size:14px;font-weight:600;border-top:1px solid var(--line)}
.people-list li:first-child{border-top:0}
.people-list .nick{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.people-list small{color:var(--muted);font-weight:500;font-size:12px;white-space:nowrap}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;flex:none;border:2px solid #fff;box-shadow:0 0 0 1px var(--line-strong)}
.people-empty{font-size:13px;color:var(--muted);margin:4px 0 0}
.update-bar{position:fixed;left:50%;top:12px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:14px;max-width:94vw;padding:10px 12px 10px 16px;background:#fff;border:1.5px solid var(--error);border-radius:12px;box-shadow:0 10px 28px rgba(15,23,42,.18);font-size:14px;font-weight:600;color:var(--ink)}
.update-bar .pm-btn{box-shadow:none;border:1.5px solid var(--error);color:var(--error);padding:7px 12px;font-size:14px}
.update-bar .pm-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.update-bar .pm-btn:hover{transform:none;box-shadow:none;background:#fef2f2}
.home-data{margin-top:44px;padding-top:22px;border-top:2px dashed var(--line-strong)}
.home-data h2{font-size:1.05rem;font-weight:800;margin:0 0 4px}
.home-data p{color:var(--muted);font-size:.92rem;margin:0 0 14px;max-width:70ch}
.data-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.data-acts .link-danger{margin-left:auto}
.board-card .tags{display:flex;gap:6px;margin-top:8px}
.share-tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;padding:2px 8px;border-radius:var(--radius-pill);background:var(--violet-tint);color:var(--violet)}
.share-tag.view{background:var(--surface-soft);color:var(--muted);border:1px solid var(--line)}
@media(max-width:1180px){.share-btn .lbl{display:none}}
@media(max-width:900px){.ro-note span{white-space:normal;font-size:13px}}

/* Wzory LaTeX */
.dlg-formula{width:min(94vw,560px)}
.snips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.snip{min-width:40px;height:40px;padding:0 10px;border:1.5px solid var(--line-strong);border-radius:8px;background:var(--surface);font:600 16px var(--font-sans);color:var(--ink);cursor:pointer}
.snip:hover{background:var(--violet-tint);border-color:var(--violet)}
#formula-tex{width:100%;font:500 15px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;padding:10px 12px;border:1.5px solid var(--line-strong);border-radius:10px;resize:vertical;min-height:72px}
.formula-preview{min-height:84px;margin-top:10px;padding:12px;border:1.5px dashed var(--line-strong);border-radius:10px;display:grid;place-items:center;overflow:auto;color:var(--muted);font-size:13px;background:#fff}
.formula-preview svg{max-width:100%;height:auto}
.page.tool-formula{cursor:crosshair}
/* Idź za mną */
.lead-btn[aria-pressed="true"]{background:var(--violet)!important;color:#fff!important;border-color:var(--violet)!important}
.people-list .lead-tag{color:var(--violet);font-weight:700}
@media(max-width:1280px){.lead-btn .lbl{display:none}}