/*
  Extracted from Combiner.html.
  Main styles for the image/PDF combiner website.
*/

:root {
  --bg: #f7f2e8;
  --card: #fffaf1;
  --border: #e2cfaa;
  --brown-d: #4b3621;
  --accent: #d4a373;
  --pdf-sidebar-width: 140px;
  --marker-panel-width: 190px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Tajawal', sans-serif;
  background: #f5efe4;
  text-align: center;
  font-size: 18px;
  overflow-x: hidden;
  position: relative;
  isolation: isolate;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' fill='%23f5efe4'/%3E%3Cpolygon points='60,26 71,36 84,36 84,49 94,60 84,71 84,84 71,84 60,94 49,84 36,84 36,71 26,60 36,49 36,36 49,36' fill='none' stroke='%234b3621' stroke-opacity='.22' stroke-width='1.5' stroke-linejoin='round'/%3E%3Ccircle cx='60' cy='60' r='10' fill='none' stroke='%234b3621' stroke-opacity='.18' stroke-width='1'/%3E%3Cpolygon points='49,0 49,36 60,26 71,36 71,0' fill='none' stroke='%234b3621' stroke-opacity='.22' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpolygon points='120,49 84,49 94,60 84,71 120,71' fill='none' stroke='%234b3621' stroke-opacity='.22' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpolygon points='71,120 71,84 60,94 49,84 49,120' fill='none' stroke='%234b3621' stroke-opacity='.22' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpolygon points='0,71 36,71 26,60 36,49 0,49' fill='none' stroke='%234b3621' stroke-opacity='.22' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpolygon points='0,0 49,0 49,36 36,36 36,49 0,49' fill='none' stroke='%234b3621' stroke-opacity='.22' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpolygon points='120,0 120,49 84,49 84,36 71,36 71,0' fill='none' stroke='%234b3621' stroke-opacity='.22' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpolygon points='120,120 71,120 71,84 84,84 84,71 120,71' fill='none' stroke='%234b3621' stroke-opacity='.22' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpolygon points='0,120 0,71 36,71 36,84 49,84 49,120' fill='none' stroke='%234b3621' stroke-opacity='.22' stroke-width='1.5' stroke-linejoin='round'/%3E%3Ccircle cx='0' cy='0' r='7' fill='none' stroke='%234b3621' stroke-opacity='.15' stroke-width='.8'/%3E%3Ccircle cx='120' cy='0' r='7' fill='none' stroke='%234b3621' stroke-opacity='.15' stroke-width='.8'/%3E%3Ccircle cx='0' cy='120' r='7' fill='none' stroke='%234b3621' stroke-opacity='.15' stroke-width='.8'/%3E%3Ccircle cx='120' cy='120' r='7' fill='none' stroke='%234b3621' stroke-opacity='.15' stroke-width='.8'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 120px 120px;
  opacity: 1;
}

header {
  background: linear-gradient(135deg, rgba(75,54,33,.98), rgba(107,79,49,.96));
  color: var(--accent);
  padding: 14px 16px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  box-shadow: 0 6px 18px rgba(75,54,33,.16);
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  direction: ltr;
}

.discord-link,
.insta-link,
.lang-toggle,
.help-toggle {
  color: var(--accent);
  text-decoration: none;
  font-size: 1.02rem;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  border: 1px solid rgba(212,163,115,.35);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    linear-gradient(135deg, #5a4027, #3f2d1c);
  padding: 11px 18px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.05);
  cursor: pointer;
  user-select: none;
  font-family: 'Tajawal', sans-serif;
  font-weight: 700;
  letter-spacing: .2px;
  gap: 8px;
}

.discord-link:hover,
.insta-link:hover,
.lang-toggle:hover,
.help-toggle:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 14px 28px rgba(0,0,0,.20), inset 0 0 0 1px rgba(255,255,255,.08);
  filter: brightness(1.03);
}

.discord-link:active,
.insta-link:active,
.lang-toggle:active,
.help-toggle:active {
  transform: translateY(0) scale(.99);
}

.lang-toggle {
  min-width: 146px;
  white-space: nowrap;
}

/* DROPZONE */
.dropzone {
  margin: 28px auto 10px;
  width: 95%;
  max-width: 650px;
  min-height: 160px;
  border: 3px dashed var(--border);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--card);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 18px;
  user-select: none;
}

.dropzone.active {
  border-color: var(--accent);
  transform: scale(1.01);
}

/* CONTROLS */
.actions {
  display: none;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 10px 0 0;
}

.action-btn {
  margin: 0;
  padding: 12px 24px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, var(--brown-d), #6b4f31);
  color: var(--accent);
  cursor: pointer;
  font-size: 1rem;
  transition: transform .2s, opacity .2s;
}

.action-btn:hover { transform: scale(1.05); }
.action-btn:active { transform: scale(0.98); }

/* WRAPPER */
.wrapper {
  display: none;
  justify-content: center;
  gap: 16px;
  margin: 26px auto 0;
  padding: 0 12px;
  align-items: flex-start;
}

.slots {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  max-width: min(1100px, calc(100vw - 220px));
}

/* THUMBNAILS */
.slot {
  width: 105px;
  height: 150px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 6px 18px rgba(75,54,33,.08);
}

.slot:hover { transform: scale(1.05); }
.slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* TRASH */
.trash {
  width: 96px;
  height: 160px;
  border-radius: 18px;
  background: rgba(192,57,43,.1);
  border: 1px solid rgba(192,57,43,.15);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  transition: .2s;
  user-select: none;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
}

.trash.active {
  background: rgba(192,57,43,.28);
  transform: scale(1.08);
}

.trash-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  pointer-events: none;
}

.trash-text span {
  background: rgba(255, 255, 255, 0.85);
  color: #c0392b;
  font-size: 0.8rem;
  font-family: 'Tajawal', sans-serif;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  line-height: 1.2;
}

/* RESULT PREVIEW */
.result {
  display: none;
  margin-top: 26px;
  padding: 0 12px 18px;
  justify-content: center;
  align-items: center;
}

#canvas {
  max-width: 320px;
  max-height: 180px;
  width: auto;
  height: auto;
  border-radius: 12px;
  cursor: zoom-in;
  box-shadow: 0 10px 26px rgba(75,54,33,.14);
}

/* OVERLAY */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.95);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 18px;
}

.overlay-panel {
  position: relative;
  max-width: 95vw;
  max-height: 95vh;
  overflow: hidden;
  background: rgba(255,255,255,.02);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay-close {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  z-index: 3;
}

.overlay-close:hover { background: rgba(255,255,255,.22); }
.overlay canvas, .overlay img {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: pointer;
}

#previewImage { max-width: 95vw; max-height: 95vh; }
#editorViewport {
  width: 95vw;
  height: 95vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  direction: ltr;
}

#editorViewport.hidden { display: none !important; }

/* editor stage */
#editorStage {
  position: relative;
  display: inline-block;
  line-height: 0;
  max-width: none;
  max-height: none;
  flex: 0 0 auto;
  direction: ltr;
}

#editorStage canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-width: none;
  max-height: none;
}

#fullCanvas {
  position: relative;
  z-index: 1;
}

#imageOverlayCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}

#markCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  z-index: 3;
  mix-blend-mode: multiply;
  opacity: 1;
}

/* marker panel */
#markerPanel {
  position: fixed;
  top: 50%;
  left: calc(100vw - var(--marker-panel-width) - 14px);
  width: var(--marker-panel-width);
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(75,54,33,.18);
  padding: 10px;
  display: none;
  flex-direction: column;
  gap: 10px;
  z-index: 10000;
  backdrop-filter: blur(4px);
  transform: translateY(-50%);
  transition: left .35s ease, transform .35s ease;
  cursor: grab;
  touch-action: none;
}

#markerPanel:active {
  cursor: grabbing;
}

#markerPanel.marker-panel-left { left: 14px; }

.marker-topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding-bottom: 2px;
}

.marker-title {
  font-family: 'Amiri', serif;
  font-size: 1.05rem;
  color: #333;
  margin: 0;
  line-height: 1.2;
}

.marker-side-toggle {
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  background: #eee3cf;
  color: #3c2a16;
  font-size: 1.1rem;
}

#markerPanel.marker-panel-left .marker-side-toggle {
  left: auto;
  right: 0;
}

.marker-side-toggle:hover { filter: brightness(0.98); }

.marker-swatches { display: flex; flex-direction: column; gap: 8px; }

.marker-swatch {
  width: 100%;
  min-height: 34px;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: .95rem;
  font-family: 'Tajawal', sans-serif;
  color: #1f1f1f;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}

.marker-swatch:hover { transform: scale(1.03); }
.marker-swatch.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(196,154,74,.18) inset;
}

.tool-row { display: flex; gap: 8px; direction: ltr; }
.tool-row .marker-tool { flex: 1 1 0; }

/* Enhanced outline styles for selected tools */
.marker-tool {
  width: 100%;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 8px 10px;
  font-family: 'Tajawal', sans-serif;
  font-size: .98rem;
  cursor: pointer;
  background: #dfe7f0;
  color: #2f3b4a;
  transition: border-color .15s, background .15s;
}

.marker-tool.active {
  background: #cfd8e3;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0,0,0,.04) inset;
}

.marker-tool:hover { filter: brightness(0.98); }

.marker-tool:active {
  border-color: var(--accent);
  background: #cfd8e3;
}

.marker-advanced {
  width: 100%;
  border: none;
  border-radius: 10px;
  padding: 8px 10px;
  font-family: 'Tajawal', sans-serif;
  font-size: .98rem;
  cursor: pointer;
  background: #eee3cf;
  color: #3c2a16;
}

.advanced-panel {
  display: none;
  flex-direction: column;
  gap: 10px;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,.08);
}
.advanced-panel.visible { display: flex; }

.advanced-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.advanced-preview-swatch {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  flex: 0 0 auto;
}

.advanced-label {
  font-size: .88rem;
  color: #333;
  flex: 1 1 auto;
  text-align: right;
}

.color-square {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  cursor: crosshair;
  touch-action: none;
  background:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, hsl(55, 100%, 50%));
}

.color-thumb {
  position: absolute;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  margin-top: -8px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.95);
  background: rgba(255,255,255,.28);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.22);
  left: 100%;
  top: 0%;
  pointer-events: none;
}

.hue-row { display: flex; flex-direction: column; gap: 6px; }
.hue-label { font-size: .88rem; color: #333; text-align: right; }

.hue-slider {
  width: 100%;
  margin: 0;
  direction: ltr;
  appearance: none;
  -webkit-appearance: none;
  height: 14px;
  border-radius: 999px;
  outline: none;
  background: linear-gradient(90deg,
    #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%,
    #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
}

.hue-slider::-webkit-slider-runnable-track { height: 14px; background: transparent; border-radius: 999px; }
.hue-slider::-moz-range-track { height: 14px; background: transparent; border-radius: 999px; }

.hue-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,.72);
  border: 2px solid rgba(255,255,255,.95);
  box-shadow: 0 0 0 1px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.22);
  margin-top: -4px;
}

.hue-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,.72);
  border: 2px solid rgba(255,255,255,.95);
  box-shadow: 0 0 0 1px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.22);
}

.marker-ok, .marker-cancel {
  width: 100%;
  border: none;
  border-radius: 10px;
  padding: 8px 10px;
  font-family: 'Tajawal', sans-serif;
  font-size: .98rem;
  cursor: pointer;
}

