/* =============================================================================
   CSS VARIABLES & DESIGN TOKENS — GOLDEN RATIO SYSTEM
   ============================================================================= */

:root {
  /* Mathematical Constants */
  --phi: 1.618;
  --phi-inverse: 0.618;
  --phi-squared: 2.618;
  --phi-cubed: 4.236;
  --phi-fourth: 6.854;
  --phi-fifth: 11.09;

  /* Base Color Palette */
  --bg-light: #F0EBDC;
  --text-light: #212121;
  --bg-dark: #2a2a2a;
  --text-dark: #ffffff;
  --accent: #ffcc00;
  --action: #04508B;

  /* Olivetti Brand Colors */
  --red: #E4022D;
  --dark-red: #9A715D;
  --orange: #F56428;
  --yellow: #FADC46;
  --light-green: #64D264;
  --dark-green: #00643C;
  --cyan: #6ECDBE;
  --blue: #04508B;
  --purple: #6446B4;
  --light-blue: #C8E1F0;
  --black: #000000;
  --white: #F0EBDC;
  --grey: #8E8F91;
  --dark-grey: #4A4A4A;

  /* Typography System — Golden Base Unit */
  --font-primary: "IBM Plex Sans", sans-serif;
  --font-fallback: "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", sans-serif;
  --base-unit: 1rem;

  /* Font Size Scale */
  --fs-micro: calc(var(--base-unit) * var(--phi-inverse) * var(--phi-inverse));
  --fs-tiny: calc(var(--base-unit) * var(--phi-inverse) * 0.75);
  --fs-small: calc(var(--base-unit) * var(--phi-inverse));
  --fs-base: calc(var(--base-unit) * 0.875);
  --fs-medium: calc(var(--base-unit) * 1);
  --fs-plus: calc(var(--base-unit) * 1.25);
  --fs-demi: calc(var(--base-unit) * 1.5);
  --fs-large: calc(var(--base-unit) * var(--phi));
  --fs-xl: calc(var(--base-unit) * var(--phi-squared));
  --fs-xxl: calc(var(--base-unit) * var(--phi-cubed));
  --fs-xxxl: calc(var(--base-unit) * var(--phi-fourth));
  --fs-display: calc(var(--base-unit) * var(--phi-fifth));
  --fs-marker: 0.75em;
  --fs-context: 0.875em;
  --fs-note: 0.9em;
  --space-em-0-75: 0.75em;
  --space-em-1: 1em;

  /* Line Height Scale */
  --lh-tight: 1.2;
  --lh-snug: 1.3;
  --lh-normal: 1.4;
  --lh-relaxed: 1.5;
  --lh-loose: 1.6;
  --lh-very-loose: 1.8;

  /* Letter Spacing Scale */
  --ls-tighter: -0.05em;
  --ls-tight: -0.025em;
  --ls-normal: 0;
  --ls-wide: 0.025em;
  --ls-wider: 0.05em;
  --ls-widest: 0.1em;

  /* Font Weight Scale */
  --fw-thin: 100;
  --fw-extralight: 200;
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* Spacing System */
  --space-0: 0;
  --space-0px: 0px;
  --space-px: 1px;
  --space-2px: 2px;
  --space-3px: 3px;
  --space-4px: 4px;
  --space-6px: 6px;
  --space-8px: 8px;
  --space-12px: 12px;
  --space-20px: 20px;
  --space-24px: 24px;
  --space-32px: 32px;
  --space-96px: 96px;
  --space-nano: calc(var(--base-unit) * var(--phi-inverse) * var(--phi-inverse) * var(--phi-inverse));
  --space-micro: calc(var(--base-unit) * var(--phi-inverse) * var(--phi-inverse));
  --space-tiny: calc(var(--base-unit) * var(--phi-inverse));
  --space-xs: calc(var(--base-unit) * var(--phi-inverse) * var(--phi));
  --space-sm: calc(var(--base-unit) * var(--phi));
  --space-md: calc(var(--base-unit) * var(--phi-squared));
  --space-lg: calc(var(--base-unit) * var(--phi-cubed));
  --space-xl: calc(var(--base-unit) * var(--phi-fourth));
  --space-xxl: calc(var(--base-unit) * var(--phi-fifth));

  /* Border Radius */
  --border-radius-none: 0;
  --border-radius-xs: 2px;
  --border-radius-squircle: 22.37%;
  --border-radius-sm: calc(var(--space-micro));
  --border-radius-md: calc(var(--space-tiny));
  --border-radius-lg: calc(var(--space-xs));
  --border-radius-xl: calc(var(--space-sm));
  --border-radius-full: 9999px;

  /* Border Width */
  --border-width-0: 0;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-3: 3px;
  --border-width-4: 4px;
  --border-width-8: 8px;

  /* Transition Durations */
  --duration-75: 75ms;
  --duration-100: 100ms;
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-500: 500ms;
  --duration-700: 700ms;
  --duration-1000: 1000ms;

  /* Layout */
  --container-max-width: 92.5rem;
  --content-max-width: 1024px;
  --small-content-max-width: 780px;
  --app-icon-max-width: 512px;
  --collaboration-card-min-width: 300px;
  --card-meta-min-width: 140px;
  --underline-offset: 0.2em;
  --opacity-divider: 0.35;
  --grid-columns: 12;
  --grid-gap-sm: var(--space-xs);
  --grid-gap-md: var(--space-sm);
  --grid-gap-lg: var(--space-md);

  /* Theme Colors — Light (default) */
  --color-text: var(--text-light);
  --text: var(--color-text);
  --color-bg: var(--bg-light);
  --color-accent: var(--accent);
  --color-action: var(--action);
  --color-action-hover: var(--purple);
  --color-section-alt: rgba(0, 0, 0, 0.04);
  --color-section-alt-strong: rgba(0, 0, 0, 0.08);
  --color-muted: rgba(0, 0, 0, 0.6);
}

/* Tablet touch controls: retain the compact workbench geometry, while giving
   the actual draggable part enough area for an iPad finger.  This is scoped
   above phone widths so the phone accordion does not inherit oversized knobs. */
@media (min-width: 768px) and (max-width: 1159px),
       (min-width: 768px) and (pointer: coarse) {
  :root #xreate-editor-root.xr-editor input[type="range"].xr-field-slider {
    min-height: 40px !important;
    padding-block: 8px !important;
    touch-action: pan-x !important;
  }
  :root #xreate-editor-root.xr-editor input[type="range"].xr-field-slider::-webkit-slider-thumb {
    width: 24px !important;
    height: 24px !important;
  }
  :root #xreate-editor-root.xr-editor input[type="range"].xr-field-slider::-moz-range-thumb {
    width: 24px !important;
    height: 24px !important;
  }
}


/* =============================================================================
   DARK MODE — Token overrides
   ============================================================================= */

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: var(--text-dark);
    --color-bg: var(--bg-dark);
    --color-accent: #f2f2f2;
    --color-action: var(--orange);
    --color-action-hover: var(--yellow);
    --color-section-alt: rgba(255, 255, 255, 0.06);
    --color-section-alt-strong: rgba(255, 255, 255, 0.12);
    --color-muted: rgba(255, 255, 255, 0.7);
  }
}

html[data-theme="light"] {
  --color-text: var(--text-light);
  --color-bg: var(--bg-light);
  --color-accent: var(--accent);
  --color-action: var(--action);
  --color-action-hover: var(--purple);
  --color-section-alt: rgba(0, 0, 0, 0.04);
  --color-section-alt-strong: rgba(0, 0, 0, 0.08);
  --color-muted: rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] {
  --color-text: var(--text-dark);
  --color-bg: var(--bg-dark);
  --color-accent: #f2f2f2;
  --color-action: var(--orange);
  --color-action-hover: var(--yellow);
  --color-section-alt: rgba(255, 255, 255, 0.06);
  --color-section-alt-strong: rgba(255, 255, 255, 0.12);
  --color-muted: rgba(255, 255, 255, 0.7);
}


/* =============================================================================
   RESET & FOUNDATIONS
   ============================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

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

html,
body {
  max-width: none;
  margin: 0;
}

body {
  font-family: var(--font-primary), var(--font-fallback);
  color: var(--color-text);
  background-color: var(--color-bg);
  font-size: calc(var(--fs-large) * var(--phi));
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  font-weight: var(--fw-normal);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  margin-top: 0;
  margin-bottom: var(--space-lg);
}

/* =============================================================================
   TYPOGRAPHY
   ============================================================================= */

h1 {
  font-size: var(--fs-xxxl);
  font-weight: var(--fw-normal);
  letter-spacing: var(--ls-tighter);
  line-height: var(--lh-tight);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
}

h2 {
  font-size: var(--fs-xxl);
  font-weight: var(--fw-normal);
  letter-spacing: var(--ls-tighter);
  line-height: var(--lh-tight);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  margin-top: var(--space-md);
  margin-bottom: var(--space-sm);
}

h4 {
  font-size: var(--fs-large);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  margin-top: var(--space-md);
  margin-bottom: var(--space-sm);
}

h5 {
  font-size: var(--fs-large);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-loose);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-xs);
}

h6 {
  font-size: var(--fs-plus);
  font-weight: var(--fw-normal);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-normal);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-xs);
}

p,
blockquote {
  font-size: var(--fs-large);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-relaxed);
  margin-top: var(--space-xs);
  margin-bottom: var(--space-sm);
  max-width: var(--content-max-width);
}

ul,
ol {
  font-size: var(--fs-medium);
  font-weight: var(--fw-normal);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-loose);
  margin-top: var(--space-xs);
  margin-bottom: var(--space-md);
}

/* Styled list items — excluded for pub/articles/events lists */
main ul:not(.pub-list):not(.articles-list):not(.events-list),
main ol {
  padding-left: var(--space-sm);
  list-style-position: inside;
}

main ul:not(.pub-list):not(.articles-list):not(.events-list) li,
main ol li {
  padding: var(--space-xs) var(--space-sm);
  margin-bottom: var(--space-xs);
  background-color: var(--color-section-alt);
  font-weight: var(--fw-medium);
}

main ul:not(.pub-list):not(.articles-list):not(.events-list) li:last-child,
main ol li:last-child {
  margin-bottom: 0;
}

li::marker {
  font-size: var(--fs-marker);
  color: var(--color-action);
}

small {
  font-size: var(--fs-base);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-normal);
  margin-top: var(--space-micro);
  margin-bottom: var(--space-micro);
}

footer p {
  font-size: var(--fs-medium);
  font-weight: var(--fw-normal);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-relaxed);
  margin-top: var(--space-xs);
  margin-bottom: var(--space-xs);
}

em,
i {
  font-style: italic;
}

strong {
  font-weight: var(--fw-semibold);
}

li strong {
  font-weight: var(--fw-medium);
}

.no-bullets {
  list-style: none;
  padding-left: 0;
}


/* =============================================================================
   LINKS
   ============================================================================= */

a {
  color: var(--color-action);
  text-decoration: none;
  font-weight: var(--fw-normal);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-relaxed);
  transition: color var(--duration-200) ease-in-out;
}

a:hover,
a:focus {
  color: var(--color-action-hover);
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

a:focus {
  outline: var(--border-width-2) solid var(--color-action);
  outline-offset: var(--border-width-2);
}


/* =============================================================================
   BUTTONS
   ============================================================================= */

button,
.button {
  background: var(--color-text);
  color: var(--color-bg);
  padding: var(--space-xs) var(--space-md);
  border: var(--border-width-2) solid var(--color-text);
  cursor: pointer;
  transition: all var(--duration-200) ease-in-out;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-normal);
  border-radius: var(--border-radius-sm);
  display: inline-block;
  text-decoration: none;
}

button:hover,
button:focus,
.button:hover,
.button:focus {
  background: var(--color-bg);
  color: var(--color-text);
  transform: translateY(calc(var(--space-px) * -1));
}

button:focus,
.button:focus {
  outline: var(--border-width-2) solid var(--color-action);
  outline-offset: var(--border-width-2);
}

/* CTA — outline variant */
.cta {
  display: inline-block;
  font-size: var(--fs-large);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  background-color: transparent;
  border: var(--border-width-2) solid var(--color-text);
  padding: var(--space-xs) var(--space-md);
  margin-top: var(--space-sm);
  letter-spacing: var(--ls-normal);
  text-decoration: none;
  transition: background-color var(--duration-200) ease-in-out, color var(--duration-200) ease-in-out;
}

.cta:hover,
.cta:focus {
  background-color: var(--color-text);
  color: var(--color-bg);
  text-decoration: none;
}

/* CTA — filled variant */
.cta-primary {
  background-color: var(--color-text);
  color: var(--color-bg);
}

.cta-primary:hover,
.cta-primary:focus {
  background-color: transparent;
  color: var(--color-text);
}

/* CTA — ghost/text variant */
.cta-secondary {
  font-size: inherit;
  opacity: 0.6;
  text-decoration: none;
  border-bottom: var(--border-width-1) solid currentColor;
  transition: opacity var(--duration-200) ease;
}

.cta-secondary:hover {
  opacity: 1;
}

/* CTA group — horizontal flex row */
.cta-group {
  display: flex;
  gap: var(--space-24px);
  align-items: center;
  flex-wrap: wrap;
}


/* =============================================================================
   DIVIDERS
   ============================================================================= */

hr {
  border: none;
  height: var(--border-width-2);
  background-color: var(--color-text);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
  opacity: var(--opacity-divider);
}


/* =============================================================================
   GRID SYSTEM
   ============================================================================= */

/* 12-column layout shell. Prefer child grid-column spans (e.g. span 12 / 6)
   rather than ad-hoc widths, so sections remain aligned across breakpoints. */
.container {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gap-sm);
  max-width: 100%;
  margin: 0 auto;
  padding: var(--space-sm);
}

.container > section.full-width {
  grid-column: span 12;
}


/* =============================================================================
   SECTION LAYOUT
   ============================================================================= */

section {
  position: relative;
  z-index: 0;
  padding: var(--space-md) var(--space-lg) var(--space-lg) var(--space-lg);
  scroll-margin-top: var(--space-96px);
  margin-top: 0;
  margin-bottom: 0;
}

/* Alternating background stripe on even sections */
main > section:nth-of-type(even)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-color: var(--color-section-alt);
  z-index: -1;
}

/* Full-width bottom rule on every section */
section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: var(--space-lg);
  width: calc(100% - calc(var(--space-lg) * 2));
  height: var(--border-width-2);
  background-color: var(--color-text);
}

.editor-section {
  padding: 0;
  scroll-margin-top: 0;
}

.editor-section::after {
  content: none;
}

section dl:last-of-type {
  margin-bottom: var(--space-md);
}

section h2:first-of-type {
  margin-top: var(--space-xs);
}


/* =============================================================================
   MEDIA — img, video, figure, figcaption
   ============================================================================= */

figure {
  /* User Agent Reset */
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

img,
video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: var(--border-radius-sm);
}

figure > div {
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}

figure iframe {
  border-radius: var(--border-radius-sm);
}

figcaption {
  font-size: var(--fs-base);
  color: var(--color-text);
  margin-top: var(--space-micro);
  margin-bottom: var(--space-micro);
  padding: calc(var(--space-micro) * var(--phi)) 0;
  letter-spacing: var(--ls-normal);
  font-weight: var(--fw-normal);
  display: block;
  width: 100%;
  line-height: var(--lh-normal);

  /* Two-column layout for desktop
  column-count: 1;
  column-gap: var(--space-md);
  column-fill: balance; */
}

figcaption a {
  letter-spacing: var(--ls-normal);
  font-weight: var(--fw-normal);
}


/* =============================================================================
   TABLES
   ============================================================================= */

/* Design case — three equal columns, full border grid */
.design-case-table-wrapper {
  overflow-x: auto;
  margin-top: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.design-case-table {
  width: 100%;
  min-width: 60rem;
  table-layout: auto;
  border-collapse: collapse;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.design-case-table th,
.design-case-table td {
  width: calc(100% / 3);
  padding: var(--space-xs) var(--space-sm);
  border: var(--border-width-1) solid var(--color-text);
  vertical-align: top;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  line-height: var(--lh-normal);
}

.design-case-table th {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  letter-spacing: var(--ls-normal);
}

.design-case-table td {
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-relaxed);
}

/* Work summary — borderless rows with uppercase header */
.work-summary-table-wrapper {
  overflow-x: auto;
  margin-top: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.work-summary-table {
  width: 100%;
  min-width: 70rem;
  table-layout: auto;
  border-collapse: collapse;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.work-summary-table th,
.work-summary-table td {
  padding: var(--space-xs) var(--space-sm);
  vertical-align: top;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  line-height: var(--lh-normal);
}

.work-summary-table th {
  background-color: var(--color-section-alt);
  color: var(--color-text);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.work-summary-table td {
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-relaxed);
  border-bottom: var(--border-width-1) solid var(--color-section-alt);
}

.work-summary-table tbody tr:last-child td {
  border-bottom: none;
}

.work-summary-table a {
  color: var(--color-action);
  text-decoration: none;
  font-weight: var(--fw-semibold);
}

.work-summary-table a:hover,
.work-summary-table a:focus {
  color: var(--color-action-hover);
  text-decoration: underline;
}


/* =============================================================================
   HORIZONTAL COMPACT CARDS
   ============================================================================= */

.horizontal-cards-compact {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  margin-bottom: var(--space-lg);
}

.horizontal-card-compact {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-xs);
  border: var(--border-width-1) solid var(--color-text);
  max-width: var(--content-max-width);
}

.horizontal-card-compact .card-content {
  flex: 1;
}

.horizontal-card-compact .card-meta {
  flex-shrink: 0;
  text-align: right;
  min-width: var(--card-meta-min-width);
}

.horizontal-card-compact h5 {
  font-size: var(--fs-medium);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  margin: 0 0 var(--space-micro) 0;
  color: var(--color-text);
}

.horizontal-card-compact h6 {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--color-action);
  margin: 0;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.horizontal-card-compact p {
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-normal);
  margin: var(--space-tiny) 0 0 0;
  color: var(--color-text);

  /* Two-column layout for card text
  column-count: 2;
  column-gap: var(--space-sm);
  column-fill: balance; */
}


/* =============================================================================
   COLLABORATION CARDS
   ============================================================================= */

.collaboration-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--collaboration-card-min-width), 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.collaboration-card {
  padding: var(--space-sm);
  border: var(--border-width-1) solid var(--color-text);
}

.collaboration-card h5 {
  margin-top: 0;
  margin-bottom: var(--space-xs);
}

.collaboration-card .button {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-tiny);
}


/* =============================================================================
   HIGHLIGHT, QUOTE & INLINE CALLOUTS
   ============================================================================= */

.highlight-inline {
  background-color: var(--color-text);
  color: var(--color-bg);
  font-weight: var(--fw-medium);
  transition: all var(--duration-200) ease;
}

.highlight-inline {
  display: inline;
  padding: var(--space-2px) var(--space-8px);
}

.highlight-inline a {
  color: var(--color-bg);
  font-weight: var(--fw-medium);
  text-decoration: underline;
}

.quote {
  border-left: var(--border-width-2) solid var(--color-text);
  padding-left: var(--space-xs);
  margin-left: 0;
  font-style: italic;
  margin-top: var(--space-xs);
  margin-bottom: var(--space-sm);
}

figcaption.quote {
  margin-top: var(--space-tiny);
  margin-bottom: var(--space-xs);
}

.project-context {
  font-size: var(--fs-context);
  color: var(--color-muted);
  border-left: var(--border-width-2) solid currentColor;
  padding-left: var(--space-em-0-75);
  line-height: var(--lh-normal);
  margin-bottom: var(--space-em-1);
}

.research-note {
  font-size: var(--fs-note);
  opacity: 0.7;
  border-left: var(--border-width-2) solid currentColor;
  padding-left: var(--base-unit);
  margin-top: var(--space-32px);
}

.social-proof {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
  color: var(--color-muted);
  opacity: 0.85;
  font-weight: var(--fw-normal);
  border-top: var(--border-width-1) solid var(--color-text);
  border-bottom: var(--border-width-1) solid var(--color-text);
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
}

.social-proof a {
  color: var(--color-text);
  text-decoration: none;
  font-weight: var(--fw-normal);
  transition: opacity var(--duration-200) ease-in-out;
}

.social-proof a:hover {
  opacity: 1;
  color: var(--color-action);
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}


/* =============================================================================
   SCROLL CONTAINER — horizontal drag-to-scroll gallery
   ============================================================================= */

.scroll-container {
  display: flex;
  flex-direction: row;
  gap: calc(var(--space-micro) * var(--phi-squared));
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: auto;
  scrollbar-width: thin;
  padding-right: calc(var(--space-lg) * var(--phi-inverse));
  position: relative;
  overscroll-behavior-x: contain;
}

/* JS toggles .dragging during pointer-drag to disable selection and show grab
   cursor feedback without changing scroll physics. */
.scroll-container.dragging {
  cursor: grabbing;
  user-select: none;
}

.scroll-container img {
  flex-shrink: 0;
  scroll-snap-align: start;
  width: 100%;
  height: auto;
  -webkit-user-drag: none;
  pointer-events: auto;
}

.scroll-container::-webkit-scrollbar {
  height: calc(var(--space-micro) * var(--phi-cubed));
}

.scroll-container::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: calc(var(--space-micro) * var(--phi-squared));
}

.scroll-container::-webkit-scrollbar-track {
  background: transparent;
}


/* =============================================================================
   HINT — blinking scroll nudge
   ============================================================================= */

.hint {
  font-weight: var(--fw-medium);
  color: var(--color-text);
  text-underline-offset: calc(var(--space-micro) * var(--phi-cubed));
  opacity: 1;
  animation: double-blink calc(var(--duration-500) * 6) ease-in-out infinite;
  margin-top: var(--space-micro);
}

.hint small {
  border: var(--border-width-2) solid var(--color-text);
  padding: var(--space-xs);
  border-radius: var(--border-radius-sm);
  margin-top: var(--space-micro);
  margin-bottom: var(--space-micro);
}

@keyframes double-blink {
  0%   { opacity: 1; }
  2%   { opacity: 0.1; }
  4%   { opacity: 1; }
  6%   { opacity: 0.1; }
  8%   { opacity: 1; }
  100% { opacity: 1; }
}


/* =============================================================================
   TYPEWRITER / TERMINAL HEADING
   ============================================================================= */

section h2:first-of-type.terminal-container {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-sm);
  position: relative;
}

.typewriter-text {
  display: inline;
  font-family: var(--font-primary), var(--font-fallback);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.cursor {
  display: inline-block;
  width: var(--space-2px);
  height: 1.2em;
  background-color: var(--color-text);
  margin-left: var(--space-px);
  animation: blink 1s infinite;
  vertical-align: top;
}

@keyframes blink {
  0%,  50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}


/* =============================================================================
   EVENTS LIST
   ============================================================================= */

.events-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-primary);
  max-width: none;
  column-count: 2;
  column-gap: var(--space-lg);
  column-fill: auto;
}

.events-list li {
  margin-top: var(--space-tiny);
  margin-bottom: var(--space-sm);
  line-height: var(--lh-normal);
  break-inside: avoid;
}

.events-list strong {
  display: block;
  font-size: var(--fs-medium);
  font-weight: var(--fw-semibold);
}

.events-list time {
  color: var(--color-text);
  font-size: var(--fs-medium);
  margin-right: var(--space-8px);
  font-weight: var(--fw-normal);
}

.event-type {
  background: var(--color-action);
  color: var(--white);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  padding: var(--space-2px) var(--space-6px);
  border-radius: var(--border-radius-md);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.events-list a {
  display: block;
  margin-top: var(--space-4px);
  color: var(--color-action);
  text-decoration: none;
  font-weight: var(--fw-medium);
  transition: color var(--duration-200) ease;
}

.events-list a:hover,
.events-list a:focus {
  text-decoration: underline;
  color: var(--color-action-hover);
}


/* =============================================================================
   ARTICLES LIST
   ============================================================================= */

.articles-list {
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--color-text);
}

.articles-list li {
  position: relative;
  padding-left: var(--space-xs);
}

.articles-list li::before {
  content: "·";
  color: var(--color-action);
  position: absolute;
  left: 0;
  font-weight: normal;
}

.articles-list li {
  margin-top: var(--space-tiny);
  margin-bottom: var(--space-xs);
}

.articles-list a {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-medium);
  color: var(--color-action);
  text-decoration: none;
  transition: color var(--duration-200) ease;
}

.articles-list a:hover,
.articles-list a:focus {
  color: var(--color-action-hover);
  text-decoration: underline;
}

.articles-list p {
  margin-top: 0.4rem;
  font-size: var(--fs-medium);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
  font-weight: var(--fw-normal);
}


/* =============================================================================
   PUBLICATIONS — left-accent card pattern
   --------------------------------------------------------------------------
   Description: Two-column bibliography grid that collapses to one under 64rem.
   Each entry is a split layout (accent bar + text body) to keep scanability
   without extra borders. Accent color is keyed by data-type (Olivetti palette)
   to separate research/industry/book/featured at a glance.
   ============================================================================= */

.publications-note {
  font-style: italic;
  opacity: 0.9;
  margin-bottom: var(--space-24px);
  border-left: var(--border-width-3) solid var(--color-text);
  background-color: var(--color-section-alt);
  padding: var(--space-12px) var(--base-unit);
}

.publications-note a {
  color: inherit;
  font-weight: var(--fw-semibold);
}

.pub-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}

.pub-item {
  display: grid;
  grid-template-columns: var(--border-width-4) 1fr;
  gap: 0 var(--space-20px);
  padding: var(--space-12px) 0;
  border-bottom: var(--border-width-1) solid var(--color-section-alt);
  break-inside: avoid;
}

.pub-item:last-child {
  border-bottom: none;
}

/* Accent bar — color keyed by data-type (research/industry/book/featured) */
.pub-item-accent {
  width: var(--border-width-4);
  border-radius: var(--border-radius-xs);
  background-color: var(--color-text);
  opacity: 0.3;
  align-self: stretch;
  min-height: 100%;
}

.pub-item[data-type="research"] .pub-item-accent,
.pub-item[data-type="industry"] .pub-item-accent,
.pub-item[data-type="book"] .pub-item-accent,
.pub-item[data-type="featured"] .pub-item-accent {
  background-color: var(--color-text);
}

.pub-item-body {
  display: block;
}

.pub-item-type {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 0.6;
  margin-bottom: 0.3rem;
}

.pub-item-type a {
  color: inherit;
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.pub-item-title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 0.35rem 0;
}

.pub-item-title a {
  color: inherit;
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border-bottom: var(--border-width-1) solid transparent;
  transition: border-color 150ms ease;
}

.pub-item-title a:hover {
  border-bottom-color: currentColor;
}

.pub-item-meta {
  font-size: 0.8rem;
  color: var(--color-text);
  opacity: 0.65;
  margin-bottom: 0.45rem;
  font-weight: var(--fw-semibold);
}

.pub-item-meta a,
.pub-item-abstract a {
  color: inherit;
  font-weight: var(--fw-semibold);
}

.pub-item-abstract {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-text);
  opacity: 0.88;
  font-weight: var(--fw-medium);
  margin: 0;
}


/* =============================================================================
   SECTION-SPECIFIC — #intro
   --------------------------------------------------------------------------
   Description: Contextual hero overrides tuned around typographic scale. The
   large top margin creates separation from the header without extra wrappers.
   The avatar size is derived from φ multiples of --fs-xxl to stay proportional.
   The “Highlight block” rule targets #about but lives here for #intro proximity;
   consider moving it into the #about block if it becomes harder to find.
   ============================================================================= */

#intro {
  margin-top: var(--space-xxl);
}

#intro .intro-identity {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

#intro .intro-identity figure {
  margin: 0;
}

#intro h1 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
}

#intro h2 {
  font-weight: var(--fw-light);
}

#intro h3 {
  margin-bottom: var(--space-md);
}

#intro h5 {
  font-weight: var(--fw-medium);
}

#intro a {
  letter-spacing: var(--ls-normal);
}

/* Avatar ring — phi-derived radius + shadow to match the type scale */
#intro figure:first-of-type img {
  border-radius: calc(var(--space-xxl) * var(--phi));
  width: calc(var(--fs-xxl) * var(--phi));
  box-shadow: 0 0 0 calc(var(--fs-base) * var(--phi-inverse) * var(--phi-inverse)) var(--color-text);
  margin-top: 0;
  margin-bottom: var(--space-md);
  margin-left: var(--space-micro);
}

/* Highlight block in #about — display + heading scale for a statement */
#about .highlight-inline {
  display: block;
  font-size: var(--fs-xl);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
  max-width: var(--content-max-width);
}


/* =============================================================================
   SECTION-SPECIFIC — #about
   --------------------------------------------------------------------------
   Description: Styles the profile image as a “polaroid” by combining a white
   background with a white border. A larger top margin separates the figure
   from the preceding text block without adding extra layout wrappers.
   ============================================================================= */

#about figure:first-of-type {
  margin-bottom: 0;
}

#about figure:first-of-type img {
  border-radius: var(--border-radius-sm);
  width: auto;
  height: auto;
  max-width: max-content;
  background-color: var(--white);
  border: var(--space-micro) solid var(--white);
  margin-top: var(--space-lg);
}

#about figcaption {
  margin-top: var(--space-tiny);
  margin-bottom: var(--space-sm);
}


/* =============================================================================
   SECTION-SPECIFIC — #work
   --------------------------------------------------------------------------
   Description: Alternates project backgrounds via nth-of-type to separate items
   without explicit dividers. Forces external links in the last paragraph to be
   block-level so they read as a distinct, clickable target.
   ============================================================================= */

#work p:not(.project-context) a[href*="http"]:last-child {
  display: block;
  margin-top: var(--space-xs);
}

#work .work-project {
  background-color: var(--color-bg);
  border-radius: var(--border-radius-sm);
  padding: var(--space-sm);
  margin: var(--space-md) 0;
}

#work .work-project:nth-of-type(even) {
  background-color: var(--color-section-alt);
}


/* =============================================================================
   SECTION-SPECIFIC — #research
   --------------------------------------------------------------------------
   Description: Mirrors the #work structure but uses --color-section-alt-strong
   for even items to create slightly higher contrast. The h5 + p selector
   removes the default gap between project title and abstract.
   ============================================================================= */

#research p a[href*="http"]:last-child,
#research p a[href^="#"]:last-child {
  display: block;
  margin-top: var(--space-xs);
}

#research .research-project {
  background-color: var(--color-section-alt);
  border-radius: var(--border-radius-sm);
  padding: var(--space-sm);
  margin: var(--space-md) 0;
}

#research .research-project:nth-of-type(even) {
  background-color: var(--color-section-alt-strong);
}

#research h5 {
  margin-top: var(--space-sm);
}

#research h5 + p {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-md);
}


/* =============================================================================
   SECTION-SPECIFIC — #speaker
   --------------------------------------------------------------------------
   Description: Uses CSS columns for the main list (excluding .events-list) to
   distribute dense items without a dedicated grid. break-inside: avoid prevents
   a single entry from splitting across columns.
   ============================================================================= */

#speaker > ul:not(.events-list) {
  column-count: 2;
  column-gap: var(--space-lg);
  column-fill: auto;
}

#speaker > ul:not(.events-list) li {
  break-inside: avoid;
}


/* =============================================================================
   SECTION-SPECIFIC — h5/h6 spacing shared across secondary sections
   --------------------------------------------------------------------------
   Description: Centralizes h5/h6 spacing rules used by secondary sections to
   avoid repeating the same margins in each section-specific block. When a
   section needs tweaks, add overrides inside its block with higher specificity.
   ============================================================================= */

#lecturing h5,
#research h5,
#work h5,
#speaker h5,
#publications h5,
#about h5,
#contact h5 {
  margin-top: var(--space-micro);
  margin-bottom: var(--space-xs);
}

#lecturing h6,
#research h6,
#work h6,
#speaker h6,
#publications h6,
#about h6,
#contact h6 {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-sm);
}


/* =============================================================================
   NAVIGATION
   --------------------------------------------------------------------------
   Description: Fixed top-right navigation on desktop; becomes a fullscreen
   drawer on small screens (handled in the ≤ 30rem breakpoint). The .active
   state mirrors the base button inversion (dark bg, light text). The
   hover/pointer media query avoids iOS “ghost hover” on touch devices.
   ============================================================================= */

.nav {
  position: relative;
}

.nav-sections {
  position: fixed;
  top: var(--space-xxl);
  right: var(--space-20px);
  list-style: none;
  margin: var(--space-sm) 0 0 0;
  padding: 0;
  /* Uses shared elevation tokens (XReate) so overlays stay consistent. */
  z-index: var(--z-popover);
}

.nav-sections li {
  margin: var(--space-px) 0;
  text-align: right;
}

.nav-sections a {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  color: var(--color-text);
  padding: var(--space-8px) var(--space-12px);
  display: block;
  transition: all var(--duration-200) ease-in-out;
}

@media (hover: hover) and (pointer: fine) {
  .nav-sections a:hover {
    background-color: var(--color-text);
    color: var(--color-bg);
  }
}

.nav-sections a.active {
  background-color: var(--color-text);
  color: var(--color-bg);
  text-decoration: none;
}

/* Close button — shown only ≤ 30rem; hidden by default on desktop */
.nav-close {
  position: absolute;
  top: calc(var(--space-micro) * var(--phi));
  right: calc(var(--space-micro) * var(--phi));
  background: none;
  border: none;
  font-size: var(--fs-large);
  color: var(--color-text);
  cursor: pointer;
  padding: var(--space-micro) calc(var(--space-micro) * var(--phi));
  border-radius: 0;
  line-height: var(--lh-tight);
  transition: color var(--duration-200) ease-in-out, background-color var(--duration-200) ease-in-out;
  display: none;
  z-index: calc(var(--z-popover) + 1);
  font-weight: var(--fw-normal);
  letter-spacing: var(--ls-normal);
}

.nav-close:hover {
  color: var(--color-bg);
  background-color: var(--color-text);
}

.nav-close:focus {
  outline: var(--border-width-2) solid var(--color-action);
  outline-offset: var(--border-width-2);
}


/* =============================================================================
   APP ICON — iOS squircle (border-radius ≈ 22.37%, max 512 × 512 px)
   --------------------------------------------------------------------------
   Description: Renders app icons with the iOS squircle radius (~22.37%) using
   the shared --border-radius-squircle token. aspect-ratio: 1 / 1 keeps a square
   silhouette independent of container width, matching platform expectations.
   ============================================================================= */

.app-icon-ios {
  display: block;
  width: 100%;
  max-width: var(--app-icon-max-width);
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--border-radius-squircle);
  overflow: hidden;
  object-fit: cover;
}

figure .app-icon-ios {
  margin: 0 auto var(--space-lg);
}

.app-icon-ios + figcaption {
  text-align: center;
}


/* =============================================================================
   RESPONSIVE — ≤ 64 rem (tablet)
   --------------------------------------------------------------------------
   Description: rem-based breakpoint so layout changes track user typography
   scaling. Multi-column lists collapse to a single column and spacing tightens.
   The third CTA in #intro is hidden to reduce visual clutter at tablet widths.
   ============================================================================= */

/* Breakpoints strategy:
   - rem-based queries follow typography scaling (user zoom / base font changes).
   - pixel-based queries are used for "device-ish" mobile widths where rem scaling may vary. */
@media (max-width: 64rem) {
  /* Note: only .pub-list is a grid; column lists ignore grid settings. */
  #speaker > ul:not(.events-list),
  .events-list,
  .pub-list {
    grid-template-columns: 1fr;
  }

  #intro .cta-group a:nth-child(3) {
    display: none;
  }

  .pub-list {
    grid-template-columns: 1fr;
    gap: var(--space-tiny);
  }
}


/* =============================================================================
   RESPONSIVE — ≤ 40 rem
   --------------------------------------------------------------------------
   Description: Narrow-viewport adjustments: the intro identity stack becomes
   vertical and low-priority UI (CTA group + theme toggle) is hidden to preserve
   horizontal space for content.
   ============================================================================= */

@media (max-width: 40rem) {
  #intro .intro-identity {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }

  .cta-group {
    display: none;
  }

  .theme-toggle {
    display: none;
  }
}


/* =============================================================================
   RESPONSIVE — ≤ 768 px (mobile)
   --------------------------------------------------------------------------
   Description: px-based “device-ish” breakpoint. Horizontal compact cards swap
   from row to column; metadata realigns left and drops the fixed min-width that
   kept it alongside the main text.
   ============================================================================= */

