/* === STYLES TOC (approximate line ranges) ===
 * RESET & BASE 1-43 | UI COLOR PALETTE (:root) 44-101 | THEMES 102-254 | LAYOUT (q100/q200/q300/q400) 255-536
 * | SCROLL ARROWS 537-604 | POPUPS (overlay, bubble, HPP, modifiers) 605-2426 | FOOTER q000 2308-2426
 * | SCROLLBAR 2427-2470 | SIDEBAR BLOCKS 2471-2596 | ICON BUTTONS 2597-2668 | CANVAS PREVIEW 2669-2715
 * | OPACITY SLIDERS 2716-2744 | CANVAS 2745-2797 | COLOR WELLS 2798-2841 | STARTUP TIP 2842-2894 | PRINT 2895+
 */
/* === RESET & BASE === */
/* Fonts: self-hosted Inter (400/500/600/700) + Lexend + display faces via styles/fonts.css (no Google Fonts). */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Screen-reader-only utility: keep semantic headings for SEO without impacting layout */
.oss-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(2, 3rem);
  grid-template-rows: repeat(2, 3rem);
  gap: 0.5rem;
  align-items: center;
  justify-items: center;
  background: var(--bg-secondary); /* theme-aware background for thumbnail grid */
  padding: 0.25rem;
  border-radius: 1px;
}
.layer-thumb {
  width: 3rem;
  height: 3rem;
  border: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  /* Inkscape-style: show transparency as checkerboard behind layer thumbnail canvases */
  background-color: #ececec;
  background-image:
    linear-gradient(45deg, var(--checker-color) 25%, transparent 25%),
    linear-gradient(-45deg, var(--checker-color) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--checker-color) 75%),
    linear-gradient(-45deg, transparent 75%, var(--checker-color) 75%);
  background-position: var(--checker-bg-pos);
  background-repeat: repeat;
  background-size: var(--checker-bg-size);
  border-radius: 1px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
  cursor: pointer;
}
.layer-thumb-canvas {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: inherit;
}
.layer-thumb.layer-thumb--empty {
  opacity: 1;
  cursor: pointer;
}
.layer-thumb.active-thumb {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 8px #fff, 0 0 16px rgba(255, 255, 255, 0.6);
}

.layer-thumb-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 0.5rem;
  line-height: 1.1;
  font-weight: 600;
  color: #333;
  padding: 0.1rem 0.15rem;
  pointer-events: none;
  border-radius: 0 0 1px 1px;
  transition: opacity 0.15s ease;
}
.layer-thumb:hover .layer-thumb-label {
  opacity: 0;
}

/* Block # alignment: left in q100, right in q300 */
#q100 .layer-thumb-label {
  text-align: left;
}
#q300 .layer-thumb-label {
  text-align: right;
}

/* === UI COLOR PALETTE (theme-neutral variables) === */
:root {
  /* Base backgrounds (fallback) */
  --bg-primary: #f4f4f4;
  --bg-canvas: #ffffff;
  --bg-dark: #111111;
  --bg-panel: #e4e4e4;

  /* UI icons, active, hover (used by all themes) */
  --ui-primary: #555555;
  --ui-dark: #222222;
  --ui-light: #888888;
  --ui-accent: #777777;
  --ui-shadow: #b5b5b5;

  /* Secondary accent (e.g. logo area) */
  --brand-primary: #666666;
  --brand-light: #999999;
  --brand-accent: #777777;
  
  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --text-header: #222222;
  --text-body: #333333;
  --text-light: #f0f0f0;
  
  /* Borders & effects */
  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-medium: rgba(0, 0, 0, 0.18);
  --border-strong: rgba(0, 0, 0, 0.35);

  /* Block + toolbar backgrounds (fallbacks) */
  --block-bg-light: #f4f4f4;
  --block-bg-dark: #e0e0e0;
  --bg-secondary: #e8e8e8;
  --toolbar-bg: #d0d0d0;

  /* Layout: q100 7rem, q300 7.5rem, q200 fills; q400 6rem, q000 1.5rem. */
  --sidebar-width: 7rem;
  --toolbar-height: 5.5rem;
  --footer-height: 1.5rem;
  --footer-padding-x: 1rem;
  --footer-gap: 0.75rem;
  --toolbar-bottom: 1.75rem;

  /* Theme: primary palette #5836B5, #3D257F, #4C2FA0, #F5F5F5 (text and line icons) */
  --pj-purple: #5836B5;
  --pj-purple-bg: #3D257F;
  --pj-purple-paw: #5836B5;
  --pj-purple-aaa: #4C2FA0;

  /* Reusable: checkerboard (transparency), popup control sizes */
  --checker-color: var(--border-medium, #ccc);
  --checker-bg-size: 6px 6px;
  --checker-bg-pos: 0 0, 0 3px, 3px -3px, -3px 0;
  --swatch-size: 2rem;
  --swatch-size-small: 1rem;
  --gap-row: 0.5rem;
  --gap-tight: 4px;

  /* Stage (#q200) solid fill; reused by canvas size readout chip */
  --q200-stage-bg: #452c8a;

  /* Rich hover tips: one fixed card width (readable lines, not a giant panel) */
  --oss-tooltip-rich-width: min(20rem, calc(100vw - 32px));
}

/* === THEMES (WCAG 2.1 AAA: 7:1 normal text, 4.5:1 large text, 3:1 UI) === */
/* a. Graphite – grayscale, pencil/sketch feel; "Lesson 1" / early stages (join Osbard from the start). WIP. */
body.theme-graphite {
  --bg-primary: #1a1a1a;
  --bg-canvas: #ffffff;
  --bg-dark: #0a0a0a;
  --bg-panel: #2d2d2d;

  --ui-primary: #e0e0e0;
  --ui-dark: #ffffff;
  --ui-light: #b8b8b8;   /* ≥7:1 on block-bg-dark #1f1f1f */
  --ui-accent: #c0c0c0;
  --ui-shadow: #404040;

  --brand-primary: #a0a0a0;
  --brand-light: #d0d0d0;
  --brand-accent: #b5b5b5;

  --text-header: #f5f5f5;
  --text-body: #e8e8e8;
  --text-light: #ffffff;

  --border-subtle: rgba(255, 255, 255, 0.12);
  --border-medium: rgba(255, 255, 255, 0.25);
  --border-strong: rgba(255, 255, 255, 0.45);

  --block-bg-light: #2d2d2d;
  --block-bg-dark: #1f1f1f;
  --bg-secondary: #383838;
  --toolbar-bg: #0f0f0f;
  --toolbar-fg: #f0f0f0;
  --toolbar-arrow-bg: rgba(255, 255, 255, 0.1);
  --toolbar-arrow-hover: rgba(255, 255, 255, 0.2);

  --q200-stage-bg: #5d5d5d;
}

/* b. Bluesy-1 – blue shades, high-contrast */
body.theme-bluesy-1 {
  --bg-primary: #18324a;
  --bg-canvas: #b9f2f4;
  --bg-dark: #0b1624;
  --bg-panel: #224c63;

  --ui-primary: #7ee4f0;   /* ≥7:1 on block-bg #224c63 (AAA normal text) */
  --ui-dark: #e5f9ff;
  --ui-light: #9eeaf3;
  --ui-accent: #2f8fb0;
  --ui-shadow: #0f2435;

  --brand-primary: #244f65;
  --brand-light: #57c7d8;
  --brand-accent: #1d3a4f;

  --text-header: #e9fdff;
  --text-body: #d0f4ff;
  --text-light: #f5feff;

  --border-subtle: rgba(13, 41, 61, 0.3);
  --border-medium: rgba(13, 41, 61, 0.45);
  --border-strong: rgba(6, 18, 31, 0.6);

  --block-bg-light: #224c63;
  --block-bg-dark: #163549;
  --bg-secondary: #2a5f7a;
  --toolbar-bg: #0f2334;
  --toolbar-fg: #e5f9ff;
}

/* c. Bumblebee – high-contrast dark with gold accent */
body.theme-bumblebee {
  --bg-primary: #121212;
  --bg-canvas: #ffffff;
  --bg-dark: #000000;
  --bg-panel: #1e1e1e;

  --ui-primary: #e8c45c;
  --ui-dark: #ffffff;
  --ui-light: #f0d078;
  --ui-accent: #5a8bb5;   /* ≥7:1 on #1e1e1e for any text use */
  --ui-shadow: #2a1f28;

  --brand-primary: #ffffff;
  --brand-light: #f5f5f5;
  --brand-accent: #e8c45c;

  --text-header: #ffffff;
  --text-body: #f2f2f2;   /* ≥7:1 on #1e1e1e (AAA margin) */
  --text-light: #ffffff;

  --border-subtle: rgba(255, 255, 255, 0.2);
  --border-medium: rgba(255, 255, 255, 0.4);
  --border-strong: rgba(255, 255, 255, 0.65);

  --block-bg-light: #1e1e1e;
  --block-bg-dark: #000000;
  --bg-secondary: #2a2a2a;
  --toolbar-bg: #000000;
  --toolbar-fg: #ffffff;
}

/* d. BeeBee Sting – #ffc107 yellow and variations; #5836b5 and darker purples for icons/text/accents.
   WCAG: #352C59 / #3D257F on #ffc107, #ffd54f, #ffca28, #cc9a06 pass AA/AAA (normal + large text).
   #5836b5 on these yellows ≈ 3.07:1 — use for icons/UI only (3:1 OK); body text uses darker purples above. */
body.theme-bee-bee-sting {
  --bg-primary: #ffc107;
  --bg-canvas: #ffffff;
  --bg-dark: #b38605;
  --bg-panel: #ffca28;

  --ui-primary: #5836b5;
  --ui-dark: #3D257F;
  --ui-light: #4C2FA0;
  --ui-accent: #5836b5;
  --ui-shadow: #1a1530;

  --brand-primary: #5836b5;
  --brand-light: #4C2FA0;
  --brand-accent: #5836b5;

  --text-header: #352C59;
  --text-body: #3D257F;
  --text-light: #352C59;

  --border-subtle: rgba(61, 37, 127, 0.25);
  --border-medium: rgba(61, 37, 127, 0.45);
  --border-strong: rgba(37, 22, 76, 0.65);

  --block-bg-light: #ffd54f;
  --block-bg-dark: #ffc107;
  --bg-secondary: #ffca28;
  --toolbar-bg: #cc9a06;
  --toolbar-fg: #352C59;
  --toolbar-arrow-bg: rgba(61, 37, 127, 0.2);
  --toolbar-arrow-hover: rgba(88, 54, 181, 0.35);
}

/* e. Royal Purple (Voyage) – anchored on #5836B5 with deep-sea violets */
body.theme-royal-purple {
  --bg-primary: #160C2B;    /* Deep Space Purple */
  --bg-canvas: #ffffff;
  --bg-dark: #160C2B;
  --bg-panel: #231245;      /* Studio Sidebar Purple */

  --ui-primary: #F5F5F5;
  --ui-light: #A98CFF;      /* Soft Violet */
  --ui-dark: #F5F5F5;
  --ui-accent: #5836B5;     /* Osbard Paw Purple */
  --ui-shadow: #231245;

  --brand-primary: #5836B5; /* Anchor Purple */
  --brand-light: #A98CFF;   /* Soft Violet */
  --brand-accent: #8C67D9;  /* Vibrant Lavender */

  --text-header: #F5F5F5;
  --text-body: #F5F5F5;
  --text-light: #A98CFF;

  --border-subtle: rgba(169, 140, 255, 0.2);
  --border-medium: rgba(169, 140, 255, 0.4);
  --border-strong: rgba(140, 103, 217, 0.65);

  --block-bg-light: #3A236B; /* Modal Overlay Purple */
  --block-bg-dark: #231245;
  --bg-secondary: #231245;

  --toolbar-bg: #231245;
  --toolbar-fg: #F5F5F5;
  --toolbar-arrow-bg: rgba(169, 140, 255, 0.24);
  --toolbar-arrow-hover: rgba(140, 103, 217, 0.42);
  --opacity-track-fill: #A98CFF;
  --opacity-track-track: #3A236B;
  --opacity-thumb: #F5F5F5;
}

body.theme-royal-purple {
  --toolbar-arrow-bg: rgba(169, 140, 255, 0.24);
  --toolbar-arrow-hover: rgba(140, 103, 217, 0.42);
}

body.theme-royal-purple #q400 .icon-btn {
  color: #A98CFF;
}
body.theme-royal-purple #q400 .icon-btn:hover {
  color: #F5F5F5;
  filter: drop-shadow(0 0 8px rgba(140, 103, 217, 0.65));
}
body.theme-royal-purple #q400 .icon-btn.active {
  color: #F5F5F5;
  box-shadow: 0 0 0 2px #8C67D9;
  filter: drop-shadow(0 0 10px rgba(169, 140, 255, 0.6));
}

/* f. Osbard Studio – 12-color UI theme (Gemini): Osbard Amber + Inky Green anchors; Soft Paper + Canvas White; kid-friendly, deeper-layered.
   Primary Anchor #ffc107 (CTA, branding), Secondary #38b000 (success, nature). Text on amber: Midnight Ink #212121 (WCAG).
   Surface: Soft Paper #f5f5f5; Canvas White #ffffff; Sketch Line #bdbdbd borders; Sky Blue #03a9f4 highlight; Royal Purple #9c27b0 / Warm Wood #795548 accents. */
body.theme-osbard-studio {
  --bg-primary: #f5f5f5;   /* Soft Paper – app base */
  --bg-canvas: #ffffff;    /* Canvas White – drawing area */
  --bg-dark: #212121;      /* Midnight Ink – toolbar / depth */
  --bg-panel: #f5f5f5;      /* Soft Paper */

  --ui-primary: #212121;   /* Midnight Ink – primary icons/text */
  --ui-dark: #212121;
  --ui-light: #616161;     /* Storybook Grey – secondary text, placeholders */
  --ui-accent: #ffc107;    /* Osbard Amber – CTA, active states */
  --ui-shadow: #bdbdbd;    /* Sketch Line */

  --brand-primary: #ffc107; /* Osbard Amber */
  --brand-light: #38b000;   /* Inky Green – success, secondary actions */
  --brand-accent: #9c27b0;  /* Royal Purple – Tale / Badge Builder accent */

  --text-header: #212121;   /* Midnight Ink */
  --text-body: #212121;
  --text-light: #616161;    /* Storybook Grey */

  --border-subtle: rgba(189, 189, 189, 0.5);   /* Sketch Line */
  --border-medium: #bdbdbd;
  --border-strong: #616161; /* Storybook Grey */

  --block-bg-light: #f5f5f5; /* Soft Paper – sidebars, cards */
  --block-bg-dark: #eeeeee;
  --bg-secondary: #f5f5f5;

  --toolbar-bg: #212121;    /* Midnight Ink – contrast for amber CTAs */
  --toolbar-fg: #f5f5f5;
  --toolbar-arrow-bg: rgba(255, 255, 255, 0.1);
  --toolbar-arrow-hover: rgba(255, 193, 7, 0.35); /* Osbard Amber tint */
}

/* g. Chiaroscuro – random palette: deep burgundy, pine, teal, slate blue; pale yellow & light pink on dark. Strong light/dark contrast.
   Palette: #6A3225 #44421D #EFFBA7 #415032 #186334 #1F4235 #256483 #3F4F73 #8E80F4 #F4B1FB #8C226F #61233E */
body.theme-chiaroscuro {
  --bg-primary: #1F4235;    /* Dark Pine Green – app base */
  --bg-canvas: #ffffff;     /* Canvas White – drawing area */
  --bg-dark: #61233E;       /* Deep Burgundy – darkest */
  --bg-panel: #256483;      /* Teal – panels */

  --ui-primary: #EFFBA7;    /* Pale Yellow – primary text/icons on dark */
  --ui-dark: #EFFBA7;
  --ui-light: #F4B1FB;      /* Light Pink/Orchid – secondary */
  --ui-accent: #8E80F4;     /* Lavender – CTA, active states */
  --ui-shadow: #183746;

  --brand-primary: #8E80F4; /* Lavender */
  --brand-light: #F4B1FB;   /* Light Pink */
  --brand-accent: #8C226F;  /* Deep Magenta */

  --text-header: #EFFBA7;
  --text-body: #EFFBA7;
  --text-light: #F4B1FB;

  --border-subtle: rgba(239, 251, 167, 0.2);
  --border-medium: rgba(239, 251, 167, 0.4);
  --border-strong: rgba(244, 177, 251, 0.6);

  --block-bg-light: #256483;  /* Teal */
  --block-bg-dark: #1F4235;   /* Dark Pine */
  --bg-secondary: #3F4F73;    /* Slate Blue */

  --toolbar-bg: #61233E;      /* Deep Burgundy */
  --toolbar-fg: #EFFBA7;
  --toolbar-arrow-bg: rgba(239, 251, 167, 0.15);
  --toolbar-arrow-hover: rgba(142, 128, 244, 0.4); /* Lavender tint */
}

body {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-normal);
  overflow: hidden;
  background: var(--bg-dark);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === LAYOUT (NO GRID, FIXED POSITIONING) === */
/* Viewport shell: full-screen; narrow layout uses @media (not @container) so fixed #q200/q100/q300 stay reliable on mobile */
#viewport-container {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: auto;
}

#app {
  width: 100%;
  height: 100%;
  position: relative;
  min-width: 0;
}

/* q100: Left Sidebar - FIXED. Alternating .sidebar-block (light/dark) shows; bg-panel is fallback. */
#q100 {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(var(--sidebar-width) + 1rem);
  height: calc(100vh - var(--toolbar-height) - var(--toolbar-bottom));
  background: var(--bg-panel);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10;
  direction: rtl;
}

#q100 > * {
  direction: ltr;
}

/* Start menu popup (New, Open, Full UI); compact, no extra space */
.popup-bubble--start-menu {
  width: max-content;
  max-width: calc(100vw - 16px);
  min-height: 0;
  height: fit-content;
  padding: 0.2rem 0.25rem 0.2rem 0.25rem;
  box-sizing: border-box;
}
.popup-bubble--start-menu .popup-header {
  margin-bottom: 0.2rem;
  padding: 0 0.1rem;
  min-height: 0;
}
.popup-bubble--start-menu .popup-header #popup-title {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.popup-bubble--start-menu .popup-content {
  padding: 0.1rem 0 0 0;
  margin: 0;
  min-height: 0;
  display: block;
}
.popup-bubble--start-menu .start-menu-popup-row {
  display: flex;
  flex-direction: row;
  gap: 0.35rem;
  align-items: center;
  flex-wrap: nowrap;
}
.popup-bubble--start-menu .start-menu-popup-row .icon-btn {
  width: 2.25rem;
  height: 2.25rem;
}
.popup-bubble--start-menu .start-menu-popup-row .icon-btn--with-label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 2rem;
  padding: 0.25rem 0.3rem;
  font-size: 0.65rem;
  font-weight: normal;
}
.popup-bubble--start-menu .start-menu-popup-row .icon-btn--with-label i {
  font-size: 1.1rem;
}
.popup-bubble--start-menu .start-menu-popup-row .icon-btn--with-label span {
  line-height: 1.1;
  white-space: nowrap;
  font-size: 0.65rem;
}
.popup-bubble--start-menu .start-menu-popup-row + .start-menu-popup-row {
  margin-top: 0.25rem;
}

/* q300: Right Sidebar - FIXED (8rem = 7.5 + 0.5 for q200 vertical scrollbar) */
#q300 {
  position: fixed;
  top: 0;
  right: 0;
  width: 8rem;
  height: calc(100vh - var(--toolbar-height) - var(--toolbar-bottom));
  background: var(--bg-panel);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10;
}

.layer-opacity {
  display: flex;
  align-items: center;
  gap: 0;
}
.layer-opacity + .layer-opacity {
  margin-top: 0.25rem;
}

/* Block opacity: one slider per block (scene / character / script), controls active layer */
.block-opacity {
  display: flex;
  align-items: center;
  margin-top: 0.25rem;
}
.block-opacity .opacity-slider {
  flex: 1;
}

.layer-number {
  font-size: 1.5rem;
  color: var(--text-body);
  cursor: pointer;
  transition: all 0.2s ease;
}

.layer-number:hover {
  color: var(--ui-light);
  filter: drop-shadow(0 0 8px var(--border-medium));
  transform: scale(1.1);
}

/* Layers 10, 11: circle + text to match ph-number-circle-* icons */
.layer-number-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  border: 1px solid currentColor;
  box-sizing: border-box;
}
/* When user chooses Fill icon style, match with filled circle for 10 & 11; number color contrasts (panel bg) */
body[data-phosphor-weight="fill"] .layer-number-text {
  background: var(--text-body);
  color: var(--bg-panel);
  border-color: var(--text-body);
}
body[data-phosphor-weight="fill"] .layer-opacity.active .layer-number-text {
  background: var(--ui-dark);
  color: var(--text-body);
  border-color: var(--ui-dark);
}
/* Active layer row: glow on number and slider bar */
.layer-opacity.active .layer-number,
.layer-opacity.active .layer-number-text {
  filter: drop-shadow(0 0 6px var(--ui-primary))
          drop-shadow(0 0 14px var(--ui-primary))
          drop-shadow(0 0 24px var(--border-strong));
}
.layer-number.active {
  color: var(--ui-dark);
  filter: drop-shadow(0 0 4px var(--ui-primary))
          drop-shadow(0 0 12px var(--border-strong))
          drop-shadow(0 0 20px var(--ui-primary));
}

/* Active layer row: glow extends from number across the slider */
.layer-opacity.active .opacity-slider {
  box-shadow: 0 0 6px var(--ui-primary),
              0 0 14px var(--ui-primary),
              0 0 24px var(--border-strong);
}

/* Layer number wrap: circle number + lock replaces number when locked (double-tap) */
.layer-number-wrap {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.layer-lock-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem; /* same as .layer-number so lock fills the circle */
  color: var(--ui-primary);
  pointer-events: none;
  filter: drop-shadow(0 0 2px var(--bg-primary));
}
.layer-number-wrap.layer-locked .layer-number {
  visibility: hidden; /* hide number so lock is the only thing visible */
}
.layer-number-wrap.layer-locked .layer-lock-overlay {
  display: flex;
}

.layer-mask-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.layer-mask-row .icon-btn {
  flex-shrink: 0;
}
.layer-mask-label {
  font-size: 0.85rem;
  color: var(--text-light);
}

/* q200: Canvas Area - between q100 (8rem) and q300 (8rem) */
#q200 {
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  right: 8rem;
  bottom: calc(var(--toolbar-bottom) + var(--toolbar-height));
  background-color: var(--q200-stage-bg, #452c8a);
  /* Stage illustration removed — solid theme bg only; canvas remains the focal content */
  background-image: none;
  display: flex;
  align-items: stretch;
  justify-content: center;
  z-index: 1;
}
#q200.q200--stage-lx {
  /* Custom Stage LX image over theme color (see Huglo's LX-FX → Import Stage) */
  background-color: var(--q200-stage-bg, #452c8a);
}

/* Theater focus: dims stage behind canvas after first paint; OSS_THEATER controls opacity */
#q200-theater-veil {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  background: #000;
  opacity: 0;
  transition: opacity 2.8s ease-in-out;
}
#q200 .canvas-viewport {
  position: relative;
  z-index: 1;
}

