/* ─────────── Brand mark + signature ───────────
   Cube icon in the bottom-left (decorative, pointer-events: none) and a
   small bottom-right signature link. Both toggle off with Tab along with
   the toolbars. */
/* Launcher "waffle" no topo-esquerdo (antes do ☰) — abre um menu em GRADE
   (estilo Google) pra trocar de ferramenta. Quadradinhos (não pontos) pra NÃO
   confundir com o ⠿ de arrastar. Some com Tab. */
#brand-logo {
  position: fixed;
  top: 16px; left: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  color: rgba(255,255,255,0.62);
  background: var(--bar, rgba(30,28,26,0.72));
  border: 1px solid var(--bar-line, rgba(255,255,255,0.09));
  border-radius: 11px;
  cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  pointer-events: auto;
  transition: color 0.15s, border-color 0.15s, transform 0.12s;
  z-index: 40;
}
#brand-logo:hover { color: var(--pink, #ff2d6e); border-color: var(--pink, #ff2d6e); transform: translateY(-1px); }
#brand-logo svg { display: block; }

/* Menu em grade estilo Google (o botão Zero ao Cubo vive dentro, no topo) */
#aura-launcher {
  position: fixed;
  top: 70px; left: 14px;
  background: #232120;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.55);
  z-index: 60;
  animation: alPop 0.16s ease;
}
#aura-launcher.hidden { display: none; }
@keyframes alPop { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
.al-brand { display:flex; align-items:center; gap:8px; padding:7px 8px 9px; border-radius:10px; text-decoration:none; color:rgba(255,255,255,0.9); border-bottom:1px solid rgba(255,255,255,0.1); margin-bottom:6px; transition:color 0.12s; }
.al-brand:hover { color:var(--pink,#ff2d6e); }
.al-brand span { font-family:'Fredoka','Poppins',sans-serif; font-weight:700; font-size:0.95rem; line-height:1; }
.al-brand sup { color:var(--pink,#ff2d6e); font-size:0.55em; }
.al-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.al-tile { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 78px; padding: 10px 6px; border-radius: 14px; text-decoration: none; transition: background 0.12s; }
.al-tile:hover { background: rgba(255,255,255,0.08); }
.al-ic { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.55rem; box-shadow: 0 3px 8px rgba(0,0,0,0.35); }
.ic-sketch { background: linear-gradient(135deg,#ff5e8a,#d11857); }
.ic-canvas { background: linear-gradient(135deg,#7c5cff,#3a8dff); }
.ic-hub    { background: linear-gradient(135deg,#ffb84d,#ff6b35); }
.al-lbl { font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.85); text-align: center; line-height: 1.05; }
.al-tile.current { background: rgba(255,255,255,0.06); cursor: default; }
.al-tile.current .al-lbl { color: var(--pink, #ff2d6e); }
#brand-sig {
  position: fixed;
  bottom: 8px; right: 12px;
  font-family: 'DKLemonYellowSun', 'Fredoka', 'Poppins', sans-serif;
  font-size: 17px;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  z-index: 5;
  pointer-events: auto;
}
#brand-sig:hover { color: var(--pink, #ff2d6e); }

/* Stage, canvas stack, cursor */
.stage {
  position: fixed; inset: 0;
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 32px 32px;
  overflow: hidden;
}
.stage.pan #canvas-event { cursor: grab !important; }
.stage.pan-active #canvas-event { cursor: grabbing !important; }
/* Hold-space pan: show the hand cursor EVERYWHERE (cursor inherits), so the
   dark margins around the canvas show it too — you can grab anywhere. */
.stage.pan { cursor: grab; }
.stage.pan-active { cursor: grabbing; }
/* While panning, hide the brush-shape cursor so only the hand is visible. */
.stage.pan #cursor, .stage.pan-active #cursor { opacity: 0 !important; }
/* Ctrl+Space (ready) and Ctrl+Space+drag (active): horizontal-arrow cursor
   so the user can tell at a glance that a left-right drag will zoom rather
   than pan. */
.stage.zoom-ready #canvas-event,
.stage.zoom-drag  #canvas-event { cursor: ew-resize !important; }
.stage.zoom-ready #cursor,
.stage.zoom-drag  #cursor { opacity: 0 !important; }

/* Tool cursors — select draws a marquee (crosshair), zoom scrubs (ew-resize).
   Both hide the brush-shape cursor. */
.stage.tool-select #canvas-event { cursor: crosshair !important; }
.stage.tool-zoom   #canvas-event { cursor: ew-resize !important; }
.stage.tool-select #cursor,
.stage.tool-zoom   #cursor { opacity: 0 !important; }

/* Rotate tool (R): rotate the view. A circular-arrow cursor makes the mode
   unmistakable. Declared AFTER the tool cursors so it wins, and set on the
   whole stage so grabbing the empty grid around the canvas rotates too. */
.stage.tool-rotate,
.stage.tool-rotate #canvas-event,
.stage.rotate-active,
.stage.rotate-active #canvas-event {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><g stroke="black" stroke-width="3.6"><path d="M21 12a9 9 0 1 1-2.64-6.36"/><path d="M21 3v6h-6"/></g><g stroke="white" stroke-width="2"><path d="M21 12a9 9 0 1 1-2.64-6.36"/><path d="M21 3v6h-6"/></g></svg>') 15 15, grab !important;
}
.stage.tool-rotate #cursor,
.stage.rotate-active #cursor { opacity: 0 !important; }
/* While the rotate tool is active, kill the browser's own touch/pen gestures
   on the stage background too — otherwise a pen drag out on the grid gets
   hijacked as a scroll and the pointer is cancelled mid-rotation (it "locks").
   Scoped to the rotate tool so popups/scroll areas behave normally otherwise. */
.stage.tool-rotate { touch-action: none; }

/* ─────────── Selection marquee (marching ants) ───────────
   An SVG overlay (child of #canvas-wrap) sized 100% with a canvas-space
   viewBox, so rect AND lasso polygons track pan/zoom automatically. Two
   stroked polygons (black under, white dashed over) give the marching-ants
   look; non-scaling-stroke keeps the line a constant screen width. */
#sel-overlay {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 41;
  overflow: visible;
}
#sel-overlay.hidden { display: none; }
#sel-overlay path {
  fill: none;
  vector-effect: non-scaling-stroke;
}
#sel-overlay .sel-ants-b { stroke: rgba(0,0,0,0.85); stroke-width: 1.5px; }
#sel-overlay .sel-ants-w {
  stroke: #fff;
  stroke-width: 1.5px;
  stroke-dasharray: 5 5;
  animation: antsMove 0.5s linear infinite;
}
@keyframes antsMove { to { stroke-dashoffset: -10; } }

/* Floating action bar at the bottom of an active selection. Child of
   #canvas-wrap (tracks pan/zoom); fixed screen size. */
#sel-actions {
  position: absolute;
  transform: translate(-50%, 10px);
  display: flex;
  gap: 2px;
  z-index: 47;
  background: var(--bar);
  border: 1px solid var(--bar-line);
  border-radius: 10px;
  padding: 3px;
  box-shadow: var(--shadow-lg, 0 16px 48px rgba(0,0,0,0.6));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  white-space: nowrap;
}
#sel-actions.hidden { display: none; }
.sel-act {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: none; border-radius: 7px;
  background: transparent; color: var(--ink-dim);
  cursor: pointer; position: relative;
}
.sel-act[data-act="subtract"].active { color: var(--pink); background: rgba(255,45,110,0.18); }
.sel-act:hover { background: rgba(255,255,255,0.08); color: var(--ink); }
.sel-act[data-act="transform"]:hover { color: var(--pink); }
.sel-act[data-act="delete"]:hover { color: #fca5a5; background: rgba(239,68,68,0.15); }
/* Hover hint bubble teaching the keyboard shortcut. */
.sel-act::after {
  content: attr(data-hint);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #000;
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 6px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}
.sel-act:hover::after { opacity: 0.92; }

/* ─────────── Free-transform overlay ─────────── */
#xform-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 46;
}
#xform-layer.hidden { display: none; }
#xform-float {
  position: absolute;
  pointer-events: none;
  transform-origin: center;
}
#xform-box {
  position: absolute;
  pointer-events: auto;
  transform-origin: center;
  border: 1px solid var(--pink, #ff2d6e);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
  cursor: move;
  touch-action: none;
}
.xform-handle {
  position: absolute;
  width: 14px; height: 14px;
  background: #fff;
  border: 1.5px solid var(--pink, #ff2d6e);
  border-radius: 2px;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  touch-action: none;
}
.xform-nw { left: 0;    top: 0;    cursor: nwse-resize; }
.xform-ne { left: 100%; top: 0;    cursor: nesw-resize; }
.xform-sw { left: 0;    top: 100%; cursor: nesw-resize; }
.xform-se { left: 100%; top: 100%; cursor: nwse-resize; }
.xform-rot {
  left: 50%; top: -26px;
  border-radius: 50%;
  cursor: grab;
}
#xform-actions {
  position: fixed;
  top: 70px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 8px;
  z-index: 60;
  background: var(--bar);
  border: 1px solid var(--bar-line);
  border-radius: 999px;
  padding: 6px 8px;
  box-shadow: var(--shadow-lg, 0 12px 40px rgba(0,0,0,0.6));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
#xform-actions.hidden { display: none; }
#xform-actions button {
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  transition: filter 0.12s, background 0.12s;
}
#xform-apply  { background: var(--pink, #ff2d6e); color: #fff; }
#xform-apply:hover { filter: brightness(1.1); }
#xform-cancel { background: rgba(255,255,255,0.1); color: var(--ink); }
#xform-cancel:hover { background: rgba(255,255,255,0.18); }

#canvas-wrap {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
  /* Contain layer mix-blend-mode to the canvas stack so a "multiply" layer
     blends against the layers + white canvas-bg below it, never the page. */
  isolation: isolate;
}
#canvas-bg {
  position: absolute;
  top: 0; left: 0;
  background: #ffffff;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.3);
  pointer-events: none;
}
#canvas-wrap > canvas {
  position: absolute;
  top: 0; left: 0;
  background: transparent;
  pointer-events: none;
  display: block;
}

/* Display-quality switch toggled by applyViewport based on
   `total = baseScale × scale` (display pixels per canvas pixel).
   - Default: browser-quality bilinear/lanczos — smooth for downscale and
     mild upscale where every canvas pixel doesn't yet land on a single
     display pixel.
   - .zoom-pixelated (≥2× upscale): nearest-neighbor so the canvas's real
     pixels become visible without any cross-pixel blur. Firefox also gets
     the crisp-edges alias; both browsers end up sharp. */
#canvas-bg,
#canvas-wrap > canvas {
  image-rendering: auto;
  image-rendering: high-quality;
  image-rendering: -webkit-optimize-contrast;
}
#canvas-wrap.zoom-pixelated #canvas-bg,
#canvas-wrap.zoom-pixelated > canvas {
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

/* Pixel grid overlay — only shows at very high zoom (set by JS).
   Lines are 1 DISPLAY pixel thick regardless of zoom level (JS computes the
   gradient stops to compensate for the canvas-wrap CSS scale). */
#pixel-grid {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 40;          /* above every layer canvas + the GL canvas */
  opacity: 0;
  background-repeat: repeat;
  background-size: 1px 1px;
  transition: opacity 0.12s;
}
#canvas-wrap.show-pixel-grid #pixel-grid { opacity: 0.55; }
#canvas-event {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  cursor: none;
  touch-action: none;
  background: transparent;
}

