/* === ROOT TOKENS ========================================================= */

:root {
  --bg: #0f0f12;
  --panel: #111116;
  --panel2: #1b1b22;
  --ink: #e8e8ec;
  --muted: #aeb5c3;
  --stroke: #30303a;
  --stroke-soft: #24242a;
  --accent: #6aa3ff;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.45);

  --toolsW: 300px;      /* left column */
  --inspW: 300px;       /* right column */

  --select-blue: #52a2ff;
  --select-blue-strong: #2c84ff;
  --green: #518e4b;
}

/* === GLOBAL LAYOUT ======================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
  font-size: 12px;              /* one step down from the old 13px */
  line-height: 1.4;
  margin: 0;
  padding: 0;
  overflow: hidden; /* prevent whole-page scrolling */
}


/* Top bar --------------------------------------------------------------- */

.topbar {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: #0c0c11;
  border-bottom: 1px solid var(--stroke);
  position: sticky;
  top: 0;
  z-index: 100;
}


/* === TOPBAR: BRAND BLOCK ============================================ */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-right:6px;
  user-select:none;
}

.brandLogo{
  width:30px;
  height:30px;
  flex:0 0 30px;
  display:block;
}

.brandName{
  font-weight:800;
  letter-spacing:.10em;
  font-size:12px;
  color:var(--text, #e8e8ec);
  white-space:nowrap;
}

.caps{ text-transform:uppercase; }


/* === TOPBAR SECONDARY LABEL ======================================= */

.brandSecondary{
  margin-left: 10px;
  opacity: 0.8;
  font-size: 13px;
  white-space: nowrap;
}

.ver{
  color:#888;
  font-size:11px;
  margin-left:6px;
  text-transform:uppercase;
  font-weight: 700;
}

/* Hide on mobile */
@media (max-width: 720px){
  .ver{
    display:none;
  }
}


/* === TOPBAR: CUSTOM COLORS GROUP ==================================== */

.customColors{
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
  height: 28px;
}

.customColorsLabel p{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  white-space: nowrap;
}

.customColorsLabel{
  margin: 0 !important;          /* THIS is the big one for <p> */
  padding: 0 !important;
  line-height: 0.8 !important;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.customColors button,
.customColors .btn,
.customColors input[type="text"]{
  height: 28px;
  line-height: 14px;
  padding-top: 0;
  padding-bottom: 0;
  display: inline-flex;
  align-items: center;
}

/* === TOPBAR: CUSTOM COLORS LABEL HEIGHT FIX ========================= */

.customColors .customColorsLabel,
.customColors .label,
.customColors label,
.customColors span{
  margin: 0 !important;
  padding: 0 !important;

  font-size: 12px;
  line-height: 12px;          /* true single-line */
  height: 12px;               /* clamp */
  display: inline-flex;
  align-items: center;

  white-space: nowrap;
}

/* ==================================================================== */

#inspectorHelp{
  transition: opacity 180ms ease, max-height 220ms ease;
  opacity: 1;
  overflow-y: auto;           /* <-- THIS is the key */
  overflow-x: hidden;
  padding-right: 10px;        /* optional: keeps text off the scrollbar */
}




/* === HELP: DIVIDER + META === */
.help-divider{
  border: 0;
  border-top: 1px solid #24242a;
  margin: 14px 0 12px;
}

.help-meta{
  font-size: 12px;
  line-height: 1.4;
  color: #cfcfd6;
}

.help-meta strong{
  color: #e8e8ec;
}

.help-meta-sub{
  color: #a9a9b3;
}
.inspectorHelp ul {
  margin-left: 0;
  padding-left: 16px; /* try 12px–20px */
  padding-right: 8px;
}

.inspectorHelp li {
	margin-bottom: 6px;
}

.liIcon{
  width: 18px;
  height: 18px;
  margin-right: 0px;
  vertical-align: -5px; /* nudges it down to align with text */
  opacity: 1;
}

#inspectorHelp.is-hidden{
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

/* === INSPECTOR LAYOUT: LET HELP FILL AVAILABLE HEIGHT === */

#inspWrap{
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;              /* critical for nested scrolling */
}

#inspInner{
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;              /* critical for nested scrolling */
}

/* Make the help area take remaining space and scroll */
#inspectorHelp{
  transition: opacity 180ms ease, max-height 220ms ease;
  flex: 1 1 auto;             /* <-- fills the “empty bottom” */
  min-height: 0;              /* <-- allows scroll inside flex */
  max-height: none;           /* stop fighting the parent height */

  opacity: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 10px;
}

/* Keep your collapse behavior */
#inspectorHelp.is-hidden{
  flex: 0 0 auto;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}


/* ==================================================================== */


/* === PALETTE BAR (TOPBAR SUB-BAR) ======================================= */

.topbar-sub {
  border-bottom: 1px solid var(--stroke);
  background: #111116;
}

.paletteBar {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 4px 8px;
  font-size: 12px;
}

.paletteBar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.paletteBar-label {
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

.paletteBar-import .btn {
  padding-inline: 10px;
}

/* Scrollable chip strip */
.paletteBar-chips {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  margin-left: 4px;
  scrollbar-width: thin;
}

/* === PALETTE BAR NOTICE OVERLAY ====================================== */

.paletteBarNotice{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  padding: 0 12px;
}

/* Respect the HTML [hidden] attribute (author styles override UA defaults) */
.paletteBarNotice[hidden]{
  display: none !important;
}

.paletteBarNotice-inner{
  max-width: 720px;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--stroke-soft);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

/* individual palette chips – 76×25, hex only */
.paletteChip {
  flex: 0 0 auto;
  width: 76px;
  height: 25px;
  border-radius: 4px;
  border: 1px solid #30303a;
  box-sizing: border-box;
  padding: 3px 4px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  outline: none;
  transition:
    transform 0.08s ease-out,
    box-shadow 0.08s ease-out,
    border-color 0.08s ease-out;
}

.paletteChip-hex {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  letter-spacing: 0.03em;
  opacity: 0.95;
}

.paletteChip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  border-color: var(--accent);
}

/* micro feedback when copied */
.paletteChip--copied {
  transform: scale(0.97);
  box-shadow: 0 0 0 2px var(--accent);
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .paletteBar {
    flex-direction: column;
  }

  .paletteBar-left {
    justify-content: space-between;
  }

  .paletteBar-chips {
    margin-left: 0;
  }
}

/* === BASIC COLORS UNDER COLOR INPUTS =================================== */