/* Canvas / selection size + optional stroke width: one row, bottom-left of q200 */
.canvas-stage-readouts {
  /* Royal Purple: same soft violet as q400 icons (--text-light #A98CFF); other themes follow their --text-light */
  --canvas-readout-ink: var(--text-light, #a98cff);
  position: absolute;
  left: var(--footer-padding-x);
  bottom: 0.5rem;
  z-index: 5;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  max-width: calc(100% - 2 * var(--footer-padding-x));
  padding: 0;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--canvas-readout-ink) 42%, transparent);
  /* ~75% transparent: stage tint at 25% opacity so the chip stays quiet on the canvas */
  background: color-mix(in srgb, var(--q200-stage-bg, #452c8a) 25%, transparent);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  line-height: 1.2;
  font-size: 0.9rem;
  box-sizing: border-box;
}
.canvas-stage-readouts__metrics {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  padding: 3px 6px;
  min-width: 0;
  flex: 1 1 auto;
  background: transparent;
}
.canvas-stroke-readout {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.35rem;
  padding: 0;
  margin: 0;
  background: transparent;
  pointer-events: auto;
}
.canvas-stroke-readout.hidden {
  display: none !important;
}
.canvas-stroke-readout__label {
  color: var(--canvas-readout-ink);
  font-weight: 400;
  flex-shrink: 0;
}
.canvas-stroke-readout__input {
  width: 4.25rem;
  min-width: 0;
  padding: 2px 4px;
  font-size: 0.9rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--canvas-readout-ink);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid color-mix(in srgb, var(--canvas-readout-ink) 48%, transparent);
  border-radius: 3px;
}
.canvas-dimensions-readout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 0.05rem;
  line-height: 1.15;
  font-size: calc(1em - 0.15rem);
  pointer-events: none;
  padding: 0;
  margin: 0;
  background: transparent;
}
.canvas-dimensions-readout__label {
  color: var(--canvas-readout-ink);
  font-weight: 400;
  flex-shrink: 0;
}
.canvas-dimensions-readout__numbers {
  color: var(--canvas-readout-ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* Graphite: same translucent treatment as purple stage */
body.theme-graphite .canvas-stage-readouts {
  background: color-mix(in srgb, #1f1f1f 25%, transparent);
}

/* Zoom/scroll: viewport is scroll container; zoom-wrap sized in JS. Transparent so q200 stage shows when canvas is scrolled. */
.canvas-viewport {
  flex: 1;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  /* Visible scrollbars for WCAG (Firefox) */
  scrollbar-width: thin;
  scrollbar-color: var(--ui-primary, rgba(100,120,140,0.8)) var(--bg-primary, rgba(0,0,0,0.1));
}

/* When zoomed in, align content to start so scroll (0,0) = top-left and scroll math is reliable */
.canvas-viewport.zoomed-in {
  justify-content: flex-start;
  align-items: flex-start;
}

.canvas-zoom-wrap {
  flex-shrink: 0;
  position: relative;
}

/* Center origin so zoom grows from center; prevents canvas sticking to left sidebar */
.canvas-zoom-inner {
  position: absolute;
  transform-origin: center center;
  /* left/top set in JS so scaled content stays inside wrap */
}

/* q400: Bottom Toolbar */
#q400 {
  position: fixed;
  bottom: var(--toolbar-bottom);
  left: 0;
  right: 0;
  height: var(--toolbar-height);
  background: var(--toolbar-bg);
  color: var(--toolbar-fg, var(--text-header));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  z-index: 20;
}

/* Wraps #q400 + #q000. Wide: no layout box. Narrow: one fixed strip + single horizontal scroll (see @media). */
.bottom-stack {
  display: contents;
}

.toolbar-scroll-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
  box-sizing: border-box;
}

/* Center content so paw logo is centered on screen; when content overflows, scroll arrows still reveal left/right. */
.toolbar-scroll-inner.toolbar-centered {
  justify-content: center;
}

/* Wide layout + horizontal overflow: flex-start so scrollLeft 0 matches Undo/Redo (JS adds class when scrollWidth > clientWidth). */
.toolbar-scroll-inner.toolbar-centered.toolbar-scroll-inner--has-overflow {
  justify-content: flex-start;
}

/* Wrapper so scroll can reach left edge (Undo/Redo). Flush left so scrollLeft 0 shows first item. */
.toolbar-scroll-content {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: max-content;
  height: 100%;
  flex-shrink: 0;
}

.toolbar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.toolbar-section h2 {
  font-size: 1rem;
  color: var(--toolbar-fg, var(--text-header));
  margin: 0;
  padding: 0;
  white-space: nowrap;
  text-align: center;
}

.logo-section {
  width: 5rem;
  height: 5rem;
  margin: 0;
  padding: 0 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

#paw-logo {
  width: auto;
  height: 5rem;
  cursor: pointer;
  pointer-events: none; /* so click goes to .paw-logo-btn */
  transition: transform 0.2s ease;
  display: block;
  /* PJ colors applied in SVG */
  filter: drop-shadow(0 0 0 transparent);
}

#paw-logo:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px #f5f5f5);
}

.paw-logo-btn {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  line-height: 0;
}
.paw-logo-btn:hover #paw-logo {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px #f5f5f5);
}

.brush-tools,
.paint-section {
  display: flex;
  align-items: center;
}

.outline-fill-btn {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.outline-fill-swatch {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 4px solid #fff;
  box-sizing: border-box;
  background: transparent;
  overflow: hidden;
  background-clip: padding-box;
}
.outline-fill-swatch--transparent {
  border-radius: 50%;
  /* Keep tray transparency swatch readable across all themes. */
  background-color: #ececec;
  background-image:
    linear-gradient(45deg, #bdbdbd 25%, transparent 25%),
    linear-gradient(-45deg, #bdbdbd 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #bdbdbd 75%),
    linear-gradient(-45deg, transparent 75%, #bdbdbd 75%);
  background-size: 6px 6px;
  background-position: 0 0, 0 3px, 3px -3px, -3px 0;
}

.outline-fill-btn.is-active .outline-fill-swatch {
  box-shadow: 0 0 0 2px var(--ui-primary);
}

.brush-tools {
  gap: 0;
  touch-action: manipulation;
}
#q400 .tool-btn {
  touch-action: manipulation;
}

.paint-section {
  gap: 0;
}

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

/* === SCROLL ARROWS === */
.scroll-arrow {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(224, 224, 224, 0.9);
  border: none;
  color: var(--ui-primary);
  font-size: 2.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 25;
}

.scroll-arrow:hover {
  background: var(--bg-panel);
  color: var(--ui-dark);
  filter: drop-shadow(0 0 8px var(--border-medium));
}

/* When toolbar is dark (e.g. theme-graphite / theme-bumblebee), arrows use --toolbar-fg */
#q400 .scroll-arrow {
  color: var(--toolbar-fg, var(--ui-primary));
  background: var(--toolbar-arrow-bg, rgba(224, 224, 224, 0.9));
}

#q400 .scroll-arrow:hover {
  background: var(--toolbar-arrow-hover, var(--bg-panel));
  color: var(--toolbar-fg, var(--ui-dark));
  filter: drop-shadow(0 0 8px var(--border-medium));
}

/* Match footer horizontal padding (1rem ≈ 16px) so arrows don't touch viewport edge */
.scroll-left {
  position: sticky;
  left: 0;
  margin-left: 1rem;
}

.scroll-right {
  position: sticky;
  right: 0;
  margin-right: 1rem;
}

.popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  /* Dim a little (original was 0.4; user requested half) */
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  padding: 8px;
}

/**
 * q200 HPP menus (Legal + OSS paw + Shipshaper): landscape 1056×816; JPEG art 2112×1632 @2×.
 * Asset map (assets/img/):
 *   hpp legal          → --hpp-legal-art           (hpp-legal.jpg)
 *   hpp oss purple     → --hpp-oss-purple-art      (hpp-oss-purple.jpg)
 *   hpp oss graphite   → --hpp-oss-graphite-art    (hpp-oss-graphite.jpg)
 */
:root {
  --hpp-legal-art: url('../assets/img/hpp-legal.jpg');
  --hpp-oss-purple-art: url('../assets/img/hpp-oss-purple.jpg');
  --hpp-oss-graphite-art: url('../assets/img/hpp-oss-graphite.jpg');
}

/* Q200 HPP overlays: dimming inset 1rem from left/right (2rem total narrower) */
.popup-overlay--hpp-legal,
.popup-overlay--hpp-studio {
  inset: 0 1rem;
}

.popup-overlay:not(.hidden) {
  pointer-events: auto;
}

.popup-overlay .popup-bubble {
  pointer-events: auto;
  /* Viewport containment: stay inside overlay with padding */
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  /* Smooth open animation: opacity only so popup-specific transform (positioning) still works */
  opacity: 0;
  transition: opacity 0.22s ease;
}
.popup-overlay .popup-bubble.popup-bubble--animate-in {
  opacity: 1;
}

.popup-overlay.hidden {
  display: none;
}

/* HPP Legal: paw is on the 1056×816 bubble; overlay paw layer unused when paw is on bubble */
.popup-overlay--hpp-legal .hpp-legal-paw-bg {
  display: none;
}

/* HPP: Landscape 1056×816 container; scale down only if doesn't fit viewport; centered (Legal only; Studio uses q200 containment) */
.popup-overlay--hpp-legal .popup-bubble {
  width: 1056px;
  height: 816px;
  max-width: min(1056px, calc(100vw - 16px));
  max-height: min(816px, calc(100vh - 16px));
  padding: 1rem;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

/* HPP Studio (paw): contained in q200 — size set by JS (90% of q200); fill height, content scrolls */
.popup-overlay--hpp-studio .popup-bubble {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 0;
}
.popup-overlay--hpp-studio .popup-bubble .popup-header {
  flex-shrink: 0;
}

/* HPP 2-col layout (O-Studio-Local): left 33% Navigator, right 67% content — used by both Legal and Studio */
.hpp-legal-two-col {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  width: 100%;
}
.hpp-legal-nav {
  flex: 0 0 33%;
  width: 33%;
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
  border-right: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.04);
  overflow-y: auto;
  min-width: 0;
}
.hpp-legal-nav-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  color: #0a0a0a;
}
.hpp-legal-toc {
  flex-shrink: 0;
}
.hpp-legal-toc ul {
  margin: 0;
  padding-left: 1rem;
  list-style: disc;
  line-height: 1.5;
}
.hpp-legal-toc ul li {
  margin: 0.15em 0;
}
.hpp-legal-toc a {
  color: #2d2d2d;
  text-decoration: none;
  font-size: 0.85rem;
}
.hpp-legal-toc a:hover {
  color: #1a1a1a;
  text-decoration: underline;
}
.hpp-legal-thumbnails {
  flex: 1;
  min-height: 4rem;
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.hpp-legal-doc {
  flex: 1 1 67%;
  width: 67%;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem 1.25rem;
}
.hpp-legal-body section {
  margin-bottom: 1.25rem;
}
.hpp-legal-body h2 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.35rem 0;
  color: #0a0a0a;
}
.hpp-legal-body p {
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #1a1a1a;
}
.hpp-legal-body a {
  color: #1f1f1f;
  text-decoration: underline;
}
.hpp-legal-body a:hover {
  color: #0a0a0a;
}
.hpp-legal-body .hpp-legal-section-divider {
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1.25rem 0;
}
/* Legal body lists and subheadings: ensure dark text and visible bullets on light #f5f5f5 background */
.popup-bubble--hpp-legal .hpp-legal-body ul,
.popup-bubble--hpp-legal .hpp-legal-body ol {
  margin: 0.5rem 0 0.75rem 1.25rem;
  padding-left: 1rem;
  color: #1a1a1a;
}
.popup-bubble--hpp-legal .hpp-legal-body li {
  margin: 0.2em 0;
  color: #1a1a1a;
}
.popup-bubble--hpp-legal .hpp-legal-body li::marker {
  color: #1a1a1a;
}
.popup-bubble--hpp-legal .hpp-legal-body h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0.75rem 0 0.35rem 0;
  color: #0a0a0a;
}
.popup-bubble--hpp-legal .hpp-legal-body em {
  color: #1a1a1a;
}

/* HPP OSS (q200 Studio paw): purple art by default; graphite when body.theme-graphite — see :root HPP map */
.popup-bubble--hpp-studio {
  position: relative;
  background-color: #4C2FA0;
  color: #F5F5F5;
  border-color: rgba(255, 255, 255, 0.12);
  border: none;
}
/* Background image on its own layer so the paw is visible behind content */
.popup-bubble--hpp-studio::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--hpp-oss-purple-art);
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  border-radius: inherit;
  pointer-events: none;
}

body.theme-graphite .popup-bubble--hpp-studio::before {
  background-image: var(--hpp-oss-graphite-art);
}
.popup-bubble--hpp-studio .popup-header,
.popup-bubble--hpp-studio .popup-content {
  position: relative;
  z-index: 1;
}
/* Q200 HPP title bar: explicit text padding (top right bottom left) so Shipshaper can match exactly */
.popup-bubble--hpp-studio .popup-header {
  background: rgba(0, 0, 0, 0.2);
  text-align: left;
  padding: 0.75rem 1rem 0.6rem 1rem;
  align-items: center;
}
.popup-bubble--hpp-studio .popup-header h3,
.popup-bubble--hpp-studio .popup-close {
  color: #F5F5F5;
}
.popup-bubble--hpp-studio .hpp-studio-header-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding-left: 0.25rem;
}
.popup-bubble--hpp-studio .hpp-studio-header-title .hpp-studio-popup-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #F5F5F5;
  line-height: 1.2;
}
.popup-bubble--hpp-studio .hpp-studio-title-lexend {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
}
.popup-bubble--hpp-studio .hpp-studio-title-cherry {
  font-family: 'Cherry Bomb One', cursive;
  font-weight: 400;
}
/* "Storybook Studio" in Cherry Bomb One everywhere (legal footer, etc.) */
.oss-brand-storybook {
  font-family: 'Cherry Bomb One', cursive;
  font-weight: 400;
}
.popup-bubble--hpp-studio .hpp-studio-header-title .hpp-studio-subtitle {
  margin: 0.15rem 0 0 0;
  font-size: 0.9rem;
  color: rgba(245, 245, 245, 0.9);
  line-height: 1.2;
}
.popup-bubble--hpp-studio .hpp-legal-nav .hpp-studio-tagline {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 0.75rem;
  font-size: 0.9rem;
  font-weight: normal;
  opacity: 0.95;
  color: #F5F5F5;
  line-height: 1.35;
}
.popup-bubble--hpp-studio .hpp-legal-nav .hpp-studio-tagline .hpp-tagline-signature {
  display: block;
  margin-top: 0.4em;
}
.popup-bubble--hpp-studio .hpp-legal-nav {
  border-right-color: rgba(255, 255, 255, 0.15);
  /* Let --hpp-oss-* JPEG show through (was ~opaque-looking on busy art) */
  background: rgba(0, 0, 0, 0.22);
}
.popup-bubble--hpp-studio .hpp-legal-doc {
  background: transparent;
}
.popup-bubble--hpp-studio .hpp-legal-nav-title {
  color: #F5F5F5;
}
.popup-bubble--hpp-studio .hpp-legal-toc a {
  color: #F5F5F5;
  text-decoration: none;
}
.popup-bubble--hpp-studio .hpp-legal-toc a:hover {
  color: #F5F5F5;
  text-decoration: underline;
  transform: scale(1.2);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
}
.hpp-studio-nav-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin: 0.5rem 0;
  width: 100%;
}
.hpp-studio-social {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}
.hpp-studio-social-link {
  color: inherit;
  opacity: 0.9;
  transition: opacity 0.2s, transform 0.2s, filter 0.2s;
}
.hpp-studio-social-link:hover {
  opacity: 1;
}
.hpp-studio-social-link .hpp-studio-social-icon {
  display: block;
  width: 24px;
  height: 24px;
  transition: transform 0.2s, filter 0.2s;
}
.hpp-studio-social-link:hover .hpp-studio-social-icon {
  transform: scale(1.2);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
}
.popup-bubble--hpp-studio .hpp-studio-social-link {
  color: #F5F5F5;
}
.popup-bubble--hpp-studio .hpp-legal-thumbnails {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}
.popup-bubble--hpp-studio .hpp-legal-body h2,
.popup-bubble--hpp-studio .hpp-legal-body p,
.popup-bubble--hpp-studio .hpp-legal-body a {
  color: #F5F5F5;
}
.popup-bubble--hpp-studio .hpp-legal-body a:hover {
  color: #F5F5F5;
  text-decoration: underline;
}
.popup-bubble--hpp-studio .hpp-legal-toc ul {
  list-style-color: #F5F5F5;
}
.popup-bubble--hpp-studio .hpp-legal-toc ul li::marker {
  color: #F5F5F5;
}
.hpp-studio-art-packs-intro {
  margin-bottom: 0.75rem;
}
.hpp-studio-badge-list {
  margin: 0.5rem 0 0 1.25rem;
  padding: 0;
  line-height: 1.6;
}
.popup-bubble--hpp-studio .hpp-studio-badge-list {
  color: #F5F5F5;
}
.hpp-studio-art-pack-thumbnails,
.hpp-studio-app-store-thumbnails,
.hpp-studio-schoon-thumbnails,
.hpp-studio-search-dog-thumbnails,
.hpp-studio-badge-thumbnails,
.hpp-studio-bookshelf-thumbnails {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.hpp-studio-grid-3x2 {
  grid-template-columns: repeat(3, 1fr);
}
.hpp-studio-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.hpp-studio-under-construction {
  font-style: normal;
  margin-bottom: 0.5rem;
  opacity: 0.9;
}
.hpp-studio-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  cursor: pointer;
  color: inherit;
  font-size: 0.8rem;
  text-align: center;
  transition: background 0.2s, border-color 0.2s;
}
.hpp-studio-thumb:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.25);
}
.hpp-studio-thumb img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
}
.popup-bubble--hpp-studio .hpp-studio-art-packs-intro,
.popup-bubble--hpp-studio .hpp-studio-art-pack-thumbnails,
.popup-bubble--hpp-studio .hpp-studio-app-store-thumbnails,
.popup-bubble--hpp-studio .hpp-studio-schoon-thumbnails,
.popup-bubble--hpp-studio .hpp-studio-search-dog-thumbnails,
.popup-bubble--hpp-studio .hpp-studio-badge-thumbnails,
.popup-bubble--hpp-studio .hpp-studio-bookshelf-thumbnails {
  color: #F5F5F5;
}

/* Tutorial expand-in-place (legacy; Studio Skills Builder removed from HPP) (thumbnail click opens content below) */
.hpp-studio-tutorial-content {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.hpp-studio-tutorial-content h3 {
  margin-top: 0;
  font-size: 1.1rem;
}
.hpp-studio-tutorial-content .hpp-studio-tutorial-steps {
  margin: 1rem 0;
}
.hpp-studio-tutorial-content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 0.5rem 0;
}
.hpp-studio-tutorial-close {
  margin-top: 0.5rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.9rem;
  cursor: pointer;
}
.hpp-studio-tutorial-trigger {
  appearance: none;
  border: none;
  font: inherit;
  color: inherit;
  text-align: center;
}

/* HPP Legal: two-col layout (left TOC, right content); same as Studio structure */
.popup-bubble--hpp-legal .hpp-legal-two-col,
.popup-bubble--hpp-studio .hpp-legal-two-col {
  flex: 1;
  min-height: 0;
  max-width: none;
  max-height: none;
  overflow: hidden; /* each column scrolls independently via overflow-y: auto */
}
/* Independent scrolling: left nav and right content each scroll within their column */
.popup-bubble--hpp-studio .hpp-legal-nav,
.popup-bubble--hpp-studio .hpp-legal-doc {
  min-height: 0; /* allow flex item to shrink so overflow-y: auto takes effect */
}

.popup-bubble--hpp-legal .hpp-legal-download-row {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.popup-bubble--hpp-legal .hpp-legal-download {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: #5836b5;
  text-decoration: none;
}

.popup-bubble--hpp-legal .hpp-legal-download:hover {
  text-decoration: underline;
}

.popup-bubble--hpp-legal .hpp-legal-sidebar-external {
  margin: 0.55rem 0 0;
  padding: 0;
  font-size: 0.82rem;
  line-height: 1.4;
}
/* Light frosted nav: do not use body --text-body (royal-purple theme is #f5f5f5 → invisible here). */
.popup-bubble--hpp-legal:not(.popup-bubble--hpp-studio) .hpp-legal-sidebar-external {
  color: #2d2d2d;
}
/* Dark paw / Studio legal column: match TOC copy */
.popup-bubble--hpp-legal.popup-bubble--hpp-studio .hpp-legal-sidebar-external {
  color: #f5f5f5;
}

.popup-bubble--hpp-legal .hpp-legal-sidebar-external-link {
  color: #5836b5;
  text-decoration: none;
  font-weight: 600;
}

.popup-bubble--hpp-legal .hpp-legal-sidebar-external-link:hover {
  text-decoration: underline;
}

.popup-bubble--hpp-legal .hpp-legal-footer-line {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 0.75rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #555;
}

/* Legacy: hpp-q200 class no longer used; Studio uses popup-bubble--hpp-studio */
.popup-bubble--hpp-legal .popup-terms-privacy {
  grid-template-columns: 35% 65%;
  flex: 1;
  min-height: 0;
  max-width: none;
  max-height: none;
}

/* Legacy: hpp-q200 class no longer used; Studio uses popup-bubble--hpp-studio */
.popup-bubble--hpp-q200 {
  background: #4C2FA0 var(--hpp-oss-purple-art) 0 0 / 100% 100% no-repeat;
  color: #F5F5F5;
}

.popup-overlay--hpp-legal .popup-bubble .popup-content,
.popup-overlay--hpp-studio .popup-bubble .popup-content {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.popup-overlay--hpp-studio .popup-bubble .popup-content {
  overflow: hidden;
  padding: 0;
  /* Allow inner two-col to fill and scroll; fallback if content overflows */
  display: flex;
  flex-direction: column;
}
.popup-overlay--hpp-studio .popup-bubble .popup-content .hpp-legal-two-col {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
}
.popup-overlay--hpp-studio .popup-bubble .hpp-legal-nav,
.popup-overlay--hpp-studio .popup-bubble .hpp-legal-doc {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
/* Legal HPP: same stretch + scroll so content fills 90% and scrolls vertically */
.popup-overlay--hpp-legal .popup-bubble .popup-content .hpp-legal-two-col {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
}
.popup-overlay--hpp-legal .popup-bubble .hpp-legal-nav,
.popup-overlay--hpp-legal .popup-bubble .hpp-legal-doc {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Shipshaper Tools Artist's Guide: q200 overlay; title bar locked, left/right columns content scrolls */
/* Exact same as HPP Studio (paw): contained in q200 — size set by JS; fill height, content scrolls */
.popup-overlay--hpp-shipshaper-guide .popup-bubble {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 0;
}
.popup-overlay--hpp-shipshaper-guide .popup-bubble .popup-header {
  flex-shrink: 0;
}
.popup-overlay--hpp-shipshaper-guide .popup-bubble .popup-content {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}
.popup-overlay--hpp-shipshaper-guide .popup-bubble .popup-content .hpp-shipshaper-guide {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* Color Line Arrt!! (image tracer): q200 overlay layout matches Shipshaper guide (wide bubble, scrollable body). */
.popup-overlay--image-tracer .popup-bubble {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 0;
}
.popup-overlay--image-tracer .popup-bubble .popup-header {
  flex-shrink: 0;
}
.popup-overlay--image-tracer .popup-bubble .popup-content {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}
.popup-bubble--image-tracer {
  position: relative;
  background-color: #231245;
  color: #f5f5f5;
  border-color: rgba(255, 255, 255, 0.12);
}
.popup-bubble--image-tracer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--hpp-oss-purple-art);
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  border-radius: inherit;
  pointer-events: none;
}
body.theme-graphite .popup-bubble--image-tracer::before {
  background-image: var(--hpp-oss-graphite-art);
}
.popup-bubble--image-tracer .popup-header,
.popup-bubble--image-tracer .popup-content {
  position: relative;
  z-index: 1;
}
.popup-bubble--image-tracer .popup-header {
  background: rgba(0, 0, 0, 0.2);
  text-align: left;
  padding: 0.75rem 1rem 0.6rem 1rem;
  margin-bottom: 0;
}
.popup-bubble--image-tracer .popup-header h3,
.popup-bubble--image-tracer .popup-close {
  color: #f5f5f5;
}
/* Color Line Arrt!!: HPP Legal–style 2-col inside purple bubble (nav text = light). */
.image-tracer-popup.line-arrt-two-col {
  flex: 1;
  min-height: 0;
  width: 100%;
  align-items: stretch;
}
.popup-bubble--image-tracer .line-arrt-two-col .line-arrt-nav {
  flex: 0 0 30%;
  width: 30%;
  max-width: 300px;
  min-width: 200px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.2);
  color: #f5f5f5;
}
.popup-bubble--image-tracer .line-arrt-two-col .line-arrt-doc {
  flex: 1 1 70%;
  width: 70%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 0.75rem;
  overflow: auto;
}
.image-tracer-popup .image-tracer-lead {
  margin: 0 0 0.5rem 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(245, 245, 245, 0.92);
  max-width: none;
}
.image-tracer-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.image-tracer-btn {
  font: inherit;
  cursor: pointer;
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.25);
  color: #f5f5f5;
}
.image-tracer-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
.image-tracer-btn--primary {
  border-color: rgba(255, 200, 120, 0.55);
  background: rgba(120, 70, 20, 0.45);
  font-weight: 600;
}
.image-tracer-btn--primary:hover:not(:disabled) {
  background: rgba(140, 90, 40, 0.55);
}
.image-tracer-btn--primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.popup-bubble--image-tracer .line-arrt-doc .image-tracer-preview-outer {
  width: 100%;
  max-width: min(100%, 72vmin);
  aspect-ratio: 1 / 1;
  flex: 0 1 auto;
  min-height: 160px;
  min-width: 0;
  max-height: min(72vmin, calc(100vh - 12rem));
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.22);
  border-radius: 10px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
}
.image-tracer-preview-outer {
  flex: 1;
  min-height: 180px;
  max-height: min(48vh, 420px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.22);
  border-radius: 10px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.image-tracer-preview-canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto !important;
  height: auto !important;
  image-rendering: auto;
}
.image-tracer-sliders {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.35rem;
}
.popup-bubble--image-tracer .line-arrt-nav .image-tracer-sliders {
  flex: 1;
  min-height: 0;
}
.image-tracer-slider-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  font-size: 0.88rem;
  color: rgba(245, 245, 245, 0.95);
}
.popup-bubble--image-tracer .line-arrt-nav .image-tracer-slider-label {
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
}
.image-tracer-slider-label input[type="range"] {
  flex: 1;
  min-width: 140px;
  max-width: 22rem;
}
.popup-bubble--image-tracer .line-arrt-nav .image-tracer-slider-label input[type="range"] {
  max-width: none;
  width: 100%;
}
.image-tracer-actions {
  padding-top: 0.65rem;
  margin-top: auto;
}
.popup-bubble--image-tracer .line-arrt-nav .image-tracer-toolbar {
  margin-bottom: 0.15rem;
}
.line-arrt-slider-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  width: 100%;
}
.line-arrt-slider-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: rgba(245, 245, 245, 0.95);
}
.line-arrt-pct {
  font-variant-numeric: tabular-nums;
  opacity: 0.92;
  flex-shrink: 0;
}
.line-arrt-slider-block input[type="range"] {
  width: 100%;
  max-width: none;
}