.marker-ok { background: linear-gradient(135deg, var(--brown-d), #6b4f31); color: var(--accent); }
.marker-cancel { background: #ddd; color: #222; }

.marker-ok:hover, .marker-cancel:hover { filter: brightness(0.97); }

#fileInput { display: none; }

/* PDF SIDEBAR */
#pdfSidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--pdf-sidebar-width);
  background: #fff;
  border-right: 2px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  display: none;
  z-index: 9000;
  box-shadow: 2px 0 10px rgba(0,0,0,.08);
}

#pdfSidebarInner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100%;
}

#pdfTopBar {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  border-bottom: 1px solid #eee;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

#pdfClose {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,.06);
  color: #333;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  flex-shrink: 0;
  transition: background .15s;
}

#pdfClose:hover { background: rgba(0,0,0,.12); }

#pdfPageSearch {
  width: 100%;
  padding: 8px 12px;
  border-radius: 14px;
  border: 2px solid var(--border);
  background: var(--card);
  color: var(--brown-d);
  font-family: 'Tajawal', sans-serif;
  font-size: .9rem;
  text-align: center;
  outline: none;
  direction: ltr;
}

#pdfPageSearch:focus { border-color: var(--accent); }

#pdfPages { padding: 6px 0 10px; }

.pdf-page-thumb {
  width: calc(var(--pdf-sidebar-width) - 18px);
  margin: 8px auto;
  display: block;
  cursor: pointer;
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0,0,0,.08);
  border: 1px solid #eee;
  transition: opacity 0.2s;
}

/* RESIZER */
#resizer {
  position: fixed;
  top: 0;
  left: var(--pdf-sidebar-width);
  width: 14px;
  bottom: 0;
  cursor: ew-resize;
  z-index: 9100;
  touch-action: none;
  user-select: none;
  display: none;
}

#resizer:hover { background: rgba(0,0,0,0.08); }

.hidden { display: none !important; }

/* small screens */
@media (max-width: 700px) {
  :root {
    --pdf-sidebar-width: 110px;
    --marker-panel-width: 174px;
  }
  .slots { max-width: 100%; }
  #canvas { max-width: 250px; max-height: 160px; }
  .slot { width: 92px; height: 132px; }
  #markerPanel { top: auto; bottom: 12px; transform: none; }
  #markerPanel.marker-panel-left { left: 12px; }
  #markerPanel:not(.marker-panel-left) { left: calc(100vw - var(--marker-panel-width) - 12px); }
}


/* Extracted static inline styles */
.inline-style-001 { font-size: 2rem; }
.inline-style-002 { font-size:.95rem; opacity:.75; margin-top:6px; }
.inline-style-003 { text-align: center; margin-bottom: 20px; }
.inline-style-004 { background: var(--card); color: var(--brown-d); border: 2px solid var(--border); }
.inline-style-005 { font-size: 2rem; pointer-events: none; }
.inline-style-006 { z-index: 10001; }
.inline-style-007 { flex-direction: column; padding: 24px; gap: 16px; max-width: 400px; width: 90vw; background: var(--card); border-radius: 14px; }
.inline-style-008 { font-family: 'Amiri', serif; font-size: 1.5rem; color: var(--brown-d); margin: 0; }
.inline-style-009 { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--border); font-family: 'Tajawal', sans-serif; font-size: 1rem; direction: ltr; text-align: left; }
.inline-style-010 { display: flex; gap: 12px; width: 100%; }
.inline-style-011 { flex: 1; }
.inline-style-012 { flex: 1; background: #ddd; color: #222; }
.inline-style-013 { flex-direction: column; padding: 24px; gap: 16px; max-width: 360px; width: 90vw; background: var(--card); border-radius: 14px; }
.inline-style-014 { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.inline-style-015 { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; }
.inline-style-016 { opacity: 0.6; font-size: 0.85rem; }
.inline-style-017 { width: 100%; background: #ddd; color: #222; }
.inline-style-018 { background: rgba(255, 214, 0, 0.95); }
.inline-style-019 { background: rgba(255, 0, 0, 0.95); }
.inline-style-020 { background: rgba(0, 205, 255, 0.95); }
.inline-style-021 { font-size: 1.25rem; }
.inline-style-022 { font-size: 1.15rem; }
.inline-style-023 { font-size: 1rem; }
/* Advanced button moved above OK */
.marker-advanced-main {
  width: 100%;
  margin-top: 4px;
}

/* Line tool button active state */
#lineBtn.active {
  background: #cfd8e3;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0,0,0,.04) inset;
}
/* Make moved متقدم button look like موافق */
.marker-advanced-main {
  width: 100%;
  margin-top: 4px;
}

/* Batch 2A controls */
.help-toggle {
  min-width: 108px;
  white-space: nowrap;
}

.help-panel {
  max-width: 520px;
  text-align: start;
}

.help-content {
  color: #2b2117;
  line-height: 1.7;
  font-size: 0.98rem;
  width: 100%;
}

.help-content ul {
  margin: 0;
  padding-inline-start: 22px;
}

.help-content li {
  margin: 7px 0;
}

.marker-wide-tool {
  font-size: 0.92rem !important;
  white-space: nowrap;
}

.marker-clear-main {
  width: 100%;
  background: #efd8d2;
  color: #8a261f;
  font-weight: 700;
}

.marker-clear-main:hover {
  filter: brightness(0.97);
}


/* Batch 4 page dragging + thumbnail delete */
.slots.is-dragging .slot {
  transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease, outline-color .18s ease;
}

.slot {
  position: relative;
  cursor: grab;
}

.slot:active,
body.page-dragging .slot {
  cursor: grabbing;
}

.slot.dragging {
  opacity: 0.58;
  transform: scale(1.08) rotate(-2deg);
  box-shadow: 0 18px 38px rgba(75,54,33,.24);
  z-index: 2;
}

.slot.drag-over {
  transform: translateY(-8px) scale(1.04);
  outline: 3px solid rgba(212,163,115,.72);
  outline-offset: 3px;
}

.slot-delete {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(192, 57, 43, 0.92);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.22);
  opacity: 0;
  transform: scale(.78);
  transition: opacity .15s ease, transform .15s ease, filter .15s ease;
  z-index: 3;
}

.slot:hover .slot-delete,
.slot:focus-within .slot-delete,
.slot-delete:focus-visible {
  opacity: 1;
  transform: scale(1);
}

.slot-delete:hover {
  filter: brightness(1.08);
  transform: scale(1.08);
}

.slot-delete:active {
  transform: scale(.94);
}


/* Batch 5A safe UI polish */
.marker-actions-separator {
  width: 100%;
  height: 1px;
  margin: 2px 0 0;
  background: linear-gradient(90deg, transparent, rgba(75,54,33,.28), transparent);
}

#clearBtn {
  background: linear-gradient(135deg, #8f241f, #c0392b);
  color: #fff3ee;
  box-shadow: 0 8px 18px rgba(192,57,43,.18);
}

#clearBtn.is-empty,
#clearBtn:disabled {
  background: #d7d0c4;
  color: #7d7368;
  cursor: not-allowed;
  opacity: .78;
  box-shadow: none;
}

#clearBtn.is-empty:hover,
#clearBtn:disabled:hover {
  transform: none;
  filter: none;
}

/* Keep PDF sidebar controls and scrollbar visually on the left in every language */
#pdfSidebar {
  left: 0;
  right: auto;
  direction: rtl;
}

#pdfSidebarInner,
#pdfTopBar,
#pdfPages {
  direction: ltr;
}

#pdfClose {
  align-self: flex-start;
}

/* Show only about three selected pages, then scroll horizontally with soft edge fades */
.slots.scrollable {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: min(calc((105px * 3) + (14px * 2) + 28px), calc(100vw - 140px));
  max-width: min(calc((105px * 3) + (14px * 2) + 28px), calc(100vw - 140px));
  overflow-x: auto;
  overflow-y: visible;
  padding: 8px 14px 16px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}

.slots.scrollable .slot {
  flex: 0 0 105px;
}

.slots.scrollable::-webkit-scrollbar {
  height: 10px;
}

.slots.scrollable::-webkit-scrollbar-track {
  background: rgba(255,250,241,.75);
  border-radius: 999px;
}

.slots.scrollable::-webkit-scrollbar-thumb {
  background: rgba(107,79,49,.45);
  border-radius: 999px;
}

@media (max-width: 560px) {
  .slots.scrollable {
    width: min(calc((92px * 3) + (10px * 2) + 24px), calc(100vw - 24px));
    max-width: min(calc((92px * 3) + (10px * 2) + 24px), calc(100vw - 24px));
  }

  .slots.scrollable .slot {
    flex-basis: 92px;
  }
}


/* Batch 5B pen + centered color picker */
.marker-swatches {
  display: none !important;
}

#eraserToggle.active,
#boxToggle.active,
#lineBtn.active {
  background: #cfd8e3;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(212,163,115,.20) inset;
}

.tool-color-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, .42);
  z-index: 10020;
  backdrop-filter: blur(2px);
}

.tool-color-modal.visible {
  display: flex;
}

.tool-color-panel {
  position: relative;
  width: min(92vw, 380px);
  max-height: min(88vh, 620px);
  overflow: auto;
  background: rgba(255, 250, 241, .98);
  border: 1px solid rgba(75,54,33,.16);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(255,255,255,.45);
  padding: 18px;
  direction: rtl;
  text-align: center;
}

.tool-color-close {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 999px;
  background: rgba(75,54,33,.12);
  color: #3c2a16;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.tool-color-close:hover {
  background: rgba(75,54,33,.20);
}

.tool-color-title {
  margin: 4px 36px 14px;
  font-family: 'Amiri', serif;
  font-size: 1.35rem;
  color: var(--brown-d);
}

.tool-color-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tool-color-choice,
.tool-color-advanced-btn,
.tool-color-use-btn {
  min-height: 48px;
  border: 1px solid rgba(75,54,33,.15);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(238,227,207,.92));
  color: #3c2a16;
  font-family: 'Tajawal', sans-serif;
  font-size: .98rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.tool-color-choice:hover,
.tool-color-advanced-btn:hover,
.tool-color-use-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(75,54,33,.12);
  filter: brightness(1.02);
}

.tool-color-chip {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(75,54,33,.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
  flex: 0 0 auto;
}

.tool-color-advanced-btn,
.tool-color-use-btn {
  width: 100%;
  margin-top: 12px;
  background: linear-gradient(135deg, var(--brown-d), #6b4f31);
  color: var(--accent);
}

.tool-color-advanced-area {
  display: none;
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(75,54,33,.12);
}

.tool-color-advanced-area.visible {
  display: block;
}

.tool-color-advanced-area .color-square {
  margin: 10px auto;
}

.tool-color-use-btn {
  min-height: 44px;
}

@media (max-width: 520px) {
  .tool-color-panel {
    width: min(94vw, 340px);
    padding: 16px;
  }

  .tool-color-grid {
    grid-template-columns: 1fr;
  }
}

/* Advanced color now lives inside the centered color popup. */
#markerPanel > #advancedPanel,
#markerPanel > #advancedToggle {
  display: none !important;
}

/* Batch 5D mobile zoom/layout polish */
:root {
  --app-height: 100vh;
}

@supports (height: 100dvh) {
  :root { --app-height: 100dvh; }
}

.mobile-zoom-controls {
  position: fixed;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  display: none;
  align-items: center;
  gap: 8px;
  z-index: 10035;
  padding: 8px;
  border-radius: 999px;
  background: rgba(255, 250, 241, .92);
  border: 1px solid rgba(75,54,33,.16);
  box-shadow: 0 12px 34px rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
  direction: ltr;
}

.mobile-zoom-btn {
  min-width: 42px;
  height: 42px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brown-d), #6b4f31);
  color: var(--accent);
  font: 800 1.1rem/1 'Tajawal', sans-serif;
  cursor: pointer;
}

