/* ─────────────────────────────────────────────────────────────────────────────
   gradient.css — NURR Gradient module   Visual redesign v3
   Replaces existing gradient.css.
   ─────────────────────────────────────────────────────────────────────────────
   Context: panel is dark liquid glass. Surface preview cards adapt accordingly.
   ───────────────────────────────────────────────────────────────────────────── */

/* ─── Section spacing ─────────────────────────────────────────────────────── */
.mode-gradient .panel-body .section        { margin-top: 22px; }
.mode-gradient .panel-body .section:first-child { margin-top: 0; }

/* ─── Section label value ─────────────────────────────────────────────────── */
.mode-gradient .section-label .value {
  font-variant-numeric: tabular-nums;
  font-size: 11px; font-weight: 500;
  color: rgba(245, 244, 255, 0.60);
  letter-spacing: 0.06em;
}

/* ─── Sliders ─────────────────────────────────────────────────────────────── */
/* (Full slider overrides handled in nav-v2.css under .panel .slider) */
.mode-gradient .slider { height: 3px; border-radius: 2px; margin: 14px 0 6px; cursor: pointer; }

.mode-gradient .slider:focus        { outline: none; }
.mode-gradient .slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }

/* ─── Palette preset grid ─────────────────────────────────────────────────── */
.mode-gradient .presets-section { margin-top: 24px; }

.mode-gradient .palette-grid { gap: 6px; }

.mode-gradient .palette-card {
  height: 50px; border-radius: 9px; overflow: hidden; padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.20) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 2px 6px rgba(0,0,0,0.22) !important;
  transition: transform 0.15s var(--ease-out), border-color 0.15s, box-shadow 0.15s;
}

@media (hover: hover) and (pointer: fine) {
  .mode-gradient .palette-card:hover {
    transform:    translateY(-2px);
    border-color: rgba(255,255,255,0.42) !important;
    box-shadow:   inset 0 1px 0 rgba(255,255,255,0.22), 0 6px 14px rgba(0,0,0,0.30) !important;
  }
}

.mode-gradient .palette-card:active { transform: scale(0.96); }

.mode-gradient .palette-card.active {
  border-color: #fff !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.20), 0 4px 12px rgba(0,0,0,0.30) !important;
}

.mode-gradient .palette-card span { display: block; flex: 1; height: 100%; }