/* Shape Arrt!! — tool chips + status */
.shape-arrt-tools-label {
  font-size: 0.78rem;
  color: rgba(245, 245, 245, 0.88);
  margin: 0.5rem 0 0.25rem;
}
.shape-arrt-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}
.shape-arrt-tool-btn {
  font-size: 0.72rem;
  padding: 0.28rem 0.45rem;
  border-radius: 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.2);
  color: rgba(245, 245, 245, 0.95);
  cursor: pointer;
  line-height: 1.2;
}
.shape-arrt-tool-btn:hover {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
}
.shape-arrt-tool-btn--active {
  border-color: rgba(255, 200, 120, 0.55);
  background: rgba(255, 200, 120, 0.12);
  color: #fff;
}
.shape-arrt-msg {
  min-height: 2.4em;
  font-size: 0.75rem;
  line-height: 1.35;
  margin: 0.25rem 0 0.35rem;
  color: rgba(200, 220, 255, 0.9);
}
.shape-arrt-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.25rem;
  margin-bottom: 0.15rem;
}
.shape-arrt-secondary-actions .image-tracer-btn {
  flex: 1 1 auto;
  min-width: 0;
}

/* Same colors and paw background as original q200 HPP (hpp-studio) */
.popup-bubble--hpp-shipshaper-guide {
  position: relative;
  background-color: #231245;
  color: #F5F5F5;
  border-color: rgba(255, 255, 255, 0.12);
}
.popup-bubble--hpp-shipshaper-guide::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--hpp-oss-purple-art);
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  border-radius: inherit;
  pointer-events: none;
}
body.theme-graphite .popup-bubble--hpp-shipshaper-guide::before {
  background-image: var(--hpp-oss-graphite-art);
}
.popup-bubble--hpp-shipshaper-guide .popup-header,
.popup-bubble--hpp-shipshaper-guide .popup-content {
  position: relative;
  z-index: 1;
}
/* Title bar and TEXT PADDING identical to Q200 HPP (Studio): same padding values. */
.popup-bubble--hpp-shipshaper-guide .popup-header {
  background: rgba(0, 0, 0, 0.2);
  text-align: left;
  padding: 0.75rem 1rem 0.6rem 1rem;
  align-items: center;
  margin-bottom: 0;
}
.popup-bubble--hpp-shipshaper-guide .popup-header h3,
.popup-bubble--hpp-shipshaper-guide .popup-close {
  color: #F5F5F5;
}
.popup-bubble--hpp-shipshaper-guide .popup-header h3 {
  margin: 0;
  padding: 0 0 0 0.25rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}
.popup-bubble--hpp-shipshaper-guide .popup-header h3 .hpp-shipshaper-guide-title-info {
  margin-left: 0.3em;
  margin-right: 0;
  font-size: 1em;
  vertical-align: -0.06em;
  opacity: 0.95;
}
.popup-bubble--hpp-shipshaper-guide .hpp-shipshaper-guide-subtitle {
  display: block;
  margin: 0.15rem 0 0 0;
  font-size: 0.9rem;
  color: rgba(245, 245, 245, 0.9);
  line-height: 1.2;
}
/* Left column: continuous shaded strip; no top padding so no gap between header and content (match q200 HPP). */
.hpp-shipshaper-guide--rows {
  position: relative;
  padding: 0.75rem 0 0.75rem 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 38%, transparent 38%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
/* First row: no extra top padding so the space above "1. Horizon" equals the space above 2.–7. (container provides the gap). */
.hpp-shipshaper-guide--rows .ss-guide-row:first-child {
  padding-top: 0;
}
.ss-guide-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
  min-height: min-content;
  box-sizing: border-box;
}
.ss-guide-row:last-child {
  border-bottom: none;
}
.ss-guide-row-left {
  flex: 0 0 38%;
  max-width: 20rem;
  padding: 0 0.5rem 0 0;
  padding-left: 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  color: #F5F5F5;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.popup-bubble--hpp-shipshaper-guide .ss-guide-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  opacity: 0.95;
}
.popup-bubble--hpp-shipshaper-guide .ss-guide-row-right {
  flex: 1;
  min-width: 0;
  padding: 0 0.5rem 0 0;
  flex-shrink: 0;
  min-height: min-content;
}
.ss-guide-row-right p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(245, 245, 245, 0.96);
}

.popup-bubble {
  background: var(--bg-panel);
  border: none;
  border-radius: 8px;
  padding: 8px;
  width: fit-content;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  overflow: auto;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  /* Consistent hover/active: purple shades only, no white. Text stays white/light. */
  --popup-opt-bg: rgba(88, 54, 181, 0.18);
  --popup-opt-bg-hover: rgba(88, 54, 181, 0.35);
  --popup-opt-bg-active: #5836b5;
  --popup-input-bg: rgba(88, 54, 181, 0.12);
  --popup-input-border: rgba(88, 54, 181, 0.35);
  /* Unified popup icon styling (size, padding, hover) */
  --popup-icon-size: 3rem;
  --popup-icon-size-min: 3.5rem;
  --popup-icon-padding: 0.5rem 0.4rem;
  --popup-icon-font-size: 1.5rem;
  --popup-icon-label-size: 0.7rem;
  --popup-description-size: 0.9rem;
  --popup-standard-content-padding: 0.25rem 0.5rem;
  --popup-standard-grid-gap: 0.4rem 0.5rem;
  --popup-icon-border-radius: 6px;
  --popup-icon-hover-scale: 1.1;
  --popup-icon-transition: transform 0.2s ease, filter 0.2s ease;
}

/* Canvas Size popup: 5 size presets + Grid overlay toggle (48×48 px grid on any canvas) */
.canvas-size-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
/* Restore previous work? popup: center Yes/No and add spacing */
.popup-bubble--restore.popup-bubble {
  min-width: 22rem;
}
.popup-content:has(.popup-restore-btns) {
  display: block;
  text-align: center;
}
.popup-restore-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-left: auto;
  margin-right: auto;
  width: max-content;
}
.popup-restore-btns .canvas-size-opt {
  min-height: auto;
  min-width: auto;
  padding: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
}
/* Save As / save-image popups: format controls, filename input, Save button. */
.popup-bubble--save-image.popup-bubble {
  padding: 0.75rem 1rem 1rem;
  width: max-content;
  min-width: 18rem;
  max-width: calc(100vw - 16px);
}
.popup-bubble--save-image .popup-header {
  margin-bottom: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}
.popup-bubble--save-image .popup-header h3 {
  font-size: inherit;
}
.popup-bubble--save-image .popup-content {
  padding: 0;
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.popup-save-image {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}
.popup-save-image-formats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-start;
}
.popup-save-image-format {
  padding: 0.4rem 0.65rem;
  font-size: 0.9rem;
  font-weight: 500;
  background: rgba(88, 54, 181, 0.18);
  border: 1px solid rgba(88, 54, 181, 0.35);
  border-radius: 6px;
  color: var(--text-body);
  cursor: pointer;
}
.popup-save-image-format:hover {
  background: rgba(88, 54, 181, 0.28);
  border-color: rgba(88, 54, 181, 0.5);
  color: var(--text-header);
}
.popup-save-image-format--active {
  background: rgba(88, 54, 181, 0.45);
  border-color: rgba(88, 54, 181, 0.6);
  color: #fff;
}
.popup-save-image-format:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: 2px;
}
.popup-save-image-label {
  font-size: 0.9rem;
  color: var(--text-body);
  display: block;
  margin-bottom: -0.25rem;
}
.popup-save-image-input {
  width: 100%;
  min-width: 10rem;
  padding: 0.5rem 0.6rem;
  font-family: inherit;
  font-size: 0.95rem;
  border: 1px solid rgba(88, 54, 181, 0.35);
  border-radius: 6px;
  background: rgba(88, 54, 181, 0.12);
  color: var(--text-body);
  box-sizing: border-box;
}
.popup-save-image-input:focus {
  outline: none;
  border-color: rgba(88, 54, 181, 0.6);
}
.popup-save-image-save {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  background: rgba(88, 54, 181, 0.45);
  border: 1px solid rgba(88, 54, 181, 0.6);
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  margin-top: 0.25rem;
  width: max-content;
  align-self: flex-start;
}
.popup-save-image-save:hover {
  background: rgba(88, 54, 181, 0.6);
  border-color: rgba(88, 54, 181, 0.75);
  color: #fff;
}
.popup-save-image-save:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: 2px;
}

/* Save chooser (tablet/phone): Download / Share / Save to file… */
.popup-save-chooser {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 22rem;
}
.popup-save-chooser-note {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-body, #333);
}
.popup-save-chooser-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.popup-save-chooser-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid rgba(88, 54, 181, 0.45);
  background: rgba(88, 54, 181, 0.12);
  color: var(--text-header, #222);
  cursor: pointer;
  box-sizing: border-box;
}
.popup-save-chooser-btn:hover {
  background: rgba(88, 54, 181, 0.22);
  border-color: rgba(88, 54, 181, 0.65);
}
.popup-save-chooser-btn:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: 2px;
}
.popup-save-chooser-btn i {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.popup-save-custom-oss-note {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  opacity: 0.92;
  max-width: 22rem;
  color: var(--text-body, #333);
}
.popup-save-custom-oss-note.hidden {
  display: none;
}
.popup-save-custom-size-dims {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}
.popup-save-custom-size-dim {
  flex: 1 1 6rem;
  min-width: 0;
}
.popup-save-custom-num {
  width: 100%;
}
.popup-save-custom-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.25rem;
}
.popup-save-custom-minify {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  background: transparent;
  border: 1px solid rgba(88, 54, 181, 0.55);
  border-radius: 6px;
  color: var(--text-header);
  cursor: pointer;
}
.popup-save-custom-minify:hover:not(:disabled) {
  background: rgba(88, 54, 181, 0.2);
  border-color: rgba(88, 54, 181, 0.75);
}
.popup-save-custom-minify:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.popup-save-custom-minify:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: 2px;
}
/* Save-image canvas size opts: use unified icon system; keep focus-visible */
.popup-save-as .popup-save-as-select {
  width: 100%;
  max-width: 100%;
  margin-bottom: 0.75rem;
  padding: 0.45rem 0.6rem;
  font-size: 0.95rem;
  border-radius: 6px;
  border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.2));
  background: var(--bg-secondary, #1e1e2e);
  color: var(--text-primary, #fff);
}
/* DPI/PPI row: label gap matches Format row (.popup-save-image gap 0.75rem); fields ~½ former width */
.popup-save-as .popup-save-custom-size-dims {
  align-items: flex-start;
  width: max-content;
  max-width: 100%;
}
.popup-save-as .popup-save-custom-size-dim {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
}
.popup-save-as .popup-save-custom-size-dim .popup-save-image-label {
  margin-bottom: 0;
}
.popup-save-as .popup-save-custom-size-dim .popup-save-as-dpi-select {
  margin-bottom: 0;
  min-width: 0;
  width: 4.75rem;
  max-width: 100%;
  box-sizing: border-box;
}
.popup-save-as .popup-save-as-dpi-select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
/* Override global .popup-save-image-input min-width: 10rem for W/H in this row */
.popup-save-as .popup-save-custom-size-dim .popup-save-image-input.popup-save-custom-num {
  min-width: 0;
  width: 5.5rem;
  max-width: 100%;
  box-sizing: border-box;
}

.popup-save-as .popup-save-as-hint {
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--text-light, rgba(255, 255, 255, 0.75));
  margin: 0.5rem 0 0.75rem;
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2);
  /* Fixed width so long format hints wrap instead of stretching the bubble (max-content). */
  width: 300px;
  max-width: 100%;
  box-sizing: border-box;
  align-self: flex-start;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.popup-save-as .popup-save-custom-num[readonly] {
  opacity: 0.85;
  cursor: default;
}

.popup-bubble--save-image .popup-save-image .canvas-size-opt:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: 2px;
}
.popup-bubble--canvas-size-six .canvas-size-grid,
.popup-bubble--canvas-size-five .canvas-size-grid {
  grid-template-columns: repeat(2, 1fr);
  min-width: 12rem;
}
.popup-bubble--canvas-size-six .canvas-size-opt,
.popup-bubble--canvas-size-five .canvas-size-opt {
  min-height: 2.5rem;
}

/* Canvas Settings: 2 rows of 3 presets + Custom row (frame-corners + W×H inputs) */
.popup-bubble--canvas-settings {
  padding: 0.5rem 0.5rem 0.6rem;
  width: max-content;
  max-width: min(calc(100vw - 16px), 30rem);
  align-self: flex-start;
}
.popup-bubble--canvas-settings .popup-header {
  margin-bottom: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}
.popup-bubble--canvas-settings .popup-content {
  padding: 0;
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.canvas-settings-rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.canvas-settings-row--presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.canvas-settings-row--presets .canvas-size-opt {
  min-width: 0;
}
.canvas-settings-custom-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--popup-input-border);
  width: 100%;
  box-sizing: border-box;
}
.canvas-settings-custom-btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.55rem;
  border-radius: 10px;
  border: 1px solid var(--border-medium);
  background: var(--bg-panel);
  color: var(--ui-primary, #5836b5);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  font-family: var(--font-sans, inherit);
}
.canvas-settings-custom-btn .ph {
  font-size: var(--popup-icon-font-size);
}
.canvas-settings-custom-btn:hover {
  filter: brightness(1.05);
  box-shadow: 0 0 0 2px rgba(88, 54, 181, 0.15);
}
.canvas-settings-custom-btn:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: 2px;
}
.popup-bubble--canvas-settings .canvas-settings-custom-btn.active {
  background: var(--popup-opt-bg-active);
  border-color: var(--popup-opt-bg-active);
  color: #fff;
}
.canvas-settings-custom-inputs {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.canvas-settings-custom-num {
  flex: 1 1 0;
  min-width: 0;
  max-width: 6rem;
}

/* Shapes popup: icon + label per shape, 2×3 grid, same look as Canvas Settings */
.popup-bubble--shapes {
  padding: 8px;
  width: max-content;
  max-width: min(calc(100vw - 16px), 20rem);
  align-self: flex-start;
}
.popup-bubble--shapes .popup-header {
  margin-bottom: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}
.popup-bubble--shapes .popup-content {
  padding: var(--popup-standard-content-padding);
  display: block;
  width: max-content;
}
.popup-bubble--shapes .popup-shapes-grid.canvas-size-grid {
  grid-template-columns: repeat(3, max-content);
  gap: var(--popup-standard-grid-gap);
  min-width: 0;
  width: max-content;
}
.popup-bubble--shapes .canvas-size-opt.shape-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}
.popup-bubble--shapes .canvas-size-opt.shape-opt .ph {
  font-size: var(--popup-icon-font-size);
  color: currentColor;
}

/* Stamp popup (Set, Cast, Props): Stamping/Coloring toggle + 4 stamp icons */
.popup-bubble--stamp-mode {
  width: max-content;
  max-width: min(calc(100vw - 16px), 20rem);
  align-self: flex-start;
}
.popup-bubble--stamp-mode .popup-content {
  display: block;
  padding: var(--popup-standard-content-padding);
}
.stamp-mode-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.stamp-mode-row #stamp-mode-label {
  font-size: 0.9rem;
  font-weight: 500;
}
.stamp-mode-toggle {
  padding: 0.25rem 0.4rem;
  background: var(--bg-tertiary, rgba(0,0,0,0.08));
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  cursor: pointer;
  color: currentColor;
}
.stamp-mode-toggle:hover {
  background: var(--bg-secondary, rgba(0,0,0,0.12));
  border-color: var(--border-medium);
}
.stamp-mode-toggle .ph {
  font-size: 1.25rem;
  display: block;
}
.stamp-popup-grid {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: var(--popup-standard-grid-gap);
  width: max-content;
}
.stamp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
}
/* Stamp popups (Scene/Character builder): icon fills entire clickbox, no extra padding. */
.popup-bubble--stamp-mode .popup-content .stamp-btn {
  width: var(--popup-icon-size-min);
  height: var(--popup-icon-size-min);
  min-width: var(--popup-icon-size-min);
  min-height: var(--popup-icon-size-min);
  padding: 0;
}
.stamp-btn.active {
  background: var(--popup-opt-bg-active);
  border-color: var(--popup-opt-bg-active);
  outline: 2px solid var(--popup-opt-bg-active);
  outline-offset: 2px;
  color: #fff;
}
.stamp-icon-canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2px;
}
.canvas-size-opt--grid-toggle.active {
  background: var(--popup-opt-bg-active);
  border-color: var(--popup-opt-bg-active);
  color: #fff;
}
.canvas-size-grid--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.canvas-size-grid--cols-4 {
  grid-template-columns: repeat(4, 1fr);
}
.canvas-size-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  background: var(--popup-opt-bg);
  border: 1px solid var(--popup-input-border);
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-size: 0.8rem;
  min-width: 0;
}
.canvas-size-opt:hover {
  background: var(--popup-opt-bg-hover);
  border-color: rgba(88, 54, 181, 0.5);
  color: #fff;
}
.canvas-size-opt i {
  font-size: 1.5rem;
}
.canvas-size-opt .canvas-size-icon-svg {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}
.canvas-size-opt .canvas-size-icon-svg svg {
  width: 100%;
  height: 100%;
}
.canvas-size-custom {
  display: flex;
  flex-wrap: wrap;
}

/* Brush Settings: Endcap, Plumple, Pressure, Rounded, Simplify, Smooth, Width */
.popup-bubble--brush-settings {
  width: max-content;
  max-width: min(calc(100vw - 16px), 30rem);
  align-self: flex-start;
}
.popup-bubble--brush-settings .popup-content {
  display: block;
  width: max-content;
  padding: 0;
}
.popup-bubble--brush-settings .popup-header {
  margin-bottom: 0.5rem;
}
.popup-brush-settings {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 14rem;
}
.brush-setting-row {
  display: grid;
  grid-template-columns: 5rem 1fr 3.5rem;
  align-items: center;
  gap: 0.5rem;
}
.brush-setting-row label {
  font-size: 0.9rem;
  color: var(--text-body);
}
.brush-setting-row input[type="range"] {
  width: 100%;
  min-width: 6rem;
}
.brush-num-input {
  width: 100%;
  padding: 0.25rem 0.4rem;
  font-size: 0.85rem;
  background: var(--popup-input-bg);
  border: 1px solid var(--popup-input-border);
  border-radius: 4px;
  color: var(--text-body);
}
.popup-brush-settings .brush-num-input {
  background: var(--popup-input-bg);
  border-color: var(--popup-input-border);
  color: #fff;
}
.popup-brush-settings .brush-num-input:focus {
  background: var(--popup-opt-bg);
  border-color: rgba(88, 54, 181, 0.6);
  outline: none;
  color: #fff;
}

/* Settings popup (footer gear): Undo History, etc. */
.popup-bubble--settings {
  width: max-content;
  max-width: min(calc(100vw - 16px), 20rem);
  align-self: flex-start;
}
.popup-bubble--settings .popup-content {
  display: block;
  padding: 0.5rem 0;
}
/* About (footer ?): width ~ "Tools and bug fixes updated weekly."; longer lines wrap.
   Must beat .popup-overlay .popup-bubble { max-width: calc(100vw - 16px); } */