.mobile-zoom-reset {
  min-width: 64px;
  font-size: .88rem;
}

.mobile-zoom-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

@media (max-width: 760px) {
  body {
    font-size: 16px;
    min-height: var(--app-height);
    overflow-x: hidden;
  }

  header {
    padding: 10px 8px;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .discord-link,
  .insta-link,
  .lang-toggle,
  .help-toggle {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
    max-width: calc(50% - 4px);
    min-height: 40px;
    padding: 9px 10px;
    font-size: .88rem;
    white-space: nowrap;
  }

  .dropzone {
    width: calc(100vw - 24px);
    max-width: none;
    min-height: 120px;
    margin: 16px auto 10px;
    padding: 14px;
    border-width: 2px;
    border-radius: 18px;
    font-size: .96rem;
  }

  .inline-style-001 { font-size: 1.55rem; }
  .inline-style-002 { font-size: .82rem; }
  .inline-style-003 { margin-bottom: 12px; }

  .action-btn {
    padding: 11px 15px;
    border-radius: 12px;
    font-size: .94rem;
  }

  .actions {
    position: sticky;
    bottom: 0;
    z-index: 35;
    padding: 8px 10px max(8px, env(safe-area-inset-bottom));
    margin-top: 12px;
    background: linear-gradient(to top, rgba(245,239,228,.97), rgba(245,239,228,.78));
    backdrop-filter: blur(8px);
  }

  .wrapper {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 0 8px;
  }

  .trash {
    width: min(360px, calc(100vw - 28px));
    height: auto;
    min-height: 68px;
    flex-direction: row;
    font-size: 1.4rem;
    order: 2;
  }

  .slots {
    max-width: calc(100vw - 18px);
    gap: 10px;
  }

  .slot {
    width: 88px;
    height: 126px;
    border-radius: 14px;
  }

  .slot-delete {
    opacity: 1;
    transform: scale(1);
    width: 28px;
    height: 28px;
    top: 6px;
    right: 6px;
  }

  .slots.scrollable {
    width: min(calc((88px * 3) + (10px * 2) + 24px), calc(100vw - 18px));
    max-width: min(calc((88px * 3) + (10px * 2) + 24px), calc(100vw - 18px));
    gap: 10px;
    padding: 8px 12px 14px;
  }

  .slots.scrollable .slot {
    flex-basis: 88px;
  }

  #canvas {
    max-width: calc(100vw - 24px);
    max-height: 42vh;
  }

  .result {
    margin-top: 16px;
    padding: 0 8px 12px;
  }

  .overlay {
    padding: 0;
  }

  .overlay-panel {
    max-width: 100vw;
    max-height: var(--app-height);
    border-radius: 0;
  }

  .overlay-close {
    top: max(8px, env(safe-area-inset-top));
    left: max(8px, env(safe-area-inset-left));
    width: 44px;
    height: 44px;
    z-index: 10036;
  }

  #previewImage {
    max-width: 100vw;
    max-height: var(--app-height);
  }

  #editorViewport {
    width: 100vw !important;
    height: var(--app-height) !important;
    border-radius: 0 !important;
  }

  #markerPanel,
  #markerPanel.marker-panel-left,
  #markerPanel:not(.marker-panel-left) {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    width: min(380px, calc(100vw - 16px));
    max-height: 36vh;
    max-height: 36dvh;
    overflow-y: auto;
    padding: 8px;
    gap: 8px;
    cursor: default;
    touch-action: pan-y;
  }

  .marker-topbar { min-height: 24px; }
  .marker-title { font-size: 1rem; }
  .marker-side-toggle { display: none; }
  .tool-row { gap: 6px; }

  .marker-tool,
  .marker-ok,
  .marker-cancel {
    min-height: 42px;
    padding: 8px;
    border-radius: 10px;
  }

  .marker-actions-separator {
    margin-top: 0;
  }

  .tool-color-modal {
    padding: 10px;
    z-index: 10040;
  }

  .tool-color-panel {
    width: min(360px, calc(100vw - 20px));
    max-height: calc(var(--app-height) - 24px);
    padding: 14px;
  }

  .tool-color-title {
    font-size: 1.18rem;
    margin-bottom: 12px;
  }

  .tool-color-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .tool-color-choice,
  .tool-color-advanced-btn,
  .tool-color-use-btn {
    min-height: 44px;
    font-size: .92rem;
  }

  .color-square {
    height: 128px;
  }

  #pdfSidebar {
    width: min(68vw, 240px) !important;
    max-width: 240px;
  }

  .pdf-page-thumb {
    width: calc(min(68vw, 240px) - 20px);
  }

  #resizer {
    display: none !important;
  }

  .mobile-zoom-controls.visible {
    display: flex;
  }
}

@media (max-width: 380px) {
  .discord-link,
  .insta-link,
  .lang-toggle,
  .help-toggle {
    font-size: .8rem;
    padding-inline: 8px;
  }

  .tool-color-grid {
    grid-template-columns: 1fr;
  }

  #markerPanel,
  #markerPanel.marker-panel-left,
  #markerPanel:not(.marker-panel-left) {
    max-height: 40vh;
    max-height: 40dvh;
  }

  .mobile-zoom-controls {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}


/* Batch 5E page order arrows + no garbage bin */
.trash {
  display: none !important;
}

.wrapper {
  align-items: center;
}

.slot {
  cursor: pointer;
}

.slot:active,
body.page-dragging .slot {
  cursor: pointer;
}

.slot-order-controls {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
  z-index: 4;
}

.slot-order-btn {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(75,54,33,.25);
  border-radius: 999px;
  background: rgba(255, 250, 241, 0.94);
  color: var(--brown-d);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  opacity: .92;
  transition: transform .15s ease, opacity .15s ease, filter .15s ease, background .15s ease;
}

.slot-order-btn:hover:not(:disabled) {
  transform: scale(1.08);
  filter: brightness(1.03);
  opacity: 1;
}

.slot-order-btn:active:not(:disabled) {
  transform: scale(.94);
}

.slot-order-btn:disabled {
  opacity: .28;
  cursor: not-allowed;
  box-shadow: none;
}

@media (max-width: 560px) {
  .slot-order-controls {
    left: 6px;
    right: 6px;
    bottom: 6px;
  }

  .slot-order-btn {
    width: 28px;
    height: 28px;
    font-size: 1.2rem;
  }
}


/* Batch 5F updates */
.trash {
  display: none !important;
}

.wrapper,
.slots {
  direction: ltr;
}

.color-picker-row {
  display: flex !important;
}

.color-picker-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.current-color-chip {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 2px solid rgba(255,255,255,.95);
  box-shadow: 0 0 0 1px rgba(75,54,33,.25), inset 0 0 0 1px rgba(0,0,0,.05);
  flex: 0 0 auto;
}

.marker-clear-main.is-empty,
.marker-clear-main:disabled {
  background: #d7d0c4 !important;
  color: #7d7368 !important;
  cursor: not-allowed;
  opacity: .78;
  box-shadow: none;
}

.marker-clear-main.is-empty:hover,
.marker-clear-main:disabled:hover {
  transform: none;
  filter: none;
}

/* Keep thumbnails in the same visual order in Arabic and English */
.slot-order-controls,
.slot-delete {
  direction: ltr;
}


/* Restart confirmation modal */
.restart-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(27, 18, 10, 0.62);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .22s ease;
}

.restart-confirm-modal.visible {
  display: flex;
  opacity: 1;
}

.restart-confirm-panel {
  position: relative;
  width: min(420px, 94vw);
  padding: 28px 22px 20px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.96), rgba(255,250,241,.96)),
    var(--card);
  border: 1px solid rgba(212, 163, 115, .55);
  box-shadow: 0 26px 70px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.6) inset;
  text-align: center;
  transform: translateY(18px) scale(.94);
  opacity: 0;
  animation: restartPopIn .28s cubic-bezier(.18, .9, .25, 1.15) forwards;
}

@keyframes restartPopIn {
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.restart-confirm-close {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(75,54,33,.08);
  color: #4b3621;
  font-size: 24px;
  line-height: 1;
  transition: transform .18s ease, background .18s ease;
}

.restart-confirm-close:hover {
  transform: rotate(8deg) scale(1.05);
  background: rgba(75,54,33,.14);
}

.restart-confirm-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fff1d6, #f6d6b5);
  box-shadow: 0 12px 26px rgba(75,54,33,.15), inset 0 0 0 1px rgba(255,255,255,.7);
  font-size: 2rem;
}

.restart-confirm-title {
  margin: 0 0 10px;
  font-family: 'Amiri', serif;
  color: #4b3621;
  font-size: 1.45rem;
  line-height: 1.25;
}

.restart-confirm-message {
  margin: 0 auto 20px;
  color: #5d4935;
  font-size: 1rem;
  line-height: 1.7;
  max-width: 340px;
}

.restart-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: stretch;
}

.restart-confirm-btn {
  min-height: 44px;
  padding: 10px 16px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-family: 'Tajawal', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.restart-confirm-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.restart-confirm-btn:active {
  transform: translateY(0) scale(.99);
}

.restart-confirm-cancel {
  background: #eee3cf;
  color: #4b3621;
  box-shadow: inset 0 0 0 1px rgba(75,54,33,.08);
}

.restart-confirm-danger {
  background: linear-gradient(135deg, #b8322b, #7f1d1d);
  color: #fff6ec;
  box-shadow: 0 12px 26px rgba(127,29,29,.24);
}

[dir="rtl"] .restart-confirm-close {
  left: auto;
  right: 12px;
}

@media (max-width: 520px) {
  .restart-confirm-panel {
    padding: 26px 16px 16px;
    border-radius: 20px;
  }

  .restart-confirm-actions {
    flex-direction: column-reverse;
  }

  .restart-confirm-btn {
    width: 100%;
  }
}



/* Batch 5H final UI polish */
header,
.actions,
.inline-style-003,
.inline-style-010,
.inline-style-014,
.restart-confirm-actions,
.tool-row,
.slot-order-controls {
  direction: ltr !important;
}

.actions {
  flex-direction: row !important;
}

/* Better color picker window */
.tool-color-modal {
  background: rgba(27, 18, 10, .58) !important;
  backdrop-filter: blur(9px) !important;
  opacity: 0;
  transition: opacity .2s ease;
}

.tool-color-modal.visible {
  opacity: 1;
}

.tool-color-panel {
  width: min(94vw, 430px) !important;
  padding: 24px 20px 20px !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.98), rgba(255,250,241,.97) 54%, rgba(246,235,217,.97)),
    var(--card) !important;
  border: 1px solid rgba(212, 163, 115, .55) !important;
  box-shadow: 0 30px 78px rgba(0,0,0,.36), inset 0 0 0 1px rgba(255,255,255,.66) !important;
  transform: translateY(16px) scale(.96);
  animation: colorPickerPopIn .25s cubic-bezier(.18, .9, .25, 1.14) forwards;
}

