/* ============================================================
   MathMaster — „Mano užrašai“ (profesionali A4 užrašinė)
   Įrankių juosta + A4 slenkama drobė (fabric.js) + MathLive
   sluoksnis + 4 perjungiami fonai + spausdinimas/PDF.
   ============================================================ */

.notes-wrap{
  max-width:1280px;
  margin:0 auto;
  padding:18px 20px 40px;
  display:flex;
  flex-direction:column;
  gap:14px;
  height:calc(100vh - 64px);
  min-height:520px;
}

/* ------------------------------ įrankių juosta ------------------------------ */
.notes-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; row-gap:8px;
  padding:10px 14px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  box-shadow:var(--shadow-sm);
  position:relative; z-index:30;
}
.notes-group{
  display:flex; align-items:center; gap:6px; flex-shrink:0;
  padding-right:12px; margin-right:2px;
  border-right:1px solid var(--border);
}
.notes-group:last-child{ border-right:none; padding-right:0; }

.notes-tool{
  display:inline-flex; align-items:center; justify-content:center; gap:2px;
  width:38px; height:38px; border-radius:10px;
  border:1px solid transparent; background:transparent;
  color:var(--text-2); transition:background .15s, color .15s, border-color .15s;
  position:relative;
}
.notes-tool:hover{ background:var(--surface-2); color:var(--text); }
.notes-tool:disabled{
  opacity:.48; cursor:not-allowed; background:transparent; color:var(--muted);
}
.notes-tool.is-active{
  background:var(--primary-50); color:var(--primary); border-color:var(--primary);
}
.notes-tool svg{ width:19px; height:19px; }
.notes-tool .mm-caret{ width:12px; height:12px; margin-left:-2px; }
.notes-shapes-picker{ position:relative; }
.notes-shapes-picker .notes-tool{ width:auto; padding:0 8px; }

.notes-swatch{
  width:26px; height:26px; border-radius:50%;
  border:2px solid var(--border-strong); cursor:pointer;
  padding:0; transition:transform .12s, border-color .12s;
}
.notes-swatch:hover{ transform:scale(1.1); }
.notes-swatch.is-active{ border-color:var(--text); box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--primary); }

.notes-range{ width:90px; accent-color:var(--primary); }
.notes-range-label{ font-size:.78rem; color:var(--muted); min-width:34px; text-align:right; }

.notes-zoom-group{ gap:3px; }
.notes-zoom-group .notes-tool{ width:34px; }
.notes-zoom-value{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:58px; height:34px; padding:0 8px;
  border:1px solid var(--border); border-radius:9px;
  background:var(--surface-2); color:var(--text);
  font:800 .78rem/1 Inter, sans-serif; font-variant-numeric:tabular-nums;
  transition:background .15s, border-color .15s, color .15s;
}
.notes-zoom-value:hover{ background:var(--primary-50); border-color:var(--primary); color:var(--primary); }

.notes-bg-btn{
  display:inline-flex; align-items:center; gap:6px;
  height:38px; padding:0 12px; border-radius:10px;
  border:1px solid var(--border); background:var(--surface-2); color:var(--text);
  font-weight:700; font-size:.85rem; white-space:nowrap;
}
.notes-bg-btn svg{ width:17px; height:17px; }
.notes-bg-picker{ position:relative; }

/* Bendras iškrentantis meniu (fono, sąrašo, figūrų) */
.notes-dropdown, .notes-bg-menu{
  position:absolute; top:calc(100% + 8px); left:0; z-index:40;
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-sm);
  box-shadow:var(--shadow-lg);
}
.notes-dropdown[hidden], .notes-bg-menu[hidden]{ display:none; }
.notes-dropdown{
  display:flex; flex-direction:column; padding:6px; min-width:210px; gap:2px;
}
.notes-dropdown button{
  display:flex; align-items:center; gap:9px;
  padding:9px 10px; border-radius:8px; font-weight:600; font-size:.88rem; color:var(--text);
  text-align:left;
}
.notes-dropdown button:hover{ background:var(--surface-2); }
.notes-dropdown button.is-active{ background:var(--primary-50); color:var(--primary); font-weight:800; }
.notes-dropdown button svg{ width:17px; height:17px; color:var(--text-2); flex-shrink:0; }
.notes-dropdown-label{
  display:block; padding:7px 10px 4px;
  color:var(--muted); font-size:.7rem; line-height:1; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase;
}
.notes-dropdown-separator{ display:block; height:1px; margin:5px 6px; background:var(--border); }