.popup-overlay .popup-bubble.popup-bubble--about {
  width: max-content;
  max-width: min(calc(100vw - 16px), 36ch);
  align-self: flex-start;
}
.popup-bubble--about .popup-content {
  display: block;
  padding: 0.5rem 0;
}
.about-popup {
  padding: 0 0.5rem;
  font-size: 0.9rem;
}
.about-popup p {
  margin: 0 0 0.5rem;
}
.about-popup .about-title {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  color: var(--text-body);
}
.about-popup .about-updated {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.about-popup .about-coming {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.about-popup .about-tagline {
  font-style: italic;
  color: var(--text-muted);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.about-popup a {
  color: var(--ui-primary, #5836b5);
  text-decoration: none;
}
.about-popup a:hover {
  text-decoration: underline;
}
.about-popup .about-coming {
  color: var(--text-muted);
}
.settings-popup {
  padding: 0 0.5rem;
}
.settings-section {
  margin-bottom: 0.5rem;
}
.settings-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-body);
  margin-bottom: 0.35rem;
}
.settings-undo-opts {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.settings-undo-opt {
  padding: 0.35rem 0.75rem;
  font-size: 0.9rem;
  background: var(--popup-opt-bg);
  border: 1px solid var(--popup-input-border);
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
}
.settings-undo-opt:hover {
  background: var(--popup-opt-bg-hover);
  border-color: rgba(88, 54, 181, 0.5);
  color: #fff;
}
.settings-undo-opt--active {
  background: var(--popup-opt-bg-active);
  border-color: var(--popup-opt-bg-active);
  color: #fff;
  box-shadow: 0 0 0 1px var(--popup-opt-bg-active), 0 0 12px rgba(88, 54, 181, 0.5);
}
.settings-hint {
  font-size: 0.8rem;
  color: var(--text-body);
  opacity: 0.85;
  margin-top: 0.35rem;
}
.settings-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-body);
  cursor: pointer;
  margin-top: 0.5rem;
}
.settings-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}
.settings-shortcuts {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
}
.settings-shortcuts-list {
  list-style: none;
  font-size: 0.8rem;
  color: var(--text-body);
  line-height: 1.6;
  margin-top: 0.25rem;
}
.settings-shortcuts-list kbd {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  font-size: 0.75em;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  margin-right: 0.35rem;
}
.settings-diagnostics {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
}
.settings-diagnostics pre {
  font-size: 0.75rem;
  color: var(--text-body);
  opacity: 0.9;
  margin: 0.25rem 0 0;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Endcap: 3 text-box style options (Round, Flat, Taper) */
.brush-setting-row--endcap {
  grid-template-columns: 5rem 1fr;
}
.brush-setting-row--endcap .endcap-opts {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.endcap-opt {
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  background: var(--popup-opt-bg);
  border: 1px solid var(--popup-input-border);
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
}
.endcap-opt:hover {
  background: var(--popup-opt-bg-hover);
  border-color: rgba(88, 54, 181, 0.5);
  color: #fff;
}
.endcap-opt--active {
  background: var(--popup-opt-bg-active);
  border-color: var(--popup-opt-bg-active);
  color: #fff;
}
.endcap-opt:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Paint FX: 4×3 grid */
.popup-paint-fx-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

/* Paint FX popup: icon + label per effect, no extra blank space, place near icon */
.popup-bubble--paint-fx {
  width: max-content;
  max-width: min(calc(100vw - 16px), 20rem);
  align-self: flex-start;
}
.popup-bubble--paint-fx .popup-content {
  display: block;
  width: max-content;
  padding: var(--popup-standard-content-padding);
}
.popup-bubble--paint-fx .popup-header {
  margin-bottom: 0.5rem;
}
.popup-bubble--paint-fx .popup-paint-fx-grid {
  grid-template-columns: repeat(4, max-content);
  gap: var(--popup-standard-grid-gap);
  width: max-content;
}
.popup-bubble--paint-fx .paint-fx-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.popup-bubble--paint-fx .paint-fx-opt .ph {
  font-size: var(--popup-icon-font-size);
  color: currentColor;
}

.popup-bubble--paint-fx .paint-fx-opt span {
  font-size: var(--popup-icon-label-size);
  text-align: center;
}

.paint-fx-opt.active {
  background: var(--popup-opt-bg-active);
  border-color: var(--popup-opt-bg-active);
  color: #fff;
}

/* Object filters (funnel): 5×5 presets + Amount slider + Reset on one row */
.popup-bubble--object-filters {
  width: max-content;
  max-width: min(calc(100vw - 16px), 30rem);
  align-self: flex-start;
}
.popup-bubble--object-filters .popup-content {
  display: block;
  width: max-content;
  max-width: 100%;
  padding: var(--popup-standard-content-padding);
}
.popup-bubble--object-filters .popup-header {
  margin-bottom: 0.5rem;
}
.popup-object-filters-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--popup-standard-grid-gap);
  width: max-content;
  max-width: 100%;
}
.popup-bubble--object-filters .object-filter-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
}
.popup-bubble--object-filters .object-filter-opt .ph {
  font-size: var(--popup-icon-font-size);
  color: currentColor;
}
.popup-bubble--object-filters .object-filter-opt span {
  font-size: var(--popup-icon-label-size);
  text-align: center;
  line-height: 1.15;
  max-width: 4.5rem;
}
.object-filter-opt.active {
  background: var(--popup-opt-bg-active);
  border-color: var(--popup-opt-bg-active);
  color: #fff;
}
.popup-object-filters-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.65rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-medium);
}
.popup-object-filters-amount {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.35rem;
  min-width: 10rem;
  margin: 0;
  font-size: 0.85rem;
}
.popup-object-filters-amount-label {
  flex-shrink: 0;
}
.popup-object-filters-amount input[type="range"] {
  flex: 1;
  min-width: 4rem;
  max-width: 10rem;
}
.popup-object-filters-reset {
  flex-shrink: 0;
  padding: 0.35rem 0.65rem;
  font-size: 0.8rem;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--border-medium);
  background: var(--surface-elevated, #2a2040);
  color: inherit;
  cursor: pointer;
}
.popup-object-filters-reset:hover {
  border-color: var(--accent, #7c5cbf);
}

/* Select popup: 4×2 grid, icon + label; bubble only as wide as content */
.popup-bubble--select {
  width: max-content;
  min-width: 19rem;
  max-width: min(calc(100vw - 16px), 24rem);
  align-self: flex-start;
}
.popup-bubble--select .popup-content {
  display: block;
  width: max-content;
  padding: var(--popup-standard-content-padding);
}
.popup-bubble--select .popup-select-body {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.5rem;
}
.select-snap-column {
  display: flex;
  flex-direction: column;
  gap: var(--popup-standard-grid-gap, 0.5rem);
  flex-shrink: 0;
}
/* Snap column: label one line; column width follows widest button (no max-width on span) */
.popup-bubble--select .select-snap-opt span {
  line-height: 1.15;
  white-space: nowrap;
}
.popup-bubble--select .popup-select-grid {
  grid-template-columns: repeat(4, max-content);
  gap: var(--popup-standard-grid-gap);
  width: max-content;
}

.popup-select-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
}
.select-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}
.select-opt span {
  line-height: 1.2;
}
.popup-bubble--select .select-opt.active {
  background: var(--popup-opt-bg-active);
  border-color: var(--popup-opt-bg-active);
  color: #fff;
}
.popup-bubble--select .select-opt:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Magic Wand row inside Select popup: icon left, tolerance slider expands right */
.select-magic-wand-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  width: 100%;
  box-sizing: border-box;
}
.select-magic-wand-btn {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--border-medium);
  background: var(--bg-panel);
  color: var(--ui-primary, #5836b5);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.select-magic-wand-btn:hover {
  filter: brightness(1.05);
  box-shadow: 0 0 0 2px rgba(88, 54, 181, 0.15);
}
.select-magic-wand-btn .ph {
  font-size: var(--popup-icon-font-size);
}
.select-magic-wand-slider {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.select-magic-wand-slider input[type="range"] {
  flex: 1;
  width: 100%;
  margin: 0;
}
.magic-wand-num-input {
  width: 3.2rem;
  flex: 0 0 auto;
  text-align: right;
}

/* PJ's Palette Maker (Outline/Fill) popup — click to open; triangle points to trigger */
.popup-bubble--stroke-fill {
  width: min(90vw, 664px);
  max-width: 664px;
  position: relative;
}
/* Triangle indicator pointing down toward the palette button */
.popup-bubble--stroke-fill::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--bg-panel);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.15));
}
.popup-bubble--stroke-fill .popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.popup-bubble--stroke-fill #popup-title.stroke-fill-popup-title-bar {
  display: flex !important;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-body);
}
.popup-bubble--stroke-fill #popup-title .stroke-fill-title-emoji {
  font-size: 1.15rem;
  line-height: 1;
}
.popup-bubble--stroke-fill #popup-title .stroke-fill-title-info {
  font-size: 1em;
  opacity: 0.92;
  flex-shrink: 0;
}
.popup-bubble--stroke-fill .popup-header-right {
  flex-shrink: 0;
}
.popup-bubble--stroke-fill .popup-content {
  display: block;
  width: 100%;
  padding: 0.25rem 0.75rem 0.5rem;
  box-sizing: border-box;
  position: relative;
}
.stroke-fill-title-info-btn {
  background: none;
  border: none;
  padding: 2px;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  color: inherit;
  flex-shrink: 0;
}
.stroke-fill-title-info-btn:hover {
  background: var(--popup-opt-bg-hover);
}
.stroke-fill-title-info-btn:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: 2px;
}
.palette-picker-info-sheet {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--bg-panel);
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  margin: 0;
  max-height: min(72vh, 28rem);
  overflow: auto;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
}
.palette-picker-info-sheet.palette-picker-info-sheet--hidden {
  display: none !important;
}
.palette-picker-info-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem 0.4rem;
  border-bottom: 1px solid var(--border-medium);
  position: sticky;
  top: 0;
  background: var(--bg-panel);
  z-index: 1;
}
.palette-picker-info-sheet__title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text-body);
  line-height: 1.25;
}
.palette-picker-info-sheet__close {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-body);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.palette-picker-info-sheet__close:hover {
  background: var(--popup-opt-bg-hover);
}
.palette-picker-info-sheet__close i {
  font-size: 1rem;
}
.palette-picker-info-list {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0.65rem 0.65rem;
}
.palette-picker-info-row {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text-body);
}
.palette-picker-info-row:last-child {
  border-bottom: none;
}
.palette-picker-info-icons {
  display: inline-flex;
  align-items: center;
  gap: 0.12rem;
  flex-shrink: 0;
}
.palette-picker-info-icons i {
  font-size: 1rem;
  opacity: 0.95;
  line-height: 1;
}
.palette-picker-info-arrow {
  flex-shrink: 0;
  opacity: 0.55;
  margin: 0 0.05rem;
  font-size: 0.95rem;
}
.palette-picker-info-text {
  flex: 1;
  min-width: 0;
}
.palette-picker-info-text strong {
  font-weight: 600;
}
.palette-picker-info-mixer-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.42rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 4px;
  background: var(--popup-opt-bg);
  color: #fff;
  line-height: 1.2;
}
.palette-picker-info-mixer-section {
  padding: 0.35rem 0.65rem 0.75rem;
  border-top: 1px solid var(--border-subtle);
}
.palette-picker-info-mixer-section__title {
  margin: 0.35rem 0 0.25rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-body);
  line-height: 1.25;
}
.palette-picker-info-mixer-note {
  margin: 0 0 0.4rem;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--text-body);
  opacity: 0.85;
}
.palette-picker-info-dl {
  margin: 0;
}
.palette-picker-info-dt {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-body);
}
.palette-picker-info-dl .palette-picker-info-dt:first-of-type {
  margin-top: 0;
}
.palette-picker-info-dd {
  margin: 0.12rem 0 0;
  padding: 0;
  font-size: 0.78rem;
  line-height: 1.38;
  color: var(--text-body);
  opacity: 0.95;
}
.palette-picker-info-dd strong {
  font-weight: 600;
}
.stroke-fill-controls { display: flex; flex-direction: column; gap: 0.75rem; }
.stroke-fill-row { display: flex; align-items: center; gap: var(--gap-row); flex-wrap: wrap; }
.stroke-fill-label { min-width: 3.5rem; font-size: 0.9rem; color: var(--text-body); }
.stroke-fill-swatch {
  width: var(--swatch-size); height: var(--swatch-size);
  border: none !important; border-radius: 0; flex-shrink: 0;
}
.stroke-fill-swatch--transparent {
  background: transparent !important;
  background-image: linear-gradient(45deg, var(--checker-color) 25%, transparent 25%), linear-gradient(-45deg, var(--checker-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--checker-color) 75%), linear-gradient(-45deg, transparent 75%, var(--checker-color) 75%) !important;
  background-size: var(--checker-bg-size); background-position: var(--checker-bg-pos);
}
.stroke-fill-transparent-swatch {
  width: var(--swatch-size); height: var(--swatch-size); min-width: var(--swatch-size); min-height: var(--swatch-size);
  padding: 0; border: 1px solid var(--border-medium); border-radius: 0; flex-shrink: 0; cursor: pointer;
  background: #fff;
  background-image: linear-gradient(45deg, var(--checker-color) 25%, transparent 25%), linear-gradient(-45deg, var(--checker-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--checker-color) 75%), linear-gradient(-45deg, transparent 75%, var(--checker-color) 75%);
  background-size: var(--checker-bg-size); background-position: var(--checker-bg-pos);
  box-sizing: border-box;
}
.stroke-fill-transparent-swatch--active { border: 2px solid var(--ui-primary, #5836b5) !important; }
.stroke-fill-eyedropper {
  width: var(--swatch-size); height: var(--swatch-size); min-width: var(--swatch-size); min-height: var(--swatch-size);
  padding: 0; border: 1px solid var(--popup-input-border); border-radius: 0; flex-shrink: 0; cursor: pointer;
  background: var(--popup-opt-bg); color: #fff; display: inline-flex; align-items: center; justify-content: center;
}
.stroke-fill-eyedropper:hover { background: var(--popup-opt-bg-hover); border-color: rgba(88, 54, 181, 0.5); color: #fff; }
.stroke-fill-eyedropper i { font-size: 1.1rem; }
.stroke-fill-hex {
  width: 5rem; padding: 0.35rem 0.5rem; font-size: 0.85rem; font-family: ui-monospace, monospace;
  background: var(--popup-input-bg); border: 1px solid var(--popup-input-border); border-radius: 4px; color: var(--text-body);
}
.stroke-fill-picker { width: var(--swatch-size); height: var(--swatch-size); padding: 0; border: none; cursor: pointer; background: transparent; }
.stroke-fill-default-row { display: flex; align-items: center; gap: 0.5rem; width: 100%; margin-bottom: 0.5rem; padding: 0.25rem 0; border-bottom: 1px solid var(--border-medium); box-sizing: border-box; }
.stroke-fill-rainbow-btn { width: 1.6rem; height: 2.25rem; border-radius: 50%; flex-shrink: 0; border: 3px solid var(--popup-input-border); box-sizing: border-box; cursor: pointer; padding: 0; background: transparent; color: var(--text-body); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.stroke-fill-rainbow-btn:hover { background: var(--popup-opt-bg-hover); color: var(--text-body); }
.stroke-fill-rainbow-btn.active { border-color: var(--ui-primary); color: var(--ui-primary); box-shadow: 0 0 0 2px var(--ui-primary); }

/* When rainbow button is placed in a popup header, hide it by default... */
.popup-header .stroke-fill-rainbow-btn {
  display: none;
}
/* ...and show only for the Paint FX popup header */
.popup-bubble--paint-fx .popup-header .stroke-fill-rainbow-btn {
  display: inline-flex;
}
.stroke-fill-default-wells { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; justify-content: center; }

/* no longer used: Paint FX header row now uses standard popup header */
.stroke-fill-default-well { width: 1.6rem; height: 2.25rem; border-radius: 50%; flex-shrink: 0; border: 3px solid var(--bg-canvas); box-sizing: border-box; cursor: pointer; padding: 0; }
.stroke-fill-default-well:hover { filter: brightness(1.15); }
.stroke-fill-default-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.stroke-fill-default-lock, .stroke-fill-default-import { background: none; border: none; color: var(--text-body); cursor: pointer; padding: 2px; display: inline-flex; align-items: center; justify-content: center; border-radius: 2px; }
.stroke-fill-default-lock:disabled { cursor: default; color: var(--ui-primary, #5836b5); }
.stroke-fill-default-import:hover { background: var(--popup-opt-bg-hover); }
.stroke-fill-two-col { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; box-sizing: border-box; }
.stroke-fill-main-row { display: flex; gap: 1rem; align-items: flex-start; width: 100%; box-sizing: border-box; }
.stroke-fill-left, .stroke-fill-right { flex: 1 1 0; min-width: 0; }
.stroke-fill-right { display: flex; flex-direction: column; gap: 0.5rem; max-height: 280px; }
.saved-pawlettes-list { overflow-y: auto; display: flex; flex-direction: column; gap: 0.35rem; }
.saved-pawlette-row { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 4px; border-radius: 4px; border: 1px solid transparent; }
.saved-pawlette-row:hover { background: var(--popup-opt-bg); border-color: var(--popup-input-border); }
.saved-pawlette-swatches { display: flex; gap: 2px; flex: 1; min-width: 0; }
.saved-pawlette-swatch { width: var(--swatch-size-small); height: var(--swatch-size-small); min-width: var(--swatch-size-small); min-height: var(--swatch-size-small); flex-shrink: 0; border-radius: 2px; box-sizing: border-box; }
.saved-pawlette-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.saved-pawlette-lock, .saved-pawlette-download, .saved-pawlette-delete { background: none; border: none; color: var(--text-body); cursor: pointer; padding: 2px; display: inline-flex; align-items: center; justify-content: center; border-radius: 2px; }
.saved-pawlette-lock:hover, .saved-pawlette-download:hover, .saved-pawlette-delete:hover:not(:disabled) { background: var(--popup-opt-bg-hover); }
.saved-pawlette-delete:disabled { cursor: not-allowed; opacity: 0.45; }
.stroke-fill-keep-open-row { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border-subtle); }
.stroke-fill-keep-open-label { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--text-body); cursor: pointer; }
.stroke-fill-custom-swatches { display: flex; flex-wrap: wrap; gap: var(--gap-tight); }
.stroke-fill-custom-swatch { width: var(--swatch-size-small); height: var(--swatch-size-small); min-width: var(--swatch-size-small); min-height: var(--swatch-size-small); border-radius: 2px; padding: 0; border: 1px solid var(--border-medium); cursor: pointer; flex-shrink: 0; box-sizing: border-box; }
.stroke-fill-custom-swatch:hover { filter: brightness(1.1); }
.stroke-fill-custom-swatch--locked { box-shadow: 0 0 0 2px var(--ui-primary, #5836b5); }
.stroke-fill-swatches-row { margin-top: 0.5rem; }
.stroke-fill-actions-row { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.stroke-fill-btn { padding: 0.4rem 0.75rem; font-size: 0.85rem; font-weight: 600; background: var(--popup-opt-bg); border: 1px solid var(--popup-input-border); border-radius: 4px; color: #fff; cursor: pointer; }
.stroke-fill-btn:hover { background: var(--popup-opt-bg-active); border-color: var(--popup-opt-bg-active); color: #fff; }
.stroke-fill-palette-io { background: var(--popup-opt-bg); border: 1px solid var(--popup-input-border); border-radius: 4px; color: #fff; cursor: pointer; padding: 0.4rem; display: inline-flex; align-items: center; justify-content: center; }
.stroke-fill-palette-io:hover { background: var(--popup-opt-bg-active); color: #fff; }
.stroke-fill-select { width: 100%; padding: 0.35rem 0.5rem; font-size: 0.8rem; background: var(--popup-input-bg); border: 1px solid var(--popup-input-border); border-radius: 4px; color: var(--text-body); cursor: pointer; }

/* Terms, Privacy & Web Safety: Navigator + content */
.popup-terms-privacy {
  display: grid;
  grid-template-columns: 12rem 1fr;
  grid-template-rows: 1fr auto;
  gap: 1rem;
  max-width: 36rem;
  max-height: 70vh;
}
.popup-terms-nav {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  overflow-y: auto;
}
.popup-terms-content {
  grid-column: 2;
  grid-row: 1;
  overflow-y: auto;
  font-size: 0.9rem;
  line-height: 1.45;
}
.popup-terms-actions {
  grid-column: 1 / -1;
  grid-row: 2;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-subtle);
}
.popup-terms-nav-item {
  text-align: left;
  padding: 0.5rem 0.6rem;
  font-size: 0.85rem;
  background: var(--popup-opt-bg);
  border: 1px solid transparent;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
}
.popup-terms-nav-item:hover {
  background: var(--popup-opt-bg-hover);
}
.popup-terms-nav-item.active {
  background: var(--popup-opt-bg-active);
  border-color: var(--popup-opt-bg-active);
  font-weight: 600;
  color: #fff;
}
.popup-terms-content h4 { margin-top: 0; margin-bottom: 0.5rem; }
.popup-terms-content p { margin: 0.4rem 0; }
.popup-terms-download {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  background: var(--ui-primary, #5836b5);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.popup-terms-download:hover {
  filter: brightness(1.1);
}

.popup-bubble--lx {
  padding: 6px 8px;
  width: max-content;
  max-width: min-content;
}
.popup-bubble--lx .popup-content {
  width: max-content;
  display: block;
  gap: 0;
  min-width: 0;
}

.popup-bubble--lx .popup-header {
  margin-bottom: 6px;
}

/* LX · FX: shared styles; single-column when --lx-only or --fx-only */
.popup-bubble--lx-fx {
  padding: 0.75rem 1rem;
  width: max-content;
}
.popup-bubble--lx-fx .popup-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
  min-width: 0;
}
.popup-bubble--lx-only .popup-content,
.popup-bubble--fx-only .popup-content {
  grid-template-columns: 1fr;
}
.popup-bubble--lx-fx .popup-header {
  margin-bottom: 0.5rem;
}
.popup-bubble--lx-fx .lx-fx-column {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
.popup-bubble--lx-fx .lx-fx-subtitle {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-header);
  margin: 0 0 0.25rem 0;
}
.popup-bubble--lx-fx .fx-controls {
  grid-column: unset;
  min-width: 10rem;
}
.popup-bubble--lx-fx .fx-controls .fx-row {
  gap: 0.4rem;
}
/* Paint FX: one effect at a time — row of 4 options */
.popup-bubble--font-fx .font-fx-chooser {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: space-between;
}
.popup-bubble--font-fx .font-fx-option {
  flex: 1;
  min-width: 0;
  padding: 0.35rem 0.4rem;
  font-size: 0.8rem;
  border-radius: 6px;
  border: 1px solid var(--popup-input-border);
  background: var(--popup-opt-bg);
  color: #fff;
  cursor: pointer;
}
.popup-bubble--font-fx .font-fx-option:hover {
  background: var(--popup-opt-bg-hover);
}
.popup-bubble--font-fx .font-fx-option.active {
  border-color: var(--popup-opt-bg-active);
  background: var(--popup-opt-bg-active);
  color: #fff;
}
.popup-bubble--lx-fx .fx-slider {
  flex: 0.5; /* roughly half-length inside LX · FX popup */
}
.popup-bubble--lx-fx .lx-controls {
  min-width: 10rem;
}

/* Eraser settings (formerly paired with Erase Block in one popup) */
.popup-erase-combined--eraser-only {
  display: block;
}
.popup-erase-combined--eraser-only .popup-erase-combined__eraser {
  max-width: 18rem;
}

/* Eraser popup (Erase Block is a separate q400 trash button) */
.popup-bubble--erase-combined {
  width: max-content;
  max-width: min(calc(100vw - 16px), 20rem);
  align-self: flex-start;
  padding: 0.85rem 1rem 1rem;
}
/* Global .popup-content is a 2-col grid for icon popups — reset here or layout breaks and the bubble stretches wide. */
.popup-bubble--erase-combined .popup-content {
  display: block;
  width: max-content;
  max-width: 100%;
  padding: 0;
  box-sizing: border-box;
}
.popup-erase-combined {
  display: flex;
  align-items: stretch;
  gap: 1rem;
}
.popup-erase-combined__block {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-right: 1px solid var(--border-medium);
  padding-right: 1rem;
}
.popup-erase-block-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 5.5rem;
  padding: 0.5rem 0.4rem;
  margin: 0;
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  background: var(--popup-opt-bg, rgba(255, 255, 255, 0.06));
  color: var(--text-body);
  cursor: pointer;
  font-size: 0.85rem;
}
.popup-erase-block-btn:hover {
  background: var(--popup-opt-bg-hover);
  border-color: rgba(88, 54, 181, 0.45);
}
.popup-erase-block-btn i {
  font-size: 2rem;
  line-height: 1;
  color: var(--ui-primary, #5836b5);
}
.popup-erase-combined__eraser {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.popup-erase-combined__row--size-tip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}
.popup-erase-size-label {
  font-size: 0.85rem;
  color: var(--text-body);
  margin: 0;
}
.popup-erase-size-input {
  width: 3.25rem;
  padding: 0.2rem 0.35rem;
  border: 1px solid var(--popup-input-border, var(--border-medium));
  border-radius: 4px;
  background: var(--bg-panel);
  color: var(--text-body);
  font-size: 0.9rem;
  box-sizing: border-box;
}
.popup-erase-px {
  font-size: 0.85rem;
  color: var(--text-body);
  margin-right: 0.25rem;
}
.popup-erase-tip-label {
  font-size: 0.85rem;
  color: var(--text-body);
  margin-left: 0.15rem;
}
.popup-erase-endcap-opts.endcap-opts {
  margin-left: auto;
}
.popup-erase-hint {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--text-body);
  opacity: 0.88;
  max-width: 18rem;
  overflow-wrap: break-word;
}
.popup-erase-slider {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.popup-bubble--lx-fx .lx-reset-btn {
  margin-top: 0.25rem;
  align-self: flex-end;
  padding: 0.15rem 0.6rem;
  font-size: 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border-medium);
  background: transparent;
  color: var(--text-body);
  cursor: pointer;
}
.popup-bubble--lx-fx .lx-reset-btn:hover {
  background: var(--bg-secondary);
}
.popup-bubble--lx-fx .lx-blend-hint {
  margin: 0.4rem 0 0 0;
  font-size: 0.7rem;
  color: var(--text-muted, rgba(255,255,255,0.6));
  line-height: 1.3;
}
.popup-bubble--lx-fx .lx-brush-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.popup-header-right {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Settings & About icons: only visible in Studio (paw) popup; placeholders for future pages */
.popup-header-studio-actions {
  display: none;
}
.popup-bubble--hpp-studio .popup-header-studio-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.popup-header-icon {
  background: none;
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--text-body);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.5rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 2px;
}
.popup-bubble--hpp-studio .popup-header-icon {
  color: #f5f5f5;
  border-color: rgba(255,255,255,0.35);
}
.popup-bubble--hpp-studio .popup-header-icon:hover {
  color: #f5f5f5;
  border-color: rgba(255,255,255,0.6);
  opacity: 0.95;
}
.popup-header-icon:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: 2px;
}

#popup-title {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-header);
}

/* Compact WIP popups for Set/Cast/Props (no stamp grid). */
.popup-bubble--builder-wip {
  width: 17rem;
  max-width: min(calc(100vw - 16px), 17rem);
  padding: 0.5rem 0.6rem;
}
.popup-bubble--builder-wip .popup-content {
  width: 100%;
  max-width: 100%;
  padding: var(--popup-standard-content-padding);
}
.popup-builder-wip p {
  margin: 0;
  line-height: 1.3;
  font-size: var(--popup-description-size);
  white-space: normal;
  overflow-wrap: anywhere;
}
.popup-builder-wip p + p {
  margin-top: 0.35rem;
}

#popup-title.popup-title-icon-only {
  font-size: 3rem;
  line-height: 1;
  margin: 0;
}

#popup-title.popup-title-icon-only .ph {
  font-size: inherit;
}

/* Close X: purple shades for consistency (no white box); icon stays white */
.popup-close {
  background: var(--popup-opt-bg);
  border: 1px solid var(--popup-input-border);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.5rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  border-radius: 4px;
}
.popup-close:hover {
  background: var(--popup-opt-bg-hover);
  color: #fff;
}
.popup-close:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: 2px;
}

/* Canvas Size / popup primary action: standard button with hover */
.popup-ok-btn {
  padding: 0.4rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-header);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.popup-ok-btn:hover {
  background: var(--bg-secondary);
  border-color: var(--ui-primary);
  color: var(--ui-primary);
}
.popup-ok-btn:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: 2px;
}

.popup-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  color: var(--text-body);
}

/* Popup icon buttons: single system for all (Shapes, Cast, LX, Font, Canvas, Stamp, Paint FX, Select). Uses .popup-bubble vars. */
.popup-bubble .popup-content .popup-icon-btn,
.popup-bubble .popup-content .icon-btn,
.popup-bubble .popup-content .lx-brush-option,
.popup-bubble .popup-content .font-btn {
  color: #fff !important;
  width: var(--popup-icon-size) !important;
  height: var(--popup-icon-size) !important;
  min-width: var(--popup-icon-size) !important;
  min-height: var(--popup-icon-size) !important;
  padding: 0 !important;
  font-size: var(--popup-icon-font-size) !important;
  border: none !important;
  border-radius: var(--popup-icon-border-radius) !important;
  box-sizing: border-box !important;
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
  background: var(--popup-opt-bg) !important;
  transition: var(--popup-icon-transition);
}
.popup-bubble .popup-content .popup-icon-btn:hover,
.popup-bubble .popup-content .icon-btn:hover,
.popup-bubble .popup-content .lx-brush-option:hover,
.popup-bubble .popup-content .font-btn:hover {
  background: var(--popup-opt-bg-hover) !important;
  border: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 8px var(--border-medium)) !important;
  color: #fff !important;
  transform: scale(var(--popup-icon-hover-scale));
}
.popup-bubble .popup-content .popup-icon-btn .ph,
.popup-bubble .popup-content .icon-btn .ph,
.popup-bubble .popup-content .lx-brush-option .ph,
.popup-bubble .popup-content .font-btn .ph {
  font-size: inherit;
}
.popup-bubble .popup-content .popup-icon-btn.active,
.popup-bubble .popup-content .lx-brush-option.active,
.popup-bubble .popup-content .font-btn.active {
  background: var(--popup-opt-bg-active) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
}
.popup-bubble .popup-content .ph {
  color: currentColor;
}

/* Same icon system for option tiles (canvas size, shapes, stamp, paint FX, select): shared size, padding, hover scale */
.popup-bubble .popup-content .canvas-size-opt,
.popup-bubble .popup-content .canvas-size-opt.shape-opt,
.popup-bubble .popup-content .stamp-btn,
.popup-bubble .popup-content .paint-fx-opt,
.popup-bubble .popup-content .select-opt {
  min-width: var(--popup-icon-size-min);
  min-height: var(--popup-icon-size-min);
  padding: var(--popup-icon-padding);
  font-size: 0.8rem;
  background: var(--popup-opt-bg);
  border: 1px solid var(--popup-input-border);
  border-radius: var(--popup-icon-border-radius);
  color: #fff;
  transition: var(--popup-icon-transition);
  box-sizing: border-box;
}
.popup-bubble .popup-content .canvas-size-opt .ph,
.popup-bubble .popup-content .canvas-size-opt.shape-opt .ph,
.popup-bubble .popup-content .stamp-btn .ph,
.popup-bubble .popup-content .paint-fx-opt .ph,
.popup-bubble .popup-content .select-opt i {
  font-size: var(--popup-icon-font-size);
  color: currentColor;
}
.popup-bubble .popup-content .canvas-size-opt:hover,
.popup-bubble .popup-content .canvas-size-opt.shape-opt:hover,
.popup-bubble .popup-content .stamp-btn:hover,
.popup-bubble .popup-content .paint-fx-opt:hover,
.popup-bubble .popup-content .select-opt:hover {
  background: var(--popup-opt-bg-hover);
  border-color: rgba(88, 54, 181, 0.5);
  color: #fff;
  filter: drop-shadow(0 0 8px var(--border-medium));
  transform: scale(var(--popup-icon-hover-scale));
}
.popup-bubble .popup-content .canvas-size-opt.active,
.popup-bubble .popup-content .canvas-size-opt.shape-opt.active,
.popup-bubble .popup-content .paint-fx-opt.active,
.popup-bubble .popup-content .select-opt.active {
  background: var(--popup-opt-bg-active);
  border-color: var(--popup-opt-bg-active);
  color: #fff;
}
/* Restore previous work: keep Yes/No hotboxes tight to label text. */
.popup-bubble--restore .popup-content .popup-restore-btns .canvas-size-opt {
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto;
  height: auto;
  padding: 0.5rem !important;
  line-height: 1.1;
}
/* Stamp popups (Atmosphere, Set, Cast, Props): shared rule above sets --popup-icon-padding on
   .stamp-btn; that must not apply here or the canvas shrinks inside the tile. */
.popup-bubble.popup-bubble--stamp-mode .popup-content .stamp-btn {
  padding: 0;
}
/* Popup icon grids: consistent gap */
.popup-bubble .popup-content .font-popup-grid,
.popup-bubble .popup-content .lx-brush-options {
  gap: 0.35rem;
}

.brush-popup-section {
  grid-column: 1 / -1;
}

.popup-section-head {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-header);
}