@media (max-width: 768px) {
  figcaption {
    column-count: 1;
    column-gap: normal;
  }

  .horizontal-card-compact {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .horizontal-card-compact .card-meta {
    text-align: left;
    min-width: auto;
  }

  .horizontal-card-compact h6 {
    margin-bottom: var(--space-micro);
  }

  .horizontal-card-compact p {
    column-count: 1;
    column-gap: normal;
  }
}


/* =============================================================================
   RESPONSIVE — ≤ 30 rem (small mobile)
   --------------------------------------------------------------------------
   Description: Reduces the global scale by lowering --base-unit (1rem → 0.85rem)
   so all φ-derived tokens shrink without per-property overrides. Body + section
   padding compress, and navigation switches to a fullscreen drawer with a
   visible .nav-close affordance.
   ============================================================================= */

@media (max-width: 30rem) {
  :root {
    --base-unit: 0.85rem;
  }

  /* Body & shell */
  body {
    padding: var(--space-xs);
    font-size: var(--fs-xl);
  }

  .app-header,
  footer {
    padding: var(--space-xs);
  }

  .app-header a {
    font-size: var(--fs-plus);
  }

  .header-links {
    gap: var(--space-tiny);
  }

  main {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
  }

  /* Grid */
  .container {
    gap: var(--space-micro);
    padding: var(--space-xs) 0;
  }

  /* Sections */
  section {
    margin-top: 0;
    margin-bottom: 0;
    padding: var(--space-sm) 0 var(--space-sm) 0;
  }

  section::after {
    left: 0;
    width: 100%;
  }

  section:last-of-type {
    padding-bottom: var(--space-lg);
  }

  /* Headings */
  h1 {
    font-size: var(--fs-xl);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
  }

  h2 {
    font-size: var(--fs-xl);
    margin-top: var(--space-md);
    margin-bottom: var(--space-xs);
  }

  h3,
  h4 {
    font-size: var(--fs-large);
    margin-top: var(--space-sm);
    margin-bottom: var(--space-xs);
  }

  h5 {
    line-height: var(--lh-snug);
    font-size: var(--fs-plus);
    font-weight: var(--fw-medium);
    margin-top: var(--space-xs);
    margin-bottom: var(--space-tiny);
  }

  h6 {
    font-size: var(--fs-medium);
    font-weight: var(--fw-normal);
    margin-top: var(--space-xs);
    margin-bottom: var(--space-tiny);
  }

  /* Body text */
  p,
  ul,
  ol,
  blockquote {
    font-size: var(--fs-plus);
    font-weight: var(--fw-normal);
    margin-top: var(--space-tiny);
    margin-bottom: var(--space-xs);
  }

  li {
    margin-top: var(--space-micro);
    margin-bottom: var(--space-micro);
  }

  li strong {
    font-weight: var(--fw-semibold);
  }

  small {
    margin-top: var(--space-micro);
    margin-bottom: var(--space-micro);
  }

  footer p {
    margin-top: var(--space-tiny);
    margin-bottom: var(--space-tiny);
  }

  /* Media */
  figure {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
  }

  figcaption {
    font-size: var(--fs-base);
    margin-top: var(--space-micro);
    margin-bottom: var(--space-micro);
    letter-spacing: var(--ls-normal);
    line-height: var(--lh-normal);
    column-count: 1;
    column-gap: normal;
  }

  figcaption.quote {
    margin-top: var(--space-micro);
    margin-bottom: var(--space-tiny);
  }

  /* Dividers */
  hr {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
    height: var(--border-width-1);
  }

  /* Callouts */
  .quote {
    margin-top: var(--space-tiny);
    margin-bottom: var(--space-xs);
  }

  .research-note,
  .project-context {
    font-size: var(--fs-base);
  }

  .research-note {
    font-size: var(--fs-base);
    margin-top: var(--space-sm);
    padding-left: var(--space-sm);
    border-left-width: var(--border-width-1);
  }

  .social-proof {
    font-size: var(--fs-plus);
    line-height: var(--lh-relaxed);
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
    padding-top: var(--space-tiny);
    padding-bottom: var(--space-tiny);
  }

  #work .work-project {
    padding: var(--space-xs);
  }

  #research .research-project {
    padding: var(--space-xs);
  }

  /* Buttons & CTAs */
  button,
  .button {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--fs-base);
    letter-spacing: var(--ls-normal);
    line-height: var(--lh-normal);
  }

  .cta {
    width: 100%;
    text-align: center;
    font-size: var(--fs-plus);
    font-weight: var(--fw-medium);
  }

  #intro .cta-group {
    display: none;
  }

  /* Tables */
  .design-case-table-wrapper {
    margin: 0 calc(var(--space-xs) * -1) var(--space-md) calc(var(--space-xs) * -1);
    padding: 0 var(--space-xs);
    overflow-x: auto;
  }

  .design-case-table th,
  .design-case-table td {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-normal);
    white-space: normal;
    overflow-wrap: break-word;
  }

  .design-case-table th {
    letter-spacing: var(--ls-wide);
    font-weight: var(--fw-semibold);
  }

  .work-summary-table-wrapper {
    margin: 0 calc(var(--space-xs) * -1) var(--space-md) calc(var(--space-xs) * -1);
    padding: 0 var(--space-xs);
    overflow-x: auto;
  }

  /* Hide work summary table on small mobile */
  .work-summary-table-wrapper {
    display: none;
  }

  .work-summary-table th,
  .work-summary-table td {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-normal);
    white-space: normal;
    overflow-wrap: break-word;
  }

  .work-summary-table th {
    letter-spacing: var(--ls-wide);
  }

  /* Scroll container */
  .scroll-container {
    padding-right: var(--space-xs);
    gap: var(--space-micro);
  }

  /* Hint */
  .hint small {
    margin-top: var(--space-micro);
    margin-bottom: var(--space-micro);
  }

  /* Collaboration cards */
  .collaboration-cards {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    margin-bottom: var(--space-lg);
  }

  .collaboration-card .button {
    margin-top: var(--space-xs);
    margin-bottom: var(--space-micro);
  }

  /* Events list */
  .events-list {
    max-width: 100%;
    column-count: 1;
    column-gap: normal;
  }

  .events-list li {
    margin-top: var(--space-micro);
    margin-bottom: var(--space-xs);
  }

  .events-list strong {
    font-size: var(--fs-medium);
  }

  .events-list time {
    font-size: var(--fs-base);
  }

  /* Articles list */
  .articles-list li {
    margin-top: var(--space-micro);
    margin-bottom: var(--space-tiny);
  }

  .articles-list a {
    font-size: var(--fs-medium);
  }

  .articles-list p {
    font-size: var(--fs-medium);
  }

  /* Horizontal compact cards */
  #teaching .horizontal-cards-compact {
    gap: var(--space-xs);
    margin-top: var(--space-md);
    margin-bottom: var(--space-lg);
  }

  #teaching .horizontal-card-compact {
    padding: var(--space-xs);
    gap: var(--space-xs);
  }

  #teaching .horizontal-card-compact h5 {
    margin-bottom: var(--space-micro);
    margin-top: var(--space-micro);
  }

  #teaching .horizontal-card-compact h6 {
    margin-bottom: var(--space-micro);
  }

  #teaching .horizontal-card-compact p {
    margin-top: var(--space-tiny);
    column-count: 1;
    column-gap: normal;
  }

  /* Section-specific — #intro */
  #intro {
    margin-top: 0;
  }

  #intro figure:first-of-type img {
    margin-top: var(--space-xl);
  }

  .intro h2:first-of-type {
    margin-top: var(--space-tiny);
  }

  #intro h5 {
    line-height: var(--lh-snug);
    font-size: var(--fs-plus);
    font-weight: var(--fw-medium);
  }

  /* Section-specific — #about */
  #about .highlight-inline {
    font-size: var(--fs-large);
    padding: var(--space-xs) var(--space-sm);
  }

  /* Section-specific — #contact */
  #contact a {
    font-size: var(--fs-plus);
    font-weight: var(--fw-medium);
  }

  /* Navigation — fullscreen drawer (mobile) */
  .nav-sections {
    margin: var(--space-micro) 0 0 0;
    position: fixed;
    top: 0;
    right: 0;
    transition: opacity var(--duration-300) ease-in-out, transform var(--duration-300) ease-in-out;
    will-change: opacity, transform;
    height: 100%;
    background-color: var(--color-bg);
    padding-top: calc(var(--space-xs) * 2.5);
  }

  .nav-sections li:first-of-type {
    margin-top: var(--space-sm);
  }

  .nav-sections a {
    padding: calc(var(--space-micro) * 1.5) var(--space-xs);
    font-weight: var(--fw-bold);
    background-color: transparent;
    margin-bottom: var(--space-px);
  }

  .nav-sections a.active {
    background-color: var(--color-text);
    color: var(--color-bg);
  }

  /* No hover on touch — prevents iOS sticky-hover ghost */
  .nav-sections a:hover {
    background-color: transparent;
    color: var(--color-text);
  }

  .nav-sections a.active:hover {
    opacity: 1;
    background-color: var(--color-text);
    color: var(--color-bg);
  }

  .nav-sections a:active {
    background-color: var(--color-text);
    color: var(--color-bg);
    transition: none;
  }

  .nav-close {
    display: block;
  }

  /* Hide close button when nav is collapsed */
  .nav-sections.nav-hidden .nav-close {
    display: none;
  }
}

  html,
  body {
    max-width: none;
    margin: 0;
  }

  body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-primary), var(--font-fallback);
    font-size: var(--fs-plus);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    overflow-x: hidden;
  }

  .wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
  }

  /* Header (project title + tagline + language/theme toggles) */
  .wrapper > .app-header {
    text-align: center;
    margin-bottom: 0;
    position: static;
    width: auto;
    max-width: none;
    left: auto;
    transform: none;
    background: transparent;
    padding: 0;
    z-index: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding-top: 0;
  }

  .wrapper > .app-header hr {
    margin: var(--space-xs) auto;
    height: var(--border-width-1);
    background: var(--color-text);
    opacity: 0.35;
    width: 100%;
    max-width: 440px;
  }

  .tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-bg);
    background: var(--color-text);
    border: var(--border-width-2) solid var(--color-text);
    padding: 7px 14px;
    border-radius: 0;
    margin-bottom: 0;
    max-width: 520px;
    line-height: 1.4;
  }

  .app-tagline { 
    font-size: clamp(0.95rem, 2.8vw, 1.05rem); 
    font-weight: 650; 
    color: var(--color-text); 
    margin: 6px 0 6px 0; 
    letter-spacing: var(--ls-tight); 
    line-height: var(--lh-snug); 
  }
  .hero-demo-video {
    width: 100%;
    max-width: 520px;
    height: auto;
    display: block;
    margin: var(--space-xs) auto;
    border: var(--border-width-1) solid var(--color-section-alt-strong);
    background: var(--color-bg);
  }

  h1 {
    font-family: var(--font-primary), var(--font-fallback);
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--color-text);
    margin: 0;
  }
  .brand-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
  }
  .brand-subtitle { 
    font-size: 0.55em; 
    font-weight: 300; 
    opacity: 0.5; 
  } 
  @media (max-width: 520px) {
    .brand-subtitle {
      display: block;
    }
  }
  .brand-mark {
    width: 44px;
    height: 44px;
    display: block;
    image-rendering: pixelated;
  }

  .subtitle {
    font-size: 14px;
    color: var(--color-text);
    line-height: 1.7;
    max-width: 440px;
    margin: 0 auto;
    font-weight: var(--fw-semibold);
  }

  .about-note {
    font-size: 12px;
    color: var(--color-muted);
    line-height: 1.7;
    max-width: 520px;
    margin: 0 auto;
    font-weight: var(--fw-medium);
    margin-top: 6px;
    text-transform: uppercase;
  }

  .celeste-word { 
    font-size: inherit; 
    color: var(--color-action); 
    letter-spacing: 0.08em; 
    font-style: italic; 
    opacity: 0.9; 
    margin: 0; 
    cursor: default; 
    user-select: none; 
    display: inline;
  }

  .about-author { 
    font-size: 13px; 
    color: var(--color-muted); 
    line-height: 1.7; 
    max-width: 560px; 
    margin: 0 auto; 
    font-weight: var(--fw-medium); 
    text-align: center; 
  } 

  .about-author a { 
    color: var(--color-action); 
    text-decoration: none; 
    font-weight: var(--fw-semibold); 
    font-size: inherit;
  } 

  .about-author a:hover, 
  .about-author a:focus { 
    color: var(--color-action-hover); 
    text-decoration: underline; 
    text-underline-offset: var(--underline-offset); 
  } 
  
  .linkified {
    color: var(--color-action);
    text-underline-offset: var(--underline-offset);
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
  }
  
  .linkified:hover,
  .linkified:focus {
    color: var(--color-action-hover);
  }

  .lang-panel {
    position: fixed;
    top: var(--space-xs);
    left: var(--space-xs);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: var(--space-4px);
    align-items: flex-start;
    max-width: calc(100vw - var(--space-xs) * 2 - 140px);
  }
  .lang-select {
    background: var(--color-bg, #faf6ea);
    border: var(--border-width-2) solid var(--color-text, #1b1b1b);
    color: var(--color-text, #1b1b1b);
    font-family: var(--font-primary), var(--font-fallback);
    font-size: var(--fs-base);
    padding: var(--space-6px) calc(var(--space-sm) + 18px) var(--space-6px) var(--space-sm);
    max-width: 100%;
    appearance: none;
    border-radius: 0;
    background-image:
      linear-gradient(45deg, transparent 50%, var(--color-text) 50%),
      linear-gradient(135deg, var(--color-text) 50%, transparent 50%);
    background-position:
      calc(100% - 14px) 50%,
      calc(100% - 8px) 50%;
    background-size: 6px 6px;
    background-repeat: no-repeat;
  }
  .lang-meta {
    font-size: 10px;
    color: var(--color-muted);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
    max-width: 100%;
  }

  .theme-toggle {
    position: fixed;
    top: var(--space-xs);
    right: var(--space-xs);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: var(--space-4px);
    padding: var(--space-2px);
    background: var(--color-bg, #faf6ea);
    border: var(--border-width-2) solid var(--color-text, #1b1b1b);
  }
  .theme-toggle label {
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  .theme-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .theme-toggle .text {
    font-size: var(--fs-base);
    padding: var(--space-4px) var(--space-12px);
    color: var(--color-text, #1b1b1b);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-normal);
    cursor: pointer;
  }
  .theme-toggle input:checked + .text {
    background: var(--color-text, #1b1b1b);
    color: var(--color-bg, #faf6ea);
  }
  @media (max-width: 520px) {
    .theme-toggle { display: none; }
  }

  .social-links {
    display: flex;
    align-items: center;
    gap: var(--space-8px);
    margin-top: var(--space-xs);
    font-size: var(--fs-small);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
  }
  @media (max-width: 520px) {
    .social-links {
      font-size: 14px;
      gap: 12px;
      flex-wrap: wrap;
    }
  }

  .social-links a {
    color: var(--color-action);
    text-decoration: none;
    font-weight: var(--fw-bold);
  }

  .social-links a:hover,
  .social-links a:focus {
    color: var(--color-action-hover);
    text-decoration: underline;
    text-underline-offset: var(--underline-offset);
  }
  .header-cta-row {
    margin-top: 10px;
    display: flex;
    justify-content: center;
  }
  .btn-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    min-height: 44px;
    padding: 10px 16px;
    font-size: 13px;
    text-decoration: none;
  }
  .btn-start {
    background: var(--color-text);
    color: var(--color-bg);
    border: var(--border-width-2) solid var(--color-text);
    font-weight: var(--fw-bold);
    font-size: 14px;
    padding: 12px 18px;
  }
  .btn-start:hover,
  .btn-start:focus {
    background: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
  }
  .footer-share-cta {
    margin-top: var(--space-xs);
    padding-top: var(--space-xs);
    border-top: var(--border-width-1) solid var(--color-section-alt-strong);
  }
  .footer-share-title {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-muted);
    font-weight: var(--fw-bold);
  }
  .footer-share-text {
    margin: 10px 0 14px;
    font-size: 12px;
    color: var(--color-muted);
    line-height: 1.7;
    font-weight: var(--fw-medium);
  }
  .share-modal[hidden] { display: none; }
  .share-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 18px;
  }
  .share-surface {
    width: 100%;
    max-width: 720px;
    background: var(--color-bg);
    border: var(--border-width-2) solid var(--color-text);
    padding: 16px;
  }
  .share-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
  }
  .share-title {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: var(--fw-bold);
    color: var(--color-muted);
  }
  .share-close {
    width: 44px;
    height: 44px;
    border-radius: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
  }
  .share-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .share-tile {
    background: var(--color-bg);
    border: var(--border-width-1) solid var(--color-section-alt-strong);
    padding: 18px 16px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    min-height: 120px;
    transform: none;
  }
  .share-tile:hover,
  .share-tile:focus {
    background: var(--color-section-alt);
    transform: none;
  }
  .share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    font-size: 32px;
    line-height: 1;
    font-weight: var(--fw-bold);
    color: var(--color-text);
  }
  .share-label {
    font-size: 16px;
    color: var(--color-text);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-normal);
  }

  /* Generic card container used for step panels and results */
  .card {
    background: var(--color-section-alt);
    border: var(--border-width-1) solid var(--color-section-alt-strong);
    border-radius: 0;
    padding: var(--space-sm);
    margin-bottom: var(--space-xs);
  }
  .workflow-container {
    background: var(--color-section-alt);
    border-top: 3px solid var(--color-action);
    padding: 4px;
    margin: var(--space-md) auto;
    max-width: 680px;
  }
  .workflow-container > .card:last-child {
    margin-bottom: 0;
  }
  @media (max-width: 520px) {
    .workflow-container {
      padding: 4px;
    }
  }

  .header-card {
    width: 100%;
    max-width: none;
    padding: var(--space-xs) var(--space-sm);
    margin-top: var(--space-xs);
  }
  .header-card p {
    margin: 0;
    font-size: 12px;
    color: var(--color-muted);
    line-height: 1.7;
  }
  .howto-steps {
    margin: 0;
    padding-left: 1.2em;
    font-size: 12px;
    color: var(--color-muted);
    line-height: 1.7;
  }
  .howto-steps li + li {
    margin-top: 6px;
  }
  .howto-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
  }
  .howto-panel {
    background: var(--color-section-alt);
    border: var(--border-width-2) solid var(--color-text);
    padding: var(--space-xs);
  }
  .howto-panel-title {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text);
    font-weight: var(--fw-semibold);
    white-space: pre-line;
    margin-bottom: 6px;
  }
  .howto-panel-title .label-main {
    display: block;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.05;
  }
  .howto-panel p {
    margin: 0;
    font-size: 12px;
    color: var(--color-text);
    font-weight: var(--fw-medium);
    line-height: 1.7;
  }
  @media (max-width: 560px) {
    .howto-panels { grid-template-columns: 1fr; }
  }
  .value-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
  }
  .value-card {
    background: var(--color-bg);
    border: var(--border-width-1) solid var(--color-section-alt-strong);
    padding: var(--space-xs);
  }
  .value-kicker {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    margin-bottom: 8px;
  }
  .value-text {
    margin: 20px 0 20px 0;
    font-size: 12px;
    color: var(--color-muted);
    line-height: 1.7;
    font-weight: var(--fw-medium);
  }
  .value-text strong a {
    font-weight: var(--fw-semibold);
  }
  .value-demo {
    margin-top: var(--space-xs);
    margin-bottom: var(--space-xs);
    background: var(--color-section-alt);
    border: var(--border-width-1) solid var(--color-section-alt-strong);
    padding: 10px;
  }
  .value-demo-video {
    width: 100%;
    height: auto;
    display: block;
    background: var(--color-bg);
  }
  .value-demo-caption {
    margin-top: 10px;
    font-size: 12px;
    color: var(--color-muted);
    line-height: 1.6;
    font-weight: var(--fw-medium);
  }
  .value-media {
    background: var(--color-section-alt);
  }
  .value-media img {
    width: 100%;
    height: auto;
    display: block;
    cursor: zoom-in;
  }
  .value-media--grid2 {
    padding: 10px;
  }
  .value-img-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  @media (max-width: 700px) {
    .value-img-grid { grid-template-columns: 1fr; }
  }
  .value-media--grid2 img {
    background: var(--color-bg);
    cursor: zoom-in;
  }
  .value-media--celeste {
    padding: 10px;
  }
  .image-modal[hidden] { display: none; }
  .image-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 18px;
  }
  .image-surface {
    width: 100%;
    max-width: 1100px;
    background: var(--color-bg);
    border: var(--border-width-2) solid var(--color-text);
    padding: 12px;
  }
  .image-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 10px;
  }
  .image-close {
    width: 44px;
    height: 44px;
    border-radius: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
  }
  .image-figure {
    margin: 0;
    border: var(--border-width-1) solid var(--color-section-alt-strong);
    background: var(--color-section-alt);
  }
  .image-figure img {
    width: 100%;
    height: auto;
    max-height: calc(100vh - 160px);
    object-fit: contain;
    display: block;
    cursor: zoom-out;
  }
  .image-caption {
    margin: 10px 0 0;
    padding: 14px 14px 6px;
    font-size: 12px;
    color: var(--color-muted);
    white-space: pre-line;
    line-height: 1.6;
    font-weight: var(--fw-medium);
  }
  .value-credit {
    margin: 10px 0 0;
    font-size: 11px;
    color: var(--color-muted);
    line-height: 1.6;
    font-weight: var(--fw-medium);
  }
  .value-credit a {
    color: var(--color-action);
    text-decoration: none;
  }
  .value-credit a:hover,
  .value-credit a:focus {
    color: var(--color-action-hover);
    text-decoration: underline;
    text-underline-offset: var(--underline-offset);
  }
  .value-downloads {
    margin-top: 12px;
    display: flex;
    gap: var(--space-xs);
    padding-top: 8px;
    flex-wrap: wrap;
    align-items: center;
  }
  .value-download {
    background: transparent;
    border: var(--border-width-2) solid var(--color-text);
    color: var(--color-text);
    padding: var(--space-6px) var(--space-12px);
    border-radius: 0;
    font-family: var(--font-primary), var(--font-fallback);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-small);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    line-height: 1;
    transform: none;
  }
  .value-download-title,
  .value-download-sub {
    display: block;
    text-align: center;
  }
  .value-download {
    flex-direction: column;
    gap: 4px;
  }
  .value-download-sub {
    font-size: 0.8em;
    font-weight: 500;
    opacity: 0.7;
    letter-spacing: var(--ls-normal);
    text-transform: none;
  }
  @media (max-width: 520px) {
    .value-downloads {
      flex-direction: row;
      align-items: stretch;
      gap: 0;
      flex-wrap: nowrap;
    }
    .value-download {
      flex: 1;
      font-size: 13px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 14px 10px;
      min-height: 52px;
    }
    .value-download + .value-download { border-left: 0; }
  }
  .value-download:hover,
  .value-download:focus {
    background: var(--color-section-alt);
    color: var(--color-text);
    transform: none;
  }
  .header-card .howto-cta {
    margin: var(--space-sm) 0 0;
    text-align: center;
    font-size: 14px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.02em;
    color: var(--color-text);
  }

  .header-card > .card-title {
    font-size: 14px;
    letter-spacing: 0.22em;
    color: var(--color-text);
    margin-bottom: 12px;
  }

  .card-accent {
    border-top: 3px solid var(--color-action);
  }

  .card-title {
    font-family: var(--font-primary), var(--font-fallback);
    font-size: 11px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-top: 0;
    margin-bottom: 20px;
  }
  .card-title:not(:first-child):not(.mt-32):not(.mt-16):not(.mt-xs) {
    margin-top: 40px;
  }
  .accordion {
    padding-bottom: var(--space-sm);
  }
  .accordion > summary.card-title {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0;
    user-select: none;
  }
  .accordion > summary.card-title::-webkit-details-marker { display: none; }
  .accordion > summary.card-title::marker { content: ""; }
  .accordion[open] > summary.card-title {
    margin-bottom: 20px;
  }
  .accordion-heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  .accordion-title { min-width: 0; }
  .accordion-subtitle {
    font-size: 12px;
    color: var(--color-muted);
    line-height: 1.6;
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-normal);
    text-transform: none;
    max-width: 44ch;
  }
  .accordion-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: var(--border-width-2) solid var(--color-text);
    color: var(--color-text);
    background: transparent;
    font-size: 12px;
    letter-spacing: var(--ls-normal);
    text-transform: none;
    font-weight: var(--fw-semibold);
    min-height: 44px;
    flex-shrink: 0;
  }
  .accordion-action-open { display: inline; }
  .accordion-action-close { display: none; }
  .accordion[open] .accordion-action-open { display: none; }
  .accordion[open] .accordion-action-close { display: inline; }
  .accordion-icon {
    font-size: 18px;
    line-height: 1;
    transform: rotate(0deg);
    transition: transform 0.15s ease;
  }
  .accordion[open] .accordion-icon {
    transform: rotate(45deg);
  }

  .scene-upload {
    display: flex;
    flex-direction: column;
    gap: var(--space-nano);
  }
  .upload-mode {
    display: inline-flex;
    border: var(--border-width-2) solid var(--color-text);
    margin: 0 0 var(--space-xs);
    width: 100%;
  }
  .upload-mode-title {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
    color: var(--color-muted);
    margin: 0 0 var(--space-6px);
    width: 100%;
    text-align: left;
  }
  .upload-mode-opt {
    position: relative;
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    user-select: none;
  }
  .upload-mode-opt + .upload-mode-opt {
    border-left: var(--border-width-2) solid var(--color-text);
  }
  .upload-mode-opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .upload-mode-text {
    font-size: 20px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    text-align: center;
    line-height: 1.1;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    align-self: stretch;
    height: 100%;
    padding: calc(var(--space-8px) * 2) calc(var(--space-sm) * 2);
  }
  .upload-mode-text .label-kicker {
    font-size: 0.5em;
    letter-spacing: 0.18em;
    opacity: 0.75;
    margin-bottom: 0.25em;
  }
  .upload-mode-text .label-sub {
    font-size: 0.65em;
    letter-spacing: 0.12em;
  }
  .upload-mode-opt input:checked + .upload-mode-text {
    background: var(--color-text);
    color: var(--color-bg);
  }
  @media (max-width: 520px) {
    .upload-mode-text { font-size: 16px; letter-spacing: 0.12em; padding: 16px 10px; }
  }
  .upload-mode-hints { margin: var(--space-6px) 0 var(--space-xs); }
  .upload-mode-hints .hint { margin: 0; }
  html[data-upload-mode="single"] .hint-mode-room { display: none; }
  html[data-upload-mode="room"] .hint-mode-single { display: none; }
  .scene-upload-name--single { display: none; }
  html[data-upload-mode="single"] .scene-upload-name--room { display: none; }
  html[data-upload-mode="single"] .scene-upload-name--single { display: inline; }
  .progress-card {
    background: var(--color-section-alt);
    border: var(--border-width-1) solid var(--color-section-alt-strong);
    border-top: 3px solid var(--color-action);
    padding: 12px 14px;
  }
  .upload-progress { margin: var(--space-6px) 0 var(--space-xs); }
  .upload-progress-value {
    font-size: 22px;
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    line-height: 1.1;
  }
  .upload-progress-hint {
    margin-top: 6px;
    font-size: 12px;
    color: var(--color-muted);
    font-weight: var(--fw-medium);
    line-height: 1.6;
  }
  .upload-stepper {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }
  html[data-upload-mode="single"] .upload-stepper { grid-template-columns: 1fr; }
  html[data-upload-mode="single"] .upload-stepper .upload-step:nth-child(n+2) { display: none; }
  .upload-step {
    height: 4px;
    background: var(--color-section-alt-strong);
    opacity: 0.55;
  }
  .upload-step.done {
    background: var(--orange);
    opacity: 1;
  }
  .upload-step.active {
    background: var(--orange);
    opacity: 1;
  }
  .scene-upload-head { width: 100%; }
  .slot-check {
    margin-left: 8px;
    font-size: 18px;
    color: var(--color-action);
    opacity: 0;
    transform: translateY(-2px);
  }
  .scene-upload-slot.has-file .slot-check { opacity: 1; }

  .scene-upload-slot {
    border: var(--border-width-1) solid var(--color-section-alt-strong);
    background: var(--color-bg);
    padding: var(--space-xs);
  }

  .scene-upload-slot.drag-over {
    border-color: var(--color-action);
    background: var(--color-section-alt);
  }

  .scene-upload-head {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: none;
    color: var(--color-muted);
    margin-bottom: 0;
    font-weight: var(--fw-semibold);
    display: flex;
    gap: var(--space-8px);
    align-items: center;
  }

  .iso-cube {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    --cube-off: #ffffff;
    --cube-on: var(--color-text);
  }
  html[data-theme="dark"] .iso-cube {
    --cube-off: var(--color-section-alt);
  }
  @media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .iso-cube {
      --cube-off: var(--color-section-alt);
    }
  }
  .iso-cube .cube-face {
    fill: var(--cube-off);
  }
  .iso-cube .cube-line {
    fill: none;
    stroke: var(--color-text);
    stroke-width: 1.5;
    stroke-linejoin: miter;
  }
  .iso-cube .hl { fill: var(--cube-on); }

  .scene-upload-num {
    color: var(--color-text);
    letter-spacing: 0.18em;
    font-size: 14px;
    font-weight: 600;
  }

  .scene-upload-name {
    text-transform: capitalize;
    font-size: 14px;
    font-weight: 600;
  }

  .scene-upload-body {
    display: flex;
    gap: 16px;
    align-items: flex-end;
  }

  .scene-upload-thumb {
    width: 80px;
    height: 80px;
    border: var(--border-width-1) solid var(--color-section-alt-strong);
    background: var(--color-section-alt);
    flex-shrink: 0;
    align-self: flex-end;
  }

  .scene-upload-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
  }

  .scene-upload-details {
    flex: 1;
    min-width: 0;
  }

  .scene-upload-filename {
    font-family: var(--font-primary), var(--font-fallback);
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
  }

  .scene-upload-meta {
    font-size: 11px;
    color: var(--color-muted);
    margin-bottom: var(--space-8px);
  }

  .scene-upload-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-8px);
    align-items: end;
  }

  .scene-upload-actions input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
  }

  .btn-slot {
    background: var(--color-text);
    border: var(--border-width-2) solid var(--color-text);
    color: var(--color-bg);
    padding: 10px 16px;
    border-radius: 0;
    font-family: var(--font-primary), var(--font-fallback);
    font-size: 13px;
    font-weight: var(--fw-semibold);
    text-transform: capitalize;
    min-height: 44px;
    width: 100%;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
  }

  .btn-slot:hover {
    background: var(--color-bg);
    color: var(--color-text);
  }

  .btn-slot-remove {
    background: transparent;
    border: var(--border-width-2) solid var(--color-text);
    color: var(--color-text);
    padding: 10px 16px;
    border-radius: 0;
    font-family: var(--font-primary), var(--font-fallback);
    font-size: 13px;
    font-weight: var(--fw-semibold);
    min-height: 44px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
  }

  .btn-slot-remove:hover {
    background: var(--color-text);
    color: var(--color-bg);
  }

  @media (max-width: 520px) {
    .scene-upload-actions { grid-template-columns: 1fr; align-items: stretch; }
    .btn-slot, .btn-slot-remove { font-size: 14px; padding: 12px 16px; min-height: 48px; }
    .scene-upload-filename { font-size: 14px; }
    .scene-upload-meta { font-size: 12px; }
  }

  @media (max-width: 480px) {
    .scene-upload-body { align-items: stretch; }
    .scene-upload-thumb { width: 72px; height: 72px; }
  }

  /* Settings panel (dimensions, axis, filename, toggles) */
  .settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .settings-grid > hr {
    grid-column: 1 / -1;
    margin: var(--space-6px) 0;
    height: var(--border-width-1);
    background: var(--color-text);
    opacity: 0.22;
    border: 0;
  }

  @media (max-width: 480px) {
    .settings-grid { grid-template-columns: 1fr; }
  }

  .field label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 8px;
    font-weight: var(--fw-semibold);
  }

  .field input, .field select {
    width: 100%;
    background: var(--color-bg);
    border: var(--border-width-2) solid var(--color-text);
    border-radius: 0;
    color: var(--color-text);
    font-family: var(--font-primary), var(--font-fallback);
    font-size: var(--fs-base);
    padding: var(--space-xs) var(--space-sm);
    outline: none;
    transition: border-color 0.15s;
    appearance: none;
  }

  .field select {
    padding-right: calc(var(--space-sm) + 18px);
    background-image:
      linear-gradient(45deg, transparent 50%, var(--color-text) 50%),
      linear-gradient(135deg, var(--color-text) 50%, transparent 50%);
    background-position:
      calc(100% - 14px) 50%,
      calc(100% - 8px) 50%;
    background-size: 6px 6px;
    background-repeat: no-repeat;
  }

  .field input:focus, .field select:focus {
    border-color: var(--color-action);
  }

  .field .hint {
    font-size: 10px;
    color: var(--color-muted);
    margin-top: 5px;
    font-weight: var(--fw-medium);
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
    transform: translateZ(0);
  }

  .field-full {
    grid-column: 1 / -1;
  }

  .field-full hr {
    margin: var(--space-6px) 0;
    height: var(--border-width-1);
    background: var(--color-text);
    opacity: 0.35;
    border: 0;
  }

  /* Toggle (custom checkbox switch) */
  .toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-6px) 0;
  }

  .toggle-label {
    font-size: 12px;
    color: var(--color-text);
    font-weight: var(--fw-semibold);
  }

  .toggle-label small {
    display: block;
    font-size: 10px;
    color: var(--color-muted);
    margin-top: 2px;
    font-weight: var(--fw-medium);
  }

  .toggle {
    position: relative;
    --toggle-w: 38px;
    --toggle-h: 22px;
    --toggle-pad: 1px;
    --toggle-thumb: 16px;
    width: var(--toggle-w);
    height: var(--toggle-h);
    flex-shrink: 0;
  }

  .toggle input { opacity: 0; width: 0; height: 0; }

  .toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--color-section-alt-strong);
    border: var(--border-width-2) solid var(--color-text);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s;
    overflow: hidden;
  }

  .toggle-slider::after {
    content: '';
    position: absolute;
    left: var(--toggle-pad);
    top: 50%;
    width: var(--toggle-thumb);
    height: var(--toggle-thumb);
    background: var(--color-text);
    border-radius: 50%;
    transform: translateY(-50%);
    transition: transform 0.2s, background 0.2s, left 0.2s;
  }

  .toggle input:checked + .toggle-slider { background: var(--color-section-alt); }
  .toggle input:checked + .toggle-slider::after {
    left: calc(100% - var(--toggle-thumb) - var(--toggle-pad));
    transform: translateY(-50%);
    background: var(--color-action);
  }

  /* Convert button */
  #btn-convert {
    width: 100%;
    margin-top: var(--space-xs);
    margin-bottom: var(--space-md);
    border-radius: 0;
  }
  .generate-card #btn-convert {
    margin-bottom: 0;
  }

  #btn-convert:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
  }
  #btn-convert:disabled:hover,
  #btn-convert:disabled:focus {
    background: var(--color-text);
    color: var(--color-bg);
    transform: none !important;
  }
  .convert-gate {
    display: none;
    margin-top: var(--space-xs);
    margin-bottom: var(--space-6px);
    font-size: 12px;
    color: var(--color-muted);
    line-height: 1.5;
    font-weight: var(--fw-medium);
  }
  .convert-gate.visible { display: block; }
  .convert-gate .upload-stepper { margin-top: 0; margin-bottom: 10px; }
  .convert-gate-text { min-height: 18px; }

  /* Progress */
  #progress-wrap {
    display: none;
    margin-top: 20px;
  }

  #progress-wrap.visible { display: block; }

  .progress-label {
    font-size: 11px;
    color: var(--color-muted);
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
  }

  .progress-bar-bg {
    height: 3px;
    background: var(--color-section-alt);
    border-radius: 99px;
    overflow: hidden;
  }

  .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-action), var(--dark-green));
    border-radius: 99px;
    width: 0%;
    transition: width 0.3s ease;
  }

  /* Result */
  #result-card {
    display: none;
    border-color: var(--color-section-alt-strong);
    background: var(--color-section-alt);
    border-top: 3px solid var(--color-action);
  }

  #result-card.visible { display: block; }

  .result-inner {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .result-icon {
    width: 44px;
    height: 44px;
    background: var(--color-section-alt);
    border: var(--border-width-2) solid var(--color-text);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    flex-shrink: 0;
  }

  .result-icon svg {
    width: 22px;
    height: 22px;
  }

  .result-text { flex: 1; }

  .result-name {
    font-family: var(--font-primary), var(--font-fallback);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-text);
    margin-bottom: 3px;
  }

  .result-size {
    font-size: 11px;
    color: var(--color-muted);
  }

  #btn-download-usdz,
  #btn-download-glb,
  #btn-ar {
    background: transparent;
    border: var(--border-width-2) solid var(--color-text);
    color: var(--color-text);
    padding: var(--space-6px) var(--space-12px);
    border-radius: 0;
    font-family: var(--font-primary), var(--font-fallback);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-small);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    line-height: 1;
    transform: none;
  }
  #btn-download-usdz,
  #btn-download-glb {
    flex-direction: column;
    gap: 6px;
  }
  #btn-download-usdz .label-main,
  #btn-download-glb .label-main {
    display: block;
    text-align: center;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.05;
    min-height: 2.1em;
  }
  #btn-download-usdz .label-sub,
  #btn-download-glb .label-sub {
    display: block;
    margin-top: 0;
    font-size: 0.85em;
    font-weight: 500;
    opacity: 0.7;
    letter-spacing: var(--ls-normal);
    text-transform: none;
    text-align: center;
  }

  #btn-download-usdz:hover,
  #btn-download-glb:hover,
  #btn-ar:hover {
    background: var(--color-section-alt);
    color: var(--color-text);
  }

  #btn-ar:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
  }
  #btn-ar:disabled:hover,
  #btn-ar:disabled:focus {
    background: transparent;
    color: var(--color-text);
    transform: none;
  }

  /* Error */
  #error-msg {
    display: none;
    margin-top: 12px;
    background: rgba(220,60,80,0.08);
    border: 1px solid rgba(220,60,80,0.25);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 12px;
    color: #f08090;
    font-weight: var(--fw-medium);
  }

  #error-msg.visible { display: block; }

  /* Info boxes */
  .info-box {
    background: var(--color-section-alt);
    border: var(--border-width-1) solid var(--color-section-alt-strong);
    border-radius: 0;
    padding: 12px 16px;
    font-size: 11px;
    color: var(--color-muted);
    line-height: 1.6;
    margin-top: 12px;
    font-weight: var(--fw-medium);
  }

  .info-box strong { color: var(--color-action); font-weight: 500; }

  .wrapper footer {
    margin-top: var(--space-md);
    background: var(--color-section-alt);
    border: var(--border-width-1) solid var(--color-section-alt-strong);
    padding: var(--space-sm);
    text-align: left;
    font-size: var(--fs-base);
    color: var(--color-text);
    letter-spacing: var(--ls-normal);
    line-height: var(--lh-relaxed);
    font-weight: var(--fw-medium);
  }

  .footer-divider { 
    margin: var(--space-xs) 0; 
    opacity: 0.2; 
    height: 1px; 
    border: 0; 
    background: var(--color-text); 
  } 

  .footer-legal { 
    font-size: 11px; 
    color: var(--color-muted); 
  } 
  .footer-version {
    font-size: 12px;
    color: var(--color-text);
    font-weight: var(--fw-semibold);
    margin: 6px 0 0;
  }
  .footer-version a {
    font-weight: var(--fw-semibold);
  }

  .footer-cta {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: var(--border-width-1) solid var(--color-section-alt-strong);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
  }

  .footer-cta-title {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-muted);
    font-weight: var(--fw-semibold);
    margin: 0;
  }

  .footer-cta-link {
    background: transparent;
    border: var(--border-width-2) solid var(--color-text);
    color: var(--color-text);
    padding: var(--space-6px) var(--space-12px);
    border-radius: 0;
    font-family: var(--font-primary), var(--font-fallback);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-small);
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
  }

  .footer-cta-link:hover,
  .footer-cta-link:focus {
    background: var(--color-section-alt);
    text-decoration: underline;
    text-underline-offset: var(--underline-offset);
  }

  .result-actions {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }
  @media (max-width: 900px) {
    .result-actions {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-xs);
    }
    #btn-ar-wrap { grid-column: 1 / -1; }
    #btn-download-usdz,
    #btn-download-glb,
    #btn-ar {
      width: 100%;
      text-align: center;
      font-size: 15px;
      padding: 16px 14px;
      min-height: 58px;
    }
  }
  @media (max-width: 560px) {
    .result-inner {
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
    }
    .result-icon {
      width: 40px;
      height: 40px;
    }
    .result-text { width: 100%; }
    .result-actions {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-xs);
    }
    #btn-ar-wrap { grid-column: 1 / -1; }
    #btn-download-usdz,
    #btn-download-glb,
    #btn-ar {
      width: 100%;
      text-align: center;
      font-size: 14px;
      padding: 14px 16px;
      min-height: 52px;
    }
  }

  .result-size {
    font-weight: var(--fw-medium);
  }

  #mv-preview {
    display: none;
    width: 100%;
    height: 360px;
    margin-top: var(--space-sm);
    background: var(--color-section-alt);
    border: var(--border-width-2) solid var(--color-text);
  }

  #result-card.visible #mv-preview {
    display: block;
  }

  .preview-title {
    margin: var(--space-xs) 0 var(--space-6px);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-muted);
    font-weight: var(--fw-semibold);
  }