@keyframes colorPickerPopIn {
  to { transform: translateY(0) scale(1); }
}

.tool-color-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 8px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fff1d6, #f1cf9e);
  color: var(--brown-d);
  font-size: 1.9rem;
  box-shadow: 0 13px 28px rgba(75,54,33,.16), inset 0 0 0 1px rgba(255,255,255,.72);
}

.tool-color-title {
  margin: 0 38px 16px !important;
  font-size: 1.45rem !important;
}

.tool-color-grid {
  gap: 12px !important;
}

.tool-color-choice,
.tool-color-advanced-btn,
.tool-color-use-btn {
  border-radius: 16px !important;
  min-height: 54px !important;
  border: 1px solid rgba(75,54,33,.14) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(238,227,207,.86)) !important;
  box-shadow: 0 8px 18px rgba(75,54,33,.08), inset 0 0 0 1px rgba(255,255,255,.56);
}

.tool-color-choice.selected {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(212,163,115,.24), 0 12px 22px rgba(75,54,33,.12) !important;
  transform: translateY(-1px);
}

.tool-color-chip {
  width: 28px !important;
  height: 28px !important;
  border-radius: 9px !important;
  border: 2px solid rgba(255,255,255,.95) !important;
  box-shadow: 0 0 0 1px rgba(75,54,33,.25), inset 0 0 0 1px rgba(0,0,0,.06) !important;
}

.tool-color-advanced-btn,
.tool-color-use-btn {
  background: linear-gradient(135deg, var(--brown-d), #6b4f31) !important;
  color: var(--accent) !important;
}

.tool-color-advanced-area {
  border-radius: 20px !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.58);
}

.tool-color-close {
  width: 40px !important;
  height: 40px !important;
  box-shadow: 0 8px 18px rgba(75,54,33,.12);
}

/* Bigger visual affordance for active delete-all button and disabled state remains gray */
#clearBtn:not(:disabled) {
  background: linear-gradient(135deg, #9d2f25, #6f211b);
  color: #fff6ec;
}

@media (max-width: 520px) {
  .tool-color-panel {
    width: min(94vw, 370px) !important;
    padding: 20px 14px 16px !important;
  }
  .tool-color-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .tool-color-choice,
  .tool-color-advanced-btn,
  .tool-color-use-btn {
    min-height: 48px !important;
    font-size: .92rem !important;
  }
}

@media (max-width: 380px) {
  .tool-color-grid {
    grid-template-columns: 1fr !important;
  }
}


/* Download button custom SVG icon */
.download-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.download-svg-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #2f80ed;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.18));
}

.download-svg-icon svg {
  width: 22px;
  height: 22px;
  display: block;
  overflow: visible;
}

.download-svg-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.download-button-label {
  line-height: 1;
}


/* Batch 5J: keep the color picker in one window without internal scrolling */
.tool-color-modal.visible {
  align-items: center !important;
  justify-content: center !important;
}

.tool-color-panel {
  max-height: calc(var(--app-height, 100vh) - 20px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.tool-color-title {
  margin-bottom: 6px !important;
  line-height: 1.15 !important;
}

.tool-color-icon {
  width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  margin-bottom: 4px !important;
  border-radius: 17px !important;
  font-size: 1.55rem !important;
}

.tool-color-grid {
  gap: 8px !important;
}

.tool-color-choice,
.tool-color-advanced-btn,
.tool-color-use-btn {
  min-height: 46px !important;
}

.tool-color-advanced-btn,
.tool-color-use-btn {
  margin-top: 6px !important;
}

.tool-color-advanced-area {
  margin-top: 0 !important;
  padding: 10px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.tool-color-advanced-area.visible {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.tool-color-advanced-area .advanced-preview-row {
  min-height: 28px !important;
  gap: 8px !important;
}

.tool-color-advanced-area .advanced-preview-swatch {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
}

.tool-color-advanced-area .color-square {
  width: 100% !important;
  height: clamp(132px, 28dvh, 190px) !important;
  aspect-ratio: auto !important;
  margin: 0 auto !important;
  flex: 1 1 auto !important;
  min-height: 120px !important;
  max-height: 190px !important;
}

.tool-color-advanced-area .hue-row {
  gap: 4px !important;
}

.tool-color-advanced-area .hue-label {
  font-size: .82rem !important;
  line-height: 1.1 !important;
}

.tool-color-advanced-area .hue-slider {
  height: 12px !important;
}

@media (max-width: 520px) {
  .tool-color-modal {
    padding: 6px !important;
  }

  .tool-color-panel {
    width: min(96vw, 420px) !important;
    max-height: calc(var(--app-height, 100dvh) - 12px) !important;
    padding: 14px 12px 12px !important;
    gap: 7px !important;
    border-radius: 22px !important;
  }

  .tool-color-close {
    width: 32px !important;
    height: 32px !important;
    font-size: 21px !important;
    top: 8px !important;
    left: 8px !important;
  }

  .tool-color-icon {
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 15px !important;
    font-size: 1.35rem !important;
    margin-bottom: 2px !important;
  }

  .tool-color-title {
    font-size: 1.16rem !important;
    margin: 0 32px 4px !important;
  }

  .tool-color-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .tool-color-choice,
  .tool-color-advanced-btn,
  .tool-color-use-btn {
    min-height: 40px !important;
    padding: 6px 10px !important;
    border-radius: 14px !important;
    font-size: .9rem !important;
  }

  .tool-color-chip {
    width: 24px !important;
    height: 24px !important;
    border-radius: 8px !important;
  }

  .tool-color-advanced-area {
    padding: 8px !important;
    border-radius: 16px !important;
  }

  .tool-color-advanced-area .color-square {
    height: clamp(118px, 24dvh, 160px) !important;
    min-height: 105px !important;
    max-height: 160px !important;
  }

  .tool-color-use-btn {
    min-height: 38px !important;
  }
}

@media (max-height: 620px) {
  .tool-color-panel {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    gap: 6px !important;
  }

  .tool-color-icon {
    display: none !important;
  }

  .tool-color-title {
    font-size: 1.08rem !important;
    margin-bottom: 2px !important;
  }

  .tool-color-choice,
  .tool-color-advanced-btn,
  .tool-color-use-btn {
    min-height: 36px !important;
  }

  .tool-color-advanced-area .color-square {
    height: clamp(96px, 21dvh, 130px) !important;
    min-height: 92px !important;
    max-height: 130px !important;
  }
}


.tool-color-advanced-btn.return-mode {
  background: linear-gradient(135deg, #eee3cf, #fff8ec) !important;
  color: #3c2a16 !important;
  border-color: rgba(75,54,33,.28) !important;
}


/* Batch 6A: premium main-page redesign (layout-only, no PDF/download logic) */
:root {
  --taif-ink: #342313;
  --taif-ink-soft: #62482e;
  --taif-cream: #fff9ef;
  --taif-cream-2: #f5ead8;
  --taif-gold: #d4a373;
  --taif-gold-2: #f0cc8a;
  --taif-emerald: #173f35;
  --taif-shadow: 0 24px 70px rgba(52, 35, 19, .16);
  --taif-soft-shadow: 0 12px 32px rgba(52, 35, 19, .10);
}

body {
  background:
    radial-gradient(circle at 12% 12%, rgba(212, 163, 115, .22), transparent 28vw),
    radial-gradient(circle at 88% 6%, rgba(23, 63, 53, .12), transparent 26vw),
    linear-gradient(180deg, #fbf4e8 0%, #f2e6d2 100%) !important;
  color: var(--taif-ink);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0 44%, rgba(255,255,255,.28) 45% 46%, transparent 47% 100%),
    radial-gradient(circle at center, rgba(255,255,255,.16), transparent 42%);
  opacity: .85;
}

.site-header {
  min-height: 76px;
  padding: 14px clamp(14px, 4vw, 42px) !important;
  justify-content: space-between !important;
  gap: 16px !important;
  background:
    linear-gradient(135deg, rgba(58, 40, 24, .96), rgba(23, 63, 53, .94)),
    radial-gradient(circle at top left, rgba(240, 204, 138, .22), transparent 36%) !important;
  border-bottom: 1px solid rgba(240, 204, 138, .26) !important;
  box-shadow: 0 18px 46px rgba(35, 22, 12, .20) !important;
}

.brand-shell {
  direction: ltr;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  color: #fff7e7;
  min-width: 190px;
}

.brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Amiri', serif;
  font-size: 1.65rem;
  line-height: 1;
  color: #3f2d1c;
  background:
    linear-gradient(145deg, #ffe7ad, #d4a373),
    radial-gradient(circle at 30% 25%, #fff8df, transparent 45%);
  box-shadow: 0 12px 26px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.45);
}

.brand-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
}

.brand-copy strong {
  font-family: 'Amiri', serif;
  font-size: 1.42rem;
  letter-spacing: .4px;
}

.brand-copy span {
  margin-top: 4px;
  font-size: .78rem;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(255, 247, 231, .70);
}

.top-actions {
  direction: ltr;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.top-actions .discord-link,
.top-actions .insta-link,
.top-actions .lang-toggle,
.top-actions .help-toggle {
  min-height: 40px !important;
  padding: 9px 14px !important;
  font-size: .94rem !important;
  border-radius: 999px !important;
  background: rgba(255, 250, 241, .08) !important;
  border: 1px solid rgba(240, 204, 138, .28) !important;
  color: #ffe5aa !important;
  box-shadow: none !important;
  backdrop-filter: blur(8px);
}

.top-actions .discord-link:hover,
.top-actions .insta-link:hover,
.top-actions .lang-toggle:hover,
.top-actions .help-toggle:hover {
  background: rgba(255, 250, 241, .14) !important;
  transform: translateY(-1px) !important;
}

.app-main {
  width: min(1180px, calc(100vw - 28px));
  margin: 0 auto;
  padding: clamp(18px, 4vw, 44px) 0 44px;
}

.hero-section {
  display: grid;
  grid-template-columns: minmax(280px, .86fr) minmax(320px, 1.14fr);
  gap: clamp(18px, 4vw, 34px);
  align-items: stretch;
  margin: 0 auto 24px;
}

.hero-copy,
.upload-card,
.workspace-panel {
  border: 1px solid rgba(125, 91, 51, .16);
  background:
    linear-gradient(180deg, rgba(255, 250, 241, .92), rgba(255, 247, 231, .76)),
    radial-gradient(circle at top right, rgba(212, 163, 115, .18), transparent 34%);
  border-radius: 32px;
  box-shadow: var(--taif-shadow);
  position: relative;
  overflow: hidden;
}

.hero-copy::before,
.upload-card::before,
.workspace-panel::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.62);
}

.hero-copy {
  padding: clamp(24px, 4.4vw, 44px);
  text-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 360px;
}

.hero-eyebrow {
  width: fit-content;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(23, 63, 53, .10);
  border: 1px solid rgba(23, 63, 53, .12);
  color: var(--taif-emerald);
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .5px;
}

.hero-copy h1 {
  font-family: 'Amiri', serif;
  color: var(--taif-ink);
  font-size: clamp(2.1rem, 4.8vw, 4rem);
  line-height: .98;
  margin: 22px 0 14px;
  letter-spacing: -.6px;
}

.hero-copy p {
  max-width: 52ch;
  margin: 0;
  color: rgba(52, 35, 19, .72);
  font-size: clamp(1rem, 1.7vw, 1.18rem);
  line-height: 1.75;
}

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
  direction: ltr;
}

.hero-pills span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(125, 91, 51, .15);
  background: rgba(255,255,255,.52);
  color: rgba(52, 35, 19, .76);
  font-size: .84rem;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(52, 35, 19, .06);
}

.upload-card {
  padding: clamp(18px, 3vw, 28px);
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.dropzone {
  width: 100% !important;
  max-width: none !important;
  min-height: 250px !important;
  margin: 0 !important;
  border: 1.5px dashed rgba(125, 91, 51, .28) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,250,241,.60)),
    radial-gradient(circle at center, rgba(212,163,115,.12), transparent 62%) !important;
  border-radius: 28px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.62);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