.popup-section-reset {
  cursor: pointer;
  user-select: none;
}

.popup-section-reset:hover {
  color: var(--ui-primary);
}

.lx-controls {
  width: fit-content;
}

.lx-brush-options {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.3rem;
}

.lx-brush-option {
  padding: 0 !important;
  font-size: 1.75rem !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  color: var(--text-body);
  cursor: pointer;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem !important;
  height: 3rem !important;
  box-sizing: border-box;
}

.lx-brush-option .ph {
  font-size: inherit;
}

.lx-brush-option:hover {
  color: var(--ui-primary);
}

.lx-brush-option.active {
  background: var(--popup-opt-bg-active) !important;
  color: #fff !important;
}

/* Outline & Fill (Palette) popup — fit to contents, 4px above q400 */
.popup-bubble .stroke-fill-controls {
  width: fit-content;
  min-width: 0;
}
.stroke-fill-controls {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.stroke-fill-row {
  display: flex;
  align-items: center;
  gap: var(--gap-row);
  flex-wrap: wrap;
}

.stroke-fill-label {
  min-width: 3.5rem;
  font-size: 0.9rem;
  color: var(--text-header);
}

.stroke-fill-swatch {
  width: var(--swatch-size);
  height: var(--swatch-size);
  border: none !important;
  border-radius: 0;
  box-shadow: none !important;
  flex-shrink: 0;
}

/* Swatch when current color is transparent (100%) */
.stroke-fill-swatch--transparent {
  background: transparent !important;
  background-image:
    linear-gradient(45deg, var(--checker-color) 25%, transparent 25%),
    linear-gradient(-45deg, var(--checker-color) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--checker-color) 75%),
    linear-gradient(-45deg, transparent 75%, var(--checker-color) 75%) !important;
  background-size: var(--checker-bg-size);
  background-position: var(--checker-bg-pos);
}

/* Same-sized box to the right of picker: always checkerboard = set to transparent */
.stroke-fill-transparent-swatch {
  width: var(--swatch-size);
  height: var(--swatch-size);
  min-width: var(--swatch-size);
  min-height: var(--swatch-size);
  padding: 0;
  border: 1px solid var(--border-medium);
  border-radius: 0;
  flex-shrink: 0;
  cursor: pointer;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, var(--checker-color) 25%, transparent 25%),
    linear-gradient(-45deg, var(--checker-color) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--checker-color) 75%),
    linear-gradient(-45deg, transparent 75%, var(--checker-color) 75%);
  background-size: var(--checker-bg-size);
  background-position: var(--checker-bg-pos);
  box-sizing: border-box;
}
.stroke-fill-transparent-swatch:hover {
  filter: brightness(0.95);
  box-shadow: 0 0 0 2px var(--ui-primary);
}
.stroke-fill-transparent-swatch:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: 2px;
}

/* When outline or fill is transparent, the transparent box shows active 2px border */
.stroke-fill-transparent-swatch--active {
  border: 2px solid var(--ui-primary) !important;
  box-shadow: 0 0 0 1px var(--bg-primary);
}

.stroke-fill-hex {
  width: 5rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
  font-family: var(--font-sans);
  background: var(--bg-primary);
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  color: var(--text-body);
}

.stroke-fill-picker {
  width: var(--swatch-size);
  height: var(--swatch-size);
  padding: 0;
  border: none !important;
  border-radius: 0;
  box-shadow: none !important;
  outline: none;
  cursor: pointer;
  background: transparent;
}

/* Custom Colors: 10 round swatches below Fill */
.stroke-fill-custom-row {
  display: flex;
  align-items: center;
  gap: var(--gap-row);
  flex-wrap: wrap;
}

.stroke-fill-keep-open-row {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.1));
}
.stroke-fill-right .stroke-fill-keep-open-row {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  box-sizing: border-box;
}
.stroke-fill-keep-open-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--text-header);
  cursor: pointer;
}
.stroke-fill-keep-open-label input[type="checkbox"] {
  cursor: pointer;
}
.stroke-fill-custom-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-tight);
}
.stroke-fill-custom-swatch {
  width: var(--swatch-size-small);
  height: var(--swatch-size-small);
  min-width: var(--swatch-size-small);
  min-height: var(--swatch-size-small);
  border-radius: 2px;
  padding: 0;
  border: 1px solid var(--border-medium);
  cursor: pointer;
  flex-shrink: 0;
  box-sizing: border-box;
}
.stroke-fill-custom-swatch:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 0 2px var(--ui-primary);
}
.stroke-fill-custom-swatch--locked {
  box-shadow: 0 0 0 2px var(--ui-primary);
  outline: 2px solid var(--text-body);
  outline-offset: -2px;
}

/* Huglo's LX-FX: title bar | master strip (RGB+dim+peek) | two×6 bus faders | footer (producer-style board) */
.popup-bubble--lx-fx {
  width: fit-content;
  max-width: calc(100vw - 16px);
  padding: 0.35rem 0.5rem 0.55rem;
  box-sizing: border-box;
}
.popup-bubble--lx-fx .popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.popup-bubble--lx-fx .popup-header h3,
.popup-bubble--lx-fx #popup-title.lxfx-popup-title-wrap {
  display: flex !important;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}
.lxfx-popup-title-info {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--ui-primary, #c4b5fd);
  cursor: pointer;
  padding: 0.2rem;
  border-radius: 4px;
  font-size: 1.15rem;
  line-height: 1;
}
.lxfx-popup-title-info:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.popup-bubble--lx-fx .popup-content {
  display: block;
  width: 100%;
  padding: 0.25rem 0.5rem 0.45rem;
  box-sizing: border-box;
}
.lxfx-popup {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.lxfx-popup-row--masters {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.35rem 0.45rem;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
}
.lxfx-popup-row--masters .lxfx-popup-tone-row--5,
.lxfx-popup-row--masters .lxfx-popup-tone-row--6 {
  width: 100%;
}
.lxfx-popup-row-region--6 {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.3rem 0.25rem;
  background: rgba(0, 0, 0, 0.26);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 6px;
}
.lxfx-popup-row-region--6 .lxfx-popup-id-fader {
  flex: 0 0 auto;
  min-width: 0;
}
.lxfx-popup-row-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, auto);
  gap: 0.28rem;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.28rem 0.25rem;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 6px;
}
.lxfx-popup-control-btn {
  border: 1px solid var(--popup-input-border, rgba(255, 255, 255, 0.22));
  background: rgba(0, 0, 0, 0.22);
  color: rgba(245, 245, 245, 0.88);
  border-radius: 6px;
  font-size: 0.63rem;
  font-weight: 700;
  padding: 0.32rem 0.25rem;
  cursor: pointer;
}
.lxfx-popup-control-btn.is-active {
  border-color: rgba(167, 139, 250, 0.7);
  background: rgba(167, 139, 250, 0.2);
  color: #fff;
}
.lxfx-popup-footer-bar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 0.75rem;
  width: 100%;
  box-sizing: border-box;
  padding-top: 0.1rem;
}
.lxfx-popup-footer-bar .lxfx-popup-footer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem 0.45rem;
  margin: 0;
  flex: 0 0 auto;
  min-width: 0;
}
.lxfx-popup-keep-label--footer {
  flex-shrink: 0;
  margin: 0;
  white-space: nowrap;
}
.lxfx-popup-tone-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 0.55rem;
  width: 100%;
  min-width: 0;
}
.lxfx-popup-tone-row.lxfx-popup-tone-row--5 {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  width: 100%;
  min-width: 0;
}
.lxfx-popup-tone-row.lxfx-popup-tone-row--6 {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  width: 100%;
  min-width: 0;
}
.lxfx-popup-tone-row.lxfx-popup-tone-row--5 > .lxfx-popup-fader-col {
  flex: 0 0 auto;
  min-width: 0;
}
.lxfx-popup-tone-row.lxfx-popup-tone-row--6 > .lxfx-popup-fader-col {
  flex: 0 0 auto;
  min-width: 0;
}
.popup-bubble--lx-fx .lxfx-popup-tone-row--5 > .lxfx-popup-fader-col > label {
  text-transform: none;
  letter-spacing: normal;
}
.popup-bubble--lx-fx .lxfx-popup-tone-row--6 > .lxfx-popup-fader-col > label {
  text-transform: none;
  letter-spacing: normal;
}
.lxfx-popup-section-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: rgba(255, 255, 255, 0.9);
  flex-shrink: 0;
  padding-bottom: 0.4rem;
  align-self: flex-end;
}
.lxfx-popup-rule {
  border: none;
  border-top: 1px solid var(--border-medium, rgba(255, 255, 255, 0.22));
  margin: 0.35rem 0;
}
.lxfx-popup-section-banner {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 0.1rem;
}
.lxfx-popup-keep-label {
  font-size: 0.8rem;
  color: var(--text-header, rgba(245, 245, 245, 0.92));
}
.lxfx-popup-footer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.45rem;
}
.lxfx-popup-fader-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-height: 3.85rem;
  justify-content: flex-end;
}
.lxfx-popup-fader-col label {
  font-size: 0.62rem;
  font-weight: 600;
  color: rgba(245, 245, 245, 0.75);
}
.lxfx-popup-rgb-neutral {
  display: block;
  font-size: 0.5rem;
  font-weight: 500;
  color: rgba(245, 245, 245, 0.62);
  line-height: 1;
  margin-top: 0.05rem;
}
.lxfx-popup-icon-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1rem;
  font-size: 0.95rem;
  line-height: 1;
  cursor: default;
}
.lxfx-popup-icon-label .ph {
  display: block;
}
.lxfx-popup-icon-label--sun {
  color: #fde68a;
}
.lxfx-popup-icon-label--peek {
  color: rgba(245, 245, 245, 0.9);
}
.lxfx-popup-fader-col--peek {
  min-height: 3.85rem;
}
/* Horizontal range rotated -90°: track bottom = 0 (off), track top = 100% (on) */
.lxfx-popup-fader {
  width: 3.5rem;
  height: 0.733rem;
  transform: rotate(-90deg);
  transform-origin: center center;
  margin: 1.57rem 0;
  flex-shrink: 0;
  accent-color: #a78bfa;
  cursor: pointer;
}
.lxfx-popup-fader--r { accent-color: #f87171; }
.lxfx-popup-fader--g { accent-color: #4ade80; }
.lxfx-popup-fader--b { accent-color: #60a5fa; }
.lxfx-popup-fader--dim { accent-color: #e9d5ff; }
.lxfx-popup-fader--peek { accent-color: #c4b5fd; }
/* Same geometry as .lxfx-popup-fader so Row 3 beam faders match Row 1 height (rotated range). */
.lxfx-popup-fader--region {
  width: 3.5rem;
  height: 0.733rem;
  margin: 1.57rem 0;
  accent-color: #a78bfa;
}
.lxfx-popup-rgb-group {
  display: flex;
  gap: 0.35rem;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: nowrap;
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}
.lxfx-popup-id-fader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  flex: 1 1 0;
  min-width: 0;
  cursor: pointer;
  border: 1px dashed transparent;
  border-radius: 8px;
  padding: 0.18rem 0.12rem 0.08rem;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.lxfx-popup-id-num {
  font-size: 0.62rem;
  font-weight: 700;
  color: rgba(245, 245, 245, 0.75);
  width: auto;
  height: auto;
  line-height: 1.1;
  text-align: center;
  padding: 0 0.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  border: 0;
  background: transparent;
}
.lxfx-popup-id-fader--active .lxfx-popup-id-num {
  color: #fff;
  text-shadow: 0 0 0.35rem rgba(167, 139, 250, 0.45);
}
.lxfx-popup-id-fader--active {
  border-color: rgba(167, 139, 250, 0.45);
  background: rgba(167, 139, 250, 0.07);
}
/* Popup opacity: 5th vertical fader (.lxfx-popup-fader-col--peek) */
.lxfx-popup-btn {
  padding: 0.45rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--popup-input-border, rgba(255, 255, 255, 0.2));
  background: rgba(0, 0, 0, 0.2);
  color: rgba(245, 245, 245, 0.92);
}
.lxfx-popup-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
}
.lxfx-popup-btn--primary {
  background: var(--popup-opt-bg, rgba(88, 54, 181, 0.5));
  border-color: var(--ui-primary, #5836b5);
  color: #fff;
}
.lxfx-popup-btn--primary:hover {
  background: var(--popup-opt-bg-active, #5836b5);
  border-color: var(--ui-primary, #5836b5);
}
.lxfx-popup-btn.lxfx-popup-btn--icon {
  padding: 0.32rem 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  font-size: 1.2rem;
  line-height: 1;
}
.lxfx-popup-btn.lxfx-popup-btn--icon .ph {
  display: block;
}

/* Default palette row: mini oval wells (like q400) + lock + import */
.stroke-fill-default-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--border-medium, rgba(255,255,255,0.12));
  box-sizing: border-box;
}
.stroke-fill-default-wells {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  justify-content: center;
}
.stroke-fill-default-well {
  width: 1.6rem;
  height: 2.25rem;
  border-radius: 50%;
  flex-shrink: 0;
  border: 3px solid var(--bg-canvas, #333);
  box-sizing: border-box;
  cursor: pointer;
  padding: 0;
  background: transparent;
}
.stroke-fill-default-well:hover {
  filter: brightness(1.15);
  box-shadow: 0 0 0 2px var(--ui-primary);
}
.stroke-fill-rainbow-btn {
  width: 1.6rem;
  height: 2.25rem;
  border-radius: 50%;
  flex-shrink: 0;
  border: 3px solid var(--popup-input-border, rgba(255,255,255,0.25));
  box-sizing: border-box;
  cursor: pointer;
  padding: 0;
  background: transparent;
  color: var(--text-body, rgba(255,255,255,0.9));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}
.stroke-fill-rainbow-btn i {
  font-size: inherit;
  line-height: 1;
}
.stroke-fill-rainbow-btn:hover {
  background: var(--popup-opt-bg-hover, rgba(255,255,255,0.1));
  color: var(--text-body, #fff);
}
.stroke-fill-rainbow-btn.active {
  border-color: var(--ui-primary);
  color: var(--ui-primary);
  background: transparent;
  box-shadow: 0 0 0 2px var(--ui-primary);
}
.stroke-fill-default-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.stroke-fill-default-lock,
.stroke-fill-default-import {
  background: none;
  border: none;
  color: var(--text-muted, rgba(255,255,255,0.5));
  cursor: pointer;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}
.stroke-fill-default-lock:disabled {
  cursor: default;
  color: var(--accent, #8b6dd0);
}
.stroke-fill-default-import:hover {
  color: var(--text-primary, #fff);
  background: var(--bg-secondary, rgba(255,255,255,0.08));
}
.stroke-fill-default-lock i,
.stroke-fill-default-import i {
  font-size: 1rem;
}
.popup-header h3:empty {
  display: none;
}
.stroke-fill-two-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}
.stroke-fill-header-row {
  display: flex;
  justify-content: space-between;
  padding: 0 0.15rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-header);
}
.stroke-fill-header-left { }
.stroke-fill-header-right { }
.stroke-fill-main-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
}
.stroke-fill-left,
.stroke-fill-right {
  flex: 1 1 0;
  min-width: 0;
}
.stroke-fill-right {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 280px;
}
.saved-pawlettes-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.saved-pawlette-row {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  border: 1px solid transparent;
}
.saved-pawlette-row:hover {
  background: var(--bg-secondary, rgba(255,255,255,0.08));
  border-color: var(--border-medium);
}
.saved-pawlette-swatches {
  display: flex;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.saved-pawlette-swatches .saved-pawlette-swatch {
  flex-shrink: 0;
}
.saved-pawlette-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.saved-pawlette-lock,
.saved-pawlette-download,
.saved-pawlette-delete {
  background: none;
  border: none;
  color: var(--text-muted, rgba(255,255,255,0.6));
  cursor: pointer;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}
.saved-pawlette-lock:hover,
.saved-pawlette-download:hover,
.saved-pawlette-delete:hover:not(:disabled) {
  color: var(--text-primary, #fff);
  background: var(--bg-secondary, rgba(255,255,255,0.08));
}
.saved-pawlette-delete:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.saved-pawlette-row .saved-pawlette-lock:has(.ph-lock-simple) {
  color: var(--accent, #8b6dd0);
}
.saved-pawlette-lock i,
.saved-pawlette-download i,
.saved-pawlette-delete i {
  font-size: 1rem;
}
.saved-pawlette-swatch {
  width: var(--swatch-size-small);
  height: var(--swatch-size-small);
  min-width: var(--swatch-size-small);
  min-height: var(--swatch-size-small);
  flex-shrink: 0;
  border-radius: 2px;
  box-sizing: border-box;
}
.stroke-fill-dropdown-row {
  margin-top: auto;
  padding-top: 0.5rem;
}
.stroke-fill-select {
  width: 100%;
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  color: var(--text-body);
  cursor: pointer;
}
.stroke-fill-swatches-row {
  margin-top: 0.5rem;
}
.stroke-fill-swatches-row .stroke-fill-custom-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.stroke-fill-actions-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.stroke-fill-btn {
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--popup-opt-bg);
  border: 1px solid var(--popup-input-border);
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
}
.stroke-fill-btn:hover {
  background: var(--popup-opt-bg-active);
  color: #fff;
}
.stroke-fill-palette-io {
  background: var(--popup-opt-bg);
  border: 1px solid var(--popup-input-border);
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  padding: 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.stroke-fill-palette-io:hover {
  background: var(--popup-opt-bg-active);
  color: #fff;
}
.stroke-fill-palette-io i {
  font-size: 1.1rem;
}

/* Canvas Surface popup — 6 icons in 2×3, fit width to content only */
.popup-bubble--canvas-type,
.popup-bubble--canvas-surface {
  width: max-content;
  max-width: min-content;
}
.popup-bubble--canvas-type .popup-content,
.popup-bubble--canvas-surface .popup-content {
  width: max-content;
  display: block;
}

/* Default option-grid popup style: compact, icon + text, outline around each option (Paint FX, Canvas Size, Shapes, etc.) */
.popup-bubble--option-grid,
.popup-bubble--paint-fx {
  width: max-content;
  max-width: min-content;
}
.popup-bubble--option-grid .popup-content,
.popup-bubble--paint-fx .popup-content {
  width: max-content;
  display: block;
}
.popup-bubble--option-grid .canvas-size-opt.active,
.popup-bubble--paint-fx .canvas-size-opt.active {
  background: var(--popup-opt-bg-active);
  border-color: var(--popup-opt-bg-active);
  color: #fff;
}
/* Option grid: small icon/image in each cell */
.popup-bubble--option-grid .canvas-size-opt img {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
}

/* Cast, Props, Shapes: icons only at 3rem, no labels */
.popup-bubble--icon-only-3rem .canvas-size-opt img {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}
.popup-bubble--icon-only-3rem .canvas-size-opt .ph {
  font-size: 3rem;
}
.popup-bubble--icon-only-3rem .canvas-size-opt .shape-icon-inline-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  min-height: 3rem;
  flex-shrink: 0;
  color: currentColor;
}
.popup-bubble--icon-only-3rem .canvas-size-opt .shape-icon-inline-svg svg {
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  min-height: 3rem;
  flex-shrink: 0;
}
.popup-bubble--icon-only-3rem .canvas-size-opt .shape-icon-unicode {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  min-height: 3rem;
  flex-shrink: 0;
  font-size: 2.25rem;
  line-height: 1;
  color: currentColor;
}
.popup-bubble--icon-only-3rem .canvas-size-opt {
  min-width: 3rem;
  min-height: 3rem;
  padding: 0.25rem;
}
/* Format/Align popups: match other option-grid icons — outline, same canvas-size-opt look */
.popup-bubble--option-grid .font-format-btn {
  min-width: unset;
  height: unset;
  font-weight: 600;
  border: 1px solid var(--popup-input-border);
  background: var(--popup-opt-bg);
  border-radius: 4px;
  color: #fff;
}
.popup-bubble--option-grid .font-format-btn:hover {
  background: var(--popup-opt-bg-hover);
  border-color: rgba(88, 54, 181, 0.5);
  color: #fff;
}
.popup-bubble--option-grid .font-format-btn.active {
  background: var(--popup-opt-bg-active);
  border-color: var(--popup-opt-bg-active);
  color: #fff;
}
.popup-bubble--option-grid .font-opt-letter,
.popup-bubble--option-grid .format-opt-icon {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}
/* Option-grid popups: no scrollbar, content fits */
.popup-bubble--option-grid.popup-bubble {
  overflow: visible;
  max-height: none;
}
.popup-bubble--option-grid .popup-content {
  overflow: visible;
  max-height: none;
}

/* Set popup: Stamping/Coloring toggle row above stamp grid */
.popup-bubble--stamp-mode .stamp-mode-row {
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: center;
}
.popup-bubble .stamp-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ui-primary);
  background: transparent;
  border: 1px solid var(--border-medium, rgba(255,255,255,0.25));
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.popup-bubble .stamp-mode-toggle:hover {
  color: var(--ui-light);
  border-color: var(--border-strong, rgba(255,255,255,0.4));
}
.popup-bubble .stamp-mode-toggle .ph {
  font-size: 1.15rem;
}

/* Font Format popup: square icons (B, I, U), compact single row */
.popup-bubble--text-format.popup-bubble {
  width: max-content;
  min-width: 0;
}
.popup-bubble--text-format .popup-content {
  padding: var(--popup-standard-content-padding);
  display: block;
  width: max-content;
}
.popup-bubble--text-format .popup-format-content {
  width: max-content;
  display: block;
}
.popup-bubble--text-format .canvas-size-grid {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: var(--popup-standard-grid-gap);
  width: max-content;
}
.popup-bubble--text-format .canvas-size-opt,
.popup-bubble--text-format .font-format-btn {
  aspect-ratio: 1;
  min-width: var(--popup-icon-size-min);
  min-height: var(--popup-icon-size-min);
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--popup-icon-padding);
  gap: 0.2rem;
}
.popup-bubble--text-format .font-format-btn .format-opt-icon,
.popup-bubble--text-format .font-format-btn .ph {
  font-size: var(--popup-icon-font-size);
  line-height: 1;
}
.popup-bubble--text-format .font-format-btn span:last-child {
  font-size: var(--popup-icon-label-size);
  letter-spacing: 0.02em;
}

/* Core builder icon popups: keep compact and never force scrollbars. */
.popup-bubble--paint-fx,
.popup-bubble--stamp-mode,
.popup-bubble--select,
.popup-bubble--shapes,
.popup-bubble--text-format {
  overflow: visible;
  max-height: none;
}

/* Core builder icon popups: icon-name text follows Paint FX size. */
.popup-bubble--paint-fx .paint-fx-opt span,
.popup-bubble--select .select-opt span,
.popup-bubble--shapes .canvas-size-opt.shape-opt span:last-child,
.popup-bubble--text-format .font-format-btn span:last-child {
  font-size: var(--popup-icon-label-size);
}
/* Line spacing row: compact option boxes */
.popup-bubble--font .font-line-spacing-btns.canvas-size-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
}
.popup-bubble--font .font-line-spacing-btns .canvas-size-opt {
  padding: 0.35rem;
  font-size: 0.85rem;
}
.popup-bubble--font .font-line-spacing-btns .canvas-size-opt span:first-of-type {
  display: none;
}
.popup-bubble--font .font-line-spacing-btns .canvas-size-opt span:last-of-type {
  font-weight: 600;
}

.canvas-surface-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.35rem;
  width: fit-content;
}

.canvas-surface-options--six {
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3rem;
}

.canvas-surface-options--four {
  grid-template-columns: repeat(2, 1fr);
  gap: 0.3rem;
}

.canvas-surface-option {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  font-size: 1.75rem !important;
  width: 3rem !important;
  height: 3rem !important;
  box-sizing: border-box;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  cursor: pointer;
  color: inherit;
}

.canvas-surface-options--six .canvas-surface-option {
  width: 3rem;
  height: 3rem;
  font-size: 1.75rem;
  padding: 0;
}

.canvas-surface-option i,
.canvas-surface-option .ph {
  font-size: inherit;
}

.canvas-surface-option:hover {
  background: var(--popup-opt-bg-hover) !important;
  color: #fff !important;
}

.canvas-surface-option.active {
  background: var(--popup-opt-bg-active) !important;
  color: #fff !important;
}

.lx-placeholder {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted, var(--text-body));
  opacity: 0.85;
}

/* HPP: the image IS the website (viewport = app). Centered, 90% vertically, width from image. Bubble = that rectangle only. */
.popup-bubble--hpp {
  padding: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  border: none;
  border-radius: 0;
}

.popup-bubble--hpp .popup-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background: transparent;
  color: #fff;
}

.popup-bubble--hpp .popup-header h3 {
  display: none;
}

.popup-bubble--hpp .popup-close {
  color: #fff;
}
.popup-bubble--hpp .popup-close:hover {
  color: #fff;
  opacity: 0.9;
}

.popup-bubble--hpp .popup-content {
  padding: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.popup-bubble--hpp .hpp-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* HPP Legal: 2-col (33% Navigator + 67% doc); print row above two-col */
.hpp-legal-print-row {
  margin-bottom: 0;
  padding: 0.5rem 1rem 0;
}
.hpp-legal-print-btn {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--panel, #252a34);
  border: 1px solid var(--border-medium, rgba(255,255,255,0.2));
  border-radius: 6px;
  color: var(--text-primary, #fff);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
}
.hpp-legal-print-btn:hover {
  background: var(--accent, #8b6dd0);
  border-color: var(--accent, #8b6dd0);
}
/* HPP Legal only — not Studio (Studio also had .popup-bubble--hpp-legal for shared TOC styles; that was painting legal art under OSS). */
.popup-bubble--hpp-legal:not(.popup-bubble--hpp-studio) {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #f5f5f5;
  background-image: var(--hpp-legal-art);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  color: #1a1a1a;     /* Graphite-style dark */
  padding: 0;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  border: none;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}
.popup-bubble--hpp-legal:not(.popup-bubble--hpp-studio).popup-bubble--hpp-entering {
  transform: scale(0.95);
  opacity: 0;
}
/* Legal HPP: frosted columns so --hpp-legal-art shows through (base .hpp-legal-nav is nearly flat grey). */
.popup-bubble--hpp-legal:not(.popup-bubble--hpp-studio) .hpp-legal-nav {
  background: rgba(245, 245, 245, 0.52);
  border-right-color: rgba(0, 0, 0, 0.1);
}
.popup-bubble--hpp-legal:not(.popup-bubble--hpp-studio) .hpp-legal-doc {
  background: rgba(245, 245, 245, 0.4);
}
.popup-bubble--hpp-legal .popup-header {
  position: static;
  flex-shrink: 0;
  padding: 0.6rem 1rem 0.6rem 1rem;
  margin: 0;
  min-height: 2.75rem;
  background: #2d2d2d;
  border-radius: 8px 8px 0 0;
}
.popup-bubble--hpp-legal .popup-header h3 {
  display: block;
  font-size: 0.95rem;
  margin: 0;
  padding: 0;
  padding-right: 2.25rem;
  line-height: 1.4;
  color: #fff;
  font-weight: 600;
}
.popup-bubble--hpp-legal .hpp-legal-title-print {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin: 0 0.15em;
  padding: 0 0.2em;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 1em;
}
.popup-bubble--hpp-legal .hpp-legal-title-print:hover {
  opacity: 0.9;
}
.popup-bubble--hpp-legal .hpp-legal-title-print .ph {
  font-size: 1.1em;
}
.popup-bubble--hpp-legal .popup-close {
  color: #fff;
}
.popup-bubble--hpp-legal .popup-close:hover {
  color: #fff;
  opacity: 0.9;
}
.popup-bubble--hpp-legal .popup-content {
  padding: 0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* HPP Studio (paw logo popup): dark purple paw background, all text #f5f5f5 */
.popup-bubble--hpp-studio {
  background-color: #5836b5;
  color: #f5f5f5;
  border-color: rgba(255,255,255,0.12);
}
.popup-bubble--hpp-studio .popup-header {
  background: rgba(0,0,0,0.2);
  text-align: left;
  padding: 0.75rem 1rem 0.6rem 1rem;
}
.popup-bubble--hpp-studio .popup-header h3,
.popup-bubble--hpp-studio .popup-close {
  color: #f5f5f5;
}
.popup-bubble--hpp-studio .hpp-legal-nav .hpp-studio-tagline {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 0.75rem;
  font-size: 0.9rem;
  font-weight: normal;
  opacity: 0.95;
  color: #f5f5f5;
  line-height: 1.35;
}
.popup-bubble--hpp-studio .hpp-legal-nav .hpp-studio-tagline .hpp-tagline-signature {
  display: block;
  margin-top: 0.4em;
}
.popup-bubble--hpp-studio .hpp-legal-nav {
  border-right-color: rgba(255,255,255,0.15);
  background: rgba(0, 0, 0, 0.22);
}
.popup-bubble--hpp-studio .hpp-legal-doc {
  background: transparent;
}
.popup-bubble--hpp-studio .hpp-legal-nav-title {
  color: #F5F5F5;
}
.popup-bubble--hpp-studio .hpp-legal-toc a {
  color: #F5F5F5;
  text-decoration: none;
  display: inline-block;
  transition: transform 0.2s ease-out, filter 0.2s ease-out;
}
.popup-bubble--hpp-studio .hpp-legal-toc a:hover {
  color: #F5F5F5;
  text-decoration: underline;
  transform: scale(1.2);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
}
/* Transparent horizontal line under TOC; social icons (Crew, Facebook, Instagram) right below */
.hpp-studio-nav-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.2);
  margin: 0.5rem 0;
  width: 100%;
}
.hpp-studio-social {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}
.hpp-studio-social-link {
  color: inherit;
  opacity: 0.9;
  transition: opacity 0.2s, transform 0.2s, filter 0.2s;
}
.hpp-studio-social-link:hover {
  opacity: 1;
}
.hpp-studio-social-link .hpp-studio-social-icon {
  display: block;
  width: 24px;
  height: 24px;
  transition: transform 0.2s, filter 0.2s;
}
.hpp-studio-social-link:hover .hpp-studio-social-icon {
  transform: scale(1.2);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
}
.popup-bubble--hpp-studio .hpp-studio-social-link {
  color: #f5f5f5;
}
.popup-bubble--hpp-studio .hpp-studio-social-link i,
.popup-bubble--hpp-studio .hpp-studio-social-link .hpp-studio-social-icon {
  font-size: 1.25rem;
}
.popup-bubble--hpp-studio .hpp-legal-thumbnails {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}
.popup-bubble--hpp-studio .hpp-legal-body h2,
.popup-bubble--hpp-studio .hpp-legal-body p,
.popup-bubble--hpp-studio .hpp-legal-body a {
  color: #f5f5f5;
}
.popup-bubble--hpp-studio .hpp-legal-body a:hover {
  color: #f5f5f5;
  text-decoration: underline;
}

/* Legal popup (light bg): dark bullets and single dark separator line */
.popup-bubble--hpp-legal .hpp-legal-toc {
  border-bottom: 1px solid rgba(0,0,0,0.12);
  padding-bottom: 0.5rem;
}
.popup-bubble--hpp-legal .hpp-legal-toc ul {
  list-style-color: #1a1a1a;
}
.popup-bubble--hpp-legal .hpp-legal-toc ul li::marker {
  color: #1a1a1a;
}

/* HPP paw popup: light bullet dots (must come after Legal so it wins when bubble has both --hpp-legal and --hpp-studio) */
.popup-bubble--hpp-studio .hpp-legal-toc ul {
  list-style-color: #F5F5F5;
}
.popup-bubble--hpp-studio .hpp-legal-toc ul li::marker {
  color: #f5f5f5;
}

.hpp-legal-print-row {
  flex-shrink: 0;
}
.hpp-legal-two-col {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  width: 100%;
}
.hpp-legal-nav {
  flex: 0 0 33%;
  width: 33%;
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
  border-right: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.04);
  overflow-y: auto;
  min-width: 0;
}
.hpp-legal-nav-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  color: #0a0a0a;     /* Graphite --bg-dark */
}
.hpp-legal-toc {
  flex-shrink: 0;
}
.hpp-legal-toc ul {
  margin: 0;
  padding-left: 1rem;
  list-style: disc;
  line-height: 1.5;
}
.hpp-legal-toc ul li {
  margin: 0.15em 0;
}
.hpp-legal-toc a {
  color: #2d2d2d;     /* Graphite --bg-panel */
  text-decoration: none;
  font-size: 0.85rem;
}
.hpp-legal-toc a:hover {
  color: #1a1a1a;
  text-decoration: underline;
}
.hpp-legal-thumbnails {
  flex: 1;
  min-height: 4rem;
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.hpp-legal-doc {
  flex: 1 1 67%;
  width: 67%;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem 1.25rem;
}
.hpp-legal-body section {
  margin-bottom: 1.25rem;
}
.hpp-legal-body h2 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.35rem 0;
  color: #0a0a0a;     /* Graphite --bg-dark */
}
.hpp-legal-body p {
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #1a1a1a;     /* Graphite --bg-primary */
}
.hpp-legal-body a {
  color: #1f1f1f;     /* Graphite --block-bg-dark */
  text-decoration: underline;
}
.hpp-legal-body a:hover {
  color: #0a0a0a;
}
.hpp-legal-body .hpp-legal-section-divider {
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1.25rem 0;
}

.hpp-studio-art-packs-intro {
  margin-bottom: 0.75rem;
}
.hpp-studio-badge-list {
  margin: 0.5rem 0 0 1.25rem;
  padding: 0;
  line-height: 1.6;
}
.popup-bubble--hpp-studio .hpp-studio-badge-list {
  color: #F5F5F5;
}
.hpp-studio-art-pack-thumbnails,
.hpp-studio-app-store-thumbnails,
.hpp-studio-schoon-thumbnails,
.hpp-studio-search-dog-thumbnails,
.hpp-studio-badge-thumbnails,
.hpp-studio-bookshelf-thumbnails {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.hpp-studio-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  cursor: pointer;
  color: inherit;
  font-size: 0.8rem;
  text-align: center;
  transition: background 0.2s, border-color 0.2s;
}
.hpp-studio-thumb:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.25);
}
.hpp-studio-thumb img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
}
.popup-bubble--hpp-studio .hpp-studio-art-packs-intro,
.popup-bubble--hpp-studio .hpp-studio-art-pack-thumbnails,
.popup-bubble--hpp-studio .hpp-studio-app-store-thumbnails,
.popup-bubble--hpp-studio .hpp-studio-schoon-thumbnails,
.popup-bubble--hpp-studio .hpp-studio-search-dog-thumbnails,
.popup-bubble--hpp-studio .hpp-studio-badge-thumbnails,
.popup-bubble--hpp-studio .hpp-studio-bookshelf-thumbnails {
  color: #F5F5F5;
}