/* =============================================================================
   XReate CSS Architecture Manual

   Table of Contents
   1. Resets & Design Tokens (focus + dark tokens + aliases)
   2. App Shell (header + status + primary actions)
   3. Overlays (menu overlay + add-shape popover)
   3.5 Sheets & Media Preview (share/help + image zoom)
   4. Editor Embed & Root (host sizing + 6-column grid)
   5. Editor Panels
      5.1 Scene Tree (rows, selection state, inline rename, type badge)
      5.2 Viewport (Three.js canvas container)
      5.3 Inspector (accordion sections, field rows, controls, surface ids)
   6. Editor Overlays (tooltip + export modal + mask/doodle states)

   Why this file looks “verbose”
   - This stylesheet is intentionally documented as a living manual to reduce
     future “CSS archaeology”.
   - It aims to stay the single source of truth for color, z-index, and spacing
     behavior (prefer `gap`/padding over ad-hoc utility classes).
   ============================================================================= */

[hidden] { display: none !important; }

.xr-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =============================================================================
   1. Resets & Design Tokens
   --------------------------------------------------------------------------
   Design system strategy:
   - Define semantic tokens once in :root.
   - Keep compatibility aliases for global site tokens, but do NOT introduce
     a second “parallel” variable set inside component roots.
   - The HTML theme switcher toggles [data-theme="light|dark|auto"] on <html>.
   ============================================================================= */

/* =============================================================================
   ╔══════════════════════════════════════════════════════════════════════════╗
   ║  XREATE APP — CSS START                                                  ║
   ║  Everything above this line is inherited site-shell CSS.                 ║
   ║  Everything below is the XReate 3D editor application CSS.               ║
   ║  Do not mix concerns: site layout rules must not appear below this line, ║
   ║  and XReate component rules must not appear above it.                    ║
   ╚══════════════════════════════════════════════════════════════════════════╝
   ============================================================================= */

:root {
  --app-header-h: 64px;

  /* Color semantics (light theme baseline) */
  --surface-base: #fbf7f1;
  --surface-panel: #f5f0e8;
  --surface-panel-strong: #e9dfd2;
  --surface-overlay: rgba(0, 0, 0, 0.7);

  --text-primary: #1c1a16;
  --text-muted: rgba(28, 26, 22, 0.75);

  --stroke-subtle: rgba(28, 26, 22, 0.18);
  --stroke-strong: rgba(28, 26, 22, 0.32);

  --action-primary: #1c1a16;
  --action-primary-hover: #2a2720;

  --dialog-max-w: 1040px;
  --dialog-max-h: 820px;
  --dialog-overlay-pad: 16px;
  --dialog-surface-pad: 16px;
  --dialog-gap: 12px;

  --status-ok: #3b7a4a;
  --status-info: #3a88ff;
  --status-warning: #b58a2a;
  --status-danger: #b43c3c;
  --status-working: #1c1a16;

  /* Focus indicator — shared across all interactive editor elements */
  --focus: #1c6ef5;
  --focus-offset: 2px;

  /* Elevation / z-index scale (no magic numbers) */
  --z-base: 1;
  --z-under: 0;
  --z-raise: 2;
  --z-ui: 10;
  --z-header: 100;
  --z-popover: 500;
  --z-tooltip: 800;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-toast: 1200;
  --z-sticky-head: 1;
  --z-hud-base: 1;
  --z-hud-raise: 2;
  --z-hud-top: 3;
  --z-overlay-ui: 10;
  --z-header-raise1: calc(var(--z-header) + 1);
  --z-header-raise2: calc(var(--z-header) + 2);
  --z-header-raise3: calc(var(--z-header) + 3);

  /* UI visual consistency tokens — used by button / label / title typography and radii */
  --ui-fs-label: 12px;
  --ui-fs-title: 12px;
  --ui-fs-btn: 12px;
  --ui-fs-body: 14px;
  --ui-radius: 0;
  --ui-lh-tight: 1.1;
  --ui-lh-normal: 1.5;
  --ui-font-sans: var(--font-primary), var(--font-fallback);
  --ui-pad-hud: 10px;
  --bw-bold: 2px;
  --bw-thin: 1px;

  /* Compatibility aliases
     These map the global site token names (--color-bg, --color-text, etc.)
     to the XReate editor semantic tokens so shared components keep working.
     Do NOT add new aliases here — use the semantic tokens directly instead. */
  --color-bg: var(--surface-base);
  --color-section-alt: var(--surface-panel);
  --color-section-alt-strong: var(--surface-panel-strong);
  --color-text: var(--text-primary);
  --color-muted: var(--text-muted);
  --color-action: var(--action-primary);
  --color-action-hover: var(--action-primary-hover);
  --green: var(--status-ok);

  /* Inline SVG icons as URL-encoded data URIs.
     These are consumed via CSS masks, so icons inherit currentColor without multiple SVG variants. */
  --xr-icon-kebab: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%225%22%20r%3D%222%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2219%22%20r%3D%222%22/%3E%3C/svg%3E");
  --xr-icon-copy: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%209h11v11H9z%22/%3E%3Cpath%20d%3D%22M4%2015V4h11%22/%3E%3Cpath%20d%3D%22M4%204h11v11%22/%3E%3C/svg%3E");
  --xr-icon-trash: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207h16%22/%3E%3Cpath%20d%3D%22M10%2011v8%22/%3E%3Cpath%20d%3D%22M14%2011v8%22/%3E%3Cpath%20d%3D%22M6%207l1%2014h10l1-14%22/%3E%3Cpath%20d%3D%22M9%207V4h6v3%22/%3E%3C/svg%3E");
  --xr-icon-cloud: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2018h10a4%204%200%200%200%200-8%205%205%200%200%200-9-2%204%204%200%200%200-1%2010z%22/%3E%3C/svg%3E");
  --xr-icon-chat: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015a4%204%200%200%201-4%204H9l-6%203V7a4%204%200%200%201%204-4h10a4%204%200%200%201%204%204z%22/%3E%3C/svg%3E");
  --xr-icon-id-card: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2212%22%20r%3D%222%22/%3E%3Cpath%20d%3D%22M13%2011h6%22/%3E%3Cpath%20d%3D%22M13%2015h6%22/%3E%3C/svg%3E");
  --xr-icon-facebook: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M14%208h2V5h-2c-2.2%200-4%201.8-4%204v2H8v3h2v7h3v-7h3l1-3h-4V9c0-.55.45-1%201-1z%22/%3E%3C/svg%3E");
  --xr-icon-up: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2019V5%22/%3E%3Cpath%20d%3D%22M6%2011l6-6%206%206%22/%3E%3C/svg%3E");
  --xr-icon-down: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14%22/%3E%3Cpath%20d%3D%22M6%2013l6%206%206-6%22/%3E%3C/svg%3E");
  --xr-icon-chevron-down: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22/%3E%3C/svg%3E");
  --xr-icon-grip-vertical: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%221.5%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2212%22%20r%3D%221.5%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2217%22%20r%3D%221.5%22/%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%227%22%20r%3D%221.5%22/%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2212%22%20r%3D%221.5%22/%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2217%22%20r%3D%221.5%22/%3E%3C/svg%3E");
  --xr-icon-x: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M18.3%205.71a1%201%200%200%200-1.41%200L12%2010.59%207.11%205.7a1%201%200%200%200-1.41%201.41L10.59%2012l-4.89%204.89a1%201%200%201%200%201.41%201.41L12%2013.41l4.89%204.89a1%201%200%200%200%201.41-1.41L13.41%2012l4.89-4.89a1%201%200%200%200%200-1.4z%22/%3E%3C/svg%3E");
  --xr-icon-eye: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2012s4-7%2010-7%2010%207%2010%207-4%207-10%207-10-7-10-7z%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22/%3E%3C/svg%3E");
  --xr-icon-eye-off: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2012s4-7%2010-7%2010%207%2010%207-4%207-10%207-10-7-10-7z%22/%3E%3Cpath%20d%3D%22M4%204l16%2016%22/%3E%3C/svg%3E");
  --xr-icon-lock: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%226%22%20y%3D%2211%22%20width%3D%2212%22%20height%3D%2210%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M8%2011V8a4%204%200%201%201%208%200v3%22/%3E%3C/svg%3E");
  --xr-icon-link: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%228%22%20rx%3D%222%22/%3E%3Crect%20x%3D%2211%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%228%22%20rx%3D%222%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%228%22%20x2%3D%2212%22%20y2%3D%2216%22/%3E%3C/svg%3E");
  --xr-icon-alert-triangle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.3%203.4L1.8%2018.2A2%202%200%200%200%203.5%2021h17a2%202%200%200%200%201.7-2.8L13.7%203.4a2%202%200%200%200-3.4%200z%22/%3E%3Cpath%20d%3D%22M12%209v4%22/%3E%3Cpath%20d%3D%22M12%2017h.01%22/%3E%3C/svg%3E");
}

html[data-theme="light"],
html[data-theme="dark"],
html[data-theme="auto"] {
  --color-bg: var(--surface-base);
  --color-section-alt: var(--surface-panel);
  --color-section-alt-strong: var(--surface-panel-strong);
  --color-text: var(--text-primary);
  --color-muted: var(--text-muted);
  --color-action: var(--action-primary);
  --color-action-hover: var(--action-primary-hover);
  --green: var(--status-ok);
}

html[data-theme="dark"] {
  --surface-base: #1a1814;
  --surface-panel: #211f1b;
  --surface-panel-strong: #2c2924;

  --text-primary: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.88);

  --stroke-subtle: rgba(255, 255, 255, 0.18);
  --stroke-strong: rgba(255, 255, 255, 0.32);

  --action-primary: #ffffff;
  --action-primary-hover: #f5f5f5;

  --status-ok: #5fbe7a;
  --status-info: #6aabff;
  --status-warning: #e0b050;
  --status-danger: #e06060;
  --status-working: #ffffff;

  --surface-overlay: rgba(0, 0, 0, 0.82);

  --focus: #4d9fff;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --surface-base: #1a1814;
    --surface-panel: #211f1b;
    --surface-panel-strong: #2c2924;

    --text-primary: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.88);

    --stroke-subtle: rgba(255, 255, 255, 0.18);
    --stroke-strong: rgba(255, 255, 255, 0.32);

    --action-primary: #ffffff;
    --action-primary-hover: #f5f5f5;

    --status-ok: #5fbe7a;
    --status-info: #6aabff;
    --status-warning: #e0b050;
    --status-danger: #e06060;
    --status-working: #ffffff;

    --surface-overlay: rgba(0, 0, 0, 0.82);

    --focus: #4d9fff;
  }
}

/* =============================================================================
   TRAE — UI Mode Visibility System (centralised, no JS display toggles)
   Single source of truth: <html data-ui-mode="draft3d|texture"> set by XR.TRAE.setMode()
   Declaration-based: elements opt-in via data-ui-mode="draft3d texture global" (space list)
   :where() keeps specificity at 0 so [hidden] and JS-driven class toggles still win.
   ============================================================================= */
:root[data-ui-mode="draft3d"] *:where([data-ui-mode~="texture"]) {
  display: none !important;
}
:root[data-ui-mode="texture"] *:where([data-ui-mode~="draft3d"]) {
  display: none !important;
}
/* data-ui-mode="global" (or no explicit data-ui-mode on an element) is NEVER hidden
   by the two rules above — the selector only targets the *other* mode token.
   Elements without data-ui-mode attr are treated as global (always visible). */

/* Portfolio CSS section::after (L579) paints a 2px full-width accent line on every <section>.
   XReate editor panels use <section>/<aside> tags (viewport=section, others=aside) so the
   portfolio rule bleeds into the editor as a random 2px line. Reset explicitly for editor. */
:root .xr-editor section::after,
:root .xr-editor section::before,
:root .xr-editor aside::after,
:root .xr-editor aside::before,
:root .xr-editor .xr-panel-viewport::after,
:root .xr-editor .xr-panel-viewport::before,
:root .xr-editor .xr-panel-tree::after,
:root .xr-editor .xr-panel-tree::before,
:root .xr-editor .xr-panel-surface::after,
:root .xr-editor .xr-panel-surface::before,
:root .xr-editor .xr-panel-inspector::after,
:root .xr-editor .xr-panel-inspector::before {
  content: none !important;
  display: none !important;
  height: 0 !important;
  width: 0 !important;
  background: none !important;
  background-color: transparent !important;
  position: static !important;
  pointer-events: none !important;
}

/* =============================================================================
   TRAE — UI Mode Layout Reallocation (no empty grid lanes, no wasted space)
   Default layout 6-col grid "tree | viewport×3 | surface | inspector" has fixed
   lanes. XR.TRAE.setMode() hides other-mode panels via display:none (above rules),
   but CSS Grid keeps the lanes → massive empty space.
   Fix: redefine grid-template per each active mode so remaining panels fill 100%.
   ============================================================================= */

/* --- TEXTURE MODE: 4 equal columns × 1/4 each.
     Tree (1/4) + Viewport3D (1/4) + Surface UV preview + layers (1/4) + Texture controls/inspector (1/4).
     CRITICAL invariant: ALL grid-template-areas MUST name exactly 4 tokens (tree viewport surface inspector)
     so that panels never fall into an implicit 2nd row that collapses height to 0. --- */
:root[data-ui-mode="texture"] .xr-editor .xr-editor-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "tree viewport surface inspector";
}
/* Surface internal grid at 1/4 width: collapse the previous 2-col split (UV-left / controls-right)
   because the 4th column (inspector area) now hosts all non-drawer texture controls.
   UV preview fills 100% width + 1:1 square, texture children stack vertically below it. */
:root[data-ui-mode="texture"] .xr-panel-surface #inspector-surface-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  padding-right: var(--space-sm);
}
:root[data-ui-mode="texture"] .xr-panel-surface #drawWrap {
  width: 100%;
  min-width: 0;
  min-height: 280px;
  aspect-ratio: 1 / 1;
  height: auto;
  max-height: none;
  align-self: stretch;
  justify-self: stretch;
  border: var(--bw-thin) solid var(--stroke-subtle);
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  display: block !important;
}
/* All texture controls inside surface (non drawWrap direct children)
   now flow vertically inside the 1/4 Surface column. Inspector column (4th 1/4)
   remains visible via data-ui-mode="texture" overrides in later rules. */
:root[data-ui-mode="texture"] .xr-panel-surface #inspector-surface-body > *:not(#drawWrap) {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/* Force #drawWrap canvas to fill its parent 1:1 preview area */
:root[data-ui-mode="texture"] .xr-panel-surface #drawWrap canvas {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  position: absolute;
  inset: 0;
}

/* --- DRAFT3D MODE: 3-column layout expressed inside 4-area invariant grid.
     Tree (1/4) + Viewport3D (2/4, double) + Surface 0fr collapsed hidden + Inspector Volume/Transform (1/4).
     Total fractions = 1+2+0+1 = 4 quarters. --- */
:root[data-ui-mode="draft3d"] .xr-editor .xr-editor-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 0fr) minmax(0, 1fr);
  grid-template-areas: "tree viewport surface inspector";
}
:root[data-ui-mode="draft3d"] .xr-editor.is-uvwide .xr-editor-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 0fr) minmax(0, 1fr);
  grid-template-areas: "tree viewport surface inspector";
}

/* =============================================================================
   TRAE — Smooth Mode Transitions (transitionable hide, no display:none jank)
   Display:none prevents CSS transitions entirely, so we override it ONLY for
   the 4 editor panels and use opacity + min/max-width + visibility instead.
   Uses cubic-bezier Material Design standard ease-out curve.
   ============================================================================= */

/* Base transition declaration for every panel.
   IMPORTANT: grid items in a 1fr row MUST NOT have translateZ() / will-change as a
   baseline — Chrome/Safari have a sizing bug where a promoted paint layer collapses the
   intrinsic height contribution to the grid row. Only add transform/translateX inside
   the explicit HIDE / ACTIVE state rules below. */
.xr-editor .xr-panel-tree,
.xr-editor .xr-panel-viewport,
.xr-editor .xr-panel-surface,
.xr-editor .xr-panel-inspector {
  height: 100%;
  min-height: 0;
  transition:
    opacity 280ms cubic-bezier(0.4, 0, 0.2, 1),
    min-width 320ms cubic-bezier(0.4, 0, 0.2, 1),
    max-width 320ms cubic-bezier(0.4, 0, 0.2, 1),
    width 320ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 280ms step-end,
    transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 220ms ease,
    padding 320ms cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

/* --- Draft3d mode HIDE surface panel (was display:none → now transitionable collapse) --- */
:root[data-ui-mode="draft3d"] .xr-editor .xr-panel-surface {
  display: block !important;
  opacity: 0 !important;
  visibility: hidden !important;
  min-width: 0 !important;
  max-width: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  border-width: 0 !important;
  padding: 0 !important;
  transform: translateX(20px) !important;
  transition-delay: 0ms;
}

/* --- Texture mode HIDE inspector panel (was display:none → now transitionable collapse)
     NEW in 1/4 each layout: Inspector column VISIBLE in TEXTURE mode.
     This rule is intentionally a NO-OP (preserves backward compat with any JS
     driven toggles) — all 4 columns are visible in Texture mode now. --- */
:root[data-ui-mode="texture"] .xr-editor .xr-panel-inspector {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(0) !important;
  transition-delay: 80ms, 0ms, 0ms, 0ms, 80ms, 0ms;
  pointer-events: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  border-width: var(--bw-thin) !important;
}

/* --- ACTIVE visible state: restore transform to identity, delay opacity fade-in so
   grid expansion happens first (prevents text wrap / reflow mid-animation) --- */
:root[data-ui-mode="texture"] .xr-editor .xr-panel-surface {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(0) !important;
  transition-delay: 80ms, 0ms, 0ms, 0ms, 80ms, 0ms;
  pointer-events: auto !important;
  width: auto !important;
  border-width: var(--bw-thin) !important;
}
:root[data-ui-mode="draft3d"] .xr-editor .xr-panel-inspector {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(0) !important;
  transition-delay: 80ms, 0ms, 0ms, 0ms, 80ms, 0ms;
  pointer-events: auto !important;
  width: auto !important;
  border-width: var(--bw-thin) !important;
}

/* =============================================================================
   TRAE — Responsive Hardening: COMPOSITION (.xr-panel-tree) NEVER HIDDEN
   Requirement: keep Composition visible during responsive layouts. This removes
   the fixed off-screen drawer pattern.

   SPLIT RESPONSIVE UX REFACTOR:
   - COMPACT (1160–1727px): tree in a four-column grid.
   - FOCUSED (≤1159px): tree becomes floating left-sheet (handled in its own block).
   ============================================================================= */

/* ---------- COMPACT MODE (1160px ≤ width ≤ 1727px): 3/4-col inline grid ---------- */
@media (max-width: 1727px) and (min-width: 1160px) {
  /* Undo drawer fixed positioning → restore in-flow grid item */
  .xr-editor .xr-panel-tree {
    position: relative !important;
    transform: translateX(0) !important;
    width: auto !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    border-right: 1px solid var(--stroke-subtle) !important;
    box-shadow: none !important;
    z-index: auto !important;
    grid-area: tree !important;
  }

  /* Surface HIDDEN in Draft3D / Default mode on Compact (not Texture).
     DECLARED BEFORE grid-templates, EXPLICITLY OVERRIDDEN BY Texture rule below
     via cascade order (both specificity equal, Texture rule declared LAST wins). */
  :not(:root[data-ui-mode="texture"]) .xr-editor .xr-panel-surface {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Default (no explicit mode) layout Compact: restore tree, keep 4-col balanced for mixed usage.
     ALWAYS 4 tokens: tree viewport surface inspector — no implicit 2nd row. */
  :not(:root[data-ui-mode]) .xr-editor .xr-editor-layout {
    grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr) minmax(0, 0fr) minmax(0, 1fr) !important;
    grid-template-areas: "tree viewport surface inspector" !important;
  }

  /* Draft3D mode Compact: 1/4 + 2/4 + 0 + 1/4 — 3 visible quarters. */
  :root[data-ui-mode="draft3d"] .xr-editor .xr-editor-layout,
  :root[data-ui-mode="draft3d"] .xr-editor.is-uvwide .xr-editor-layout {
    grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr) minmax(0, 0fr) minmax(0, 1fr) !important;
    grid-template-areas: "tree viewport surface inspector" !important;
  }

  /* Texture mode Compact: 1/4 + 1/4 + 1/4 + 1/4 — 4 equal quarters.
     NOTE: MUST BE DECLARED AFTER non-texture Surface hidden rule so cascade
     restores Surface to visible in Texture mode (both specificity equal, later wins). */
  :root[data-ui-mode="texture"] .xr-editor .xr-editor-layout {
    grid-template-columns: minmax(180px, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas: "tree viewport surface inspector" !important;
  }
  /* Texture mode Compact — FORCE Surface visible (overrides the non-texture hide above,
     specificity identical, declared later so cascade wins). Also undoes every property
     that the non-Texture hidden rule suppressed. */
  :root[data-ui-mode="texture"] .xr-editor .xr-panel-surface {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    border-left: 1px solid var(--stroke-subtle) !important;
    border-right: 1px solid var(--stroke-subtle) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Compact tree: slightly reduced paddings to preserve vertical space (task-friendly) */
  .xr-editor .xr-panel-tree > .xr-mobile-panel-body {
    padding: 8px 10px !important;
  }

  /* Scene overlay no longer needed (was dark backdrop for drawer tree open) */
  .xr-editor .xr-scene-overlay {
    display: none !important;
  }
}

/* ---------- FOCUSED MODE (≤1159px): tree becomes left-sheet (see Task 5 block) ----------
   The grid collapse to single-column + sheet floating is handled in the UI39 T5 updated block.
   Here we only disable the legacy drawer overlay positioning override since tree is no longer
   in the main grid flow (its position:fixed sheet rule is in the Focused block below). */
@media (max-width: 1159px) {
  .xr-editor .xr-scene-overlay {
    display: none !important;
  }
}

/* =============================================================================
   TRAE — Mode Selector Bar (between fixed header and dynamic editor columns)
   Container row lives inside <main>, as the first flex child, so the Drawing Mode
   toggle visually sits directly above the dynamic grid columns (tree/viewport/surface/inspector).
   This makes it explicit that the switch drives the layout columns below it.
   ============================================================================= */
/* Mode Bar: split layout left/right.
   LEFT: ADD VOLUME + EXPORT (extreme left, flex-start).
   RIGHT: DRAWING MODE label + 3DDRAFT/TEXTURE tabstrip (extreme right, flex-end).
   Use justify-content: space-between so left group hugs margin-left and right group hugs margin-right,
   with gap-less fluid empty space in the middle. */
.xr-mode-bar {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-bg);
  border-bottom: var(--bw-thin) solid var(--stroke-subtle);
  box-sizing: border-box;
  z-index: calc(var(--z-header) - 10);
}

/* Left group: ADD VOLUME + EXPORT buttons — ordered in a row with button-style gap. */
.xr-mode-bar__left {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
  flex: 0 0 auto;
}

/* Right group: DRAWING MODE label + tabstrip — keep row compact. */
.xr-mode-bar__right {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}

.xr-mode-bar__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 10px 0 0;
  margin: 0;
  border: 0;
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-label);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  background: transparent;
  opacity: 0.88;
  cursor: default;
  pointer-events: none;
  flex: 0 0 auto;
  user-select: none;
  -webkit-user-select: none;
}

/* =============================================================================
   TRAE — Mode Selector Tablist
   Lives in .xr-mode-bar, between header and the dynamic editor column grid.
   Apple Finder / classic tab style: pill segmented control, angoli 0,
   active tab uses solid --action-primary fill, inactive = transparent with border.
   ============================================================================= */
#trae-mode-selector {
  display: inline-flex;
  align-items: center;
  height: 34px;
  border: var(--bw-bold) solid var(--color-text);
  border-radius: var(--ui-radius);
  background: var(--surface-panel);
  padding: 0;
  gap: 0;
  flex: 0 0 auto;
}

#trae-mode-selector > button {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  border-right: var(--bw-thin) solid var(--color-text);
  color: var(--text-muted);
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-btn);
  font-weight: 700;
  line-height: 1;
  padding: 0 14px;
  height: 100%;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
  border-radius: var(--ui-radius);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

#trae-mode-selector > button:last-child {
  border-right: 0;
}

#trae-mode-selector > button:hover {
  background: var(--surface-panel-strong);
  color: var(--text-primary);
}

#trae-mode-selector > button.is-active,
#trae-mode-selector > button[aria-selected="true"] {
  background: var(--action-primary);
  color: var(--surface-base);
  border-right-color: var(--action-primary);
}

#trae-mode-selector > button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: var(--focus-offset);
}

/* =============================================================================
   XReate visual consistency fixes
   ============================================================================= */

/* Fix: share tiles use 16px rounded radius — XReate is 0 radius everywhere.
   Scoped to .xr-sheet-overlay so we never touch the legacy portfolio CSS above L3842. */
.xr-sheet-overlay .xr-share-tile {
  border-radius: var(--ui-radius);
}

/* Fix: global #error-msg used 8px radius — normalise to 0 when inside XReate app scope.
   Falls back cleanly if portfolio uses #error-msg elsewhere (that CSS still wins). */
.xr-app #error-msg {
  border-radius: var(--ui-radius);
}

html, body {
  height: 100%;
  width: 100%;
  max-width: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.xr-init-error {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-modal);
  background: var(--status-danger);
  color: #ffffff;
  padding: 10px 12px;
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-btn);
  line-height: 1.4;
  border-bottom: var(--border-width-2) solid var(--color-text);
}

/* =============================================================================
   2. App Shell
   --------------------------------------------------------------------------
   Description: Fixed header (z-index: --z-header, 100) to stay above the
   Three.js canvas. Holds brand/title, status line, and primary action buttons.
   .xr-btn is the button primitive reused in popovers and menus. SVG icons are
   rendered as CSS masks so they inherit currentColor without multiple variants.
   ============================================================================= */

.xr-app {
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.xr-app > main {
  height: 100vh;
  height: 100dvh;
  width: 100%;
  padding-top: var(--app-header-h);
  box-sizing: border-box;
  overflow: hidden;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* Small, persistent product attribution. It remains readable without taking
   focus or space from the editor, and stays clear of the bug-report control. */
.xr-app-footer {
  position: fixed;
  z-index: 4;
  inset-inline: 64px;
  bottom: max(-6px, env(safe-area-inset-bottom));
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 58%, var(--color-bg));
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.025em;
  line-height: 1.25;
  text-align: center;
  pointer-events: none;
}

.xr-app main > section {
  padding: 0;
  scroll-margin-top: 0;
}

.xr-app main > section::after,
.xr-app main > section:nth-of-type(even)::before {
  content: none;
}

.xr-editor-section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.xr-editor-section .xr-editor-embed {
  flex: 1;
  min-height: 0;
}

/* Header — isolated stacking context; z-index uses --z-header (100).
   Max-width cap at 1920px: a full-bleed fixed header wrapper centers an inner
   `.xr-header__content` shell that matches the editor embed width below.
   Left group = Brand + toolbar (Add Volume, Export).
   Right group = Drawing Mode (label + tabs) + vertical divider + Menu.
   Viewports >1920px cap the inner shell and center it via `margin: 0 auto`.
   Viewports <1920px stay fully fluid (min). */
.xr-app > .xr-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--app-header-h);
  display: block;
  width: 100vw;
  max-width: none;
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  border-bottom: var(--border-width-2) solid var(--color-text);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: var(--z-header);
}
.xr-app > .xr-header .xr-header__content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 100%;
  width: min(100vw, 1920px);
  max-width: 1920px;
  margin: 0 auto;
  padding: var(--space-xs) var(--space-sm);
  box-sizing: border-box;
  background: var(--color-bg);
}

html[dir="rtl"] .xr-app > .xr-header {
  flex-direction: row-reverse;
}

.xr-app > .xr-header .xr-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

html[dir="rtl"] .xr-app > .xr-header .xr-header__brand {
  flex-direction: row-reverse;
}

.xr-app > .xr-header .xr-logo {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-body);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
}

.xr-app > .xr-header .xr-logo-mark {
  width: 24px;
  height: 24px;
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
}

.xr-app > .xr-header .xr-header__claim {
  display: flex;
  align-items: center;
  min-width: 0;
}

.xr-app > .xr-header .xr-header__tagline {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-label);
  color: var(--text-muted);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(420px, 38vw);
}

.xr-app > .xr-header .xr-header__dedication {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.xr-app > .xr-header .xr-project-name {
  height: 34px;
  padding: 0 10px;
  background: transparent;
  border: var(--border-width-1) solid var(--color-text);
  color: var(--color-text);
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-title);
  letter-spacing: 0.04em;
  text-transform: none;
  cursor: text;
  max-width: min(220px, 30vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xr-app > .xr-header .xr-project-name:hover {
  background: var(--color-section-alt);
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 3px;
}

.xr-app > .xr-header .xr-project-name-input {
  height: 34px;
  padding: 0 10px;
  background: transparent;
  border: var(--border-width-2) solid var(--color-text);
  border-radius: 0;
  color: var(--color-text);
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-btn);
  letter-spacing: 0.03em;
  text-transform: none;
  width: min(220px, 44vw);
}

.xr-menu .xr-project-name--menu {
  width: 100%;
  max-width: none;
  text-align: left;
}

.xr-menu .xr-project-name,
.xr-menu .xr-project-name-input {
  height: 34px;
  padding: 0 10px;
  background: transparent;
  border: var(--border-width-2) solid var(--color-text);
  border-radius: 0;
  color: var(--color-text);
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-btn);
  letter-spacing: 0.03em;
  text-transform: none;
  width: 100%;
}

.xr-app > .xr-header .xr-header__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

html[dir="rtl"] .xr-app > .xr-header .xr-header__actions {
  flex-direction: row-reverse;
}

/* =============================================================================
   Merged single-row header layout (UI16+)
   Brand + primary actions (Add Volume, Export) live on the LEFT.
   Drawing mode tabstrip, vertical divider, and Menu live on the RIGHT.
   ============================================================================= */

.xr-app > .xr-header .xr-header__left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  min-width: 0;
  flex: 1 1 auto;
}

html[dir="rtl"] .xr-app > .xr-header .xr-header__left {
  flex-direction: row-reverse;
}

.xr-app > .xr-header .xr-header__toolbar {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 0 0 auto;
}

html[dir="rtl"] .xr-app > .xr-header .xr-header__toolbar {
  flex-direction: row-reverse;
}

.xr-app > .xr-header .xr-header__right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-width: 0;
}

html[dir="rtl"] .xr-app > .xr-header .xr-header__right {
  flex-direction: row-reverse;
}

.xr-app > .xr-header .xr-header__mode-group {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 0 0 auto;
}

html[dir="rtl"] .xr-app > .xr-header .xr-header__mode-group {
  flex-direction: row-reverse;
}

.xr-app > .xr-header .xr-header__divider {
  align-self: center;
  flex: 0 0 auto;
  width: 1px;
  height: 34px;
  background-color: var(--text-primary);
}

/* Hide the header tagline at narrow widths (<=880px) so the merged row stays on one line. */
@media (max-width: 880px) {
  .xr-app > .xr-header .xr-header__tagline {
    display: none;
  }
}

/* Very narrow screens (<=720px) also hide Drawing Mode TEXT label, keep only the tab buttons. */
@media (max-width: 720px) {
  .xr-app > .xr-header .xr-mode-bar__label {
    display: none;
  }
  .xr-app > .xr-header .xr-header__left {
    gap: 10px;
  }
  .xr-app > .xr-header .xr-header__toolbar {
    gap: 6px;
  }
  .xr-app > .xr-header .xr-header__right {
    gap: 6px;
  }
}

.xr-skip-link {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: var(--z-header-raise3);
  padding: 10px 12px;
  background: var(--color-bg);
  color: var(--color-text);
  border: var(--border-width-2) solid var(--color-text);
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-title);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: translateY(-200%);
  transition: transform 0.12s;
}

.xr-skip-link:focus {
  transform: translateY(0);
}

.xr-app > .xr-header #btn-scene {
  display: none;
}

/* .xr-btn — button primitive reused across actions, popovers and menus */
.xr-btn {
  height: auto;
  padding: 8px 12px;
  background: transparent;
  border: var(--border-width-2) solid var(--color-text);
  border-radius: var(--ui-radius);
  color: var(--color-text);
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-btn);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  box-sizing: border-box;
}

.xr-btn__label {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* SVG icons as CSS masks — color comes from background-color: currentColor */
.xr-btn__icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 16px 16px;
  mask-size: 16px 16px;
  -webkit-mask-position: center;
  mask-position: center;
}

.xr-btn__icon[data-xr-icon="kebab"] {
  -webkit-mask-image: var(--xr-icon-kebab);
  mask-image: var(--xr-icon-kebab);
}

.xr-btn__icon[data-xr-icon="chevron-down"] {
  -webkit-mask-image: var(--xr-icon-chevron-down);
  mask-image: var(--xr-icon-chevron-down);
}

.xr-btn__icon[data-xr-icon="grip-vertical"] {
  -webkit-mask-image: var(--xr-icon-grip-vertical);
  mask-image: var(--xr-icon-grip-vertical);
}

.xr-btn__icon[data-xr-icon="copy"] {
  -webkit-mask-image: var(--xr-icon-copy);
  mask-image: var(--xr-icon-copy);
}

.xr-btn__icon[data-xr-icon="trash"] {
  -webkit-mask-image: var(--xr-icon-trash);
  mask-image: var(--xr-icon-trash);
}

.xr-btn__icon[data-xr-icon="up"] {
  -webkit-mask-image: var(--xr-icon-up);
  mask-image: var(--xr-icon-up);
}

.xr-btn__icon[data-xr-icon="down"] {
  -webkit-mask-image: var(--xr-icon-down);
  mask-image: var(--xr-icon-down);
}

.xr-btn__icon[data-xr-icon="link"] {
  -webkit-mask-image: var(--xr-icon-link);
  mask-image: var(--xr-icon-link);
}

.xr-editor #btn-clear-local-data::before {
  content: '';
  width: 14px;
  height: 14px;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-image: var(--xr-icon-alert-triangle);
  mask-image: var(--xr-icon-alert-triangle);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 14px 14px;
  mask-size: 14px 14px;
  -webkit-mask-position: center;
  mask-position: center;
}

.xr-export-group {
  position: relative;
  display: inline-flex;
}

.xr-export-trigger {
  gap: 8px;
}

.xr-export-item {
  width: 100%;
  justify-content: flex-start;
}

.xr-export-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--color-bg);
  border: var(--border-width-2) solid var(--color-text);
  display: flex;
  flex-direction: column;
  z-index: var(--z-popover);
  min-width: 160px;
}

.xr-export-dropdown .xr-btn {
  width: 100%;
  justify-content: flex-start;
  border: none;
  border-bottom: var(--border-width-1) solid var(--color-section-alt-strong);
  height: 38px;
  padding: 0 14px;
  text-transform: none;
  letter-spacing: 0.02em;
}

.xr-export-dropdown .xr-btn:last-child { border-bottom: none; }
.xr-export-dropdown .xr-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.xr-btn:hover {
  background: var(--color-section-alt);
}

.xr-btn:active {
  background: var(--color-section-alt-strong);
}

.xr-btn.xr-btn--primary {
  background: var(--color-action);
  border-color: var(--color-action);
  color: var(--color-bg);
}

.xr-btn.xr-btn--primary:hover {
  background: var(--color-action-hover);
  border-color: var(--color-action-hover);
}

.xr-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.xr-btn.is-danger {
  border-color: var(--status-danger);
  color: var(--status-danger);
}

.xr-btn.is-danger:hover {
  background: rgba(180, 60, 60, 0.10);
}

.xr-btn.is-danger:active {
  background: rgba(180, 60, 60, 0.18);
}

.xr-modal__btn.is-danger {
  border-color: var(--status-danger);
  color: var(--status-danger);
}

.xr-modal__btn.is-danger:hover {
  background: rgba(180, 60, 60, 0.10);
}

.xr-modal__btn.is-danger:active {
  background: rgba(180, 60, 60, 0.18);
}

/* Status line (header).
   - Always visible: must truncate safely and avoid intercepting pointer events.
   - Modifiers (`.is-ok`, `.is-working`, …) are applied by JS via setStatus(). */
.xr-status {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-title);
  color: var(--color-muted);
  letter-spacing: 0.06em;
  text-transform: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xr-status.is-ok { color: var(--status-ok); }
.xr-status.is-working { color: var(--status-working); }

.xr-editor .xr-status.xr-status--viewport {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  max-width: min(34ch, calc(100% - 0px));
  text-align: left;
  padding: 6px 10px;
  background: var(--surface-panel);
  border: 1px solid var(--stroke-subtle);
  color: var(--color-text);
  pointer-events: none;
  user-select: none;
}

.xr-toasts {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  max-width: min(520px, calc(100% - 24px));
}

.xr-toast {
  pointer-events: auto;
  position: relative;
  width: max-content;
  max-width: 100%;
  padding: 10px 36px 10px 12px;
  background: var(--color-bg);
  border: var(--border-width-2) solid var(--color-text);
  color: var(--color-text);
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-title);
  letter-spacing: 0.06em;
  text-align: left;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.xr-toast__msg {
  white-space: pre-wrap;
}

.xr-toast__actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.xr-toast__action {
  height: 28px;
  padding: 0 10px;
  border: var(--border-width-2) solid var(--color-text);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-title);
  letter-spacing: 0.06em;
  cursor: pointer;
}

.xr-toast__action:hover {
  background: var(--color-section-alt);
}

