/* ─────────────────────────────────────────────────────────────
   Custex Node Editor — Cream Glass theme override
   Layered on top of tokens.css + editor.css + textile.css.
   Only restyles. No structural/JS-affecting changes.
   ───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Manrope:wght@300;400;500;600&display=swap');

/* ── Re-skin the Atelier tokens to the Custex Light cream palette ── */
[data-theme="atelier"] {
  /* warm cream stack from Custex Light's stage tokens */
  --bg-1: #f5ecdd;
  --bg-2: #ecdfca;
  --paper: #fbf2e2;
  --ink: #3a281b;
  --ink-2: rgba(58, 40, 27, .68);
  --warm: rgba(58, 40, 27, .48);
  --line: rgba(58, 40, 27, .14);
  --line-strong: rgba(58, 40, 27, .22);

  /* keep family-coded accents but warm-shift toward Custex Light's palette */
  --accent:    #c1864a;            /* gold */
  --accent-2:  #c97a6a;            /* rose-gold */
  --accent-3:  #eaa37e;            /* peach */
  --accent-rgb:   193, 134, 74;
  --accent-2-rgb: 201, 122, 106;
  --rose-gold: #c97a6a;
  --sage: #8d9c79;

  --port-in:    #c1864a;
  --port-out:   #8d9c79;
  --port-fab:   #b078a0;
  --port-yarn:  #d9a441;
  --port-color-product:    #c1864a;
  --port-color-craft:      #8d9c79;
  --port-color-fabric:     #b078a0;
  --port-color-yarn:       #d9a441;
  --port-color-motif:      #eaa37e;
  --port-color-matte:      #7a91a8;
  --port-color-colorSplit: #b078a0;
  --port-color-layout:     #6a82c6;
  --port-color-render:     #6db6a8;

  /* canvas + node base — the actual gradient is painted below */
  --canvas-bg: transparent;
  --canvas-grid: rgba(58, 40, 27, .10);
  --node-bg: rgba(252, 244, 228, .62);
  --node-shadow:
    0 28px 60px -22px rgba(120, 75, 40, .35),
    0 8px 22px -6px rgba(120, 75, 40, .18),
    inset 0 1px 0 rgba(255, 255, 255, .72),
    inset 0 -1px 0 rgba(120, 75, 40, .08);
  --selected-ring: rgba(193, 134, 74, .55);

  /* swap the type voice to match Custex Light brand */
  --serif: 'Cormorant Garamond', 'Instrument Serif', Georgia, serif;
  --sans:  'Manrope', 'Space Grotesk', system-ui, sans-serif;

  /* Typography — three tiers only (大 / 中 / 小) */
  --cx-fs-1: 18px;
  --cx-fs-2: 12px;
  --cx-fs-3: 9px;
  --fs-body: var(--cx-fs-2);
}

/* ── Body + app shell ────────────────────────────────────────── */
body {
  font-family: var(--sans);
  background: #f3e7d2 !important;
}
.fullscreen-app,
.fullscreen-app .cx-app {
  background: transparent !important;
}
.cx-app {
  background:
    radial-gradient(ellipse 70% 55% at 14% -8%,  rgba(246, 203, 171, .55) 0%, transparent 60%),
    radial-gradient(ellipse 60% 70% at 108% 12%, rgba(234, 163, 126, .35) 0%, transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 112%, rgba(252, 230, 205, .85) 0%, transparent 70%),
    linear-gradient(180deg, #f8efe1 0%, #f3e7d2 50%, #ecdec7 100%) !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    0 0 0 1px rgba(120, 75, 40, .06) !important;
}

/* kill the original woven selvedge frame; we replace with a softer cream rule */
.cx-app[data-theme="atelier"]::before {
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent 0,
    rgba(193, 134, 74, .35) 12%,
    rgba(201, 122, 106, .42) 50%,
    rgba(193, 134, 74, .35) 88%,
    transparent 100%) !important;
  background-size: 100% 100% !important;
  border-bottom: 0 !important;
  opacity: .9 !important;
}
.cx-app[data-theme="atelier"]::after {
  display: none !important;
}

/* ── Topbar — frosted glass ──────────────────────────────────── */
.cx-topbar {
  background: linear-gradient(180deg,
    rgba(255, 250, 240, .58),
    rgba(252, 242, 220, .38)) !important;
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border-bottom: 1px solid rgba(120, 75, 40, .12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(120, 75, 40, .05);
}
[data-theme="atelier"] .cx-topbar::after {
  /* shave the woven stripe back to a single hairline */
  background: linear-gradient(90deg,
    transparent 0,
    rgba(193, 134, 74, .42) 50%,
    transparent 100%) !important;
  background-size: 100% 100% !important;
  height: 1px !important;
  opacity: .55 !important;
}
.cx-proj-name {
  font-family: Arial, Helvetica, sans-serif !important;
  font-style: normal;
  font-size: var(--cx-fs-2);
  color: rgba(58, 40, 27, .8) !important;
}
.cx-navlink {
  font-family: var(--sans) !important;
  font-weight: 300;
  letter-spacing: .04em;
}
.cx-navlink.active {
  background: rgba(193, 134, 74, .14) !important;
  color: var(--ink) !important;
}
.cx-tbtn,
.cx-tbtn.ghost {
  background: rgba(255, 250, 240, .55) !important;
  border: 1px solid rgba(120, 75, 40, .2) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink) !important;
  border-radius: 999px !important;
  letter-spacing: .04em;
  transition: background .2s, border-color .2s, transform .15s;
}
.cx-tbtn:hover {
  background: rgba(255, 255, 255, .8) !important;
  border-color: rgba(193, 134, 74, .55) !important;
  transform: translateY(-1px);
}
.cx-tbtn.primary {
  background: linear-gradient(180deg, #d97757, #b05a3e) !important;
  color: #f8e7c3 !important;
  border: 1px solid rgba(193, 134, 74, .55) !important;
  box-shadow:
    0 12px 28px -10px rgba(176, 90, 62, .6),
    inset 0 1px 0 rgba(255, 238, 210, .25),
    inset 0 -1px 0 rgba(0, 0, 0, .35);
}
.cx-tbtn.primary:hover {
  background: linear-gradient(180deg, #e08568, #c5694a) !important;
  opacity: 1 !important;
}
.cx-theme-picker,
.cx-topbar-r .cx-theme-picker {
  background: rgba(255, 250, 240, .55) !important;
  border: 1px solid rgba(120, 75, 40, .2) !important;
  border-radius: 999px !important;
  color: var(--ink) !important;
  backdrop-filter: blur(8px);
}

/* ── Canvas — replace flat fill with the Custex Light cream sky ── */
.cx-canvas-wrap {
  background: transparent !important;
}
.cx-canvas-col::before {
  /* aurora wash that subtly drifts — gives the futuristic depth without overpowering */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 36% at 30% 28%, rgba(246, 203, 171, .38), transparent 62%),
    radial-gradient(ellipse 42% 32% at 76% 64%, rgba(201, 122, 106, .22), transparent 65%),
    radial-gradient(ellipse 38% 28% at 60% 18%, rgba(234, 163, 126, .26), transparent 62%),
    radial-gradient(ellipse 60% 40% at 50% 110%, rgba(252, 230, 205, .55), transparent 72%);
  filter: blur(36px);
  animation: cream-drift 38s ease-in-out infinite alternate;
  will-change: transform;
  z-index: 0;
}
.cx-canvas-col::after {
  /* light grain — like silk dust catching the light */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .25) 0, transparent 4%),
    radial-gradient(circle at 75% 70%, rgba(255, 255, 255, .18) 0, transparent 3%);
  background-size: 380px 380px, 520px 520px;
  mix-blend-mode: screen;
  opacity: .5;
  z-index: 0;
}
.cx-canvas-col > .cx-canvas-wrap { z-index: 1; }
@keyframes cream-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-1.4%, 1.2%, 0) scale(1.04); }
  100% { transform: translate3d(1.6%, -.8%, 0) scale(1.02); }
}