.hpp-paw-svg {
  width: 100%;
  max-width: min(20rem, 45vh);
  height: auto;
  fill: var(--pj-purple-paw);
  opacity: 0.98;
}

.hpp-stage-content {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
}

.hpp-tip-block--stage {
  border-left-color: rgba(255, 255, 255, 0.5);
  padding-left: 0.75rem;
  margin: 0;
  text-align: left;
}

.hpp-tip-text--stage {
  font-size: 1.125rem;
  line-height: 1.45;
  color: #fff;
  font-weight: 500;
}

.hpp-coming--stage p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
}

.hpp-download-cta {
  margin-top: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.4);
}

.hpp-download-label {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
}

.hpp-download-placeholder {
  display: block;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0.25rem;
}

/* HPP 2-column: Left = TOC + thumbnails/announcements, Right = page content (e.g. Privacy Policy) */
.hpp-two-col {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 12rem;
  flex: 0 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 0.5rem;
  padding-top: 0.75rem;
}

.hpp-toc {
  flex: 0 0 auto;
  width: 12rem;
  padding: 0 0.75rem 0.5rem 0;
}

.hpp-toc-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 0.5rem 0;
}

.hpp-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hpp-toc-item {
  display: block;
  width: 100%;
  padding: 0.35rem 0.5rem;
  margin-bottom: 0.15rem;
  text-align: left;
  background: none;
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  cursor: pointer;
}

.hpp-toc-item:hover {
  background: rgba(255, 255, 255, 0.12);
}

.hpp-toc-item.active {
  background: rgba(255, 255, 255, 0.18);
  font-weight: 500;
}

.hpp-toc-note {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.65);
  margin: 0.5rem 0 0 0;
}

.hpp-divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.hpp-content-pane {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 0 0.5rem 0.75rem;
  overflow-y: auto;
}

.hpp-content-placeholder {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}

/* HPP when used in small tooltip-style popups (unchanged) */
.hpp-tip-block {
  grid-column: 1 / -1;
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
  border-left: 3px solid var(--ui-primary);
  padding-left: 0.75rem;
  min-width: 16rem;
  max-width: 22rem;
}

.hpp-tip-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text-body);
}

.hpp-coming {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted, var(--text-body));
  opacity: 0.8;
}

.hpp-coming p {
  margin: 0;
}

.fx-controls {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 12rem;
}

.fx-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-body);
}

.fx-row > span:first-child {
  min-width: 5rem;
}

.fx-slider {
  flex: 1;
  height: 0.5rem;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border-medium);
  border-radius: 0.25rem;
}

.fx-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  background: var(--ui-primary);
  border-radius: 50%;
  cursor: pointer;
}

.fx-slider::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background: var(--ui-primary);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

.fx-value {
  min-width: 2rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-header);
}

.fx-value-input {
  width: 2.5rem;
  padding: 0.15rem 0.25rem;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--text-header);
  background: var(--bg-secondary);
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  -moz-appearance: textfield;
}
.fx-value-input::-webkit-outer-spin-button,
.fx-value-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.fx-value-input:focus {
  outline: none;
  border-color: var(--ui-primary);
}

.fx-reset-btn {
  margin-top: 0.5rem;
  padding: 0.35rem 0.75rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-body);
}

.fx-reset-btn:hover {
  border-color: var(--ui-primary);
  background: var(--bg-secondary);
}

/* Font buttons: in popup use uniform rules above (2rem, no border); base for sidebar only */
.font-btn {
  width: 4rem;
  height: 4rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-medium);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-body);
  font-size: 2rem;
  transition: all 0.2s ease;
  border-radius: 6px;
}
/* Popup font buttons: use unified icon system (no extra border/shadow on base) */
.popup-bubble .popup-content .font-btn:hover {
  filter: drop-shadow(0 0 8px var(--border-medium)) !important;
  transform: scale(var(--popup-icon-hover-scale));
}
.font-btn:hover {
  border-color: var(--ui-primary);
  filter: drop-shadow(0 0 8px var(--border-medium));
  transform: scale(1.1);
}

/* Active font: same purple active state as other popup options */
.font-btn.active,
.popup-bubble .popup-content .font-btn.active {
  background: var(--popup-opt-bg-active) !important;
  outline: 2px solid var(--popup-opt-bg-active);
  outline-offset: 2px;
  color: #fff !important;
  font-weight: 600;
}
.popup-bubble .popup-content .font-btn.active:hover {
  color: #fff !important;
  background: var(--popup-opt-bg-active) !important;
}

/* Font popup: 2 rows — row1 two columns (fonts + line spacing | B I U), row2 full width (size) */
.popup-bubble--font .popup-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 14rem;
}
.popup-bubble--font .font-popup-row1 {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: start;
}
.popup-bubble--font .font-popup-col1 .font-popup-grid,
.popup-bubble--font .font-popup-grid.canvas-size-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem 0.5rem;
}
.popup-bubble--font .font-popup-grid .canvas-size-opt span:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
}
.popup-bubble--font .font-popup-grid .font-btn-letter-only .font-opt-letter {
  font-size: 1.75rem;
  font-weight: 600;
  display: block;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
/* Single letter per font: center in button */
.popup-bubble--font .font-popup-grid .font-btn-letter-only {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  min-width: 3rem;
  border: 1px solid var(--border-subtle) !important;
  background: var(--bg-tertiary, rgba(0,0,0,0.06)) !important;
  border-radius: 4px;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.popup-bubble--font .font-popup-grid .font-btn-letter-only:hover {
  background: var(--popup-opt-bg-hover) !important;
  border-color: rgba(88, 54, 181, 0.5) !important;
  color: #fff !important;
}
.popup-bubble--font .font-popup-grid .font-btn-letter-only.active {
  border-color: var(--popup-opt-bg-active) !important;
  background: var(--popup-opt-bg-active) !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px var(--popup-opt-bg-active);
}
.popup-bubble--font .font-popup-grid .font-btn-letter-only span:last-child {
  overflow: visible;
  text-overflow: clip;
}
.popup-bubble--font .font-popup-grid .font-opt-letter {
  font-size: 1.75rem;
}
.popup-bubble--font .font-line-spacing-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  background: var(--bg-secondary, rgba(255,255,255,0.06));
  border-radius: 6px;
  min-height: 2.5rem;
}
.popup-bubble--font .font-line-spacing-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--text-muted, rgba(255,255,255,0.6));
}
.popup-bubble--font .font-line-spacing-btns {
  display: flex;
  gap: 4px;
}
.popup-bubble--font .font-format-btn {
  min-width: 2rem;
  height: 2rem;
  padding: 0 6px;
  font-size: 0.9rem;
  font-weight: 700;
  border: 1px solid var(--popup-input-border);
  border-radius: 4px;
  background: var(--popup-opt-bg);
  color: #fff;
  cursor: pointer;
}
.popup-bubble--font .font-format-btn:hover {
  background: var(--popup-opt-bg-hover);
  border-color: rgba(88, 54, 181, 0.5);
  color: #fff;
}
.popup-bubble--font .font-format-btn.active {
  background: var(--popup-opt-bg-active);
  color: #fff;
  border-color: var(--popup-opt-bg-active);
}
.popup-bubble--font .font-format-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.popup-bubble--font .font-align-row {
  margin-top: 4px;
}
.popup-bubble--font .font-align-btn .ph {
  font-size: 1.1rem;
}
.popup-bubble--font .font-popup-divider {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--border-medium);
}
.popup-bubble--font .font-popup-row2 {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.popup-bubble--font .font-popup-row2 .fx-row input[type="range"] {
  flex: 1;
  min-width: 6rem;
  max-width: 12rem;
}
.popup-bubble--font .font-points-stroke-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}
.popup-bubble--font .font-points-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.popup-bubble--font .font-points-row input {
  width: 4rem;
  padding: 4px;
}

/* Align & spacing popup: alignment buttons + line spacing row, compact, no extra space */
.popup-bubble--text-align.popup-bubble {
  width: max-content;
  min-width: 0;
}
.popup-bubble--text-align .popup-content {
  padding: 0.5rem;
  display: block;
  width: max-content;
}
.popup-bubble--text-align .popup-align-content {
  width: max-content;
  display: block;
}
.popup-bubble--text-align .font-align-row {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 0.4rem;
  width: max-content;
}
.popup-bubble--text-align .font-align-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  min-width: 3rem;
  min-height: 2.5rem;
  border: 1px solid var(--popup-input-border);
  background: var(--popup-opt-bg);
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-size: 0.8rem;
}
.popup-bubble--text-align .font-align-btn:hover {
  background: var(--popup-opt-bg-hover);
  border-color: rgba(88, 54, 181, 0.5);
  color: #fff;
}
.popup-bubble--text-align .font-align-btn.active {
  background: var(--popup-opt-bg-active);
  border-color: var(--popup-opt-bg-active);
  color: #fff;
}
.popup-bubble--text-align .font-align-btn .ph {
  font-size: 1.25rem;
}
.popup-bubble--text-align .font-line-spacing-section {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-medium);
  width: max-content;
}
.popup-bubble--text-align .font-line-spacing-label {
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  color: var(--text-muted, rgba(255,255,255,0.6));
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.popup-bubble--text-align .font-line-spacing-label .ph {
  font-size: 0.9rem;
}
.popup-bubble--text-align .font-line-spacing-btns {
  display: flex;
  gap: 0.35rem;
  width: max-content;
}
.popup-bubble--text-align .font-spacing-opt {
  min-width: 2.5rem;
  padding: 0.4rem;
  border: 1px solid var(--popup-input-border);
  background: var(--popup-opt-bg);
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
}
.popup-bubble--text-align .font-spacing-opt:hover {
  background: var(--popup-opt-bg-hover);
  border-color: rgba(88, 54, 181, 0.5);
  color: #fff;
}
.popup-bubble--text-align .font-spacing-opt.active {
  background: var(--popup-opt-bg-active);
  border-color: var(--popup-opt-bg-active);
  color: #fff;
}

/* q000: Footer — 1.5rem height, 0.9rem text/icons, vertically centered */
#q000 {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--footer-height);
  min-height: 0;
  background: var(--bg-dark);
  border-bottom: 2px solid var(--bg-dark);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--footer-padding-x);
  color: var(--text-light);
  font-size: 0.9rem;
  z-index: 20;
}