.dropzone:hover,
.dropzone.active {
  transform: translateY(-2px) !important;
  border-color: rgba(212, 163, 115, .78) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.80), 0 16px 34px rgba(52,35,19,.10);
}

.upload-icon-wrap {
  width: 78px;
  height: 78px;
  margin-bottom: 18px;
  border-radius: 26px;
  display: grid;
  place-items: center;
  color: var(--taif-emerald);
  background:
    linear-gradient(145deg, #fff1c8, #e5bd73),
    radial-gradient(circle at 30% 25%, #fff, transparent 48%);
  box-shadow: 0 18px 32px rgba(125,91,51,.20), inset 0 1px 0 rgba(255,255,255,.58);
}

.upload-icon-wrap svg {
  width: 38px;
  height: 38px;
}

.upload-icon-wrap path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#dropzoneTitle {
  font-family: 'Amiri', serif;
  color: var(--taif-ink);
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  line-height: 1.16;
  font-weight: 700;
}

#dropzoneSubtitle {
  margin-top: 8px;
  color: rgba(52, 35, 19, .62) !important;
  font-size: 1rem !important;
}

.link-action-panel {
  display: flex;
  justify-content: center;
  align-items: center;
}

.link-action-panel #addUrlBtn {
  width: 100%;
  min-height: 54px;
  border-radius: 18px;
  background: #fffaf1 !important;
  color: var(--taif-ink-soft) !important;
  border: 1px solid rgba(125,91,51,.16) !important;
  box-shadow: var(--taif-soft-shadow) !important;
}

.workspace-panel {
  display: flex;
  justify-content: center;
  min-height: 0;
  margin: 18px auto 0;
  padding: 0;
  background:
    linear-gradient(180deg, rgba(255,250,241,.82), rgba(255,247,231,.68)),
    radial-gradient(circle at left top, rgba(23,63,53,.08), transparent 36%);
}

.wrapper {
  width: 100%;
  margin: 0 auto !important;
  padding: 22px !important;
}

.wrapper[style*="display: none"] {
  padding: 0 !important;
}

.slots {
  counter-reset: taif-page;
  width: 100%;
  max-width: 100% !important;
  gap: 18px !important;
  direction: ltr !important;
  justify-content: center !important;
}

.slots.scrollable {
  width: min(calc((128px * 3) + (18px * 2) + 42px), calc(100vw - 60px)) !important;
  max-width: min(calc((128px * 3) + (18px * 2) + 42px), calc(100vw - 60px)) !important;
  padding: 10px 21px 18px !important;
  gap: 18px !important;
}

.slot {
  counter-increment: taif-page;
  width: 128px !important;
  height: 186px !important;
  flex: 0 0 128px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(125,91,51,.16) !important;
  background: linear-gradient(180deg, #fffaf1, #f7ead4) !important;
  box-shadow: 0 16px 36px rgba(52, 35, 19, .13) !important;
  padding: 12px 10px 44px;
  overflow: hidden;
  transform-origin: center;
}

.slot:hover {
  transform: translateY(-5px) scale(1.025) !important;
  box-shadow: 0 22px 48px rgba(52, 35, 19, .18) !important;
}

.slot::before {
  content: counter(taif-page);
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 250, 241, .92);
  border: 1px solid rgba(125,91,51,.16);
  color: var(--taif-ink-soft);
  font-weight: 900;
  font-size: .82rem;
  box-shadow: 0 6px 14px rgba(52,35,19,.10);
}

.slot img {
  border-radius: 18px;
  border: 1px solid rgba(125,91,51,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.60);
  object-fit: cover;
}

.slot-delete {
  top: 9px !important;
  right: 9px !important;
  width: 30px !important;
  height: 30px !important;
  background: rgba(143,36,31,.95) !important;
  box-shadow: 0 10px 18px rgba(143,36,31,.24) !important;
}

.slot-order-controls {
  left: 12px !important;
  right: 12px !important;
  bottom: 10px !important;
}

.slot-order-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 13px !important;
  background: rgba(255,250,241,.96) !important;
  border-color: rgba(125,91,51,.16) !important;
  box-shadow: 0 10px 20px rgba(52,35,19,.16) !important;
}

.actions {
  direction: ltr !important;
  margin: 20px auto 0 !important;
  padding: 8px;
  border-radius: 24px;
  width: fit-content;
  max-width: 100%;
  background: rgba(255, 250, 241, .58);
  border: 1px solid rgba(125,91,51,.12);
  box-shadow: var(--taif-soft-shadow);
  backdrop-filter: blur(12px);
}

.action-btn {
  min-height: 50px;
  border-radius: 16px !important;
  padding: 12px 22px !important;
  font-weight: 900;
  letter-spacing: .1px;
  background: linear-gradient(135deg, #3f2d1c, #6b4f31) !important;
  color: #ffe2a5 !important;
  box-shadow: 0 12px 26px rgba(52,35,19,.16) !important;
}

.action-btn:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.03);
}

#combineBtn {
  background: linear-gradient(135deg, #173f35, #2f6b5d) !important;
  color: #fff4d8 !important;
}

#clearBtn:not(:disabled) {
  background: linear-gradient(135deg, #8f241f, #c64b38) !important;
  color: #fff8f1 !important;
}

#clearBtn.is-empty,
#clearBtn:disabled {
  background: #d8cec0 !important;
  color: #7c7168 !important;
  box-shadow: none !important;
}

.download-icon-button .download-svg-icon {
  color: #1f7aec;
  background: rgba(255,255,255,.92);
  box-shadow: 0 6px 14px rgba(31,122,236,.14);
}

.result {
  margin-top: 26px !important;
}

#canvas {
  max-width: min(520px, calc(100vw - 44px)) !important;
  max-height: 300px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(125,91,51,.14);
  box-shadow: 0 22px 56px rgba(52,35,19,.18) !important;
}

@media (max-width: 860px) {
  .site-header {
    align-items: stretch !important;
    flex-direction: column;
  }

  .brand-shell {
    width: 100%;
    justify-content: center;
    min-width: 0;
  }

  .top-actions {
    justify-content: center;
  }

  .hero-section {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    min-height: auto;
    text-align: center;
    align-items: center;
  }

  .hero-pills {
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .app-main {
    width: min(100vw - 16px, 1180px);
    padding-top: 14px;
  }

  .site-header {
    padding: 12px 10px !important;
  }

  .brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 15px;
  }

  .top-actions {
    gap: 7px;
  }

  .top-actions .discord-link,
  .top-actions .insta-link,
  .top-actions .lang-toggle,
  .top-actions .help-toggle {
    min-height: 36px !important;
    padding: 7px 10px !important;
    font-size: .84rem !important;
  }

  .hero-copy,
  .upload-card,
  .workspace-panel {
    border-radius: 24px;
  }

  .hero-copy {
    padding: 22px 16px;
  }

  .hero-copy h1 {
    font-size: 2.05rem;
  }

  .upload-card {
    padding: 12px;
    min-height: auto;
  }

  .dropzone {
    min-height: 205px !important;
    border-radius: 22px !important;
    padding: 18px 14px !important;
  }

  .upload-icon-wrap {
    width: 62px;
    height: 62px;
    border-radius: 21px;
    margin-bottom: 12px;
  }

  .upload-icon-wrap svg {
    width: 31px;
    height: 31px;
  }

  #dropzoneTitle {
    font-size: 1.42rem;
  }

  .wrapper {
    padding: 14px !important;
  }

  .slots.scrollable {
    width: min(calc((104px * 3) + (12px * 2) + 30px), calc(100vw - 28px)) !important;
    max-width: min(calc((104px * 3) + (12px * 2) + 30px), calc(100vw - 28px)) !important;
    padding: 8px 15px 16px !important;
    gap: 12px !important;
  }

  .slot {
    width: 104px !important;
    height: 158px !important;
    flex-basis: 104px !important;
    border-radius: 20px !important;
    padding: 10px 8px 40px;
  }

  .slot-order-btn {
    width: 30px !important;
    height: 30px !important;
  }

  .actions {
    width: 100%;
    justify-content: center;
    padding: 8px !important;
    gap: 8px !important;
  }

  .action-btn {
    min-height: 46px;
    padding: 10px 14px !important;
    font-size: .95rem;
  }
}


/* Batch 6B: connected color palette + shape controls */
.shape-tool-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
}

.shape-side-tool {
  min-height: 42px;
  font-size: 1.12rem !important;
  background: linear-gradient(135deg, #fff8ec, #eadcc4) !important;
  color: #4b3621 !important;
  border-color: rgba(75,54,33,.16) !important;
  box-shadow: 0 8px 18px rgba(75,54,33,.10), inset 0 0 0 1px rgba(255,255,255,.5);
}

.shape-side-tool:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(75,54,33,.15), inset 0 0 0 1px rgba(255,255,255,.65);
}

/* The color picker is now a connected popover, not a full-screen modal. */
.tool-color-modal,
.tool-color-modal.visible {
  position: fixed !important;
  inset: 0 !important;
  display: none !important;
  align-items: unset !important;
  justify-content: unset !important;
  background: transparent !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 10020 !important;
  padding: 0 !important;
}

.tool-color-modal.visible {
  display: block !important;
}

.tool-color-panel {
  position: fixed !important;
  width: min(92vw, 318px) !important;
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
  padding: 14px 14px 13px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #fffaf1, #f4ead8) !important;
  border: 1px solid rgba(75,54,33,.18) !important;
  box-shadow: 0 22px 52px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.72) !important;
  transform: none !important;
  animation: colorPopoverIn .18s ease-out both !important;
  pointer-events: auto !important;
}

