:root {
  color-scheme: light;
}
html.dark {
  color-scheme: dark;
}
body {
  font-family: 'Plus Jakarta Sans', 'Noto Sans Bengali', 'Cairo', 'Noto Sans Devanagari', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.tabular-nums {
  font-variant-numeric: tabular-nums;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
/* Prevent iOS auto-zoom on form inputs by ensuring >= 16px font-size */
input, select, textarea {
  font-size: 16px;
}
@media (min-width: 640px) {
  input, select, textarea {
    font-size: 14px;
  }
}
/* Interactive bounding box overlay on image - Clean 90-degree rectangular */
.canvas-text-node {
  position: absolute;
  box-sizing: border-box;
  border: 1.5px dashed rgba(99, 102, 241, 0.75);
  border-radius: 0px;
  cursor: pointer;
  user-select: none;
  touch-action: none;
  transition: border-color 100ms ease, box-shadow 100ms ease;
}
.canvas-text-node:hover {
  border-color: #6366f1;
}
.canvas-text-node.is-selected {
  border: 2px solid #4f46e5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.25);
  z-index: 25;
}
.guides-hidden .canvas-text-node:not(.is-selected) {
  border-color: transparent;
}
/* Clean square corner handle for resizing text & box (no circular dot) */
.corner-resize-handle {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  border-radius: 0px;
  background: #4f46e5;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  cursor: nwse-resize;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 35;
  touch-action: none;
}
.canvas-text-node.is-selected .corner-resize-handle {
  display: flex;
}
/* Clean square move handle at top-left (no circular dot) */
.corner-move-handle {
  position: absolute;
  left: -7px;
  top: -7px;
  width: 14px;
  height: 14px;
  border-radius: 0px;
  background: #0f172a;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  cursor: move;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 35;
  touch-action: none;
}
.canvas-text-node.is-selected .corner-move-handle {
  display: flex;
}
.color-swatch-btn {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  flex-shrink: 0;
  cursor: pointer;
  border: 2px solid rgba(148, 163, 184, 0.45);
  transition: transform 100ms ease, box-shadow 100ms ease;
}
.color-swatch-btn:hover {
  transform: scale(1.12);
}
.color-swatch-btn.is-active {
  border-color: #4f46e5;
  box-shadow: 0 0 0 2.5px rgba(79, 70, 229, 0.45);
  transform: scale(1.15);
}
.font-pill-btn {
  padding: 5px 11px;
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  border: 1px solid rgba(148, 163, 184, 0.35);
  transition: all 100ms ease;
}
.font-pill-btn.is-active {
  background: #4f46e5;
  color: #ffffff;
  border-color: #4f46e5;
}

/* ---- additions: easier tapping of tiny text boxes on big images ---- */
.canvas-text-node {
  min-width: 14px;
  min-height: 14px;
}
@media (prefers-reduced-motion: reduce) {
  .canvas-text-node,
  .color-swatch-btn,
  .font-pill-btn {
    transition: none;
  }
}

/* ---- Hide Boxes: hides EVERY outline and handle (also the selected one) ---- */
.guides-hidden .canvas-text-node,
.guides-hidden .canvas-text-node.is-selected {
  border-color: transparent !important;
  box-shadow: none !important;
}
.guides-hidden .corner-resize-handle,
.guides-hidden .corner-move-handle {
  display: none !important;
}

/* ---- Draw & Detect: full-screen workspace (never blocks the page controls) ---- */
.draw-bar { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; background: #fffbeb; border-top: 1px solid #fcd34d; color: #78350f; font-size: 12px; }
.draw-bar[hidden] { display: none; }
html.dark .draw-bar { background: #2a2108; border-color: #92400e; color: #fde68a; }
.draw-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.draw-controls { flex-wrap: nowrap; justify-content: space-between; }
.draw-bar-title { font-weight: 800; white-space: nowrap; }
.draw-status { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.9; }
.draw-btn { min-width: 36px; height: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid #d97706; background: #ffffff; color: #78350f; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; touch-action: manipulation; }
html.dark .draw-btn { background: #1c1917; color: #fde68a; }
.draw-btn.is-on { background: #d97706; color: #ffffff; }
.draw-btn-done { background: #4f46e5; border-color: #4f46e5; color: #ffffff; }
html.dark .draw-btn-done { background: #4f46e5; color: #ffffff; }
.draw-btn-erase { color: #be123c; border-color: #fda4af; }
.draw-zoom-label { min-width: 44px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.draw-input { flex: 1; min-width: 0; height: 36px; padding: 0 10px; border-radius: 9px; border: 2px solid #6366f1; background: #ffffff; color: #0f172a; font-weight: 700; }
html.dark .draw-input { background: #0f172a; color: #ffffff; }
#btnDrawDetect.is-on { background: #d97706; color: #ffffff; }
#btnDrawDetect { border: 1px solid #d97706; color: #b45309; background: transparent; }
#btnDrawDetect:hover { background: #fffbeb; }
html.dark #btnDrawDetect { color: #fcd34d; }
html.dark #btnDrawDetect:hover { background: rgba(217, 119, 6, 0.15); }
#btnDrawDetect.is-on, html.dark #btnDrawDetect.is-on { background: #d97706; color: #ffffff; }

body.draw-open { overflow: hidden; }
body.draw-open #stageScroller {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: var(--draw-bar-h, 150px);
  z-index: 60;
  display: block;
  min-height: 0;
  margin: 0;
  padding: 8px;
  overflow: auto;
  overscroll-behavior: contain;
  background: #0b1020;
}
body.draw-open #interactiveStage { display: block; width: max-content; max-width: none; margin: 0 auto; }
body.draw-open #screenshotCanvas { max-width: none; }
body.draw-open .canvas-text-node { pointer-events: none; }
body.draw-open .corner-resize-handle,
body.draw-open .corner-move-handle { display: none !important; }
body.draw-open #drawModeBar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 61;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
}
body.draw-open #toastContainer { z-index: 80; bottom: calc(var(--draw-bar-h, 150px) + 10px); }
body.draw-open #btnFloatingPencilToggle { display: none !important; }

.draw-layer { position: absolute; inset: 0; z-index: 40; cursor: crosshair; touch-action: none; -webkit-user-select: none; user-select: none; }
.draw-layer.is-move { cursor: grab; }
.draw-rect { position: absolute; border: 2px dashed #f59e0b; background: rgba(245, 158, 11, 0.22); pointer-events: none; }

/* Toasts never wider than the phone */
#toastContainer { max-width: calc(100vw - 2rem); }
#toastContainer > div { max-width: 100%; overflow-wrap: anywhere; }
html, body { max-width: 100%; overflow-x: clip; }

/* --- Missing utility classes (added so every button/label renders as designed) --- */
.mt-2{margin-top:.5rem}
.mt-3{margin-top:.75rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.min-w-0{min-width:0}
.shadow-xs{box-shadow:0 1px 2px 0 rgb(0 0 0/.05)}
.shadow-2xs{box-shadow:0 1px rgb(0 0 0/.05)}
.border-amber-500{--tw-border-opacity:1;border-color:rgb(245 158 11/var(--tw-border-opacity,1))}
.text-amber-700{--tw-text-opacity:1;color:rgb(180 83 9/var(--tw-text-opacity,1))}
.hover\:bg-amber-50:hover{--tw-bg-opacity:1;background-color:rgb(255 251 235/var(--tw-bg-opacity,1))}
.dark\:border-amber-500:is(.dark *){--tw-border-opacity:1;border-color:rgb(245 158 11/var(--tw-border-opacity,1))}
.dark\:text-amber-300:is(.dark *){--tw-text-opacity:1;color:rgb(252 211 77/var(--tw-text-opacity,1))}
.dark\:hover\:bg-amber-950\/40:hover:is(.dark *){background-color:rgba(69,26,3,.4)}
@media (min-width:640px){.sm\:text-xs{font-size:.75rem;line-height:1rem}}