#q000 span:first-child {
  justify-self: start;
}

#q000 .copyright {
  justify-self: center;
  align-self: center;
  display: flex;
  align-items: center;
  font-family: 'Cherry Bomb One', cursive;
  color: var(--bg-canvas);
  margin-left: 96px;
  margin-right: 96px;
}

#q000 span:last-child {
  justify-self: end;
  align-self: center;
  display: flex;
  align-items: center;
}

#q000 span:first-child,
#q000 span:last-child {
  color: var(--ui-light);
}
#q000 .footer-left-legal {
  display: inline-flex;
  align-items: center;
  gap: var(--footer-gap);
}
#q000 .footer-legal-link {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
#q000 .footer-legal-link:hover {
  text-decoration: underline;
}

#q000 .footer-theme-btn {
  padding: 0.2rem 0.4rem;
  background: none;
  border: 1px solid var(--ui-light);
  border-radius: 4px;
  margin: 0 0 0 0.25rem;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: inherit;
  line-height: 1;
}
#q000 .footer-theme-btn:hover {
  color: var(--bg-canvas);
  border-color: var(--bg-canvas);
}
#q000 .footer-theme-btn i {
  font-size: 1em;
}

#q000 .footer-about-btn {
  padding: 0.2rem 0.4rem;
  background: none;
  border: 1px solid var(--ui-light);
  border-radius: 4px;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#q000 .footer-about-btn i {
  font-size: 1em;
}
#q000 .footer-about-btn:hover {
  color: var(--bg-canvas);
  border-color: var(--bg-canvas);
}

#q000 .footer-settings-btn {
  padding: 0.2rem 0.4rem;
  background: none;
  border: 1px solid var(--ui-light);
  border-radius: 4px;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#q000 .footer-settings-btn i {
  font-size: 1em;
}
#q000 .footer-settings-btn:hover {
  color: var(--bg-canvas);
  border-color: var(--bg-canvas);
}
#q000 .footer-settings-btn .footer-settings-gear-flash {
  animation: settings-gear-flash 1.2s ease-in-out infinite;
}
@keyframes settings-gear-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

#q000 .footer-right {
  display: inline-flex;
  align-items: center;
  gap: var(--footer-gap);
  line-height: 1;
}
#q000 .footer-right .footer-filename {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#q000 .footer-right .footer-zoom,
#q000 .footer-right .footer-zoom-reset-btn,
#q000 .footer-right .footer-theme-btn,
#q000 .footer-right .footer-icon-style-btn {
  line-height: 1;
}

#q000 .footer-zoom {
  color: #ffffff;
  font-weight: 500;
  min-width: 2.5rem;
}

/* Zoom in/out/Reset/Icon style: same font size as footer for clean alignment */
#q000 .footer-zoom-btn,
#q000 .footer-zoom-reset-btn,
#q000 .footer-icon-style-btn {
  padding: 0.2rem 0.4rem;
  background: none;
  border: 1px solid var(--ui-light);
  border-radius: 4px;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#q000 .footer-zoom-btn i,
#q000 .footer-icon-style-btn i {
  font-size: 1em;
}
#q000 .footer-zoom-btn:hover,
#q000 .footer-zoom-reset-btn:hover,
#q000 .footer-icon-style-btn:hover {
  color: var(--bg-canvas);
  border-color: var(--bg-canvas);
}
#q000 .footer-zoom-reset-btn {
  font-size: 0.85em;
}

/* === SCROLLBAR === */
/* q100, q300: visible scrollbars for sidebars */
#q100::-webkit-scrollbar,
#q300::-webkit-scrollbar {
  width: 1rem;
}

#q100::-webkit-scrollbar-track,
#q300::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

#q100::-webkit-scrollbar-thumb,
#q300::-webkit-scrollbar-thumb {
  background: var(--ui-primary);
  border-radius: 0.5rem;
  transition: background 0.2s ease;
}

#q100::-webkit-scrollbar-thumb:hover,
#q300::-webkit-scrollbar-thumb:hover {
  background: var(--ui-dark);
}

/* q200 canvas viewport: visible scrollbars for WCAG (discoverability, motor users). Invisible scrollbars are not recommended. */
#canvas-viewport::-webkit-scrollbar {
  width: 0.75rem;
  height: 0.75rem;
}

#canvas-viewport::-webkit-scrollbar-track {
  background: var(--bg-primary, rgba(0,0,0,0.15));
  border-radius: 0.25rem;
}

#canvas-viewport::-webkit-scrollbar-thumb {
  background: var(--ui-primary, rgba(100,120,140,0.7));
  border-radius: 0.375rem;
}

#canvas-viewport::-webkit-scrollbar-thumb:hover {
  background: var(--ui-dark, rgba(80,100,120,0.9));
}

/* === SIDEBAR BLOCKS === */
.sidebar-block {
  padding-bottom: 0.75rem; /* gap between blocks = this block’s color */
}
.sidebar-block:first-child {
  padding-top: 0.75rem; /* top of first block = block color */
}

/* Brand H1; theme switcher is the H2 "Start Making Arrt!!" below */
.sidebar-block h1.start-art-heading {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-header);
  padding: 0.5rem;
  text-align: center;
  margin: 0;
  font-family: inherit;
}
.sidebar-block h2.start-art-subheading.theme-switcher {
  cursor: pointer;
  transition: color 0.2s ease, filter 0.2s ease;
}
.sidebar-block h2.start-art-subheading.theme-switcher:hover {
  color: var(--ui-light);
  filter: drop-shadow(0 0 6px var(--border-medium));
}
.sidebar-block h2.start-art-subheading.theme-switcher:focus {
  outline: 2px solid var(--ui-primary);
  outline-offset: 2px;
}
.sidebar-block h2.start-art-subheading {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-header);
  margin: 0 0 0.5rem 0;
  padding: 0 0.5rem;
  text-align: center;
  line-height: 1.2;
}

.block-header-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem 0.5rem 0 0.5rem;
}
.block-header-row h2 {
  margin: 0;
}
.block-lock-btn {
  flex-shrink: 0;
  padding: 0.25rem;
}
.block-lock-btn .block-lock-icon {
  font-size: 1rem;
}
.block-lock-btn.locked .block-lock-icon {
  color: var(--ui-primary, #0a7ea4);
}

.sidebar-block h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-header);
  padding: 0.5rem;
  text-align: center;
}

.sidebar-block h3 {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-header);
  padding: 0.25rem 0.5rem;
  text-align: center;
}

/* Alternating block backgrounds per theme (all assets in block share bg) */
#q100 .sidebar-block,
#q300 .sidebar-block {
  background: var(--block-bg-light);
}
#q100 .sidebar-block {
  width: 100%;
  box-sizing: border-box;
}
/* Center builder blocks' content (h3 + thumbnails) in q100; thumbnails hug toward q200 if narrow */
#q100 .sidebar-block:has(.preview-grid) {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#q100 .icon-row {
  justify-content: center;
}
#q100 .preview-grid {
  grid-template-rows: repeat(2, 3rem);
  gap: 0.35rem;
  /* Centered by parent .sidebar-block:has(.preview-grid) align-items: center */
}
#q100 .sidebar-block:not(:first-child) {
  padding-top: 0.35rem;
  padding-bottom: 0.4rem; /* tighter vertical spacing between blocks */
}
/* q100 & q300: alternating block backgrounds (e.g. Bumblebee #1e1e1e / #000000) */
#q100 .sidebar-block:nth-of-type(even),
#q300 .sidebar-block:nth-of-type(even) {
  background: var(--block-bg-dark);
}

/* Center builder blocks' content (h3 + thumbnails) in q300, same as q100 */
#q300 .sidebar-block:has(.preview-grid) {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* q300: same icon layout as q100 (flex, centered) */
#q300 .icon-row {
  justify-content: center;
}
/* Insert Text (tool-btn): visible active ring like q400 paint tools */
#q300 .icon-btn.tool-btn.active {
  color: var(--ui-dark);
  filter: none;
  box-shadow: 0 0 0 2px var(--ui-primary);
  border-radius: 4px;
}
#q300 .icon-btn.tool-btn.active i {
  color: var(--ui-dark);
}
/* Storybook Builder: 4 icons in 2×2 grid, centered as a block (same feel as Script Builder rows) */
#q300 .sidebar-block:nth-of-type(2) .icon-row {
  display: grid;
  grid-template-columns: repeat(2, 3rem);
  grid-template-rows: repeat(2, 3rem);
  gap: 0.35rem;
  justify-items: center;
  width: min-content;
  margin-left: auto;
  margin-right: auto;
}

/* === ICON BUTTONS === */
.icon-row {
  display: flex;
  width: 100%;
}

.icon-btn {
  width: 3rem;
  height: 3rem;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ui-primary);
  font-size: 2.25rem;
  transition: all 0.2s ease;
}
.icon-btn:focus-visible {
  outline: 2px solid var(--text-light, #f4b1fb);
  outline-offset: 2px;
}
.icon-btn:focus:not(:focus-visible) {
  outline: none;
}
.icon-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  pointer-events: none;
}

/* Toolbar Paint Tools: normal = brighter (like former active); active = color-well inactive outline (white/light) */
#q400 .icon-btn {
  color: var(--text-light);
}
#q400 .icon-btn.active {
  color: var(--bg-canvas);
  filter: none;
  box-shadow: 0 0 0 2px var(--bg-canvas);
}
#q400 .icon-btn:hover {
  color: var(--bg-canvas);
}
#q400 .icon-btn i {
  color: inherit;
}

#q400 .icon-btn--palette .palette-icon-svg {
  width: 2.25rem;
  height: 2.25rem;
  display: block;
}

.icon-btn i {
  font-size: 2.25rem;
  color: var(--ui-primary);
}

.icon-btn img {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
}

.icon-btn:hover {
  color: var(--ui-light);
  filter: drop-shadow(0 0 8px var(--border-medium));
  transform: scale(1.25);
}

.icon-btn:hover i {
  color: var(--ui-light);
}

.icon-btn.active {
  color: var(--ui-dark);
  filter: drop-shadow(0 0 12px var(--border-strong));
}

.icon-btn.active i {
  color: var(--ui-dark);
}

/* Icon button with popup: small triangle indicator (e.g. Canvas Settings) */
.icon-btn--has-popup {
  position: relative;
}
.icon-btn--has-popup::after {
  content: '';
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 0;
  height: 0;
  border-width: 0 0 5px 5px;
  border-style: solid;
  border-color: transparent transparent currentColor transparent;
  opacity: 0.85;
  pointer-events: none;
}

/* Storybook Builder: WIP placeholders — same visual weight as other icons (not dimmed like :disabled) */
.icon-btn--wip {
  opacity: 1;
  cursor: default;
}