@keyframes colorPopoverIn {
  from { opacity: 0; transform: translateY(6px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.tool-color-popover-arrow {
  position: absolute;
  top: 28px;
  width: 16px;
  height: 16px;
  background: #fffaf1;
  border-left: 1px solid rgba(75,54,33,.16);
  border-top: 1px solid rgba(75,54,33,.16);
  transform: rotate(45deg);
  pointer-events: none;
}

.tool-color-panel[data-attach-side="right"] .tool-color-popover-arrow {
  right: -8px;
  transform: rotate(135deg);
}

.tool-color-panel[data-attach-side="left"] .tool-color-popover-arrow {
  left: -8px;
  transform: rotate(-45deg);
}

.tool-color-panel[data-attach-side="bottom"] .tool-color-popover-arrow {
  left: 50%;
  top: auto;
  bottom: -8px;
  transform: translateX(-50%) rotate(225deg);
}

.tool-color-icon,
.tool-color-advanced-area,
.tool-color-advanced-btn,
.tool-color-use-btn,
#toolColorAdvancedArea,
#toolColorAdvancedBtn,
#toolColorUseAdvancedBtn {
  display: none !important;
}

.tool-color-close {
  top: 8px !important;
  left: 8px !important;
  width: 30px !important;
  height: 30px !important;
  font-size: 20px !important;
  background: rgba(75,54,33,.08) !important;
  color: #4b3621 !important;
  box-shadow: none !important;
}

.tool-color-title {
  margin: 2px 34px 12px !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
  color: #4b3621 !important;
  text-align: center;
}

.tool-color-cube-grid,
.tool-color-grid.tool-color-cube-grid {
  display: grid !important;
  grid-template-columns: repeat(8, 1fr) !important;
  gap: 7px !important;
  direction: ltr !important;
}

.tool-color-choice.tool-color-cube {
  width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 !important;
  border-radius: 5px !important;
  border: 1px solid rgba(75,54,33,.26) !important;
  background: var(--cube-color) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.42), 0 2px 5px rgba(0,0,0,.12) !important;
  cursor: pointer;
}

.tool-color-choice.tool-color-cube:hover {
  transform: translateY(-1px) scale(1.08) !important;
  box-shadow: 0 5px 10px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.55) !important;
}

.tool-color-choice.tool-color-cube.selected {
  outline: 3px solid rgba(75,54,33,.76) !important;
  outline-offset: 2px;
  transform: scale(1.08) !important;
}

.tool-color-footer {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}

.tool-color-last {
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 12px;
  border: 1px solid rgba(75,54,33,.16);
  background: rgba(255,255,255,.72);
  color: #4b3621;
  font-family: 'Tajawal', sans-serif;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.tool-color-last:hover {
  background: #fffaf1;
  transform: translateY(-1px);
}

.tool-color-last .tool-color-chip,
#toolColorLastChip.tool-color-chip {
  width: 22px !important;
  height: 22px !important;
  border-radius: 5px !important;
  border: 1px solid rgba(75,54,33,.25) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.48) !important;
}

@media (max-width: 720px) {
  .tool-color-panel {
    width: min(94vw, 330px) !important;
    padding: 13px !important;
  }

  .tool-color-cube-grid,
  .tool-color-grid.tool-color-cube-grid {
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 7px !important;
  }

  .tool-color-choice.tool-color-cube {
    width: 25px !important;
    height: 25px !important;
    min-height: 25px !important;
  }
}

@media (max-width: 360px) {
  .tool-color-cube-grid,
  .tool-color-grid.tool-color-cube-grid {
    grid-template-columns: repeat(6, 1fr) !important;
  }
}


/* Batch 6G: restore the previous large color picker with advanced color square */
.tool-color-modal,
.tool-color-modal.visible {
  position: fixed !important;
  inset: 0 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(27, 18, 10, .58) !important;
  backdrop-filter: blur(9px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 10020 !important;
  padding: 14px !important;
  transition: opacity .2s ease !important;
}

.tool-color-modal.visible {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.tool-color-panel {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: min(94vw, 430px) !important;
  max-height: calc(var(--app-height, 100vh) - 28px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 22px 20px 18px !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.98), rgba(255,250,241,.97) 54%, rgba(246,235,217,.97)),
    var(--card) !important;
  border: 1px solid rgba(212, 163, 115, .55) !important;
  box-shadow: 0 30px 78px rgba(0,0,0,.36), inset 0 0 0 1px rgba(255,255,255,.66) !important;
  transform: translateY(16px) scale(.96) !important;
  animation: colorPickerPopIn .25s cubic-bezier(.18, .9, .25, 1.14) forwards !important;
  pointer-events: auto !important;
}

.tool-color-popover-arrow {
  display: none !important;
}

.tool-color-icon {
  width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 auto 3px !important;
  border-radius: 17px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #fff1d6, #f1cf9e) !important;
  color: var(--brown-d) !important;
  font-size: 1.55rem !important;
  box-shadow: 0 13px 28px rgba(75,54,33,.16), inset 0 0 0 1px rgba(255,255,255,.72) !important;
}

.tool-color-close {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  font-size: 22px !important;
  background: rgba(75,54,33,.08) !important;
  color: #4b3621 !important;
  box-shadow: 0 8px 18px rgba(75,54,33,.12) !important;
}

.tool-color-title {
  margin: 0 38px 8px !important;
  font-size: 1.28rem !important;
  line-height: 1.15 !important;
  color: #4b3621 !important;
  text-align: center !important;
}

.tool-color-grid,
.tool-color-grid:not(.tool-color-cube-grid) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  direction: rtl !important;
}

.tool-color-choice,
.tool-color-choice:not(.tool-color-cube),
.tool-color-advanced-btn,
.tool-color-use-btn {
  width: 100% !important;
  min-height: 48px !important;
  height: auto !important;
  padding: 9px 12px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(75,54,33,.14) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(238,227,207,.86)) !important;
  color: #4b3621 !important;
  box-shadow: 0 8px 18px rgba(75,54,33,.08), inset 0 0 0 1px rgba(255,255,255,.56) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transform: none !important;
}

.tool-color-choice.selected {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(212,163,115,.24), 0 12px 22px rgba(75,54,33,.12) !important;
}

.tool-color-chip,
#toolColorLastChip.tool-color-chip {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 9px !important;
  border: 2px solid rgba(255,255,255,.95) !important;
  box-shadow: 0 0 0 1px rgba(75,54,33,.25), inset 0 0 0 1px rgba(0,0,0,.06) !important;
}

.tool-color-advanced-btn,
#toolColorAdvancedBtn,
.tool-color-use-btn,
#toolColorUseAdvancedBtn {
  display: inline-flex !important;
  background: linear-gradient(135deg, var(--brown-d), #6b4f31) !important;
  color: var(--accent) !important;
  margin-top: 2px !important;
}

.tool-color-advanced-btn.return-mode {
  background: linear-gradient(135deg, #efe1c8, #fff8ec) !important;
  color: #4b3621 !important;
}

.tool-color-advanced-area,
#toolColorAdvancedArea {
  display: none !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.58) !important;
  padding: 10px !important;
  margin: 0 !important;
}

.tool-color-advanced-area.visible,
#toolColorAdvancedArea.visible {
  display: block !important;
}

.tool-color-advanced-area .advanced-preview-row {
  margin-bottom: 8px !important;
}

.tool-color-advanced-area .color-square,
#toolColorSquare.color-square {
  display: block !important;
  width: 100% !important;
  height: clamp(150px, 33vh, 240px) !important;
  min-height: 150px !important;
  border-radius: 12px !important;
}

.tool-color-advanced-area .hue-row {
  margin-top: 8px !important;
}

.tool-color-footer,
.tool-color-last,
.tool-color-cube-grid,
.tool-color-choice.tool-color-cube {
  all: unset;
}

@media (max-width: 520px) {
  .tool-color-panel {
    width: min(94vw, 420px) !important;
    padding: 18px 14px 14px !important;
    gap: 8px !important;
  }

  .tool-color-title {
    font-size: 1.14rem !important;
    margin-bottom: 5px !important;
  }

  .tool-color-choice,
  .tool-color-advanced-btn,
  .tool-color-use-btn {
    min-height: 44px !important;
    font-size: .92rem !important;
  }

  .tool-color-advanced-area .color-square,
  #toolColorSquare.color-square {
    height: clamp(145px, 30vh, 220px) !important;
  }
}


/* Batch 6H: big color picker as connected side popover + automatic advanced color apply */
.tool-color-modal,
.tool-color-modal.visible {
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  background: transparent !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 10020 !important;
  padding: 0 !important;
  transition: none !important;
}

.tool-color-modal.visible {
  pointer-events: none !important;
}

.tool-color-panel {
  position: fixed !important;
  left: 0;
  top: 0;
  width: min(420px, calc(100vw - 18px)) !important;
  max-height: calc(var(--app-height, 100vh) - 18px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 18px 18px 16px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.98), rgba(255,250,241,.98) 54%, rgba(246,235,217,.98)),
    var(--card) !important;
  border: 1px solid rgba(212, 163, 115, .58) !important;
  box-shadow: 0 24px 68px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.7) !important;
  transform: translateY(10px) scale(.98) !important;
  opacity: 0 !important;
  animation: none !important;
  pointer-events: none !important;
}

.tool-color-modal.visible .tool-color-panel {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
  animation: colorPopoverIn .18s ease-out both !important;
}

@keyframes colorPopoverIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.tool-color-popover-arrow {
  display: block !important;
  position: absolute !important;
  width: 18px !important;
  height: 18px !important;
  background: rgba(255,250,241,.98) !important;
  border: 1px solid rgba(212, 163, 115, .58) !important;
  box-shadow: -4px 4px 10px rgba(0,0,0,.08) !important;
  transform: rotate(45deg) !important;
  z-index: -1 !important;
}

.tool-color-panel[data-attach-side="right"] .tool-color-popover-arrow {
  right: -9px !important;
  top: 50% !important;
  margin-top: -9px !important;
  border-left: none !important;
  border-bottom: none !important;
}

.tool-color-panel[data-attach-side="left"] .tool-color-popover-arrow {
  left: -9px !important;
  top: 50% !important;
  margin-top: -9px !important;
  border-right: none !important;
  border-top: none !important;
}

.tool-color-panel[data-attach-side="bottom"] .tool-color-popover-arrow {
  bottom: -9px !important;
  left: 50% !important;
  margin-left: -9px !important;
  border-left: none !important;
  border-top: none !important;
}

.tool-color-icon {
  width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 auto 0 !important;
  border-radius: 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #fff1d6, #f1cf9e) !important;
  font-size: 1.35rem !important;
  box-shadow: 0 11px 22px rgba(75,54,33,.14), inset 0 0 0 1px rgba(255,255,255,.72) !important;
}

.tool-color-close {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  font-size: 21px !important;
  background: rgba(75,54,33,.08) !important;
  color: #4b3621 !important;
  box-shadow: 0 8px 18px rgba(75,54,33,.12) !important;
}

.tool-color-title {
  margin: 0 38px 4px !important;
  font-size: 1.16rem !important;
  line-height: 1.15 !important;
  color: #4b3621 !important;
  text-align: center !important;
}

.tool-color-grid,
.tool-color-grid:not(.tool-color-cube-grid) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
  direction: rtl !important;
}

.tool-color-choice,
.tool-color-choice:not(.tool-color-cube),
.tool-color-advanced-btn {
  width: 100% !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 8px 11px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(75,54,33,.14) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(238,227,207,.86)) !important;
  color: #4b3621 !important;
  box-shadow: 0 8px 16px rgba(75,54,33,.075), inset 0 0 0 1px rgba(255,255,255,.56) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

.tool-color-choice.selected {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(212,163,115,.24), 0 12px 22px rgba(75,54,33,.12) !important;
}

.tool-color-chip,
#toolColorLastChip.tool-color-chip {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border-radius: 8px !important;
  border: 2px solid rgba(255,255,255,.95) !important;
  box-shadow: 0 0 0 1px rgba(75,54,33,.25), inset 0 0 0 1px rgba(0,0,0,.06) !important;
}

.tool-color-advanced-btn,
#toolColorAdvancedBtn {
  display: inline-flex !important;
  background: linear-gradient(135deg, var(--brown-d), #6b4f31) !important;
  color: var(--accent) !important;
  margin-top: 0 !important;
}