#cursor {
  position: absolute;
  left: 0; top: 0;
  border: 1.5px solid rgba(0, 0, 0, 0.55);
  outline: 1px solid rgba(255, 255, 255, 0.75);
  background: transparent;
  border-radius: 50%;
  pointer-events: none;
  z-index: 50;
  will-change: transform;
  transition: width 0.08s, height 0.08s, opacity 0.12s;
  opacity: 0;
}
#cursor.visible { opacity: 1; }
/* Shape mode: the background image is the brush silhouette outline, so we
   drop the CSS circle border and add a dark halo so the white outline reads
   on any canvas color. */
#cursor.shape {
  border: none;
  outline: none;
  border-radius: 0;
  background-color: transparent;
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.95)) drop-shadow(0 0 1px rgba(0,0,0,0.55));
}
#cursor.eraser {
  border-color: rgba(160, 160, 160, 0.9);
  outline-color: rgba(40, 40, 40, 0.8);
  background: rgba(255, 255, 255, 0.25);
}

/* ═══════════════════════════════════════════════════════════
   Reference board (PureRef-style) — behind the canvas, visible in
   the dark margins. Mirrors the canvas transform (pan/zoom/rotate)
   via a scale(total) transform, so item coords are canvas pixels.
   ═══════════════════════════════════════════════════════════ */