.basicColorsRow {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.basicColorSwatch {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid #30303a;
  padding: 0;
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
}

.basicColorSwatch:hover {
  border-color: var(--accent);
}


body.handPanning .item {
  pointer-events: none !important;
}

body.handPanning {
  cursor: grab !important;
}

body.handPanning:active {
  cursor: grabbing !important;
}


/* Push right-side items (Tips button) to the edge */
.topbarSpacer {
  flex: 1;
}

/* Ghost-style buttons (used for Tips & Help, HUD Close, etc.) */
.btn-ghost {
  background: transparent;
  border-color: #30303a;
}

.btn-ghost:hover {
  background: #1b1b22;
}

/* === HUD LINK ========================================================= */

.hud .hudLink,
.inspectorHelp .hudLink {
  color: #f08000;
  text-decoration: none;
  font-weight: 700;
}

.hud .hudLink:hover {
  text-decoration: underline;
  color: #f0b800;
}

.hud .hudLink:focus-visible {
  outline: 2px solid #6aa3ff;
  outline-offset: 2px;
  border-radius: 6px;
}



/* Range + pill wrapper (same as Zoom) */
.rangeWrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The pill displaying the % */
.rangeWrap .pill {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.2;
  border: 1px solid #30303a;
  background: #1b1b22;
  white-space: nowrap;
}

/* Main 3-column shell ---------------------------------------------------- */

/* Main 3-column shell ---------------------------------------------------- */
.wrap,
.shell {
  display: grid;
  grid-template-columns: var(--toolsW) 6px 1fr var(--inspW);
  gap: 0;
  height: calc(100vh - 96px); /* 48px topbar + ~46px palette bar + borders */
  overflow: hidden;
}


/* Left tools column */

#toolsWrap {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 100%;
  background: var(--panel);
  border-right: 1px solid var(--stroke);
  overflow: auto;
}

#tools {
  padding: 12px;
}

/* Splitter between left and stage */

#splitter {
  width: 6px;
  cursor: col-resize;
  background: #0d0d12;
  border-left: 1px solid var(--stroke);
  border-right: 1px solid #24242a;
}

#splitter:hover {
  background: #13131a;
}

.stageWrap {
  position: relative;
  overflow: auto;          /* scroll the artboard here */
  background: #0b0b10;     /* your canvas colour (overridden by JS) */
  min-height: 0;
  height: 100%;

  /* --- Rulers + workspace layout (stable across resize/scroll) --- */
  display: grid;
  grid-template-columns: 52px 1fr; /* left ruler + workspace */
  grid-template-rows: 24px 1fr;    /* top ruler + content */
}

/* Right inspector column */

#inspWrap {
  height: 100%;
  background: var(--panel);
  border-left: 1px solid var(--stroke);
  overflow: auto;
}

#inspInner {
  padding: 12px;
}

/* Inspector scroll container --------------------------------------------- */
#inspWrap {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#inspInner {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* === BUTTONS, INPUTS, TYPOGRAPHY ======================================== */

.btn {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 3px 6px;                 /* reduced size per request */
  margin: 4px 0px;                  /* vertical margins added */
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: #1b1b22;
  color: #ffffff;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  letter-spacing: 1px;
}
.btn:hover {
  border: 1px solid #f08000; /* Tangerine border color on hover */
  box-shadow: 0 0 0 1px rgba(240, 128, 0, 0.15), 0 0 16px rgba(240, 128, 0, 0.35);
  color: #fff;
}

.btn.small {
  padding: 4px 6px;
  font-size: 11px;
  margin: 8px 0px;
  letter-spacing: 1px;
}



.btn.small.is-active{
  outline: 2px solid var(--select-blue);
  box-shadow: 0 0 0 2px rgba(106,163,255,.22);
}

.btn.ghost,
.btn-ghost {
  background: transparent;
}

.btn:hover {
  filter: brightness(1.08);
}

.btn:active {
  transform: translateY(1px);
}

.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #1b1b22;
  border: 1px solid var(--stroke);
  color: #cfd5e4;
  font-size: 11px;
}

/* Special treatment for the Save JSON button */
.btn-save {
  border: 2px solid #f08000;
  box-shadow:
    0 0 0 2px rgba(240, 128, 0, 0.15),
	0 0 16px rgba(240, 128, 0, 0.35);
}

.btn-save:hover {
  border: 2px solid #ff9a26;
  box-shadow:
    0 0 0 1px rgba(255, 154, 38, 0.6),
    0 0 20px rgba(255, 154, 38, 0.7);
}


/* Form fields ----------------------------------------------------------- */

label {
  font-size: 11px;
  color: var(--muted);
  display: block;
  margin: 8px 0 4px;
}

input[type="text"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 8px 9px;
  border-radius: 10px;
  border: 1px solid #2b2b33;
  background: #0d0d12;
  color: #ffffff;
  font-size: 12px;
}

/* Compact numeric inputs in Inspector so steppers stay clickable */
#insp input[type="number"] {
  padding: 2px 4px;
}

textarea {
  min-height: 84px;
  resize: vertical;
}

input[type="range"] {
  width: 100%;
}

.hint {
  font-size: 11px;
  color: #9097a8;
}

.hint-warn {
  color: #c7a36a;
  font-weight: 700;
  letter-spacing: .2px;
}

/* Headings -------------------------------------------------------------- */

h1 {
  font-size: 16px;
  margin: 0 0 10px;
}

h2 {
  font-size: 12px;
  margin: 14px 0 6px;
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
}



/* === TOOLS: PAGE SETUP COLLAPSIBLE ====================================== */

.gsFold{
  /* border: 1px solid var(--stroke); */
  border: 1px solid #424242;
  border-radius: var(--radius);
  background: rgba(17,17,22,0.65);
  padding-top: 4px;
  padding-right: 10px;
  padding-bottom: 7px;
  padding-left: 10px;
  margin: 10px 0;
}

.gsFold > summary{
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0;
}

.gsFold > summary::-webkit-details-marker{ display:none; }

.gsFold > summary::after{
  content: "▾";
  color: var(--muted);
  font-size: 24px;
  margin-left: 10px;
}

.gsFold:not([open]) > summary::after{ content: "▸"; }

.gsFoldBody{
  padding-top: 10px;
}

.gsFold:not([open]) .gsFoldBody{ padding-top: 0; }

.gsFoldDivider{
  height: 1px;
  background: var(--stroke-soft);
  margin: 12px 0;
}