/* canvas grid — soften the dot field over the cream */
.cx-grid {
  opacity: .55;
}
[data-theme="atelier"] .cx-grid[data-cx-canvas-pattern="weave"] {
  background-image:
    repeating-linear-gradient(90deg, rgba(120, 75, 40, .14) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(0deg,  rgba(120, 75, 40, .14) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(0deg,  rgba(193, 134, 74, .22) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(141, 156, 121, .22) 0 1px, transparent 1px 56px) !important;
  mix-blend-mode: multiply;
  opacity: .55;
}
[data-theme="atelier"] .cx-grid[data-cx-canvas-pattern="dots"] {
  background-image:
    radial-gradient(circle at 50% 50%, rgba(120, 75, 40, .26) .7px, transparent .95px),
    radial-gradient(circle at 50% 50%, rgba(193, 134, 74, .22) .55px, transparent .75px) !important;
  mix-blend-mode: multiply;
  opacity: .55;
}
[data-theme="atelier"] .cx-grid[data-cx-canvas-pattern="stripes"] {
  background-image:
    repeating-linear-gradient(90deg, rgba(120, 75, 40, .12) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(193, 134, 74, .12) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(141, 156, 121, .10) 0 1px, transparent 1px 30px) !important;
  mix-blend-mode: multiply;
  opacity: .55;
}

/* tone the left selvedge ruler down to a single thin band */
[data-theme="atelier"] .cx-canvas-wrap::before {
  width: 22px !important;
  background:
    linear-gradient(90deg, rgba(252, 242, 220, .6) 0 22px),
    repeating-linear-gradient(0deg,
      rgba(58, 40, 27, .42) 0 1px,
      transparent 1px 10px,
      rgba(193, 134, 74, .55) 10px 11px,
      transparent 11px 20px) !important;
  border-right: 0.5px solid rgba(120, 75, 40, .14) !important;
  opacity: .5 !important;
}
[data-theme="atelier"] .cx-canvas-wrap::after {
  color: rgba(58, 40, 27, .42) !important;
  font-family: var(--sans) !important;
  letter-spacing: .28em !important;
}

/* ── NODE — frosted glass, lifted, with textile DNA preserved ── */
.cx-node {
  background: linear-gradient(180deg,
    rgba(255, 250, 240, .75),
    rgba(248, 238, 221, .55)) !important;
  border: 1px solid rgba(255, 255, 255, .65) !important;
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  box-shadow:
    0 30px 60px -22px rgba(120, 75, 40, .38),
    0 8px 22px -6px rgba(120, 75, 40, .18),
    0 0 0 1px rgba(193, 134, 74, .08),
    inset 0 1px 0 rgba(255, 255, 255, .8),
    inset 0 -1px 0 rgba(120, 75, 40, .06) !important;
  transition: box-shadow .25s, border-color .25s, transform .2s ease-out;
}
.cx-node:hover {
  transform: translateY(-1px);
  box-shadow:
    0 38px 72px -22px rgba(120, 75, 40, .45),
    0 12px 28px -6px rgba(120, 75, 40, .22),
    0 0 0 1px rgba(193, 134, 74, .14),
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -1px 0 rgba(120, 75, 40, .06) !important;
}
.cx-node.sel {
  border-color: rgba(193, 134, 74, .55) !important;
  box-shadow:
    0 0 0 2px rgba(193, 134, 74, .45),
    0 32px 64px -22px rgba(120, 75, 40, .42),
    0 10px 22px -6px rgba(120, 75, 40, .2),
    inset 0 1px 0 rgba(255, 255, 255, .8) !important;
}

/* node header — frosted band, glassy gradient, still tinted per role */
.cx-node-header {
  background: linear-gradient(180deg,
    rgba(255, 252, 244, .7),
    rgba(252, 242, 220, .35)) !important;
  border-bottom: 1px solid rgba(120, 75, 40, .12) !important;
  position: relative;
}

/* per-role header tint — softer cream overlays over the glass */
.cx-node-product   .cx-node-header { background: linear-gradient(180deg, rgba(193,134,74,.48), rgba(193,134,74,.24)) !important; }
.cx-node-craft     .cx-node-header { background: linear-gradient(180deg, rgba(141,156,121,.50), rgba(141,156,121,.24)) !important; }
.cx-node-fabric    .cx-node-header { background: linear-gradient(180deg, rgba(176,120,160,.42), rgba(176,120,160,.24)) !important; }
.cx-node-motif     .cx-node-header { background: linear-gradient(180deg, rgba(234,163,126,.50), rgba(234,163,126,.24)) !important; }
.cx-node-matte     .cx-node-header { background: linear-gradient(180deg, rgba(122,145,168,.46), rgba(122,145,168,.24)) !important; }
.cx-node-colorSplit .cx-node-header { background: linear-gradient(180deg, rgba(176,120,160,.46), rgba(176,120,160,.24)) !important; }
.cx-node-layout    .cx-node-header { background: linear-gradient(180deg, rgba(106,130,198,.42), rgba(106,130,198,.24)) !important; }
.cx-node-airender  .cx-node-header { background: linear-gradient(180deg, rgba(109,182,168,.46), rgba(109,182,168,.24)) !important; }
.cx-node-output    .cx-node-header { background: linear-gradient(180deg, rgba(58,40,27,.38), rgba(58,40,27,.22)) !important; }

/* keep the jacquard motif strip (textile DNA) but pull it inside the rounded corners */
[data-theme="atelier"] .cx-node-header::before {
  height: 4px !important;
  border-radius: 13px 13px 0 0;
  opacity: .85;
  mix-blend-mode: multiply;
}
[data-theme="atelier"] .cx-node-header::after {
  /* running-stitch divider — softer */
  background-image: repeating-linear-gradient(90deg,
    rgba(193, 134, 74, .55) 0 6px,
    transparent 6px 10px) !important;
  opacity: .55 !important;
}

.cx-node-title {
  font-family: Arial, Helvetica, sans-serif !important;
  font-style: normal;
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--ink);
}
.cx-node-num {
  font-family: var(--sans) !important;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--warm);
}
.cx-node-type {
  font-family: var(--sans) !important;
  font-weight: 400;
  font-size: 8.5px;
  letter-spacing: .18em;
  background: rgba(255, 250, 240, .55);
  border: 1px solid rgba(120, 75, 40, .18) !important;
  color: var(--warm) !important;
  backdrop-filter: blur(6px);
}
.cx-node-act,
.cx-node-collapse {
  background: rgba(255, 250, 240, .55) !important;
  border: 1px solid rgba(120, 75, 40, .18) !important;
  color: var(--warm) !important;
  backdrop-filter: blur(6px);
}
.cx-node-act:hover,
.cx-node-collapse:hover {
  border-color: rgba(193, 134, 74, .55) !important;
  color: var(--ink) !important;
}