.xr-toast__dismiss {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.xr-toast.is-ok,
.xr-toast.is-success { border-color: var(--status-ok); }

.xr-toast.is-working,
.xr-toast.is-info { border-color: var(--status-info); }

.xr-toast.is-warning { border-color: var(--status-warning); }

.xr-toast.is-danger,
.xr-toast.is-error { border-color: var(--status-danger); }

.app-credits-badge-link {
  height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  background: transparent;
  border: var(--border-width-2) solid var(--color-text);
  color: var(--color-text);
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-title);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
 }

.app-credits-badge-link:hover {
  background: var(--color-section-alt);
 }

/* =============================================================================
   3. Overlays (Menu + Add Shape Popover)
   --------------------------------------------------------------------------
   Description: Two overlays with similar mechanics: the app menu (fullscreen
   drawer) and the “Add Shape” popover (primitive list). Both rely on [hidden]
   for visibility and are toggled via JS. The popover uses --z-popover to sit
   above the canvas but below true modal surfaces.
   ============================================================================= */

.xr-menu-overlay {
  position: fixed;
  inset: 0;
  background: var(--surface-overlay);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--dialog-overlay-pad);
}

.xr-add-shape {
  position: fixed;
  z-index: var(--z-popover);
}

.xr-add-shape__surface {
  width: min(640px, calc(100vw - 16px));
  max-height: calc(100vh - 74px);
  overflow: auto;
  background: var(--color-bg);
  border: var(--border-width-2) solid var(--color-text);
}

.xr-add-shape__cat {
  padding: 10px 12px 8px;
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-label);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  border-bottom: var(--border-width-1) solid var(--color-text);
}

.xr-add-shape__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  padding: 10px 12px 14px;
}

.xr-add-shape__item {
  aspect-ratio: 1 / 1;
  width: 100%;
  padding: 10px;
  border-radius: 0;
  border: var(--border-width-2) solid var(--color-text);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-btn);
  color: var(--color-text);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.xr-add-shape__item:hover {
  background: var(--color-section-alt);
}

.xr-add-shape__icon {
  width: 34px;
  height: 34px;
  display: block;
}

.xr-add-shape__item span {
  font-weight: 800;
  letter-spacing: 0.02em;
}

.xr-menu {
  width: min(var(--dialog-max-w), calc(100vw - (var(--dialog-overlay-pad) * 2)));
  max-height: min(var(--dialog-max-h), calc(100vh - (var(--dialog-overlay-pad) * 2)));
  overflow: auto;
  background: var(--surface-panel);
  border: 1px solid var(--stroke-strong);
  display: flex;
  flex-direction: column;
}

.xr-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--stroke-subtle);
  position: sticky;
  top: 0;
  background: inherit;
  z-index: var(--z-sticky-head);
}

.xr-menu__title {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-title);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.xr-icon-btn,
.xr-menu__close,
.xr-sheet__close,
.xr-image__close {
  height: 30px;
  width: 30px;
  border: var(--border-width-1) solid var(--color-text);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  font-size: 18px;
  font-weight: 900;
}

.xr-icon-btn::before,
.xr-icon-btn:empty::before {
  content: '';
  width: 14px;
  height: 14px;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-image: var(--xr-icon-x);
  mask-image: var(--xr-icon-x);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 14px 14px;
  mask-size: 14px 14px;
  -webkit-mask-position: center;
  mask-position: center;
}

.xr-menu__close,
.xr-sheet__close,
.xr-image__close {
  position: relative;
  font-size: 0;
}

.xr-menu__close::before,
.xr-menu__close::after,
.xr-sheet__close::before,
.xr-sheet__close::after,
.xr-image__close::before,
.xr-image__close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background: currentColor;
  transform-origin: center;
}

.xr-menu__close::before,
.xr-sheet__close::before,
.xr-image__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.xr-menu__close::after,
.xr-sheet__close::after,
.xr-image__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.xr-menu__body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.xr-menu__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.xr-menu-tab {
  appearance: none;
  border: var(--border-width-2) solid var(--color-text);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-title);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 10px;
  cursor: pointer;
}

.xr-menu-tab.is-active {
  background: var(--color-text);
  color: var(--color-bg);
}

.xr-menu__sections {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.xr-menu__section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.xr-menu__split {
  display: grid;
  grid-template-columns: minmax(300px, 380px) 1px minmax(320px, 1fr);
  gap: 14px;
  align-items: start;
}

.xr-menu__left {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.xr-menu__divider {
  width: 1px;
  background: var(--stroke-subtle);
  align-self: stretch;
}

@media (max-width: 620px) {
  .xr-menu__split {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1px auto !important;
    gap: 10px !important;
  }
  .xr-menu__split > .xr-menu__divider {
    width: 100% !important;
    height: 1px !important;
    min-height: 1px !important;
    align-self: center !important;
  }
}

.xr-menu__right {
  min-width: 0;
}

.xr-menu__right p {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-btn);
  line-height: 1.55;
  color: var(--color-text);
  margin: 10px 0;
}

.xr-menu__right .xr-about-note {
  font-size: var(--ui-fs-title);
  line-height: 1.6;
  color: var(--color-muted);
}

.xr-menu__right .xr-app-tagline {
  margin-top: 0;
}

.xr-menu__about {
  max-inline-size: 920px;
  margin-inline: auto;
  padding: clamp(18px, 3vw, 34px) !important;
}

.xr-menu__about p {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-primary), var(--font-fallback);
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: var(--fw-normal);
  line-height: 1.68;
  letter-spacing: 0.002em;
}

.xr-menu__about .xr-app-tagline {
  color: var(--color-text);
  font-size: clamp(18px, 1.45vw, 22px);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  letter-spacing: -0.012em;
}

.xr-menu__about .xr-about-note + .xr-about-note,
.xr-menu__about .xr-about-author + .xr-about-note {
  margin-top: 13px;
}

.xr-menu__about .xr-about-note {
  color: color-mix(in srgb, var(--color-text) 82%, var(--color-bg));
}

.xr-menu__about .xr-about-author {
  margin-top: 17px;
  font-weight: var(--fw-medium);
}

.xr-menu__about .xr-about-epigraph {
  margin: 28px 0 4px;
  padding: 18px 22px 20px;
  border-left: 4px solid var(--color-action);
  background: color-mix(in srgb, var(--surface-panel) 88%, var(--color-bg));
  color: var(--color-text);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 1.45vw, 22px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.58;
  letter-spacing: -0.008em;
}

.xr-menu__about .xr-about-epigraph p + p {
  margin-top: 18px;
}

.xr-menu__right hr,
.xr-menu__about hr {
  margin: 22px 0;
  border: 0;
  border-top: 1px solid var(--stroke-subtle);
}

.xr-menu__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.xr-menu__row {
  display: flex;
  flex-direction: row;
  gap: 8px;
  flex-wrap: wrap;
}

.xr-menu__label {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-title);
  color: var(--color-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}

.xr-select {
  width: 100%;
  max-width: none;
  height: 34px;
  padding: 0 34px 0 10px;
  background: var(--color-bg);
  border: var(--border-width-2) solid var(--color-text);
  border-radius: 0;
  color: var(--color-text);
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-btn);
  letter-spacing: 0.02em;
  appearance: none;
  -webkit-appearance: none;
}

.xr-select:focus {
  outline: 2px solid var(--focus);
  outline-offset: var(--focus-offset);
  border-color: var(--focus);
}

.xr-select-wrap {
  position: relative;
  width: 100%;
  color: var(--color-text);
}

.xr-select-wrap::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background-color: currentColor;
  -webkit-mask-image: var(--xr-icon-chevron-down);
  mask-image: var(--xr-icon-chevron-down);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 16px 16px;
  mask-size: 16px 16px;
  -webkit-mask-position: center;
  mask-position: center;
  pointer-events: none;
  opacity: 0.9;
}

.xr-select-wrap:hover .xr-select {
  background: var(--color-section-alt);
}

.xr-menu__meta {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-title);
  color: var(--color-text);
  opacity: 0.7;
}

.xr-menu__group.is-inverted-callout {
  margin-top: 4px;
  margin-bottom: 4px;
  padding: 14px 14px 15px;
  border: var(--border-width-2) solid var(--color-text);
  background-color: var(--color-text);
  color: var(--color-bg);
}

.xr-menu__group.is-inverted-callout .xr-menu__label {
  color: var(--color-bg);
  opacity: 1;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
}

.xr-menu__group.is-inverted-callout .xr-menu__meta {
  color: var(--color-bg);
  opacity: 0.9;
  font-weight: var(--fw-medium);
  font-size: var(--ui-fs-body);
  line-height: 1.45;
}

.xr-menu__group.is-inverted-callout .xr-btn {
  background-color: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-bg);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
}

.xr-menu__group.is-inverted-callout .xr-btn:hover {
  outline: var(--border-width-2) solid var(--color-bg);
  outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  .xr-menu__group.is-inverted-callout {
    background-color: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-text);
  }
  .xr-menu__group.is-inverted-callout .xr-menu__label {
    color: var(--color-text);
  }
  .xr-menu__group.is-inverted-callout .xr-menu__meta {
    color: var(--color-text);
    opacity: 0.9;
  }
  .xr-menu__group.is-inverted-callout .xr-btn {
    background-color: var(--color-text);
    color: var(--color-bg);
    border-color: var(--color-text);
  }
  .xr-menu__group.is-inverted-callout .xr-btn:hover {
    outline-color: var(--color-text);
  }
}

html[data-theme="dark"] .xr-menu__group.is-inverted-callout {
  background-color: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-text);
}

html[data-theme="dark"] .xr-menu__group.is-inverted-callout .xr-menu__label {
  color: var(--color-text);
}

html[data-theme="dark"] .xr-menu__group.is-inverted-callout .xr-menu__meta {
  color: var(--color-text);
  opacity: 0.9;
}

html[data-theme="dark"] .xr-menu__group.is-inverted-callout .xr-btn {
  background-color: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

html[data-theme="dark"] .xr-menu__group.is-inverted-callout .xr-btn:hover {
  outline-color: var(--color-text);
}

html[data-theme="light"] .xr-menu__group.is-inverted-callout {
  background-color: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

html[data-theme="light"] .xr-menu__group.is-inverted-callout .xr-menu__label {
  color: var(--color-bg);
}

html[data-theme="light"] .xr-menu__group.is-inverted-callout .xr-menu__meta {
  color: var(--color-bg);
  opacity: 0.9;
}

html[data-theme="light"] .xr-menu__group.is-inverted-callout .xr-btn {
  background-color: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-bg);
}

html[data-theme="light"] .xr-menu__group.is-inverted-callout .xr-btn:hover {
  outline-color: var(--color-bg);
}

.xr-menu-divider {
  height: 1px;
  width: 100%;
  background: var(--color-section-alt-strong);
}

.xr-menu-debug {
  border: 2px solid var(--color-section-alt-strong);
  padding: 8px 10px;
}

.xr-menu-debug__summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-label);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.xr-menu-debug__summary::-webkit-details-marker { display: none; }

.xr-menu-debug__summary::after {
  content: '';
  width: 14px;
  height: 14px;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-image: var(--xr-icon-chevron-down);
  mask-image: var(--xr-icon-chevron-down);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 14px 14px;
  mask-size: 14px 14px;
  -webkit-mask-position: center;
  mask-position: center;
  transform: rotate(-90deg);
  opacity: 0.8;
}

.xr-menu-debug[open] .xr-menu-debug__summary::after {
  transform: rotate(0deg);
}

.xr-menu-slider {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.xr-menu-slider__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.xr-menu-slider__label {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-title);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.02em;
  opacity: 0.92;
}

.xr-menu-slider__val {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-title);
  font-weight: 700;
  color: var(--color-muted);
  opacity: 0.92;
}

.xr-menu-slider__input {
  width: 100%;
}

.xr-menu .xr-btn.is-active {
  background: var(--color-section-alt);
}

/* Theme selector
   Why radios (not a custom dropdown):
   - Enables instant light/dark/auto preview without extra JS.
   - Preserves native semantics and keyboard support (fieldset + radios). */
.xr-theme-toggle {
  display: flex;
  gap: 0;
  align-items: center;
  flex-wrap: wrap;
  border: 0;
  padding: 0;
  margin: 0;
}

.xr-theme-toggle label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-title);
  color: var(--color-text);
  border: 1px solid var(--stroke-strong);
  padding: 6px 10px;
  background: transparent;
  border-radius: 0;
  user-select: none;
}

.xr-theme-toggle input[type="radio"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.xr-theme-toggle__text {
  font: inherit;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.xr-theme-toggle label + label {
  margin-left: -1px;
}

.xr-theme-toggle label:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: var(--focus-offset);
}

.xr-theme-toggle input[type="radio"]:checked + .xr-theme-toggle__text {
  color: var(--color-bg);
}

.xr-theme-toggle label:has(input[type="radio"]:checked) {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
  z-index: var(--z-base);
}

/* =============================================================================
   3.5 Sheets & Media Preview
   --------------------------------------------------------------------------
   Description: Separated from section 3 because sheets (share/help) and the
   image lightbox are overlay-like, but behave as modals (more screen, higher
   z-index: --z-modal, 1000). The lightbox caps height via calc(100vh - 160px)
   to keep space for header and caption.
   ============================================================================= */

.xr-sheet-overlay {
  position: fixed;
  inset: 0;
  background: var(--surface-overlay);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--dialog-overlay-pad);
}

.xr-sheet {
  width: min(var(--dialog-max-w), calc(100vw - (var(--dialog-overlay-pad) * 2)));
  max-height: min(var(--dialog-max-h), calc(100vh - (var(--dialog-overlay-pad) * 2)));
  overflow: auto;
  background: var(--surface-panel);
  border: 1px solid var(--stroke-strong);
  display: flex;
  flex-direction: column;
}

.xr-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--stroke-subtle);
  position: sticky;
  top: 0;
  background: inherit;
  z-index: var(--z-sticky-head);
}

.xr-sheet__title {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-title);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.xr-sheet__section {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.xr-sheet__hint {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-btn);
  line-height: 1.45;
  color: var(--text-muted);
}

.xr-sheet__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.xr-share-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}

.xr-share-grid.xr-share-grid--block {
  display: block;
}

.xr-share-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: var(--border-width-1) solid var(--color-text);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  transform: none;
}

.xr-share-tile:hover {
  background: var(--color-section-alt);
  transform: none;
}

.xr-share-tile__icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

.xr-share-tile[data-share="bluesky"] .xr-share-tile__icon::before,
.xr-share-tile[data-share="x"] .xr-share-tile__icon::before,
.xr-share-tile[data-share="mastodon"] .xr-share-tile__icon::before,
.xr-share-tile[data-share="linkedin"] .xr-share-tile__icon::before,
.xr-share-tile[data-share="facebook"] .xr-share-tile__icon::before,
.xr-share-tile[data-share="copy"] .xr-share-tile__icon::before {
  content: '';
  width: 18px;
  height: 18px;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

.xr-share-tile[data-share="bluesky"] .xr-share-tile__icon::before {
  -webkit-mask-image: var(--xr-icon-cloud);
  mask-image: var(--xr-icon-cloud);
}

.xr-share-tile[data-share="x"] .xr-share-tile__icon::before {
  -webkit-mask-image: var(--xr-icon-x);
  mask-image: var(--xr-icon-x);
}

.xr-share-tile[data-share="mastodon"] .xr-share-tile__icon::before {
  -webkit-mask-image: var(--xr-icon-chat);
  mask-image: var(--xr-icon-chat);
}

.xr-share-tile[data-share="linkedin"] .xr-share-tile__icon::before {
  -webkit-mask-image: var(--xr-icon-id-card);
  mask-image: var(--xr-icon-id-card);
}

.xr-share-tile[data-share="facebook"] .xr-share-tile__icon::before {
  -webkit-mask-image: var(--xr-icon-facebook);
  mask-image: var(--xr-icon-facebook);
}

.xr-share-tile[data-share="copy"] .xr-share-tile__icon::before {
  -webkit-mask-image: var(--xr-icon-copy);
  mask-image: var(--xr-icon-copy);
}

.xr-share-tile__label {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-btn);
  color: var(--color-text);
}

.xr-card {
  padding: 12px;
  margin: 0;
}

.xr-card.xr-card--flush {
  padding: 0;
}

.xr-app-tagline {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-btn);
  line-height: 1.55;
  color: var(--color-text);
  margin: 0 0 10px;
}

.xr-hero-demo {
  width: 120px;
  height: 120px;
  display: block;
  margin: 10px 0;
}

.xr-tag {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 10px;
}

.xr-subtitle {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-btn);
  line-height: 1.55;
  color: var(--color-text);
  margin: 10px 0;
}

.xr-about-note {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-title);
  line-height: 1.6;
  color: var(--color-muted);
  margin: 10px 0;
}

.xr-about-author {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-title);
  color: var(--color-text);
  margin: 10px 0;
}

.xr-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.xr-about-github-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.xr-about-github-link .xr-about-github-icon {
  flex-shrink: 0;
  vertical-align: middle;
}

.xr-image-overlay {
  position: fixed;
  inset: 0;
  background: var(--surface-overlay);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--dialog-overlay-pad);
}

.xr-image {
  width: min(var(--dialog-max-w), calc(100vw - (var(--dialog-overlay-pad) * 2)));
  max-height: min(var(--dialog-max-h), calc(100vh - (var(--dialog-overlay-pad) * 2)));
  overflow: auto;
  background: var(--surface-panel);
  border: 1px solid var(--stroke-strong);
  display: flex;
  flex-direction: column;
}

.xr-image__head {
  display: flex;
  justify-content: flex-end;
  padding: 10px 12px;
  border-bottom: 1px solid var(--stroke-subtle);
  position: sticky;
  top: 0;
  background: inherit;
  z-index: var(--z-sticky-head);
}

.xr-image__close {
  height: 30px;
  width: 30px;
  border: var(--border-width-1) solid var(--color-text);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 16px;
  line-height: 1;
}

.xr-image__figure {
  margin: 0;
  padding: 12px;
}

.xr-image__figure img {
  max-width: 100%;
  height: auto;
  display: block;
}

.xr-image__caption {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-title);
  line-height: 1.6;
  color: var(--color-muted);
  margin-top: 10px;
  word-break: break-word;
}

.xr-editor-embed {
  width: min(100vw, 1920px);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0 auto;
  overflow: hidden;
  background: var(--color-bg);
}

.xr-editor-frame {
  flex: 1;
  min-height: 0;
  height: 100%;
}

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

/* =============================================================================
   4. Editor Root
   --------------------------------------------------------------------------
   Description: Host container for the 3D editor sized to fill the space between
   header and footer. Uses a weighted 6-column grid (scene tree / viewport /
   inspector). min-height: 0 on children is required for internal scrolling
   without forcing the root container to grow.
   ============================================================================= */

.xr-editor {
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-body);
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Main editor grid: 4 columns (tree viewport surface inspector) with weighted fractions.
   Grid areas keep markup order stable while allowing RTL mirroring.
   .is-uvwide reallocates width to the UV/surface panel for texture work.
   CRITICAL invariant: ALL grid-template-areas strings MUST name exactly 4 area tokens
   (tree viewport surface inspector) in this order — missing any named area causes that
   panel to fall into an implicit 2nd CSS grid row and collapses row 1 height to 0. */
.xr-editor .xr-editor-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 0fr) minmax(0, 1fr);
  grid-template-areas: "tree viewport surface inspector";
  grid-template-rows: 1fr;
  height: 100%;
  overflow: hidden;
}

html[dir="rtl"] .xr-editor .xr-editor-layout {
  grid-template-areas: "inspector surface viewport tree";
  grid-template-columns: minmax(0, 1fr) minmax(0, 0fr) minmax(0, 2fr) minmax(0, 1fr);
}

.xr-editor.is-uvwide .xr-editor-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 0.5fr) minmax(0, 1fr);
  grid-template-areas: "tree viewport surface inspector";
}

html[dir="rtl"] .xr-editor.is-uvwide .xr-editor-layout {
  grid-template-areas: "inspector surface viewport tree";
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr) minmax(0, 1.5fr) minmax(0, 1fr);
}

.xr-editor:not(.is-advanced) .xr-advanced-only {
  display: none !important;
}

/* =============================================================================
   5. Editor Panels
   --------------------------------------------------------------------------
   Description: Three core panels: Scene Tree (object list), Viewport (Three.js
   canvas), and Inspector (parametric controls for the selected shape). Each
   panel is flex-column with internal overflow. Inspector controls (.xr-ctl-*)
   are atomic components reused in export, UV compare, and other editor modals.
   ============================================================================= */

/* 5.1 Scene Tree
   Anatomy:
   - `.xr-tree-list` holds dynamic `.xr-tree-row` items generated by JS.
   - Each row has: thumb canvas, name button (inline rename on dblclick),
     and two icon buttons (visibility + lock).
   Why this structure:
   - Keeps selection and reordering feedback fast without forcing a full reflow;
     only the list subtree re-renders on changes. */
.xr-editor .xr-panel-tree {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-panel);
  border-right: 1px solid var(--stroke-subtle);
  grid-area: tree;
}

html[dir="rtl"] .xr-editor .xr-panel-tree {
  border-right: 0;
  border-left: 1px solid var(--stroke-subtle);
}

.xr-editor .xr-scene-overlay {
  display: none;
}

.xr-editor .xr-panel-head {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border-bottom: 1px solid var(--stroke-subtle);
  flex-shrink: 0;
}

.xr-editor .xr-panel-title {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-label);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.xr-editor .xr-panel-meta {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-label);
  color: var(--text-muted);
  user-select: text;
}

.xr-editor .xr-tree-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.xr-editor .xr-tree-empty {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  padding: 8px 4px;
}

.xr-editor .xr-tree-empty__text {
  margin: 0;
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-title);
  color: var(--text-muted);
}

.xr-editor .xr-panel-empty {
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.xr-editor .xr-panel-empty__msg {
  margin: 0;
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-btn);
  color: var(--text-muted);
  line-height: 1.4;
}

.xr-editor .xr-viewport-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  pointer-events: none;
  z-index: var(--z-overlay-ui);
  text-align: center;
}

.xr-editor .xr-viewport-empty__icon {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 64px;
  line-height: 1;
  color: var(--text-muted);
  opacity: 0.3;
}

.xr-editor .xr-viewport-empty__text {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 13px;
  color: var(--text-muted);
  background-color: var(--surface-panel-strong);
  padding: 8px 16px;
  border-radius: var(--ui-radius);
  border: 1px solid var(--stroke-subtle);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.xr-editor .xr-tree-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 8px;
  border-top: 1px solid var(--stroke-subtle);
  flex-shrink: 0;
}

.xr-editor .xr-tree-actions__title {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-label);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 4px;
}

.xr-editor .xr-tree-actions__row {
  display: grid;
  gap: 6px;
}

.xr-editor .xr-tree-actions__row--main {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.xr-editor .xr-tree-actions__row--move {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.xr-editor .xr-tree-delete {
  padding: 12px 10px;
  background-color: var(--surface-panel-strong);
  border-top: 2px solid var(--status-danger);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.xr-editor .xr-tree-delete__text {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 13px;
  color: var(--text-main);
  font-weight: 600;
}

.xr-editor .xr-tree-delete__actions {
  display: flex;
  gap: 6px;
}

.xr-editor .xr-tree-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 6px;
  align-items: center;
  background: var(--surface-panel-strong);
  border: 1px solid var(--stroke-subtle);
  padding: 6px;
}

.xr-editor .xr-tree-row__thumb {
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-muted);
  background: transparent;
  flex-shrink: 0;
}

.xr-editor .xr-tree-row.is-active {
  border-color: var(--color-action);
  background: var(--surface-panel);
}

.xr-editor .xr-tree-row__name {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 11px;
  color: var(--text-muted);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xr-editor .xr-tree-row__type {
  font-size: 9px;
  color: var(--text-muted);
  background-color: var(--surface-panel-strong);
  padding: 2px 4px;
  border-radius: 2px;
  margin-right: 4px;
  white-space: nowrap;
}

.xr-editor .xr-tree-row.is-active .xr-tree-row__name {
  color: var(--color-action);
}

.xr-editor .xr-tree-row__name-edit {
  width: 100%;
  height: 26px;
  padding: 0 6px;
  border: 1px solid var(--color-muted);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 11px;
}

.xr-editor .xr-inline-number-input {
  width: 72px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid var(--color-muted);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 11px;
  text-align: right;
}

.xr-editor .xr-editable-val {
  cursor: pointer;
  user-select: none;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  border-radius: 0;
}

.xr-editor .xr-editable-val:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.xr-editor .xr-editable-val:focus-visible {
  outline: 1px dotted var(--focus);
  outline-offset: var(--focus-offset);
}

.xr-editor .xr-tree-row__icon-btn {
  width: 26px;
  height: 26px;
  border: 1px solid var(--color-muted);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.xr-editor .xr-tree-row__icon-btn::before {
  content: '';
  width: 16px;
  height: 16px;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 16px 16px;
  mask-size: 16px 16px;
  -webkit-mask-position: center;
  mask-position: center;
}

.xr-editor .xr-tree-row__icon-btn.is-vis::before {
  -webkit-mask-image: var(--xr-icon-eye);
  mask-image: var(--xr-icon-eye);
}

.xr-editor .xr-tree-row__icon-btn.is-vis[data-state="off"]::before {
  -webkit-mask-image: var(--xr-icon-eye-off);
  mask-image: var(--xr-icon-eye-off);
}

.xr-editor .xr-tree-row__icon-btn.is-lock::before {
  -webkit-mask-image: var(--xr-icon-lock);
  mask-image: var(--xr-icon-lock);
}

.xr-editor .xr-tree-row__icon-btn.is-lock[data-state="off"] {
  opacity: 0.35;
}

/* --- UI36 BLOCK: Task 1-10 overrides XReate --- */

/* T1: tree row icon buttons SQUARE (eye/lock + xr-menu close + xr-info-btn) */
.xr-editor .xr-tree-row__icon-btn,
.xr-editor .xr-info-btn {
  border-radius: 0;
  flex: 0 0 auto;
}

/* T2: Uniform scale chain label ON/OFF state visual + square */
.xr-editor .xr-scale-lock-btn {
  border-radius: 0;
  min-width: auto;
  width: auto;
  padding: 4px 10px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: auto;
  min-height: 40px;
}
.xr-editor .xr-scale-lock-btn .xr-btn__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.xr-editor .xr-scale-lock-btn__state {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.xr-editor .xr-scale-lock-btn[aria-pressed="false"] .xr-scale-lock-btn__state {
  color: var(--text-muted);
  opacity: 0.7;
}

/* T4: ? info-btn UV help (style + square, not a broken pill) */
.xr-editor .xr-info-btn {
  width: 24px;
  height: 24px;
  border: var(--border-width-1) solid var(--stroke-strong);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  font-size: 14px;
  font-weight: 800;
  font-family: var(--font-primary), var(--font-fallback);
}
.xr-editor .xr-info-btn:hover {
  background: var(--surface-panel-strong);
}
.xr-editor .xr-info-btn[aria-expanded="true"] {
  background: var(--action-primary);
  color: var(--surface-base);
  border-color: var(--action-primary);
}

/* T5: Dark mode <select> text readable (UV dropdown e menu language) */
.xr-editor .xr-select,
.xr-menu .xr-select {
  color-scheme: light dark;
}
html[data-theme="dark"] .xr-editor .xr-select,
html[data-theme="dark"] .xr-menu .xr-select {
  color: #ffffff;
  background-color: #1a1814;
}
html[data-theme="dark"] .xr-editor .xr-select option,
html[data-theme="dark"] .xr-menu .xr-select option {
  color: #ffffff;
  background-color: #1a1814;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .xr-editor .xr-select,
  html[data-theme="auto"] .xr-menu .xr-select {
    color: #ffffff;
    background-color: #1a1814;
  }
  html[data-theme="auto"] .xr-editor .xr-select option,
  html[data-theme="auto"] .xr-menu .xr-select option {
    color: #ffffff;
    background-color: #1a1814;
  }
}

/* T6: UV tutorial block after Diagnostics */
.xr-editor .xr-uv-tutorial {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--stroke-subtle);
  background: var(--surface-panel-strong);
}
.xr-editor .xr-uv-tutorial__title {
  margin: 0 0 6px;
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.xr-editor .xr-uv-tutorial__list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.xr-editor .xr-uv-tutorial__list li {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}
.xr-editor .xr-uv-tutorial__list em {
  color: var(--text-primary);
  font-style: normal;
  font-weight: 700;
}

/* T7: menu close (X) SQUARE border-radius=0, + xr-icon-btn sheet close square */
.xr-icon-btn,
.xr-menu__close,
.xr-sheet__close,
.xr-image__close {
  border-radius: 0;
}

/* T8: Keep the menu size consistent across sections (fixed height + inner overflow). */
.xr-menu {
  height: min(680px, calc(100vh - (var(--dialog-overlay-pad) * 2)));
  min-height: min(680px, calc(100vh - (var(--dialog-overlay-pad) * 2)));
  max-height: min(680px, calc(100vh - (var(--dialog-overlay-pad) * 2)));
  overflow: hidden;
}
.xr-menu__body {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.xr-menu__sections {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}
.xr-menu__section {
  min-height: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

/* T9: Menu tabs look = Mode Selector (3D Draft / Texture) segmented style */
.xr-menu__tabs {
  display: inline-flex;
  align-items: center;
  height: 34px;
  border: 1px solid var(--stroke-strong);
  padding: 0;
  gap: 0;
  width: auto;
  flex-wrap: nowrap;
  border-radius: 0;
  flex: 0 0 auto;
}
.xr-menu-tab {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: var(--text-primary);
  border: 0;
  border-right: 1px solid var(--stroke-strong);
  border-radius: 0;
  padding: 0 14px;
  height: 100%;
  min-height: 32px;
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  flex: 0 0 auto;
  line-height: 1;
}
.xr-menu-tab:last-child {
  border-right: 0;
}
.xr-menu-tab:hover {
  background: var(--surface-panel-strong);
  color: var(--text-primary);
}
.xr-menu-tab.is-active,
.xr-menu-tab[aria-selected="true"] {
  background: var(--action-primary);
  color: var(--surface-base);
  border-right-color: var(--action-primary);
}
.xr-menu-tab:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: var(--focus-offset);
}

/* T10: Remove all section-collapse chevrons; sections stay expanded. */
/* A) Inspector section header: static title, not a button. */
.xr-editor .xr-inspector-section__header {
  pointer-events: none;
  cursor: default;
  background: transparent;
  border: 0;
  padding: 0;
  width: 100%;
  text-align: left;
  display: block;
}
/* B) Hide chevrons for section-collapse controls everywhere.
   The Export and Add Volume header menus keep their own chevrons because they
   are not section toggles and are intentionally excluded from this selector. */
.xr-editor .xr-inspector-section__chevron {
  display: none !important;
  width: 0;
  height: 0;
  opacity: 0;
  visibility: hidden;
}
/* C) Inspector section body ALWAYS visible (ignore collapsed=true) */
.xr-editor .xr-inspector-section[data-collapsed="true"] .xr-inspector-section__body,
.xr-editor .xr-inspector-section[data-collapsed="false"] .xr-inspector-section__body {
  display: flex !important;
}
/* D) Static inspector title (non-button replacement) */
.xr-editor .xr-inspector-section__static-title {
  margin: 0;
  padding: 12px 12px 4px;
  border-bottom: 0;
}
/* E) Header dropdown (Export / Add Volume) are NOT section collapses — keep their chevrons visible (exception) */
.xr-editor header .xr-btn__icon[data-xr-icon="chevron-down"],
.xr-editor .xr-export-trigger .xr-btn__icon[data-xr-icon="chevron-down"],
.xr-editor #btn-add-shape .xr-btn__icon[data-xr-icon="chevron-down"] {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* G) Surface panel Draw wrap height ALWAYS 320 (texture and draft3d mode, no collapse) */
.xr-editor .xr-panel-surface .xr-draw-wrap,
.xr-editor .xr-panel-surface .xr-draw-wrap.is-collapsed {
  height: 320px !important;
  min-height: 320px !important;
}

/* --- END UI36 BLOCK --- */

/* --- UI37 BLOCK: Uniform scale UX, Doodle principal, UV wiki select contrast --- */

/* T1 + UX improvement: Uniform scale row — simplified, matches other .xr-field-row */
.xr-editor .xr-scale-lock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0 4px 0;
  margin: 2px 0 6px 0;
  border: none;
  border-top: 1px solid var(--stroke-subtle);
  border-radius: 0;
  background: transparent;
  background-image: none;
  box-shadow: none;
  filter: none;
  -webkit-appearance: none;
  appearance: none;
}
.xr-editor .xr-scale-lock-row__label {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-align: left;
}
.xr-editor .xr-scale-lock-btn {
  flex: 0 0 auto;
  width: auto;
  min-width: auto;
  padding: 8px 12px;
  gap: 6px;
  min-height: auto;
  border: 1px solid var(--stroke-strong);
  border-style: solid;
  border-radius: 0;
  background: transparent;
  background-image: none;
  color: var(--text-primary);
  cursor: pointer;
  box-shadow: none;
  filter: none;
  -webkit-appearance: none;
  appearance: none;
  text-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background 120ms linear, color 120ms linear, border-color 120ms linear;
}
.xr-editor .xr-scale-lock-btn:hover {
  background: var(--surface-panel-strong);
}
.xr-editor .xr-scale-lock-btn[aria-pressed="true"] {
  background: transparent;
  background-image: none;
  color: var(--text-primary);
  border-color: var(--action-primary);
  border-style: solid;
  box-shadow: none;
  filter: none;
}
.xr-editor .xr-scale-lock-btn[aria-pressed="false"] {
  background: transparent;
  background-image: none;
  color: var(--text-muted);
  border-style: dashed;
  box-shadow: none;
  filter: none;
}
.xr-editor .xr-scale-lock-btn .xr-btn__icon {
  width: 22px;
  height: 22px;
  mask-size: contain;
  -webkit-mask-size: contain;
}
.xr-editor .xr-scale-lock-btn__state {
  font-size: 11px;
  letter-spacing: 0.14em;
}
.xr-editor .xr-scale-lock-btn[aria-pressed="true"] .xr-scale-lock-btn__state {
  color: var(--surface-base);
  opacity: 1;
}
.xr-editor .xr-scale-lock-btn[aria-pressed="false"] .xr-scale-lock-btn__state {
  color: var(--text-muted);
  opacity: 0.8;
}

/* T2: Doodle = principal tool, hero card in Add Volume dropdown
   Note: .xr-add-shape is position:fixed popover outside .xr-editor wrapper; selector prefix removed for specificity */
.xr-add-shape__item[data-shape-id="doodle"] {
  grid-column: span 2 !important;
  grid-row: span 1;
  aspect-ratio: auto !important;
  min-height: 144px !important;
  padding: 14px 12px !important;
  border-width: 3px !important;
  background: var(--action-primary) !important;
  color: var(--surface-base) !important;
  position: relative;
  flex-direction: column;
  gap: 10px;
}
.xr-add-shape__item[data-shape-id="doodle"]:hover {
  filter: brightness(0.94);
}
.xr-add-shape__item[data-shape-id="doodle"] .xr-add-shape__icon {
  width: 52px !important;
  height: 52px !important;
}
.xr-add-shape__item[data-shape-id="doodle"] > span {
  font-size: 14px;
  letter-spacing: 0.06em;
  font-weight: 900;
}
.xr-add-shape__doodle-badge {
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 2px 6px;
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 9px;
  line-height: 1.4;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--surface-base);
  border: 1.5px solid var(--surface-base);
  background: transparent;
}
.xr-add-shape__doodle-phone-note {
  display: none;
  max-width: 19rem;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  text-wrap: balance;
}

/* A phone has too little continuous space for accurate tracing. The Doodle
   tile remains discoverable, but states its device requirement instead of
   opening a compromised full-screen dialog. */
@media (max-width: 767px), (max-height: 520px) and (pointer: coarse) {
  .xr-add-shape__item[data-shape-id="doodle"].is-unavailable {
    min-height: 116px !important;
    cursor: not-allowed;
    color: var(--color-text) !important;
    background: var(--color-section-alt) !important;
    border-color: var(--color-text) !important;
    filter: none !important;
  }
  .xr-add-shape__item[data-shape-id="doodle"].is-unavailable:hover {
    filter: none !important;
    background: var(--color-section-alt) !important;
  }
  .xr-add-shape__item[data-shape-id="doodle"].is-unavailable .xr-add-shape__doodle-badge {
    display: none;
  }
  .xr-add-shape__item[data-shape-id="doodle"].is-unavailable .xr-add-shape__icon {
    width: 34px !important;
    height: 34px !important;
    opacity: 0.62;
  }
  .xr-add-shape__item[data-shape-id="doodle"].is-unavailable .xr-add-shape__doodle-phone-note {
    display: block;
  }
}

/* T5: Dropdown select option SELECTED text readable (contrast both modes) */
.xr-editor .xr-select {
  padding: 6px 32px 6px 10px;
  height: 36px !important;
  min-height: 36px !important;
  border: 2px solid var(--stroke-strong);
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: none;
  line-height: 1.2;
}
.xr-editor .xr-select:focus,
.xr-editor .xr-select:focus-within,
.xr-editor .xr-select:active {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.xr-editor .xr-select option {
  padding: 6px 10px;
  min-height: 28px;
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 13px;
  font-weight: 600;
}
.xr-editor .xr-select::selection,
.xr-editor .xr-select *::selection {
  background: var(--action-primary);
  color: var(--surface-base);
}
html[data-theme="light"] .xr-editor .xr-select,
html[data-theme="light"] .xr-editor .xr-select option {
  color: #1c1a16;
  background-color: #ffffff;
}
html[data-theme="light"] .xr-editor .xr-select option:checked,
html[data-theme="light"] .xr-editor .xr-select option:selected {
  color: #ffffff;
  background-color: #1c1a16;
}
html[data-theme="dark"] .xr-editor .xr-select,
html[data-theme="dark"] .xr-editor .xr-select option {
  color: #ffffff;
  background-color: #1a1814;
}
html[data-theme="dark"] .xr-editor .xr-select option:checked,
html[data-theme="dark"] .xr-editor .xr-select option:selected {
  color: #1a1814;
  background-color: #ffffff;
}
@media (prefers-color-scheme: light) {
  html[data-theme="auto"] .xr-editor .xr-select,
  html[data-theme="auto"] .xr-editor .xr-select option {
    color: #1c1a16;
    background-color: #ffffff;
  }
  html[data-theme="auto"] .xr-editor .xr-select option:checked,
  html[data-theme="auto"] .xr-editor .xr-select option:selected {
    color: #ffffff;
    background-color: #1c1a16;
  }
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .xr-editor .xr-select,
  html[data-theme="auto"] .xr-editor .xr-select option {
    color: #ffffff;
    background-color: #1a1814;
  }
  html[data-theme="auto"] .xr-editor .xr-select option:checked,
  html[data-theme="auto"] .xr-editor .xr-select option:selected {
    color: #1a1814;
    background-color: #ffffff;
  }
}

/* --- END UI37 BLOCK --- */

/* =============================================================================
   UI38 BLOCK — 2026-09-01
   Tasks:
   T4 Symmetrical reset row (three uniform one-third grid buttons)
   T5 Uniform Scale label with full dark-theme contrast (aria-pressed true/false)
   T6 HUD icons responsive hardening (mask-size contain + size 18/16px min)
   T7 Mobile layout at ≤1023px: vertical square tiles with a 1:1 aspect ratio
   ============================================================================= */

/* ---------- UI38 T4: Reset Transform row: three uniform one-third grid buttons. ---------- */
#xreate-editor-root.xr-editor .xr-transform-reset-row,
:root #xreate-editor-root .xr-editor .xr-transform-reset-row,
.xr-editor .xr-inspector-section__body .xr-ctl-row.xr-transform-reset-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  grid-auto-flow: column !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  flex-wrap: nowrap !important;
}
#xreate-editor-root.xr-editor .xr-transform-reset-row > .xr-ctl-btn,
#xreate-editor-root.xr-editor .xr-transform-reset-row > button.xr-ctl-btn,
.xr-editor .xr-inspector-section__body .xr-ctl-row.xr-transform-reset-row > .xr-ctl-btn {
  width: 100% !important;
  grid-column: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 100% !important;
}

/* ---------- UI38 T5: Uniform scale label darkmode contrasto FULL ---------- */
/* pressed=true: bg action-primary (WHITE in both modes) → label MUST BE BLACK for read */
html[data-theme="light"] .xr-editor .xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="true"] .xr-scale-lock-btn__state,
html[data-theme="light"] .xr-editor .xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="true"] .xr-btn__icon {
  color: #1c1a16 !important;
}
html[data-theme="dark"] .xr-editor .xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="true"] .xr-scale-lock-btn__state,
html[data-theme="dark"] .xr-editor .xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="true"] .xr-btn__icon {
  color: #1a1814 !important;
}
@media (prefers-color-scheme: light) {
  html[data-theme="auto"] .xr-editor .xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="true"] .xr-scale-lock-btn__state,
  html[data-theme="auto"] .xr-editor .xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="true"] .xr-btn__icon {
    color: #1c1a16 !important;
  }
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .xr-editor .xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="true"] .xr-scale-lock-btn__state,
  html[data-theme="auto"] .xr-editor .xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="true"] .xr-btn__icon {
    color: #1a1814 !important;
  }
}
/* pressed=false: bg transparent → text MATCHES surface foreground (white dark / black light) */
html[data-theme="light"] .xr-editor .xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="false"] .xr-scale-lock-btn__state,
html[data-theme="light"] .xr-editor .xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="false"] .xr-btn__icon {
  color: #1c1a16 !important;
}
html[data-theme="dark"] .xr-editor .xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="false"] .xr-scale-lock-btn__state,
html[data-theme="dark"] .xr-editor .xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="false"] .xr-btn__icon {
  color: #ffffff !important;
}
@media (prefers-color-scheme: light) {
  html[data-theme="auto"] .xr-editor .xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="false"] .xr-scale-lock-btn__state,
  html[data-theme="auto"] .xr-editor .xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="false"] .xr-btn__icon {
    color: #1c1a16 !important;
  }
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .xr-editor .xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="false"] .xr-scale-lock-btn__state,
  html[data-theme="auto"] .xr-editor .xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="false"] .xr-btn__icon {
    color: #ffffff !important;
  }
}
.xr-editor .xr-scale-lock-row__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- UI38 T6: HUD icons responsive hardening (no break) ---------- */
.xr-editor .xr-btn__icon,
.xr-editor .xr-ctl-icon,
.xr-editor .xr-ctl-btn__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  flex: 0 0 auto !important;
}
/* ---------- RESPONSIVE UX REFACTOR — Icon sizing 3-tier (Wide/Compact/Focused) ---------- */
/* Wide ≥1728px: desktop standard icons 16px (base default; no media query needed) */
/* Compact 1160–1727px: intermediate icon size 17px */
@media (max-width: 1727px) and (min-width: 1160px) {
  .xr-editor .xr-btn__icon,
  .xr-editor .xr-ctl-icon,
  .xr-editor .xr-ctl-btn__icon {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
    max-width: 17px !important;
    max-height: 17px !important;
  }
}
/* Focused ≤1159px: touch-friendly icon size 18px */
@media (max-width: 1159px) {
  .xr-editor .xr-btn__icon,
  .xr-editor .xr-ctl-icon,
  .xr-editor .xr-ctl-btn__icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
  }
}