.tool-color-advanced-btn.return-mode {
  background: linear-gradient(135deg, #315b39, #4d8056) !important;
  color: #fff2d8 !important;
}

.tool-color-use-btn,
#toolColorUseAdvancedBtn {
  display: none !important;
}

.tool-color-advanced-area,
#toolColorAdvancedArea {
  display: none !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.58) !important;
  padding: 9px !important;
  margin: 0 !important;
}

.tool-color-advanced-area.visible,
#toolColorAdvancedArea.visible {
  display: block !important;
}

.tool-color-advanced-area .advanced-preview-row {
  margin-bottom: 7px !important;
}

.tool-color-advanced-area .color-square,
#toolColorSquare.color-square {
  display: block !important;
  width: 100% !important;
  height: clamp(150px, 31vh, 225px) !important;
  min-height: 150px !important;
  border-radius: 12px !important;
  cursor: crosshair !important;
}

.tool-color-advanced-area .hue-row {
  margin-top: 8px !important;
}

@media (max-width: 720px) {
  .tool-color-panel {
    width: min(94vw, 420px) !important;
    padding: 16px 14px 14px !important;
    gap: 8px !important;
  }
  .tool-color-title {
    font-size: 1.06rem !important;
    margin-bottom: 3px !important;
  }
  .tool-color-choice,
  .tool-color-advanced-btn {
    min-height: 42px !important;
    font-size: .91rem !important;
  }
  .tool-color-advanced-area .color-square,
  #toolColorSquare.color-square {
    height: clamp(140px, 28vh, 210px) !important;
  }
}


/* Batch 6I: keep the color picker attached beside the edit panel */
.tool-color-modal,
.tool-color-modal.visible {
  background: transparent !important;
  pointer-events: none !important;
}

.tool-color-modal.visible .tool-color-panel {
  pointer-events: auto !important;
}

.tool-color-panel {
  position: fixed !important;
  max-width: calc(100vw - 12px) !important;
  transition: left .04s linear, top .04s linear !important;
}

.tool-color-panel[data-attach-side="right"] .tool-color-popover-arrow {
  display: block !important;
  right: -9px !important;
  left: auto !important;
  top: 28px !important;
  margin-top: 0 !important;
  bottom: auto !important;
}

.tool-color-panel[data-attach-side="left"] .tool-color-popover-arrow {
  display: block !important;
  left: -9px !important;
  right: auto !important;
  top: 28px !important;
  margin-top: 0 !important;
  bottom: auto !important;
}

@media (max-width: 720px) {
  .tool-color-panel {
    padding: 12px !important;
    gap: 7px !important;
    border-radius: 20px !important;
  }

  .tool-color-icon {
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    font-size: 1.1rem !important;
  }

  .tool-color-title {
    font-size: .98rem !important;
    margin: 0 32px 2px !important;
  }

  .tool-color-grid,
  .tool-color-grid:not(.tool-color-cube-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .tool-color-choice,
  .tool-color-choice:not(.tool-color-cube),
  .tool-color-advanced-btn {
    min-height: 38px !important;
    padding: 6px 8px !important;
    border-radius: 12px !important;
    font-size: .86rem !important;
    gap: 7px !important;
  }

  .tool-color-chip,
  #toolColorLastChip.tool-color-chip {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    border-radius: 7px !important;
  }

  .tool-color-close {
    width: 32px !important;
    height: 32px !important;
    font-size: 19px !important;
  }

  .tool-color-advanced-area,
  #toolColorAdvancedArea {
    padding: 7px !important;
    border-radius: 15px !important;
  }

  .tool-color-advanced-area .advanced-preview-row {
    margin-bottom: 5px !important;
  }

  .tool-color-advanced-area .color-square,
  #toolColorSquare.color-square {
    min-height: 112px !important;
    height: clamp(112px, 22vh, 170px) !important;
  }
}


/* Batch 6J: attached full color picker; advanced controls are always visible */
.tool-color-modal,
.tool-color-modal.visible {
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  background: transparent !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 10020 !important;
  padding: 0 !important;
}

.tool-color-panel {
  position: fixed !important;
  left: var(--tool-color-left, 12px) !important;
  top: var(--tool-color-top, 12px) !important;
  width: min(410px, calc(100vw - 14px)) !important;
  max-height: calc(var(--app-height, 100vh) - 14px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  padding: 15px 15px 14px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.99), rgba(255,250,241,.98) 56%, rgba(246,235,217,.98)),
    var(--card) !important;
  border: 1px solid rgba(212, 163, 115, .58) !important;
  box-shadow: 0 24px 68px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.72) !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: left .04s linear, top .04s linear !important;
}

.tool-color-modal.visible .tool-color-panel {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  animation: colorPopoverIn .18s ease-out both !important;
}

.tool-color-icon {
  order: 1 !important;
  width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 auto -2px !important;
  border-radius: 14px !important;
  display: flex !important;
}

.tool-color-title {
  order: 2 !important;
  margin: 0 36px 2px !important;
  font-size: 1.08rem !important;
}

.tool-color-grid,
.tool-color-grid:not(.tool-color-cube-grid) {
  order: 3 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.tool-color-choice,
.tool-color-choice:not(.tool-color-cube) {
  min-height: 40px !important;
  padding: 7px 10px !important;
  border-radius: 14px !important;
  font-size: .9rem !important;
}

.tool-color-chip,
#toolColorLastChip.tool-color-chip {
  width: 23px !important;
  height: 23px !important;
  min-width: 23px !important;
  border-radius: 8px !important;
}

.tool-color-advanced-area,
#toolColorAdvancedArea,
.tool-color-advanced-area.visible,
#toolColorAdvancedArea.visible {
  order: 4 !important;
  display: block !important;
  border-radius: 17px !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.58) !important;
  padding: 8px !important;
  margin: 0 !important;
}

.tool-color-advanced-area .advanced-preview-row {
  margin-bottom: 6px !important;
}

.tool-color-advanced-area .color-square,
#toolColorSquare.color-square {
  display: block !important;
  width: 100% !important;
  min-height: 128px !important;
  height: clamp(128px, 25vh, 195px) !important;
  border-radius: 12px !important;
  cursor: crosshair !important;
}

.tool-color-advanced-area .hue-row {
  margin-top: 7px !important;
}

.tool-color-advanced-area .hue-slider {
  height: 16px !important;
}

.tool-color-advanced-btn,
#toolColorAdvancedBtn {
  order: 5 !important;
  display: inline-flex !important;
  min-height: 40px !important;
  padding: 7px 12px !important;
  border-radius: 14px !important;
  margin-top: 0 !important;
  background: linear-gradient(135deg, #315b39, #4d8056) !important;
  color: #fff2d8 !important;
  box-shadow: 0 10px 18px rgba(49,91,57,.18), inset 0 0 0 1px rgba(255,255,255,.20) !important;
}

.tool-color-use-btn,
#toolColorUseAdvancedBtn {
  display: none !important;
}

.tool-color-popover-arrow {
  display: block !important;
}

.tool-color-panel[data-attach-side="right"] .tool-color-popover-arrow {
  right: -9px !important;
  left: auto !important;
  top: 28px !important;
  bottom: auto !important;
  margin-top: 0 !important;
}

.tool-color-panel[data-attach-side="left"] .tool-color-popover-arrow {
  left: -9px !important;
  right: auto !important;
  top: 28px !important;
  bottom: auto !important;
  margin-top: 0 !important;
}

@media (max-width: 720px) {
  .tool-color-panel {
    width: min(330px, calc(100vw - 12px)) !important;
    padding: 10px !important;
    gap: 6px !important;
    border-radius: 18px !important;
  }

  .tool-color-icon {
    width: 31px !important;
    height: 31px !important;
    min-height: 31px !important;
    font-size: 1rem !important;
  }

  .tool-color-title {
    font-size: .88rem !important;
    margin: 0 30px 0 !important;
  }

  .tool-color-grid,
  .tool-color-grid:not(.tool-color-cube-grid) {
    gap: 6px !important;
  }

  .tool-color-choice,
  .tool-color-choice:not(.tool-color-cube) {
    min-height: 34px !important;
    padding: 5px 7px !important;
    border-radius: 11px !important;
    font-size: .8rem !important;
    gap: 6px !important;
  }

  .tool-color-chip,
  #toolColorLastChip.tool-color-chip {
    width: 19px !important;
    height: 19px !important;
    min-width: 19px !important;
  }

  .tool-color-advanced-area,
  #toolColorAdvancedArea,
  .tool-color-advanced-area.visible,
  #toolColorAdvancedArea.visible {
    padding: 6px !important;
    border-radius: 13px !important;
  }

  .tool-color-advanced-area .advanced-preview-row {
    margin-bottom: 4px !important;
  }

  .tool-color-advanced-area .color-square,
  #toolColorSquare.color-square {
    min-height: 96px !important;
    height: clamp(96px, 19vh, 145px) !important;
  }

  .tool-color-advanced-area .hue-row {
    margin-top: 5px !important;
  }

  .tool-color-advanced-area .hue-label {
    font-size: .72rem !important;
  }

  .tool-color-advanced-area .hue-slider {
    height: 14px !important;
  }

  .tool-color-advanced-btn,
  #toolColorAdvancedBtn {
    min-height: 34px !important;
    padding: 5px 10px !important;
    border-radius: 11px !important;
    font-size: .8rem !important;
  }
}


/* Batch 6K: color picker must stay completely hidden until Choose color is clicked */
#toolColorModal.tool-color-modal:not(.visible),
#toolColorModal.tool-color-modal[aria-hidden="true"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#toolColorModal.tool-color-modal:not(.visible) .tool-color-panel,
#toolColorModal.tool-color-modal[aria-hidden="true"] .tool-color-panel {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#toolColorModal.tool-color-modal.visible,
#toolColorModal.tool-color-modal[aria-hidden="false"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

#toolColorModal.tool-color-modal.visible .tool-color-panel,
#toolColorModal.tool-color-modal[aria-hidden="false"] .tool-color-panel {
  display: flex !important;
  visibility: visible;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Batch 6L: compact attached full color picker, toggled by Choose color */
#toolColorAdvancedBtn,
.tool-color-advanced-btn,
#toolColorUseAdvancedBtn,
.tool-color-use-btn {
  display: none !important;
}

#toolColorModal.tool-color-modal:not(.visible),
#toolColorModal.tool-color-modal[aria-hidden="true"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#toolColorModal.tool-color-modal.visible,
#toolColorModal.tool-color-modal[aria-hidden="false"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
  background: transparent !important;
}

#toolColorModal .tool-color-panel {
  width: var(--marker-panel-width) !important;
  max-width: calc(100vw - 12px) !important;
  min-width: 160px !important;
  padding: 10px !important;
  gap: 7px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

#toolColorModal.visible .tool-color-panel,
#toolColorModal[aria-hidden="false"] .tool-color-panel {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#toolColorModal .tool-color-icon {
  width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  border-radius: 12px !important;
  font-size: .98rem !important;
  margin-bottom: -2px !important;
}

#toolColorModal .tool-color-close {
  width: 28px !important;
  height: 28px !important;
  top: 8px !important;
  left: 8px !important;
  font-size: 18px !important;
}

#toolColorModal .tool-color-title {
  font-size: .86rem !important;
  margin: 0 28px 0 !important;
  line-height: 1.15 !important;
}