.gsFoldSub{
  /* just a semantic wrapper; spacing is handled by headings */
}
/* Layout helpers -------------------------------------------------------- */

.row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.row > * {
  flex: 1;
}

.rows-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Keep 2-column rows visually aligned when the right column has no visible label */
.ghostLabel{
  visibility: hidden;
}


/* === INSPECTOR: SHADOW & GLOW ROW (TEXT) ================================ */
.shadowRow{
  flex-wrap: nowrap;
}
.shadowRow > div{
  flex: 1 1 72px;
  min-width: 72px;
}
.shadowRow .shOpacity{
  flex: 1 1 88px;
  min-width: 88px;
}
.shadowRow .shColor{
  flex: 0 0 52px;
  min-width: 52px;
}
.shadowRow .shColor input[type="color"]{
  width: 44px;
  padding: 0;
}
/* Inspector: inline number + checkbox (e.g., Leading Auto) ---------------- */
.inlineToggle {
  display: flex;
  gap: 8px;
  align-items: center;
}

.inlineToggle > input[type="number"] {
  flex: 1;
}

.inlineToggleLabel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0;
  white-space: nowrap;
}

.inlineToggleLabel input[type="checkbox"] {
  margin: 0;
}

/* === LEADING AUTO UNDER INPUT ======================================= */
.leadAutoLabel{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  user-select: none;
}


/* === RULERS VISUAL TOGGLE (NO LAYOUT SHIFT) ========================== */
.rulers-off .rulerTop,
.rulers-off .rulerLeft,
.rulers-off .rulerCorner {
  display: none;
}

.rulers-off .workspace {
  position: relative;
  margin: 0;
  overflow: hidden;
}

/* === RULERS + WORKSPACE + PAGE ========================================== */

.rulerTop {
  grid-column: 2;
  grid-row: 1;

  position: sticky;
  top: 0;
  left: 52px;             /* stay pinned during horizontal scroll */
  height: 24px;
  width: 100%;
  background: #111111 !important;
  border-bottom: 1px solid #24242a;
  z-index: 20;
  display: block;
  padding-left: 0;
  color: #8c93a6;
  font-size: 11px;
}

/* Top-left corner square where rulers meet */
.rulerCorner{
  grid-column: 1;
  grid-row: 1;

  position: sticky;
  top: 0;
  left: 0;
  width: 52px;
  height: 24px;
  background: #111111 !important;
  border-right: 1px solid #24242a;
  border-bottom: 1px solid #24242a;
  z-index: 25;
}

.rulerLeft {
  grid-column: 1;
  grid-row: 2;

  position: sticky;
  top: 24px;              /* sits under the top ruler */
  left: 0;                /* stay pinned during horizontal scroll */
  align-self: stretch;    /* fill available height */
  width: 52px;
  background: #111111 !important;
  border-right: 1px solid #24242a;
  z-index: 20;
  color: #8c93a6;
  font-size: 11px;
  display: block;
  height: 100%;
}

/* Ruler canvas (drawn by JS) */
.gsRulerCanvas{
  display:block;
}

/* Hide both when rulers are toggled off */
.rulers-hidden .rulerTop,
.rulers-hidden .rulerLeft,
.rulers-hidden .rulerCorner {
  display: none;
}

.workspace {
  grid-column: 2;
  grid-row: 2;

  position: relative;
  margin-top: 0;
  margin-left: 0;

  overflow: hidden; /* stageWrap is the scroll container */
}

.mainRow,
.workspace {
  /* Fill the window at minimum, but allow taller layouts */
  min-height: calc(100vh - 64px);
  height: auto;
}
.mainRow, .workspace {
  min-height: calc(100vh - 64px);
  height: auto;
}

/* IMPORTANT: When rulers are ON, .workspace already sits in grid column 2.
   Do not offset it horizontally or the scroll range will be wrong.
   Any clearance for hidden rulers should be handled by the grid layout
   (or by the .rulers-off/.rulers-hidden rules), not a global margin. */

/* === CHROME CANVAS VERTICAL SCROLL FIX (REMOVED) ==================
   (Scroll container is #stageWrap only. Keep .workspace non-scrollable.)
*/
.page {
  position: relative;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transform-origin: 0 0;
  user-select: none;
  border: 1px solid #dedede;
  isolation: isolate; /* ensures children blend with bg properly */
}

.itemsWrap {
  mix-blend-mode: normal; /* allows children blend modes to pass through */
}

.gridCanvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .6;

  /* === STACKING (Build 98 layered backgrounds) ======================
     Background layers must sit BEHIND the grid + items.
     Without explicit z-index, bgFill/bgImg (which use z-index) can
     rise above the canvas and make the grid appear to "disappear".
  */
  z-index: 20;
}

/* Safe print margin guide */
/* Safe print margin guide */
:root {
  --margin-guide-color: rgba(240, 128, 0, 0.9) !important;  /* change me anytime */
}

.printMargins {
  position: absolute;
  box-sizing: border-box;
  border: 2px dashed var(--margin-guide-color);
  pointer-events: none; /* don’t block dragging / clicking items */

  /* Always above items/photos (including full-bleed photos) */
  z-index: 60;
}

.bgLayer {
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* Keep backgrounds behind grid/items */
  z-index: 0;
}

.bgLayer .bgFill,
.bgLayer .bgImg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* The image/tile overlay always sits above the fill */
.bgLayer .bgImg {
  z-index: 5;
}

.bgLayer .bgFill {
  z-index: 1;
}

.items {
  position: absolute;
  inset: 0;
  z-index: 30;
}

.checkbox-item {
    display: inline-block; /* Allows margins, padding, width, and height settings */
    margin-right: 20px; /* Adds horizontal space */
    vertical-align: middle; /* Aligns them vertically if heights differ */
}

/* === CIRCLE ITEM ==================================================== */

.circleWrap,
.starburstWrap {
  position: absolute;
  inset: 0;
  pointer-events: none; /* hit-testing stays on the .item frame */
}

.circleBox {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-sizing: border-box;
}


/* === STARBURST ITEM ================================================= */

.starburstSvg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.starburstShape {
  vector-effect: non-scaling-stroke;
}



/* === CANVAS ITEMS ======================================================= */

.item {
  position: absolute;
  border: 2px solid transparent;
  outline-offset: 0;
}

.item.selected {
  border-color: var(--select-blue);
  box-shadow: 0 0 0 2px rgba(106,163,255,.35);
}

.item.locked {
  pointer-events: none;
  border-style: dotted;
  /* opacity: .75; */
}