/* ---------- UI38 T1: PAN HUD button + WASD banner viewport info ---------- */
.xr-editor .xr-viewport-wasd-banner {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  padding: 6px 12px;
  border: 2px solid var(--action-primary);
  background: var(--surface-panel-strong);
  color: var(--text-primary);
  font-family: var(--font-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 0;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 180ms ease;
}
.xr-editor .xr-viewport-wasd-banner.is-visible {
  opacity: 1;
}
.xr-editor .xr-viewport-hud .xr-hud-panel[data-hud-section="view"] .panel-row {
  gap: 6px;
  flex-wrap: wrap;
}

/* --- END UI38 BLOCK --- */

/* =============================================================================
   UI39 BLOCK — 2026-09-01
   T1: Toasts disabled; console logging only (no DOM) [editor-inline.js toast.js]
   T2: Order buttons use one arrow (↑/↓ rather than ↑↑/↓↓) and an Order label
   T3: UV projection select no longer has a static disabled state; JS owns it
   T4: Reset row moved after Transform and stacked in one column / three rows
   T5: Mobile layout at ≤1366px: viewport → tree → surface → inspector,
       with collapsible panels and a chevron in the mobile head/body
   T6: Uniform Scale moved after Scale Z, before reset controls;
       adds a robust inline chain SVG and label/button field row,
       with full contrast in light and dark themes
   T7: Creating a volume auto-selects it, ensures the gizmo, and fits the view
   ============================================================================= */

/* ---------- UI39 T4: Reset row: three rows, one column, after Transform. ---------- */
#xreate-editor-root.xr-editor .xr-transform-reset-row,
:root #xreate-editor-root .xr-editor .xr-transform-reset-row,
.xr-editor .xr-inspector-section__body .xr-ctl-row.xr-transform-reset-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto auto !important;
  grid-auto-flow: row !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 8px 0 0 0 !important;
  margin: 8px 0 0 0 !important;
  flex-wrap: nowrap !important;
  border-top: 1px solid var(--stroke-subtle) !important;
}
#xreate-editor-root.xr-editor .xr-transform-reset-row > .xr-ctl-btn,
#xreate-editor-root.xr-editor .xr-transform-reset-row > button.xr-ctl-btn {
  width: 100% !important;
  grid-column: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 100% !important;
  text-align: center !important;
  justify-content: center !important;
}

/* ---------- UI39 T6: Uniform scale FIELD ROW (label sx + btn dx) + contrasto FULL ---------- */
#xreate-editor-root.xr-editor .xr-field-row.xr-scale-lock-row,
.xr-editor .xr-inspector-section__body .xr-field-row.xr-scale-lock-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 8px 0 4px 0 !important;
  margin: 2px 0 6px 0 !important;
  border-top: 1px solid var(--stroke-subtle) !important;
  flex-wrap: nowrap !important;
}
#xreate-editor-root.xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-row__label,
.xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-row__label {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--text-primary) !important;
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
}
#xreate-editor-root.xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn,
.xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 140px !important;
  min-width: 140px !important;
  height: 38px !important;
  min-height: 38px !important;
  border: 2px solid var(--color-action) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--text-primary) !important;
  cursor: pointer !important;
  flex: 0 0 auto !important;
  padding: 4px 10px !important;
  margin: 0 !important;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
#xreate-editor-root.xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="true"],
.xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="true"] {
  background: var(--surface-panel-strong) !important;
  border-color: var(--action-primary) !important;
}
#xreate-editor-root.xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn svg,
.xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn svg {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  color: currentColor !important;
  stroke: currentColor !important;
  fill: none !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  margin: 0 !important;
}
#xreate-editor-root.xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn .xr-scale-lock-btn__state,
.xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn .xr-scale-lock-btn__state {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}
/* pressed=true: bg panel-strong LIGHT + DARK → label MUST BE BLACK for read */
html[data-theme="light"] .xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="true"] .xr-scale-lock-btn__state,
html[data-theme="light"] .xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="true"] svg,
html[data-theme="dark"] .xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="true"] .xr-scale-lock-btn__state,
html[data-theme="dark"] .xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="true"] svg {
  color: #1c1a16 !important;
  stroke: #1c1a16 !important;
}
@media (prefers-color-scheme: light) {
  html[data-theme="auto"] .xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="true"] .xr-scale-lock-btn__state,
  html[data-theme="auto"] .xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="true"] svg {
    color: #1c1a16 !important;
    stroke: #1c1a16 !important;
  }
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="true"] .xr-scale-lock-btn__state,
  html[data-theme="auto"] .xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="true"] svg {
    color: #1c1a16 !important;
    stroke: #1c1a16 !important;
  }
}
/* pressed=false: light = nero / dark = bianco */
html[data-theme="light"] .xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="false"] .xr-scale-lock-btn__state,
html[data-theme="light"] .xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="false"] svg {
  color: #1c1a16 !important;
  stroke: #1c1a16 !important;
}
html[data-theme="dark"] .xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="false"] .xr-scale-lock-btn__state,
html[data-theme="dark"] .xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="false"] svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}
@media (prefers-color-scheme: light) {
  html[data-theme="auto"] .xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="false"] .xr-scale-lock-btn__state,
  html[data-theme="auto"] .xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="false"] svg {
    color: #1c1a16 !important;
    stroke: #1c1a16 !important;
  }
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="false"] .xr-scale-lock-btn__state,
  html[data-theme="auto"] .xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="false"] svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
  }
}

/* ---------- UI39 T5 (REFACTORED): FOCUSED MODE ONLY (≤1159px) — viewport stays in the grid; other panels use fixed sheets. ---------- */
@media (max-width: 1159px) {
  .xr-editor {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: 100vh !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Focused 1-col grid: ONLY viewport participates. Inspector/Tree/Surface are position:fixed floating sheets
     (declared in the Focused Sheets block below this @media). Fixed positioning removes elements from
     grid flow automatically, but we also declare only 1 grid-area for extra robustness. */
  .xr-editor .xr-editor-layout,
  :root[data-ui-mode="draft3d"] .xr-editor .xr-editor-layout,
  :root[data-ui-mode="draft3d"] .xr-editor.is-uvwide .xr-editor-layout,
  :root[data-ui-mode="texture"] .xr-editor .xr-editor-layout,
  :not(:root[data-ui-mode]) .xr-editor .xr-editor-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    grid-template-areas: "viewport" !important;
    gap: 0 !important;
  }
  /* Mobile panel head: visible on Tree/Inspector/Surface (sheet headers).
     EXCEPTION — Viewport panel head is HIDDEN in Focused: the toggle burger button (Task 5) is
     injected at top-left inside the viewport panel and would overlap "VIEWPORT" text.
     Head is redundant anyway because viewport sticky = canvas-only panel. */
  .xr-editor .xr-mobile-panel-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--stroke-subtle) !important;
    background: var(--surface-panel) !important;
    cursor: pointer !important;
    user-select: none !important;
  }
  .xr-editor .xr-panel-viewport > .xr-mobile-panel-head {
    display: none !important;
  }
  .xr-editor .xr-mobile-panel-head__title {
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
  }
  .xr-editor .xr-mobile-panel-head__chevron {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    color: var(--text-primary) !important;
    transition: transform 160ms ease !important;
    transform: rotate(0deg);
  }
  .xr-editor .xr-mobile-panel-head[data-collapsed="false"] .xr-mobile-panel-head__chevron {
    transform: rotate(90deg) !important;
  }
  .xr-editor .xr-mobile-panel-body {
    width: 100% !important;
    overflow: hidden !important;
    transition: max-height 220ms ease, opacity 200ms ease;
  }
  .xr-editor .xr-mobile-panel-body[data-collapsed="true"] {
    display: none !important;
    max-height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  /* FOCUSED: Viewport = STICKY center of the experience.
     Canvas scrolls with the page but locks to the top (below fixed header) when scrolling deep into inspector/tree.
     Aspect ratio is UNSET (not forced square) to maximize usable touch/manipulation area.
     Min-height = max(baseline 380px, 85vh, or (100vh − header height)) to ensure no overlap loss. */
  .xr-editor .xr-panel-viewport {
    position: sticky !important;
    top: var(--app-header-h) !important;
    z-index: 30 !important;
    aspect-ratio: auto !important;
    min-height: max(380px, 85vh, calc(100vh - var(--app-header-h))) !important;
    height: max(380px, 85vh, calc(100vh - var(--app-header-h))) !important;
    width: 100% !important;
    box-shadow: 0 2px 0 var(--stroke-subtle) !important;
  }
  /* NOTE: Tree/Inspector/Surface panels are NOT styled as inline grid items below here.
     They become floating FIXED sheets in the "Focused Sheets" block that follows this UI39 T5 block.
     Old inline-force rules (UI39 legacy r7254-7268) have been REMOVED to allow the sheet model to win. */

  /* HUD captions + labels visible on Focused (touch: need visual cues) */
  .xr-editor .xr-viewport-hud .xr-hud-panel .panel-row .xr-ctl-btn > span:not(.xr-btn__icon) {
    display: inline-flex !important;
    font-size: 10px;
  }
  .xr-editor .xr-viewport-hud .xr-hud-panel .panel-caption {
    display: block !important;
    font-size: 10px;
  }
}
/* Nascondi mobile panel head su COMPACT + WIDE (>1159px) */
@media (min-width: 1160px) {
  .xr-editor .xr-mobile-panel-head {
    display: none !important;
  }
  /* Scene Browser sticky toggle burger is Focused-only; hide on Compact + Wide */
  .xr-editor .xr-btn-tree-toggle {
    display: none !important;
  }
  /* HOTFIX UI39.1: body wrapper MUST fill panel height on Compact + Wide */
  .xr-editor .xr-mobile-panel-body {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex: 1 1 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
  }
  /* viewport: keep overflow hidden so canvas fills correctly */
  .xr-editor .xr-panel-viewport > .xr-mobile-panel-body {
    overflow: hidden !important;
  }
  /* inspector/tree/surface: overflow auto for long content scrollbars (native) */
  .xr-editor .xr-panel-tree > .xr-mobile-panel-body,
  .xr-editor .xr-panel-surface > .xr-mobile-panel-body,
  .xr-editor .xr-panel-inspector > .xr-mobile-panel-body {
    overflow: visible !important;
  }
  /* preserve mobile panel body layout when collapsed=true on Compact + Wide (no transition, always expand) */
  .xr-editor .xr-mobile-panel-body[data-collapsed="true"] {
    display: flex !important;
    max-height: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Mobile-only utility (Compact + Focused: ≤1727px) */
.xr-editor .xr-mobile-only { display: none !important; }
@media (max-width: 1727px) {
  .xr-editor .xr-mobile-only { display: initial !important; }
}

/* --- END UI39 BLOCK --- */

/* =============================================================================
   RESPONSIVE UX REFACTOR — Focused Mode (≤1159px) Contextual Sheets
   - Inspector = bottom sheet (slide-up)
   - Scene Browser (Task 5) = left sheet
   - Surface (Task 6) = shared bottom sheet with Inspector via tabs
   Sheet behavior driven SOLELY by root classes (JS toggles classes only).
   No JS writes layout, no inline widths/heights/positions from JS.
   ============================================================================= */

@media (max-width: 1159px) {
  /* ---------- Inspector: BOTTOM SHEET (default closed, opened via .is-inspector-open) ---------- */
  .xr-editor .xr-panel-inspector {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 45vh !important;
    z-index: 60 !important;
    background: var(--surface-panel) !important;
    border-top: 1px solid var(--stroke-subtle) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(100%) !important;
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: transform;
    -webkit-overflow-scrolling: touch;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Open state: slide sheet up to visible */
  :root.is-inspector-open .xr-editor .xr-panel-inspector {
    transform: translateY(0%) !important;
  }

  /* Inspector body = scrollable parameter area (fix height of sheet minus head) */
  .xr-editor .xr-panel-inspector > .xr-mobile-panel-body {
    width: 100% !important;
    max-height: calc(45vh - 44px) !important;
    height: auto !important;
    flex: 1 1 auto !important;
    overflow: hidden auto !important;
    -webkit-overflow-scrolling: touch;
    display: flex !important;
    flex-direction: column !important;
    padding: 8px 12px 16px 12px !important;
  }

  /* Inspector mobile panel head: no collapse chevron — replaced with Close (X) button.
     Chevron hidden; title + close button on the same row. */
  .xr-editor .xr-panel-inspector .xr-mobile-panel-head {
    padding: 10px 12px !important;
    position: relative;
  }
  .xr-editor .xr-panel-inspector .xr-mobile-panel-head__chevron {
    display: none !important;
  }

  /* New: Inspector sheet close (X) button — injected by Task 4 JS */
  .xr-editor .xr-panel-inspector .xr-sheet-close-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid var(--stroke-subtle) !important;
    background: var(--surface-panel-strong) !important;
    color: var(--text-primary) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    user-select: none !important;
  }
  .xr-editor .xr-panel-inspector .xr-sheet-close-btn:hover {
    background: var(--color-action) !important;
    color: var(--text-on-action) !important;
  }
  .xr-editor .xr-panel-inspector .xr-sheet-close-btn:focus-visible {
    outline: 2px solid var(--color-action) !important;
    outline-offset: 2px !important;
  }

  /* Remove non-viewport panels from the 1-col grid.
     UI39 T5 block already sets grid-template-areas: "viewport" (1 row) — we reinforce it here
     to ensure any stale multi-row grid rules above/below cannot win via source order.
     Also: explicitly UNSET grid-area on the 3 sheets (they are all position:fixed; they do
     not need to participate in the editor layout grid at all). */
  .xr-editor .xr-editor-layout,
  :root[data-ui-mode="draft3d"] .xr-editor .xr-editor-layout,
  :root[data-ui-mode="draft3d"] .xr-editor.is-uvwide .xr-editor-layout,
  :root[data-ui-mode="texture"] .xr-editor .xr-editor-layout,
  :not(:root[data-ui-mode]) .xr-editor .xr-editor-layout {
    grid-template-areas: "viewport" !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 0 !important;
  }
  .xr-editor .xr-panel-tree,
  .xr-editor .xr-panel-surface,
  .xr-editor .xr-panel-inspector {
    grid-area: unset !important;
    place-self: auto !important;
  }
  /* Non-Texture modes: Surface panel (UV editing) is completely hidden in Focused.
     Only Texture mode can surface it via the :root.is-surface-open fixed sheet rule. */
  :root:not([data-ui-mode="texture"]) .xr-editor .xr-panel-surface {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* ================================================================
     Task 5: SCENE BROWSER — LEFT SHEET (default off, via .is-tree-open)
     ================================================================ */
  .xr-editor .xr-panel-tree {
    position: fixed !important;
    left: 0 !important;
    top: var(--app-header-h) !important;
    bottom: 0 !important;
    width: min(360px, 85vw) !important;
    max-width: 360px !important;
    max-height: calc(100vh - var(--app-header-h)) !important;
    z-index: 55 !important;
    background: var(--surface-panel) !important;
    border-right: 1px solid var(--stroke-subtle) !important;
    border-left: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: 6px 0 24px rgba(0, 0, 0, 0.12) !important;
    transform: translateX(-100%) !important;
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: transform;
    -webkit-overflow-scrolling: touch;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
    height: calc(100vh - var(--app-header-h)) !important;
    display: flex !important;
    flex-direction: column !important;
  }
  :root.is-tree-open .xr-editor .xr-panel-tree {
    transform: translateX(0%) !important;
  }
  .xr-editor .xr-panel-tree > .xr-mobile-panel-body {
    width: 100% !important;
    max-height: calc(100% - 44px) !important;
    flex: 1 1 auto !important;
    overflow: hidden auto !important;
    -webkit-overflow-scrolling: touch;
    display: flex !important;
    flex-direction: column !important;
    padding: 10px 12px 16px 12px !important;
  }
  /* Scene browser tree mobile head: keep chevron hidden; use for title only */
  .xr-editor .xr-panel-tree .xr-mobile-panel-head__chevron {
    display: none !important;
  }

  /* Sticky toggle button for Scene Browser (Task 5 JS injects inside viewport) */
  .xr-editor .xr-btn-tree-toggle {
    position: absolute !important;
    left: 12px !important;
    top: 12px !important;
    z-index: 45 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 6px !important;
    margin: 0 !important;
    gap: 4px !important;
    border: 1px solid var(--stroke-subtle) !important;
    background: var(--surface-panel) !important;
    color: var(--text-primary) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    user-select: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  }
  .xr-editor .xr-btn-tree-toggle:hover,
  .xr-editor .xr-btn-tree-toggle.is-active {
    background: var(--color-action) !important;
    color: var(--text-on-action) !important;
  }
  .xr-editor .xr-btn-tree-toggle:focus-visible {
    outline: 2px solid var(--color-action) !important;
    outline-offset: 2px !important;
  }
  .xr-editor .xr-btn-tree-toggle__icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .xr-editor .xr-btn-tree-toggle__icon span {
    display: block;
    width: 16px;
    height: 2px;
    background: currentColor;
    position: relative;
  }
  .xr-editor .xr-btn-tree-toggle__icon span::before,
  .xr-editor .xr-btn-tree-toggle__icon span::after {
    content: '';
    position: absolute;
    left: 0;
    width: 16px;
    height: 2px;
    background: currentColor;
  }
  .xr-editor .xr-btn-tree-toggle__icon span::before { top: -5px; }
  .xr-editor .xr-btn-tree-toggle__icon span::after  { top:  5px; }

  /* NOTE: 1-col grid + grid-area:unset rules for all panels are DECLARED ONCE at line 7397 above
     (shared between Inspector/Tree panels). This block contained a stale 2-row grid-template-areas
     ("viewport" + "surface") that would have won via source order — REMOVED. */


  /* ================================================================
     Task 6: SURFACE — shared bottom-sheet with Inspector in Texture mode
     (non-Texture: Surface is hidden inline below viewport)
     ================================================================ */
  :root[data-ui-mode="texture"].is-surface-open .xr-editor .xr-panel-surface {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 50vh !important;
    z-index: 61 !important;
    background: var(--surface-panel) !important;
    border-top: 1px solid var(--stroke-subtle) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.14) !important;
    transform: translateY(0%) !important;
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: transform;
    -webkit-overflow-scrolling: touch;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
  :root[data-ui-mode="texture"]:not(.is-surface-open) .xr-editor .xr-panel-surface {
    transform: translateY(100%) !important;
  }
  .xr-editor .xr-panel-surface > .xr-mobile-panel-body {
    width: 100% !important;
    max-height: calc(50vh - 44px) !important;
    height: auto !important;
    flex: 1 1 auto !important;
    overflow: hidden auto !important;
    -webkit-overflow-scrolling: touch;
    display: flex !important;
    flex-direction: column !important;
    padding: 8px 12px 16px 12px !important;
  }
  /* Texture Surface head: chevron hidden (future: tabs with Inspector here) */
  .xr-editor .xr-panel-surface .xr-mobile-panel-head__chevron {
    display: none !important;
  }
}

/* 5.2 Viewport
   - `.xr-three-wrap` isolates the WebGL canvas so side panels can scroll without
     affecting the renderer sizing logic.
   - The wrapper is `position: relative` so transient overlays (future: guides)
     can be positioned over the canvas without leaving the viewport column. */
.xr-editor .xr-panel-viewport {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-base);
  grid-area: viewport;
}

.xr-editor .xr-panel-surface {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  position: relative;
  background: var(--surface-panel);
  border-left: 1px solid var(--stroke-subtle);
  border-right: 1px solid var(--stroke-subtle);
  grid-area: surface;
}

.xr-editor .xr-panel-surface::after {
  content: '';
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  height: 22px;
  display: block;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0), var(--surface-panel));
  opacity: 0;
}

.xr-editor .xr-panel-surface[data-scrollable="true"]::after {
  opacity: 1;
}

/* 5.3 Inspector
   Anatomy:
   - Accordion sections: `.xr-inspector-section` (state via [data-collapsed]).
   - Section header is the single click target; body uses `gap` for vertical
     rhythm, avoiding ad-hoc margin utilities.
   Why an accordion:
   - Keeps the panel narrow and scannable while allowing “deep” tool UIs
     (Texture + Image) to live in one place. */
.xr-editor .xr-panel-inspector {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  position: relative;
  background: var(--surface-panel);
  border-left: 1px solid var(--stroke-subtle);
  grid-area: inspector;
}

@media (pointer: coarse) {
  .xr-editor .xr-viewport-hud__preview {
    display: flex;
  }

  .xr-editor.is-mobile-preview .xr-editor-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "viewport";
  }

  .xr-editor.is-mobile-preview .xr-panel-surface,
  .xr-editor.is-mobile-preview .xr-panel-tree,
  .xr-editor.is-mobile-preview .xr-panel-inspector {
    display: none;
  }
}

.xr-editor .xr-panel-inspector::after {
  content: '';
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  height: 22px;
  display: block;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0), var(--surface-panel));
  opacity: 0;
}

.xr-editor .xr-panel-inspector[data-scrollable="true"]::after {
  opacity: 1;
}

.xr-editor .xr-inspector {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  gap: 0;
}

.xr-editor .xr-inspector-section {
  background: transparent;
  border: none;
}

.xr-editor .xr-inspector-section + .xr-inspector-section {
  border-top: var(--bw-thin) solid var(--stroke-subtle);
  padding-top: 4px;
}

.xr-editor .xr-inspector-section__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 12px 6px 12px;
  border-radius: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  user-select: none;
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-label);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 0.92;
  gap: 12px;
}

.xr-editor .xr-inspector-section__body {
  padding: 10px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.xr-editor .xr-inspector-divider {
  border: none;
  border-top: 1px solid var(--stroke-subtle);
  margin: 6px 0;
}

.xr-editor .xr-surface-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.xr-editor .xr-surface-section-title {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 14px 0 8px;
}

.xr-editor .xr-surface-section-subtitle {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 10px 0 6px;
}

.xr-editor .xr-uv-field-label {
  display: block;
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 10px 0 4px;
}

.xr-editor .xr-surface-section-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
  margin: 2px 0 0;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
}

.xr-editor .xr-surface-section-toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: var(--focus-offset);
  border-radius: 8px;
}

.xr-editor .xr-surface-section-toggle .xr-inspector-section__chevron {
  transition: transform 160ms ease;
}

.xr-editor .xr-surface-section-toggle[aria-expanded="false"] .xr-inspector-section__chevron {
  transform: rotate(-90deg);
}

.xr-editor .xr-panel-surface .xr-draw-wrap.is-collapsed {
  height: 180px;
  min-height: 180px;
  aspect-ratio: auto;
}

.xr-editor .xr-panel-surface #inspector-surface > .xr-inspector-section__header {
  display: none !important;
}

.xr-editor .xr-panel-surface #inspector-surface {
  border-top: none;
  padding-top: 0;
}

.xr-editor .xr-panel-surface #inspector-surface > .xr-inspector-section__body {
  display: block !important;
  padding-top: 0;
}

.xr-editor .xr-panel-surface #imgXformHint {
  padding: 4px 8px;
  margin: 6px 0 0;
}

.xr-editor .xr-panel-surface #surfaceImgXformControls {
  margin: 8px 0 2px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.xr-editor .xr-panel-surface .xr-field-row + .xr-field-slider {
  margin-top: 2px;
  margin-bottom: 4px;
}

.xr-editor .xr-panel-surface .xr-field-slider:last-of-type {
  margin-bottom: 0;
}

.xr-editor #btn-import-image {
  margin: 0 0 4px;
}

.xr-editor .xr-panel-surface #imgXformHint:not([hidden]) {
  display: block;
}

.xr-editor .xr-inspector-typehead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 10px;
}

.xr-editor .xr-inspector-typehead__icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

.xr-editor .xr-inspector-typehead__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.xr-editor .xr-inspector-typehead__type {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-title);
  font-weight: 700;
  color: var(--text-primary);
}

.xr-editor .xr-inspector-typehead__name {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xr-editor .xr-inspector-typehead__nameval {
  color: var(--text-primary);
  font-weight: 600;
}

.xr-editor .xr-transform-reset-row {
  margin: 0 0 10px;
}

.xr-editor .xr-scale-lock-row {
  display: flex;
  justify-content: center;
  margin: 6px 0 8px;
}

.xr-editor .xr-scale-lock-btn {
  width: 26px;
  height: 22px;
  border: 1px solid var(--stroke-subtle);
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.xr-editor .xr-scale-lock-btn.is-active {
  border-color: var(--color-action);
  color: var(--color-action);
  background: var(--surface-panel-strong);
}

.xr-editor .xr-menu-confirm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.xr-editor .xr-menu-confirm__msg {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
}

.xr-editor .xr-transform-scale-hint {
  margin: 10px 0 0;
}

.xr-editor .xr-selected-row .xr-field-label {
  opacity: 0.85;
}

.xr-editor .xr-selected-row .xr-field-value {
  font-weight: 700;
}

.xr-editor .xr-inspector-section[data-collapsed="true"] .xr-inspector-section__body {
  display: none;
}

.xr-editor .xr-inspector-section__chevron {
  width: 14px;
  height: 14px;
  -webkit-mask-size: 14px 14px;
  mask-size: 14px 14px;
  color: var(--color-text);
  opacity: 0.92;
  flex: 0 0 auto;
  margin-right: 2px;
}

.xr-editor .xr-panel-surface .xr-draw-wrap {
  height: 320px;
  flex: 0 0 auto;
  position: relative;
}
.xr-editor .xr-panel-surface .xr-draw-wrap.is-collapsed {
  height: 320px;
  min-height: 320px;
  aspect-ratio: auto;
}

.xr-editor .xr-panel-surface #surfaceImgXformControls[hidden] {
  display: flex !important;
}

.xr-editor .xr-panel-surface .xr-draw-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
  position: absolute;
  inset: 0;
  box-sizing: border-box;
}

.xr-editor .xr-panel-inspector .xr-toolbar,
.xr-editor .xr-panel-surface .xr-toolbar {
  border-top: none;
  border-bottom: 1px solid var(--stroke-subtle);
}

.xr-editor .xr-arch-panel {
  width: 180px;
  background: var(--surface-panel);
  border-right: 1px solid var(--stroke-subtle);
  overflow-y: auto;
  flex-shrink: 0;
}

.xr-editor .xr-arch-panel::-webkit-scrollbar { width: 4px; }
.xr-editor .xr-arch-panel::-webkit-scrollbar-track { background: transparent; }
.xr-editor .xr-arch-panel::-webkit-scrollbar-thumb { background: var(--color-muted); border-radius: 2px; }

.xr-editor .xr-arch-category {
  padding: 10px 12px 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: var(--font-primary), var(--font-fallback);
  position: sticky;
  top: 0;
  background: var(--surface-panel);
  z-index: var(--z-base);
  border-top: 1px solid var(--stroke-subtle);
}

.xr-editor .xr-arch-category:first-child { border-top: none; }

.xr-editor .xr-arch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 0 8px 8px;
}

.xr-editor .xr-arch-item {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface-panel-strong);
  border: 1px solid var(--stroke-subtle);
  border-radius: 0px;
  padding: 8px 4px 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
  font: inherit;
  color: inherit;
}

.xr-editor .xr-arch-item:hover { border-color: var(--color-muted); background: var(--surface-panel); }
.xr-editor .xr-arch-item.is-active {
  border-color: var(--color-action);
  background: var(--surface-panel);
}

.xr-editor .xr-arch-item__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.xr-editor .xr-arch-item__icon canvas { display: block; }

.xr-editor .xr-arch-item__label {
  font-size: 9px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0.04em;
}

.xr-editor .xr-arch-item.is-active .xr-arch-item__label { color: var(--color-action); }


.xr-editor .xr-draw-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.xr-editor .xr-img-zoom-bar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px 0 4px;
  margin: 0;
}
.xr-editor .xr-img-zoom-bar .xr-ctl-btn {
  min-width: 36px;
  padding: 6px 12px;
}

.xr-ctl-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: 100%;
}

.xr-ctl-label__text {
  font-size: var(--fs-small);
  color: var(--color-muted);
}

.xr-editor #imageCanvas,
.xr-editor #uvOverlay {
  display: block;
  position: absolute;
  inset: 0;
  box-shadow: none;
}

.xr-editor #imageCanvas { cursor: grab; }
.xr-editor #imageCanvas:active { cursor: grabbing; }
.xr-editor #imageCanvas { touch-action: none; }

.xr-editor #uvOverlay {
  pointer-events: none;
}

.xr-editor.is-uv-edit #uvOverlay {
  pointer-events: auto;
  cursor: crosshair;
}

.xr-editor.is-uv-edit #imageCanvas {
  cursor: default;
}

.xr-editor #threeCanvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  touch-action: none;
}

.xr-editor .xr-three-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.xr-editor .xr-viewport-hud {
  position: absolute;
  inset: 0;
  padding: 12px;
  pointer-events: none;
}

.xr-editor .xr-viewport-hud__gizmo {
  position: absolute;
  top: 12px;
  right: 12px;
  pointer-events: auto;
  z-index: var(--z-hud-raise);
}

.xr-editor .xr-viewport-hud__viewport {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 288px;
  pointer-events: auto;
  z-index: var(--z-hud-base);
}

.xr-editor .xr-viewport-hud__view {
  position: absolute;
  left: 12px;
  bottom: 12px;
  pointer-events: auto;
  max-width: calc(100% - 24px);
  z-index: var(--z-hud-base);
}

.xr-editor .xr-viewport-hud__caption {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-label);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 8px;
  pointer-events: auto;
  display: inline-block;
  padding: 6px 10px;
  background: var(--surface-panel);
  border: var(--bw-thin) solid var(--stroke-subtle);
  opacity: 0.92;
}

.xr-editor .xr-viewport-scale {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: var(--z-hud-base);
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-label);
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface-panel);
  border: var(--bw-thin) solid var(--stroke-subtle);
  padding: 6px 10px;
  pointer-events: none;
  user-select: none;
  opacity: 0.92;
}

.xr-editor .xr-ctl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.xr-editor .xr-ctl-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: block;
  color: currentColor;
}
.xr-editor .xr-ctl-btn__label {
  display: inline-block;
  white-space: nowrap;
}

/* HUD button labels: HIDE ONLY IN FOCUSED ONLY (≤1159).
   In Wide + Compact (≥1160) HUD buttons show ICON + TEXT (full label).
   Texture mode always hides button labels (rule below at line 8263 overrides compact/wide independently). */
@media (max-width: 1159px) {
  .xr-editor .xr-viewport-hud .xr-ctl-btn__label {
    display: none !important;
  }
  .xr-editor .xr-viewport-hud .xr-ctl-btn {
    padding: 8px 10px;
    min-width: 36px;
    gap: 0;
  }
  .xr-editor .xr-img-zoom-bar .xr-ctl-btn__label {
    display: none !important;
  }
}

:root[data-ui-mode="texture"] .xr-editor .xr-viewport-hud .xr-ctl-btn__label {
  display: none !important;
}
:root[data-ui-mode="texture"] .xr-editor .xr-viewport-hud .xr-ctl-btn {
  padding: 8px 10px;
  min-width: 36px;
  gap: 0;
}
:root[data-ui-mode="texture"] .xr-editor .xr-viewport-hud .xr-viewport-hud__caption {
  display: none !important;
}
:root[data-ui-mode="texture"] .xr-editor .xr-viewport-hud .xr-status--viewport#statusText,
:root[data-ui-mode="texture"] .xr-editor .xr-viewport-hud .xr-status--viewport#viewportGeoStats {
  display: none !important;
}

.xr-editor .xr-viewport-dims {
  position: absolute;
  right: 12px;
  bottom: 44px;
  z-index: var(--z-hud-base);
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-label);
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface-panel);
  border: var(--bw-thin) solid var(--stroke-subtle);
  padding: 6px 10px;
  pointer-events: none;
  user-select: none;
  opacity: 0.92;
}

.xr-editor .xr-viewport-xform {
  position: absolute;
  z-index: var(--z-hud-top);
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-title);
  font-weight: 700;
  color: var(--text);
  background: var(--surface-panel);
  border: var(--bw-thin) solid var(--stroke-subtle);
  padding: 6px 10px;
  pointer-events: none;
  user-select: none;
  transform: translate(-50%, calc(-100% - 12px));
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.26);
  border-radius: 10px;
}

.xr-editor .xr-viewport-uv {
  position: absolute;
  right: 12px;
  bottom: 76px;
  z-index: var(--z-hud-base);
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-label);
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface-panel);
  border: var(--bw-thin) solid var(--stroke-subtle);
  padding: 6px 10px;
  pointer-events: none;
  user-select: none;
  opacity: 0.92;
}

.xr-editor .xr-viewport-hud__gizmo-row {
  display: flex;
  justify-content: flex-end;
  background: var(--surface-panel);
  border: var(--bw-thin) solid var(--stroke-subtle);
  padding: var(--ui-pad-hud);
  gap: var(--ui-pad-hud);
}

.xr-editor .xr-viewport-hud__preview {
  display: none;
}

.xr-editor .xr-viewport-hud__panel-row {
  justify-content: flex-start;
}

.xr-editor button.xr-color-swatch,
.xr-editor button.xr-bg-swatch {
  appearance: none;
  background: transparent;
  padding: 0;
}

.xr-editor .xr-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.xr-editor .xr-field-row.xr-layer-list-label {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--stroke-subtle);
}

.xr-editor .xr-field-row.xr-field-row--material-color {
  border-top: 1px solid var(--stroke-subtle);
  border-bottom: 1px solid var(--stroke-subtle);
  padding: 8px 0;
  margin: 8px 0;
}

.xr-editor .xr-field-label {
  font-size: var(--ui-fs-label);
  color: var(--text-muted);
  font-family: var(--font-primary), var(--font-fallback);
}