/* Rich hover tips (data-tooltip; || splits title / optional meta lines / body). Shipshaper = exception. */
.oss-tooltip {
  position: fixed;
  z-index: 9999;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-wrap: break-word;
  padding: 0.5rem 0.65rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: #fff;
  background: #3d257f;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.1);
  pointer-events: none;
  opacity: 0;
  /* top/left set by JS; transform centers vertically and animates in */
  transform: translateY(-50%) translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
/* Standard rich tips: identical footprint everywhere (avoids shrink-to-fit “chimney” + huge wide bars) */
.oss-tooltip.oss-tooltip--rich {
  width: var(--oss-tooltip-rich-width);
  min-width: var(--oss-tooltip-rich-width);
  max-width: var(--oss-tooltip-rich-width);
  padding: 0.45rem 0.55rem;
  font-size: 0.75rem;
  line-height: 1.38;
  border-radius: 5px;
}
.oss-tooltip-rich {
  margin: 0;
  padding: 0;
}
.oss-tooltip-rich__title {
  margin: 0 0 0.35em;
  font-weight: 600;
  font-size: 0.82rem;
  line-height: 1.25;
  color: inherit;
}
.oss-tooltip-rich__meta {
  margin: 0 0 0.3em;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.3;
  opacity: 0.88;
  letter-spacing: 0.02em;
}
.oss-tooltip-rich__text {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.42;
  opacity: 0.96;
}
.oss-tooltip-rich__text:only-child {
  font-size: 0.76rem;
}

/* Graphite theme: tooltip background uses graphite "shiny" dark instead of purple */
body.theme-graphite .oss-tooltip {
  background: #0f0f0f;
}
.oss-tooltip.is-visible.is-hoverable {
  pointer-events: auto;
}
.oss-tooltip.is-visible {
  opacity: 1;
  transform: translateY(-50%) translateY(0);
}
.oss-tooltip strong,
.oss-tooltip b {
  font-weight: 600;
}
.oss-tooltip i.ph {
  vertical-align: middle;
  margin-right: 0.35em;
}
/* Shipshaper tooltip: match HPP palette and spacing for a consistent, professional look */
.oss-tooltip.oss-tooltip--shipshaper {
  width: auto;
  min-width: 0;
  max-width: 16.3rem;
  padding: 0.6rem 0.75rem;
  background: #231245;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.08);
  line-height: 1.5;
  color: #F5F5F5;
}
.oss-tooltip.oss-tooltip--shipshaper .oss-tooltip-title.oss-tooltip-title--shipshaper {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #F5F5F5;
  letter-spacing: 0.02em;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-tool-icon {
  font-size: 1.25rem;
  vertical-align: middle;
  margin-right: 0.4rem;
  opacity: 0.95;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-boat-reset-row {
  margin-bottom: 0.5rem;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-boat-reset-btn {
  background: transparent;
  color: #f5f5f5;
  border: 1px solid #f5f5f5;
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  font-size: 0.85em;
  cursor: pointer;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-boat-reset-btn:hover {
  color: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.95);
}
.oss-tooltip.oss-tooltip--shipshaper .ss-master-row {
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.oss-tooltip.oss-tooltip--shipshaper .ss-line {
  margin-bottom: 0.35rem;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-line:last-child {
  margin-bottom: 0;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-line.ss-line--wip {
  opacity: 0.6;
  pointer-events: auto;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-line.ss-line--wip .ss-checkbox {
  cursor: not-allowed;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-line-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: rgba(245, 245, 245, 0.98);
}
.oss-tooltip.oss-tooltip--shipshaper .ss-checkbox {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin: 0;
  vertical-align: middle;
  cursor: pointer;
  accent-color: #4C2FA0;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-label {
  font-size: 0.9rem;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-label:hover {
  color: #F5F5F5;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-guide-trigger {
  cursor: pointer;
  border-radius: 4px;
  padding: 0.15rem 0;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-guide-trigger .ss-guide-title-info {
  margin-left: 0.3em;
  margin-right: 0;
  font-size: 1em;
  vertical-align: -0.06em;
  opacity: 0.95;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-guide-trigger:hover {
  color: #fff;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-lx-controls {
  margin: 0.2rem 0 0.55rem 1.45rem;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-lx-heading {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(245, 245, 245, 0.95);
  margin: 0 0 0.3rem;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-lx-label {
  display: block;
  margin: 0.35rem 0 0.2rem;
  font-size: 0.78rem;
  color: rgba(245, 245, 245, 0.9);
}
.oss-tooltip.oss-tooltip--shipshaper .ss-lx-slider {
  width: 100%;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-lx-hint {
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: rgba(245, 245, 245, 0.8);
}
.oss-tooltip.oss-tooltip--shipshaper .ss-lx-hint:empty {
  display: none;
  margin: 0;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-lx-presets {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.22rem;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-lx-preset {
  border: 1px solid rgba(245, 245, 245, 0.25);
  background: rgba(255, 255, 255, 0.05);
  color: #f5f5f5;
  border-radius: 4px;
  padding: 0.22rem 0.4rem;
  font-size: 0.72rem;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-lx-preset.is-active {
  border-color: #a98cff;
  background: rgba(169, 140, 255, 0.25);
}
.oss-tooltip.oss-tooltip--shipshaper .ss-lx-warning {
  margin-top: 0.25rem;
  font-size: 0.72rem;
  color: #ffd7a7;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-palette-controls {
  margin: 0.2rem 0 0.55rem 1.45rem;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-palette-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.2rem;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-palette-row label {
  font-size: 0.78rem;
  color: rgba(245, 245, 245, 0.95);
}
.oss-tooltip.oss-tooltip--shipshaper .ss-palette-color {
  width: 1.4rem;
  height: 1.1rem;
  border: none;
  padding: 0;
  background: transparent;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-palette-value {
  font-size: 0.72rem;
  color: rgba(245, 245, 245, 0.85);
}
.oss-tooltip.oss-tooltip--shipshaper .ss-palette-hint {
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: rgba(245, 245, 245, 0.8);
}
.oss-tooltip.oss-tooltip--shipshaper .ss-palette-warning {
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: #ffd7a7;
}

/* Color Captain (Shipshaper tool #4) */
@keyframes ss-coach-arrow-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.oss-tooltip.oss-tooltip--shipshaper .ss-color-coach {
  margin: 0.15rem 0 0.5rem 0;
  max-width: 17.5rem;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-coach-step {
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
  margin-bottom: 0.35rem;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-coach-step-arrow {
  flex-shrink: 0;
  width: 1rem;
  color: rgba(245, 245, 245, 0.35);
  padding-top: 0.12rem;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-coach-step--current .ss-coach-step-arrow {
  color: #c8a8ff;
  animation: ss-coach-arrow-pulse 1.1s ease-in-out infinite;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-coach-step-body {
  flex: 1;
  min-width: 0;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-coach-label {
  display: block;
  font-size: 0.72rem;
  color: rgba(245, 245, 245, 0.88);
  margin-bottom: 0.1rem;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-coach-select {
  width: 100%;
  max-width: 100%;
  font-size: 0.72rem;
  padding: 0.18rem 0.25rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.28);
  color: #f5f5f5;
  border: 1px solid rgba(245, 245, 245, 0.22);
  box-sizing: border-box;
}
/* Open list uses a light OS/popup background; avoid inherited light text on light gray */
.oss-tooltip.oss-tooltip--shipshaper .ss-coach-select option {
  background: #f0f0f0;
  color: #1a1a1a;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-coach-generate {
  display: block;
  margin-top: 0.35rem;
  width: 100%;
  padding: 0.22rem 0.35rem;
  font-size: 0.74rem;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid rgba(169, 140, 255, 0.5);
  background: rgba(169, 140, 255, 0.18);
  color: #f5f5f5;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-coach-review {
  margin-bottom: 0.3rem;
  font-size: 0.7rem;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-coach-review-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.12rem;
  color: rgba(245, 245, 245, 0.92);
}
.oss-tooltip.oss-tooltip--shipshaper .ss-coach-mini {
  display: inline-block;
  width: 1.35rem;
  height: 0.95rem;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  vertical-align: middle;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-coach-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.22rem;
  margin-bottom: 0.3rem;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-coach-swatch {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.oss-tooltip.oss-tooltip--shipshaper .ss-coach-fc {
  font-size: 0.74rem;
  margin: 0.2rem 0;
  color: rgba(245, 245, 245, 0.92);
}
.oss-tooltip.oss-tooltip--shipshaper .ss-coach-fc-num {
  font-size: 0.68rem;
  color: rgba(245, 245, 245, 0.55);
  font-weight: normal;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-coach-send {
  width: 100%;
  margin-top: 0.2rem;
  padding: 0.28rem 0.4rem;
  font-size: 0.76rem;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid rgba(169, 140, 255, 0.5);
  background: rgba(169, 140, 255, 0.2);
  color: #f5f5f5;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-coach-send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-coach-expand-hint {
  font-size: 0.66rem;
  color: rgba(245, 245, 245, 0.62);
  margin: 0.3rem 0 0.15rem;
  line-height: 1.35;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-coach-toast {
  font-size: 0.72rem;
  color: #c8ffe3;
  min-height: 1rem;
  margin-top: 0.2rem;
}

.oss-tooltip.oss-tooltip--shipshaper .ss-story-controls {
  margin: 0.2rem 0 0.55rem 1.45rem;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-story-heading {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(245, 245, 245, 0.95);
  margin: 0 0 0.1rem;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-story-sub {
  font-size: 0.72rem;
  color: rgba(245, 245, 245, 0.72);
  margin: 0 0 0.35rem;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-story-mode-row {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-story-mode-row label {
  font-size: 0.74rem;
  color: rgba(245, 245, 245, 0.95);
}
.oss-tooltip.oss-tooltip--shipshaper .ss-story-check-btn {
  border: 1px solid rgba(169, 140, 255, 0.5);
  background: rgba(169, 140, 255, 0.16);
  color: #f5f5f5;
  border-radius: 4px;
  padding: 0.16rem 0.45rem;
  font-size: 0.72rem;
  cursor: pointer;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-story-status {
  margin-top: 0.25rem;
  font-size: 0.72rem;
  color: rgba(245, 245, 245, 0.9);
}
.oss-tooltip.oss-tooltip--shipshaper .ss-story-status--pass { color: #c8ffe3; }
.oss-tooltip.oss-tooltip--shipshaper .ss-story-status--warn { color: #ffd7a7; }
.oss-tooltip.oss-tooltip--shipshaper .ss-story-status--fail { color: #ffb8b8; }
.oss-tooltip.oss-tooltip--shipshaper .ss-story-age {
  margin-top: 0.12rem;
  font-size: 0.68rem;
  color: rgba(245, 245, 245, 0.65);
}
.oss-tooltip.oss-tooltip--shipshaper .ss-story-stale {
  margin-top: 0.12rem;
  font-size: 0.68rem;
  color: #ffd7a7;
}
.oss-tooltip.oss-tooltip--shipshaper .ss-story-hint {
  margin-top: 0.18rem;
  font-size: 0.72rem;
  color: rgba(245, 245, 245, 0.8);
}

/* === CANVAS PREVIEW === */
/* Mini canvases are square; main canvas remains portrait by default */
/* Hide old builder preview boxes; Layer 0 storyboard preview uses #storyboard-preview specifically */
.preview-box {
  display: none;
}

/* Show Layer 0 storyboard preview box only */
#storyboard-preview {
  display: block;
  width: 7rem;
  height: 7rem;
  background: var(--bg-canvas);
  margin: 0.5rem auto;
  border: 1px solid var(--border-medium);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.storyboard-icons {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.25rem 0;
  font-size: 1.1rem;
  color: var(--ui-primary);
}

.storyboard-icons .ph {
  font-size: 1.1rem;
}

.preview-row {
  display: flex;
  gap: 0.25rem;
  justify-content: center;
  margin-top: 0.5rem;
}

.preview-small {
  width: 3.4rem;
  height: 3.4rem;
  background: var(--bg-canvas);
  border: 1px solid var(--border-medium);
}

/* === OPACITY SLIDERS === */
/* Inverted: bright at 100 (left of thumb), dim to the right of thumb. --opacity-slider-value set by JS (0-100) */
/* Track is 0.5rem tall so knob is larger than bar; ends are fully pill-rounded. */
.opacity-slider {
  width: 100%;
  margin: 0.5rem 0;
  height: 1.5rem;
  --opacity-track-fill: #D9D3E9;
  --opacity-track-track: #6B5B95;
  --opacity-thumb: #f5f5f5;
  background: linear-gradient(
    to right,
    var(--opacity-track-fill) 0%,
    var(--opacity-track-fill) calc(var(--opacity-slider-value, 100) * 1%),
    var(--opacity-track-track) calc(var(--opacity-slider-value, 100) * 1%),
    var(--opacity-track-track) 100%
  );
  background-size: 100% 0.5rem;
  background-position: 0 50%;
  background-repeat: no-repeat;
  outline: none;
  border-radius: 9999px;
  -webkit-appearance: none;
}

.opacity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--opacity-thumb);
  border-radius: 50%;
  cursor: pointer;
}

.opacity-slider::-moz-range-thumb {
  width: 1.25rem;
  height: 1.25rem;
  background: var(--opacity-thumb);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

/* === CANVAS === */
/* Wrap size is set by JS (updateCanvasWrapSize) so canvas fills 90% of q200 height first, then width by aspect ratio */
.canvas-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 200px;
  min-height: 200px;
  /* Transparent: no second “mat” behind #canvas; letterboxing gaps show #q200 stage. Drawing fill remains on #canvas (--bg-canvas). */
  background: transparent;
  pointer-events: auto;
  cursor: crosshair;
}

#canvas {
  /* Solid mat behind the element; the composite bitmap also fills an opaque viewport mat so empty doc pixels are not transparent. Checkerboard for transparency is .layer-thumb only. */
  background: var(--bg-canvas);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  touch-action: none; /* so pen/stylus and touch get pointer events, not browser pan/zoom */
  /* Sharp preview; internal layer buffers may use devicePixelRatio (capped) for HiDPI — export uses logical px for quick save */
  image-rendering: auto;
}

/* Grid overlay: cell size set by JS from logical canvas (48px logical → Stamp 12×12, Square 22×22, Portrait 17×22, 16:9 40×22.5), non-interactive, toggled via Canvas Settings > Grid */
.canvas-grid-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.12) 1px, transparent 1px);
  background-size: 48px 48px; /* fallback; JS sets from logical size */
}
.canvas-grid-overlay.hidden {
  display: none;
}

/* Lulu vs KDP bleed guides on 8.75×8.75 and 8.75×11.25 in layouts (96 ppi); DOM-only, not exported */
.canvas-print-guides-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1.1;
  box-sizing: border-box;
}
.canvas-print-guides-overlay.hidden {
  display: none;
}
.canvas-print-guides-overlay svg {
  display: block;
  width: 100%;
  height: 100%;
  vertical-align: top;
}
.canvas-print-guides-overlay .print-guide-lulu {
  fill: rgba(30, 144, 255, 0.32);
}
.canvas-print-guides-overlay .print-guide-kdp {
  fill: rgba(220, 60, 60, 0.3);
}

/* Snap guides (Select Tools): DOM-only, not exported. Blue #0087f9 crosshairs (2rem, scales with UI); red canvas frame. Shown only while transforming selection. */
.snap-guide-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1.35;
  box-sizing: border-box;
}
.snap-guide-overlay.hidden {
  display: none;
}
.snap-guide-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  box-sizing: border-box;
}
.snap-guide-layer.hidden {
  display: none;
}
/* 2×2rem cross: arm length fixed in rem so apparent size stays consistent across canvas display sizes / zoom */
.snap-guide-cross {
  position: absolute;
  width: 2rem;
  height: 2rem;
  margin-left: -1rem;
  margin-top: -1rem;
  pointer-events: none;
  box-sizing: border-box;
}
.snap-guide-cross.hidden {
  display: none;
}
.snap-guide-cross--canvas {
  left: 50%;
  top: 50%;
}
.snap-guide-arm {
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
  color: #0087f9;
}
.snap-guide-arm--v {
  left: 50%;
  top: 0;
  width: 0;
  height: 2rem;
  transform: translateX(-50%);
  border-left: 1px dashed currentColor;
}
.snap-guide-arm--h {
  left: 0;
  top: 50%;
  width: 2rem;
  height: 0;
  transform: translateY(-50%);
  border-top: 1px dashed currentColor;
}
.snap-guide-edge-canvas {
  border: 2px solid #dc2626;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

/* Shipshaper overlays: guides only (excluded from export); default blue #0087f9 */
.shipshaper-overlays {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1.5;
}
.shipshaper-overlays.hidden {
  display: none;
}
.shipshaper-overlays .ss-overlay-interactive {
  pointer-events: auto;
}
.shipshaper-overlays .ss-tool-blue {
  color: #0087f9;
  fill: #0087f9;
  stroke: #0087f9;
}
.shipshaper-overlays .ss-horizon-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #0087f9;
  pointer-events: none;
}
.shipshaper-overlays .ss-horizon-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  margin-top: -10px;
  border-radius: 50%;
  background: #0087f9;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 0 8px rgba(0, 135, 249, 0.8);
  cursor: ns-resize;
}
.shipshaper-overlays .ss-compass-grid {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(to right, rgba(0, 135, 249, 0.35) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 135, 249, 0.35) 1px, transparent 1px);
  background-size: 33.333% 33.333%;
  pointer-events: none;
}
.shipshaper-overlays .ss-gridder-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.shipshaper-overlays .ss-gridder-line {
  position: absolute;
  background: rgba(0, 135, 249, 0.35);
  pointer-events: none;
}
.shipshaper-overlays .ss-gridder-line-h {
  left: 0;
  right: 0;
  height: 2px;
  margin-top: -1px;
}
.shipshaper-overlays .ss-gridder-line-v {
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
}
.shipshaper-overlays .ss-gridder-dot {
  position: absolute;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  margin-top: -10px;
  border-radius: 50%;
  background: #0087f9;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 0 8px rgba(0, 135, 249, 0.8);
  cursor: move;
}
.shipshaper-overlays .ss-gridder-dot[data-ss-grid="h1"],
.shipshaper-overlays .ss-gridder-dot[data-ss-grid="h2"] { left: 0; cursor: ns-resize; }
.shipshaper-overlays .ss-gridder-dot[data-ss-grid="v1"],
.shipshaper-overlays .ss-gridder-dot[data-ss-grid="v2"] { bottom: 0; margin-bottom: -10px; margin-top: 0; cursor: ew-resize; }
.shipshaper-overlays .ss-spyglass-dim {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}
.shipshaper-overlays .ss-spyglass-target {
  position: absolute;
  border-radius: 50%;
  border: 2px solid #0087f9;
  color: #0087f9;
  background: rgba(255, 255, 255, 0.85);
  font-weight: 700;
  line-height: 1;
  cursor: move;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.9), 0 0 8px rgba(0, 135, 249, 0.35);
}
.shipshaper-overlays .ss-spyglass-target--1 {
  width: 2rem;
  height: 2rem;
  margin-left: -1rem;
  margin-top: -1rem;
  font-size: 1.2rem;
}
.shipshaper-overlays .ss-spyglass-target--2 {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: -0.75rem;
  margin-top: -0.75rem;
  font-size: 0.95rem;
}
.shipshaper-overlays .ss-spyglass-target--3 {
  width: 1rem;
  height: 1rem;
  margin-left: -0.5rem;
  margin-top: -0.5rem;
  font-size: 0.7rem;
}
.shipshaper-overlays .ss-huglo-lx-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  image-rendering: auto;
}
.shipshaper-overlays .ss-palette-strip {
  position: absolute;
  left: 0.5rem;
  bottom: 0.5rem;
  display: flex;
  gap: 0.28rem;
  pointer-events: none;
  z-index: 2;
}
.shipshaper-overlays .ss-palette-delta {
  display: inline-flex;
  align-items: center;
  background: rgba(22, 12, 43, 0.9);
  border: 1px solid rgba(245, 245, 245, 0.22);
  border-radius: 999px;
  padding: 0.16rem 0.38rem;
  color: #f5f5f5;
  font-size: 0.62rem;
  line-height: 1;
  pointer-events: auto;
  cursor: pointer;
}
.shipshaper-overlays .ss-palette-delta.is-ok {
  border-color: rgba(143, 227, 178, 0.55);
  color: #c8ffe3;
}
.shipshaper-overlays .ss-palette-delta.is-warn {
  border-color: rgba(255, 197, 115, 0.6);
  color: #ffd7a7;
}
.shipshaper-overlays .ss-palette-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  background: rgba(22, 12, 43, 0.82);
  border: 1px solid rgba(245, 245, 245, 0.2);
  border-radius: 999px;
  padding: 0.16rem 0.34rem;
  color: #f5f5f5;
  font-size: 0.62rem;
  line-height: 1;
}
.shipshaper-overlays .ss-palette-chip-swatch {
  width: 0.66rem;
  height: 0.66rem;
  border-radius: 50%;
  border: 1px solid rgba(245, 245, 245, 0.45);
  flex-shrink: 0;
}
.shipshaper-overlays .ss-palette-chip-label {
  opacity: 0.88;
}
.shipshaper-overlays .ss-palette-chip-value {
  opacity: 0.9;
}
.shipshaper-overlays .ss-depth-bands {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.shipshaper-overlays .ss-depth-band {
  position: absolute;
  left: 0;
  right: 0;
  border-bottom: 1px solid rgba(0, 135, 249, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: rgba(0, 135, 249, 0.96);
  font-weight: 600;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
  background: linear-gradient(to bottom, rgba(0, 135, 249, 0.06), rgba(0, 135, 249, 0.02));
}
.shipshaper-overlays .ss-depth-handle {
  position: absolute;
  left: 0;
  right: 0;
  height: 14px;
  margin-top: -7px;
  border-top: 2px dashed rgba(0, 135, 249, 0.85);
  pointer-events: auto;
  cursor: ns-resize;
}
.shipshaper-overlays .ss-depth-handle::after {
  content: '';
  position: absolute;
  left: 10px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0087f9;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 0 8px rgba(0, 135, 249, 0.8);
}
.shipshaper-overlays .ss-plumb-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: #0087f9;
  pointer-events: none;
}
.shipshaper-overlays .ss-plumb-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  margin-top: -10px;
  border-radius: 50%;
  background: #0087f9;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 8px rgba(0, 135, 249, 0.8);
  cursor: ew-resize;
}
.shipshaper-overlays .ss-plumb-circle {
  position: absolute;
  width: 2rem;
  height: 2rem;
  margin-left: -1rem;
  margin-top: -1rem;
  color: #0087f9;
  font-size: 2rem;
  line-height: 1;
  cursor: move;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-edit-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.text-edit-overlay:not(.hidden) {
  pointer-events: auto;
}
.text-edit-overlay .text-edit-input {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 4px 8px;
  border: 2px solid var(--ui-primary);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--text-body);
  outline: none;
  min-width: 80px;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.text-edit-overlay .text-edit-textarea {
  min-height: 2.5em;
  min-width: 80px;
  resize: none;
  white-space: pre-wrap;
}
.text-edit-overlay .text-edit-wrap {
  position: absolute;
  box-sizing: border-box;
}
.text-edit-overlay .text-edit-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24px;
  height: 24px;
  cursor: se-resize;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 4px 0 4px 0;
  z-index: 1;
}
.text-edit-overlay .text-edit-resize-handle::after {
  content: '';
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ui-primary);
  border-bottom: 2px solid var(--ui-primary);
  border-radius: 0 0 2px 0;
}
.text-edit-overlay .text-edit-resize-handle:hover {
  background: rgba(0, 0, 0, 0.12);
}
.text-edit-overlay .text-edit-resize-handle:focus {
  outline: 2px solid var(--ui-primary);
  outline-offset: -2px;
}

/* === COLOR WELLS === */
.color-wells {
  display: flex;
  gap: 0;
  justify-content: flex-start;
}

.color-btn {
  width: 2.25rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: transparent;
  border: none;
  transition: transform 0.2s ease;
}

.color-btn:hover {
  transform: scale(1.15);
}

.color-well {
  width: 1.6rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 3px solid var(--bg-canvas);
  cursor: pointer;
  transition: all 0.2s ease;
}

.color-well:hover {
  transform: scale(1.15);
  border-color: var(--ui-primary);
  box-shadow: 0 0 12px var(--border-medium);
}

.color-well.active {
  border-color: var(--ui-dark);
  box-shadow: 0 0 16px var(--border-strong);
}

/* Light graphite / white charcoal swatches on pale tray background */
.color-well.color-well--light-edge {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
}

/* === STARTUP TIP (one-time FX reset hint) === */
.startup-tip {
  position: fixed;
  bottom: 4rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(90vw, 28rem);
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  background: var(--bg-panel);
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  box-shadow: 0 4px 20px var(--border-strong);
  z-index: 1000;
  font-size: 0.9rem;
  color: var(--text-body);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.startup-tip.hidden {
  display: none;
}

.startup-tip p {
  margin: 0;
}

.startup-tip strong {
  color: var(--text-header);
}

.startup-tip-dismiss {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  background: transparent;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--text-body);
  cursor: pointer;
  border-radius: 4px;
}

.startup-tip-dismiss:hover {
  background: var(--bg-secondary);
  color: var(--text-header);
}

/* Print: when printing Legal, show only the legal document — full TOC + full document body (Save as PDF) */
@media print {
  body.printing-legal * {
    visibility: hidden;
  }
  body.printing-legal #popup-overlay,
  body.printing-legal #popup-overlay .popup-bubble--hpp-legal,
  body.printing-legal #popup-overlay .popup-bubble--hpp-legal * {
    visibility: visible;
  }
  body.printing-legal #popup-overlay {
    position: static;
    inset: 0;
    background: #fff;
    padding: 0;
  }
  body.printing-legal #popup-overlay .popup-bubble--hpp-legal {
    position: static;
    width: 100%;
    max-width: none;
    max-height: none;
    height: auto;
    min-height: 0;
    overflow: visible;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: #fff;
    color: #111;
    padding: 1rem 1.5rem;
    display: block;
  }
  body.printing-legal #popup-overlay .popup-content {
    display: block;
    overflow: visible;
    height: auto;
    min-height: 0;
    flex: none;
  }
  body.printing-legal .hpp-legal-two-col {
    display: block;
    flex: none;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  body.printing-legal .hpp-legal-nav {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #ccc;
    padding-bottom: 0.5rem;
    overflow: visible;
    flex: none;
    height: auto;
  }
  body.printing-legal .hpp-legal-thumbnails {
    display: none;
  }
  body.printing-legal .hpp-legal-doc {
    width: 100%;
    overflow: visible;
    height: auto;
    min-height: 0;
    flex: none;
  }
  body.printing-legal .hpp-legal-body {
    overflow: visible;
    height: auto;
  }
  body.printing-legal .popup-close,
  body.printing-legal .hpp-legal-print-row,
  body.printing-legal #popup-overlay .popup-header {
    display: none;
  }
  body.printing-legal .hpp-legal-toc a,
  body.printing-legal .hpp-legal-body a {
    color: #333;
  }

  /* Canvas-only print: when user uses browser Print (Ctrl+P), show only the canvas — hide sidebars, toolbar, footer */
  body:not(.printing-legal) #q100,
  body:not(.printing-legal) #q300,
  body:not(.printing-legal) #q400,
  body:not(.printing-legal) #q000 {
    display: none !important;
  }
  body:not(.printing-legal) #popup-overlay,
  body:not(.printing-legal) .text-edit-overlay,
  body:not(.printing-legal) #startup-tip,
  body:not(.printing-legal) .canvas-stage-readouts {
    display: none !important;
  }
  body:not(.printing-legal) #q200 {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body:not(.printing-legal) #q200 .canvas-viewport {
    overflow: visible !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body:not(.printing-legal) #q200 .canvas-zoom-wrap,
  body:not(.printing-legal) #q200 .canvas-zoom-inner {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body:not(.printing-legal) #q200 .canvas-wrap {
    flex: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important; /* workbench BG color does not print */
  }
  body:not(.printing-legal) #q200 #canvas {
    background: #fff !important; /* workbench BG color does not print */
    max-width: 100% !important;
    max-height: 100vh !important;
    width: auto !important;
    height: auto !important;
  }
}

/* === TABLET/MOBILE RESPONSIVE (match Home: smaller toolbar, wells, icons) === */
/* Narrow layout: window width ≤1024px (matches OSS_CONFIG.viewportBreakpointNarrow; tablets e.g. Tab S9 FE landscape). Media query — not @container — avoids iOS/WebKit issues with fixed panels + :root vars inside container queries. */
@media (max-width: 1024px) {
  :root {
    --toolbar-height: 3rem;
    --toolbar-bottom: 0.875rem;
    --footer-height: auto;
  }

  #viewport-container {
    overflow-x: hidden;
  }

  /* Sidebars +0.5rem vs prior 4.5rem to reduce horizontal scroll in icon grids; q200 left = strip − 1rem overlap */
  #q100 {
    width: 5rem;
    overflow-x: auto;
  }
  #q300 {
    width: 5rem;
    overflow-x: auto;
  }
  /* Canvas clears measured paint+footer strip (--bottom-stack-height set in ui.js on narrow) */
  #q200 {
    left: 4rem;
    right: 5rem;
    bottom: var(--bottom-stack-height, 5.75rem);
  }

  /*
   * Same vertical binding as #q200: top + bottom, height auto — not calc(100vh − …).
   * With browser chrome visible, 100vh often ≠ visible viewport (fullscreen masks this); top/bottom
   * against the fixed #bottom-stack matches layout like q200 and stops q100/q300 clipping mid-block.
   */
  #q100,
  #q300 {
    height: auto;
    bottom: var(--bottom-stack-height, 5.75rem);
  }

  /* Single bottom strip: toolbar above footer, one horizontal scrollbar at strip bottom */
  .bottom-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  #bottom-stack.bottom-stack #q400,
  #bottom-stack.bottom-stack #q000 {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    top: auto;
    flex: 0 0 auto;
    min-width: 100%;
    width: max-content;
    max-width: none;
    align-self: stretch;
    box-sizing: border-box;
  }
  #bottom-stack.bottom-stack #q400 {
    height: var(--toolbar-height);
    overflow-x: visible;
    overflow-y: hidden;
    z-index: auto;
    justify-content: flex-start;
  }
  #bottom-stack.bottom-stack #q400 .toolbar-scroll-inner {
    overflow: visible;
    width: max-content;
    max-width: none;
    flex: 1 1 auto;
    min-width: min-content;
  }
  #bottom-stack.bottom-stack #q400 .toolbar-scroll-content {
    min-width: max-content;
  }

  /* q100 tablet/mobile: hide block opacity; layer sliders hidden below */
  #q100 .layer-opacity,
  #q100 .block-opacity {
    display: none;
  }

  /* Theme line: same visual size as other block titles (stays h2) */
  #q100 .sidebar-block h2.start-art-subheading {
    font-size: 0.65rem;
    font-weight: 700;
    margin: 0 0 0.35rem 0;
    padding: 0.25rem;
  }

  #q400 .toolbar-scroll-inner.toolbar-centered {
    justify-content: flex-start;
  }

  /* q400: toolbar icons 2rem clickbox, 1.5rem icon */
  #q400 .icon-btn,
  .icon-btn {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    font-size: 1.5rem;
  }
  #q400 .icon-btn i,
  .icon-btn i {
    font-size: 1.5rem;
  }
  .icon-btn img {
    width: 1.5rem;
    height: 1.5rem;
  }

  .toolbar-section h2 {
    font-size: 0.75rem;
  }

  #paw-logo {
    width: 3rem;
    height: 3rem;
  }

  /* Color wells: oval 1/2 of desktop (2.15×3) = 1.075×1.5rem, centered in 2rem clickbox */
  .color-btn {
    width: 2rem;
    height: 2rem;
  }
  #q400 .color-btn .color-well,
  .color-well {
    width: 1.075rem;
    height: 1.5rem;
    border-width: 2px;
    box-sizing: border-box;
    border-radius: 50%;
  }

  /* Stroke / Fill: same hit/icon sizing as other q400 .icon-btn (2rem / 1.5rem) */
  #q400 .outline-fill-btn {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
  }
  #q400 .outline-fill-swatch {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 2px;
  }

  /* Scroll arrows: 2rem clickbox, 1.5rem icon */
  .scroll-arrow {
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
  }

  /* q300 tablet/mobile: hide layer sliders so only icon rows are visible */
  #q300 .layer-opacity {
    display: none;
  }
  .layer-number {
    font-size: 0.9rem;
  }
  .layer-lock-overlay {
    font-size: 0.9rem;
  }
  .sidebar-block h1.start-art-heading {
    font-size: 0.75rem;
    padding: 0.25rem;
  }
  .sidebar-block h2 {
    font-size: 0.65rem;
    padding: 0.25rem;
  }
  .sidebar-block h3 {
    font-size: 0.6rem;
  }
  .icon-row {
    justify-content: center;
  }
  /* Storybook Builder: 2×2 grid at mobile icon size */
  #q300 .sidebar-block:nth-of-type(2) .icon-row {
    grid-template-columns: repeat(2, 2rem);
    grid-template-rows: repeat(2, 2rem);
    gap: 0.25rem;
    margin-left: auto;
    margin-right: auto;
  }
  /* q100 & q300 tablet/mobile: square thumbnails shrink (same width and height) */
  #q100 .preview-grid,
  #q300 .preview-grid {
    grid-template-columns: repeat(2, 2rem);
    grid-template-rows: repeat(2, 2rem);
    gap: 0.25rem;
  }
  #q100 .layer-thumb,
  #q300 .layer-thumb {
    width: 2rem;
    height: 2rem;
    background-size: 2rem 2rem;
  }
  /* Rich hover tooltips disabled on mobile (no hover); aria-label on triggers kept for screen readers */
  .oss-tooltip {
    display: none !important;
  }
  /* Exception: Shipshaper panel should still open on mobile tap. */
  .oss-tooltip.oss-tooltip--shipshaper.is-visible {
    display: block !important;
  }
  .preview-box {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0.25rem auto;
  }
  .preview-small {
    width: 1.8rem;
    height: 1.8rem;
  }
  .layer-mask-row .icon-btn {
    font-size: 0.65rem;
  }
  /* q000 tablet/mobile: one horizontal row; horizontal scroll is on #bottom-stack (not here) */
  #q000 {
    height: auto;
    min-height: 2.25rem;
    max-height: none;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    overflow-x: visible;
    overflow-y: hidden;
  }
  #q000 span:first-child,
  #q000 span:last-child {
    justify-self: unset;
    flex-shrink: 0;
    text-align: left;
    white-space: nowrap;
  }
  #q000 .copyright {
    flex-shrink: 0;
    white-space: nowrap;
    margin-left: 96px;
    margin-right: 64px;
  }
  #q000 .footer-zoom {
    font-weight: 600;
  }
  /* q200 HPP: stacked single column; reduce space between social icons and "Humbly..." */
  .popup-bubble--hpp-studio .hpp-studio-nav-divider {
    margin: 0.25rem 0;
  }
  .popup-bubble--hpp-studio .hpp-legal-nav .hpp-studio-tagline {
    margin-top: 0.2rem;
  }
  .popup-bubble--hpp-studio .hpp-legal-two-col {
    flex-direction: column;
  }
  .popup-overlay--hpp-studio .popup-bubble .popup-content .hpp-legal-two-col {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .popup-overlay--hpp-studio .popup-bubble .hpp-legal-nav,
  .popup-overlay--hpp-studio .popup-bubble .hpp-legal-doc {
    overflow: visible;
  }
  .popup-bubble--hpp-studio .hpp-legal-nav,
  .popup-bubble--hpp-studio .hpp-legal-doc {
    width: 100%;
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
  }
  .popup-bubble--hpp-studio .hpp-legal-nav {
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
  }

  /* Let JS size HPP bubbles from #q200; avoid 100vw caps fighting a narrow stage */
  .popup-overlay--hpp-legal .popup-bubble,
  .popup-overlay--hpp-studio .popup-bubble {
    max-width: none;
    max-height: none;
  }

  /* HPP Legal: same single-column stack as Studio (full-width bubble from JS on narrow) */
  .popup-bubble--hpp-legal .hpp-legal-two-col {
    flex-direction: column;
  }
  .popup-overlay--hpp-legal .popup-bubble .popup-content .hpp-legal-two-col {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .popup-overlay--hpp-legal .popup-bubble .hpp-legal-nav,
  .popup-overlay--hpp-legal .popup-bubble .hpp-legal-doc {
    overflow: visible;
  }
  .popup-bubble--hpp-legal .hpp-legal-nav,
  .popup-bubble--hpp-legal .hpp-legal-doc {
    width: 100%;
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
  }
  .popup-bubble--hpp-legal .hpp-legal-nav {
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
  }
}

/* Script Builder block opacity: show on desktop & tablet; hide on phones only */
@media (max-width: 640px) {
  #q300 .sidebar-block:nth-of-type(1) .block-opacity {
    display: none !important;
  }
}

/* Phone portrait: block UI until landscape (see js/landscape-mobile.js). True lock is not available on many iOS browsers. */
.oss-rotate-device {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 1.5rem;
  padding-top: max(1.5rem, env(safe-area-inset-top, 0px));
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
  background: rgba(18, 18, 18, 0.92);
  color: #f5f5f5;
  text-align: center;
  pointer-events: auto;
}

.oss-rotate-device[hidden] {
  display: none !important;
}

.oss-rotate-device-inner {
  max-width: 22rem;
}

.oss-rotate-device-icon {
  display: block;
  margin: 0 auto 1rem;
  font-size: 3rem;
  line-height: 1;
  color: #c4b5e8;
  animation: oss-rotate-device-wiggle 2.2s ease-in-out infinite;
}

.oss-rotate-device-title {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
}

.oss-rotate-device-hint {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgba(245, 245, 245, 0.88);
}

@keyframes oss-rotate-device-wiggle {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-12deg);
  }
  75% {
    transform: rotate(12deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .oss-rotate-device-icon {
    animation: none;
  }
}

/* First-visit notice on phone-width viewports (see js/phone-first-visit-toast.js) */
.oss-phone-first-visit {
  position: fixed;
  z-index: 1001;
  left: 50%;
  top: max(0.75rem, env(safe-area-inset-top, 0px));
  transform: translateX(-50%);
  box-sizing: border-box;
  max-width: min(calc(100vw - 2rem), 28rem);
  margin: 0;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  line-height: 1.35;
  color: #3d257f;
  background: #f5f5f5;
  border-radius: 0.5rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  transition: opacity 0.3s ease;
  pointer-events: none;
  text-align: center;
}

.oss-phone-first-visit--out {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .oss-phone-first-visit {
    transition: none;
  }
}