.item .handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--select-blue-strong);
  border: 1px solid #1b3d7a;
  border-radius: 2px;
  right: -7px;
  bottom: -7px;
  cursor: nwse-resize;
}

.item .label {
  position: absolute;
  left: 0;
  top: -18px;
  background: #1b1b22;
  color: #cfd5e4;
  border: 1px solid #30303a;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 11px;
}

/* === MARQUEE SELECT =================================================== */

.marquee {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border: 1px dashed var(--select-blue);
  box-shadow: 0 0 0 2px rgba(106,163,255,.18);
  background: rgba(106,163,255,.10);
  pointer-events: none;
  z-index: 9999;
}

/* Text item wrapper – owns the fine outline */
.gTxt {
  position: absolute;
  inset: 0;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #000;   /* your thin outline */
  border-radius: 0;
}

/* Inner text node – actual glyphs + shadow */
.gTxtInner {
  --pSpace: 0px;
  color: #000;
  white-space: pre-wrap;
  line-height: 1.2;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}

/* Paragraph spacing on-canvas (extra space between block paragraphs) */
.gTxtInner p,
.gTxtInner div {
  margin: 0 0 var(--pSpace) 0;
}
.gTxtInner p:last-child,
.gTxtInner div:last-child {
  margin-bottom: 0;
}


/* Fine outline around text content box on the canvas */
.gTxt {
  border: 2px solid rgba(0,0,0,0.55);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
  padding: 8px;
  box-sizing: border-box;
}

/* BACKGROUND CANVAS CONTROLS IN LEFTHAND TOOL COLUMN */

.bgCanvasBlock {
  margin-top: 8px;
}

.bgCanvasLabel {
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0.06em;
  opacity: 0.8;
  margin-bottom: 4px;
}

.bgCanvasChips {
  display: flex;
  gap: 6px;
}

.canvasChip {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  border: 6px solid #7e7e7e;
  padding: 0;
  cursor: pointer;
  background: #777;
}