/* node body — glass, weave kept but faint */
.cx-node-body {
  background: linear-gradient(180deg,
    rgba(255, 252, 244, .32),
    rgba(252, 242, 220, .24)) !important;
}
[data-theme="atelier"] .cx-node-body::before {
  opacity: .18 !important;          /* faint warp/weft hum, not loud */
}
.cx-node-collapsed-primary {
  font-family: Arial, Helvetica, sans-serif !important;
  font-style: normal;
  font-weight: 400;
  color: var(--ink);
}
.cx-node-collapsed-secondary {
  font-family: var(--sans) !important;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--warm) !important;
}

/* fields — tier 3 captions (.cx-field-l tier-1 override below) */
.cx-side-h,
.cx-prev-l,
.cx-libsub,
.cx-ws-tag,
.cx-mini-stat-k,
.cx-saved {
  font-family: var(--sans) !important;
  font-weight: 400 !important;
  font-size: var(--cx-fs-3) !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
}
.cx-field-v,
.cx-mini-stat-v,
.cx-prev-r {
  font-family: Arial, Helvetica, sans-serif !important;
  font-style: normal;
  font-weight: 400;
}
.cx-select,
.cx-textarea,
.cx-size-input,
.cx-size-unit {
  background: rgba(255, 252, 244, .42) !important;
  border: 1px solid rgba(120, 75, 40, .18) !important;
  backdrop-filter: blur(6px);
  border-radius: 8px !important;
  color: var(--ink) !important;
}
.cx-select:focus,
.cx-textarea:focus,
.cx-size-input:focus,
.cx-size-unit:focus {
  border-color: rgba(193, 134, 74, .55) !important;
  box-shadow: 0 0 0 2px rgba(193, 134, 74, .12);
  outline: none;
}
.cx-chip,
.cx-tile,
.cx-btn-ghost,
.cx-libnode {
  background: rgba(255, 250, 240, .42) !important;
  border: 1px solid rgba(120, 75, 40, .16) !important;
  backdrop-filter: blur(6px);
  color: var(--ink) !important;
}
.cx-chip:hover,
.cx-tile:hover,
.cx-btn-ghost:hover,
.cx-libnode:hover {
  border-color: rgba(193, 134, 74, .55) !important;
  background: rgba(255, 255, 255, .7) !important;
}
.cx-chip.sel,
.cx-tile.sel {
  background: linear-gradient(180deg, #d97757, #b05a3e) !important;
  color: #f8e7c3 !important;
  border-color: rgba(176, 90, 62, .85) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 210, .2),
    inset 0 -1px 0 rgba(0, 0, 0, .3);
}
.cx-btn-primary {
  background: linear-gradient(180deg, #d97757, #b05a3e) !important;
  color: #f8e7c3 !important;
  border-radius: 999px !important;
  font-family: var(--sans) !important;
  font-weight: 500;
  letter-spacing: .18em;
  box-shadow:
    0 14px 28px -10px rgba(176, 90, 62, .55),
    inset 0 1px 0 rgba(255, 238, 210, .25);
}
.cx-seg {
  background: rgba(120, 75, 40, .08) !important;
  border-radius: 999px !important;
  padding: 3px !important;
}
.cx-seg-b {
  border-radius: 999px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
}
.cx-seg-b.sel {
  background: rgba(255, 255, 255, .85) !important;
  color: var(--ink) !important;
  box-shadow: 0 2px 6px rgba(120, 75, 40, .15);
}
.cx-mini-stat {
  background: rgba(255, 250, 240, .42) !important;
  backdrop-filter: blur(6px);
  border-left: 2px solid rgba(193, 134, 74, .65) !important;
  border-radius: 10px !important;
}

/* ── Ports — glassy bobbins with a soft outer glow ─ */
.cx-port {
  border: 2px solid rgba(255, 250, 240, .9) !important;
  box-shadow:
    0 0 0 1px rgba(120, 75, 40, .25),
    0 0 12px rgba(193, 134, 74, .35) !important;
}
.cx-port:hover {
  box-shadow:
    0 0 0 2px rgba(58, 40, 27, .8),
    0 0 18px rgba(193, 134, 74, .65) !important;
}
[data-theme="atelier"] .cx-port::after {
  background: rgba(255, 250, 240, .85) !important;
  opacity: .8 !important;
}

/* ── Wires — keep yarn flow animation, soften ─ */
.cx-wire { opacity: .82 !important; }
[data-theme="atelier"] .cx-wire {
  stroke-width: 1.6 !important;
  opacity: .78 !important;
  filter: drop-shadow(0 1px 2px rgba(120, 75, 40, .25));
}

/* ── Sidebar — frosted ─ */
.cx-sidebar {
  background: linear-gradient(180deg,
    rgba(255, 250, 240, .42),
    rgba(248, 238, 221, .28)) !important;
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border-right: 1px solid rgba(120, 75, 40, .12) !important;
  background-image: none !important;
}
[data-theme="atelier"] .cx-sidebar::after {
  /* selvedge ribbon → cream gold hairline */
  background: linear-gradient(180deg,
    transparent 0,
    rgba(193, 134, 74, .38) 30%,
    rgba(201, 122, 106, .42) 70%,
    transparent 100%) !important;
  width: 1px !important;
  opacity: .55 !important;
}
[data-theme="atelier"] .cx-side-h::after {
  background-image: repeating-linear-gradient(90deg,
    rgba(193, 134, 74, .55) 0 6px,
    transparent 6px 10px) !important;
  opacity: .5 !important;
}
.cx-proj-list li.active,
.cx-proj-list li:hover {
  background: rgba(255, 255, 255, .55) !important;
}
.cx-libdot { box-shadow: 0 0 8px currentColor; }
.cx-workshop-list li {
  background: rgba(255, 250, 240, .42) !important;
  backdrop-filter: blur(6px);
}

/* ── Preview pane — frosted ─ */
.cx-preview {
  background: linear-gradient(180deg,
    rgba(255, 250, 240, .42),
    rgba(248, 238, 221, .28)) !important;
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border-left: 1px solid rgba(120, 75, 40, .12) !important;
}
[data-theme="atelier"] .cx-preview::before {
  background: linear-gradient(180deg,
    transparent 0,
    rgba(193, 134, 74, .42) 30%,
    rgba(201, 122, 106, .42) 70%,
    transparent 100%) !important;
  width: 1px !important;
  opacity: .55 !important;
}
.cx-prev-bar {
  background: transparent !important;
  border-bottom: 1px solid rgba(120, 75, 40, .12) !important;
}
.cx-prev-area {
  background:
    radial-gradient(ellipse 70% 80% at 50% 40%, rgba(255, 248, 232, .65), transparent 75%),
    rgba(252, 242, 220, .35) !important;
  backdrop-filter: blur(4px);
}
[data-theme="atelier"] .cx-prev-area {
  background:
    radial-gradient(ellipse 70% 80% at 50% 40%, rgba(255, 248, 232, .65), transparent 75%),
    rgba(252, 242, 220, .35) !important;
  background-image:
    radial-gradient(ellipse 70% 80% at 50% 40%, rgba(255, 248, 232, .55), transparent 75%),
    repeating-linear-gradient(0deg,
      rgba(120, 75, 40, .07) 0 .5px, transparent .5px 4px),
    repeating-linear-gradient(90deg,
      rgba(120, 75, 40, .07) 0 .5px, transparent .5px 4px) !important;
  background-size: 100% 100%, 4px 4px, 4px 4px;
}
.cx-prev-mode {
  background: rgba(120, 75, 40, .08) !important;
  border: 1px solid rgba(120, 75, 40, .18) !important;
  border-radius: 999px !important;
}
.cx-prev-mode-btn.on {
  background: linear-gradient(180deg, #d97757, #b05a3e) !important;
  color: #f8e7c3 !important;
}
.cx-prev-ico {
  background: rgba(255, 250, 240, .55) !important;
  border: 1px solid rgba(120, 75, 40, .2) !important;
  backdrop-filter: blur(6px);
}
.cx-prev-ico.primary {
  background: linear-gradient(180deg, #d97757, #b05a3e) !important;
  color: #f8e7c3 !important;
}
.cx-prev-vessel {
  box-shadow:
    0 22px 50px rgba(120, 75, 40, .25),
    inset 0 1px 0 rgba(255, 255, 255, .55) !important;
}

/* ── Bottom-right tools + zoom — pill, glassy ─ */
.cx-wire-tool,
.cx-zoom {
  background: rgba(255, 250, 240, .55) !important;
  border: 1px solid rgba(120, 75, 40, .2) !important;
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border-radius: 999px !important;
  box-shadow:
    0 12px 28px -8px rgba(120, 75, 40, .25),
    inset 0 1px 0 rgba(255, 255, 255, .65);
}
.cx-wire-tool.sel {
  background: rgba(255, 255, 255, .8) !important;
  border-color: rgba(193, 134, 74, .6) !important;
  box-shadow:
    0 0 0 1px rgba(193, 134, 74, .35),
    0 12px 28px -8px rgba(120, 75, 40, .3),
    inset 0 1px 0 rgba(255, 255, 255, .7);
}
.cx-wire-tool-label {
  font-family: var(--sans) !important;
  letter-spacing: .12em;
}
.cx-zoom button { color: var(--ink) !important; }

/* minimap — glassy plate */
.cx-minimap {
  background: rgba(255, 250, 240, .55) !important;
  border: 1px solid rgba(120, 75, 40, .18) !important;
  backdrop-filter: blur(12px) saturate(1.1);
  border-radius: 12px !important;
  box-shadow:
    0 12px 28px -8px rgba(120, 75, 40, .25),
    inset 0 1px 0 rgba(255, 255, 255, .65);
  overflow: hidden;
}
.cx-mm-h {
  background: transparent !important;
  border-bottom: 1px solid rgba(120, 75, 40, .12) !important;
  color: var(--warm) !important;
  letter-spacing: .18em;
}

/* hint banner */
.cx-hint {
  background: rgba(255, 250, 240, .55) !important;
  border: 1px solid rgba(120, 75, 40, .18) !important;
  backdrop-filter: blur(8px);
  border-radius: 999px !important;
  color: var(--warm) !important;
  font-family: var(--sans) !important;
  letter-spacing: .12em;
}

/* AI chat panel — also glass */
.cx-ai-chat-fab,
.cx-ai-chat-panel {
  background: rgba(255, 250, 240, .65) !important;
  border: 1px solid rgba(120, 75, 40, .2) !important;
  backdrop-filter: blur(20px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.1) !important;
  box-shadow:
    0 22px 50px -16px rgba(120, 75, 40, .35),
    inset 0 1px 0 rgba(255, 255, 255, .7) !important;
  border-radius: 14px !important;
}
.cx-ai-chat-fab { border-radius: 14px !important; }
.cx-ai-chat-bar {
  background: rgba(255, 250, 240, .45) !important;
  border-bottom: 1px solid rgba(120, 75, 40, .1);
}
.cx-ai-chat-msg-text {
  background: rgba(255, 252, 244, .55) !important;
  border: 1px solid rgba(120, 75, 40, .15) !important;
  backdrop-filter: blur(6px);
}
.cx-ai-chat-input {
  background: rgba(255, 252, 244, .55) !important;
  border: 1px solid rgba(120, 75, 40, .2) !important;
  backdrop-filter: blur(6px);
  color: var(--ink) !important;
}
.cx-ai-chat-send {
  background: linear-gradient(180deg, #d97757, #b05a3e) !important;
  color: #f8e7c3 !important;
  border-color: rgba(176, 90, 62, .85) !important;
  border-radius: 999px !important;
}

/* tech-pack modal — frosted, with subtle stitched edge kept */
[data-theme="atelier"] .cx-modal-card {
  background: rgba(255, 250, 240, .82) !important;
  border: 1px solid rgba(255, 255, 255, .65) !important;
  backdrop-filter: blur(28px) saturate(1.1);
  -webkit-backdrop-filter: blur(28px) saturate(1.1);
  box-shadow:
    0 40px 80px -20px rgba(120, 75, 40, .45),
    inset 0 1px 0 rgba(255, 255, 255, .75);
}
[data-theme="atelier"] .cx-modal-card::before {
  /* keep the jacquard top band but recolor */
  background:
    repeating-linear-gradient(90deg,
      #c1864a 0 4px,
      #c97a6a 4px 8px,
      #eaa37e 8px 12px) !important;
  height: 4px !important;
  opacity: .85;
}

/* ─────────────────────────────────────────────────────────────
   Minimal node redesign — less text, more breathing room.
   Strategy: hide redundant labels (type chip, num prefix,
   long explainer notes), shrink eyebrow labels into faint
   hairlines, and reveal action buttons only on hover.
   ───────────────────────────────────────────────────────────── */

/* HEADER — drop the duplicate uppercase role chip + number prefix.
   Title alone (italic serif, role-tinted band) carries the identity. */
[data-theme="atelier"] .cx-node-num,
[data-theme="atelier"] .cx-node-type {
  display: none !important;
}

[data-theme="atelier"] .cx-node-header {
  padding: 10px 12px 9px !important;
  min-height: 0 !important;
  gap: 8px;
}
[data-theme="atelier"] .cx-node-title {
  font-family: Arial, Helvetica, sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: var(--cx-fs-1) !important;
  letter-spacing: .01em !important;
}

/* status badge → smaller dot, slid into header corner */
[data-theme="atelier"] .cx-node-badge {
  width: 6px !important;
  height: 6px !important;
  margin-left: auto;
}

/* ACTIONS — hide until hover or selection. Keeps header quiet by default. */
[data-theme="atelier"] .cx-node-actions {
  opacity: 0;
  transform: translateX(4px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
[data-theme="atelier"] .cx-node:hover .cx-node-actions,
[data-theme="atelier"] .cx-node.sel .cx-node-actions {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
[data-theme="atelier"] .cx-node-act {
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  font-size: 0;
}

/* collapse chevron — smaller, lower-contrast */
[data-theme="atelier"] .cx-node-collapse {
  width: 18px !important;
  height: 18px !important;
  background: transparent !important;
  border: 0 !important;
  color: rgba(58, 40, 27, .35) !important;
  box-shadow: none !important;
}
[data-theme="atelier"] .cx-node-collapse:hover {
  color: rgba(58, 40, 27, .85) !important;
  background: transparent !important;
}

/* BODY — kill explainer paragraphs (info still lives on the node's
   "?" hover from the title), and turn eyebrow labels into hairline UPPERCASE
   that step out of the way of the actual values. */
[data-theme="atelier"] .cx-node-body {
  padding: 12px !important;
  gap: 8px;
}
/* Hide helper copy only — keep API / upload errors visible */
[data-theme="atelier"] .cx-render-note:not(.cx-render-note-err) {
  display: none !important;
}
[data-theme="atelier"] .cx-render-note-err {
  display: block !important;
  margin-top: 6px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  background: rgba(193, 134, 74, .12) !important;
  border: 1px solid rgba(193, 134, 74, .35) !important;
  color: #8a3d20 !important;
  font-family: var(--sans) !important;
  font-size: var(--cx-fs-2) !important;
  font-style: normal !important;
  letter-spacing: .04em !important;
  line-height: 1.45 !important;
}

[data-theme="atelier"] .cx-field-l {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: var(--cx-fs-1) !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  color: #4a4a4a !important;
  margin-bottom: 2px !important;
  margin-top: 6px !important;
  font-weight: 400 !important;
}
[data-theme="atelier"] .cx-field-l:first-child {
  margin-top: 0 !important;
}
[data-theme="atelier"] .cx-field-l .cx-field-v {
  font-size: var(--cx-fs-2);
  letter-spacing: .005em;
  text-transform: none;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif !important;
  font-style: normal !important;
  font-weight: 400;
  margin-left: auto;
}
[data-theme="atelier"] .cx-field-optional {
  display: none !important;
}

/* SEGMENT controls (e.g. THREAD TYPE matte/lustre) — already compact,
   just pull the spacing in */
[data-theme="atelier"] .cx-seg {
  margin-bottom: 2px;
}

/* Craft chips (EMBR / PRINT / …) + segment buttons — Arial */
[data-theme="atelier"] .cx-chip,
[data-theme="atelier"] .cx-seg-b,
[data-theme="atelier"] .cx-seg-layout .cx-seg-b {
  font-family: Arial, Helvetica, sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
}

/* Long preview placeholder slabs (NO MOTIF YET / NO LAYERS YET) — keep
   but slim down so they don't dominate */
[data-theme="atelier"] .cx-motif-preview,
[data-theme="atelier"] .cx-airender-preview:not(.cx-airender-pattern-preview) {
  min-height: 148px !important;
  border-radius: 10px !important;
  background: rgba(252, 244, 228, .35) !important;
  border: 1px dashed rgba(120, 75, 40, .22) !important;
}

[data-theme="atelier"] .cx-moodboard {
  border: 2px dashed rgba(120, 75, 40, .32) !important;
  border-radius: 16px !important;
  background: rgba(252, 244, 228, .42) !important;
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  box-shadow: 0 8px 28px rgba(120, 75, 40, .06);
}
[data-theme="atelier"] .cx-moodboard-head {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: var(--cx-fs-2, 12px) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: #3a2f26 !important;
  background: rgba(252, 244, 228, .55) !important;
}
[data-theme="atelier"] .cx-moodboard-label {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: var(--cx-fs-1, 18px) !important;
  font-weight: 400 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  color: #4a4a4a !important;
}
[data-theme="atelier"] .cx-moodboard-resize::after {
  border-color: rgba(120, 75, 40, .4) !important;
}
[data-theme="atelier"] .cx-moodboard-item {
  border-radius: 10px !important;
  border-color: rgba(120, 75, 40, .18) !important;
  background: rgba(252, 244, 228, .5) !important;
}
[data-theme="atelier"] .cx-moodboard-item-sel {
  border-color: rgba(148, 74, 32, .55) !important;
  box-shadow: 0 0 0 2px rgba(148, 74, 32, .18), 0 8px 20px rgba(120, 75, 40, .12) !important;
}
[data-theme="atelier"] .cx-moodboard-item-resize::after {
  border-color: rgba(148, 74, 32, .5) !important;
}

/* Action rows (Regenerate / Upload PNG / Clear, etc.) — wrap inside narrow nodes */
[data-theme="atelier"] .cx-node-body .cx-row {
  flex-wrap: wrap !important;
  gap: 6px !important;
}
[data-theme="atelier"] .cx-node-body .cx-btn-ghost {
  flex: 1 1 calc(50% - 3px) !important;
  min-width: 0 !important;
  max-width: 100%;
  padding: 6px 8px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: var(--cx-fs-2) !important;
  font-weight: 400 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  white-space: nowrap;
}

/* Custom size row — give the unit dropdown room to breathe */
[data-theme="atelier"] .cx-size-row {
  gap: 4px !important;
}
[data-theme="atelier"] .cx-size-input,
[data-theme="atelier"] .cx-size-unit {
  padding: 6px 6px !important;
  font-size: var(--cx-fs-2) !important;
}

/* Material list — tighten row spacing */
[data-theme="atelier"] .cx-tile {
  padding: 8px 10px !important;
}
[data-theme="atelier"] .cx-tile-meta {
  font-size: var(--cx-fs-3) !important;
  letter-spacing: .14em !important;
}

/* Product/craft tile grid — shorter rows */
[data-theme="atelier"] .cx-grid .cx-tile,
[data-theme="atelier"] .cx-prod-grid .cx-tile {
  min-height: 56px !important;
}

/* Pricing/diff badge — tame the +£1.80 chip */
[data-theme="atelier"] .cx-price-chip,
[data-theme="atelier"] .cx-node .cx-price {
  font-size: var(--cx-fs-2) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-style: normal !important;
  color: var(--ink);
}

/* Range sliders — khaki brown accent */
[data-theme="atelier"] .cx-range {
  margin: 4px 0 6px !important;
  accent-color: #d97757 !important;
}
/* Fallback for browsers without accent-color */
[data-theme="atelier"] .cx-range::-webkit-slider-thumb {
  background: linear-gradient(180deg, #e08568, #c5694a) !important;
  border: 1px solid rgba(176, 90, 62, .55) !important;
}
[data-theme="atelier"] .cx-range::-moz-range-thumb {
  background: #d97757 !important;
  border: 1px solid rgba(176, 90, 62, .55) !important;
}

/* Collapsed summary — already clean, just align */
[data-theme="atelier"] .cx-node.cx-node-collapsed .cx-node-body {
  padding: 10px 12px !important;
}

/* When selected, give a faint inner glow instead of a hard ring on the
   header — pairs better with the now-minimal header */
[data-theme="atelier"] .cx-node.sel .cx-node-header {
  background-image: linear-gradient(180deg,
    rgba(255, 252, 244, .45),
    transparent 70%);
}

/* canvas fabric-tag pill — glass */
.cx-fabric-tag,
.cx-fabric-sw {
  filter: drop-shadow(0 4px 12px rgba(120, 75, 40, .15));
}

/* ─────────────────────────────────────────────────────────────
   FLOATING PANELS LAYER
   The three columns (sidebar / preview / spec) leave the rigid
   grid and become independently-toggleable floating glass cards.
   Toggle state is held in body[data-panel-*] attributes; the rail
   of toggle chips is injected at runtime (see Custex Node Editor
   (Cream).html).
   ───────────────────────────────────────────────────────────── */

/* Studio route only — pages route (home, library, etc) keeps default layout */
.cx-app[data-route="studio"] .cx-main {
  display: block !important;
  position: relative;
}
.cx-app[data-route="studio"] .cx-canvas-col {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  min-width: 0 !important;
}

/* Center panel toggle dock removed — left tabs + right preview toolbar only */
.cx-fp-dock { display: none !important; }

/* ── Float the SIDEBAR as a glass card on the left ─────────── */
.cx-app[data-route="studio"] .cx-sidebar {
  position: fixed !important;
  left: 98px !important;
  top: 70px !important;
  width: 272px !important;
  max-height: calc(100vh - 86px) !important;
  height: auto !important;
  padding: 18px 16px !important;
  /* warmer, more opaque cream so brown nodes underneath don't bleed through,
     but keep some translucency so it still reads as glass over the canvas */
  background: linear-gradient(180deg,
    rgba(252, 244, 228, .92),
    rgba(248, 236, 215, .88)) !important;
  backdrop-filter: blur(26px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.15) !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, .65) !important;
  box-shadow:
    0 28px 60px -18px rgba(120, 75, 40, .45),
    0 8px 22px -6px rgba(120, 75, 40, .2),
    inset 0 1px 0 rgba(255, 255, 255, .75) !important;
  overflow-y: auto !important;
  z-index: 22;
  transition:
    transform .42s cubic-bezier(.55, .12, .25, 1),
    opacity .26s ease;
  transform-origin: top left;
}
.cx-app[data-route="studio"] .cx-sidebar.cx-sidebar-hidden,
body[data-side-panel="closed"] .cx-app[data-route="studio"] .cx-sidebar {
  transform: translateX(calc(-100% - 30px)) scale(.96) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
[data-theme="atelier"] .cx-app[data-route="studio"] .cx-sidebar::after {
  display: none !important;  /* selvedge stripe doesn't read as well on a card */
}

/* ── Float the PREVIEW + SPEC as one merged panel on the right ─ */
.cx-app[data-route="studio"] .cx-preview {
  position: fixed !important;
  right: 16px !important;
  top: 70px !important;
  bottom: 70px !important;
  width: var(--cx-preview-w, 392px) !important;
  max-height: none !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  border-left: 0 !important;
  background: linear-gradient(180deg,
    rgba(252, 244, 228, .92),
    rgba(248, 236, 215, .88)) !important;
  backdrop-filter: blur(26px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.15) !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, .65) !important;
  box-shadow:
    0 28px 60px -18px rgba(120, 75, 40, .45),
    0 8px 22px -6px rgba(120, 75, 40, .2),
    inset 0 1px 0 rgba(255, 255, 255, .75) !important;
  overflow: hidden;
  z-index: 22;
  transition:
    transform .42s cubic-bezier(.55, .12, .25, 1),
    opacity .26s ease,
    width .12s ease;
  transform-origin: top right;
}
.cx-app[data-route="studio"] .cx-prev-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden;
}
.cx-app[data-route="studio"] .cx-preview-resize-w {
  display: block !important;
  left: 0 !important;
  z-index: 24 !important;
}
.cx-app[data-route="studio"] .cx-preview-resize-w:hover {
  background: rgba(120, 75, 40, .08) !important;
}
[data-theme="atelier"] .cx-app[data-route="studio"] .cx-preview::before {
  display: none !important;  /* selvedge stripe */
}
/* Right preview panel keeps its own toolbar (collapse / resize / zoom) */
.cx-app[data-route="studio"] .cx-prev-bar {
  flex-shrink: 0;
}
.cx-app[data-route="studio"] .cx-prev-actions-icons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* The decorative WEAVE / TWILL / HERRINGBONE swatch tag is pinned to canvas
   top:14/right:14 in textile.css — right under the floating Preview card.
   In studio route we have the live preview itself, so we don't need this
   decorative duplicate. Hide it to remove the overlap. */
.cx-app[data-route="studio"] .cx-fabric-tag {
  display: none !important;
}

/* Spec & pricing stays inside the merged preview card */
.cx-app[data-route="studio"] .cx-prev-footer {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  max-height: none !important;
  height: auto !important;
  flex: 0 1 auto !important;
  min-height: 0 !important;
  padding: 14px 18px 18px !important;
  margin: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(120, 75, 40, .12) !important;
  box-shadow: none !important;
  overflow-y: auto !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.cx-app[data-route="studio"] .cx-prev-footer.cx-prev-footer-scroll {
  /* the inline-style height (from React resize) would override max-height —
     it doesn't get set when prev-resize-handle is hidden, so this is just a safety */
  flex: none !important;
}

/* Inject a small "Spec & Pricing" caption above the footer's first row */
.cx-app[data-route="studio"] .cx-prev-footer::before {
  content: 'Spec & Pricing';
  display: block;
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: var(--cx-fs-3);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--warm);
  padding: 2px 0 12px;
  border-bottom: 1px solid rgba(120, 75, 40, .12);
  margin-bottom: 12px;
}
.cx-app[data-route="studio"] .cx-prev-footer .cx-prev-hint {
  display: none !important;  /* "scroll to zoom" hint belongs to preview, not info */
}


/* Preview area grows; spec scrolls below the drag handle */
.cx-app[data-route="studio"] .cx-prev-area {
  flex: 1 1 auto !important;
  min-height: 160px;
}
.cx-app[data-route="studio"] .cx-prev-area.cx-prev-area-sized {
  flex: 0 0 auto !important;
}
.cx-app[data-route="studio"] .cx-prev-resize-handle {
  display: flex !important;
  flex-shrink: 0 !important;
  height: 12px !important;
  margin: 0 !important;
  cursor: ns-resize !important;
  touch-action: none !important;
  z-index: 6 !important;
  background: rgba(120, 75, 40, .06) !important;
  border-top: 1px solid rgba(120, 75, 40, .14) !important;
  border-bottom: 1px solid rgba(120, 75, 40, .14) !important;
}
.cx-app[data-route="studio"] .cx-prev-resize-handle::after {
  width: 44px !important;
  height: 4px !important;
  border-radius: 99px !important;
  background: rgba(120, 75, 40, .28) !important;
}
.cx-app[data-route="studio"] .cx-prev-resize-handle:hover {
  background: rgba(120, 75, 40, .1) !important;
}
.cx-app[data-route="studio"] .cx-prev-resize-handle:hover::after {
  background: rgba(120, 75, 40, .42) !important;
}
.cx-app[data-route="studio"] .cx-prev-footer.cx-prev-footer-scroll {
  flex: 1 1 auto !important;
  min-height: 120px !important;
  max-height: none !important;
  overflow-y: auto !important;
}

@media (max-height: 820px) {
  .cx-app[data-route="studio"] .cx-preview { bottom: 56px !important; }
}

/* ── scrollbars (sidebar / preview / chat) — warm and unobtrusive ── */
.cx-sidebar::-webkit-scrollbar,
.cx-prev-footer-scroll::-webkit-scrollbar,
.cx-ai-chat-list::-webkit-scrollbar,
.cx-app::-webkit-scrollbar { width: 8px; height: 8px; }
.cx-sidebar::-webkit-scrollbar-thumb,
.cx-prev-footer-scroll::-webkit-scrollbar-thumb,
.cx-ai-chat-list::-webkit-scrollbar-thumb,
.cx-app::-webkit-scrollbar-thumb {
  background: rgba(120, 75, 40, .22);
  border-radius: 999px;
}
.cx-sidebar::-webkit-scrollbar-thumb:hover,
.cx-prev-footer-scroll::-webkit-scrollbar-thumb:hover,
.cx-ai-chat-list::-webkit-scrollbar-thumb:hover,
.cx-app::-webkit-scrollbar-thumb:hover {
  background: rgba(120, 75, 40, .42);
}


/* ── Sidebar tab bar (Projects / Nodes / Workshops) ────────── */
.cx-side-tabs--canvas {
  position: absolute !important;
  top: 70px !important;
  left: 16px !important;
  z-index: 31 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.cx-side-tabs--canvas .cx-side-tab {
  flex: 0 0 auto !important;
  width: 74px !important;
  min-width: 74px !important;
  padding: 11px 6px 10px !important;
  background: rgba(255, 250, 240, .72) !important;
  border: 1px solid rgba(120, 75, 40, .18) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  box-shadow:
    0 8px 22px -8px rgba(120, 75, 40, .25),
    inset 0 1px 0 rgba(255, 255, 255, .65);
}
.cx-side-tab {
  flex: 1 1 0 !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px;
  min-width: 0;
  padding: 9px 4px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 14px !important;
  font-family: 'Manrope', 'Space Grotesk', system-ui, sans-serif !important;
  font-size: var(--cx-fs-2) !important;
  letter-spacing: .04em !important;
  text-transform: none !important;
  font-weight: 500 !important;
  color: rgba(58, 40, 27, .55) !important;
  cursor: pointer;
  transition: color .18s, background .18s;
}
.cx-side-tab:hover {
  color: rgba(58, 40, 27, .85) !important;
  background: rgba(255, 255, 255, .4) !important;
}
.cx-side-tab[aria-selected="true"] {
  background: linear-gradient(180deg, #d97757, #b05a3e) !important;
  color: #fff7ec !important;
  box-shadow:
    0 4px 10px -3px rgba(176, 90, 62, .5),
    inset 0 1px 0 rgba(255, 220, 195, .35),
    inset 0 -1px 0 rgba(110, 53, 32, .35) !important;
}
.cx-side-tab-ico {
  width: 16px !important;
  height: 16px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
}
.cx-side-tab-ico > svg,
.cx-side-tab svg {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
.cx-side-tab-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Studio sidebar tabs — scope to studio route so Library/Mfg/Community sidebars stay visible */
.cx-app[data-route="studio"] .cx-sidebar > .cx-side-section { display: none !important; }
.cx-app[data-route="studio"] .cx-sidebar[data-active-section="projects"]  > .cx-side-section[data-tab-key="projects"],
.cx-app[data-route="studio"] .cx-sidebar[data-active-section="nodes"]     > .cx-side-section[data-tab-key="nodes"],
.cx-app[data-route="studio"] .cx-sidebar[data-active-section="workshops"] > .cx-side-section[data-tab-key="workshops"] {
  display: block !important;
}
/* hide the redundant section heading text — labels now live on tabs */
.cx-app[data-route="studio"] .cx-sidebar > .cx-side-section > .cx-side-h:first-child {
  display: none !important;
}
/* exception: keep Projects heading because it carries the "+" add button */
.cx-app[data-route="studio"] .cx-sidebar > .cx-side-section[data-tab-key="projects"] > .cx-side-h-proj {
  display: flex !important;
  justify-content: flex-end !important;
  padding: 0 0 6px !important;
  margin-bottom: 4px !important;
}
.cx-app[data-route="studio"] .cx-sidebar > .cx-side-section[data-tab-key="projects"] > .cx-side-h-proj > span {
  display: none !important;
}
.cx-app[data-route="studio"] .cx-sidebar > .cx-side-section[data-tab-key="projects"] > .cx-side-h-proj::after {
  display: none !important;
}
/* Workshops still uses the "3 nearby" pill chip; show it as a floating chip */
.cx-app[data-route="studio"] .cx-sidebar > .cx-side-section[data-tab-key="workshops"] > .cx-side-h {
  display: flex !important;
  justify-content: flex-end !important;
  padding: 0 0 6px !important;
  margin-bottom: 4px !important;
}
.cx-app[data-route="studio"] .cx-sidebar > .cx-side-section[data-tab-key="workshops"] > .cx-side-h::after {
  display: none !important;
}

/* ── Typography tiers — catch-all for Studio (atelier) ─────────
   L1 大 18px — titles, field labels, key figures
   L2 中 12px — body, controls, buttons, values
   L3 小  9px — captions, meta, badges
   ──────────────────────────────────────────────────────────── */

/* L1 */
[data-theme="atelier"] .cx-node-collapsed-primary,
[data-theme="atelier"] .cx-mini-stat-v,
[data-theme="atelier"] .cx-prev-footer .cx-tp-row.total .v,
[data-theme="atelier"] .cx-tp-title,
[data-theme="atelier"] .cx-tp-price strong,
[data-theme="atelier"] .cx-tp-v,
[data-theme="atelier"] .cx-qty input,
[data-theme="atelier"] .cx-prev-cap-v {
  font-size: var(--cx-fs-1) !important;
}

/* L2 */
[data-theme="atelier"] .cx-navlink,
[data-theme="atelier"] .cx-topbar-r .cx-tbtn,
[data-theme="atelier"] .cx-topbar-r .cx-theme-picker,
[data-theme="atelier"] .cx-tbtn,
[data-theme="atelier"] .cx-tbtn-arrow,
[data-theme="atelier"] .cx-libnode,
[data-theme="atelier"] .cx-liblabel,
[data-theme="atelier"] .cx-workshop-list li,
[data-theme="atelier"] .cx-proj-list li,
[data-theme="atelier"] .cx-proj-add,
[data-theme="atelier"] .cx-select,
[data-theme="atelier"] .cx-textarea,
[data-theme="atelier"] .cx-size-x,
[data-theme="atelier"] .cx-render-filebtn,
[data-theme="atelier"] .cx-tile,
[data-theme="atelier"] .cx-fabric-name,
[data-theme="atelier"] .cx-craft-note,
[data-theme="atelier"] .cx-btn-primary,
[data-theme="atelier"] .cx-field-v,
[data-theme="atelier"] .cx-prev-r,
[data-theme="atelier"] .cx-prev-footer .cx-tp-row .v,
[data-theme="atelier"] .cx-prev-zoom-reset,
[data-theme="atelier"] .cx-zoom button,
[data-theme="atelier"] .cx-zoom span,
[data-theme="atelier"] .cx-wire-tool-label,
[data-theme="atelier"] .cx-ai-chat-msg-text,
[data-theme="atelier"] .cx-ai-chat-input,
[data-theme="atelier"] .cx-ai-chat-send,
[data-theme="atelier"] .cx-ai-chat-attach-name,
[data-theme="atelier"] .cx-graph-list li,
[data-theme="atelier"] .cx-tp-sub,
[data-theme="atelier"] .cx-tp-m,
[data-theme="atelier"] .cx-tp-row .v,
[data-theme="atelier"] .cx-tp-actions .cx-btn-ghost,
[data-theme="atelier"] .cx-tp-actions .cx-btn-primary,
[data-theme="atelier"] .cx-tp-files li,
[data-theme="atelier"] .cx-node {
  font-size: var(--cx-fs-2) !important;
}

/* L3 */
[data-theme="atelier"] .cx-node-collapsed-secondary,
[data-theme="atelier"] .cx-node-issue,
[data-theme="atelier"] .cx-validation,
[data-theme="atelier"] .cx-saved,
[data-theme="atelier"] .cx-av,
[data-theme="atelier"] .cx-side-h,
[data-theme="atelier"] .cx-pill,
[data-theme="atelier"] .cx-libsub,
[data-theme="atelier"] .cx-libgrip,
[data-theme="atelier"] .cx-ws-tag,
[data-theme="atelier"] .cx-chip,
[data-theme="atelier"] .cx-seg-b,
[data-theme="atelier"] .cx-seg-layout .cx-seg-b,
[data-theme="atelier"] .cx-mini-stat-k,
[data-theme="atelier"] .cx-hint,
[data-theme="atelier"] .cx-mm-h,
[data-theme="atelier"] .cx-prev-l,
[data-theme="atelier"] .cx-prev-toolbar-msg,
[data-theme="atelier"] .cx-prev-cap-k,
[data-theme="atelier"] .cx-prev-footer .cx-tp-row .k,
[data-theme="atelier"] .cx-tp-eyebrow,
[data-theme="atelier"] .cx-tp-k,
[data-theme="atelier"] .cx-tp-row .k,
[data-theme="atelier"] .cx-tp-price span,
[data-theme="atelier"] .cx-tp-files li em,
[data-theme="atelier"] .cx-tp-issue,
[data-theme="atelier"] .cx-fabric-meta,
[data-theme="atelier"] .cx-yarn-spin,
[data-theme="atelier"] .cx-graph-list .cx-gl-meta,
[data-theme="atelier"] .cx-ai-chat-role,
[data-theme="atelier"] .cx-ai-chat-time,
[data-theme="atelier"] .cx-fabric-tag {
  font-size: var(--cx-fs-3) !important;
}

/* Craft / yarn helper lines under chip rows */
[data-theme="atelier"] .cx-craft-note {
  font-family: Arial, Helvetica, sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: var(--cx-fs-2) !important;
  color: #4a4a4a !important;
  letter-spacing: .01em !important;
}

/* No display serif anywhere in Studio — kill remaining 花体字 from editor.css */
[data-theme="atelier"] .cx-prev-cap-v,
[data-theme="atelier"] .cx-tp-title,
[data-theme="atelier"] .cx-tp-v,
[data-theme="atelier"] .cx-tp-row .v,
[data-theme="atelier"] .cx-tp-price strong,
[data-theme="atelier"] .cx-prev-footer .cx-tp-row .v,
[data-theme="atelier"] .cx-prev-footer .cx-tp-row.total .v,
[data-theme="atelier"] .cx-qty input,
[data-theme="atelier"] .cx-liblabel {
  font-family: Arial, Helvetica, sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
}

/* Manufacture page — tiered sans hierarchy (overrides atelier tier-3 on shared chrome) */
.cx-page-mfg .cx-side-h,
.cx-page-mfg .cx-pagetag {
  font-family: var(--sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
}
.cx-page-mfg .cx-pageh1,
.cx-page-mfg .cx-kpi-v,
.cx-page-mfg .cx-mfg-detail-name,
.cx-page-mfg .cx-mfg-job-name {
  font-family: var(--sans) !important;
  font-style: normal !important;
}