#ref-board {
  position: absolute;
  top: 50%; left: 50%;
  /* width/height set to CW×CH px by syncRefBoard; the scale(total) transform
     then matches #canvas-wrap exactly. Items use canvas-px coords. */
  transform-origin: 50% 50%;
  pointer-events: none;              /* items opt back in; never blocks drawing */
  overflow: visible;
  will-change: transform;
}
#ref-pen-svg {
  position: absolute;
  left: 0; top: 0;
  overflow: visible;                 /* strokes can extend into the dark margins */
  pointer-events: none;
  z-index: 99999;                    /* annotations sit above ref images */
}
.ref-item {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
}
.ref-item:active { cursor: grabbing; }
.ref-image img.ref-img {
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  border-radius: 2px;
}
.ref-item.ref-note {
  background: #2b2825;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  overflow: hidden;
}
.ref-note-body {
  width: 100%; height: 100%;
  padding: 8px 11px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 500;
  font-size: 34px;                   /* canvas px → scales with the board */
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.92);
  outline: none;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
}
.ref-item.ref-note:not(.editing) .ref-note-body { pointer-events: none; }
.ref-item.ref-note.editing .ref-note-body { background: rgba(0, 0, 0, 0.2); }
.ref-handle {
  position: absolute;
  right: 0; bottom: 0;
  width: 18px; height: 18px;
  background: var(--pink);
  border: 2px solid #fff;
  border-radius: 50%;
  pointer-events: auto;
  cursor: nwse-resize;
  touch-action: none;
  transform: scale(var(--ref-inv, 1));   /* constant on-screen size */
  transform-origin: bottom right;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
/* Rotation handle — top-right corner, distinct blue, constant on-screen size */
.ref-rotate {
  position: absolute;
  top: 0; right: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #3b82f6;
  color: #3b82f6;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; line-height: 1;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  transform: scale(var(--ref-inv, 1));
  transform-origin: top right;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.ref-rotate::before { content: '↻'; }
.ref-item:active .ref-rotate { cursor: grabbing; }

/* Full-stage pen capture surface — only active while in pen mode */
#ref-pen-capture {
  position: fixed;
  inset: 0;
  z-index: 20;                       /* above canvas, below toolbars/zoom-bar */
  pointer-events: none;
  touch-action: none;
  cursor: crosshair;
}

/* Pen mode toolbar (top center, below the toast strip) */
#ref-pen-bar {
  position: fixed;
  top: 58px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  background: var(--bar);
  border: 1px solid var(--bar-line);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.78rem; font-weight: 700;
  color: var(--ink);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  z-index: 35;
}
#ref-pen-bar.hidden { display: none; }
.rpb-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  background: #000;
}
#ref-pen-bar button {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: none; color: var(--ink);
  font-weight: 800; font-size: 1rem; line-height: 1;
  cursor: pointer;
}
#ref-pen-bar button:hover { background: rgba(255, 255, 255, 0.18); }
#ref-pen-bar #ref-pen-exit {
  width: auto; padding: 0 12px;
  font-size: 0.72rem; font-weight: 700;
  color: var(--pink);
  background: rgba(255, 45, 110, 0.12);
}
#ref-pen-size { min-width: 16px; text-align: center; }