/* Individual colours (optional; or rely on data attribute only) */
.canvasChip[data-canvas-bg="#d9d9d9"] { background: #d9d9d9; }
.canvasChip[data-canvas-bg="#4a4a4a"] { background: #4a4a4a; }
.canvasChip[data-canvas-bg="#000000"] { background: #000000; }


/* Text item ------------------------------------------------------------- */

/* === TEXT EDITOR (INSPECTOR) ========================================== */


/* Scroll wrapper – this is the *panel-safe* sandbox container */
#tEditorWrap {
  width: 99%;
  max-width: 100%;
  box-sizing: border-box;

  /* Let the editor fill the resizable wrapper cleanly */
  display: flex;
  flex-direction: column;

  padding: 8px 10px;
  border-radius: 10px;
  border: 2px solid #2b2b33;
  background: #0d0d12;

  /* Scrolling + sizing */
  resize: vertical;
  min-height: 84px;
  max-height: 240px !important;
  overflow: hidden !important;
  overscroll-behavior: contain;

  margin: 0 auto;

  /* subtle “inset” separation */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

/* Inspector Typography Editor (contenteditable)
   IMPORTANT:
   - Must NEVER visually adopt on-canvas styling.
   - We keep the rich HTML in the DOM for model fidelity,
     but we *override* any inline styles for a stable panel UI. */
.tEditor {
  min-height: 60px;
  outline: none;

  /* Fill the resizable wrapper; editor scrolls within it */
  flex: 1 1 auto;
  height: 100%;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;

  /* Paragraph spacing (used by Paragraph Spacing control) */
  --pSpace: 0px;
/* Panel-safe baseline */
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: #ffffff !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif !important;
  text-align: left !important;
  letter-spacing: normal !important;
  text-transform: none !important;

  /* Editing comfort */
  white-space: pre-wrap;
  word-break: break-word;
}

/* Hard “firewall”: neutralize any inline styling inside the editor
   (font-size, color, tracking, leading, shadow, transforms, etc.) */
.tEditor * {
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  font-family: inherit !important;
  text-align: inherit !important;

  letter-spacing: normal !important;
  text-shadow: none !important;
  transform: none !important;
  filter: none !important;

  font-weight: 400 !important;
  font-style: normal !important;
  text-decoration: none !important;

  /* Never visually adopt ALL CAPS inside the editor */
  text-transform: none !important;
}

/* Typography Editor should remain visually plain:
   ignore Paragraph Spacing / Leading for the inspector display. */
.tEditor p,
.tEditor div{
  margin: 0 !important;
}

/* Inspector Typography Editor must stay visually plain (no bold/italic/underline). */
.tEditor b,
.tEditor strong{ font-weight: 400 !important; }
.tEditor i,
.tEditor em{ font-style: normal !important; }
.tEditor u{ text-decoration: none !important; }

/* Small help text under the text editor */
.tEditorHelp {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #444;
  font-size: 11px;
  opacity: 0.75;
}
/* === INLINE RANGE + NUMBER (e.g., text opacity) ===================== */

.rangeWithNumber {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rangeWithNumber input[type="range"] {
  flex: 1 1 auto;
}

.rangeNumWrap {
  display: flex;
  align-items: center;
  gap: 4px;
}

.rangeNumWrap input[type="number"] {
  width: 56px; /* tweak if you want it narrower/wider */
}

.rangePctPrefix {
  font-size: 11px;
  opacity: 0.7;
}


/* === TEXT BOX ON CANVAS ================================================ */

.textBox,
.gTxt {
  position: absolute;
  inset: 0;                     /* always fill the item’s full W × H */
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid #111111;    /* thin outline that matches the item size */
  color: #000000;
  white-space: pre-wrap;
  line-height: 1.2;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  background: transparent;
}



#tContent {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #2b2b33;
  background: #0d0d12;
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  resize: vertical;       /* ← NOW resizable vertically */
  min-height: 84px;       /* same as #57 */
  max-height: 600px;      /* optional */
}


/* Photo item ------------------------------------------------------------ */

.photoBox {
  position: absolute;
  inset: 0;
  background: #d9d9d9;
  border: 6px solid #000000;
  overflow: hidden;
  transform-origin: 50% 50%;
}

.photoBox img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}

/* Box / shape item ------------------------------------------------------ */

.shapeBox {
  position: absolute;
  inset: 0;
  background: transparent;
}

.boxWrap {
  position:absolute;
  inset:0;
}

.boxShape {
  position:absolute;
  inset:0;
}

/* Line item (SVG wrapper) ----------------------------------------------- */

.lineBox {
  position: absolute;
  inset: 0;
}

.lineBox svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* QR item --------------------------------------------------------------- */

.qrBox {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  overflow: hidden;
}

.qrBox canvas,
.qrBox img {
  max-width: 100%;
  max-height: 100%;
}

.qrWrap {
  position:absolute;
  inset:0;
}
.qrBox {
  position:absolute;
  inset:0;
}

/* Tear tabs ------------------------------------------------------------- */

.tabs-root {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  gap: 0;
}

.tabs-cell {
  flex: 1 1 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px dashed #000000;
  overflow: hidden;
  padding: 6px 2px;
  background: transparent;
}

.tabs-cell.alt {
  background: rgba(0,0,0,.04);
}

.tabs-cut {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border-right: 1px dotted rgba(0,0,0,.55);
  pointer-events: none;
}

.tabs-cell .tabs-v {
  transform: rotate(-90deg);
  transform-origin: center;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.tabs-strong {
  font-weight: 800;
}

.tabs-sub {
  opacity: .95;
}

/* === ITEM LIST (LEFT COLUMN) =========================================== */

.itemRow {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: #15151b;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
}

/* numbered tag bubble (you already added this) */
.itemRow .tag {
  color: #626262;
  font-weight: 900;
  font-size: 12px;
  background-color: #ffffff;
  width: 20px;
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* main label button: fills the middle, keeps icons on the right */
.itemRow button.main {
  flex: 1 1 auto;
  text-align: left;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  font: inherit;
  padding: 2px 4px;
  cursor: pointer;
}

/* active row highlight (selected item) */
.itemRow.active {
  background: #111116;
  border-color: var(--select-blue);
  box-shadow: 0 0 0 2px rgba(106,163,255,.25);
}

/* multi-selected rows (non-primary) */
.itemRow.selected:not(.active) {
  background: #111116;
  border-color: #30303a;
}

/* eye / lock / trash buttons — SQUARE, right cluster */
.itemRow .iconBtn {
  box-sizing: border-box;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--stroke);
  background: #1b1b22;
  cursor: pointer;
  font-size: 14px;
  color: #cfd5e8;
  padding: 0;
  margin-left: 4px; /* spaces them slightly from label and from each other */
}

/* toggled-on state — green outline + tint (for eye/lock) */
.itemRow .iconBtn[aria-pressed="true"] {
  border-color: #01772d;
  background: #122618;
  color: #d8ffe8;
}

/* trash button: subtle danger styling */
.itemRow .iconBtn.danger {
  border: 1px solid var(--stroke);
  background: #1b1b22;
  color: #fff;
}

.itemRow .iconBtn.danger:hover {
  border-color: #ff6b6b;
  background: #2b151a;
  color: #ffe5e5;
}


/* === ITEM BAR ICON BUTTONS (EYE / LOCK / TRASH) ======================== */

.itemRow .iconBtn,
.itemRow .iconbtn {
  box-sizing: border-box;
  flex: 0 0 28px;           /* always square */
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: 4px;         /* small gap between icons */
  border-radius: 8px;
  border: 1px solid var(--stroke);
  background: #1b1b22;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: #cfd5e8;
}

/* push the entire icon cluster to the RIGHT */
.itemRow .iconBtn:first-of-type,
.itemRow .iconbtn:first-of-type {
  margin-left: auto;
}

/* any SVG / emoji inside the icon buttons */
.itemRow .iconBtn svg,
.itemRow .iconbtn svg {
  width: 14px;
  height: 14px;
}

/* toggled-on state – GREEN OUTLINE ON ICONS ONLY */
.itemRow .iconBtn[aria-pressed="true"],
.itemRow .iconbtn[aria-pressed="true"] {
  border-color: #01772d;
  background: #122618;
  color: #d8ffe8;
}



/* === ANGLE WHEEL + RADIAL PAD ========================================== */

.angle-wheel,
.angleDial {
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: conic-gradient(from 0deg, #1b1b22, #1b1b22);
  border: 1px solid var(--stroke);
  position: relative;
  box-shadow: inset 0 0 0 1px #24242a;
}

.angle-wheel::before,
.angleDial::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 999px;
  border: 1px dashed #2d2d37;
  opacity: .65;
}

.angle-wheel .needle,
.angleDial .needle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 52px;
  background: #6aa3ff;
  transform-origin: bottom center;
  transform: translate(-50%, -100%) rotate(0deg);
  border-radius: 2px;
  box-shadow: 0 0 0 1px #243a5a;
}

/* radial background pad */

.radialPad {
  width: 160px;
  height: 120px;
  border-radius: 12px;
  background: #14141a;
  border: 1px solid var(--stroke);
  position: relative;
}

.radialPad .dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #6aa3ff;
  border: 2px solid #1b3d7a;
  transform: translate(-50%, -50%);
}

/* Google font dropdown list categories */
/* Font dropdown groups */
#tFont optgroup {
  color: #f08000;  /* light blue #5AABE0 - or your tangerine #f08000 */
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Make the actual font options a bit “normal” */
#tFont option {
  color: #e8e8ec;
  font-weight: 400;
}

#tFont {
  font-size: 12px;
}
#tFont {
  width: 100%;
}
#tFont {
  white-space: nowrap;
}
@media (max-width: 720px) {
  #tFont { font-size: 11px; }
}

.typoTitle {
  text-transform: uppercase;
}

.rangeWithVal {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rangeWithVal input[type="range"] {
  flex: 1;
}

.rangeValWrap {
  display: flex;
  align-items: center;
  gap: 4px;
}

.rangeValWrap .tiny {
  opacity: 0.7;
}

#tOpacityNum {
  width: 52px;
  text-align: left;
}


/* === HUD ================================================================ */

/* === HUD TIP / HELP PANEL ============================================= */

.hud {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 999;
  display: none;              /* hidden by default; JS toggles .is-open */
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 2px solid #f08000;
  background: #111116;
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.55);
  color: #e8e8ec;
  font-size: 12px;
  max-width: 420px;
}

.hud.is-open {
  display: flex;
}

.hud-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hud-body strong {
  font-size: 12px;
}

/* === HUD TIP SPACING ================================================ */