#toolColorModal .tool-color-grid,
#toolColorModal .tool-color-grid:not(.tool-color-cube-grid) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

#toolColorModal .tool-color-choice,
#toolColorModal .tool-color-choice:not(.tool-color-cube) {
  min-height: 32px !important;
  padding: 5px 6px !important;
  border-radius: 11px !important;
  font-size: .76rem !important;
  gap: 6px !important;
}

#toolColorModal .tool-color-chip,
#toolColorLastChip.tool-color-chip {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  border-radius: 6px !important;
}

#toolColorLastBtn.disabled,
#toolColorLastBtn:disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
  filter: grayscale(.25) !important;
}

#toolColorLastBtn.disabled #toolColorLastChip,
#toolColorLastBtn:disabled #toolColorLastChip {
  background: repeating-linear-gradient(45deg, #e6dfd2 0 4px, #f6efe2 4px 8px) !important;
}

#toolColorModal .tool-color-advanced-area,
#toolColorAdvancedArea,
#toolColorAdvancedArea.visible {
  display: block !important;
  padding: 6px !important;
  border-radius: 13px !important;
  margin: 0 !important;
}

#toolColorModal .tool-color-advanced-area .advanced-preview-row {
  margin-bottom: 4px !important;
}

#toolColorModal .tool-color-advanced-area .advanced-preview-swatch {
  width: 22px !important;
  height: 22px !important;
  border-radius: 8px !important;
}

#toolColorModal .tool-color-advanced-area .advanced-label {
  font-size: .72rem !important;
}

#toolColorModal .tool-color-advanced-area .color-square,
#toolColorSquare.color-square {
  min-height: 96px !important;
  height: clamp(96px, 18vh, 140px) !important;
  border-radius: 10px !important;
}

#toolColorModal .tool-color-advanced-area .hue-row {
  margin-top: 5px !important;
}

#toolColorModal .tool-color-advanced-area .hue-label {
  font-size: .68rem !important;
}

#toolColorModal .tool-color-advanced-area .hue-slider {
  height: 13px !important;
}

@media (max-width: 720px) {
  #toolColorModal .tool-color-panel {
    width: var(--marker-panel-width) !important;
    min-width: 150px !important;
    padding: 8px !important;
    gap: 5px !important;
  }
  #toolColorModal .tool-color-title { font-size: .8rem !important; }
  #toolColorModal .tool-color-choice,
  #toolColorModal .tool-color-choice:not(.tool-color-cube) {
    min-height: 30px !important;
    font-size: .72rem !important;
  }
  #toolColorModal .tool-color-advanced-area .color-square,
  #toolColorSquare.color-square {
    min-height: 86px !important;
    height: clamp(86px, 16vh, 120px) !important;
  }
}


/* Batch 6M: side switch button removed because the annotation panel is draggable. */
#panelSideToggle,
.marker-side-toggle {
  display: none !important;
}

/* Keep marker title centered after removing the side switch button. */
.marker-topbar {
  padding-inline: 0 !important;
}

/* Auth / Discord login gate */
.auth-status-btn {
  color: var(--accent);
  text-decoration: none;
  font-size: 1.02rem;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  border: 1px solid rgba(212,163,115,.35);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    linear-gradient(135deg, #5a4027, #3f2d1c);
  padding: 11px 18px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.05);
  cursor: pointer;
  user-select: none;
  font-family: 'Tajawal', sans-serif;
  font-weight: 700;
  letter-spacing: .2px;
  gap: 8px;
  white-space: nowrap;
}

.auth-status-btn:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 14px 28px rgba(0,0,0,.20), inset 0 0 0 1px rgba(255,255,255,.08);
  filter: brightness(1.03);
}

.auth-status-btn.auth-logged-in {
  color: #b7f7c4;
  border-color: rgba(110, 231, 140, .42);
  background:
    linear-gradient(135deg, rgba(92,190,115,.18), rgba(255,255,255,.03)),
    linear-gradient(135deg, #314e34, #263524);
}

.auth-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(12, 10, 8, .68);
  backdrop-filter: blur(10px);
  z-index: 13000;
}

.auth-modal.visible {
  display: flex;
}

.auth-panel {
  position: relative;
  width: min(420px, calc(100vw - 30px));
  border-radius: 26px;
  padding: 24px 22px 20px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,220,160,.24), transparent 34%),
    rgba(255, 250, 241, .97);
  border: 1px solid rgba(212,163,115,.35);
  box-shadow: 0 28px 80px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.65);
  color: #4b3621;
  animation: authPopIn .22s ease-out both;
  text-align: center;
}

@keyframes authPopIn {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-close {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(75,54,33,.08);
  color: #4b3621;
  font-size: 20px;
  cursor: pointer;
}

.auth-icon {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ffe8b8, #f6d58f);
  box-shadow: 0 12px 28px rgba(212,163,115,.28);
  font-size: 1.55rem;
}

.auth-title {
  margin: 0 0 8px;
  font-family: 'Amiri', serif;
  font-size: 1.55rem;
  line-height: 1.2;
}

.auth-message {
  margin: 0 auto 18px;
  max-width: 32ch;
  color: rgba(75,54,33,.75);
  line-height: 1.7;
  font-size: .98rem;
}

.auth-discord-btn,
.auth-cancel-btn {
  width: 100%;
  min-height: 48px;
  border-radius: 16px;
  border: none;
  font-family: 'Tajawal', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

.auth-discord-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #5865f2, #404eed);
  color: white;
  box-shadow: 0 16px 34px rgba(88,101,242,.25);
}

.auth-cancel-btn {
  margin-top: 10px;
  background: rgba(75,54,33,.08);
  color: #4b3621;
}

.auth-discord-btn:hover,
.auth-cancel-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.auth-hint {
  margin: 14px 0 0;
  color: rgba(75,54,33,.58);
  font-size: .86rem;
}

@media (max-width: 700px) {
  .auth-status-btn {
    padding: 9px 13px;
    min-height: 40px;
    font-size: .92rem;
  }
  .auth-panel {
    padding: 22px 16px 18px;
    border-radius: 22px;
  }
}


/* Auth Batch 2A: profile menu and local preferences */
.profile-shell {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.auth-status-btn .auth-avatar-mini {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.18);
  color: #fffaf1;
  font-size: .78rem;
  font-weight: 900;
  flex: 0 0 auto;
}

.auth-status-btn .auth-avatar-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.auth-user-label {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-caret {
  font-size: .8rem;
  opacity: .8;
}

.profile-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(320px, calc(100vw - 28px));
  display: none;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,220,160,.24), transparent 36%),
    rgba(255, 250, 241, .98);
  color: #4b3621;
  border: 1px solid rgba(212,163,115,.36);
  box-shadow: 0 24px 70px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.65);
  z-index: 15000;
  text-align: start;
  transform-origin: top right;
  animation: profileMenuIn .16s ease-out both;
}

.profile-menu.visible { display: flex; }

@keyframes profileMenuIn {
  from { opacity: 0; transform: translateY(-8px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.profile-menu::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 28px;
  width: 14px;
  height: 14px;
  background: rgba(255, 250, 241, .98);
  border-left: 1px solid rgba(212,163,115,.36);
  border-top: 1px solid rgba(212,163,115,.36);
  transform: rotate(45deg);
}

.profile-menu-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(75,54,33,.1);
}

.profile-avatar {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: linear-gradient(135deg, #5a4027, #3f2d1c);
  color: #f6d58f;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(75,54,33,.18);
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-user-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.profile-user-copy strong {
  font-size: 1.02rem;
  color: #3c2a16;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 210px;
}

.profile-user-copy span {
  font-size: .83rem;
  color: rgba(75,54,33,.64);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 210px;
}

.profile-menu-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-setting-label {
  color: rgba(75,54,33,.72);
  font-weight: 800;
  font-size: .88rem;
}

.profile-toggle-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.profile-toggle-btn,
.profile-logout-btn {
  min-height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(75,54,33,.12);
  font-family: 'Tajawal', sans-serif;
  font-weight: 800;
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

.profile-toggle-btn {
  background: rgba(75,54,33,.07);
  color: #4b3621;
}

.profile-toggle-btn.active {
  background: linear-gradient(135deg, #4b3621, #6b4f31);
  color: #f6d58f;
  box-shadow: 0 10px 20px rgba(75,54,33,.16);
}

.profile-logout-btn {
  width: 100%;
  background: rgba(192,57,43,.10);
  color: #a9362b;
  border-color: rgba(192,57,43,.18);
}

.profile-toggle-btn:hover,
.profile-logout-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
}

html[data-theme="dark"] {
  --bg: #15100c;
  --card: #211811;
  --border: #4d3927;
  --brown-d: #f0d7a2;
  --accent: #f6d58f;
}

html[data-theme="dark"] body {
  background: #120d09;
  color: #f5e6c7;
}

html[data-theme="dark"] body::before {
  opacity: .18;
  filter: invert(1) sepia(.25) brightness(.75);
}

html[data-theme="dark"] .hero-section,
html[data-theme="dark"] .upload-card,
html[data-theme="dark"] .workspace-panel,
html[data-theme="dark"] .dropzone,
html[data-theme="dark"] .slot,
html[data-theme="dark"] .overlay-panel.inline-style-007,
html[data-theme="dark"] .overlay-panel.inline-style-013,
html[data-theme="dark"] .help-panel,
html[data-theme="dark"] #markerPanel,
html[data-theme="dark"] .tool-color-panel,
html[data-theme="dark"] .restart-confirm-panel,
html[data-theme="dark"] .auth-panel,
html[data-theme="dark"] .profile-menu {
  background: rgba(33, 24, 17, .97);
  color: #f5e6c7;
  border-color: rgba(246,213,143,.22);
}

html[data-theme="dark"] .hero-lead,
html[data-theme="dark"] .hero-copy p,
html[data-theme="dark"] .dropzone,
html[data-theme="dark"] .auth-message,
html[data-theme="dark"] .auth-hint,
html[data-theme="dark"] .profile-user-copy span,
html[data-theme="dark"] .profile-setting-label,
html[data-theme="dark"] .tool-color-title,
html[data-theme="dark"] .marker-title,
html[data-theme="dark"] .advanced-label,
html[data-theme="dark"] .hue-label {
  color: rgba(245,230,199,.78);
}

html[data-theme="dark"] .profile-user-copy strong,
html[data-theme="dark"] .auth-title,
html[data-theme="dark"] .restart-confirm-title {
  color: #f6d58f;
}

html[data-theme="dark"] .profile-menu::before {
  background: rgba(33, 24, 17, .97);
  border-color: rgba(246,213,143,.22);
}

html[data-theme="dark"] .profile-toggle-btn,
html[data-theme="dark"] .auth-cancel-btn,
html[data-theme="dark"] .marker-tool,
html[data-theme="dark"] .marker-cancel {
  background: rgba(255,255,255,.08);
  color: #f5e6c7;
  border-color: rgba(246,213,143,.16);
}

html[data-theme="dark"] input,
html[data-theme="dark"] #pdfPageSearch {
  background: rgba(255,255,255,.08);
  color: #f5e6c7;
  border-color: rgba(246,213,143,.18);
}

@media (max-width: 700px) {
  .profile-menu {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: top center;
  }
  .profile-menu::before {
    right: 50%;
    transform: translateX(50%) rotate(45deg);
  }
  .auth-user-label {
    max-width: 84px;
  }
}