.xr-editor .xr-field-value {
  font-size: var(--ui-fs-label);
  color: var(--color-action);
  font-family: var(--font-primary), var(--font-fallback);
  min-width: 24px;
  border-radius: 0;
  text-align: right;
}

.xr-editor .xr-field-link {
  font-size: var(--ui-fs-label);
  color: var(--text-muted);
  font-family: var(--font-primary), var(--font-fallback);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.xr-editor .xr-field-link:hover {
  color: var(--text-primary);
}

.xr-editor .xr-help-text {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-label);
  line-height: 1.35;
  color: var(--text-muted);
  opacity: 0.95;
}

.xr-editor .xr-uv-hint {
  margin: 8px 0 10px;
}

.xr-editor .xr-uv-stretch-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 10px;
  font-size: var(--ui-fs-label);
  font-family: var(--font-primary), var(--font-fallback);
  color: var(--text-muted);
}

.xr-editor .xr-uv-stretch-legend__swatches {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.xr-editor .xr-uv-stretch-swatch {
  width: 12px;
  height: 8px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.xr-editor .xr-uv-stretch-swatch.is-s0 { background: rgba(0, 80, 255, 0.55); }
.xr-editor .xr-uv-stretch-swatch.is-s1 { background: rgba(0, 160, 255, 0.55); }
.xr-editor .xr-uv-stretch-swatch.is-s2 { background: rgba(0, 210, 120, 0.55); }
.xr-editor .xr-uv-stretch-swatch.is-s3 { background: rgba(255, 185, 0, 0.55); }
.xr-editor .xr-uv-stretch-swatch.is-s4 { background: rgba(255, 60, 0, 0.55); }

.xr-editor .xr-viewport-hud__viewport .xr-viewport-hud__panel-row {
  max-width: 320px;
}

.xr-editor input[type=range].xr-field-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: var(--color-muted);
  border-radius: 1px;
  outline: none;
}

.xr-editor input[type=range].xr-field-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-action);
  cursor: pointer;
}

.xr-editor input.xr-field-text {
  width: 100%;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--stroke-subtle);
  border-radius: 0px;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-label);
}

.xr-editor input.xr-field-text:focus {
  outline: none;
  border-color: var(--focus);
}

.xr-app :focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: var(--focus-offset);
}

.xr-editor .xr-ctl-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.xr-editor .xr-ctl-btn__hint {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);
  white-space: nowrap;
}

.xr-editor .xr-uv-wrap-row {
  display: block;
}

.xr-editor .xr-uv-wrap-row .xr-select {
  height: 28px;
  font-size: var(--ui-fs-label);
  letter-spacing: 0.04em;
  padding-left: 10px;
}

.xr-editor .xr-layer-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 10px;
}

.xr-editor .xr-layer-empty {
  margin: 2px 0 8px;
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 11px;
  color: var(--text-muted);
}

.xr-editor #imgRatio[disabled] {
  opacity: 0.5;
}

.xr-editor .xr-layer-row {
  display: grid;
  grid-template-columns: 26px 1fr auto auto auto auto auto auto;
  gap: 6px;
  align-items: center;
  padding: 6px;
  border: 1px solid var(--stroke-subtle);
  background: var(--surface-panel-strong);
  font-size: var(--ui-fs-label);
  line-height: 1.2;
  cursor: pointer;
}

.xr-editor .xr-layer-row.is-active {
  border-color: var(--color-action);
  background: var(--surface-panel);
}

.xr-editor .xr-layer-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xr-editor .xr-layer-vis,
.xr-editor .xr-layer-mask,
.xr-editor .xr-layer-rename,
.xr-editor .xr-layer-dup,
.xr-editor .xr-layer-move,
.xr-editor .xr-layer-del {
  height: 26px;
  min-width: 26px;
  padding: 0 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  color: inherit;
  cursor: pointer;
  line-height: 1;
  font-size: 14px;
}

.xr-editor .xr-layer-mask {
  height: 26px;
  padding: 0 8px;
  border-color: var(--stroke-subtle);
  border-radius: 0;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.xr-editor .xr-layer-mask.is-on {
  border-color: var(--color-action);
  background: var(--color-action);
  color: var(--color-bg);
}

.xr-editor .xr-layer-mask:hover {
  border-color: var(--stroke-strong);
  color: var(--text-primary);
}

.xr-editor .xr-layer-mask.is-on:hover {
  border-color: var(--color-action);
  color: var(--color-bg);
}

.xr-editor .xr-layer-del:hover {
  color: var(--status-danger);
}

.xr-editor .xr-layer-vis:disabled,
.xr-editor .xr-layer-mask:disabled,
.xr-editor .xr-layer-move:disabled,
.xr-editor .xr-layer-del:disabled {
  opacity: 0.4;
  cursor: default;
}

.xr-editor .xr-ctl-btn--full {
  width: 100%;
  justify-content: center;
}

.xr-editor .xr-ctl-btn {
  height: 30px;
  padding: 0 10px;
  background: transparent;
  border: var(--bw-bold) solid var(--color-text);
  border-radius: 0px;
  color: var(--color-text);
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-btn);
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.12s;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.xr-editor .xr-ctl-btn[role="switch"] {
  position: relative;
  padding-right: 40px;
}

.xr-editor .xr-ctl-btn[role="switch"]::after {
  content: "OFF";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--ui-fs-label);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  opacity: 0.92;
}

.xr-editor .xr-ctl-btn[role="switch"][aria-checked="true"] {
  border-color: var(--stroke-strong);
  color: var(--text-primary);
}

.xr-editor #btn-mobile-preview[aria-pressed="true"]::after,
.xr-editor #btn-wireframe[aria-pressed="true"]::after,
.xr-editor #btn-flatlight[aria-pressed="true"]::after {
  content: "ON";
  color: var(--text-primary);
  opacity: 0.95;
}

.xr-editor .xr-ctl-btn .xr-btn__icon {
  width: 14px;
  height: 14px;
  -webkit-mask-size: 14px 14px;
  mask-size: 14px 14px;
  flex: 0 0 auto;
}

.xr-editor #btn-tree-dup::before,
.xr-editor #btn-tree-up::before,
.xr-editor #btn-tree-down::before,
.xr-editor #btn-tree-del::before {
  content: none;
  display: none;
}

.xr-editor .xr-ctl-btn:hover { border-color: var(--color-muted); color: var(--color-text); background: var(--surface-panel-strong); }
.xr-editor .xr-ctl-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.xr-editor #btn-import-image:disabled {
  opacity: 0.6;
}
.xr-editor .xr-ctl-btn:disabled:hover {
  border-color: var(--stroke-subtle);
  color: var(--text-muted);
  background: transparent;
}
.xr-editor .xr-ctl-btn.is-active { border-color: var(--color-action); color: var(--color-action); background: var(--surface-panel-strong); }

@media (max-width: 1727px) {
  .xr-editor .xr-panel-tree .xr-tree-actions .xr-ctl-btn {
    padding: 0 6px;
    gap: 0;
    justify-content: center;
  }
  .xr-editor .xr-panel-tree .xr-tree-actions .xr-ctl-btn > span:not(.xr-btn__icon) {
    display: none !important;
  }
}

.xr-editor #btn-view-iso {
  border-style: dashed;
}

.xr-editor #btn-view-iso.is-active {
  border-style: solid;
}

.xr-editor .xr-part-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.xr-editor .xr-part-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px;
  align-items: center;
}

.xr-editor .xr-part-row.is-active .xr-part-select {
  border-color: var(--color-action);
  color: var(--color-action);
  background: var(--surface-panel-strong);
}

.xr-editor .xr-part-select {
  height: 22px;
  padding: 0 7px;
  background: transparent;
  border: 1px solid var(--stroke-subtle);
  border-radius: 0px;
  color: var(--text-muted);
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 9px;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.xr-editor .xr-part-mini {
  height: 22px;
  padding: 0 7px;
  background: transparent;
  border: 1px solid var(--stroke-subtle);
  border-radius: 0px;
  color: var(--text-muted);
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 9px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.xr-editor .xr-part-mini:hover,
.xr-editor .xr-part-select:hover {
  border-color: var(--color-muted);
  color: var(--color-text);
}

.xr-editor .xr-part-mini.is-danger:hover {
  border-color: var(--status-danger);
  color: var(--status-danger);
  background: rgba(180, 60, 60, 0.08);
}

.xr-editor .xr-bg-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.xr-editor .xr-bg-swatch {
  width: 20px;
  height: 20px;
  border-radius: 0px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.1s;
}

.xr-editor .xr-bg-swatch:hover { transform: scale(1.1); }
.xr-editor .xr-bg-swatch.is-active { border-color: var(--color-action); }

/* Menu toggle rows (Wireframe / Flat lighting) live outside the editor root.
   Anatomy:
   - `.xr-toggle-row` is a button row (label + visual switch).
   - `.xr-toggle-row__box` is the switch track + thumb (::after).
   State:
   - `.is-on` is the only modifier; JS toggles it based on the engine flags.
   Why a custom toggle:
   - Keeps consistent styling across browsers without shipping extra dependencies.
   - Uses a large hit target (the whole row) to be usable on touch devices. */
.xr-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.xr-toggle-row__box {
  width: 28px;
  height: 14px;
  background: var(--color-muted);
  border-radius: 7px;
  position: relative;
  transition: background 0.15s;
}

.xr-toggle-row__box::after {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--color-bg);
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left 0.15s;
}

.xr-toggle-row__box.is-on { background: var(--color-action); }
.xr-toggle-row__box.is-on::after { left: 16px; }

.xr-toggle-row__label {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-label);
  color: var(--text-muted);
}

/* =============================================================================
   6. Modals & Overlays (inside the editor)
   --------------------------------------------------------------------------
   Description: Editor-specific modals: export (GLB/USDZ), UV compare, mask,
   doodle, autosave. All use the dialog-overlay → dialog-surface structure
   defined in section 3.5, with contextual max-width/max-height. The doodle
   modal uses a canvas variant capped at min(44vh, 360px) to preserve controls
   on short viewports.
   ============================================================================= */

.xr-editor .xr-tooltip {
  position: fixed;
  background: var(--surface-panel);
  border: 1px solid var(--color-muted);
  border-radius: 0px;
  padding: 4px 8px;
  font-size: var(--ui-fs-label);
  color: var(--text-muted);
  font-family: var(--font-primary), var(--font-fallback);
  pointer-events: none;
  z-index: var(--z-tooltip);
  opacity: 0;
  transition: opacity 0.1s;
  white-space: nowrap;
}

.xr-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--surface-overlay);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: calc(var(--dialog-overlay-pad) + env(safe-area-inset-top));
  padding-right: calc(var(--dialog-overlay-pad) + env(safe-area-inset-right));
  padding-bottom: calc(var(--dialog-overlay-pad) + env(safe-area-inset-bottom));
  padding-left: calc(var(--dialog-overlay-pad) + env(safe-area-inset-left));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* The rename dialog is allowed to open from the live UV workspace.  The
   workspace is later in the document, so it would otherwise paint above this
   nested dialog despite the focus-trap stack being correct. */
#renameLayerModal.xr-modal-overlay {
  z-index: calc(var(--z-modal) + 1);
}

/* The overlay may have a larger safe-area padding than the base dialog
   calculation. Size this compact dialog from the overlay's available width,
   so its input and actions cannot escape a narrow phone viewport. */
.xr-rename-layer-modal {
  box-sizing: border-box;
  inline-size: min(420px, 100%);
  max-inline-size: 100%;
  min-inline-size: 0;
}

.xr-rename-layer-modal input.xr-field-text {
  box-sizing: border-box;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.xr-rename-layer-modal .xr-ctl-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.xr-rename-layer-modal .xr-modal__btn {
  inline-size: 100%;
  min-inline-size: 0;
  padding-inline: 10px;
}

@media (max-width: 359px) {
  .xr-rename-layer-modal .xr-ctl-row { grid-template-columns: 1fr; }
}

.xr-modal {
  background: var(--surface-panel);
  border: 1px solid var(--stroke-strong);
  border-radius: 0px;
  padding: var(--dialog-surface-pad);
  width: min(var(--dialog-max-w), calc(100vw - (var(--dialog-overlay-pad) * 2)));
  max-height: min(var(--dialog-max-h), calc(100vh - (var(--dialog-overlay-pad) * 2)));
  max-height: min(var(--dialog-max-h), calc(100dvh - (var(--dialog-overlay-pad) * 2)));
  overflow: auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--dialog-gap);
}

@media (max-height: 520px) {
  :root { --dialog-overlay-pad: 10px; }
  .xr-modal-overlay { align-items: flex-start; }
}

.xr-shortcuts-modal {
  max-width: 620px;
}

.xr-uv-compare-modal {
  max-width: 980px;
}

.xr-uv-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
}

.xr-uv-compare-tile {
  border: 1px solid var(--stroke-subtle);
  background: var(--surface-panel-strong);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.xr-uv-compare-tile__label {
  font-size: var(--ui-fs-label);
  color: var(--text-muted);
  font-family: var(--font-primary), var(--font-fallback);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.xr-uv-compare-svg {
  width: 100%;
  height: auto;
  display: block;
  background: transparent;
}

.xr-modal h2 {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--color-action);
  text-transform: uppercase;
  margin: 0;
}

.xr-modal p {
  font-size: 11px;
  color: var(--text-primary);
  line-height: 1.6;
  margin: 0;
}

.xr-shortcuts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.xr-shortcuts__row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 12px;
  align-items: baseline;
}

.xr-shortcuts__key {
  font-size: 11px;
  color: var(--text);
  line-height: 1.6;
}

.xr-shortcuts__desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.6;
}

.xr-kbd {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid var(--stroke-strong);
  background: var(--surface-panel-strong);
  color: var(--text);
  font-size: var(--ui-fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.xr-modal__btn {
  display: inline-block;
  height: 32px;
  padding: 0 20px;
  background: var(--surface-panel-strong);
  border: 1px solid var(--color-action);
  border-radius: 0px;
  color: var(--color-action);
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 11px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: all 0.12s;
}

.xr-modal__btn:hover { background: var(--color-action-hover); color: var(--color-bg); }

.xr-mask-modal .xr-modal__btn.is-active {
  background: var(--color-action);
  color: var(--color-bg);
}

.xr-mask-modal {
  box-sizing: border-box;
  inline-size: min(90dvw, 1200px);
  block-size: min(90dvh, 800px);
  max-inline-size: 1200px;
  max-block-size: 800px;
  min-block-size: 0;
  text-align: left;
  overflow: hidden;
}

/* Keep the mask preview inside the dialog's remaining editing area. The
   intrinsic 720×520 canvas is preserved rather than being stretched by a
   shrinking flex row, so a fitted image cannot appear cropped on open. */
.xr-mask-modal .xr-mask-canvas-wrap {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-block-size: 0;
  block-size: 0;
  overflow: hidden;
}

.xr-mask-modal .xr-mask-canvas-wrap > #maskCanvas {
  display: block;
  inline-size: auto;
  block-size: 100%;
  max-inline-size: 100%;
  max-block-size: 100%;
  aspect-ratio: 720 / 520;
  flex: 0 1 auto;
  object-fit: contain;
}

.xr-doodle-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.xr-doodle-modal {
  max-width: 920px;
  max-height: min(720px, calc(100dvh - (var(--dialog-overlay-pad) * 2)));
}

.xr-doodle-modal .xr-mask-canvas-wrap {
  max-height: min(44vh, 360px);
}

.xr-doodle-steps {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.xr-doodle-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--color-muted);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--ui-fs-label);
}

.xr-doodle-step.is-active {
  border-color: var(--color-action);
  color: var(--color-action);
}

.xr-doodle-step.is-active .xr-doodle-step__num {
  background: currentColor;
  border-color: currentColor;
  color: var(--color-bg);
}

.xr-doodle-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid currentColor;
  font-weight: 800;
  font-size: var(--ui-fs-label);
}

.xr-doodle-step__label {
  font-weight: 800;
}

.xr-doodle-help {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.6;
}

.xr-doodle-tool-toggle {
  width: 100%;
}

.xr-doodle-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.xr-doodle-load-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.xr-doodle-error {
  min-height: 14px;
  color: var(--status-danger);
  font-size: 11px;
  line-height: 1.4;
}

#doodleCanvas {
  width: 100%;
  height: auto;
  display: block;
  cursor: crosshair;
  touch-action: none;
}

.xr-mask-toolbar {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin: 6px 0 10px;
}

.xr-mask-select-tool,
.xr-mask-view-tool,
.xr-mask-presets {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 9px;
  border: 1px solid var(--color-muted);
  background: var(--surface-panel-strong);
}

.xr-mask-tool-label {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.xr-mask-select-tool__controls,
.xr-mask-view-tool__controls,
.xr-mask-presets__buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.xr-mask-select-tool__controls[data-mode="edit"] {
  opacity: 0.5;
}

.xr-mask-presets__hint {
  max-width: 260px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
}

.xr-mask-view-tool__hint {
  max-width: 260px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
}

.xr-mask-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border: 1px solid var(--color-muted);
  border-radius: 0;
  overflow: hidden;
  background: var(--surface-panel-strong);
}

.xr-mask-modal .xr-mask-toggle .xr-modal__btn {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  width: 120px;
}

.xr-mask-modal .xr-mask-toggle .xr-modal__btn.is-active,
.xr-doodle-modal .xr-mask-toggle .xr-modal__btn.is-active {
  background: var(--text-primary);
  color: var(--surface-base);
  box-shadow: none;
}

.xr-doodle-modal .xr-mask-toggle .xr-modal__btn {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  width: 100%;
  text-align: center;
  padding: 0 8px;
}

.xr-mask-scale {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 640px) {
  .xr-mask-select-tool,
  .xr-mask-view-tool,
  .xr-mask-presets { width: 100%; box-sizing: border-box; }
  .xr-mask-presets__hint,
  .xr-mask-view-tool__hint { max-width: none; }
}

.xr-mask-scale__label {
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.xr-mask-scale__val {
  min-width: 52px;
  text-align: center;
  color: var(--text-primary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.xr-mask-canvas-wrap {
  margin: 0;
  border: 1px solid var(--color-muted);
  background: var(--surface-panel-strong);
  flex: 1;
  min-height: 0;
  overflow: auto;
}

#maskCanvas {
  width: 100%;
  height: auto;
  display: block;
  cursor: crosshair;
  touch-action: none;
}

#maskCanvas.is-mode-select { cursor: grab; }
#maskCanvas.is-dragging { cursor: grabbing; }

.xr-mask-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
}

.xr-mask-actions__left,
.xr-mask-actions__right {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.xr-autosave-modal {
  text-align: left;
}

.xr-autosave-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.xr-autosave-close {
  width: 36px;
  min-width: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.xr-autosave-meta {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin: 8px 0 12px;
}

.xr-autosave-meta__row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  color: var(--text-muted);
  font-size: 11px;
}

.xr-autosave-meta__label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.xr-autosave-meta__value {
  color: var(--text-primary);
  font-weight: 700;
}

.xr-autosave-list {
  border: 1px solid var(--color-muted);
  background: var(--surface-panel-strong);
  max-height: min(46vh, 420px);
  overflow: auto;
  list-style: none;
  margin: 0;
  padding: 0;
}

.xr-autosave-entry {
  padding: 10px 10px;
  border-bottom: 1px solid var(--color-muted);
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.xr-autosave-entry:last-child { border-bottom: none; }

.xr-autosave-entry__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.xr-autosave-entry__title {
  font-size: var(--ui-fs-title);
  color: var(--text-primary);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xr-autosave-entry__sub {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xr-autosave-entry__actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.xr-autosave-settings {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
  align-items: center;
}

.xr-autosave-setting {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
}

.xr-autosave-setting__label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--text-muted);
}

.xr-autosave-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.xr-autosave-clear-confirm {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.xr-autosave-clear-confirm__actions {
  justify-content: flex-end;
}

.xr-editor .xr-rename-layer-error {
  margin: 8px 0 0;
}

.xr-editor .xr-doodle-apply-hint {
  margin-top: 8px;
}

.xr-editor .xr-color-input {
  width: 38px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--color-muted);
  background: transparent;
}

.xr-menu input:not([type]),
.xr-menu input[type="text"],
.xr-menu input[type="number"],
.xr-menu input[type="search"],
.xr-menu textarea,
.xr-editor input:not([type]),
.xr-editor input[type="text"],
.xr-editor input[type="number"],
.xr-editor input[type="search"],
.xr-editor textarea {
  background: var(--color-bg);
  color: var(--color-text);
}

.xr-menu input:not([type])::placeholder,
.xr-menu input[type="text"]::placeholder,
.xr-menu input[type="number"]::placeholder,
.xr-menu input[type="search"]::placeholder,
.xr-menu textarea::placeholder,
.xr-editor input:not([type])::placeholder,
.xr-editor input[type="text"]::placeholder,
.xr-editor input[type="number"]::placeholder,
.xr-editor input[type="search"]::placeholder,
.xr-editor textarea::placeholder {
  color: var(--color-muted);
}

/* =============================================================================
   UI41 BLOCK — 2026-09-02
   T1: Uniform Scale button SVG fill fix (UI39 fill:none overrode the chain fill)
       and active-label padding to prevent outer-border clipping
   T2: WASD banner moved from top centre to the bottom-left beside the View HUD
   T3: UV merge-section header spacer fix and compact padding
   ============================================================================= */

/* ---------- UI41 T1: Uniform chain SVG FIX (fill:none → fill=currentColor override + fit) ---------- */
:root #xreate-editor-root.xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn svg,
:root .xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn svg {
  fill: currentColor !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: start !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: none !important;
}
html[data-theme="light"] .xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="true"] svg,
html[data-theme="dark"]  .xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="true"] svg {
  fill: #1c1a16 !important; stroke: #1c1a16 !important;
}
html[data-theme="light"] .xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="false"] svg {
  fill: #1c1a16 !important; stroke: #1c1a16 !important;
}
html[data-theme="dark"]  .xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="false"] svg {
  fill: #ffffff !important; stroke: #ffffff !important;
}
@media (prefers-color-scheme: light) {
  html[data-theme="auto"] .xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="true"]  svg { fill: #1c1a16 !important; stroke: #1c1a16 !important; }
  html[data-theme="auto"] .xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="false"] svg { fill: #1c1a16 !important; stroke: #1c1a16 !important; }
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="true"]  svg { fill: #1c1a16 !important; stroke: #1c1a16 !important; }
  html[data-theme="auto"] .xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="false"] svg { fill: #ffffff !important; stroke: #ffffff !important; }
}

/* The active control uses `--surface-panel-strong`, which is dark in the
   dark theme.  The former light-theme value made ON appear almost invisible. */
html[data-theme="dark"] .xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="true"] .xr-scale-lock-btn__state,
html[data-theme="dark"] .xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="true"] svg {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="true"] .xr-scale-lock-btn__state,
  html[data-theme="auto"] .xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn[aria-pressed="true"] svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }
}
:root #xreate-editor-root.xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn,
:root .xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn {
  display: inline-grid !important;
  grid-template-columns: 20px 1fr auto !important;
  grid-template-rows: 34px !important;
  align-items: center !important;
  justify-items: start !important;
  column-gap: 8px !important;
  row-gap: 0 !important;
  padding: 0 12px 0 10px !important;
  margin: 0 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  justify-content: stretch !important;
  align-content: center !important;
  width: 140px !important;
  min-width: 140px !important;
  height: 38px !important;
  min-height: 38px !important;
}
:root #xreate-editor-root.xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn .xr-scale-lock-btn__state,
:root .xr-editor .xr-field-row.xr-scale-lock-row .xr-scale-lock-btn .xr-scale-lock-btn__state {
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: end !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  max-width: 92px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

/* ---------- UI41 T2: WASD banner at the bottom-left beside the View HUD. ---------- */
:root .xr-editor .xr-viewport-wasd-banner {
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: 12px !important;
  transform: none !important;
  margin-left: 438px !important;
}
@media (max-width: 1727px) {
  :root .xr-editor .xr-viewport-wasd-banner { margin-left: 360px !important; }
}
:root[data-ui-mode="texture"] .xr-editor .xr-viewport-wasd-banner {
  opacity: 1 !important;
}

/* ---------- UI41 T3: UV merged section HEAD spacer compact ---------- */
:root #xreate-editor-root.xr-editor .xr-inspector-section#inspector-uv-controls .xr-surface-section-head > span:first-child,
:root .xr-editor .xr-inspector-section#inspector-uv-controls .xr-surface-section-head > span:first-child {
  flex: 1 1 auto !important;
  display: block !important;
}

/* --- END UI41 BLOCK --- */

/* =============================================================================
   UI42 BLOCK — 2026-09-02
   T1: .xr-field-row.xr-scale-lock-row → uniform 8px padding
   T2: WASD banner → vertically aligned with the View caption (absolute)
   T3/T4: RENAME section Image transform → Texture Editing / Image zoom → Image Transform  [editor.html markup]
   T5: RENAME labels + ZOOM IN → + SCALE UP / − ZOOM OUT → − SCALE DOWN / 1:1 RESET ZOOM → 1:1 RESET SCALE
   T6: Removed the Diagnostics span (xr-uv-field-label uv_checker_label) [editor.html markup]
   ============================================================================= */

/* ---------- UI42 T1: Uniform Scale row container — uniform 8px padding. ---------- */
:root #xreate-editor-root.xr-editor .xr-field-row.xr-scale-lock-row,
:root .xr-editor .xr-inspector-section__body .xr-field-row.xr-scale-lock-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 8px 8px 8px 8px !important;
  margin: 2px 0 6px 0 !important;
  border-top: 1px solid var(--stroke-subtle) !important;
  flex-wrap: nowrap !important;
}

/* ---------- UI42 T2: WASD banner vertically aligned with the View caption. ---------- */
:root .xr-editor .xr-viewport-wasd-banner {
  top: auto !important;
  left: auto !important;
  right: auto !important;
  /* Bottom 12px aligns with the panel bottom; the View caption sits ~62px above. */
  bottom: 74px !important;
  transform: none !important;
  margin-left: 0 !important;
  position: absolute !important;
  left: 12px !important;
  margin-left: 420px !important;
  padding: 5px 12px !important;
  height: 26px !important;
  line-height: 16px !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  align-items: center !important;
  display: inline-flex !important;
}
@media (max-width: 1727px) {
  :root .xr-editor .xr-viewport-wasd-banner { margin-left: 350px !important; bottom: 74px !important; }
}
@media (max-width: 1159px) {
  :root .xr-editor .xr-viewport-wasd-banner { margin-left: 300px !important; bottom: 68px !important; font-size: 9px !important; letter-spacing: 0.14em !important; }
}

/* --- END UI42 BLOCK --- */

/* =============================================================================
   UI43 BLOCK — 2026-09-02
   T1: UV Mapping Projection and the info button share a static-title row
       (div wrapper; no empty span)
   T2: IMAGE → IMAGE MANAGEMENT above Import image [editor.html markup h3]
   T3: Lighter WASD banner and renamed navigation status label
   ============================================================================= */

/* ---------- UI43 T1: UV section static title row flex ---------- */
:root #xreate-editor-root.xr-editor .xr-inspector-section#inspector-uv-controls .xr-inspector-section__static-title-row,
:root .xr-editor .xr-inspector-section#inspector-uv-controls .xr-inspector-section__static-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  flex-wrap: nowrap !important;
  padding: 0 !important;
  margin: 0 !important;
}
:root #xreate-editor-root.xr-editor .xr-inspector-section#inspector-uv-controls .xr-inspector-section__static-title-row > h3.xr-inspector-section__static-title,
:root .xr-editor .xr-inspector-section#inspector-uv-controls .xr-inspector-section__static-title-row > h3.xr-inspector-section__static-title {
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
:root #xreate-editor-root.xr-editor .xr-inspector-section#inspector-uv-controls .xr-inspector-section__static-title-row > a.xr-info-btn,
:root .xr-editor .xr-inspector-section#inspector-uv-controls .xr-inspector-section__static-title-row > a.xr-info-btn {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* ---------- UI43 T3: Lighter WASD banner styling (hint). ---------- */
:root .xr-editor .xr-viewport-wasd-banner {
  font-weight: 400 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  opacity: 0.74 !important;
  font-size: 10px !important;
  border-width: 1px !important;
  background-color: color-mix(in srgb, var(--surface) 70%, transparent) !important;
}
@media (max-width: 1159px) {
  :root .xr-editor .xr-viewport-wasd-banner { opacity: 0.66 !important; font-size: 8.5px !important; letter-spacing: 0.16em !important; }
}

/* --- END UI43 BLOCK --- */

/* =============================================================================
   UI44 BLOCK — 2026-09-02
   T1: UV Mapping Projection static-title row uses 14|12|6|12 padding,
       matching the inspector-section header
   T2: UV section body uses consistent padding and a permanent 14px vertical gap
       (the :root 2-4-1 specificity keeps the rule in effect)
   T3: Surface and inspector columns align with 12px side padding and a
       consistent vertical gap between children
   ============================================================================= */

/* ---------- UI44 T1: Consistent UV section static-title-row padding. ---------- */
:root #xreate-editor-root.xr-editor .xr-inspector-section#inspector-uv-controls .xr-inspector-section__static-title-row,
:root .xr-editor .xr-inspector-section#inspector-uv-controls .xr-inspector-section__static-title-row {
  padding: 14px 12px 6px 12px !important;
  margin: 0 0 4px 0 !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* ---------- UI44 T2: UV body padding and a robust 14px vertical child gap. ---------- */
:root #inspector-uv-body.xr-inspector-section__body,
:root .xr-editor #inspector-uv-body.xr-inspector-section__body {
  padding: 6px 12px 14px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
}
/* Preserve vertical padding and margins between UV-body children, even when
   hidden help or hint items sit between visible controls. */
:root #inspector-uv-body.xr-inspector-section__body > :first-child {
  margin-top: 0 !important;
}
:root #inspector-uv-body.xr-inspector-section__body > * + * {
  margin-top: 14px !important;
}
:root #inspector-uv-body.xr-inspector-section__body > [hidden] + * {
  margin-top: 14px !important;
}
:root #inspector-uv-body.xr-inspector-section__body > [style*="display: none"] + * {
  margin-top: 14px !important;
}
:root #inspector-uv-body.xr-inspector-section__body > .xr-uv-wrap-row {
  margin-top: 2px !important;
}

/* ---------- UI44 T3: Consistent Surface body padding; retain display:block
   for item compatibility and add spacing through section margins. ---------- */
:root .xr-editor .xr-panel-surface #inspector-surface > .xr-inspector-section__body {
  padding: 0 12px 14px 12px !important;
}
:root .xr-editor .xr-panel-surface #inspector-surface > .xr-inspector-section__body > .xr-surface-section-title:first-child {
  margin-top: 14px !important;
}
:root .xr-editor .xr-panel-surface #inspector-surface > .xr-inspector-section__body > #drawWrap + .xr-surface-section-subtitle {
  margin-top: 14px !important;
}

/* --- UI46+ BUG#1 FIX: square buttons 0 radius override inline styles --- */
.xr-add-shape__item,
.xr-editor .xr-field-value,
.xr-editor .xr-editable-val,
.xr-editor .xr-tree-row__name,
.xr-editor .xr-inspector-section__header {
  border-radius: 0 !important;
}

/* --- UI49+ BUG#5 FIX: Transform Reset 3 buttons VERTICAL (max specificity wins over UI38 3-col) --- */
:root #xreate-editor-root.xr-editor #inspectorSections .xr-transform-reset-row,
:root #xreate-editor-root.xr-editor .xr-inspector-section .xr-ctl-row.xr-transform-reset-row,
:root .xr-editor #inspectorSections .xr-transform-reset-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto auto !important;
  grid-auto-flow: row !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 8px 0 0 0 !important;
  flex-wrap: nowrap !important;
  flex-direction: column !important;
  align-content: start !important;
}
:root #xreate-editor-root.xr-editor .xr-transform-reset-row > .xr-ctl-btn,
:root .xr-editor #inspectorSections .xr-transform-reset-row > button.xr-ctl-btn {
  width: 100% !important;
  grid-column: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 100% !important;
}

/* =============================================================
   UI51 DOODLE MODAL UX REFACTOR
   1. Fixed modal sizing (equal height across steps)
   2. Step indicator: active=filled num, completed=check, pending=outline, skipped=distinct
   3. Primary action styling for Apply
   4. Visual hierarchy: step-tabs > mode-toggle > tool-toggle
   5. Apply hint near the button
   6. Viewport containment
   ============================================================= */

/* --- 1. Fixed modal sizing: 90% viewport, capped at 1920px, equal across steps --- */
:root .xr-doodle-modal {
  width: min(90dvw, 1920px);
  height: min(90dvh, 1080px);
  max-width: 1920px;
  max-height: 1080px;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 14px 18px 12px;
}
:root .xr-doodle-modal .xr-doodle-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
:root #doodleStep1.xr-doodle-panel {
  justify-content: center;
  align-items: center;
  padding: 18px;
}
:root .xr-doodle-source-card {
  width: min(100%, 560px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: clamp(24px, 5dvh, 56px) clamp(22px, 5dvw, 64px);
  text-align: center;
  border: 1px solid var(--color-muted);
  background: var(--surface-panel);
}
:root .xr-doodle-source-card__icon {
  width: 62px;
  height: 62px;
  color: var(--color-action);
}
:root .xr-doodle-source-card__eyebrow {
  margin: 0;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .14em;
}
:root .xr-doodle-source-card .xr-doodle-help {
  max-width: 42ch;
  margin: 0;
}
:root .xr-doodle-source-card .xr-doodle-load-row {
  justify-content: center;
}
:root .xr-doodle-modal .xr-mask-canvas-wrap {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0908;
  border: 1px solid #000;
  padding: 0;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
:root .xr-doodle-modal .xr-mask-canvas-wrap > #doodleCanvas {
  display: block;
  aspect-ratio: 720 / 520;
  height: 100%;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  flex: 0 0 auto;
  box-sizing: border-box;
  margin: 0;
}

/* --- 6. Viewport overlay containment: prevent bg bleed --- */
:root .xr-modal-overlay {
  padding: 24px;
  box-sizing: border-box;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}
:root .xr-modal-overlay > .xr-modal {
  margin: 0;
}

/* --- 2. Step indicator full redesign --- */
:root .xr-doodle-steps {
  gap: 10px;
  margin: 4px 0 10px;
}
:root .xr-doodle-step {
  padding: 9px 14px;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 800;
  background: var(--surface-panel-strong);
  transition: border-color 0.15s, color 0.15s, background 0.15s, opacity 0.15s;
}
:root .xr-doodle-step__num {
  width: 20px;
  height: 20px;
  font-size: 11px;
  font-weight: 800;
  border-radius: 0;
  flex-shrink: 0;
}
:root .xr-doodle-step__check {
  display: none;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

/* --- Pending (default / upcoming): outline only, muted --- */
:root .xr-doodle-step {
  border-style: solid;
  border-width: 1px;
  border-color: var(--color-muted);
  color: var(--text-muted);
  opacity: 0.85;
}
:root .xr-doodle-step .xr-doodle-step__num {
  background: transparent;
  border: 1px solid currentColor;
  color: currentColor;
}

/* --- Active (current step): FILLED badge + high contrast --- */
:root .xr-doodle-step.is-active {
  border-color: var(--text-primary);
  color: var(--text-primary);
  background: var(--surface-panel-strong);
  opacity: 1;
}
:root .xr-doodle-step.is-active .xr-doodle-step__num {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--surface-base);
}
:root .xr-doodle-step.is-active .xr-doodle-step__check {
  display: none;
}

/* --- Completed (done with image loaded): CHECK mark visible, success tone --- */
:root .xr-doodle-step.is-completed {
  border-color: var(--text-primary);
  color: var(--text-primary);
  background: var(--surface-panel-strong);
  opacity: 1;
}
:root .xr-doodle-step.is-completed .xr-doodle-step__num {
  display: none;
}
:root .xr-doodle-step.is-completed .xr-doodle-step__check {
  display: inline-flex;
  color: currentColor;
}

/* --- Skipped (blank canvas chosen): DASHED border, neutral distinct --- */
:root .xr-doodle-step.is-skipped {
  border-style: dashed;
  border-color: var(--color-muted);
  color: var(--text-muted);
  background: transparent;
  opacity: 0.9;
}
:root .xr-doodle-step.is-skipped .xr-doodle-step__num {
  display: inline-flex;
  border-style: dashed;
  background: transparent;
  color: var(--text-muted);
  border-color: var(--color-muted);
}
:root .xr-doodle-step.is-skipped .xr-doodle-step__check {
  display: none;
}

/* --- 3. Primary action (Apply) distinct from Cancel/Back --- */
:root .xr-doodle-modal .xr-modal__btn.is-primary {
  background: var(--text-primary) !important;
  color: var(--surface-base) !important;
  border: 1px solid var(--text-primary) !important;
  font-weight: 800;
}
:root .xr-doodle-modal .xr-modal__btn.is-primary:hover:not(:disabled) {
  background: var(--color-action-hover) !important;
  color: var(--color-bg) !important;
}
:root .xr-doodle-modal .xr-modal__btn.is-primary:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: var(--text-primary) !important;
  color: var(--surface-base) !important;
}

/* --- 5. Apply hint next to the button (inline wrap) --- */
:root .xr-doodle-apply-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
:root .xr-doodle-apply-wrap .xr-doodle-apply-hint {
  margin: 0;
  padding: 0 2px;
  font-size: 10px;
  line-height: 1.3;
  white-space: nowrap;
}
:root .xr-editor .xr-doodle-apply-hint {
  color: var(--text-muted);
  text-align: left;
  min-height: 0;
  margin-left: 0;
}

/* --- 4. Visual hierarchy: 3 distinct segmented controls --- */

/* --- Level 1 (highest): STEP TABS — biggest, header-like --- */
:root .xr-doodle-step {
  height: auto;
  font-size: 11px;
  padding: 9px 16px;
}