.hudTitle{
  font-size: 12px;
  margin: 0 0 8px 0;
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.hud .hud-text{
  line-height: 1.45;
}

.hud .hud-text br{
  display: block;
  content: "";
  margin-bottom: 8px;     /* paragraph space */
}

/* ==================================================================== */



/* === MISC ============================================================== */

.listBtn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #2b2b33;
  background: #2b2b38;
  color: #ffffff;
  font-weight: 600;
  margin-bottom: 6px;
}

.listBtn.active {
  background: var(--green) !important;
  border-color: #2d5c29;
}


/* === PREVIEW MODE ======================================================= */

body.previewMode .item {
  border-color: transparent !important;
  box-shadow: none !important;
}

body.previewMode .item .label,
body.previewMode .item .handle {
  display: none !important;
}

/* Turn off the fine text outline in Preview */
body.previewMode .gTxt {
  border-color: transparent !important;
}

/* In Preview, clip anything that hangs off the page (artboard stays visible) */
body.previewMode .page {
  overflow: hidden !important;
}


/* === PRINT EXPORT ======================================================= */
@media print {
  /* Force backgrounds/colors to print */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  html, body {
    background: #ffffff !important;
  }

  /* Hide all UI chrome */
  .topbar,
  #toolsWrap,
  #splitter,
  #inspectorWrap,
  #paletteBarHost,
  #hud,
  .rulerTop,
  .rulerLeft {
    display: none !important;
  }

  /* Remove any selection visuals (always clean) */
  .item {
    border-color: transparent !important;
    box-shadow: none !important;
  }
  .item .label,
  .item .handle {
    display: none !important;
  }

  /* Stage takes full page */
  .wrap,
  .stageWrap,
  .workspace {
    position: static !important;
    overflow: visible !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Ensure the page prints at native size (no zoom transforms) */
  #page {
    transform: none !important;
    box-shadow: none !important;
    margin: 0 !important;
  }

  /* Grid printing is controlled by the checkbox "Include Grid in Export" */
  body:not(.printGridOn) #grid {
    display: none !important;
  }
  body.printGridOn #grid {
    display: block !important;
  }
}


/* === MODALS ============================================================= */
.cb-back {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 2000;
  display: none;
}
.cb-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 24px));
  max-height: min(80vh, 720px);
  overflow: auto;
  z-index: 2001;
  display: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}
.cb-modal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: #111116;
}
.cb-modal-bar span {
  font-weight: 700;
  color: var(--text);
}
.cb-modal-body {
  padding: 14px;
}
.chkRow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}
.smallNote {
  margin-top: 10px;
  font-size: 12px;
  color: #b9c0d3;
}


/* === TOPBAR COLOR PILL =============================================== */

.topbar-color-pill{
  display:flex;
  gap:8px;
  /* padding:6px 8px; */
  margin-left:4px;

  /* background:#1b1b22; */
  /* border:1px solid #30303a; */
  /* border-radius:999px; */

  align-items:center;
  width: 600px;
  margin-left: 32px;
}

.color-slot{
  display:flex;
  align-items:center;
  gap:0px;
}

.color-slot-chip{
  width:28px;
  height:20px;
  padding:0;
  border:none;
  background:none;
  cursor:grab;
}

.color-slot-chip:active{
  cursor:grabbing;
}

.color-slot-hex{
  width:70px;
  height:22px;

  background:#0f0f12;
  color:#e8e8ec;

  border:1px solid #24242a;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 0px !important;

  font-size:9px !important;
  text-transform:uppercase;
  text-align:center;
  padding: 8px 1px !important;
  text-align: left;
  margin-left: 2px;
}

.color-slot.is-drop{
  outline:2px solid #6aa3ff;
  outline-offset:2px;
  border-radius:10px;
}

.color-slot-hex.is-bad{
  border-color:#6aa3ff;
  box-shadow:0 0 0 2px rgba(106,163,255,0.18);
}

/* ==================================================================== */

/* Box Radial Fill Gradient Position Section */

#bRadialPosRow{
  padding-top: 18px;  /* avoids margin-collapsing issues */
}

/* === INSPECTOR COLOR GRAB DOT ======================================= */

.color-input-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  min-width:0;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* === INSPECTOR COLOR GRAB DOT ======================================= */

.color-grab-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  position: relative;

  /* Don’t let flex/grid squeeze this into a “line” */
  flex: 0 0 10px;
  min-width: 10px;
  display: block;

  /* Core fill */
  background: #979799;

  /* Inner ring */
  border: 1px solid #7a7a7a;

  /* Little “inset” depth you already liked */
  box-shadow: inset 0 0 0 2px #0f0f12;

  cursor: grab;
}

/* Outer ring (new) */
.color-grab-dot::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;

  /* Outer ring size — tweak these */
  width: 16px;
  height: 16px;

  transform: translate(-50%, -50%);
  border-radius: 999px;

  border: 1px solid #30303a;     /* outer ring stroke */
  box-shadow: 0 0 0 1px #111116;  /* subtle separation from panel */
  pointer-events: none;
}

/* Optional: hover/drag feedback (nice) */
.color-grab-dot:hover::after{
  border-color: #6aa3ff;
}

/* ==================================================================== */


.color-grab-dot:active{
  cursor:grabbing;
}

/* ==================================================================== */
/* === QUICK COLORS SQUARE CHIP FIX (CHROME) =========================== */
/* Minimal fix: keep layout the same, but force square chips + prevent
   hex fields from shrinking in Chrome. */

.customColors .color-slot{
  flex: 0 0 auto;
}

.customColors .color-slot-chip{
  width: 28px;
  height: 28px;
  flex: 0 0 28px;

  padding: 0;
  margin: 0;

  background: none;
  border: 1px solid #30303a;
  border-radius: 6px;

  box-shadow: none;
  outline: none;

  -webkit-appearance: none;
  appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: grab;
}

.customColors .color-slot-chip:active{
  cursor: grabbing;
}

/* keep the hex field readable (don’t allow flex to squash it) */
.customColors .color-slot-hex{
  height: 28px;
  min-width: 70px;
  width: 70px;
  flex: 0 0 70px;

  padding: 0 6px !important;
  box-sizing: border-box;
}

/* ==================================================================== */


/* === RULERS: RECLAIM WORKSPACE OFFSET =============================== */
.rulers-hidden .workspace{
  margin-left: 0;
}


/* === SINGLE SCROLL CONTAINER (CANVAS) ================================ */
.mainRow{
  overflow: hidden; /* prevent nested scrollbars */
}


/* === DARK SCROLLBARS (SCOPED) ======================================== */
/* Scope to specific app regions so we don't theme everything globally.   */
/* Targets: #stageWrap (canvas), #toolsWrap (left panel), #paletteBarHost (palette strip) */