/* ─── Swatches — active = white outline ──────────────────────────────────── */
.mode-gradient .swatch.active { outline: 2px solid #fff !important; outline-offset: 3px; }

/* ─── Help card ───────────────────────────────────────────────────────────── */
.mode-gradient .help.compact-help {
  background:   rgba(255, 255, 255, 0.06) !important;
  border:       1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px;
  padding:      11px 13px;
  margin-top:   22px;
  font-size:    11px; line-height: 1.55;
  color:        rgba(245, 244, 255, 0.62) !important;
}
.mode-gradient .help em { color: var(--accent) !important; }
.mode-gradient .help.compact-help kbd {
  font-size: 9px; padding: 1px 4px;
  border-color: rgba(255,255,255,0.18) !important;
  background: rgba(255,255,255,0.08) !important;
  color: rgba(245,244,255,0.80) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SURFACE TEXTURE PRESETS — dark glass panel version
   ═══════════════════════════════════════════════════════════════════════════
   Preview cards: dark base with texture overlays, white text.
   Each sample has a distinctive dark base so textures read clearly.
   ─────────────────────────────────────────────────────────────────────────── */

.mode-gradient .surface-section { margin-top: 24px; }

.mode-gradient .surface-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

/* ─── Surface card ─────────────────────────────────────────────────────────── */
.mode-gradient .surface-card {
  appearance:    none;
  border:        1px solid rgba(255, 255, 255, 0.18) !important;
  background:    rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px;
  padding:       0;
  text-align:    left;
  color:         rgba(255, 255, 255, 0.92);
  cursor:        pointer;
  overflow:      hidden;
  box-shadow:    inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 6px rgba(0, 0, 0, 0.20) !important;
  transition:
    transform    0.15s var(--ease-out),
    border-color 0.15s var(--ease-out),
    box-shadow   0.15s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .mode-gradient .surface-card:hover {
    background:   rgba(255, 255, 255, 0.11) !important;
    border-color: rgba(255, 255, 255, 0.32) !important;
    transform:    translateY(-1px);
    box-shadow:   inset 0 1px 0 rgba(255,255,255,0.20), 0 5px 14px rgba(0,0,0,0.28) !important;
  }
}

.mode-gradient .surface-card.active {
  background:   rgba(255, 255, 255, 0.18) !important;
  border-color: #fff !important;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 4px 14px rgba(0, 0, 0, 0.30) !important;
}

/* ─── Sample preview area ───────────────────────────────────────────────────
   Dark gradient base (same as the app's --bg range) so that texture overlays
   show clearly. Each preset has a UNIQUE base tint + its texture overlay.    */
.mode-gradient .surface-sample {
  display:     block;
  height:      44px;
  position:    relative;
  overflow:    hidden;
  /* Default base — each preset overrides */
  background:
    radial-gradient(circle at 28% 26%, rgba(255,255,255,0.28), transparent 38%),
    linear-gradient(155deg, #1d1838 0%, #0a0820 50%, #1a1530 100%);
  box-shadow:  inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -8px 18px rgba(0,0,0,0.32);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mode-gradient .surface-sample::before,
.mode-gradient .surface-sample::after {
  content: ''; position: absolute; inset: 0;
}

/* ─── CLEAN ──────────────────────────────────────────────────────────────── */
.mode-gradient .surface-clean {
  background:
    linear-gradient(155deg, #1e1840 0%, #0c0a22 55%, #181535 100%);
}
.mode-gradient .surface-clean::after {
  background: linear-gradient(90deg, transparent 20%, rgba(255,255,255,0.08) 50%, transparent 80%);
}

/* ─── SOFT GRAIN ─────────────────────────────────────────────────────────── */
.mode-gradient .surface-soft-grain {
  background:
    linear-gradient(155deg, #1c1636 0%, #100e28 100%);
}
.mode-gradient .surface-soft-grain::after {
  background:
    repeating-radial-gradient(circle at 30% 40%, rgba(255,255,255,0.16) 0 1px, transparent 1px 4px),
    repeating-radial-gradient(circle at 70% 60%, rgba(255,255,255,0.12) 0 1px, transparent 1px 5px);
  mix-blend-mode: overlay;
  opacity: 0.90;
}

/* ─── HALFTONE ───────────────────────────────────────────────────────────── */
.mode-gradient .surface-half-temp {
  background:
    linear-gradient(155deg, #1a1634 0%, #0c0a20 100%);
}
.mode-gradient .surface-half-temp::after {
  background: radial-gradient(circle, rgba(255,255,255,0.65) 0 1px, transparent 1.2px);
  background-size: 4px 4px;
  mix-blend-mode: overlay; opacity: 0.55;
}

/* ─── FOIL ───────────────────────────────────────────────────────────────── */
.mode-gradient .surface-foil {
  background:
    linear-gradient(155deg, #1e1a40 0%, #0e0c28 50%, #1a1438 100%);
}
.mode-gradient .surface-foil::after {
  background:
    linear-gradient(115deg,
      rgba(255,255,255,0.65) 0%, rgba(255,255,255,0) 22%,
      rgba(255,255,255,0.55) 45%, rgba(255,255,255,0) 68%,
      rgba(255,255,255,0.50) 90%),
    radial-gradient(circle at 20% 30%, rgba(255,180,220,0.42), transparent 35%),
    radial-gradient(circle at 75% 70%, rgba(170,220,255,0.42), transparent 35%);
  mix-blend-mode: screen; opacity: 0.72;
}

/* ─── PAPER ──────────────────────────────────────────────────────────────── */
.mode-gradient .surface-paper {
  background:
    linear-gradient(155deg, #201c36 0%, #12102a 100%);
}
.mode-gradient .surface-paper::after {
  background:
    repeating-linear-gradient(8deg, rgba(255,255,255,0.11) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(98deg, rgba(0,0,0,0.20) 0 1px, transparent 1px 14px),
    linear-gradient(130deg, rgba(255,255,255,0.10), rgba(0,0,0,0.18));
  mix-blend-mode: overlay; opacity: 0.82;
}

/* ─── CHROMATIC HAZE ─────────────────────────────────────────────────────── */
.mode-gradient .surface-chromatic-haze {
  background:
    linear-gradient(155deg, #1a1838 0%, #0c0e2a 100%);
}
.mode-gradient .surface-chromatic-haze::after {
  background:
    linear-gradient(90deg,
      rgba(0,225,255,0.55), rgba(255,0,180,0.45),
      rgba(255,230,0,0.50), rgba(60,90,255,0.55));
  filter: blur(2px); mix-blend-mode: screen; opacity: 0.55;
}

/* ─── PRINT NOISE ────────────────────────────────────────────────────────── */
.mode-gradient .surface-print-noise {
  background:
    linear-gradient(155deg, #181630 0%, #0e0c22 100%);
}
.mode-gradient .surface-print-noise::after {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.18) 50%, transparent 50%),
    linear-gradient(0deg, rgba(255,255,255,0.18) 50%, transparent 50%);
  background-size: 6px 6px;
  mix-blend-mode: overlay; opacity: 0.52;
}

/* ─── Surface name label ───────────────────────────────────────────────────── */
.mode-gradient .surface-name {
  display:     block;
  padding:     7px 9px 8px;
  font-size:   9.5px; line-height: 1.1;
  letter-spacing: 0.09em; text-transform: uppercase;
  font-weight: 700;
  color:       rgba(255, 255, 255, 0.78);
}

.mode-gradient .surface-card.active .mode-gradient .surface-name { color: #fff; }

/* ─── Collapsible preset dropdowns ──────────────────────────────────────── */
.collapsible-presets .presets-toggle {
  width: 100%; appearance: none; border: 0; background: transparent;
  color: inherit; font: inherit; cursor: pointer; padding: 0;
  display: flex; align-items: center; gap: 8px; text-align: left;
}
.collapsible-presets .presets-toggle .value { margin-left: auto; }

.collapsible-presets .preset-arrow {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-size: 15px; line-height: 1;
  opacity: 0.70; transform: translateY(-1px);
  transition: transform 0.16s var(--ease-out), opacity 0.16s var(--ease-out);
}
.collapsible-presets .presets-toggle:hover .preset-arrow { opacity: 1; }

.presets-section.collapsible-presets.is-collapsed .palette-grid { display: none !important; }
.presets-section.collapsible-presets.is-open      .palette-grid { display: grid; margin-top: 10px; }

.surface-section.collapsible-presets.is-collapsed .surface-grid { display: none !important; }
.surface-section.collapsible-presets.is-open      .surface-grid { display: grid; margin-top: 10px; }


/* Gradient formula controls — compact segmented buttons for direction/transforms. */
.mode-gradient .gradient-direction-section,
.mode-gradient .gradient-transform-section { margin-top: 18px; }
.mode-gradient .nurr-segment-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.mode-gradient .gradient-transform-section .nurr-segment-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mode-gradient .nurr-segment {
  min-height: 30px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  background: rgba(255,255,255,0.055);
  color: rgba(255,255,255,0.72);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.mode-gradient .nurr-segment:hover {
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
}
.mode-gradient .nurr-segment:active { transform: scale(.98); }
.mode-gradient .nurr-segment.active {
  background: rgba(255,45,180,0.82);
  border-color: rgba(255,255,255,0.34);
  color: #080711;
}

/* ─────────────────────────────────────────────────────────────
   Extracted ownership rules — 2026-06-29 CSS architecture cleanup.
   Moved out of global CSS without changing declaration values.
   ───────────────────────────────────────────────────────────── */
#root:has(.panel.mode-gradient) canvas.stage {
  /* Gradient already has internal shader movement. CSS scaling was softening
     the desktop render, enlarging grain, and cropping the gradient centre. */
  transform: none !important;
  animation: none !important;
  will-change: auto;
}
#root:has(.panel.mode-abstract) canvas.stage,
#root:has(.panel.mode-nature)   canvas.stage,
#root:has(.panel.mode-palette)  canvas.stage {
  transform: scale(1.22);
  animation: nurr-bg-wander 55s ease-in-out infinite;
  will-change: transform;
}.panel .surface-card { border-color: rgba(255,255,255,0.34) !important; }.panel .surface-card.active { border-color: rgba(255,255,255,0.72) !important; }.panel .surface-name {
  font-size: 8px !important;
  line-height: 1.05 !important;
  letter-spacing: 0.12em !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}.panel .surface-grid { gap: 8px !important; }.panel,
.panel *:not(.swatch):not(.swatch *):not(.palette-card span):not(.surface-sample):not(.surface-sample *) {
  text-shadow: none !important;
}.mode-gradient .nurr-segment {
  min-height: 30px !important;
  height: 30px !important;
  color: var(--nurr-panel-ink) !important;
  background: rgba(255,255,255,0.26) !important;
  border: 1px solid rgba(255,255,255,0.48) !important;
  box-shadow: none !important;
}.mode-gradient .nurr-segment:hover { background: rgba(255,255,255,0.42) !important; color: var(--nurr-panel-ink) !important; }.mode-gradient .nurr-segment.active {
  background: rgba(255,45,180,0.86) !important;
  color: rgba(10,8,26,0.96) !important;
  border-color: rgba(255,255,255,0.62) !important;
}.mode-gradient .surface-grid { gap: 8px !important; }.mode-gradient .surface-card,
.panel .surface-card {
  overflow: hidden !important;
  contain: paint !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,0.28) !important;
  border: 1px solid rgba(255,255,255,0.54) !important;
  color: var(--nurr-panel-ink) !important;
  box-shadow: none !important;
  transform: none !important;
}.mode-gradient .surface-card:hover { transform: none !important; box-shadow: none !important; }.mode-gradient .surface-card.active,
.panel .surface-card.active {
  background: rgba(255,255,255,0.34) !important;
  border-color: rgba(255,255,255,0.86) !important;
  box-shadow: none !important;
}.mode-gradient .surface-sample,
.panel .surface-sample {
  height: 43px !important;
  border-radius: 12px 12px 0 0 !important;
  overflow: hidden !important;
  clip-path: inset(0 round 12px 12px 0 0) !important;
}.panel .surface-name {
  display: block !important;
  color: var(--nurr-panel-ink) !important;
  padding: 7px 9px 8px !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}.mode-gradient .nurr-segment{
  min-height:30px !important;
  height:30px !important;
  border-radius:999px !important;
  color:var(--nurr-panel-ink) !important;
  background:rgba(255,255,255,0.26) !important;
  border:1px solid rgba(255,255,255,0.48) !important;
}.mode-gradient .nurr-segment.active{
  background:rgba(255,45,180,0.88) !important;
  color:rgba(13,10,30,0.98) !important;
  border-color:rgba(255,255,255,0.60) !important;
  text-shadow:none !important;
}.mode-gradient .surface-card,
.panel .surface-card{
  overflow:hidden !important;
  contain:paint !important;
  border-radius:14px !important;
  background:rgba(255,255,255,0.26) !important;
  border:1px solid rgba(255,255,255,0.48) !important;
}.mode-gradient .surface-sample,
.panel .surface-sample{
  display:block !important;
  height:45px !important;
  overflow:hidden !important;
  border-radius:13px 13px 0 0 !important;
  clip-path:inset(0 round 13px 13px 0 0) !important;
}.panel .surface-name{
  font-size:9px !important;
  letter-spacing:.11em !important;
  line-height:1 !important;
  padding:8px 9px !important;
  white-space:nowrap !important;
}.panel .panel-title,
.panel .panel-eyebrow,
.panel .section-label,
.panel .section-label .name,
.panel .section-label .value,
.panel .panel-tab,
.panel .surface-name,
.panel .preset-name,
.panel .btn,
.panel .nurr-segment {
  text-shadow: 0 1px 8px rgba(255,255,255,0.42) !important;
}.panel .section-label .name,
.panel .section-label .value,
.panel .panel-tab:not(.active),
.panel .preset-arrow,
.panel .surface-name {
  color: rgba(13,12,28,0.82) !important;
}.panel .btn,
.panel .nurr-segment {
  background: rgba(255,255,255,0.22) !important;
  border: 1px solid rgba(255,255,255,0.52) !important;
  color: rgba(11,10,25,0.86) !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}.panel .btn.primary,
.panel .nurr-segment.active,
.panel .panel-tab.active {
  background: var(--accent, #ff2ea6) !important;
  border-color: rgba(255,255,255,0.45) !important;
  color: rgba(7,6,18,0.96) !important;
  text-shadow: none !important;
}.panel .surface-card,
.panel .preset-card,
.panel .palette-card {
  box-shadow: none !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.16) !important;
  border-color: rgba(255,255,255,0.36) !important;
}.panel .surface-card > *,
.panel .surface-sample {
  overflow: hidden !important;
  border-radius: inherit !important;
}.gradient-palette-tools {
  margin-top: -4px !important;
  padding-top: 0 !important;
}.gradient-flip-btn {
  width: 100% !important;
  min-height: 30px !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}.panel .section-label,
.panel .section-label .name,
.panel .section-label .value,
.panel .panel-eyebrow,
.panel .panel-title,
.panel .panel-tab,
.panel .btn,
.panel .nurr-segment,
.panel .surface-name,
.panel .preset-arrow{
  color:var(--nurr-panel-ink) !important;
  text-shadow:0 1px 10px rgba(255,255,255,0.36) !important;
}.panel .btn,
.panel .nurr-segment,
.panel .gradient-flip-btn{
  min-height:31px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,0.20) !important;
  border:1px solid rgba(255,255,255,0.48) !important;
  box-shadow:none !important;
  color:rgba(12,10,28,0.86) !important;
  font-size:10px !important;
  line-height:1 !important;
  letter-spacing:.085em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  text-shadow:0 1px 8px rgba(255,255,255,0.34) !important;
}.panel .btn.primary,
.panel .nurr-segment.active,
.panel .gradient-flip-btn:active{
  background:rgba(15,12,34,0.86) !important;
  border-color:rgba(255,255,255,0.38) !important;
  color:rgba(255,255,255,0.92) !important;
  text-shadow:none !important;
}.gradient-palette-tools{ padding:6px 0 12px !important; margin:0 !important; }.gradient-flip-btn{ width:100% !important; }.panel .surface-grid{ gap:10px !important; align-items:start !important; }.panel .surface-card{
  border-radius:14px !important;
  overflow:hidden !important;
  contain:paint !important;
  background:rgba(255,255,255,0.16) !important;
  border:1px solid rgba(255,255,255,0.40) !important;
  box-shadow:none !important;
}.panel .surface-card.active{ border-color:rgba(255,255,255,0.72) !important; box-shadow:none !important; }.panel .surface-sample{
  display:block !important;
  height:44px !important;
  border-radius:13px 13px 0 0 !important;
  overflow:hidden !important;
  clip-path:inset(0 round 13px 13px 0 0) !important;
}.panel .surface-name{
  display:block !important;
  padding:8px 10px !important;
  font-size:9px !important;
  line-height:1 !important;
  letter-spacing:.10em !important;
  white-space:nowrap !important;
}.mode-gradient .palette-section .compact-row,
.mode-gradient .gradient-palette-actions,
.mode-gradient .palette-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
  margin: 11px 0 0 !important;
}.mode-gradient .palette-section .compact-row .btn,
.mode-gradient .gradient-palette-actions .btn { width: 100% !important; }.mode-gradient .surface-grid,
.mode-gradient .texture-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
}.mode-gradient .surface-card {
  overflow: hidden !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(255,255,255,0.48) !important;
  box-shadow: none !important;
}.mode-gradient .surface-card.active { border-color: rgba(20,18,34,0.72) !important; }.mode-gradient .surface-card canvas,
.mode-gradient .surface-card img,
.mode-gradient .surface-card .surface-preview,
.mode-gradient .surface-card .preset-preview {
  overflow: hidden !important;
  border-radius: 8px 8px 0 0 !important;
}.mode-gradient .surface-card .label,
.mode-gradient .surface-card span {
  font-size: 9px !important;
  letter-spacing: 0.12em !important;
  line-height: 1.1 !important;
}.panel:not(.collapsed) .btn-row,
.panel:not(.collapsed) .create-dl-row,
.panel:not(.collapsed) .create-secondary-row,
.panel:not(.collapsed) .palette-actions,
.panel:not(.collapsed) .gradient-palette-actions{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:12px !important;
  margin:20px 0 0 !important;
}.panel:not(.collapsed) .segment,
.panel:not(.collapsed) .material-toggle,
.mode-gradient .direction-segment,
.mode-gradient .surface-segment{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(0,1fr)) !important;
  gap:0 !important;
  border:1px solid var(--nx-line-soft) !important;
  border-radius:0 !important;
  overflow:hidden !important;
  background:transparent !important;
}.panel:not(.collapsed) .segment button,
.panel:not(.collapsed) .material-toggle button,
.panel:not(.collapsed) .nurr-segment{
  border-radius:0 !important;
  border:0 !important;
  border-right:1px solid var(--nx-line-soft) !important;
  background:transparent !important;
  min-height:42px !important;
  height:42px !important;
}.panel:not(.collapsed) .segment button:last-child,
.panel:not(.collapsed) .material-toggle button:last-child,
.panel:not(.collapsed) .nurr-segment:last-child{ border-right:0 !important; }.panel:not(.collapsed) .nurr-segment.active,
.panel:not(.collapsed) .segment button.active,
.panel:not(.collapsed) .material-toggle button.active{ background:rgba(255,255,255,.92) !important; color:#050505 !important; }.mode-geometric .layout-grid,
.mode-glass3d .glass3d-icon-grid,
.mode-glass3d .shape-grid,
.mode-glass3d .material-grid,
.mode-gradient .surface-grid,
.mode-gradient .texture-grid{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  gap:8px !important;
}.mode-geometric .layout-card,
.mode-glass3d .glass3d-icon-btn,
.mode-glass3d .glass3d-material-btn,
.mode-gradient .surface-card,
.panel:not(.collapsed) .surface-card,
.panel:not(.collapsed) .preset-card,
.panel:not(.collapsed) .palette-card{
  border-radius:0 !important;
  border:1px solid var(--nx-line-soft) !important;
  background:rgba(255,255,255,.08) !important;
  box-shadow:none !important;
  overflow:hidden !important;
  transform:none !important;
}.mode-geometric .layout-card.active,
.mode-glass3d .glass3d-icon-btn.active,
.mode-glass3d .glass3d-material-btn.active,
.mode-gradient .surface-card.active,
.panel:not(.collapsed) .surface-card.active,
.panel:not(.collapsed) .preset-card.active,
.panel:not(.collapsed) .palette-card.active{
  border-color:rgba(255,255,255,.92) !important;
  background:rgba(255,255,255,.92) !important;
  color:#050505 !important;
}.panel:not(.collapsed) .surface-sample{ height:34px !important; border-radius:0 !important; clip-path:none !important; }.panel:not(.collapsed) .surface-name,
.mode-glass3d .glass3d-icon-btn span,
.mode-gradient .surface-card .label{
  color:inherit !important;
  font:800 8px/1 var(--nx-font) !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  padding:8px 6px !important;
  text-shadow:none !important;
}.panel:not(.collapsed) .btn-row,
.panel:not(.collapsed) .palette-actions,
.panel:not(.collapsed) .gradient-palette-actions{
  gap:8px !important;
  margin:14px 0 0 !important;
}.panel:not(.collapsed) .segment,
.panel:not(.collapsed) .material-toggle,
.mode-gradient .direction-segment,
.mode-gradient .surface-segment{
  border:1px solid var(--nx-line-soft) !important;
}.panel:not(.collapsed) .segment button,
.panel:not(.collapsed) .material-toggle button,
.panel:not(.collapsed) .nurr-segment{
  min-height:36px !important;
  height:36px !important;
  border-right:1px solid var(--nx-line-soft) !important;
}.panel:not(.collapsed) .nurr-segment.active,
.panel:not(.collapsed) .segment button.active,
.panel:not(.collapsed) .material-toggle button.active{
  background:rgba(255,255,255,.18) !important;
  color:#fff !important;
}.mode-gradient .surface-grid,
.mode-gradient .texture-grid{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  gap:6px !important;
}.mode-gradient .surface-card,
.panel:not(.collapsed) .surface-card{
  min-height:36px !important;
  height:36px !important;
  padding:0 !important;
  border:1px solid var(--nx-line-soft) !important;
  background:rgba(255,255,255,.045) !important;
}.panel:not(.collapsed) .surface-sample,
.mode-gradient .surface-card canvas,
.mode-gradient .surface-card .sample,
.mode-gradient .surface-card .surface-preview{ display:none !important; }.panel:not(.collapsed) .surface-name,
.mode-gradient .surface-card .label{
  display:flex !important;
  height:100% !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 6px !important;
  font:800 8px/1 var(--nx-font) !important;
  letter-spacing:.11em !important;
}.panel.tone-light:not(.collapsed) .btn:hover,
.panel.tone-light:not(.collapsed) .nurr-segment.active,
.panel.tone-light:not(.collapsed) .seg-opt.active,
.panel.tone-light:not(.collapsed) .glass-type-btn.active,
.panel.tone-light:not(.collapsed) .layout-card.active{ background:rgba(0,0,0,.78) !important; color:#fff !important; }.panel:not(.collapsed) .btn.primary,
.panel:not(.collapsed) .nurr-segment.active,
.panel:not(.collapsed) .seg-opt.active,
.panel:not(.collapsed) .segment button.active,
.panel:not(.collapsed) .material-toggle button.active{ background:rgba(255,255,255,.82) !important; color:#060606 !important; }.mode-gradient .surface-grid{ grid-template-columns:repeat(3,1fr) !important; gap:5px !important; }.mode-gradient .surface-card{ height:31px !important; min-height:31px !important; padding:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; background:rgba(255,255,255,.045) !important; border:1px solid var(--nx-line-soft) !important; }.mode-gradient .surface-card.active{ background:rgba(255,255,255,.82) !important; color:#060606 !important; border-color:rgba(255,255,255,.26) !important; }.mode-gradient .surface-sample{ display:none !important; }.mode-gradient .surface-name{ color:inherit !important; font:800 8px/1 var(--nx-font) !important; letter-spacing:.12em !important; text-transform:uppercase !important; }