/* --- Level 2 (mid): MODE toggle (Polygon / Mirror) — medium, bold separator --- */
:root .xr-doodle-modal > .xr-doodle-panel > .xr-mask-toggle:first-of-type {
  height: 40px;
  border-width: 1px;
  border-color: var(--text-primary);
  margin: 2px 0 4px;
  background: var(--surface-panel-strong);
}
:root .xr-doodle-modal > .xr-doodle-panel > .xr-mask-toggle:first-of-type .xr-modal__btn {
  height: 100%;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
:root .xr-doodle-modal > .xr-doodle-panel > .xr-mask-toggle:first-of-type .xr-modal__btn.is-active {
  background: var(--text-primary) !important;
  color: var(--surface-base) !important;
}

/* --- Level 3 (lowest): TOOL toggle (Draw / Move) — smaller, muted frame --- */
:root .xr-doodle-modal .xr-doodle-tool-toggle {
  width: auto !important;
  min-width: 150px;
  max-width: 180px;
  height: 32px;
  border: 1px solid var(--color-muted);
  background: var(--surface-panel-strong);
}
:root .xr-doodle-modal .xr-doodle-tool-toggle .xr-modal__btn {
  height: 100%;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0 8px;
}
:root .xr-doodle-modal .xr-doodle-tool-toggle .xr-modal__btn.is-active {
  background: var(--color-action) !important;
  color: var(--surface-base) !important;
}

/* =============================================================
   UI54 DOODLE — LABELED TOOLBAR GROUPS & EXPLICIT MODE CAPTIONS
   ============================================================= */

/* --- MODE GROUP (Trace Mode) — COMPACT ROW: label | caption | toggle --- */
:root .xr-doodle-mode-group {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto minmax(140px, 1fr);
  align-items: center;
  gap: 14px;
  padding: 6px 10px;
  border: 1px solid var(--text-primary);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--text-primary) 5%, var(--surface-panel-strong)),
    var(--surface-panel-strong));
}
:root .xr-doodle-mode-group > .xr-doodle-toolbar-group__head {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
  max-width: 170px;
}
:root .xr-doodle-mode-caption {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-muted);
  max-width: none;
}
:root .xr-doodle-mode-toggle {
  grid-column: 2;
  grid-row: 1;
  height: 34px;
  min-width: 0;
  width: min(100%, 420px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-width: 1px;
  border-color: var(--text-primary);
  background: var(--surface-panel-strong);
}
:root .xr-doodle-mode-toggle .xr-modal__btn {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  width: 100%;
  text-align: center;
  height: 100%;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 0 8px;
}
:root .xr-doodle-mode-toggle .xr-modal__btn.is-active {
  background: var(--text-primary) !important;
  color: var(--surface-base) !important;
  box-shadow: none;
}

:root .xr-doodle-toolbar-group__label {
  display: inline-block;
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-primary);
  line-height: 1;
  white-space: nowrap;
}

/* --- TOOLBAR: 3 gruppi logici (View / Tool / Edit) INLINE, label LEFT of body --- */
:root .xr-doodle-toolbar {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: stretch;
  margin: 0;
}
:root .xr-doodle-toolbar-group {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 10px;
  row-gap: 0;
  padding: 4px 8px;
  border: 1px solid var(--color-muted);
  background: var(--surface-panel-strong);
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
}
:root .xr-doodle-toolbar-group > .xr-doodle-toolbar-group__head {
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  padding-right: 6px;
  border-right: 1px solid var(--color-muted);
  min-height: 28px;
}
:root .xr-doodle-group-tool > .xr-doodle-toolbar-group__head {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  padding: 4px 8px 4px 6px;
}
:root .xr-doodle-toolbar-group > .xr-doodle-toolbar-group__body {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 0;
}
:root .xr-doodle-group-view {
  flex-grow: 2;
}
:root .xr-doodle-group-tool {
  flex-grow: 1.3;
  min-width: 320px;
}
:root .xr-doodle-group-edit {
  flex-grow: 1;
}
:root .xr-doodle-tool-hint {
  margin: 0;
  padding: 0;
  font-size: 9px;
  line-height: 1.3;
  color: var(--accent-0, #aa2416);
  font-weight: 600;
  letter-spacing: 0.02em;
}
:root .xr-doodle-tool-hint.is-hidden {
  display: none !important;
}
:root .xr-doodle-tool-toggle .xr-modal__btn.is-disabled,
:root .xr-doodle-tool-toggle .xr-modal__btn[disabled],
:root .xr-doodle-tool-toggle .xr-modal__btn[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: 0.55 !important;
  color: var(--text-muted) !important;
  background: var(--surface-panel-strong) !important;
  box-shadow: none !important;
  filter: grayscale(0.6) !important;
}
:root .xr-doodle-tool-toggle .xr-modal__btn.is-disabled.is-active,
:root .xr-doodle-tool-toggle .xr-modal__btn[disabled].is-active {
  background: var(--color-muted) !important;
  color: var(--text-secondary) !important;
}

/* --- Inside VIEW group: scale row compact --- */
:root .xr-doodle-group-view .xr-mask-scale {
  width: 100%;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
}
:root .xr-doodle-group-view .xr-mask-scale .xr-modal__btn {
  height: 28px;
  padding: 0 12px;
  font-size: 10.5px;
}
:root .xr-doodle-group-view .xr-mask-scale__label {
  font-size: 9.5px;
  letter-spacing: 0.15em;
}
:root .xr-doodle-group-view .xr-mask-scale__val {
  font-size: 10px;
  min-width: 44px;
}

/* --- Inside TOOL group: fix toggle height --- */
:root .xr-doodle-group-tool .xr-doodle-tool-toggle {
  height: 28px;
  min-width: 130px;
  max-width: none;
  width: 100%;
}
:root .xr-doodle-group-tool .xr-doodle-tool-toggle .xr-modal__btn {
  height: 100%;
  font-size: 10px;
}

/* --- Inside EDIT group: buttons 28px height compact --- */
:root .xr-doodle-group-edit .xr-doodle-toolbar-group__body {
  justify-content: flex-start;
  gap: 6px;
}
:root .xr-doodle-group-edit .xr-doodle-toolbar-group__body > .xr-modal__btn {
  height: 28px;
  padding: 0 10px;
  font-size: 10.5px;
}

/* --- Modal body help compact --- */
:root .xr-doodle-help {
  margin: 0;
  padding: 0 2px;
  font-size: 10px;
  line-height: 1.45;
}

/* --- Remove old selector dependency on :first-of-type (now explicit class) --- */
:root .xr-doodle-modal > .xr-doodle-panel > .xr-mask-toggle:first-of-type {
  height: auto;
  border: none;
  margin: 0;
  background: transparent;
}
:root .xr-doodle-modal > .xr-doodle-panel > .xr-mask-toggle:first-of-type .xr-modal__btn {
  height: auto;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}
:root .xr-doodle-modal > .xr-doodle-panel > .xr-mask-toggle:first-of-type .xr-modal__btn.is-active {
  background: inherit !important;
  color: inherit !important;
}

/* --- RESPONSIVE: narrow screens (mobile < 760) stack groups vertically --- */
@media (max-width: 760px) {
  :root .xr-doodle-toolbar {
    flex-direction: column;
  }
  :root .xr-doodle-group-view,
  :root .xr-doodle-group-tool,
  :root .xr-doodle-group-edit {
    min-width: 0;
    flex-grow: 1;
  }
}

/* --- END UI44 BLOCK --- */

/* =============================================================================
   PUBLIC RESPONSIVE BASELINE
   These final rules intentionally sit after the historical UI blocks. They
   define the small-screen contract in one place: one primary canvas, one
   active bottom sheet, and a header that never relies on horizontal clipping.
   ============================================================================= */

@media (max-width: 767px) {
  :root { --app-header-h: 112px; }

  .xr-app > .xr-header .xr-header__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 48px 48px;
    align-items: center;
    gap: 0;
    padding: 6px 10px;
  }

  .xr-app > .xr-header .xr-header__left,
  .xr-app > .xr-header .xr-header__right {
    width: 100%;
    min-width: 0;
  }

  .xr-app > .xr-header .xr-header__left {
    justify-content: space-between;
    gap: 8px;
  }

  .xr-app > .xr-header .xr-header__right {
    justify-content: flex-end;
    gap: 8px;
  }

  .xr-app > .xr-header .xr-header__brand {
    min-width: 0;
    gap: 7px;
  }

  .xr-app > .xr-header .xr-logo-mark { width: 20px; height: 20px; }
  .xr-app > .xr-header .xr-logo { font-size: 14px; }
  .xr-app > .xr-header .xr-header__tagline,
  .xr-app > .xr-header .xr-mode-bar__label { display: none; }

  .xr-app > .xr-header .xr-header__toolbar { gap: 6px; }
  .xr-app > .xr-header #btn-export-trigger .xr-btn__label,
  .xr-app > .xr-header #btn-app-menu .xr-btn__label { display: none; }
  .xr-app > .xr-header #btn-export-trigger,
  .xr-app > .xr-header #btn-app-menu {
    min-width: 38px;
    width: 38px;
    padding-inline: 8px;
  }
  .xr-app > .xr-header .xr-header__divider { display: none; }

  .xr-app > main,
  .xr-editor {
    height: 100dvh !important;
    min-height: 0 !important;
  }

  .xr-editor .xr-panel-viewport {
    top: var(--app-header-h) !important;
    min-height: max(360px, calc(100dvh - var(--app-header-h))) !important;
    height: max(360px, calc(100dvh - var(--app-header-h))) !important;
  }

  .xr-editor .xr-panel-tree {
    top: var(--app-header-h) !important;
    height: calc(100dvh - var(--app-header-h)) !important;
    max-height: calc(100dvh - var(--app-header-h)) !important;
    width: min(340px, 92vw) !important;
  }

  .xr-editor .xr-panel-inspector,
  :root[data-ui-mode="texture"].is-surface-open .xr-editor .xr-panel-surface {
    max-height: min(52dvh, 500px) !important;
  }

  .xr-editor .xr-panel-inspector > .xr-mobile-panel-body,
  .xr-editor .xr-panel-surface > .xr-mobile-panel-body {
    max-height: calc(min(52dvh, 500px) - 44px) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }

  /* The bottom HUD has the least room on a phone. Keep its buttons tappable,
     hide diagnostic readouts that are already exposed in the sheets, and
     avoid the old fixed left margin used by the WASD banner. */
  .xr-editor .xr-viewport-hud { padding: 8px; }
  .xr-editor .xr-viewport-hud__gizmo { top: 8px; right: 8px; }
  .xr-editor .xr-viewport-hud__viewport { top: 8px; left: 56px; right: 150px; }
  .xr-editor .xr-viewport-hud__view { left: 8px; bottom: 8px; max-width: calc(100% - 16px); }
  .xr-editor .xr-viewport-scale,
  .xr-editor .xr-viewport-dims,
  .xr-editor #statusText,
  .xr-editor #viewportGeoStats,
  .xr-editor .xr-viewport-wasd-banner { display: none !important; }
  .xr-editor .xr-viewport-hud__caption { display: none !important; }
  .xr-editor .xr-viewport-hud .xr-ctl-btn { min-width: 38px; min-height: 38px; }
}

/* Final touch-slider skin: the finger hit target stays generous while the
   visible track and thumb remain consistent with XReate's fine-line UI. */
:root #xreate-editor-root.xr-editor input[type="range"].xr-field-slider {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  cursor: pointer;
}
:root #xreate-editor-root.xr-editor input[type="range"].xr-field-slider::-webkit-slider-runnable-track {
  height: 3px;
  border: 0;
  border-radius: 2px;
  background: var(--color-muted);
}
:root #xreate-editor-root.xr-editor input[type="range"].xr-field-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px !important;
  height: 18px !important;
  margin-top: -7.5px;
  border: 2px solid var(--color-action) !important;
  border-radius: 50%;
  background: var(--surface-panel) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--surface-panel) 78%, transparent);
}
:root #xreate-editor-root.xr-editor input[type="range"].xr-field-slider::-moz-range-track {
  height: 3px;
  border: 0;
  border-radius: 2px;
  background: var(--color-muted);
}
:root #xreate-editor-root.xr-editor input[type="range"].xr-field-slider::-moz-range-thumb {
  width: 18px !important;
  height: 18px !important;
  border: 2px solid var(--color-action) !important;
  border-radius: 50%;
  background: var(--surface-panel) !important;
  box-shadow: none;
}

/* Phone modals are editing surfaces, not a desktop dialog squeezed into a
   phone. Keep their actions compact and reserve the remaining height for the
   actual drawing canvas. */
@media (max-width: 767px) {
  :root .xr-modal-overlay:has(.xr-doodle-modal),
  :root .xr-modal-overlay:has(.xr-mask-modal) {
    align-items: stretch !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  :root .xr-doodle-modal,
  :root .xr-mask-modal {
    width: 100dvw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 12px !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  :root .xr-doodle-modal .xr-doodle-steps { margin: 0 !important; gap: 6px !important; }
  :root .xr-doodle-modal .xr-doodle-step { min-height: 38px !important; padding: 6px 10px !important; }
  :root .xr-doodle-modal .xr-doodle-mode-group {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  :root .xr-doodle-modal .xr-doodle-mode-group > .xr-doodle-toolbar-group__head,
  :root .xr-doodle-modal #doodleStep2 > .xr-doodle-help,
  :root .xr-doodle-modal .xr-doodle-tool-hint { display: none !important; }
  :root .xr-doodle-modal .xr-doodle-mode-toggle {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    border: 1px solid var(--color-action) !important;
  }
  :root .xr-doodle-modal .xr-doodle-mode-toggle .xr-modal__btn {
    min-width: 0 !important;
    height: 40px !important;
    padding: 0 4px !important;
    font-size: 10px !important;
  }
  :root .xr-doodle-modal .xr-doodle-toolbar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin: 0 !important;
  }
  :root .xr-doodle-modal .xr-doodle-toolbar-group {
    display: block !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 5px !important;
  }
  :root .xr-doodle-modal .xr-doodle-group-view { grid-column: 1 / -1 !important; }
  :root .xr-doodle-modal .xr-doodle-toolbar-group > .xr-doodle-toolbar-group__head { display: none !important; }
  :root .xr-doodle-modal .xr-doodle-toolbar-group > .xr-doodle-toolbar-group__body {
    display: flex !important;
    justify-content: center !important;
    gap: 4px !important;
  }
  :root .xr-doodle-modal .xr-doodle-group-view .xr-mask-scale { justify-content: center !important; }
  :root .xr-doodle-modal .xr-doodle-toolbar .xr-modal__btn {
    height: 32px !important;
    min-width: 0 !important;
    padding: 0 8px !important;
    font-size: 10px !important;
  }
  :root .xr-doodle-modal .xr-mask-canvas-wrap {
    flex: 1 1 auto !important;
    min-height: 46svh !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  :root .xr-doodle-modal .xr-mask-actions { min-height: 42px !important; flex-wrap: nowrap !important; }
  :root .xr-doodle-modal .xr-mask-actions__left,
  :root .xr-doodle-modal .xr-mask-actions__right { display: flex !important; gap: 6px !important; }
  :root .xr-doodle-modal .xr-mask-actions .xr-modal__btn { height: 40px !important; padding-inline: 12px !important; }
  :root .xr-doodle-modal .xr-doodle-apply-hint { display: none !important; }

  :root .xr-mask-modal > h2 { font-size: 16px !important; }
  :root .xr-mask-modal .xr-mask-toolbar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin: 0 !important;
  }
  :root .xr-mask-modal .xr-mask-select-tool { grid-column: 1 / -1 !important; }
  :root .xr-mask-modal .xr-mask-select-tool,
  :root .xr-mask-modal .xr-mask-view-tool,
  :root .xr-mask-modal .xr-mask-presets {
    width: auto !important;
    min-width: 0 !important;
    padding: 6px !important;
    gap: 5px !important;
  }
  :root .xr-mask-modal .xr-mask-tool-label { display: none !important; }
  :root .xr-mask-modal .xr-mask-presets__hint,
  :root .xr-mask-modal .xr-mask-view-tool__hint,
  :root .xr-mask-modal #maskHelp { display: none !important; }
  :root .xr-mask-modal .xr-mask-select-tool__controls,
  :root .xr-mask-modal .xr-mask-view-tool__controls,
  :root .xr-mask-modal .xr-mask-presets__buttons { gap: 4px !important; }
  :root .xr-mask-modal .xr-modal__btn { height: 34px !important; min-width: 0 !important; padding: 0 10px !important; }
  :root .xr-mask-modal .xr-mask-toggle .xr-modal__btn { width: auto !important; }
  :root .xr-mask-modal .xr-mask-canvas-wrap {
    flex: 1 1 auto !important;
    min-height: 42svh !important;
    overflow: hidden !important;
  }
  :root .xr-mask-modal #maskCanvas {
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }
  :root .xr-mask-modal .xr-mask-actions { min-height: 42px !important; flex-wrap: nowrap !important; }
  :root .xr-mask-modal .xr-mask-actions__left,
  :root .xr-mask-modal .xr-mask-actions__right { display: flex !important; gap: 6px !important; }
}

/* Coarse-pointer tablets need the larger hit target without inheriting the
   iPhone visual scale. Kept at the end to win over historical slider skins. */
@media (min-width: 768px) and (pointer: coarse) {
  :root #xreate-editor-root.xr-editor input[type="range"] {
    min-height: 40px !important;
    padding-block: 8px !important;
    touch-action: pan-x !important;
  }
  :root #xreate-editor-root.xr-editor input[type="range"]::-webkit-slider-thumb {
    width: 24px !important;
    height: 24px !important;
  }
}

/* Large UV workspace portals the live canvases and controls into a dedicated
   editing surface. No state is duplicated, so layer selection and masks stay
   in sync with the standard Surface panel. */
.xr-uv-workspace-modal {
  inline-size: min(96dvw, 1680px);
  block-size: min(94dvh, 1100px);
  max-inline-size: 1680px;
  max-block-size: 1100px;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.5dvw, 24px);
  padding: clamp(14px, 1.8dvw, 28px);
  overflow: hidden;
}

.xr-uv-workspace__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex: 0 0 auto;
}

.xr-uv-workspace__head h2,
.xr-uv-workspace__controls h3,
.xr-uv-workspace__layers h3 {
  margin: 0;
}

.xr-uv-workspace__controls h3,
.xr-uv-workspace__layers h3 {
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-title);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.xr-uv-workspace__head .xr-help-text {
  max-inline-size: 720px;
  margin: 6px 0 0;
}

.xr-uv-workspace__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.46fr) minmax(300px, 0.54fr);
  min-block-size: 0;
  flex: 1 1 auto;
  gap: clamp(12px, 1.2dvw, 20px);
}

.xr-uv-workspace__canvas-region,
.xr-uv-workspace__controls,
.xr-uv-workspace__layers {
  min-inline-size: 0;
  min-block-size: 0;
  border: var(--bw-thin) solid var(--stroke-subtle);
  background: var(--color-bg);
}

.xr-uv-workspace__canvas-region {
  position: relative;
  overflow: hidden;
}

.xr-uv-workspace__canvas-host {
  block-size: 100%;
  min-block-size: clamp(420px, 72dvh, 860px);
}

#uvWorkspaceCanvasHost #drawWrap {
  position: relative;
  display: block !important;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 0;
  overflow: hidden;
  background: var(--color-bg);
  transition: transform 100ms ease-out;
}

#uvWorkspaceCanvasHost #drawWrap.is-uv-workspace-panning {
  cursor: grab;
  transition: none;
}

#uvWorkspaceCanvasHost #drawWrap.is-uv-workspace-panning:active { cursor: grabbing; }

#uvWorkspaceCanvasHost #drawWrap canvas {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100% !important;
  block-size: 100% !important;
  object-fit: contain;
}

#uvWorkspaceCanvasHost #imageCanvas { touch-action: none; }
#uvWorkspaceCanvasHost #uvOverlay { pointer-events: none; }

.xr-uv-workspace__view-tools {
  position: absolute;
  inset: 12px auto auto 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  max-inline-size: calc(100% - 24px);
  padding: 5px;
  border: 1px solid var(--stroke-subtle);
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--color-text) 15%, transparent);
}

.xr-uv-workspace__view-label {
  padding: 0 5px 0 3px;
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.xr-uv-workspace__wheel-label {
  margin-inline-start: 4px;
  padding-inline-start: 8px;
  border-inline-start: 1px solid var(--stroke-subtle);
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.xr-uv-workspace__view-btn,
.xr-uv-workspace__zoom-value {
  display: inline-grid;
  place-items: center;
  block-size: 28px;
  min-inline-size: 28px;
  margin: 0;
  padding: 0 7px;
  border: 1px solid var(--color-text);
  border-radius: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.xr-uv-workspace__view-btn { cursor: pointer; }
.xr-uv-workspace__zoom-value { min-inline-size: 48px; }
.xr-uv-workspace__view-btn--fit { min-inline-size: 34px; }
.xr-uv-workspace__view-btn--pan { min-inline-size: 40px; }

.xr-uv-workspace__view-btn:hover,
.xr-uv-workspace__view-btn:focus-visible,
.xr-uv-workspace__view-btn[aria-pressed="true"] {
  background: var(--color-text);
  color: var(--color-bg);
}

.xr-uv-workspace__wheel-switch {
  display: inline-flex;
  border: 1px solid var(--color-text);
}

.xr-uv-workspace__wheel-btn {
  block-size: 28px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.xr-uv-workspace__wheel-btn + .xr-uv-workspace__wheel-btn { border-inline-start: 1px solid var(--color-text); }
.xr-uv-workspace__wheel-btn[aria-pressed="true"] { background: var(--color-text); color: var(--color-bg); }

.xr-uv-workspace__controls,
.xr-uv-workspace__layers {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  overflow: auto;
}

#uvWorkspaceTransformHost,
#uvWorkspaceLayersHost {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#uvWorkspaceTransformHost .xr-img-zoom-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

#uvWorkspaceTransformHost .xr-img-zoom-bar .xr-ctl-btn {
  inline-size: auto !important;
  min-inline-size: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  block-size: 38px !important;
  min-block-size: 38px !important;
  padding: 4px 7px !important;
  border: var(--bw-bold) solid var(--color-text) !important;
  border-radius: 0 !important;
  font-family: var(--font-primary), var(--font-fallback) !important;
  font-size: var(--ui-fs-btn) !important;
  font-weight: 700 !important;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-color: var(--color-text) !important;
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
}

#uvWorkspaceTransformHost .xr-img-zoom-bar .xr-ctl-btn__hint {
  display: block !important;
  text-align: center;
  white-space: normal;
  font-family: var(--font-primary), var(--font-fallback) !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}

#uvWorkspaceTransformHost #btn-img-zoom-reset .xr-ctl-icon { display: none; }

#uvWorkspaceTransformHost #surfaceImgXformControls {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

#uvWorkspaceTransformHost .xr-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
}
#uvWorkspaceTransformHost .xr-field-label {
  color: var(--text-muted);
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-label);
  font-weight: 400;
  line-height: 1.2;
}
#uvWorkspaceTransformHost .xr-field-slider { margin: 0 0 5px; }
#uvWorkspaceTransformHost .xr-field-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 78px;
  block-size: 36px;
  padding: 0 10px;
  border: 2px solid var(--color-text);
  border-radius: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-label);
  font-weight: 800;
  letter-spacing: 0.02em;
}

#uvWorkspaceTransformHost input[type="range"].xr-field-slider {
  appearance: none;
  block-size: 26px;
  min-block-size: 26px;
  padding: 0;
  background: transparent;
}

#uvWorkspaceTransformHost input[type="range"].xr-field-slider::-webkit-slider-runnable-track {
  block-size: 4px;
  border: 0;
  background: color-mix(in srgb, var(--color-text) 34%, var(--color-bg));
}

#uvWorkspaceTransformHost input[type="range"].xr-field-slider::-webkit-slider-thumb {
  inline-size: 14px;
  block-size: 14px;
  margin-top: -5px;
  border: 2px solid var(--color-text);
  border-radius: 50%;
  background: var(--color-bg);
  appearance: none;
}

#uvWorkspaceTransformHost input[type="range"].xr-field-slider::-moz-range-track {
  block-size: 4px;
  border: 0;
  background: color-mix(in srgb, var(--color-text) 34%, var(--color-bg));
}

#uvWorkspaceTransformHost input[type="range"].xr-field-slider::-moz-range-thumb {
  inline-size: 12px;
  block-size: 12px;
  border: 2px solid var(--color-text);
  border-radius: 50%;
  background: var(--color-bg);
}
#uvWorkspaceLayersHost .xr-layer-list {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  gap: 6px;
  margin: 0;
}

#uvWorkspaceLayersHost .xr-layer-row {
  display: grid;
  grid-template-columns: 26px minmax(58px, 1fr) auto auto auto auto auto auto;
  gap: 4px;
  align-items: center;
  padding: 6px;
  border: 1px solid var(--stroke-subtle);
  background: var(--surface-panel-strong);
  color: var(--color-text);
  font-family: var(--font-primary), var(--font-fallback);
  font-size: var(--ui-fs-label);
  line-height: 1.2;
  cursor: pointer;
}

#uvWorkspaceLayersHost .xr-layer-row.is-active {
  border-color: var(--color-action);
  background: var(--surface-panel);
}

#uvWorkspaceLayersHost .xr-layer-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#uvWorkspaceLayersHost .xr-layer-vis,
#uvWorkspaceLayersHost .xr-layer-mask,
#uvWorkspaceLayersHost .xr-layer-rename,
#uvWorkspaceLayersHost .xr-layer-dup,
#uvWorkspaceLayersHost .xr-layer-move,
#uvWorkspaceLayersHost .xr-layer-del {
  min-inline-size: 26px;
  block-size: 26px;
  padding: 0 4px;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

#uvWorkspaceLayersHost .xr-layer-mask {
  min-inline-size: 50px;
  block-size: 26px;
  border: 2px solid var(--color-text);
  background: var(--color-text);
  color: var(--color-bg);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#uvWorkspaceLayersHost .xr-layer-mask.is-on {
  border-color: var(--color-action);
  background: var(--color-action);
  color: var(--color-bg);
}

#uvWorkspaceLayersHost #btn-import-image {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 38px;
  block-size: 38px;
  margin: 0;
  padding: 0 12px;
  border: 2px solid var(--color-text);
  border-radius: 0 !important;
  background: var(--color-text);
  color: var(--color-bg);
  font-family: var(--font-primary), var(--font-fallback);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#uvWorkspaceLayersHost .xr-layer-vis:disabled,
#uvWorkspaceLayersHost .xr-layer-mask:disabled,
#uvWorkspaceLayersHost .xr-layer-move:disabled,
#uvWorkspaceLayersHost .xr-layer-del:disabled {
  opacity: 0.4;
  cursor: default;
}

/* The launcher remains easy to find without behaving like a destructive full-width action. */
.xr-editor .xr-panel-surface .xr-uv-workspace-btn {
  align-self: center;
  inline-size: min(220px, calc(100% - 32px)) !important;
  width: min(220px, calc(100% - 32px)) !important;
  min-block-size: 34px;
  block-size: 34px;
  margin: 12px auto 20px;
  padding-inline: 10px;
  border-radius: 0 !important;
  font-size: var(--ui-fs-btn);
  letter-spacing: 0.11em;
}

.xr-uv-workspace-btn__icon {
  inline-size: 14px;
  block-size: 14px;
  flex: 0 0 14px;
}

@media (max-width: 1080px) {
  .xr-uv-workspace__layout {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.42fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .xr-uv-workspace__canvas-region { grid-row: 1 / span 2; }
}

@media (max-width: 767px) {
  #uvWorkspaceModal.xr-modal-overlay {
    align-items: flex-start;
    overflow: auto;
    padding: 8px;
  }

  #uvWorkspaceModal .xr-uv-workspace-modal {
    inline-size: 100%;
    block-size: auto;
    min-block-size: calc(100dvh - 16px);
    max-block-size: none;
  }

  .xr-uv-workspace__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }

  .xr-uv-workspace__canvas-region { grid-row: auto; }
  .xr-uv-workspace__canvas-host { min-block-size: min(58dvh, 560px); }
  .xr-uv-workspace__controls,
  .xr-uv-workspace__layers { overflow: visible; }
}

/* =============================================================================
   PHONE ACCORDION WORKBENCH
   -----------------------------------------------------------------------------
   A phone is not a reduced editor with alternate sheet names.  It is the same
   desktop workbench, stacked in reading order: viewport, Composition,
   Inspector, Surface.  The mode switch is intentionally absent because all
   relevant tools remain reachable through the three familiar accordions.
   ============================================================================= */
@media (max-width: 767px) {
  .xr-app > .xr-header .xr-header__mode-group,
  .xr-app > .xr-header .xr-header__divider { display: none !important; }

  :root #xreate-editor-root.xr-editor,
  :root #xreate-editor-root.xr-editor .xr-editor-layout {
    height: auto !important;
    overflow: visible !important;
  }
  :root #xreate-editor-root.xr-editor .xr-editor-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* The canvas is always the first, square work area; the advanced controls
     no longer cover it because their equivalent controls live in Inspector. */
  :root #xreate-editor-root.xr-editor .xr-panel-viewport {
    order: 1 !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: min(100vw, 520px) !important;
    min-height: min(100vw, 520px) !important;
    aspect-ratio: 1 / 1 !important;
    transform: none !important;
    overflow: hidden !important;
    display: flex !important;
  }
  .xr-editor .xr-panel-viewport > .xr-mobile-panel-body {
    display: flex !important;
    max-height: none !important;
    height: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
  }
  .xr-editor .xr-viewport-hud,
  .xr-editor .xr-btn-tree-toggle,
  .xr-editor .xr-viewport-wasd-banner,
  .xr-editor .xr-mobile-panel-dock { display: none !important; }

  /* Bring the three desktop side columns back into ordinary document flow. */
  :root #xreate-editor-root.xr-editor .xr-panel-tree,
  :root #xreate-editor-root.xr-editor .xr-panel-inspector,
  :root #xreate-editor-root.xr-editor .xr-panel-surface,
  :root[data-ui-mode="texture"] #xreate-editor-root.xr-editor .xr-panel-surface,
  :root[data-ui-mode="draft3d"] #xreate-editor-root.xr-editor .xr-panel-surface {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    transform: none !important;
    transition: none !important;
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow: visible !important;
    box-shadow: none !important;
    border-inline: 0 !important;
    border-top: 1px solid var(--stroke-subtle) !important;
  }
  .xr-editor .xr-panel-tree { order: 2 !important; }
  .xr-editor .xr-panel-inspector { order: 3 !important; }
  .xr-editor .xr-panel-surface { order: 4 !important; }

  /* Preserve desktop vocabulary and make the actual panel head the accordion
     trigger.  The injected sheet close buttons are meaningless in flow. */
  .xr-editor .xr-panel-tree > .xr-mobile-panel-head,
  .xr-editor .xr-panel-inspector > .xr-mobile-panel-head,
  .xr-editor .xr-panel-surface > .xr-mobile-panel-head {
    display: flex !important;
    min-height: 52px !important;
    padding: 14px 16px !important;
    cursor: pointer !important;
  }
  .xr-editor .xr-panel-tree .xr-mobile-panel-head__chevron,
  .xr-editor .xr-panel-inspector .xr-mobile-panel-head__chevron,
  .xr-editor .xr-panel-surface .xr-mobile-panel-head__chevron { display: inline-flex !important; }
  .xr-editor .xr-sheet-close-btn { display: none !important; }
  .xr-editor .xr-panel-tree > .xr-mobile-panel-body,
  .xr-editor .xr-panel-inspector > .xr-mobile-panel-body,
  .xr-editor .xr-panel-surface > .xr-mobile-panel-body {
    width: 100% !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    padding: 12px !important;
  }
  .xr-editor .xr-panel-tree > .xr-mobile-panel-body[data-collapsed="false"],
  .xr-editor .xr-panel-inspector > .xr-mobile-panel-body[data-collapsed="false"],
  .xr-editor .xr-panel-surface > .xr-mobile-panel-body[data-collapsed="false"] {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .xr-editor .xr-panel-tree > .xr-mobile-panel-body[data-collapsed="true"],
  .xr-editor .xr-panel-inspector > .xr-mobile-panel-body[data-collapsed="true"],
  .xr-editor .xr-panel-surface > .xr-mobile-panel-body[data-collapsed="true"] { display: none !important; }

  /* Mobile no longer switches workflows: components tagged draft or texture
     stay in their desktop panel and become visible when that accordion opens. */
  :root[data-ui-mode="draft3d"] #xreate-editor-root .xr-panel-inspector [data-ui-mode~="texture"],
  :root[data-ui-mode="texture"] #xreate-editor-root .xr-panel-inspector [data-ui-mode~="draft3d"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  :root #xreate-editor-root.xr-editor.is-empty-scene .xr-panel-tree > .xr-mobile-panel-head,
  :root #xreate-editor-root.xr-editor.is-empty-scene .xr-panel-inspector > .xr-mobile-panel-head,
  :root #xreate-editor-root.xr-editor.is-empty-scene .xr-panel-surface > .xr-mobile-panel-head {
    opacity: 0.52 !important;
    pointer-events: none !important;
  }
}

@media (max-width: 430px) {
  .xr-app > .xr-header .xr-logo { font-size: 13px; }
  .xr-app > .xr-header #btn-add-shape { min-width: 118px; padding-inline: 10px; }
  .xr-app > .xr-header #trae-mode-selector button { padding-inline: 10px; }
}

/* =============================================================================
   RESPONSIVE WORKBENCH — tablet and phone interaction contract
   -----------------------------------------------------------------------------
   Historical rules treated every width below 1160px as a phone and moved three
   essential panels into competing fixed sheets. That made an iPad hide both
   Composition and the UV workflow. Tablets now keep the complete workbench in
   document flow; phones retain sheets, but always expose a labelled dock and a
   close button for each sheet.
   ============================================================================= */

@media (min-width: 768px) and (max-width: 1159px) {
  .xr-editor {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  .xr-editor .xr-editor-layout {
    display: grid !important;
    grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.28fr) !important;
    grid-template-rows: minmax(440px, 58dvh) auto auto !important;
    grid-template-areas:
      "viewport viewport"
      "tree inspector"
      "surface surface" !important;
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
    align-items: stretch !important;
  }

  .xr-editor .xr-panel-viewport,
  .xr-editor .xr-panel-tree,
  .xr-editor .xr-panel-surface,
  .xr-editor .xr-panel-inspector {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    transition: none !important;
    display: flex !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    min-height: 0 !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    box-shadow: none !important;
  }

  .xr-editor .xr-panel-viewport {
    grid-area: viewport !important;
    top: auto !important;
    min-height: 440px !important;
    height: min(58dvh, 720px) !important;
  }
  .xr-editor .xr-panel-tree { grid-area: tree !important; border-right: 1px solid var(--stroke-subtle) !important; }
  .xr-editor .xr-panel-inspector { grid-area: inspector !important; border-top: 1px solid var(--stroke-subtle) !important; }
  .xr-editor .xr-panel-surface { grid-area: surface !important; border-top: 1px solid var(--stroke-subtle) !important; }

  .xr-editor .xr-mobile-panel-head,
  .xr-editor .xr-btn-tree-toggle,
  .xr-editor .xr-mobile-panel-dock { display: none !important; }
  .xr-editor .xr-mobile-panel-body,
  .xr-editor .xr-mobile-panel-body[data-collapsed="true"] {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow: visible !important;
    padding: 12px !important;
  }
  .xr-editor .xr-panel-tree > .xr-mobile-panel-body { min-height: 380px !important; overflow: auto !important; }
  .xr-editor .xr-panel-inspector > .xr-mobile-panel-body { overflow: visible !important; }
  .xr-editor .xr-panel-surface > .xr-mobile-panel-body { overflow: visible !important; }

  /* The inspector is a workbench on a tablet, not an endlessly tall drawer.
     Sections form two readable columns and a section may still grow naturally
     for dynamic geometry controls. */
  .xr-editor .xr-panel-inspector .xr-inspector {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 0 !important;
  }
  .xr-editor .xr-panel-inspector .xr-inspector-section {
    min-width: 0 !important;
    border-top: 1px solid var(--stroke-subtle) !important;
  }
  .xr-editor .xr-panel-inspector #inspector-transform { grid-column: 2 !important; }
  .xr-editor .xr-panel-inspector #inspector-uv-controls { grid-column: 1 / -1 !important; }
}

/* =============================================================================
   RESPONSIVE INTERACTION FOLLOW-UP
   ----------------------------------------------------------------------------
   Scroll belongs to the page on tablet; mobile first-run is a canvas-first
   starting point, not three drawers which cannot contain useful information.
   ============================================================================= */
@media (min-width: 768px) and (max-width: 1159px) {
  /* Do not trap a trackpad gesture in the short Composition list.  The list is
     deliberately allowed to grow with the page, so scrolling over any tablet
     panel reaches the same document scroll container. */
  .xr-editor .xr-panel-tree .xr-tree-list,
  .xr-editor .xr-panel-tree > .xr-mobile-panel-body {
    overflow: visible !important;
    overscroll-behavior: auto !important;
  }
}

@media (max-width: 767px) {
  /* Give portrait phones a substantial work area.  The viewport can be taller
     than it is wide here: interaction is clearer than preserving a thumbnail
     square, and the canvas still never becomes narrower than the device. */
  :root #xreate-editor-root.xr-editor .xr-panel-viewport {
    height: min(70dvh, 560px) !important;
    min-height: min(70dvh, 560px) !important;
    aspect-ratio: auto !important;
  }
  :root #xreate-editor-root.xr-editor.is-empty-scene .xr-viewport-hud,
  :root #xreate-editor-root.xr-editor.is-empty-scene .xr-btn-tree-toggle,
  :root #xreate-editor-root.xr-editor.is-empty-scene .xr-viewport-wasd-banner {
    display: none !important;
  }
  :root #xreate-editor-root.xr-editor.is-empty-scene .xr-three-wrap {
    background:
      radial-gradient(circle at center, color-mix(in srgb, var(--surface-panel) 28%, transparent), transparent 58%),
      var(--color-viewport-bg) !important;
  }
  :root #xreate-editor-root.xr-editor.is-empty-scene .xr-viewport-empty {
    width: min(310px, calc(100% - 32px)) !important;
    gap: 16px !important;
  }
  :root #xreate-editor-root.xr-editor.is-empty-scene .xr-viewport-empty__icon {
    font-size: 68px !important;
    opacity: 0.75 !important;
  }
  :root #xreate-editor-root.xr-editor.is-empty-scene .xr-viewport-empty__text {
    font-size: 15px !important;
    padding: 12px 16px !important;
  }
  :root #xreate-editor-root.xr-editor.is-empty-scene .xr-viewport-empty__action {
    min-height: 46px !important;
    width: 100% !important;
    font-size: 13px !important;
  }
  :root #xreate-editor-root.xr-editor.is-empty-scene .xr-mobile-panel-dock {
    opacity: 0.58 !important;
  }
  :root #xreate-editor-root.xr-editor.is-empty-scene .xr-mobile-panel-dock__button:disabled {
    cursor: not-allowed !important;
    color: var(--text-muted) !important;
  }
}