#stageWrap, #toolsWrap, #paletteBarHost{
  scrollbar-width: thin;                     /* Firefox */
  scrollbar-color: #3a3a46 #111116;          /* Firefox: thumb track */
}

/* WebKit scrollbar styling is injected at runtime (only if supported).
   This avoids Firefox console warnings about unknown ::-webkit-scrollbar selectors. */



/* === SHADOW & GLOW ROW LAYOUT (ALL ITEMS) === */

.row.shadowRow,
.shRow{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:flex-end;
}

.row.shadowRow > div,
.shRow > div{
  flex: 0 0 56px;
  min-width:56px;
}

/* blur a touch wider */
.row.shadowRow > div:nth-child(3),
.shRow > div:nth-child(3){
  flex-basis:64px;
  min-width:64px;
}

/* opacity needs room for decimals (e.g. 0.65) */
.row.shadowRow > div:nth-child(4),
.shRow .shOpacity{
  flex-basis:92px;
  min-width:92px;
}

/* color chip should stay visible, never stretched */
.row.shadowRow > div:nth-child(5),
.shRow .shColor{
  /* Needs room for: grab-dot (10) + gap (8) + color (52) */
  flex: 0 0 74px;
  min-width:74px;
}

.row.shadowRow input[type="color"],
.shRow input[type="color"]{
  width:52px;
  min-width:52px;
  padding:0;
}

/* keep number inputs from forcing overflow */
.row.shadowRow input[type="number"],
.shRow input[type="number"]{
  width:100%;
  min-width:0;
}


/* === SVG LIBRARY MODAL ==================================================== */

/* === SVG LIBRARY MODAL ==================================================== */

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

.svgLibOverlay.on{
  display: flex;
}

.svgLibModal{
  width: min(980px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  height: min(860px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.svgLibTop{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  background: #0c0c11;
  border-bottom: 1px solid var(--stroke);
  min-width: 0;
}

.svgLibTitle{
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 12px;
  flex: 0 0 auto;
}

.svgLibTools{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
  justify-content: flex-end;
}

.svgLibSearch{
  width: min(360px, 48vw);
  max-width: 100%;
  min-width: 0;
  background: var(--panel2);
  border: 1px solid var(--stroke);
  color: var(--ink);
  border-radius: 10px;
  padding: 8px 10px;
  outline: none;
}

.svgLibSearch:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(106,163,255,.18);
}

.svgLibBody{
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: 0;
  flex: 1 1 auto;
}

.svgLibCats{
  border-right: 1px solid var(--stroke);
  background: rgba(255,255,255,.02);
  padding: 10px;
  overflow: auto;
  min-width: 0;
}

.svgLibCatBtn{
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 10px;
  cursor: pointer;
  margin-bottom: 8px;
}

.svgLibCatBtn:hover{
  background: rgba(255,255,255,.04);
  border-color: var(--stroke-soft);
}

.svgLibCatBtn.on{
  background: rgba(106,163,255,.12);
  border-color: rgba(106,163,255,.45);
}

.svgLibGrid{
  padding: 12px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  min-width: 0;
}

.svgLibTile{
  background: var(--panel2);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  cursor: pointer;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 140px;
}

.svgLibTile:hover{
  border-color: rgba(106,163,255,.55);
  box-shadow: 0 0 0 3px rgba(106,163,255,.12);
}

.svgLibThumb{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #0b0b10;
  border: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
}

.svgLibThumb svg{
  width: 64px;
  height: 64px;
  display: block;
}

.svgLibThumb svg *{
  fill: currentColor !important;
  stroke: currentColor !important;
}

.svgLibLabel{
  font-size: 12px;
  color: var(--ink);
  opacity: .92;
  line-height: 1.15;
  text-align: center;
}

.svgLibEmpty{
  grid-column: 1 / -1;
  padding: 18px;
  border: 1px dashed rgba(255,255,255,.16);
  border-radius: 14px;
  color: var(--muted);
  text-align: center;
}

.svgLibFoot{
  border-top: 1px solid var(--stroke);
  padding: 10px 12px;
  color: var(--muted);
  background: rgba(0,0,0,.12);
}

/* === MOBILE ========================================================== */

@media (max-width: 720px){

  .svgLibOverlay{
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }

  .svgLibModal{
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border: 0;
  }

  .svgLibTop{
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px 12px 12px;
  }

  .svgLibTools{
    width: 100%;
    justify-content: stretch;
  }

  .svgLibSearch{
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
  }

  .svgLibBody{
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
  }

  .svgLibCats{
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-right: 0;
    border-bottom: 1px solid var(--stroke);
    padding: 10px 12px;
    flex: 0 0 auto;
  }

  .svgLibCatBtn{
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
    margin: 0;
  }

  .svgLibGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    align-content: start;
  }

  .svgLibTile{
    min-height: 120px;
    padding: 8px;
  }

  .svgLibThumb svg{
    width: 56px;
    height: 56px;
  }

  .svgLibFoot{
    display: none;
  }
}

/* === TARTAN PRESET BROWSER (STRIPE BUILDER) === */
.tpSB_hdr{
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--line);
}

