:root{
  --toolbar-h: 58px;
  --bg: #f6f7f9;
  --panel: #ffffff;
  --border: #e5e7eb;
  --text: #0f172a;
  --muted: #64748b;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --radius: 10px;
}
html.dark{
  --bg: #0b1220;
  --panel: #162032;
  --border: #2a3a56;
  --text: #e2e8f0;
  --muted: #94a3b8;
}
html.dark body{ background:var(--bg); color:var(--text); }
html.dark .toolbar{ background:var(--panel); border-color:var(--border); }
html.dark .tool-btn{ background:#1e293b; border-color:var(--border); color:#e2e8f0; }
html.dark .tool-btn:hover{ background:#264065; border-color:#3a4f6e; }
html.dark .tool-btn.active{ background:var(--primary); color:#fff; border-color:var(--primary); }
html.dark .btn{ background:#1e293b; border-color:var(--border); color:var(--text); }
html.dark .btn--primary{ background:var(--primary); color:#fff; border-color:var(--primary); }
html.dark .btn--ghost:hover{ background:#264065; }
html.dark .palette{ background:#1e293b; border-color:var(--border); }
html.dark .color-picker{ background:#1e293b; border-color:var(--border); }
html.dark .color-picker i{ color:var(--muted); }
html.dark .pressure-toggle{ background:#1e293b; border-color:var(--border); color:var(--muted); }
html.dark .bg-select{ background:#1e293b; border-color:var(--border); color:var(--text); }
html.dark .zoom-group{ background:#1e293b; border-color:var(--border); }
html.dark .zoom-label{ color:var(--text); }
html.dark .toolbar__toggle{ background:#1e293b; border-color:var(--border); color:var(--muted); }
html.dark .canvas-wrap.bg-white{ background:#0f172a; }
html.dark .canvas-wrap.bg-grid{ background-color:#0f172a; background-image:linear-gradient(to right,#1e293b 1px,transparent 1px),linear-gradient(to bottom,#1e293b 1px,transparent 1px); }
html.dark .canvas-wrap.bg-lines{ background-color:#0f172a; background-image:repeating-linear-gradient(to bottom,transparent 0 27px,#1e293b 27px 28px),linear-gradient(to right,#7f1d1d 1px,transparent 1px); }
html.dark .canvas-wrap.bg-dots{ background-color:#0f172a; background-image:radial-gradient(#334155 1.4px,transparent 1.6px); }
html.dark .canvas-wrap.bg-cartesian{background-color:#0f172a;background-image:linear-gradient(to right,transparent calc(50% - 0.8px),#3b82f6 0,#3b82f6 calc(50% + 0.8px),transparent 0),linear-gradient(to bottom,transparent calc(50% - 0.8px),#3b82f6 0,#3b82f6 calc(50% + 0.8px),transparent 0);background-size:100% 100%,100% 100%;background-position:0 0,0 0;}
html.dark .mobile-tools{ background:#162032; border-color:var(--border); }
html.dark dialog{ background:#1e293b; color:var(--text); }
html.dark dialog::backdrop{ background:rgba(2,6,23,.6); }
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;font-family:Inter,system-ui,sans-serif;color:var(--text);background:var(--bg);touch-action:none;overscroll-behavior:none}
button,select,input{font:inherit}

/* Toolbar */
.toolbar{
  height:var(--toolbar-h);
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:0 12px;
  background:var(--panel);border-bottom:1px solid var(--border);
  position:relative;z-index:10;flex-wrap:nowrap;
}
.toolbar__left,.toolbar__center,.toolbar__right{display:flex;align-items:center;gap:10px}
.toolbar__center{flex:1;justify-content:center}
.toolbar__logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--text);font-weight:700;font-size:15px;white-space:nowrap}
.toolbar__logo i{color:var(--primary);font-size:18px}
.toolbar__divider{width:1px;height:24px;background:var(--border);margin:0 2px}
.tool-group{display:flex;gap:6px}
.tool-btn{
  width:38px;height:38px;display:grid;place-items:center;
  border:1px solid var(--border);background:#fff;border-radius:8px;cursor:pointer;
  transition:.15s;font-size:15px;color:#334155;
}
.tool-btn:hover{border-color:#cbd5e1;background:#f8fafc}
.tool-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn{
  height:38px;padding:0 14px;border-radius:8px;border:1px solid var(--border);
  background:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:13px;white-space:nowrap;
}
.btn--primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn--primary:hover{background:var(--primary-hover)}
.btn--ghost:hover{background:#f8fafc}
.btn--danger{background:#ef4444;color:#fff;border-color:#ef4444}
.btn--danger:hover{background:#dc2626}

.palette{display:flex;align-items:center;gap:6px;padding:4px 8px;background:#f8fafc;border:1px solid var(--border);border-radius:999px}
.color-btn{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #e2e8f0;background:var(--c);cursor:pointer;transition:.15s;display:grid;place-items:center;font-size:10px;font-weight:800;color:#fff;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.25);}
.color-btn[data-color="#ffffff"],.color-btn[data-color="#eab308"]{color:#0f172a;text-shadow:none;}
.color-btn[data-color="#ffffff"]{border-color:#cbd5e1;}
.color-btn.active{box-shadow:0 0 0 2px var(--primary);transform:scale(1.15)}
.color-btn:hover{transform:scale(1.1)}
.color-picker{width:30px;height:30px;border-radius:50%;border:2px solid #e2e8f0;display:grid;place-items:center;cursor:pointer;position:relative;overflow:hidden;background:#fff}
.color-picker input{position:absolute;inset:-10px;opacity:0;cursor:pointer;width:60px;height:60px}
.color-picker i{pointer-events:none;font-size:12px;color:#475569}

.size-group{display:flex;align-items:center;gap:8px;padding:0 8px}
.size-group input[type=range]{width:120px;accent-color:var(--primary);cursor:pointer}
.size-label{font-size:12px;color:var(--muted);min-width:38px;text-align:center;font-variant-numeric:tabular-nums}

.pressure-toggle{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);cursor:pointer;user-select:none;border:1px solid var(--border);padding:6px 10px;border-radius:999px;background:#fff}
.pressure-toggle input{accent-color:var(--primary)}
.bg-select{height:38px;border:1px solid var(--border);border-radius:8px;padding:0 8px;background:#fff;font-size:13px;cursor:pointer}
.zoom-group{display:flex;align-items:center;gap:4px;padding:2px 6px;background:#f8fafc;border:1px solid var(--border);border-radius:999px}
.zoom-label{min-width:48px;text-align:center;font-size:12px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;user-select:none}
.zoom-group .tool-btn{width:32px;height:32px;font-size:13px}

.toolbar__toggle{display:none;position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);width:28px;height:20px;border:1px solid var(--border);background:#fff;border-radius:999px;place-items:center;cursor:pointer;color:var(--muted)}
.toolbar.collapsed{margin-top:calc(-1 * var(--toolbar-h));}
.toolbar.collapsed .toolbar__toggle i{transform:rotate(180deg)}

/* Toolbar na prawo */
#app.toolbar-right{display:flex;flex-direction:row-reverse;height:100dvh;}
#app.toolbar-right .toolbar{width:96px;min-width:96px;height:100dvh;flex-direction:column;justify-content:flex-start;align-items:stretch;padding:10px 6px;gap:10px;border-bottom:none;border-left:1px solid var(--border);overflow-y:auto;overflow-x:hidden;}
#app.toolbar-right .toolbar__left,
#app.toolbar-right .toolbar__center,
#app.toolbar-right .toolbar__right{flex-direction:column;width:100%;align-items:stretch;}
#app.toolbar-right .toolbar__center{flex:0;gap:10px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:10px 0;margin:6px 0;justify-content:flex-start;}
#app.toolbar-right .toolbar__divider{width:80%;height:1px;margin:6px auto;}
#app.toolbar-right .tool-group{flex-direction:column;align-items:stretch;}
#app.toolbar-right .tool-btn{width:100%;}
#app.toolbar-right .btn{width:100%;justify-content:center;padding:0 8px;}
#app.toolbar-right .palette{display:grid;grid-template-columns:repeat(2, 1fr);gap:6px;border-radius:16px;padding:8px;justify-items:center;align-items:center;}
#app.toolbar-right .size-group{flex-direction:row;gap:4px;justify-content:center;align-items:center;padding:0 2px;}
#app.toolbar-right .size-group i{display:none;}
#app.toolbar-right .size-group input[type=range]{width:52px;transform:none;margin:0;}
#app.toolbar-right .size-label{min-width:28px;font-size:10px;}
#app.toolbar-right .pressure-toggle{justify-content:center;text-align:center;}
#app.toolbar-right .zoom-group{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;padding:4px 6px;gap:4px;border-radius:10px;}
#app.toolbar-right .zoom-group .tool-btn{width:28px;height:28px;font-size:12px;}
#app.toolbar-right .zoom-label{width:100%;min-width:0;text-align:center;font-size:11px;order:-1;margin-bottom:1px;}
#app.toolbar-right .bg-select{width:100%;}
#app.toolbar-right .toolbar__logo{justify-content:center;}
#app.toolbar-right .toolbar__logo span{display:none;}
#app.toolbar-right .toolbar__toggle{display:none;}
#app.toolbar-right .canvas-wrap{flex:1;height:100dvh;width:auto;}
#app.toolbar-right .hint{left:calc(50% - 48px);}
/* Podmenu 9 kropek (eksport/import/zapis) */
.more-menu{position:fixed;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:6px;box-shadow:0 12px 32px rgba(0,0,0,.18);z-index:30;min-width:190px;}
.more-menu[hidden]{display:none !important;}
.more-menu .btn{width:100%;justify-content:flex-start;}
@media(max-width:860px){
  #app.toolbar-right{flex-direction:column;}
  #app.toolbar-right .toolbar{width:100%;min-width:0;height:auto;flex-direction:row;position:static;border-left:none;border-bottom:1px solid var(--border);}
  #app.toolbar-right .canvas-wrap{height:calc(100dvh - 110px);}
}

/* Canvas */
.canvas-wrap{position:relative;width:100%;height:calc(100dvh - var(--toolbar-h));background:#fff;overflow:hidden}
.canvas-wrap.bg-white{background:#fff}
.canvas-wrap.bg-grid{background-color:#fff;background-image:linear-gradient(to right,#e2e8f0 1px,transparent 1px),linear-gradient(to bottom,#e2e8f0 1px,transparent 1px);background-size:32px 32px}
.canvas-wrap.bg-lines{background-color:#fff;background-image:repeating-linear-gradient(to bottom,transparent 0 27px,#e2e8f0 27px 28px),linear-gradient(to right,#fecaca 1px,transparent 1px);background-size:100% 28px,72px 100%;background-repeat:repeat, no-repeat}
.canvas-wrap.bg-dots{background-color:#fff;background-image:radial-gradient(#e2e8f0 1.4px,transparent 1.6px);background-size:24px 24px;background-position:12px 12px}
.canvas-wrap.bg-cartesian{background-color:#fff;background-image:linear-gradient(to right,transparent calc(50% - 0.8px),#2563eb 0,#2563eb calc(50% + 0.8px),transparent 0),linear-gradient(to bottom,transparent calc(50% - 0.8px),#2563eb 0,#2563eb calc(50% + 0.8px),transparent 0);background-size:100% 100%,100% 100%;background-position:0 0,0 0;}
canvas#board{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;background:transparent}
canvas#board.pen, canvas#board.eraser{cursor:none}
canvas#board.select{cursor:crosshair}
canvas#board.select--move{cursor:move}
canvas#board.pointer{cursor:grab}
canvas#board.pointer:active{cursor:grabbing}

.selection-box{position:absolute;border:1.5px dashed var(--primary);background:rgba(37,99,235,.08);display:none;pointer-events:none;z-index:4}
.selection-box.active{display:block}
.selection-box.moving{border-color:#0ea5e9;background:rgba(14,165,233,.10)}
.selection-box__handle{position:absolute;inset:0;cursor:move;pointer-events:none}
.selection-ghost{position:absolute;left:0;top:0;pointer-events:none;display:none;z-index:4;opacity:.92;filter:drop-shadow(0 4px 12px rgba(0,0,0,.18))}
.selection-hint{position:absolute;left:50%;top:8px;transform:translateX(-50%);background:rgba(15,23,42,.82);color:#fff;font-size:11px;padding:6px 10px;border-radius:999px;pointer-events:none;white-space:nowrap;z-index:4;display:none}
.selection-hint.show{display:block}

.hint{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  background:rgba(15,23,42,.78);color:#fff;font-size:12px;padding:8px 14px;border-radius:999px;
  pointer-events:none;transition:.3s;backdrop-filter:blur(6px)
}
.hint.hide{opacity:0;transform:translateX(-50%) translateY(8px)}

.cursor{position:fixed;width:20px;height:20px;border:2px solid #0f0f0f;pointer-events:none;transform:translate(-50%,-50%);display:none;opacity:.9;z-index:5;color:#0f0f0f}
.cursor--pen{border-radius:50%;}
.cursor--pen::before,.cursor--pen::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;transform:translate(-50%,-50%);pointer-events:none;display:block;}
.cursor--pen::before{width:12px;height:1.5px;border-radius:1px}
.cursor--pen::after{width:1.5px;height:12px;border-radius:1px}
.cursor--eraser{border-radius:5px;}
.cursor--eraser::before,.cursor--eraser::after{display:none;}
.text-input{position:absolute;z-index:6;min-width:140px;min-height:36px;max-width:480px;border:1.5px solid var(--primary);background:rgba(255,255,255,.98);color:var(--text);font-family:Inter,sans-serif;line-height:1.25;padding:8px 10px;border-radius:8px;outline:none;resize:none;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.18);white-space:pre-wrap;word-break:break-word;}
html.dark .text-input{background:rgba(30,41,59,.98);color:#f1f5f9;border-color:#3b82f6;}
canvas#board.text{cursor:text;}
canvas#board.text--edit{cursor:text;}
/* na urządzeniach dotykowych bez myszy nie pokazuj kółka – rysik/palec i tak zasłania */
@media (pointer: coarse){
  .cursor{display:none !important}
  canvas#board.pen, canvas#board.eraser{cursor:crosshair}
  canvas#board.text{cursor:text}
}

/* Dialog */
dialog{border:none;border-radius:12px;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.2);max-width:360px;width:90%}
dialog::backdrop{background:rgba(15,23,42,.4);backdrop-filter:blur(2px)}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}

/* Mobile bar hidden desktop */
.mobile-tools{display:none;position:fixed;left:50%;bottom:14px;transform:translateX(-50%);background:#fff;border:1px solid var(--border);border-radius:999px;padding:6px;gap:6px;box-shadow:0 8px 30px rgba(0,0,0,.12);z-index:9}

/* Responsive */
@media(max-width:1100px){
  .toolbar__center{gap:8px}
  .size-group input[type=range]{width:80px}
  .hide-mobile{display:none}
}
@media(max-width:860px){
  :root{--toolbar-h:64px}
  .toolbar{flex-wrap:wrap;height:auto;min-height:var(--toolbar-h);padding:8px 10px}
  .toolbar__left{order:1}
  .toolbar__center{order:3;flex-basis:100%;justify-content:space-between;padding-top:4px;border-top:1px solid #f1f5f9;margin-top:4px}
  .toolbar__right{order:2;margin-left:auto}
  .canvas-wrap{height:calc(100dvh - 110px)}
  .mobile-tools{display:flex}
  .hint{bottom:70px;font-size:11px}
}
@media(max-width:480px){
  .pressure-toggle span{font-size:11px}
  .bg-select{display:none}
}

/* Fullscreen */
:fullscreen .toolbar{position:fixed;top:0;left:0;right:0}
:fullscreen .canvas-wrap{height:100dvh}
:fullscreen .mobile-tools{bottom:18px}