/* Erdviniai kūnai turi daugiau paaiškinimo, todėl meniu yra šiek tiek
   platesnis ir slenka savo viduje, užuot nusikirpęs žemame ekrane. */
.notes-shapes-menu{
  position:fixed;
  width:330px; max-width:calc(100vw - 16px);
  max-height:calc(100vh - 16px);
  max-height:calc(100dvh - 16px);
  overflow-x:hidden; overflow-y:scroll;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-width:auto;
  scrollbar-color:var(--primary) var(--surface-2);
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
}
.notes-shapes-menu > *{ flex:0 0 auto; }
.notes-shapes-menu::-webkit-scrollbar{ width:12px; }
.notes-shapes-menu::-webkit-scrollbar-track{
  background:var(--surface-2); border-left:1px solid var(--border);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.notes-shapes-menu::-webkit-scrollbar-thumb{
  min-height:44px; border:3px solid var(--surface-2); border-radius:999px;
  background:var(--primary);
}
.notes-shapes-menu::-webkit-scrollbar-thumb:hover{ background:var(--primary-600); }
.notes-dropdown button.notes-shape-3d{ align-items:center; padding:9px 10px; }
.notes-dropdown button.notes-shape-3d > span{
  min-width:0; display:flex; flex-direction:column; gap:2px; line-height:1.2;
}
.notes-dropdown button.notes-shape-3d strong{ color:var(--text); font-size:.86rem; }
.notes-dropdown button.notes-shape-3d small{ color:var(--muted); font-size:.71rem; font-weight:600; }
.notes-dropdown button .notes-solid-icon{ width:26px; height:26px; color:var(--primary); }
.notes-dropdown kbd, .notes-3d-menu-help kbd{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:18px; padding:0 5px; border:1px solid var(--border-strong);
  border-bottom-width:2px; border-radius:5px; background:var(--surface-2);
  color:var(--text-2); font:700 .68rem/1 Inter, sans-serif;
}
.notes-3d-menu-help{
  margin:6px; padding:9px 10px; border-radius:9px;
  background:var(--primary-50); color:var(--text-2);
  font-size:.73rem; line-height:1.45;
}
.notes-3d-menu-help > span{ color:var(--primary); font-size:1rem; font-weight:800; margin-right:3px; }
.notes-3d-menu-help b{ color:var(--text); }
/* Linijos stiliaus peržiūra – plati ir žema juostelė, ne 17×17 kvadratas
   kaip kitos šio meniu ikonos, kitaip 40×8 SVG turinys būtų suspaustas. */
.notes-dropdown button svg.notes-line-preview{ width:34px; height:12px; color:var(--text); }

.notes-bg-menu{
  display:grid; grid-template-columns:repeat(2,1fr); gap:8px; padding:10px; min-width:220px;
}
.notes-bg-opt{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:8px; border-radius:10px; border:2px solid transparent; background:var(--surface-2);
}
.notes-bg-opt:hover{ border-color:var(--border-strong); }
.notes-bg-opt.is-active{ border-color:var(--primary); }
.notes-bg-swatch-preview{
  width:100%; height:44px; border-radius:8px; border:1px solid var(--border);
  background-color:var(--card);
}
.notes-bg-opt span{ font-size:.76rem; font-weight:700; color:var(--text-2); }

.notes-list-menu{ min-width:260px; max-height:340px; overflow-y:auto; }
.notes-list-new{ color:var(--primary) !important; border-bottom:1px solid var(--border); border-radius:8px 8px 0 0 !important; margin-bottom:4px; }
.notes-list-item{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:8px 10px; border-radius:8px; cursor:pointer;
}
.notes-list-item:hover{ background:var(--surface-2); }
.notes-list-item.is-active{ background:var(--primary-50); }
.notes-list-item-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:1px; text-align:left; background:none; }
.notes-list-item-title{ font-weight:700; font-size:.86rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px; }
.notes-list-item-date{ font-size:.72rem; color:var(--muted); }
.notes-list-item-del{ width:26px; height:26px; border-radius:7px; color:var(--muted); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.notes-list-item-del:hover{ background:var(--danger); color:#fff; }
.notes-list-item-del svg{ width:14px; height:14px; }
.notes-list-empty{ padding:14px 10px; font-size:.82rem; color:var(--muted); text-align:center; }

.notes-btn-label{ display:inline; }
.notes-spacer{ flex:1 1 auto; }

/* ------------------------------ A4 drobė ------------------------------ */
.notes-scroll{
  flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:auto;
  border-radius:var(--r); border:1px solid var(--border);
  background:var(--surface-2);
  padding:24px 16px;
  overscroll-behavior:contain;
}
/* Matoma drobė didinama tik CSS masteliu. Išorinis stage užima jau
   PADIDINTĄ vietą slinkimo srityje, o vidinis wrap išlaiko nekintamą
   850×1202n loginę koordinačių sistemą Fabric objektams ir PDF eksportui. */
.notes-canvas-stage{
  position:relative;
  width:850px;
  height:calc(1202px * var(--mm-page-count, 1));
  margin:0 auto;
}
.notes-canvas-wrap{
  position:relative;
  width:850px;
  height:calc(1202px * var(--mm-page-count, 1));
  margin:0;
  box-shadow:var(--shadow-md);
  border-radius:4px;
  overflow:visible;
  background-color:var(--card);
  transform:scale(var(--mm-view-zoom, 1));
  transform-origin:top left;
  will-change:transform;
}
/* Puslapių ribos: subtili punktyrinė linija + šešėlis kas 1202px, kad
   ilgas lapas vizualiai atrodytų kaip keli sudėti A4 lapai, o ne viena
   begalinė juosta. */
.notes-canvas-wrap::before{
  content:'';
  position:absolute; inset:0; pointer-events:none; z-index:5;
  background-image:repeating-linear-gradient(
    to bottom,
    transparent 0, transparent calc(1202px - 1px),
    var(--border-strong) calc(1202px - 1px), var(--border-strong) 1202px
  );
}
.notes-canvas-wrap canvas{ position:absolute; inset:0; display:block; }
.notes-canvas-wrap .upper-canvas{ touch-action:none; }
.notes-snap-layer{
  position:absolute; inset:0; z-index:9; pointer-events:none;
  display:block; width:850px;
}

.notes-math-layer{
  position:absolute; inset:0; z-index:10; pointer-events:none;
}
/* Ramybėje formulė neturi atrodyti kaip atskiras plūduriuojantis langelis –
   ji turi atrodyti kaip TIESIOG UŽRAŠYTA ant lapo, be rėmelio ir fono.
   Rėmelis, fonas ir tempimo/trynimo mygtukai atsiranda tik kai mokinys su
   ja sąveikauja (užvedus pelę arba redaguojant) – tada aišku, kad tai
   perkeliamas/trinamas blokas, o ne tik nupieštas skaičius. */
.notes-math-field-wrap{
  position:absolute; pointer-events:auto;
  border-radius:10px; padding:3px 5px;
}
/* Rėmelis/fonas piešiami PER `::before`, o ne tiesiai ant apvalkalo –
   apvalkale gyvena `<math-field>` (Custom Element su Shadow DOM), o kai
   kurios jo vidinės išmatavimo rutinos liečia TĖVINIO elemento stilių;
   atskiras pseudoelementas užtikrina, kad mūsų hover/focus išvaizda
   niekada nepriklausytų nuo to, ką daro pats MathLive. */
.notes-math-field-wrap::before{
  content:'';
  position:absolute; inset:0; z-index:-1;
  border-radius:10px;
  border:1.5px dashed transparent;
  background:transparent;
  transition:border-color .12s, background-color .12s, box-shadow .12s;
}
.notes-math-field-wrap:hover::before,
.notes-math-field-wrap:focus-within::before,
.notes-math-field-wrap.is-dragging::before{
  border-color:var(--primary);
  background:var(--card);
  box-shadow:var(--shadow-md);
}
.notes-math-field-wrap .mm-mathfield{
  min-width:70px; font-size:1.15rem;
  border:2px solid transparent; background:transparent; padding:2px 4px;
  box-shadow:none;
}
.notes-math-field-wrap .mm-mathfield:focus,
.notes-math-field-wrap .mm-mathfield:focus-within{
  border-color:var(--secondary);
  box-shadow:0 0 0 3px rgba(99,102,241,.14);
  background:var(--card);
}

/* ---------------- koordinačių ir funkcijų mini ploteris ---------------- */
.notes-function-plot-dialog{
  position:fixed; inset:0; z-index:2000;
  display:grid; place-items:center; padding:12px; overflow:hidden;
  color:var(--text); background:rgba(15,23,42,.58);
  backdrop-filter:blur(4px);
}
.notes-function-plot-dialog[hidden]{ display:none; }
body.notes-plot-open{ overflow:hidden; }
.notes-function-plot-form{
  width:min(1120px, calc(100vw - 24px));
  max-width:1120px;
  max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px);
  display:flex; flex-direction:column; overflow:hidden;
  color:var(--text); background:var(--card);
  border:1px solid var(--border); border-radius:18px;
  box-shadow:0 28px 90px rgba(15,23,42,.34);
}
.notes-function-plot-header{
  display:flex; align-items:center; gap:12px; padding:16px 18px;
  border-bottom:1px solid var(--border); background:var(--card);
}
.notes-function-plot-header > span:nth-child(2){ min-width:0; display:flex; flex-direction:column; gap:3px; }
.notes-function-plot-header strong{ font-size:1.06rem; line-height:1.3; }
.notes-function-plot-header small{ color:var(--muted); font-size:.78rem; line-height:1.35; }
.notes-function-plot-icon{
  width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center;
  color:var(--primary); background:var(--primary-50); border-radius:12px;
}
.notes-function-plot-icon svg{ width:22px; height:22px; }
.notes-function-plot-close{
  margin-left:auto; width:38px; height:38px; flex:0 0 38px;
  display:grid; place-items:center; color:var(--text-2);
  border:1px solid var(--border); border-radius:50%; background:var(--surface-2);
}
.notes-function-plot-close:hover{ color:var(--text); border-color:var(--border-strong); }
.notes-function-plot-close svg{ width:18px; height:18px; }
.notes-function-plot-body{
  min-height:0; padding:18px; overflow:auto; overscroll-behavior:contain;
  display:grid; grid-template-columns:minmax(300px, 390px) minmax(420px, 1fr); gap:18px;
}
.notes-function-plot-controls{ display:flex; flex-direction:column; gap:12px; }
.notes-function-list-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.notes-function-list-head > span{ color:var(--text-2); font-size:.78rem; font-weight:800; }
.notes-function-add{
  min-height:32px; padding:0 10px; display:inline-flex; align-items:center; gap:6px;
  color:var(--primary); background:var(--primary-50); border:1px solid color-mix(in srgb, var(--primary) 32%, var(--border));
  border-radius:9px; font-size:.72rem; font-weight:800;
}
.notes-function-add:hover{ color:#fff; background:var(--primary); border-color:var(--primary); }
.notes-function-add:disabled{ opacity:.48; cursor:not-allowed; color:var(--muted); background:var(--surface-2); border-color:var(--border); }
.notes-function-add svg{ width:15px; height:15px; }
.notes-function-list{ display:flex; flex-direction:column; gap:8px; }
.notes-function-plot-expression{ display:grid; grid-template-columns:10px minmax(0,1fr); align-items:center; gap:8px; }
.notes-function-curve-dot{
  width:10px; height:10px; border-radius:50%; background:var(--plot-color, #4F46E5);
  box-shadow:0 0 0 2px var(--card), 0 0 0 3px color-mix(in srgb, var(--plot-color, #4F46E5) 48%, transparent);
}
.notes-function-plot-expression[data-color="0"]{ --plot-color:#4F46E5; }
.notes-function-plot-expression[data-color="1"]{ --plot-color:#DB2777; }
.notes-function-plot-expression[data-color="2"]{ --plot-color:#059669; }
.notes-function-plot-expression[data-color="3"]{ --plot-color:#D97706; }
:root[data-theme="dark"] .notes-function-plot-expression[data-color="0"]{ --plot-color:#818CF8; }
:root[data-theme="dark"] .notes-function-plot-expression[data-color="1"]{ --plot-color:#F472B6; }
:root[data-theme="dark"] .notes-function-plot-expression[data-color="2"]{ --plot-color:#34D399; }
:root[data-theme="dark"] .notes-function-plot-expression[data-color="3"]{ --plot-color:#FBBF24; }
.notes-function-plot-input-row{
  height:46px; display:flex; align-items:center; gap:8px; padding:0 12px;
  background:var(--surface-2); border:1px solid var(--border-strong); border-radius:11px;
}
.notes-function-plot-input-row:focus-within{
  border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 17%, transparent);
}
.notes-function-prefix{
  flex:0 0 auto; min-width:62px; padding:0; border:0; outline:0;
  color:var(--plot-color, var(--primary)); background:transparent; font-size:1.05rem;
  pointer-events:none;
}
.notes-function-expression-slot{ flex:1 1 auto; min-width:0; display:flex; align-items:stretch; }
.notes-function-expression-slot .mm-mathfield,
.notes-function-expression-slot input{
  width:100%; min-width:0; padding:0; border:0; outline:0; box-shadow:none;
  color:var(--text); background:transparent; font-size:1.14rem; border-radius:0;
}
.notes-function-expression-slot .mm-mathfield:focus,
.notes-function-expression-slot .mm-mathfield:focus-within{ border:0; box-shadow:none; background:transparent; }
.notes-function-keyboard{
  width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center;
  color:var(--text-2); background:var(--card); border:1px solid var(--border); border-radius:8px;
  font-size:1rem;
}
.notes-function-keyboard:hover{ color:var(--primary); border-color:var(--primary); background:var(--primary-50); }
.notes-function-remove{
  width:32px; height:32px; flex:0 0 32px; display:grid; place-items:center;
  color:var(--muted); background:transparent; border:0; border-radius:8px;
}
.notes-function-remove:hover{ color:var(--danger); background:color-mix(in srgb, var(--danger) 10%, transparent); }
.notes-function-remove:disabled{ visibility:hidden; pointer-events:none; }
.notes-function-remove svg{ width:16px; height:16px; }
.notes-function-help{ margin:-5px 1px 0; color:var(--muted); font-size:.72rem; line-height:1.45; }
.notes-function-help code{ padding:1px 4px; color:var(--text-2); background:var(--surface-2); border-radius:4px; }
.notes-function-presets{ display:flex; flex-wrap:wrap; gap:6px; }
.notes-function-presets button{
  min-height:31px; padding:0 9px; color:var(--text-2); background:var(--surface-2);
  border:1px solid var(--border); border-radius:8px; font-size:.72rem; font-weight:700;
}
.notes-function-presets button:hover{ color:var(--primary); border-color:var(--primary); background:var(--primary-50); }
.notes-function-plot-fieldset{
  min-width:0; margin:0; padding:11px; border:1px solid var(--border); border-radius:12px;
}
.notes-function-plot-fieldset legend{ padding:0 5px; color:var(--text-2); font-size:.73rem; font-weight:800; }
.notes-inline-math{
  display:inline-block; min-width:0; width:auto; padding:0; border:0; outline:0;
  color:inherit; background:transparent; font-size:1em; vertical-align:-.12em; pointer-events:none;
}
.notes-function-domain-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.notes-function-domain-grid label, .notes-function-tangent-x{
  display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:7px;
  color:var(--muted); font-size:.72rem; font-weight:700;
}
.notes-function-domain-grid input, .notes-function-tangent-x input{
  min-width:0; width:100%; height:34px; padding:0 8px; color:var(--text);
  background:var(--surface-2); border:1px solid var(--border); border-radius:8px; font-weight:700;
}
.notes-function-options{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.notes-function-options label{ display:flex; align-items:center; gap:7px; color:var(--text-2); font-size:.75rem; font-weight:700; }
.notes-function-options input{ width:16px; height:16px; accent-color:var(--primary); }
.notes-function-tangent-x{ margin-top:10px; }
.notes-function-tangent-x.is-disabled{ opacity:.48; }
.notes-function-params label{
  display:grid; grid-template-columns:18px 1fr 40px; align-items:center; gap:7px; min-height:29px;
}
.notes-function-params input{ width:100%; accent-color:var(--primary); }
.notes-function-params output{ color:var(--text-2); font:800 .78rem/1 "Cambria Math", Georgia, serif; text-align:right; font-variant-numeric:tabular-nums; }
.notes-function-preview-panel{
  min-width:0; align-self:stretch; display:flex; flex-direction:column; gap:9px;
  padding:12px; background:var(--surface-2); border:1px solid var(--border); border-radius:14px;
}
.notes-function-preview-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.notes-function-preview-head strong{ font-size:.82rem; }
.notes-function-preview-head span{ color:var(--muted); font-size:.69rem; text-align:right; }
.notes-function-preview{
  display:block; width:100%; min-height:300px; flex:1 1 auto;
  background:var(--card); border-radius:11px;
}
.notes-function-error{ min-height:19px; margin:0 2px; color:var(--danger); font-size:.75rem; font-weight:700; }
.notes-function-error.is-ok{ color:var(--success, #16A34A); }
.notes-function-plot-actions{
  display:flex; justify-content:flex-end; gap:9px; padding:13px 18px;
  border-top:1px solid var(--border); background:var(--card);
}
.notes-function-plot-actions button{
  height:40px; padding:0 16px; border-radius:10px; font-weight:800; font-size:.82rem;
}
.notes-function-cancel{ color:var(--text-2); background:var(--surface-2); border:1px solid var(--border); }
.notes-function-submit{ display:inline-flex; align-items:center; gap:7px; color:#fff; background:var(--primary); }
.notes-function-submit:hover{ background:var(--primary-600); }
.notes-function-submit svg{ width:17px; height:17px; }

/* Tempimo rankenėlė ir veiksmų mygtukai – plūduriuojanti juostelė VIRŠ
   lauko, matoma tik esant hover/focus, kad ramybėje visiškai nesimatytų. */
.notes-math-toolbar{
  position:absolute; left:0; top:-26px;
  display:flex; align-items:center; gap:2px;
  opacity:0; pointer-events:none;
  transition:opacity .12s;
}
.notes-math-field-wrap:hover .notes-math-toolbar,
.notes-math-field-wrap:focus-within .notes-math-toolbar,
.notes-math-field-wrap.is-dragging .notes-math-toolbar{
  opacity:1; pointer-events:auto;
}
.notes-math-drag{
  width:22px; height:22px; border-radius:6px; cursor:grab;
  display:flex; align-items:center; justify-content:center;
  color:#fff; background:var(--primary);
}
.notes-math-drag:active{ cursor:grabbing; }
.notes-math-drag svg{ width:13px; height:13px; }
.notes-math-actions{ display:flex; gap:2px; }
.notes-math-actions button{
  width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center;
  color:var(--text-2); background:var(--card); border:1px solid var(--border);
}
.notes-math-actions button:hover{ background:var(--surface-2); color:var(--text); }
.notes-math-actions button svg{ width:13px; height:13px; }

/* --------------------- 4 fono variantai (nekinta) --------------------- */
.notes-bg-grid{
  background-color:var(--card);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M120 0H0V120' fill='none' stroke='%234F46E5' stroke-opacity='0.16' stroke-width='1.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M24 0H0V24' fill='none' stroke='%23D7DEEA' stroke-width='1'/%3E%3C/svg%3E");
  background-size:120px 120px, 24px 24px;
}
.notes-bg-dots{
  background-color:var(--card);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='2' cy='2' r='1.5' fill='%2364748B' fill-opacity='0.4'/%3E%3C/svg%3E");
  background-size:22px 22px;
}
.notes-bg-lines{
  background-color:var(--card);
  background-image:
    linear-gradient(to right, transparent 0 47px, rgba(239,68,68,.32) 47px 48px, transparent 48px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='36'%3E%3Cpath d='M0 35.5H40' fill='none' stroke='%2364748B' stroke-opacity='0.32' stroke-width='1'/%3E%3C/svg%3E");
  background-size:100% 100%, 40px 36px;
}
.notes-bg-iso{
  background-color:var(--card);
  background-image:
    repeating-linear-gradient(30deg, rgba(79,70,229,.20) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(150deg, rgba(79,70,229,.20) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(79,70,229,.20) 0 1px, transparent 1px 40px);
}
:root[data-theme="dark"] .notes-bg-grid{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M120 0H0V120' fill='none' stroke='%236366F1' stroke-opacity='0.30' stroke-width='1.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M24 0H0V24' fill='none' stroke='%232E3C57' stroke-width='1'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .notes-bg-dots{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='2' cy='2' r='1.5' fill='%238593A8' fill-opacity='0.5'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .notes-bg-lines{
  background-image:
    linear-gradient(to right, transparent 0 47px, rgba(248,113,113,.30) 47px 48px, transparent 48px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='36'%3E%3Cpath d='M0 35.5H40' fill='none' stroke='%238593A8' stroke-opacity='0.35' stroke-width='1'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .notes-bg-iso{
  background-image:
    repeating-linear-gradient(30deg, rgba(129,140,248,.22) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(150deg, rgba(129,140,248,.22) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(129,140,248,.22) 0 1px, transparent 1px 40px);
}
.notes-bg-opt[data-bg="grid"] .notes-bg-swatch-preview{ background-color:var(--card); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M12 0H0V12' fill='none' stroke='%23D7DEEA' stroke-width='1'/%3E%3C/svg%3E"); background-size:12px 12px; }
.notes-bg-opt[data-bg="dots"] .notes-bg-swatch-preview{ background-color:var(--card); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Ccircle cx='2' cy='2' r='1.4' fill='%2364748B' fill-opacity='0.45'/%3E%3C/svg%3E"); background-size:11px 11px; }
.notes-bg-opt[data-bg="lines"] .notes-bg-swatch-preview{ background-color:var(--card); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='11'%3E%3Cpath d='M0 10.5H20' fill='none' stroke='%2364748B' stroke-opacity='0.4' stroke-width='1'/%3E%3C/svg%3E"); background-size:20px 11px; }
.notes-bg-opt[data-bg="iso"] .notes-bg-swatch-preview{ background-color:var(--card); background-image:
    repeating-linear-gradient(30deg, rgba(79,70,229,.28) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(150deg, rgba(79,70,229,.28) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, rgba(79,70,229,.28) 0 1px, transparent 1px 12px); }
:root[data-theme="dark"] .notes-bg-opt[data-bg="grid"] .notes-bg-swatch-preview{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M12 0H0V12' fill='none' stroke='%232E3C57' stroke-width='1'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .notes-bg-opt[data-bg="dots"] .notes-bg-swatch-preview{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Ccircle cx='2' cy='2' r='1.4' fill='%238593A8' fill-opacity='0.55'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .notes-bg-opt[data-bg="lines"] .notes-bg-swatch-preview{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='11'%3E%3Cpath d='M0 10.5H20' fill='none' stroke='%238593A8' stroke-opacity='0.45' stroke-width='1'/%3E%3C/svg%3E"); }

/* --------------------------- kontekstinis meniu --------------------------- */
.notes-context-menu{
  position:fixed; z-index:100;
  display:flex; flex-direction:column; gap:1px; padding:6px;
  min-width:min(220px, calc(100vw - 16px));
  max-width:calc(100vw - 16px);
  max-height:calc(100vh - 16px);
  max-height:calc(100dvh - 16px);
  overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain;
  scrollbar-gutter:stable; touch-action:pan-y; box-sizing:border-box;
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-sm);
  box-shadow:var(--shadow-lg);
}
.notes-context-menu[hidden]{ display:none; }
.notes-context-menu button{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:8px; font-weight:600; font-size:.87rem; color:var(--text);
  text-align:left; white-space:nowrap;
}
.notes-context-menu button:hover{ background:var(--surface-2); }
.notes-context-menu button[hidden]{ display:none; }
.notes-context-sep[hidden]{ display:none; }
.notes-context-menu button:focus-visible{
  outline:3px solid color-mix(in srgb, var(--primary) 38%, transparent);
  outline-offset:-2px; background:var(--surface-2);
}
.notes-context-menu button svg{ width:17px; height:17px; color:var(--text-2); flex-shrink:0; }
.notes-context-menu button.notes-context-danger{ color:var(--danger); }
.notes-context-menu button.notes-context-danger svg{ color:var(--danger); }
.notes-context-menu button.notes-context-danger:hover{ background:rgba(239,68,68,.1); }
.notes-context-sep{ height:1px; margin:5px 2px; background:var(--border); }

@media (pointer:coarse){
  .notes-context-menu button{ min-height:44px; }
}

.notes-sr-only{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}

.notes-tool:focus-visible,
.notes-dropdown button:focus-visible,
.notes-bg-btn:focus-visible{
  outline:3px solid color-mix(in srgb, var(--primary) 38%, transparent);
  outline-offset:2px;
}

/* --------------------------------- spausdinimas / PDF --------------------------------- */
.notes-print-area{ display:none; }
@media print{
  body *{ visibility:hidden; }
  .notes-print-area, .notes-print-area *{ visibility:visible; }
  .notes-print-area{
    display:block; position:absolute; inset:0; margin:0; padding:0;
  }
  .notes-print-page{
    width:210mm; height:297mm;
    display:flex; align-items:flex-start; justify-content:center;
    break-after:page;
  }
  .notes-print-page img{ width:210mm; height:297mm; object-fit:contain; }
  @page{ size:A4; margin:0; }
}

@media (max-width:720px){
  .notes-wrap{ padding:12px 12px 24px; height:calc(100vh - 56px); }
  .notes-toolbar{ gap:8px; }
  .notes-group{ padding-right:8px; }
  .notes-range{ width:64px; }
  .notes-btn-label{ display:none; }
  .notes-function-plot-dialog{ padding:6px; }
  .notes-function-plot-form{ width:calc(100vw - 12px); max-height:calc(100dvh - 12px); border-radius:14px; }
  .notes-function-plot-header{ padding:12px; }
  .notes-function-plot-header small{ display:none; }
  .notes-function-plot-body{ grid-template-columns:1fr; padding:12px; gap:12px; }
  .notes-function-preview-panel{ min-height:330px; }
  .notes-function-preview{ min-height:280px; }
  .notes-function-plot-actions{ position:sticky; bottom:0; padding:10px 12px; }
}

@media (pointer:coarse){
  .notes-tool{ min-width:44px; width:44px; height:44px; }
  .notes-shapes-picker .notes-tool{ min-width:44px; }
  .notes-dropdown button{ min-height:44px; }
  .notes-function-presets button{ min-height:40px; }
  .notes-function-domain-grid input, .notes-function-tangent-x input{ height:40px; }
}

@media (prefers-reduced-motion:reduce){
  .notes-tool, .notes-swatch, .notes-math-toolbar,
  .notes-math-field-wrap::before{ transition:none; }
}