.tpSB_row{
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  gap: 10px;
  align-items: center;
  padding: 10px 10px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.tpSB_row:hover{ background: rgba(255,255,255,0.03); }

.tpSB_star,
.tpSB_info{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.tpSB_star:hover,
.tpSB_info:hover{ background: rgba(255,255,255,0.05); }

.tpSB_star.isFav{
  color: #FFD400;
  text-shadow: 0 0 8px rgba(255, 212, 0, 0.35);
}

.tpSB_name{ min-width: 0; }
.tpSB_title{
  font-size: 12px;
  font-weight: 650;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tpSB_sub{
  font-size: 11px;
  opacity: 0.70;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tpSB_infoPanel{
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.35;
  opacity: 0.90;
  background: rgba(0,0,0,0.22);
  border-bottom: 1px solid var(--line);
}


/* === APPS MODAL === */
.modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}
.modal.open{ display:flex; }

.modalCard{
  width: min(680px, 100%);
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  box-shadow: 0 14px 48px rgba(0,0,0,.55);
  overflow: hidden;
}
.modalHead{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 12px 12px 10px 14px;
  background: var(--panel2);
  border-bottom: 1px solid var(--stroke);
}
.modalTitle{
  font-weight: 800;
  letter-spacing: .04em;
}
.modalBody{
  padding: 14px;
}
.modalBody .muted{
  opacity: .8;
  line-height: 1.35;
  margin: 0 0 12px 0;
}
.appsLinks{
  display: grid;
  gap: 10px;
}
.appLink{
  display:flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: var(--panel2);
  text-decoration: none;
  color: var(--ink);
}
.appLink:hover{
  border-color: var(--stroke2);
}
.appIcon{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--btn);
  border: none;
  flex: 0 0 auto;
}
.appIcon img{
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}

.appText{ display:flex; flex-direction: column; gap: 2px; }
.appName{ font-weight: 800; }
.appDesc{ opacity: .78; font-size: 12px; line-height: 1.25; }
/* === MOBILE DRAWER + TOPBAR PASS ==================================== */

:root{
  --mobileTopOffset: 96px;
}

.mobileTopActions,
.mobileToolsTab,
.mobileBackdrop,
.mobileQuickActions{
  display:none;
}

.mobileTopActions{
  margin-left:auto;
  align-items:center;
  gap:8px;
}

.mobileTopActionBtn{
  min-height:34px;
  padding:6px 10px;
}

.mobileToolsTab{
  position:fixed;
  left:0;
  top:calc(var(--mobileTopOffset) + 84px);
  z-index:420;
  border:1px solid #30303a;
  border-left:none;
  border-radius:0 12px 12px 0;
  background:#111116;
  color:#e8e8ec;
  padding:12px 8px 12px 7px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  box-shadow:0 10px 24px rgba(0,0,0,.38);
}

.mobileBackdrop{
  position:fixed;
  left:0;
  right:0;
  top:var(--mobileTopOffset);
  bottom:0;
  z-index:405;
  background:rgba(0,0,0,.5);
  border:0;
  padding:0;
}

.mobileQuickActions{
  position:fixed;
  inset:0;
  z-index:430;
  background:rgba(0,0,0,.58);
}

.mobileQuickActionsCard{
  width:min(360px, calc(100vw - 24px));
  margin:calc(var(--mobileTopOffset) + 14px) auto 0;
  background:#111116;
  border:1px solid #30303a;
  border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  overflow:hidden;
}

.mobileQuickActionsHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:12px 12px 10px;
  border-bottom:1px solid #24242a;
}

.mobileQuickActionsTitle{
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.mobileQuickActionsBody{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  padding:12px;
}

.mobileQuickAction{
  width:100%;
  justify-content:flex-start;
  padding:10px 12px;
  min-height:42px;
}

@media (max-width: 900px){
  .topbar{
    gap:6px;
    padding:0 8px;
  }

  .brand{
    gap:8px;
    min-width:0;
  }

  .brandName{
    font-size:11px;
    letter-spacing:.08em;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .topbar > #btnExport,
  .topbar > #btnFit,
  .topbar > #btnSeamlessPreview,
  .topbar > #btnSnapSettings,
  .topbar > #btnApps,
  .topbar > #btnTips,
  .topbar > .topbarSpacer,
  .topbar > .topbar-color-pill{
    display:none !important;
  }

  .mobileTopActions{
    display:flex;
  }

  .topbar-sub{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }

  .paletteBar{
    min-width:max-content;
  }

  .wrap,
  .shell{
    grid-template-columns:1fr;
    height:calc(100vh - var(--mobileTopOffset));
  }

  #toolsWrap{
    position:fixed;
    left:0;
    top:var(--mobileTopOffset);
    bottom:0;
    width:min(340px, 88vw);
    max-width:88vw;
    z-index:410;
    transform:translateX(-102%);
    transition:transform 180ms ease;
    box-shadow:0 18px 50px rgba(0,0,0,.45);
    border-right:1px solid #30303a;
    overscroll-behavior:contain;
  }

  body.mobile-tools-open #toolsWrap{
    transform:translateX(0);
  }

  .mobileToolsTab{
    display:block;
  }

  body.mobile-tools-open .mobileToolsTab{
    opacity:0;
    pointer-events:none;
  }

  body.mobile-tools-open .mobileBackdrop,
  .mobileQuickActions.open{
    display:block;
  }

  .stageWrap{
    grid-column:1;
    width:100%;
  }

  .workspace{
    padding:10px !important;
  }

  #tools{
    padding:12px 12px 20px;
  }

  .tool-section{
    margin-bottom:12px;
  }

  .row{
    gap:10px;
  }

  .row > div{
    min-width:0;
  }
}



/* === SIDEBAR PANEL POLISH === */

.sidebar .panel{
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  border-color: #2a2a2a;
}

.sidebar .panel + .panel{
  margin-top: 14px;
}

/* === OBJECT PANEL STYLE (Scatter + Stamp Lattice) === */

.object-panel{
  border: 1px solid #333;
  border-radius: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}


/* === SVG LIBRARY PHONE VIEWPORT FIX ======================================= */

:root{
  --svgLibVH: 100dvh;
}

body.svgLibOpen{
  overflow: hidden;
}

@media (max-width: 720px){

  .svgLibOverlay{
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  .svgLibModal{
    width: 100vw !important;
    max-width: 100vw !important;
    height: var(--svgLibVH) !important;
    max-height: var(--svgLibVH) !important;
    border-radius: 0 !important;
    border: 0 !important;
  }

  .svgLibTop{
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  .svgLibTools{
    width: 100% !important;
  }

  .svgLibSearch{
    width: 100% !important;
    max-width: 100% !important;
  }

  .svgLibBody{
    grid-template-columns: 1fr !important;
  }

  .svgLibCats{
    border-right: 0 !important;
    border-bottom: 1px solid var(--stroke) !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .svgLibCatBtn{
    width: auto !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }

  .svgLibFoot{
    display: none !important;
  }
}


/* === SVG LIBRARY PHONE HARD OVERRIDE ================================= */

.svgLibFoot{
  display:none !important;
}

@media (max-width: 720px){

  .svgLibOverlay{
    position: fixed !important;
    inset: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  .svgLibModal{
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: 0 !important;
    margin: 0 !important;
  }

  .svgLibTop{
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px 12px 12px !important;
  }

  .svgLibTools{
    width: 100% !important;
    justify-content: stretch !important;
  }

  .svgLibSearch{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .svgLibBody{
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
  }

  .svgLibCats{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--stroke) !important;
    padding: 10px 12px !important;
    flex: 0 0 auto !important;
  }

  .svgLibCatBtn{
    width: auto !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }

  .svgLibGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
    align-content: start !important;
  }
}