/* PHONE ACCORDION CASCADE GUARD — must follow legacy fixed-sheet rules. */
@media (max-width: 767px) {
  .xr-app > .xr-header .xr-header__mode-group,
  .xr-app > .xr-header .xr-header__divider { display: none !important; }
  :root #xreate-editor-root.xr-editor,
  :root #xreate-editor-root.xr-editor .xr-editor-layout { height: auto !important; overflow: visible !important; }
  :root #xreate-editor-root.xr-editor .xr-editor-layout { display: flex !important; flex-direction: column !important; gap: 0 !important; }
  :root #xreate-editor-root.xr-editor .xr-panel-viewport {
    order: 1 !important; position: relative !important; inset: auto !important; width: 100% !important;
    height: min(100vw, 520px) !important; min-height: min(100vw, 520px) !important; aspect-ratio: 1 / 1 !important;
    transform: none !important; overflow: hidden !important; display: flex !important;
  }
  .xr-editor .xr-panel-viewport > .xr-mobile-panel-body { display: flex !important; max-height: none !important; height: 100% !important; overflow: hidden !important; padding: 0 !important; }
  .xr-editor .xr-viewport-hud, .xr-editor .xr-btn-tree-toggle, .xr-editor .xr-viewport-wasd-banner, .xr-editor .xr-mobile-panel-dock { display: none !important; }
  :root #xreate-editor-root.xr-editor .xr-panel-tree,
  :root #xreate-editor-root.xr-editor .xr-panel-inspector,
  :root #xreate-editor-root.xr-editor .xr-panel-surface,
  :root[data-ui-mode="texture"] #xreate-editor-root.xr-editor .xr-panel-surface,
  :root[data-ui-mode="draft3d"] #xreate-editor-root.xr-editor .xr-panel-surface {
    position: relative !important; inset: auto !important; width: 100% !important; min-width: 0 !important; max-width: none !important;
    min-height: 0 !important; max-height: none !important; height: auto !important; transform: none !important; transition: none !important;
    display: flex !important; flex-direction: column !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important;
    overflow: visible !important; box-shadow: none !important; border-inline: 0 !important; border-top: 1px solid var(--stroke-subtle) !important;
  }
  .xr-editor .xr-panel-tree { order: 2 !important; } .xr-editor .xr-panel-inspector { order: 3 !important; } .xr-editor .xr-panel-surface { order: 4 !important; }
  .xr-editor .xr-panel-tree > .xr-mobile-panel-head, .xr-editor .xr-panel-inspector > .xr-mobile-panel-head, .xr-editor .xr-panel-surface > .xr-mobile-panel-head {
    display: flex !important; min-height: 52px !important; padding: 14px 16px !important; cursor: pointer !important;
  }
  .xr-editor .xr-panel-tree .xr-mobile-panel-head__chevron, .xr-editor .xr-panel-inspector .xr-mobile-panel-head__chevron, .xr-editor .xr-panel-surface .xr-mobile-panel-head__chevron { display: inline-flex !important; }
  .xr-editor .xr-sheet-close-btn { display: none !important; }
  .xr-editor .xr-panel-tree > .xr-mobile-panel-body, .xr-editor .xr-panel-inspector > .xr-mobile-panel-body, .xr-editor .xr-panel-surface > .xr-mobile-panel-body { width: 100% !important; max-height: none !important; height: auto !important; overflow: visible !important; padding: 12px !important; }
  .xr-editor .xr-panel-tree > .xr-mobile-panel-body[data-collapsed="false"], .xr-editor .xr-panel-inspector > .xr-mobile-panel-body[data-collapsed="false"], .xr-editor .xr-panel-surface > .xr-mobile-panel-body[data-collapsed="false"] { display: block !important; opacity: 1 !important; pointer-events: auto !important; }
  .xr-editor .xr-panel-tree > .xr-mobile-panel-body[data-collapsed="true"], .xr-editor .xr-panel-inspector > .xr-mobile-panel-body[data-collapsed="true"], .xr-editor .xr-panel-surface > .xr-mobile-panel-body[data-collapsed="true"] { display: none !important; }
  :root[data-ui-mode="draft3d"] #xreate-editor-root .xr-panel-inspector [data-ui-mode~="texture"], :root[data-ui-mode="texture"] #xreate-editor-root .xr-panel-inspector [data-ui-mode~="draft3d"] { display: block !important; visibility: visible !important; opacity: 1 !important; }
  :root #xreate-editor-root.xr-editor.is-empty-scene .xr-panel-tree > .xr-mobile-panel-head, :root #xreate-editor-root.xr-editor.is-empty-scene .xr-panel-inspector > .xr-mobile-panel-head, :root #xreate-editor-root.xr-editor.is-empty-scene .xr-panel-surface > .xr-mobile-panel-head { opacity: 0.52 !important; pointer-events: none !important; }
}

/* =============================================================================
   RESPONSIVE USABILITY FOLLOW-UP
   -----------------------------------------------------------------------------
   Keep the full tablet workbench in normal document flow, and make phone
   viewport space intentional instead of whatever remains after fixed sheets.
   ============================================================================= */

/* The dock is injected once for every viewport, but is a phone-only control.
   Without this base rule its bare button text leaked into desktop workbenches. */
.xr-editor .xr-mobile-panel-dock { display: none; }

.xr-editor .xr-viewport-empty {
  pointer-events: auto;
}

.xr-editor .xr-viewport-empty__action {
  min-height: 40px;
  padding-inline: 16px;
  appearance: none;
  background: var(--surface-panel-strong, #eee6da) !important;
  border: 2px solid var(--color-text, #211f1b) !important;
  color: var(--color-text, #211f1b) !important;
  opacity: 1 !important;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: none;
  box-shadow: none;
}

.xr-editor .xr-viewport-empty__action:hover,
.xr-editor .xr-viewport-empty__action:focus-visible {
  background: var(--color-text, #211f1b) !important;
  color: var(--surface-panel-strong, #eee6da) !important;
}

@media (min-width: 768px) and (max-width: 1159px) {
  :root { --app-header-h: 104px; }

  /* A tablet has enough width for the original controls, but not for all of
     them on one line.  Two deliberate header rows preserve the logo and avoid
     shrinking touch targets into one another. */
  .xr-app > .xr-header .xr-header__content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 44px 44px !important;
    gap: 0 !important;
    padding: 8px 16px !important;
  }
  .xr-app > .xr-header .xr-header__left,
  .xr-app > .xr-header .xr-header__right {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  .xr-app > .xr-header .xr-header__left { justify-content: space-between !important; }
  .xr-app > .xr-header .xr-header__right { justify-content: flex-end !important; }
  .xr-app > .xr-header .xr-header__brand { flex: 0 0 auto !important; min-width: 0 !important; }
  .xr-app > .xr-header .xr-header__tagline { display: none !important; }
  .xr-app > main {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  .xr-editor-section,
  .xr-editor-section .xr-editor-embed,
  .xr-editor-frame {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
}

@media (max-width: 767px) {
  .xr-app > main {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  :root #xreate-editor-root.xr-editor,
  :root #xreate-editor-root.xr-editor .xr-editor-layout,
  .xr-editor-section,
  .xr-editor-section .xr-editor-embed,
  .xr-editor-frame {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  :root #xreate-editor-root.xr-editor .xr-editor-layout {
    display: block !important;
  }

  /* Canvas first: its side equals the available phone width (up to a useful
     ceiling), so the composition reads as a tangible work area rather than a
     narrow preview strip.  Every other panel remains reachable via the dock. */
  :root #xreate-editor-root.xr-editor .xr-panel-viewport {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    height: min(100vw, 440px) !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
  }
  .xr-editor .xr-viewport-hud__viewport { display: none !important; }
  .xr-editor .xr-viewport-hud__gizmo {
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    max-width: calc(100% - 16px) !important;
  }
  .xr-editor .xr-viewport-hud__gizmo .xr-ctl-btn__label { display: none !important; }
  .xr-editor .xr-viewport-hud__gizmo .xr-ctl-btn {
    min-width: 40px !important;
    width: 40px !important;
    padding: 0 !important;
  }
  .xr-editor .xr-viewport-hud__view {
    left: 8px !important;
    right: 8px !important;
    bottom: 62px !important;
    max-width: none !important;
  }
  .xr-editor .xr-viewport-hud__view .xr-ctl-row {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }
  .xr-editor .xr-viewport-hud__view .xr-ctl-btn {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
  }
  .xr-editor .xr-viewport-hud__view .xr-ctl-btn__label { display: none !important; }
  .xr-editor .xr-viewport-empty {
    width: min(280px, calc(100% - 32px)) !important;
    gap: 12px !important;
  }
  .xr-editor .xr-viewport-empty__icon { font-size: 52px !important; }
  .xr-editor .xr-viewport-empty__text { line-height: 1.4 !important; }
  .xr-editor .xr-mobile-panel-dock { display: grid !important; }
}

@media (max-width: 767px) {
  /* The editor sits below the two-row header already. Giving it a full 100dvh
     and also offsetting the sticky viewport by the header height pushed the
     canvas and its panel dock below the physical screen. */
  .xr-app > main,
  .xr-editor,
  .xr-editor .xr-editor-layout {
    height: calc(100dvh - var(--app-header-h)) !important;
    min-height: 0 !important;
  }
  .xr-editor .xr-panel-viewport {
    top: 0 !important;
    min-height: max(360px, calc(100dvh - var(--app-header-h))) !important;
    height: max(360px, calc(100dvh - var(--app-header-h))) !important;
  }
  :root #xreate-editor-root.xr-editor .xr-panel-inspector {
    transform: translateY(100%) !important;
  }
  :root.is-inspector-open #xreate-editor-root.xr-editor .xr-panel-inspector {
    transform: translateY(0) !important;
  }
  :root #xreate-editor-root.xr-editor .xr-panel-tree {
    transform: translateX(-100%) !important;
  }
  :root.is-tree-open #xreate-editor-root.xr-editor .xr-panel-tree {
    transform: translateX(0) !important;
  }
  :root[data-ui-mode="texture"] #xreate-editor-root.xr-editor .xr-panel-surface {
    transform: translateY(100%) !important;
  }
  :root[data-ui-mode="texture"].is-surface-open #xreate-editor-root.xr-editor .xr-panel-surface {
    transform: translateY(0) !important;
  }
  /* Mobile panel headers intentionally hide their chevrons. A sheet opened by
     the labelled dock must therefore always expose its body even though its
     historical accordion state was initially collapsed. */
  :root.is-tree-open #xreate-editor-root.xr-editor .xr-panel-tree > .xr-mobile-panel-body,
  :root.is-inspector-open #xreate-editor-root.xr-editor .xr-panel-inspector > .xr-mobile-panel-body,
  :root[data-ui-mode="texture"].is-surface-open #xreate-editor-root.xr-editor .xr-panel-surface > .xr-mobile-panel-body {
    display: flex !important;
    max-height: calc(min(72dvh, 620px) - 54px) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .xr-editor .xr-btn-tree-toggle { display: none !important; }

  .xr-editor .xr-mobile-panel-dock {
    position: absolute !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    z-index: 46 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 6px !important;
    background: color-mix(in srgb, var(--surface-panel) 94%, transparent) !important;
    border: 1px solid var(--stroke-subtle) !important;
  }
  .xr-editor .xr-mobile-panel-dock__button {
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 6px 4px !important;
    border: 1px solid var(--stroke-subtle) !important;
    border-radius: 0 !important;
    background: var(--surface-panel-strong) !important;
    color: var(--text-primary) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }
  :root:not([data-ui-mode="texture"]) .xr-editor .xr-mobile-panel-dock__surface {
    opacity: 0.45 !important;
  }
  .xr-editor .xr-panel-tree,
  .xr-editor .xr-panel-inspector,
  :root[data-ui-mode="texture"] .xr-editor .xr-panel-surface {
    max-height: min(72dvh, 620px) !important;
  }
  .xr-editor .xr-panel-tree > .xr-mobile-panel-body,
  .xr-editor .xr-panel-inspector > .xr-mobile-panel-body,
  .xr-editor .xr-panel-surface > .xr-mobile-panel-body {
    max-height: calc(min(72dvh, 620px) - 54px) !important;
  }
  .xr-editor .xr-panel-tree .xr-mobile-panel-head__chevron,
  .xr-editor .xr-panel-surface .xr-mobile-panel-head__chevron {
    display: none !important;
  }
  .xr-editor .xr-panel-tree .xr-mobile-panel-head,
  .xr-editor .xr-panel-surface .xr-mobile-panel-head {
    cursor: default !important;
  }
  .xr-editor .xr-panel-tree .xr-sheet-close-btn,
  .xr-editor .xr-panel-surface .xr-sheet-close-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: 1px solid var(--stroke-subtle) !important;
    border-radius: 0 !important;
    background: var(--surface-panel-strong) !important;
    color: var(--text-primary) !important;
    font-size: 18px !important;
  }
  .xr-editor .xr-viewport-hud__view { bottom: 62px !important; }
}

/* The historical focused rules use an editor-root id plus :root.  Repeat that
   specificity here so the tablet workbench cannot fall back to their one-cell
   `"viewport"` grid when styles are concatenated in a different order. */
@media (min-width: 768px) and (max-width: 1159px) {
  :root #xreate-editor-root.xr-editor .xr-editor-layout {
    grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.28fr) !important;
    grid-template-rows: minmax(440px, 58dvh) auto auto !important;
    grid-template-areas:
      "viewport viewport"
      "tree inspector"
      "surface surface" !important;
  }
  :root #xreate-editor-root.xr-editor .xr-panel-viewport { grid-area: viewport !important; }
  :root #xreate-editor-root.xr-editor .xr-panel-tree { grid-area: tree !important; }
  :root #xreate-editor-root.xr-editor .xr-panel-inspector { grid-area: inspector !important; }
  :root #xreate-editor-root.xr-editor .xr-panel-surface { grid-area: surface !important; }
  :root[data-ui-mode="texture"] #xreate-editor-root.xr-editor .xr-panel-surface,
  :root[data-ui-mode="texture"].is-surface-open #xreate-editor-root.xr-editor .xr-panel-surface {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    display: flex !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    box-shadow: none !important;
  }
}

/* PHONE ACCORDION FINAL GUARD — deliberately last: legacy sheets precede it. */
@media (max-width: 767px) {
  .xr-app > .xr-header .xr-header__mode-group, .xr-app > .xr-header .xr-header__divider { display: none !important; }
  :root #xreate-editor-root.xr-editor, :root #xreate-editor-root.xr-editor .xr-editor-layout { height: auto !important; overflow: visible !important; }
  :root #xreate-editor-root.xr-editor .xr-editor-layout { display: flex !important; flex-direction: column !important; gap: 0 !important; }
  :root #xreate-editor-root.xr-editor .xr-panel-viewport { order: 1 !important; position: relative !important; inset: auto !important; width: 100% !important; height: min(100vw, 520px) !important; min-height: min(100vw, 520px) !important; aspect-ratio: 1 / 1 !important; transform: none !important; overflow: hidden !important; display: flex !important; }
  .xr-editor .xr-panel-viewport > .xr-mobile-panel-body { display: flex !important; max-height: none !important; height: 100% !important; overflow: hidden !important; padding: 0 !important; }
  .xr-editor .xr-viewport-hud, .xr-editor .xr-btn-tree-toggle, .xr-editor .xr-viewport-wasd-banner, .xr-editor .xr-mobile-panel-dock { display: none !important; }
  :root #xreate-editor-root.xr-editor .xr-panel-tree, :root #xreate-editor-root.xr-editor .xr-panel-inspector, :root #xreate-editor-root.xr-editor .xr-panel-surface, :root[data-ui-mode="texture"] #xreate-editor-root.xr-editor .xr-panel-surface, :root[data-ui-mode="draft3d"] #xreate-editor-root.xr-editor .xr-panel-surface { position: relative !important; inset: auto !important; width: 100% !important; min-width: 0 !important; max-width: none !important; min-height: 0 !important; max-height: none !important; height: auto !important; transform: none !important; transition: none !important; display: flex !important; flex-direction: column !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; overflow: visible !important; box-shadow: none !important; border-inline: 0 !important; border-top: 1px solid var(--stroke-subtle) !important; }
  .xr-editor .xr-panel-tree { order: 2 !important; } .xr-editor .xr-panel-inspector { order: 3 !important; } .xr-editor .xr-panel-surface { order: 4 !important; }
  .xr-editor .xr-panel-tree > .xr-mobile-panel-head, .xr-editor .xr-panel-inspector > .xr-mobile-panel-head, .xr-editor .xr-panel-surface > .xr-mobile-panel-head { display: flex !important; min-height: 52px !important; padding: 14px 16px !important; cursor: pointer !important; }
  .xr-editor .xr-panel-tree .xr-mobile-panel-head__chevron, .xr-editor .xr-panel-inspector .xr-mobile-panel-head__chevron, .xr-editor .xr-panel-surface .xr-mobile-panel-head__chevron { display: inline-flex !important; }
  .xr-editor .xr-sheet-close-btn { display: none !important; }
  .xr-editor .xr-panel-tree > .xr-mobile-panel-body, .xr-editor .xr-panel-inspector > .xr-mobile-panel-body, .xr-editor .xr-panel-surface > .xr-mobile-panel-body { width: 100% !important; max-height: none !important; height: auto !important; overflow: visible !important; padding: 12px !important; }
  .xr-editor .xr-panel-tree > .xr-mobile-panel-body[data-collapsed="false"], .xr-editor .xr-panel-inspector > .xr-mobile-panel-body[data-collapsed="false"], .xr-editor .xr-panel-surface > .xr-mobile-panel-body[data-collapsed="false"] { display: block !important; opacity: 1 !important; pointer-events: auto !important; }
  .xr-editor .xr-panel-tree > .xr-mobile-panel-body[data-collapsed="true"], .xr-editor .xr-panel-inspector > .xr-mobile-panel-body[data-collapsed="true"], .xr-editor .xr-panel-surface > .xr-mobile-panel-body[data-collapsed="true"] { display: none !important; }
  :root[data-ui-mode="draft3d"] #xreate-editor-root .xr-panel-inspector [data-ui-mode~="texture"], :root[data-ui-mode="texture"] #xreate-editor-root .xr-panel-inspector [data-ui-mode~="draft3d"] { display: block !important; visibility: visible !important; opacity: 1 !important; }
  :root #xreate-editor-root.xr-editor.is-empty-scene .xr-panel-tree > .xr-mobile-panel-head, :root #xreate-editor-root.xr-editor.is-empty-scene .xr-panel-inspector > .xr-mobile-panel-head, :root #xreate-editor-root.xr-editor.is-empty-scene .xr-panel-surface > .xr-mobile-panel-head { opacity: 0.52 !important; pointer-events: none !important; }
}

/* Final cascade guard: preserve the phone accordion's square canvas after
   historical mobile rules. */
@media (max-width: 767px) {
  html, body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .xr-app {
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
  }
  /* Let document content determine its own height.  A 100dvh editor shell
     leaves an inert white "footer" after the final mobile accordion. */
  .xr-app > main {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .xr-editor-section,
  .xr-editor-section .xr-editor-embed,
  .xr-editor-frame {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  :root #xreate-editor-root.xr-editor .xr-panel-viewport {
    height: min(100vw, 520px) !important;
    min-height: min(100vw, 520px) !important;
    aspect-ratio: 1 / 1 !important;
  }
  :root #xreate-editor-root.xr-editor.is-empty-scene .xr-viewport-hud,
  :root #xreate-editor-root.xr-editor.is-empty-scene .xr-btn-tree-toggle,
  :root #xreate-editor-root.xr-editor.is-empty-scene .xr-viewport-wasd-banner {
    display: none !important;
  }
  :root #xreate-editor-root.xr-editor.is-empty-scene .xr-three-wrap {
    background: var(--color-viewport-bg, #080808) !important;
  }
  :root #xreate-editor-root.xr-editor.is-empty-scene .xr-viewport-empty {
    width: min(310px, calc(100% - 32px)) !important;
    gap: 16px !important;
  }
  :root #xreate-editor-root.xr-editor.is-empty-scene .xr-viewport-empty__icon {
    font-size: 68px !important;
    opacity: 0.75 !important;
  }
  :root #xreate-editor-root.xr-editor.is-empty-scene .xr-viewport-empty__text {
    font-size: 15px !important;
    padding: 12px 16px !important;
  }
  :root #xreate-editor-root.xr-editor.is-empty-scene .xr-viewport-empty__action {
    min-height: 46px !important;
    width: 100% !important;
    font-size: 13px !important;
  }
  :root #xreate-editor-root.xr-editor.is-empty-scene .xr-mobile-panel-dock { opacity: 0.58 !important; }
  :root #xreate-editor-root.xr-editor.is-empty-scene .xr-mobile-panel-dock__button:disabled {
    cursor: not-allowed !important;
    color: var(--text-muted) !important;
  }
  /* Old fixed-sheet close actions are not useful inside an in-flow accordion. */
  :root #xreate-editor-root.xr-editor .xr-sheet-close-btn { display: none !important; }
  :root #xreate-editor-root.xr-editor .xr-three-wrap { touch-action: pan-y !important; }

  /* Each phone accordion supplies the sole workflow heading.  The desktop
     headings that live inside its body are retained for tablet/desktop, but
     hiding them here prevents "Composition → Composition" and "Volume →
     Volume" nesting. */
  :root #xreate-editor-root.xr-editor .xr-panel-tree > .xr-mobile-panel-body > .xr-panel-head,
  :root #xreate-editor-root.xr-editor #inspectorPanelTitle,
  :root #xreate-editor-root.xr-editor .xr-panel-surface #inspector-surface > .xr-inspector-section__header {
    display: none !important;
  }
  :root #xreate-editor-root.xr-editor .xr-panel-surface #inspector-surface > .xr-inspector-section__body {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* On a phone, three clear workflow accordions replace desktop columns:
     Composition, Volume and 3D Texture. UV Mapping is physically placed in
     the latter by viewport-controls.js, so it can neither overlap Volume nor
     be hidden below its description. */
  :root #xreate-editor-root.xr-editor .xr-mobile-texture-controls,
  :root #xreate-editor-root.xr-editor .xr-mobile-texture-controls #inspector-uv-controls,
  :root #xreate-editor-root.xr-editor .xr-mobile-texture-controls #inspector-uv-body {
    display: block !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  :root #xreate-editor-root.xr-editor .xr-mobile-texture-controls #inspector-uv-controls {
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 1px solid var(--stroke-subtle) !important;
  }

  /* Accordions are normal document-flow sections on a phone.  Their legacy
     focused-sheet rules used flex shrinking, which could pull 3D Texture back
     over the middle of Volume's Transform controls. */
  :root #xreate-editor-root.xr-editor .xr-panel-tree,
  :root #xreate-editor-root.xr-editor .xr-panel-inspector,
  :root #xreate-editor-root.xr-editor .xr-panel-surface,
  :root #xreate-editor-root.xr-editor .xr-panel-tree > .xr-mobile-panel-body,
  :root #xreate-editor-root.xr-editor .xr-panel-inspector > .xr-mobile-panel-body,
  :root #xreate-editor-root.xr-editor .xr-panel-surface > .xr-mobile-panel-body {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
  }

  /* These are not nested accordions.  Keep the original Inspector sections
     inside the one "Volume" body, and the original Surface + UV controls
     inside the one "3D Texture" body.  Old focused-sheet rules give these
     nodes grid/flex positioning, which made a visually empty Volume header
     while its Transform controls leaked over the next accordion. */
  :root #xreate-editor-root.xr-editor .xr-panel-inspector > .xr-mobile-panel-body[data-collapsed="false"],
  :root #xreate-editor-root.xr-editor .xr-panel-surface > .xr-mobile-panel-body[data-collapsed="false"] {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  :root #xreate-editor-root.xr-editor .xr-panel-inspector #inspectorSections,
  :root #xreate-editor-root.xr-editor .xr-panel-inspector #inspector-shape,
  :root #xreate-editor-root.xr-editor .xr-panel-inspector #inspector-transform,
  :root #xreate-editor-root.xr-editor .xr-panel-inspector #inspector-shape-body,
  :root #xreate-editor-root.xr-editor .xr-panel-inspector #inspector-transform-body,
  :root #xreate-editor-root.xr-editor .xr-panel-surface #surfaceSections,
  :root #xreate-editor-root.xr-editor .xr-panel-surface #inspector-surface,
  :root #xreate-editor-root.xr-editor .xr-panel-surface #inspector-surface-body {
    display: block !important;
    position: static !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  :root #xreate-editor-root.xr-editor .xr-panel-inspector #inspector-shape,
  :root #xreate-editor-root.xr-editor .xr-panel-inspector #inspector-transform {
    grid-column: auto !important;
  }

  /* Preserve a useful finger target without turning each iPhone slider into a
     44 px visual row. The hit area remains comfortably larger than the track. */
  :root #xreate-editor-root.xr-editor input[type="range"] {
    min-height: 34px !important;
    padding-block: 6px !important;
    touch-action: pan-x !important;
  }
  :root #xreate-editor-root.xr-editor input[type="range"]::-webkit-slider-thumb {
    width: 22px !important;
    height: 22px !important;
  }

  /* Trace mode is canvas-first.  The desktop toolbar is useful, but it must
     not consume most of an iPhone dialog before a user can place a point. */
  :root .xr-modal-overlay:has(.xr-doodle-modal) { padding: 0 !important; }
  :root .xr-doodle-modal {
    width: 100dvw !important;
    height: 100svh !important;
    max-width: none !important;
    max-height: none !important;
    padding: 10px !important;
    gap: 6px !important;
  }
  :root .xr-doodle-modal .xr-doodle-modal__head { min-height: 42px !important; }
  :root .xr-doodle-modal .xr-doodle-steps { margin: 0 !important; gap: 6px !important; }
  :root .xr-doodle-modal .xr-doodle-step { min-height: 38px !important; padding: 6px 10px !important; }
  :root #doodleStep2.xr-doodle-panel { gap: 6px !important; }
  :root #doodleStep2 > .xr-doodle-help { display: none !important; }
  :root .xr-doodle-modal .xr-doodle-toolbar { flex-direction: row !important; flex-wrap: wrap !important; gap: 4px !important; }
  :root .xr-doodle-modal .xr-doodle-toolbar-group { min-width: 0 !important; min-height: 34px !important; padding: 3px 5px !important; }
  :root .xr-doodle-modal .xr-doodle-group-view { flex: 1 1 100% !important; }
  :root .xr-doodle-modal .xr-doodle-group-tool,
  :root .xr-doodle-modal .xr-doodle-group-edit { flex: 1 1 calc(50% - 2px) !important; }
  :root .xr-doodle-modal .xr-doodle-toolbar-group__head { display: none !important; }
  :root .xr-doodle-modal .xr-doodle-toolbar-group__body { grid-column: 1 / -1 !important; justify-content: center !important; }
  :root .xr-doodle-modal .xr-mask-canvas-wrap {
    flex: 1 1 42svh !important;
    min-height: 42svh !important;
    max-height: none !important;
  }
  :root .xr-doodle-modal .xr-mask-canvas-wrap > #doodleCanvas { width: 100% !important; height: 100% !important; object-fit: contain !important; }
  :root .xr-doodle-modal .xr-mask-actions { min-height: 42px !important; }
}

/* Absolute phone containment guard.  This is intentionally after every
   historical focused-sheet rule: root state classes may still be present in a
   restored session, but they must never turn an accordion into an overlay. */
@media (max-width: 767px) {
  :root.is-tree-open #xreate-editor-root.xr-editor .xr-panel-tree,
  :root.is-inspector-open #xreate-editor-root.xr-editor .xr-panel-inspector,
  :root.is-surface-open #xreate-editor-root.xr-editor .xr-panel-surface {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  :root.is-tree-open #xreate-editor-root.xr-editor .xr-panel-tree > .xr-mobile-panel-body[data-collapsed="true"],
  :root.is-inspector-open #xreate-editor-root.xr-editor .xr-panel-inspector > .xr-mobile-panel-body[data-collapsed="true"],
  :root.is-surface-open #xreate-editor-root.xr-editor .xr-panel-surface > .xr-mobile-panel-body[data-collapsed="true"] {
    display: none !important;
  }
  :root.is-tree-open #xreate-editor-root.xr-editor .xr-panel-tree > .xr-mobile-panel-body[data-collapsed="false"],
  :root.is-inspector-open #xreate-editor-root.xr-editor .xr-panel-inspector > .xr-mobile-panel-body[data-collapsed="false"],
  :root.is-surface-open #xreate-editor-root.xr-editor .xr-panel-surface > .xr-mobile-panel-body[data-collapsed="false"] {
    display: block !important;
    position: static !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  :root #xreate-editor-root.xr-editor .xr-three-wrap,
  :root #xreate-editor-root.xr-editor #threeCanvas {
    touch-action: none !important;
  }
}

/* =============================================================================
   FINAL PHONE MODAL LAYOUT + TOUCH RANGE SKIN
   -----------------------------------------------------------------------------
   Kept last on purpose: the application still carries compatibility rules for
   earlier sheet/dialog implementations.  These rules turn the two creative
   dialogs into a true mobile editing surface instead of a squeezed desktop
   panel, while retaining a generous (but visually quiet) slider hit target.
============================================================================= */

@media (min-width: 768px) and (pointer: coarse) {
  :root #xreate-editor-root.xr-editor input[type="range"].xr-field-slider {
    -webkit-appearance: none !important;
    appearance: none !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    touch-action: pan-x !important;
  }
}

@media (max-width: 767px) {
  /* Keep the tap target tall; only the 3px rail and 18px thumb are visible. */
  :root #xreate-editor-root.xr-editor input[type="range"].xr-field-slider {
    -webkit-appearance: none !important;
    appearance: none !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    touch-action: pan-x !important;
  }
  :root #xreate-editor-root.xr-editor input[type="range"].xr-field-slider::-webkit-slider-runnable-track {
    height: 3px !important;
    border: 0 !important;
    border-radius: 2px !important;
    background: color-mix(in srgb, var(--color-muted) 82%, transparent) !important;
  }
  :root #xreate-editor-root.xr-editor input[type="range"].xr-field-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    margin-top: -7.5px !important;
    border: 2px solid var(--color-action) !important;
    border-radius: 50% !important;
    background: var(--surface-panel) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--surface-panel) 78%, transparent) !important;
  }
  :root #xreate-editor-root.xr-editor input[type="range"].xr-field-slider::-moz-range-track {
    height: 3px !important;
    border: 0 !important;
    border-radius: 2px !important;
    background: color-mix(in srgb, var(--color-muted) 82%, transparent) !important;
  }
  :root #xreate-editor-root.xr-editor input[type="range"].xr-field-slider::-moz-range-thumb {
    width: 18px !important;
    height: 18px !important;
    border: 2px solid var(--color-action) !important;
    border-radius: 50% !important;
    background: var(--surface-panel) !important;
  }

  #doodleModal.xr-modal-overlay,
  #maskModal.xr-modal-overlay {
    align-items: stretch !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  #doodleModal .xr-doodle-modal,
  #maskModal .xr-mask-modal {
    box-sizing: border-box !important;
    width: 100dvw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    padding: 10px !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  /* DOODLE: only the active tools remain above the drawing field. */
  #doodleModal .xr-doodle-modal__head { min-height: 40px !important; }
  #doodleModal .xr-doodle-steps { margin: 0 !important; gap: 5px !important; }
  #doodleModal .xr-doodle-step { min-height: 36px !important; padding: 5px 8px !important; }
  #doodleModal #doodleStep2.xr-doodle-panel {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    gap: 6px !important;
    overflow: hidden !important;
  }
  #doodleModal .xr-doodle-mode-group {
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  #doodleModal .xr-doodle-mode-group > .xr-doodle-toolbar-group__head,
  #doodleModal #doodleStep2 > .xr-doodle-help,
  #doodleModal .xr-doodle-tool-hint { display: none !important; }
  #doodleModal .xr-doodle-mode-toggle {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    border: 1px solid var(--color-action) !important;
  }
  #doodleModal .xr-doodle-mode-toggle .xr-modal__btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    width: auto !important;
    height: 36px !important;
    min-height: 0 !important;
    padding: 0 3px !important;
    overflow: hidden !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }
  #doodleModal .xr-doodle-toolbar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
    margin: 0 !important;
  }
  #doodleModal .xr-doodle-toolbar-group {
    display: block !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 4px !important;
  }
  #doodleModal .xr-doodle-group-view { grid-column: 1 / -1 !important; }
  #doodleModal .xr-doodle-toolbar-group > .xr-doodle-toolbar-group__head { display: none !important; }
  #doodleModal .xr-doodle-toolbar-group > .xr-doodle-toolbar-group__body {
    display: flex !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 0 !important;
  }
  #doodleModal .xr-doodle-toolbar .xr-modal__btn {
    min-width: 0 !important;
    height: 30px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
  }
  #doodleModal .xr-doodle-group-view .xr-mask-scale {
    justify-content: center !important;
    gap: 5px !important;
  }
  #doodleModal .xr-doodle-group-view .xr-mask-scale__label { display: none !important; }
  #doodleModal .xr-mask-canvas-wrap {
    flex: 1 1 auto !important;
    min-height: 42svh !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  #doodleModal #doodleCanvas {
    display: block !important;
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }
  #doodleModal .xr-mask-actions {
    min-height: 40px !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
  }
  #doodleModal .xr-mask-actions__left,
  #doodleModal .xr-mask-actions__right { display: flex !important; gap: 5px !important; }
  #doodleModal .xr-mask-actions .xr-modal__btn {
    min-width: 0 !important;
    height: 38px !important;
    padding-inline: 10px !important;
  }
  #doodleModal .xr-doodle-apply-hint { display: none !important; }

  /* MASK: remove explanatory desktop copy before it consumes the canvas. */
  #maskModal .xr-mask-modal > h2 { font-size: 16px !important; }
  #maskModal .xr-mask-toolbar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
    margin: 0 !important;
  }
  #maskModal .xr-mask-select-tool { grid-column: 1 / -1 !important; }
  #maskModal .xr-mask-select-tool,
  #maskModal .xr-mask-view-tool,
  #maskModal .xr-mask-presets {
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 5px !important;
    gap: 4px !important;
  }
  #maskModal .xr-mask-tool-label,
  #maskModal .xr-mask-presets__hint,
  #maskModal .xr-mask-view-tool__hint,
  #maskModal #maskHelp { display: none !important; }
  #maskModal .xr-mask-select-tool__controls,
  #maskModal .xr-mask-view-tool__controls,
  #maskModal .xr-mask-presets__buttons { gap: 4px !important; }
  #maskModal .xr-mask-toggle { width: 100% !important; }
  #maskModal .xr-mask-toggle .xr-modal__btn { width: auto !important; }
  #maskModal .xr-modal__btn {
    min-width: 0 !important;
    height: 32px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
  }
  #maskModal .xr-mask-canvas-wrap {
    flex: 1 1 auto !important;
    min-height: 42svh !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  #maskModal #maskCanvas {
    display: block !important;
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }
  #maskModal .xr-mask-actions {
    min-height: 40px !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
  }
  #maskModal .xr-mask-actions__left,
  #maskModal .xr-mask-actions__right { display: flex !important; gap: 5px !important; }
}

/* Native colour inputs inherit an oval control on iOS when their width and
   height differ. Keep the semantic picker, but render its preview as the same
   compact circle on Safari iPhone, iPad and desktop. */
:root #xreate-editor-root.xr-editor input[type="color"].xr-color-input {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  inline-size: 30px !important;
  block-size: 30px !important;
  min-inline-size: 30px !important;
  min-block-size: 30px !important;
  padding: 0 !important;
  border: 1px solid var(--color-action) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: transparent !important;
}
:root #xreate-editor-root.xr-editor input[type="color"].xr-color-input::-webkit-color-swatch-wrapper {
  padding: 0 !important;
  border-radius: inherit !important;
}
:root #xreate-editor-root.xr-editor input[type="color"].xr-color-input::-webkit-color-swatch {
  border: 0 !important;
  border-radius: inherit !important;
}
:root #xreate-editor-root.xr-editor input[type="color"].xr-color-input::-moz-color-swatch {
  border: 0 !important;
  border-radius: 50% !important;
}

/* Desktop reads each parameter as one compact label-and-control unit. Tablets
   keep their larger touch target through the coarse-pointer rules above. */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  :root #xreate-editor-root.xr-editor input[type="range"].xr-field-slider {
    height: 24px !important;
    min-height: 24px !important;
  }
  :root #xreate-editor-root.xr-editor input[type="range"].xr-field-slider::-webkit-slider-thumb {
    width: 14px !important;
    height: 14px !important;
    margin-top: -5.5px !important;
  }
  :root #xreate-editor-root.xr-editor input[type="range"].xr-field-slider::-moz-range-thumb {
    width: 14px !important;
    height: 14px !important;
  }
  :root #xreate-editor-root.xr-editor #inspector-transform-body {
    gap: 8px !important;
  }
  :root #xreate-editor-root.xr-editor #inspector-transform-body > .xr-field-row + .xr-field-slider {
    margin-top: -5px !important;
    margin-bottom: 4px !important;
  }
  :root #xreate-editor-root.xr-editor #shapeParams {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  :root #xreate-editor-root.xr-editor #shapeParams > .xr-field-row + .xr-field-slider {
    margin-top: -5px !important;
    margin-bottom: 4px !important;
  }
}

/* Persistent, non-modal route for a reproducible user report. The circle
   matches the editor's hard-edged palette while remaining distinct from the
   canvas tools and never consuming workflow space. */
.xr-bug-report {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: calc(var(--z-modal) - 1);
  display: inline-grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  border: 2px solid var(--color-text);
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--color-text) 20%, transparent);
  transition: transform 120ms ease, background 120ms ease, color 120ms ease;
}

.xr-bug-report svg {
  inline-size: 21px;
  block-size: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.xr-bug-report:hover,
.xr-bug-report:focus-visible {
  background: var(--color-text);
  color: var(--color-bg);
  transform: translateY(-2px);
}

.xr-bug-report:focus-visible { outline: 3px solid var(--color-action); outline-offset: 3px; }

@media (max-width: 767px) {
  .xr-bug-report {
    inline-size: 42px;
    block-size: 42px;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  /* The footer follows the editor on phones. It must never sit on top of an
     accordion, the texture canvas, or the browser's safe-area controls. */
  .xr-app-footer {
    position: static;
    z-index: auto;
    inset: auto;
    display: block;
    margin: 14px 70px max(14px, env(safe-area-inset-bottom)) 14px;
    font-size: 9px;
    line-height: 1.35;
    text-align: left;
  }
}