/* Reference board context menu */
#ref-menu {
  position: fixed;
  background: var(--bar);
  border: 1px solid var(--bar-line);
  border-radius: 14px;
  padding: 6px;
  width: 210px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-lg);
  z-index: 47;
}
#ref-menu.hidden { display: none; }
.ref-menu-op {
  display: flex; align-items: center; gap: 8px;
  padding: 0.4rem 0.75rem;
}
.ref-menu-op span {
  font-size: 0.78rem; font-weight: 600;
  color: var(--ink-dim);
  white-space: nowrap;
}
.ref-menu-op input[type="range"] { flex: 1; min-width: 60px; }

/* Pen-bar eraser toggle (active = erasing strokes) */
#ref-pen-bar #ref-pen-erase { display: flex; align-items: center; justify-content: center; padding: 0; }
#ref-pen-bar #ref-pen-erase.active {
  background: rgba(255, 45, 110, 0.18);
  color: var(--pink);
}

/* Side hints in the dark margins — subtle, clickable call-to-action.
   Centred (both axes) at the point set by JS via translate(-50%,-50%). */
.ref-hint {
  position: fixed;
  transform: translate(-50%, -50%);    /* left/top (centre) set by JS */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 138px;
  padding: 11px 12px;
  text-align: center;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.025);
  color: var(--ink-dim);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.18s, background 0.18s, border-color 0.18s;
  z-index: 4;                          /* above the grid, below the canvas/toolbars */
  -webkit-user-select: none; user-select: none;
}
.ref-hint:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 45, 110, 0.5);
}
.ref-hint.hidden { display: none; }
.ref-hint-ic { width: 26px; height: 26px; color: var(--pink); opacity: 0.9; }
.ref-hint-title {
  font-family: 'Fredoka', 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 0.74rem;
  color: var(--ink);
}
.ref-hint-sub { font-size: 0.6rem; line-height: 1.3; }
.ref-hint-x {
  position: absolute;
  top: -7px; right: -7px;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid var(--bar-line);
  background: var(--bar);
  color: var(--ink-dim);
  font-size: 13px; font-weight: 700; line-height: 1;
  cursor: pointer;
  display: none;                       /* shown on hover */
  align-items: center; justify-content: center;
}
.ref-hint:hover .ref-hint-x { display: flex; }
.ref-hint-x:hover { color: var(--ink); border-color: var(--pink); }

/* Study theme / objective — pinned top-right, below the tools toolbar */
#study-theme {
  position: fixed;
  top: 64px; right: 16px;   /* applyViewport reposiciona pro canto sup-direito do canvas */
  width: 240px; max-width: 44vw;
  padding: 3px 8px;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--ink-dim);   /* discreto: meio cinza mesmo escrito, como um título */
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.01em;
  outline: none;
  z-index: 29;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#study-theme::placeholder { color: rgba(255, 255, 255, 0.25); font-weight: 500; }
#study-theme:hover { color: var(--ink); background: rgba(28, 26, 24, 0.7); }
#study-theme:focus { color: var(--ink); background: var(--bar); border-color: var(--bar-line); text-align: left; }