:root {
  color-scheme: light;
  --accent: #0ec095;
  --ui-accent: #0ec095;
  --ink: #0f172a;
  --muted: #64748b;
  --soft: #f8fafc;
  --surface: #ffffff;
  --line: rgba(226, 232, 240, 0.6);
  --line-strong: #cbd5e1;
  --shadow: 0 10px 30px -10px rgba(2, 6, 23, 0.05), 0 1px 3px rgba(2, 6, 23, 0.02);
  --shadow-premium: 0 20px 40px -15px rgba(2, 6, 23, 0.07), 0 0 0 1px rgba(2, 6, 23, 0.02);
  --shadow-tight: 0 4px 12px rgba(2, 6, 23, 0.03);
  --shadow-glow: 0 0 20px rgba(108, 99, 255, 0.15);
  --radius-panel: 20px;
  --radius-card: 16px;
  --radius-control: 10px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Outfit', 'Inter', system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   Guided first-run experience
   -------------------------------------------------------------------------- */

.onboarding-restart {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: 750 0.75rem/1 var(--font-display);
  cursor: pointer;
}

.gamut-indicator {
  position: relative;
}

.gamut-workspace-indicator {
  width: min(100%, 1480px);
  margin: -14px auto 18px;
}

.gamut-indicator > summary {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, #f59e0b, transparent 62%);
  border-radius: 999px;
  background: color-mix(in srgb, #f59e0b, white 91%);
  color: #8a4b08;
  font: 850 0.7rem/1 var(--font-display);
  list-style: none;
  cursor: pointer;
}

.gamut-workspace-indicator > summary {
  display: flex;
  width: 100%;
  min-height: 58px;
  padding: 10px 16px;
  border-radius: 16px;
  text-align: left;
}

.gamut-indicator-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.gamut-indicator-copy small {
  overflow: hidden;
  color: color-mix(in srgb, #8a4b08, transparent 28%);
  font: 650 0.68rem/1.2 var(--font-display);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gamut-indicator-action {
  margin-left: auto;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  color: #8a4b08;
  font: 850 0.66rem/1 var(--font-display);
}

.gamut-workspace-indicator.is-create-context > summary {
  border-color: color-mix(in srgb, #f59e0b, transparent 48%);
  box-shadow: 0 16px 36px -30px rgba(160, 88, 8, 0.65);
}

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

.gamut-indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 0 4px color-mix(in srgb, #f59e0b, transparent 82%);
}

.gamut-indicator-panel {
  position: absolute;
  z-index: 100;
  top: calc(100% + 12px);
  right: 0;
  width: min(390px, calc(100vw - 28px));
  padding: 23px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 28px 70px -34px rgba(16, 20, 34, 0.74);
}

.gamut-workspace-indicator .gamut-indicator-panel {
  position: static;
  width: 100%;
  margin-top: 8px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.2fr);
  align-items: end;
  gap: 24px;
}

.gamut-indicator-panel h2 {
  margin: 5px 0 8px;
  color: var(--workspace-ink);
  font: 780 1.08rem/1.08 var(--font-display);
  letter-spacing: -0.035em;
}

.gamut-indicator-panel p {
  margin: 0;
  color: var(--workspace-muted);
  font-size: 0.74rem;
  line-height: 1.55;
}

.gamut-indicator-colors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 17px;
}

.gamut-indicator-colors button {
  display: flex;
  min-width: 0;
  min-height: 38px;
  align-items: center;
  gap: 7px;
  padding: 5px 8px 5px 5px;
  border: 0;
  border-radius: 10px;
  background: var(--workspace-bg);
  color: var(--workspace-ink);
  cursor: pointer;
}

.gamut-indicator-colors i {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: var(--gamut-color);
}

.gamut-indicator-colors code {
  overflow: hidden;
  font-size: 0.62rem;
  text-overflow: ellipsis;
}

.gamut-warning,
.section-gamut-note,
.application-gamut-note,
.cmyk-checker-card {
  display: none !important;
}

.khromafy-v2.is-dark .gamut-indicator > summary {
  border-color: color-mix(in srgb, #f59e0b, transparent 55%);
  background: color-mix(in srgb, #f59e0b, #151821 86%);
  color: #ffd38a;
}

.khromafy-v2.is-dark .gamut-indicator-copy small {
  color: #d9b77a;
}

.khromafy-v2.is-dark .gamut-indicator-action {
  background: rgba(255, 255, 255, 0.07);
  color: #ffd38a;
}

.khromafy-v2.is-dark .gamut-indicator-panel {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(22, 24, 31, 0.98);
}

@media (max-width: 720px) {
  .gamut-workspace-indicator {
    width: calc(100% - 24px);
    margin: 10px auto 16px;
  }

  .gamut-workspace-indicator > summary {
    min-height: 54px;
  }

  .gamut-indicator-copy small {
    white-space: normal;
  }

  .gamut-indicator-action {
    display: none;
  }

  .gamut-workspace-indicator .gamut-indicator-panel {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .gamut-indicator-colors {
    grid-template-columns: repeat(2, 1fr);
  }
}

.onboarding-restart:hover {
  background: color-mix(in srgb, var(--ui-accent), transparent 92%);
  color: var(--ink);
}

.onboarding-restart > span:first-child {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.72rem;
}

.khromafy-v2 .canvas-area {
  position: relative;
}

.onboarding-shell {
  position: absolute;
  z-index: 40;
  top: 102px;
  left: 50%;
  width: min(680px, calc(100% - 56px));
  transform: translateX(-50%);
}

.onboarding-card {
  position: relative;
  padding: clamp(34px, 5vw, 58px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 30px;
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--ui-accent), transparent 82%), transparent 16rem),
    rgba(255, 255, 255, 0.95);
  box-shadow: 0 36px 100px -46px rgba(24, 28, 44, 0.56);
  text-align: center;
}

.onboarding-skip {
  position: absolute;
  top: 22px;
  right: 24px;
  padding: 6px 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 700 0.72rem/1 var(--font-display);
  cursor: pointer;
}

.onboarding-skip:hover {
  color: var(--ink);
}

.onboarding-eyebrow {
  display: block;
  margin-bottom: 12px;
  color: var(--ui-accent);
  font: 900 0.68rem/1 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.onboarding-mark {
  display: flex;
  width: 78px;
  height: 42px;
  align-items: end;
  justify-content: center;
  gap: 5px;
  margin: 0 auto 22px;
}

.onboarding-mark span {
  width: 18px;
  border-radius: 7px;
  background: var(--ui-accent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ui-accent), transparent 68%);
}

.onboarding-mark span:nth-child(1) {
  height: 22px;
  opacity: 0.4;
}

.onboarding-mark span:nth-child(2) {
  height: 38px;
}

.onboarding-mark span:nth-child(3) {
  height: 29px;
  opacity: 0.7;
}

.onboarding-card h2 {
  max-width: 540px;
  margin: 0 auto 14px;
  color: var(--workspace-ink);
  font: 780 clamp(1.8rem, 4vw, 2.8rem)/1.02 var(--font-display);
  letter-spacing: -0.055em;
}

.onboarding-card > p {
  max-width: 540px;
  margin: 0 auto;
  color: var(--workspace-muted);
  font-size: 0.96rem;
  line-height: 1.65;
}

.onboarding-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

.onboarding-primary,
.onboarding-secondary {
  min-height: 48px;
  padding: 0 21px;
  border-radius: 999px;
  font: 800 0.82rem/1 var(--font-display);
  cursor: pointer;
}

.onboarding-primary {
  border: 0;
  background: #171a23;
  color: #fff;
  box-shadow: 0 16px 30px -18px rgba(17, 20, 31, 0.8);
}

.onboarding-primary:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--ui-accent), #171a23 68%);
}

.onboarding-secondary {
  border: 1px solid var(--workspace-soft);
  background: rgba(255, 255, 255, 0.82);
  color: var(--workspace-ink);
}

.onboarding-secondary:hover {
  border-color: color-mix(in srgb, var(--ui-accent), transparent 56%);
}

.onboarding-examples {
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--workspace-soft);
}

.onboarding-examples > span {
  display: block;
  margin-bottom: 15px;
  color: var(--workspace-muted);
  font: 750 0.71rem/1 var(--font-display);
}

.onboarding-swatches {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.onboarding-swatches button {
  display: grid;
  min-width: 0;
  gap: 8px;
  padding: 9px 6px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--workspace-muted);
  font: 700 0.62rem/1 var(--font-display);
  cursor: pointer;
}

.onboarding-swatches button:hover {
  background: color-mix(in srgb, var(--sample), transparent 90%);
  color: var(--workspace-ink);
}

.onboarding-swatches i {
  width: 100%;
  height: 42px;
  border-radius: 10px;
  background: var(--sample);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.onboarding-result-preview {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  max-width: 440px;
  height: 72px;
  margin: 28px auto 0;
  overflow: hidden;
  border: 6px solid rgba(255, 255, 255, 0.88);
  border-radius: 20px;
  box-shadow: 0 20px 45px -30px rgba(18, 22, 36, 0.7);
}

.onboarding-result-preview span {
  background: var(--preview-color);
}

.onboarding-success-icon {
  display: grid;
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  place-items: center;
  border-radius: 18px;
  background: color-mix(in srgb, #12a87a, white 86%);
  color: #087454;
  font-size: 1.35rem;
  font-weight: 900;
}

.has-onboarding .control-panel,
.has-onboarding .stage-tabs,
.has-onboarding .stage-panel {
  opacity: 0.28;
  filter: saturate(0.55);
  pointer-events: none;
  transition: opacity 180ms ease, filter 180ms ease;
}

.has-onboarding .canvas-area::after {
  content: "";
  position: absolute;
  z-index: 30;
  inset: 0;
  background: rgba(244, 245, 248, 0.34);
  backdrop-filter: blur(3px);
  pointer-events: none;
}

.onboarding-coach {
  position: fixed;
  z-index: 80;
  right: clamp(18px, 3vw, 42px);
  bottom: clamp(18px, 3vw, 38px);
  width: min(360px, calc(100vw - 36px));
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 28px 70px -34px rgba(16, 20, 34, 0.7);
}

.onboarding-coach-count {
  color: var(--ui-accent);
  font: 900 0.65rem/1 var(--font-display);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.onboarding-coach strong {
  display: block;
  margin-top: 10px;
  color: var(--workspace-ink);
  font: 780 1.14rem/1.1 var(--font-display);
}

.onboarding-coach p {
  margin: 9px 0 20px;
  color: var(--workspace-muted);
  font-size: 0.8rem;
  line-height: 1.55;
}

.onboarding-coach > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.onboarding-coach button {
  min-height: 38px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--workspace-muted);
  font: 800 0.7rem/1 var(--font-display);
  cursor: pointer;
}

.onboarding-coach .onboarding-coach-next {
  background: #171a23;
  color: #fff;
}

.stage-tab-button.is-onboarding-target {
  position: relative;
  z-index: 82;
  outline: 4px solid color-mix(in srgb, var(--ui-accent), transparent 68%);
  outline-offset: 4px;
  animation: onboarding-pulse 1.6s ease-in-out infinite;
}

.khromafy-v2.is-dark .onboarding-card,
.khromafy-v2.is-dark .onboarding-coach {
  border-color: rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--ui-accent), transparent 78%), transparent 16rem),
    rgba(23, 25, 33, 0.97);
}

.khromafy-v2.is-dark .onboarding-secondary {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
  color: var(--workspace-ink);
}

.khromafy-v2.is-dark.has-onboarding .canvas-area::after {
  background: rgba(13, 15, 20, 0.42);
}

@keyframes onboarding-pulse {
  50% {
    outline-color: color-mix(in srgb, var(--ui-accent), transparent 38%);
  }
}

@media (max-width: 720px) {
  .onboarding-restart > span:last-child {
    display: none;
  }

  .onboarding-shell {
    position: fixed;
    top: 82px;
    width: calc(100% - 24px);
    max-height: calc(100vh - 96px);
    overflow-y: auto;
  }

  .onboarding-card {
    padding: 48px 22px 28px;
    border-radius: 24px;
  }

  .onboarding-skip {
    top: 18px;
    right: 16px;
  }

  .onboarding-swatches {
    grid-template-columns: repeat(3, 1fr);
  }

  .onboarding-actions {
    display: grid;
  }

  .onboarding-primary,
  .onboarding-secondary {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage-tab-button.is-onboarding-target {
    animation: none;
  }

  .onboarding-primary:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Khromafy color picker
   -------------------------------------------------------------------------- */

.khromafy-color-dialog {
  width: min(820px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 28px;
  background: transparent;
  color: var(--workspace-ink);
}

.khromafy-color-dialog::backdrop {
  background: rgba(16, 18, 28, 0.48);
  backdrop-filter: blur(10px) saturate(0.8);
}

.khromafy-color-shell {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--ui-accent), transparent 88%), transparent 21rem),
    rgba(252, 252, 254, 0.98);
  box-shadow: 0 42px 110px -42px rgba(10, 14, 28, 0.82);
}

.khromafy-color-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 30px 22px;
  border-bottom: 1px solid var(--workspace-soft);
}

.khromafy-color-heading h2 {
  margin: 4px 0 6px;
  font: 780 1.55rem/1.05 var(--font-display);
  letter-spacing: -0.045em;
}

.khromafy-color-heading p {
  margin: 0;
  color: var(--workspace-muted);
  font-size: 0.78rem;
}

.khromafy-color-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(240px, 0.78fr);
  gap: 28px;
  padding: 28px 30px;
}

.khromafy-color-visual {
  display: grid;
  min-width: 0;
  gap: 22px;
}

.khromafy-color-field {
  position: relative;
  min-height: 340px;
  overflow: hidden;
  border-radius: 21px;
  background:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, transparent),
    var(--picker-hue, #0ec095);
  box-shadow:
    inset 0 0 0 1px rgba(16, 20, 34, 0.08),
    0 22px 48px -36px rgba(16, 20, 34, 0.8);
  cursor: crosshair;
  touch-action: none;
}

.khromafy-color-field:focus-visible {
  outline: 4px solid color-mix(in srgb, var(--ui-accent), transparent 58%);
  outline-offset: 3px;
}

.khromafy-color-cursor {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--cursor-color, #0ec095);
  box-shadow:
    0 0 0 1px rgba(12, 16, 28, 0.58),
    0 5px 15px rgba(12, 16, 28, 0.34);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.khromafy-hue-control {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  color: var(--workspace-muted);
  font: 800 0.69rem/1 var(--font-display);
}

.khromafy-hue-control input {
  width: 100%;
  height: 12px;
  margin: 0;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  appearance: none;
  background: linear-gradient(
    90deg,
    #f43f5e,
    #f59e0b,
    #eab308,
    #22c55e,
    #06b6d4,
    #3b82f6,
    #7c3aed,
    #db2777,
    #f43f5e
  );
  box-shadow: 0 0 0 1px rgba(16, 20, 34, 0.12);
}

.khromafy-hue-control input::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  border: 3px solid #fff;
  border-radius: 50%;
  appearance: none;
  background: hsl(calc(var(--hue, 250) * 1deg) 100% 50%);
  box-shadow: 0 2px 8px rgba(16, 20, 34, 0.34);
}

.khromafy-color-details {
  display: grid;
  align-content: start;
  gap: 18px;
}

.khromafy-color-preview {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px;
  border-radius: 17px;
  background: var(--workspace-bg);
}

.khromafy-color-preview > span {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border-radius: 15px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.khromafy-color-preview small,
.khromafy-color-preview strong {
  display: block;
}

.khromafy-color-preview small {
  margin-bottom: 5px;
  color: var(--workspace-muted);
  font: 750 0.65rem/1 var(--font-display);
}

.khromafy-color-preview strong {
  font: 820 1.12rem/1 var(--font-display);
  letter-spacing: -0.025em;
}

.khromafy-color-hex,
.khromafy-color-rgb label {
  display: grid;
  gap: 7px;
}

.khromafy-color-hex > span,
.khromafy-color-rgb legend,
.khromafy-color-rgb label span,
.khromafy-color-recents > span {
  color: var(--workspace-muted);
  font: 850 0.64rem/1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.khromafy-color-hex input,
.khromafy-color-rgb input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--workspace-soft);
  border-radius: 12px;
  background: #fff;
  color: var(--workspace-ink);
  font: 800 0.85rem/1 var(--font-mono);
}

.khromafy-color-hex input:focus,
.khromafy-color-rgb input:focus {
  border-color: color-mix(in srgb, var(--ui-accent), transparent 30%);
  outline: 3px solid color-mix(in srgb, var(--ui-accent), transparent 82%);
}

.khromafy-color-rgb {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  border: 0;
}

.khromafy-color-rgb legend {
  grid-column: 1 / -1;
  margin-bottom: 1px;
}

.khromafy-color-recents {
  display: grid;
  gap: 10px;
}

.khromafy-color-recents > div {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
}

.khromafy-color-recents button {
  aspect-ratio: 1;
  border: 3px solid #fff;
  border-radius: 10px;
  background: var(--picker-swatch);
  box-shadow: 0 0 0 1px rgba(16, 20, 34, 0.12);
  cursor: pointer;
}

.khromafy-color-recents button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 12px color-mix(in srgb, var(--picker-swatch), transparent 58%);
}

.khromafy-color-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px 30px 26px;
  border-top: 1px solid var(--workspace-soft);
}

.khromafy-color-cancel,
.khromafy-color-apply {
  min-height: 44px;
  padding: 0 19px;
  border-radius: 999px;
  font: 800 0.76rem/1 var(--font-display);
  cursor: pointer;
}

.khromafy-color-cancel {
  border: 1px solid var(--workspace-soft);
  background: transparent;
  color: var(--workspace-muted);
}

.khromafy-color-apply {
  border: 0;
  background: #171a23;
  color: #fff;
  box-shadow: 0 14px 28px -18px rgba(17, 20, 31, 0.75);
}

.khromafy-v2.is-dark .khromafy-color-shell {
  border-color: rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--ui-accent), transparent 78%), transparent 21rem),
    rgba(22, 24, 31, 0.99);
}

.khromafy-v2.is-dark .khromafy-color-hex input,
.khromafy-v2.is-dark .khromafy-color-rgb input {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
  color: var(--workspace-ink);
}

.khromafy-v2.is-dark .khromafy-color-preview {
  background: rgba(255, 255, 255, 0.055);
}

@media (max-width: 720px) {
  .khromafy-color-dialog {
    width: calc(100vw - 18px);
    max-height: calc(100vh - 18px);
  }

  .khromafy-color-shell {
    max-height: calc(100vh - 18px);
    overflow-y: auto;
    border-radius: 22px;
  }

  .khromafy-color-heading {
    padding: 22px 20px 18px;
  }

  .khromafy-color-layout {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 20px;
  }

  .khromafy-color-field {
    min-height: 260px;
  }

  .khromafy-color-details {
    grid-template-columns: 1fr 1fr;
  }

  .khromafy-color-preview,
  .khromafy-color-recents {
    grid-column: 1 / -1;
  }

  .khromafy-color-rgb {
    grid-column: 1 / -1;
  }

  .khromafy-color-actions {
    position: sticky;
    bottom: 0;
    padding: 16px 20px 20px;
    background: inherit;
  }
}

/* Image palette analyzer */
.image-analyzer-panel { display: grid; gap: 28px; }
.image-analyzer-heading,
.image-result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.image-analyzer-heading h2,
.image-result-head h3,
.image-empty-state h3 { margin: 6px 0 8px; }
.image-analyzer-heading p,
.image-empty-state p { max-width: 650px; margin: 0; color: var(--muted); line-height: 1.6; }
.image-mode-switch { display: flex; flex: 0 0 auto; gap: 4px; padding: 5px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--surface), transparent 12%); }
.image-mode-switch button { padding: 9px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: .78rem; font-weight: 800; }
.image-mode-switch button.is-active { background: var(--ink); color: var(--surface); }
.image-analyzer-layout { display: grid; grid-template-columns: minmax(280px, .82fr) minmax(420px, 1.4fr); gap: 28px; }
.image-upload-column,
.image-results-column { min-width: 0; }
.image-drop-zone { position: relative; display: grid; min-height: 420px; overflow: hidden; border: 1.5px dashed color-mix(in srgb, var(--muted), transparent 48%); border-radius: 22px; background: linear-gradient(145deg, color-mix(in srgb, var(--surface), transparent 6%), color-mix(in srgb, var(--accent), transparent 94%)); cursor: pointer; transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; }
.image-drop-zone:hover,
.image-drop-zone.is-drop-target { border-color: var(--accent); box-shadow: 0 22px 42px -32px var(--accent); transform: translateY(-2px); }
.image-drop-zone.is-analyzing::after { content: "Analizando tonos…"; position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: color-mix(in srgb, var(--surface), transparent 12%); color: var(--ink); font-weight: 900; backdrop-filter: blur(8px); }
.image-drop-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.image-drop-empty { display: grid; place-items: center; align-content: center; gap: 8px; padding: 44px; text-align: center; }
.image-drop-empty svg { width: 62px; margin-bottom: 12px; fill: none; stroke: var(--accent); stroke-width: 1.7; }
.image-drop-empty strong { font-size: 1.05rem; }
.image-drop-empty span,
.image-drop-empty small,
.image-analysis-note { color: var(--muted); }
.image-drop-zone img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.image-change-label { position: absolute; right: 14px; bottom: 14px; padding: 9px 13px; border-radius: 999px; background: rgba(10, 12, 20, .72); color: #fff; font-size: .74rem; font-weight: 900; backdrop-filter: blur(10px); }
.image-analysis-note { display: grid; gap: 3px; margin-top: 12px; padding: 13px 16px; border-radius: 14px; background: color-mix(in srgb, var(--accent), transparent 94%); font-size: .74rem; line-height: 1.45; }
.image-analysis-note strong { color: var(--ink); }
.image-empty-state { display: grid; min-height: 420px; place-content: center; padding: 50px; border: 1px solid var(--line); border-radius: 22px; text-align: center; background: color-mix(in srgb, var(--surface), transparent 20%); }
.image-empty-state > span { color: var(--accent); font-size: 3.4rem; font-weight: 950; letter-spacing: -.08em; }
.image-results { display: grid; gap: 28px; }
#imageAnalysisSummary { color: var(--muted); font-size: .72rem; font-weight: 700; }
.image-detected-palette,
.image-system-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.image-color-chip { position: relative; display: grid; min-height: 126px; align-content: space-between; padding: 14px; overflow: hidden; border: 0; border-radius: 16px; background: var(--image-color); color: var(--chip-ink); text-align: left; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.image-color-chip::after,
.image-role-swatch::after { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(255,255,255,.1), transparent 48%, rgba(0,0,0,.08)); pointer-events: none; }
.image-color-rank { opacity: .62; font-size: .7rem; font-weight: 900; }
.image-color-value { display: grid; gap: 3px; }
.image-color-value strong { font-family: var(--font-display); font-size: .9rem; }
.image-color-value small { opacity: .76; font-size: .66rem; font-weight: 750; }
.image-system-block { display: grid; gap: 16px; padding-top: 24px; border-top: 1px solid var(--line); }
.image-role-swatch { position: relative; display: grid; min-height: 116px; align-content: end; gap: 3px; overflow: hidden; padding: 14px; border: 0; border-radius: 16px; background: var(--image-color); color: var(--chip-ink); text-align: left; }
.image-role-swatch span { opacity: .7; font-size: .62rem; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }
.image-role-swatch strong { font-size: .78rem; }
.image-role-swatch code { opacity: .78; font-size: .67rem; }

@media (max-width: 980px) {
  .image-analyzer-layout { grid-template-columns: 1fr; }
  .image-drop-zone,
  .image-drop-zone img { min-height: 340px; }
}

@media (max-width: 700px) {
  .image-analyzer-heading,
  .image-result-head { align-items: stretch; flex-direction: column; }
  .image-mode-switch { align-self: flex-start; }
  .image-detected-palette,
  .image-system-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .image-drop-zone,
  .image-drop-zone img { min-height: 280px; }
  .image-empty-state { min-height: 320px; padding: 34px 22px; }
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.96), transparent 34%),
    linear-gradient(180deg, #fbfcff 0%, #f2f5fa 100%);
  color: var(--ink);
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
.color-canvas:focus-within {
  outline: 3px solid color-mix(in srgb, var(--accent), white 34%);
  outline-offset: 3px;
}

.tone-chip:focus-visible,
.harmony-chip:focus-visible,
.system-swatch:focus-visible,
.support-chip:focus-visible,
.gradient-color button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent), white 30%);
  outline-offset: 3px;
}

.export-button:focus-visible,
.secondary-action:focus-visible,
.palette-source-tabs button:focus-visible,
.palette-library button:focus-visible,
.format-tabs button:focus-visible {
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--ui-accent), white 76%),
    0 8px 18px color-mix(in srgb, var(--ui-accent), transparent 84%);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  height: 76px;
  padding: 0 30px;
  border-bottom: 1px solid rgba(221, 226, 236, 0.64);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.78)),
    radial-gradient(circle at 50% -80%, color-mix(in srgb, var(--ui-accent), white 72%), transparent 38%);
  backdrop-filter: blur(22px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 1.16rem;
}

.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background:
    radial-gradient(circle at 70% 28%, #fff 0 18%, transparent 19%),
    conic-gradient(from 20deg, #e00062, #ff4b9b, #7a5cff, #e00062);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
}

.export-button,
.icon-button,
.secondary-action,
.format-tabs button,
.output-grid button,
.tone-chip,
.harmony-chip,
.system-swatch,
.support-chip {
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
}

.format-tabs button:hover,
.output-grid button:hover,
.secondary-action:hover {
  border-color: var(--line-strong);
  background: #fff;
}

.export-button {
  min-width: 118px;
  padding: 11px 18px;
  border-radius: var(--radius-control);
  background: var(--ui-accent);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--ui-accent), transparent 78%);
}

.studio-shell {
  display: grid;
  grid-template-columns: 372px minmax(0, 1fr);
  gap: 28px;
  max-width: 1920px;
  margin: 0 auto;
  padding: 28px;
}

.control-panel {
  position: sticky;
  top: 104px;
  display: grid;
  align-content: start;
  gap: 24px;
  max-height: calc(100vh - 132px);
  overflow-y: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
  scroll-margin-top: 96px;
}

.panel-section,
.work-panel {
  border: 1px solid rgba(216, 222, 234, 0.64);
  border-radius: var(--radius-panel);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow);
}

.panel-section {
  padding: 26px;
}

.section-title,
.panel-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2 {
  margin-bottom: 0;
  font-size: 1rem;
  letter-spacing: 0;
}

h3 {
  margin-bottom: 10px;
  font-size: 0.78rem;
}

p {
  color: var(--muted);
  line-height: 1.45;
}

.icon-button {
  padding: 8px 12px;
  border-color: transparent;
  border-radius: var(--radius-control);
  background: #f7f9fc;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.secondary-action {
  align-self: center;
  min-height: 38px;
  padding: 0 14px;
  border-color: color-mix(in srgb, var(--ui-accent), #d8deea 72%);
  border-radius: var(--radius-control);
  background: #ffffff;
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(23, 31, 49, 0.045);
}

.base-editor {
  display: grid;
  grid-template-columns: 154px 1fr;
  gap: 24px;
  margin-top: 22px;
}

.color-canvas {
  position: relative;
  aspect-ratio: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--accent);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    0 12px 26px color-mix(in srgb, var(--accent), transparent 82%);
}

.color-canvas::before,
.color-canvas::after {
  position: absolute;
  left: 16px;
  z-index: 1;
  color: var(--chip-ink);
  font-weight: 900;
  pointer-events: none;
}

.color-canvas::before {
  content: "Base";
  top: 14px;
  color: color-mix(in srgb, var(--chip-ink), transparent 34%);
  font-size: 0.86rem;
}

.color-canvas::after {
  content: attr(data-color);
  bottom: 14px;
  font-size: 1rem;
}

.color-canvas input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.color-canvas.is-drop-target {
  outline: 3px solid color-mix(in srgb, var(--accent), white 18%);
  outline-offset: 4px;
}

.color-picker-affordance {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--chip-ink), transparent 82%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--chip-ink), transparent 72%),
    0 8px 18px rgba(17, 24, 38, 0.14);
  pointer-events: none;
}

.color-picker-affordance::before,
.color-picker-affordance::after {
  content: "";
  position: absolute;
  background: var(--chip-ink);
}

.color-picker-affordance::before {
  width: 5px;
  height: 16px;
  border-radius: 999px;
  transform: rotate(45deg);
}

.color-picker-affordance::after {
  width: 10px;
  height: 5px;
  border-radius: 999px 999px 2px 2px;
  transform: translate(5px, -5px) rotate(45deg);
}

.gamut-warning {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  padding: 0;
  border-radius: 50%;
  background: rgba(18, 24, 38, 0.72);
  color: #fff;
  font-size: 0.48rem;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  pointer-events: auto;
  box-shadow: 0 5px 12px rgba(18, 24, 38, 0.16);
}

.gamut-warning::before {
  content: "!";
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #f59e0b;
  color: #121826;
  font-size: 0.54rem;
}

.tone-chip .gamut-warning,
.harmony-chip .gamut-warning,
.system-swatch .gamut-warning,
.suggestion-chip .gamut-warning,
.support-chip .gamut-warning {
  top: 7px;
  right: 7px;
  opacity: 0.86;
  transform-origin: right top;
}

.section-gamut-note {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 620px);
  color: #7a3f00;
  font-size: 0.68rem;
  line-height: 1.35;
}

.section-gamut-label {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 6px 9px 6px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, #f59e0b, white 84%);
}

.section-gamut-label i {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #f59e0b;
  color: #121826;
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 950;
}

.section-gamut-note p {
  margin: 0;
  color: #7a3f00;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.35;
}

.application-gamut-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, #f59e0b, transparent 58%);
  border-radius: 14px;
  background: color-mix(in srgb, #f59e0b, white 91%);
  color: #7a3f00;
}

.application-gamut-note p {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.4;
}

.base-values {
  display: grid;
  align-content: start;
  gap: 12px;
}

.hex-input,
.color-value-input {
  width: 100%;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid rgba(216, 222, 234, 0.76);
  background: transparent;
  color: var(--ink);
  font-size: 1.45rem;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hex-input[readonly],
.color-value-input[readonly] {
  color: #3d4659;
  cursor: default;
  text-transform: none;
}

.rgb-fields,
.format-fields {
  display: grid;
  gap: 12px;
}

.rgb-fields label,
.format-fields label {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.format-fields:empty {
  display: none;
}

.channel-field {
  min-width: 0;
}

.channel-field input[type="number"] {
  max-width: 88px;
}

.channel-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.rgb-fields input,
.format-fields input {
  width: 100%;
  height: 32px;
  border: 0;
  border-radius: var(--radius-control);
  background: #f8faff;
  color: var(--ink);
  text-align: center;
  font-weight: 850;
}

.format-fields input[type="text"] {
  text-transform: uppercase;
}

.rgb-mixer,
.channel-mixer {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

.rgb-slider-stack,
.channel-slider-stack {
  display: grid;
  gap: 18px;
  padding: 0 4px 2px;
}

.rgb-slider,
.channel-slider {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  appearance: none;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 38, 0.06);
}

.rgb-slider::-webkit-slider-thumb,
.channel-slider::-webkit-slider-thumb {
  width: 26px;
  height: 26px;
  border: 3px solid #fff;
  border-radius: 50%;
  appearance: none;
  background: rgba(246, 248, 252, 0.94);
  box-shadow:
    0 8px 20px rgba(23, 31, 49, 0.22),
    inset 0 0 0 1px rgba(17, 24, 38, 0.08);
}

.rgb-slider::-moz-range-thumb,
.channel-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: rgba(246, 248, 252, 0.94);
  box-shadow:
    0 8px 20px rgba(23, 31, 49, 0.22),
    inset 0 0 0 1px rgba(17, 24, 38, 0.08);
}

.format-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 24px;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-control);
  background: #f6f8fc;
}

.format-tabs button {
  min-height: 36px;
  border-right: 0;
  font-size: 0.75rem;
  font-weight: 800;
}

.format-tabs button:last-child {
  border-right: 0;
}

.format-tabs .is-active {
  background: #fff;
  box-shadow: 0 6px 14px rgba(23, 31, 49, 0.06);
}

.slider-stack {
  display: grid;
  gap: 24px;
  margin-top: 24px;
}

.slider-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 16px;
  color: #3d4659;
  font-size: 0.78rem;
}

.slider-row span {
  font-weight: 700;
}

.slider-row output {
  color: var(--ink);
  text-align: right;
  font-weight: 800;
}

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

.slider-row input[type="range"] {
  height: 12px;
  border-radius: 999px;
  appearance: none;
  cursor: pointer;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent), #0b5cff 28%), color-mix(in srgb, var(--accent), #ee4bff 26%));
  box-shadow: inset 0 0 0 1px rgba(17, 24, 38, 0.06);
}

.slider-row input[type="range"]::-webkit-slider-thumb {
  width: 26px;
  height: 26px;
  border: 3px solid #fff;
  border-radius: 50%;
  appearance: none;
  background: rgba(246, 248, 252, 0.96);
  box-shadow:
    0 8px 20px rgba(23, 31, 49, 0.22),
    inset 0 0 0 1px rgba(17, 24, 38, 0.08);
}

.slider-row input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: rgba(246, 248, 252, 0.96);
  box-shadow:
    0 8px 20px rgba(23, 31, 49, 0.22),
    inset 0 0 0 1px rgba(17, 24, 38, 0.08);
}

#hueSlider {
  background: linear-gradient(90deg, #ef4444, #f59e0b, #facc15, #22c55e, #06b6d4, #3b82f6, #8b5cf6, #ef4444);
}

#saturationSlider {
  background: linear-gradient(90deg, #cfd5e2, var(--accent), #ff3aa7);
}

#brightnessSlider {
  background: linear-gradient(90deg, #172033, var(--accent), #f7f9ff);
}

#tonalContrastSlider {
  background: linear-gradient(90deg, #c9d1df, var(--accent), #111827);
}

#temperatureSlider {
  background: linear-gradient(90deg, #1769ff, var(--accent), #ff5b8f, #ffe66d);
}

.advanced-palette-settings {
  margin-top: 4px;
  border-radius: var(--radius-control);
}

.advanced-palette-settings summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 58px;
  padding: 14px 16px;
  border-radius: var(--radius-control);
  background:
    linear-gradient(180deg, #fbfcff 0%, #f7f9fd 100%),
    color-mix(in srgb, var(--ui-accent), white 94%);
  box-shadow: inset 0 0 0 1px rgba(216, 222, 234, 0.62);
  cursor: pointer;
  list-style: none;
}

.advanced-palette-settings summary::-webkit-details-marker {
  display: none;
}

.advanced-palette-settings summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #fff;
  color: var(--ui-accent);
  font-size: 1.05rem;
  font-weight: 900;
  box-shadow: 0 6px 16px rgba(23, 31, 49, 0.065);
}

.advanced-palette-settings[open] summary::after {
  content: "-";
}

.advanced-palette-settings summary span,
.advanced-palette-settings summary small {
  display: block;
}

.advanced-palette-settings summary span {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 900;
}

.advanced-palette-settings summary small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.advanced-palette-content {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.palette-library-card .section-title {
  align-items: center;
}

.palette-library {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.palette-library-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding: 4px;
  border-radius: var(--radius-control);
  background: #f4f7fb;
}

.palette-library-tabs button {
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #526078;
  font-size: 0.74rem;
  font-weight: 900;
}

.palette-library-tabs button.is-active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 6px 14px rgba(23, 31, 49, 0.06);
}

.palette-library-column {
  min-width: 0;
  padding: 12px;
  border-radius: var(--radius-card);
}

.palette-library-saved {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ui-accent), white 90%), #ffffff 68%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-accent), transparent 88%);
}

.palette-library-history {
  background: #f4f7fb;
}

.palette-library-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.palette-library-head strong {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
}

.palette-library-head > span,
.library-label {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.library-label {
  letter-spacing: 0.08em;
}

.palette-library-list {
  display: flex;
  gap: 10px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 8px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.palette-library-item {
  display: flex;
  flex: 0 0 138px;
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 18px rgba(23, 31, 49, 0.055);
  scroll-snap-align: start;
}

.palette-library-item > button {
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
}

.palette-library-item > button:first-child {
  display: grid;
  grid-template-rows: 42px auto;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  padding: 8px;
  text-align: left;
}

.palette-library-item > button:first-child:hover {
  background: color-mix(in srgb, var(--ui-accent), white 94%);
}

.palette-library-meta,
.palette-library-meta strong,
.palette-library-meta small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.palette-library-item strong {
  font-size: 0.8rem;
}

.palette-library-item small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.62rem;
}

.palette-library-swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  height: 42px;
  overflow: hidden;
  border-radius: 7px;
}

.palette-library-swatches i {
  min-width: 0;
}

.palette-library-remove {
  width: 28px;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 700;
}

.palette-library-remove:hover {
  background: #fff1f4;
  color: #b4234a;
}

.palette-library-empty {
  flex: 0 0 100%;
  margin: 0;
  padding: 12px;
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.66);
  color: var(--muted);
  font-size: 0.74rem;
}

.canvas-area {
  display: grid;
  gap: 28px;
  min-width: 0;
}

.stage-tabs {
  position: sticky;
  top: 96px;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px 12px 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow:
    0 14px 34px rgba(21, 28, 44, 0.08),
    inset 0 0 0 1px rgba(226, 232, 240, 0.88);
  backdrop-filter: blur(18px);
}

.stage-tab-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  min-height: 58px;
  padding: 0 14px 10px;
  border: 0;
  background: transparent;
  color: #72809a;
  font-size: 0.9rem;
  font-weight: 850;
  cursor: pointer;
}

.stage-tab-button::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 0;
  left: 10px;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: #5d55ff;
  opacity: 0;
  transform: scaleX(0.44);
  transition: opacity 160ms ease, transform 160ms ease;
}

.stage-tab-button svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stage-tab-button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-tab-button:hover,
.stage-tab-button.is-active {
  color: #5d55ff;
}

.stage-tab-button.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.stage-tab-button:focus-visible {
  outline: 2px solid color-mix(in srgb, #5d55ff, white 28%);
  outline-offset: -3px;
  border-radius: 12px;
}

.stage-panel[hidden] {
  display: none !important;
}

.work-panel {
  padding: 30px 34px 34px;
  overflow: hidden;
  scroll-margin-top: 96px;
}

.panel-heading {
  margin-bottom: 24px;
}

.panel-heading p {
  max-width: 760px;
  margin: 4px 0 0;
  font-size: 0.83rem;
}

.panel-heading strong {
  color: var(--ui-accent);
  font-size: 0.92rem;
}

.method-label {
  align-self: center;
  padding: 7px 9px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ui-accent), white 90%);
  color: var(--ui-accent);
  font-size: 0.72rem;
  font-weight: 850;
  white-space: nowrap;
}

.scale-view-select {
  align-self: center;
  min-width: 230px;
}

.scale-view-select select {
  width: 100%;
  min-height: 42px;
  padding: 0 40px 0 14px;
  border: 1px solid rgba(216, 222, 234, 0.86);
  border-radius: var(--radius-control);
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, #526078 50%) right 18px center / 7px 7px no-repeat,
    linear-gradient(135deg, #526078 50%, transparent 50%) right 13px center / 7px 7px no-repeat,
    #f8faff;
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

.scale-view-select select:focus {
  outline: 2px solid color-mix(in srgb, var(--ui-accent), white 42%);
  outline-offset: 2px;
}

.tonal-scale {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(81px, 101px));
  gap: 18px;
  justify-content: start;
}

.harmony-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 24px;
  margin-top: 30px;
}

.harmony-overview .harmony-row {
  overflow: hidden;
}

.harmony-overview .harmony-scale,
.harmony-overview .harmony-grouped {
  grid-template-columns: repeat(var(--count), minmax(60px, 1fr));
}

.harmony-overview .harmony-chip {
  min-width: 0;
}

.tonal-scale.is-harmony-view {
  grid-template-columns: repeat(auto-fit, minmax(81px, 101px));
}

.tone-stop {
  min-width: 0;
}

.tone-chip {
  position: relative;
  display: grid;
  align-content: space-between;
  width: 100%;
  aspect-ratio: 1;
  min-height: 0;
  padding: 12px;
  border: 0;
  border-radius: var(--radius-card);
  box-shadow:
    inset 0 0 0 1px rgba(17, 24, 38, 0.04),
    var(--shadow-tight);
  text-align: left;
}

.tone-chip span {
  color: color-mix(in srgb, var(--chip-ink), transparent 34%);
  font-size: 0.78rem;
  font-weight: 900;
}

.tone-chip small {
  width: fit-content;
  max-width: 100%;
  padding: 4px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--chip-ink), transparent 88%);
  color: var(--chip-ink);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
}

.tone-chip code {
  color: var(--chip-ink);
  font-size: 0.72rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.tone-chip .contrast-badge {
  position: absolute;
  right: auto;
  bottom: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100% - 20px);
  padding: 4px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--chip-ink), transparent 84%);
  color: var(--chip-ink);
  font-size: 0.58rem;
  font-weight: 950;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.tone-chip:hover .contrast-badge,
.tone-chip:focus-visible .contrast-badge,
.tone-chip.is-anchor .contrast-badge {
  opacity: 1;
  transform: translateY(0);
}

.tone-chip .contrast-badge b,
.tone-chip .contrast-badge em {
  color: currentColor;
  font: inherit;
  letter-spacing: 0;
}

.tone-chip .contrast-badge em {
  opacity: 0.72;
  font-style: normal;
}

.tone-chip .contrast-badge.is-fail {
  background: color-mix(in srgb, #b4234a, transparent 10%);
  color: #ffffff;
}

.harmony-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

.harmony-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.advanced-harmonies {
  border-radius: var(--radius-panel);
}

.advanced-harmonies summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 76px;
  padding: 20px 22px;
  border-radius: var(--radius-panel);
  background:
    linear-gradient(180deg, #fbfcff 0%, #f7f9fd 100%),
    color-mix(in srgb, var(--accent), white 94%);
  box-shadow: inset 0 0 0 1px rgba(216, 222, 234, 0.58);
  cursor: pointer;
  list-style: none;
}

.advanced-harmonies summary::-webkit-details-marker {
  display: none;
}

.advanced-harmonies summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #fff;
  color: var(--accent);
  font-size: 1.25rem;
  font-weight: 900;
  box-shadow: 0 6px 16px rgba(23, 31, 49, 0.065);
}

.advanced-harmonies[open] summary::after {
  content: "-";
}

.advanced-harmonies summary span {
  display: block;
  color: var(--ink);
  font-weight: 900;
}

.advanced-harmonies summary small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.advanced-harmony-content {
  display: grid;
  gap: 24px;
  margin-top: 24px;
}

.harmony-row {
  display: grid;
  align-content: start;
  gap: 18px;
  min-width: 0;
  padding: 22px;
  border: 0;
  border-radius: var(--radius-panel);
  background: #f8faff;
}

.harmony-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.harmony-head h3 {
  margin-bottom: 0;
}

.harmony-head span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
}

.harmony-scale {
  display: grid;
  grid-template-columns: repeat(var(--count), minmax(86px, 1fr));
  gap: 16px;
  align-items: start;
  min-height: 0;
}

.harmony-grouped {
  display: grid;
  grid-template-columns: repeat(var(--count), minmax(62px, 1fr));
  gap: 16px;
  align-items: start;
}

.harmony-axis {
  display: grid;
  gap: 10px;
  justify-items: center;
}

.harmony-axis small {
  min-height: 16px;
  color: #6d7689;
  font-size: 0.68rem;
  font-weight: 900;
  text-align: center;
}

.harmony-axis.is-base small {
  color: var(--accent);
}

.harmony-chip {
  position: relative;
  display: grid;
  align-content: space-between;
  width: 100%;
  aspect-ratio: 1;
  min-height: 0;
  padding: 12px 10px;
  border: 0;
  border-radius: var(--radius-card);
  box-shadow:
    inset 0 0 0 1px rgba(17, 24, 38, 0.035),
    0 8px 18px rgba(23, 31, 49, 0.06);
  text-align: left;
}

.harmony-chip.compact {
  width: min(100%, 70px);
  padding: 8px 6px;
  border-radius: 10px;
}

.harmony-chip.compact code {
  font-size: 0.58rem;
}

.harmony-chip span {
  color: color-mix(in srgb, var(--chip-ink), transparent 34%);
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.15;
}

.harmony-chip code {
  max-width: 100%;
  color: var(--chip-ink);
  font-size: 0.72rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.system-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(81px, 101px));
  align-items: start;
  gap: 20px;
  justify-content: start;
  max-width: 100%;
  padding-top: 22px;
}

.system-roles {
  display: contents;
}

.system-role {
  position: relative;
  display: grid;
  min-width: 0;
}

.system-role:first-child::before {
  content: "Cromática principal";
  position: absolute;
  top: -24px;
  left: 0;
  color: #3d4659;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.system-swatch {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(34px, 1fr) auto auto;
  align-content: stretch;
  gap: 4px;
  width: 100%;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 10px;
  border: 0;
  border-radius: var(--radius-card);
  box-shadow:
    inset 0 0 0 1px rgba(17, 24, 38, 0.035),
    0 12px 28px rgba(31, 42, 68, 0.085);
  text-align: left;
}

.tone-chip.is-anchor,
.harmony-chip.is-anchor,
.system-swatch.is-anchor {
  box-shadow:
    inset 0 0 0 0 rgba(255, 255, 255, 0.8),
    0px 0 12px 5px color-mix(in srgb, var(--accent), transparent 40%);
  transform: translateY(-2px);
}

.system-swatch span {
  min-width: 0;
  color: color-mix(in srgb, var(--chip-ink), transparent 40%);
  font-size: 0.54rem;
  font-weight: 900;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.system-swatch strong {
  color: var(--chip-ink);
  font-size: 0.68rem;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.system-swatch code {
  grid-row: 4;
  margin-top: 0;
  color: var(--chip-ink);
  font-size: 0.66rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.system-swatch small {
  grid-row: 5;
  color: color-mix(in srgb, var(--chip-ink), transparent 38%);
  font-size: 0.46rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.system-role > span {
  display: block;
  margin-top: 0;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.35;
  text-align: center;
}

.support-bank {
  display: contents;
}

.support-bank h3 {
  display: none;
}

#supportRail {
  display: contents;
}

.support-chip {
  position: relative;
  display: grid;
  align-content: end;
  justify-items: center;
  width: 100%;
  aspect-ratio: 1;
  min-height: 0;
  padding: 8px;
  border: 0;
  border-radius: var(--radius-card);
  box-shadow:
    inset 0 0 0 1px rgba(17, 24, 38, 0.035),
    0 8px 18px rgba(31, 42, 68, 0.06);
}

.support-chip:first-child {
  position: relative;
}

.support-chip:first-child::before {
  content: "Colores de apoyo";
  position: absolute;
  top: -24px;
  left: 0;
  color: #3d4659;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.support-chip code {
  max-width: 100%;
  color: var(--chip-ink);
  font-size: 0.58rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.technical-data,
.tone-chip code,
.harmony-chip code,
.system-swatch code,
.system-swatch small,
.support-chip code,
.gradient-color code,
.ui-token code,
.type-pair code,
.option-card code,
.print-mockup-card code,
.gradient-type-footer code {
  opacity: 0.4;
  transition: opacity 160ms ease;
}

.tone-chip:hover code,
.tone-chip:focus-visible code,
.harmony-chip:hover code,
.harmony-chip:focus-visible code,
.system-swatch:hover code,
.system-swatch:focus-visible code,
.system-swatch:hover small,
.system-swatch:focus-visible small,
.support-chip:hover code,
.support-chip:focus-visible code,
.gradient-color:hover code,
.gradient-color:focus-within code,
.ui-token:hover code,
.ui-token:focus-within code,
.type-pair:hover code,
.type-pair:focus-within code,
.option-card:hover code,
.option-card:focus-within code,
.print-mockup-card:hover code,
.print-mockup-card:focus-within code,
.gradient-type-card:hover .gradient-type-footer code {
  opacity: 1;
}

.tone-chip:hover,
.harmony-chip:hover,
.system-swatch:hover,
.support-chip:hover {
  outline: 2px solid color-mix(in srgb, var(--accent), white 45%);
  outline-offset: 2px;
}

.tone-chip::after,
.system-swatch::after,
.support-chip::after,
.harmony-chip::after {
  content: "Copiado";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  padding: 4px 6px;
  border-radius: 4px;
  background: rgba(18, 24, 38, 0.82);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 850;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.94);
  transition: opacity 160ms ease, transform 160ms ease;
}

.tone-chip.is-copied::after,
.system-swatch.is-copied::after,
.support-chip.is-copied::after,
.harmony-chip.is-copied::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.gradient-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  align-items: start;
}

.palette-source-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 24px;
  align-items: stretch;
}

.palette-source-tabs {
  display: grid;
  grid-template-columns: minmax(300px, max-content) minmax(360px, 1fr);
  gap: 14px;
  align-items: end;
  padding: 10px;
  border-radius: var(--radius-panel);
  background: #f8faff;
}

.palette-source-group {
  display: grid;
  gap: 8px;
}

.palette-source-group > span {
  padding: 0 4px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.palette-source-group > div {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.palette-source-group + .palette-source-group > div {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.palette-source-select {
  display: block;
}

.palette-source-select select {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, #526078 50%) right 18px center / 7px 7px no-repeat,
    linear-gradient(135deg, #526078 50%, transparent 50%) right 13px center / 7px 7px no-repeat,
    #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(216, 222, 234, 0.76);
}

.palette-source-select select:focus {
  outline: 2px solid color-mix(in srgb, var(--ui-accent), white 42%);
  outline-offset: 2px;
}

.palette-source-tabs button {
  position: relative;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: #526078;
  font-size: 0.72rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.palette-source-group:first-child > div {
  grid-template-columns: repeat(7, 48px);
}

.palette-source-group:first-child button {
  display: grid;
  place-items: center;
  width: 48px;
  min-height: 48px;
  padding: 0;
}

.mode-icon {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mode-icon .mode-dot {
  fill: color-mix(in srgb, currentColor, white 64%);
  stroke: currentColor;
}

.palette-source-tabs button.is-active .mode-icon .mode-dot {
  fill: #ffffff;
}

.palette-source-tabs button:hover .mode-icon {
  transform: translateY(-1px);
}

.palette-source-tabs button[data-help]::after {
  content: attr(data-help);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 4;
  width: max-content;
  max-width: min(260px, 72vw);
  padding: 8px 10px;
  border-radius: var(--radius-control);
  background: rgba(18, 24, 38, 0.94);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 750;
  line-height: 1.35;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
}

.palette-source-tabs button[data-help]:hover::after,
.palette-source-tabs button[data-help]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.palette-source-tabs button:hover {
  border-color: var(--line-strong);
  background: #fff;
}

.palette-source-tabs button.is-active {
  background: var(--ui-accent);
  color: #fff;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--ui-accent), transparent 82%);
}

.palette-source-block {
  display: grid;
  gap: 16px;
  margin-bottom: 6px;
  padding: 24px 0 28px;
  border-bottom: 1px solid var(--line);
}

.palette-source-block h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1.1;
}

.stage-system .palette-source-layout {
  grid-template-columns: 1fr;
}

.gradient-module {
  min-width: 0;
  padding: 14px;
  border: 0;
  border-radius: var(--radius-panel);
}

.gradient-intent {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  margin-bottom: 10px;
  padding: 0 9px;
  border-radius: 999px;
  background: #eef2f8;
  color: #4a566d;
  font-size: 0.66rem;
  font-weight: 950;
  text-transform: uppercase;
}

.gradient-preview {
  position: relative;
  display: grid;
  align-items: end;
  aspect-ratio: 16 / 9;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.52);
}

.gradient-module.is-video-vertical {
  max-width: min(100%, 280px);
  justify-self: center;
}

.gradient-module.is-video-vertical .gradient-preview {
  aspect-ratio: 9 / 16;
}

.gradient-format {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 1;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(18, 24, 38, 0.44);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 900;
  backdrop-filter: blur(10px);
}

.gradient-caption {
  display: block;
  margin-top: 12px;
  color: #526078;
  font-size: 0.72rem;
  font-weight: 800;
}

.gradient-module p {
  margin: 6px 0 0;
  color: #69758a;
  font-size: 0.72rem;
  line-height: 1.35;
}

.gradient-hexes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
}

code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.gradient-hexes code {
  color: #4a5365;
  font-size: 0.62rem;
}

.gradient-color {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.gradient-color i {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 38, 0.08);
}

.gradient-arrow {
  color: #8a93a6;
  font-size: 0.72rem;
  font-weight: 900;
}

.gradient-color button {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.gradient-color button:hover code {
  color: var(--accent);
}

.gradient-color.is-copied::after {
  content: "Copiado";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  z-index: 1;
  padding: 4px 6px;
  border-radius: 4px;
  background: rgba(18, 24, 38, 0.82);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 850;
  transform: translateX(-50%);
  pointer-events: none;
}

.gradient-type-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.title-gradient-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.title-gradient-card {
  min-width: 0;
  display: grid;
  align-content: space-between;
  min-height: 238px;
  padding: 24px;
  border-radius: var(--radius-panel);
  background: var(--title-bg);
  color: var(--title-ink);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--title-ink), transparent 92%),
    0 12px 28px color-mix(in srgb, var(--title-ink), transparent 92%);
}

.title-gradient-card span {
  color: var(--title-muted);
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.title-gradient-card h3 {
  width: 100%;
  max-width: 100%;
  margin: 34px 0 0;
  background: var(--title-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-size: 2.85rem;
  line-height: 1.03;
  font-weight: 950;
  overflow-wrap: break-word;
  hyphens: auto;
}

.gradient-type-card {
  position: relative;
  display: grid;
  align-content: space-between;
  min-height: 360px;
  overflow: hidden;
  padding: 24px;
  border-radius: var(--radius-panel);
  background: var(--gradient-type-bg);
  color: var(--gradient-type-ink);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 12px 28px rgba(23, 31, 49, 0.075);
}

.gradient-type-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 44%),
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.18), transparent 28%);
  pointer-events: none;
}

.gradient-type-card > * {
  position: relative;
}

.gradient-type-label {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gradient-type-ink), transparent 88%);
  color: var(--gradient-type-ink);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.gradient-type-card h3 {
  max-width: 360px;
  margin: 20px 0 0;
  color: var(--gradient-type-ink);
  font-size: 2.8rem;
  line-height: 0.96;
  font-weight: 950;
}

.gradient-type-card p {
  max-width: 320px;
  margin: 18px 0 0;
  color: var(--gradient-type-muted);
  font-size: 0.92rem;
}

.gradient-type-footer {
  display: grid;
  gap: 7px;
}

.gradient-type-footer strong {
  color: var(--gradient-type-ink);
  font-size: 0.78rem;
}

.gradient-type-footer code {
  color: var(--gradient-type-muted);
  font-size: 0.62rem;
  overflow-wrap: anywhere;
}

.typography-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 26px;
  align-items: stretch;
}

.type-specimen {
  display: grid;
  align-content: space-between;
  min-height: 390px;
  padding: 34px;
  border-radius: var(--radius-panel);
  background: var(--type-bg);
  color: var(--type-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--type-ink), transparent 90%);
}

.type-kicker {
  margin: 0 0 20px;
  color: var(--type-muted);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.type-display {
  max-width: 780px;
  margin: 0;
  color: var(--type-ink);
  font-size: 4.5rem;
  line-height: 0.95;
  font-weight: 950;
}

.type-display span {
  color: var(--type-accent);
}

.type-body {
  max-width: 620px;
  margin: 24px 0 0;
  color: var(--type-muted);
  font-size: 1.02rem;
}

.type-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}

.type-meta-row span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--type-accent), var(--type-bg) 76%);
  color: var(--type-ink);
  font-size: 0.72rem;
  font-weight: 850;
}

.type-pair-list {
  display: grid;
  gap: 14px;
}

.type-pair {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 82px;
  padding: 14px;
  border-radius: var(--radius-card);
}

.type-pair-preview {
  display: grid;
  place-items: center;
  min-height: 54px;
  border-radius: var(--radius-control);
  background: var(--pair-bg);
  color: var(--pair-ink);
  font-size: 1.5rem;
  font-weight: 950;
}

.type-pair strong,
.type-pair code,
.ui-token code,
.option-card code {
  overflow-wrap: anywhere;
}

.type-pair strong {
  display: block;
  color: var(--ink);
  font-size: 0.82rem;
}

.type-pair code {
  color: var(--muted);
  font-size: 0.68rem;
}

.ui-showcase {
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
  gap: 26px;
  align-items: stretch;
}

.mini-ui {
  display: grid;
  gap: 18px;
  min-height: 430px;
  padding: 22px;
  border-radius: var(--radius-panel);
  background: var(--ui-bg);
  color: var(--ui-ink);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--ui-ink), transparent 90%),
    0 12px 28px color-mix(in srgb, var(--ui-ink), transparent 92%);
}

.mini-ui-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.mini-ui-brand,
.mini-ui-user {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--ui-ink);
  font-weight: 900;
}

.mini-ui-mark,
.mini-ui-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--ui-primary);
}

.mini-ui-avatar {
  border-radius: 50%;
  background: var(--ui-support);
}

.mini-ui-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.mini-ui-nav span {
  min-height: 36px;
  padding: 10px 8px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--ui-soft), var(--ui-bg) 34%);
  color: var(--ui-muted);
  font-size: 0.72rem;
  font-weight: 850;
  text-align: center;
}

.mini-ui-nav span:first-child {
  background: var(--ui-primary);
  color: var(--ui-primary-ink);
}

.mini-ui-card {
  display: grid;
  gap: 20px;
  padding: 24px;
  border-radius: var(--radius-card);
  background: var(--ui-surface);
  color: var(--ui-ink);
}

.mini-ui-card h3 {
  max-width: 390px;
  margin: 0;
  color: var(--ui-ink);
  font-size: 2.15rem;
  line-height: 1;
}

.mini-ui-card h3 span {
  color: var(--ui-support);
}

.mini-ui-card p {
  max-width: 440px;
  margin: 0;
  color: var(--ui-muted);
}

.ui-accessibility-alert {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  max-width: 460px;
  padding: 10px 12px;
  border-radius: var(--radius-control);
  background: color-mix(in srgb, #f59e0b, var(--ui-surface) 86%);
  color: color-mix(in srgb, #121826, #92400e 28%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #f59e0b, transparent 58%);
}

.ui-accessibility-alert > span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f59e0b;
  color: #121826;
  font-size: 0.78rem;
  font-weight: 950;
}

.ui-accessibility-alert p {
  margin: 0;
  color: inherit;
  font-size: 0.74rem;
  line-height: 1.35;
}

.ui-accessibility-alert strong {
  color: inherit;
  font-weight: 950;
}

.mini-ui-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mini-ui-actions button {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--ui-primary), transparent 42%);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--ui-primary);
  font-weight: 900;
}

.mini-ui-actions button:first-child {
  background: var(--ui-primary);
  color: var(--ui-primary-ink);
}

.mini-ui-bars {
  display: grid;
  gap: 10px;
}

.mini-ui-bars span {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ui-primary), var(--ui-support));
}

.mini-ui-bars span:nth-child(2) {
  width: 76%;
  background: var(--ui-soft);
}

.mini-ui-bars span:nth-child(3) {
  width: 58%;
  background: var(--ui-support);
}

.motion-mockup {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border-radius: var(--radius-card);
  background: #fbfcfe;
  box-shadow:
    inset 0 0 0 1px rgba(216, 222, 234, 0.58),
    0 10px 24px rgba(23, 31, 49, 0.055);
}

.motion-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-card);
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--motion-support), transparent 24%), transparent 26%),
    linear-gradient(135deg, var(--motion-main), var(--motion-deep));
  color: var(--motion-ink);
}

.motion-brand-mark {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--motion-support);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 12px 28px rgba(18, 24, 38, 0.18);
}

.motion-focus {
  position: absolute;
  inset: 28% 20% auto auto;
  display: grid;
  gap: 10px;
  width: min(180px, 38%);
}

.motion-focus span {
  display: block;
  height: 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--motion-light), transparent 12%);
}

.motion-focus span:nth-child(2) {
  width: 62%;
  background: color-mix(in srgb, var(--motion-support), transparent 8%);
}

.motion-lower-third {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 12px;
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--motion-soft), white 8%);
  color: var(--motion-deep);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    0 14px 34px rgba(18, 24, 38, 0.18);
}

.motion-lower-third i {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--motion-support);
}

.motion-lower-third strong,
.motion-lower-third span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.motion-lower-third strong {
  color: var(--motion-deep);
  font-size: 0.78rem;
  font-weight: 950;
}

.motion-lower-third span,
.motion-lower-third small {
  color: color-mix(in srgb, var(--motion-deep), transparent 30%);
  font-size: 0.64rem;
  font-weight: 800;
}

.motion-timeline {
  display: grid;
  grid-template-columns: 1.2fr 0.6fr 0.9fr;
  gap: 8px;
}

.motion-timeline span {
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--motion-main), transparent 72%);
}

.ui-token-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.ui-token {
  display: grid;
  gap: 10px;
  min-height: 122px;
  padding: 14px;
  border-radius: var(--radius-card);
}

.ui-token-swatch {
  min-height: 48px;
  border-radius: var(--radius-control);
  background: var(--token-color);
  box-shadow: inset 0 0 0 1px rgba(17, 24, 38, 0.05);
}

.ui-token strong {
  color: var(--ink);
  font-size: 0.78rem;
}

.ui-token code {
  color: var(--muted);
  font-size: 0.68rem;
}

.option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
}

.option-card {
  display: grid;
  align-content: space-between;
  gap: 18px;
  min-height: 230px;
  padding: 18px;
  border-radius: var(--radius-card);
}

.option-preview {
  display: grid;
  place-items: center;
  min-height: 112px;
  border-radius: var(--radius-card);
  background: var(--option-bg);
  color: var(--option-ink);
  overflow: hidden;
}

.logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--option-ink);
  font-weight: 950;
}

.logo-lockup i {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--option-accent);
}

.state-stack,
.viz-stack,
.social-stack {
  display: grid;
  gap: 9px;
  width: min(150px, 80%);
}

.state-stack span,
.social-stack span {
  min-height: 18px;
  border-radius: 999px;
  background: var(--option-accent);
}

.state-stack span:nth-child(2),
.social-stack span:nth-child(2) {
  width: 72%;
  background: color-mix(in srgb, var(--option-accent), var(--option-bg) 42%);
}

.state-stack span:nth-child(3),
.social-stack span:nth-child(3) {
  width: 48%;
  background: color-mix(in srgb, var(--option-ink), var(--option-bg) 72%);
}

.viz-stack {
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  min-height: 78px;
}

.viz-stack span {
  border-radius: 8px 8px 0 0;
  background: var(--option-accent);
}

.viz-stack span:nth-child(1) {
  height: 36px;
}

.viz-stack span:nth-child(2) {
  height: 66px;
  background: color-mix(in srgb, var(--option-accent), var(--option-ink) 18%);
}

.viz-stack span:nth-child(3) {
  height: 48px;
  background: color-mix(in srgb, var(--option-accent), var(--option-bg) 24%);
}

.viz-stack span:nth-child(4) {
  height: 76px;
}

.option-card strong {
  display: block;
  color: var(--ink);
  font-size: 0.82rem;
}

.option-card p {
  margin: 6px 0 0;
  font-size: 0.72rem;
}

.option-card code {
  color: var(--muted);
  font-size: 0.62rem;
}

.print-mockup-card {
  position: relative;
  display: grid;
  align-content: space-between;
  gap: 18px;
  min-height: 270px;
  padding: 18px;
  border-radius: var(--radius-card);
  background: #fbfcfe;
  box-shadow:
    inset 0 0 0 1px rgba(216, 222, 234, 0.58),
    0 10px 24px rgba(23, 31, 49, 0.045);
}

.print-card-face,
.package-label-face {
  position: relative;
  display: grid;
  overflow: hidden;
  min-height: 138px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--print-light);
  color: var(--print-deep);
}

.print-card-face {
  grid-template-rows: 1fr auto;
  padding: 18px;
  background:
    linear-gradient(135deg, var(--print-light) 0 58%, var(--print-soft) 58%),
    var(--print-light);
}

.print-logo-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: start;
  font-weight: 950;
}

.print-logo-lockup i {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--print-main);
  box-shadow: inset 0 0 0 6px var(--print-support);
}

.print-contact span,
.print-contact small {
  display: block;
}

.print-contact span {
  font-weight: 950;
}

.print-contact small {
  margin-top: 3px;
  color: color-mix(in srgb, var(--print-deep), transparent 34%);
  font-size: 0.68rem;
  font-weight: 800;
}

.package-label-face {
  align-content: end;
  gap: 8px;
  padding: 18px;
  background:
    linear-gradient(90deg, var(--print-main) 0 24%, transparent 24%),
    var(--print-soft);
}

.package-band {
  width: fit-content;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--print-support);
  color: var(--print-deep);
  font-size: 0.62rem;
  font-weight: 950;
}

.package-label-face h3 {
  margin: 0;
  color: var(--print-deep);
  font-size: 1.45rem;
  line-height: 1;
}

.package-label-face p {
  max-width: 240px;
  margin: 0;
  color: color-mix(in srgb, var(--print-deep), transparent 24%);
  font-size: 0.7rem;
}

.registration-cross {
  position: absolute;
  z-index: 2;
  width: 18px;
  height: 18px;
  color: var(--line-strong);
}

.registration-cross::before,
.registration-cross::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.registration-cross::before {
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
}

.registration-cross::after {
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
}

.registration-cross.top-left {
  left: 8px;
  top: 8px;
}

.registration-cross.top-right {
  right: 8px;
  top: 8px;
}

.registration-cross.bottom-right {
  right: 8px;
  bottom: 8px;
}

.cut-guide {
  position: absolute;
  background: var(--line-strong);
}

.cut-guide.top {
  left: 10px;
  right: 10px;
  top: 10px;
  height: 1px;
}

.cut-guide.right {
  top: 10px;
  right: 10px;
  bottom: 10px;
  width: 1px;
}

.print-mockup-card strong {
  display: block;
  color: var(--ink);
  font-size: 0.82rem;
}

.print-mockup-card > div + div p {
  margin: 6px 0 0;
  font-size: 0.72rem;
}

.print-mockup-card code {
  color: var(--muted);
  font-size: 0.62rem;
}

.output-panel {
  padding-bottom: 18px;
}

.output-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 20px;
}

.output-grid button {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 6px;
  min-height: 70px;
  padding: 16px 18px;
  border-color: transparent;
  border-radius: var(--radius-card);
  background: #f8faff;
  text-align: left;
}

.output-grid button::after {
  content: "Guardar archivo";
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  margin-top: 6px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ui-accent), white 88%);
  color: var(--ui-accent);
  font-size: 0.62rem;
  font-weight: 900;
}

.output-grid strong {
  font-size: 0.84rem;
}

.output-grid span {
  color: var(--muted);
  font-size: 0.7rem;
}

.export-modal {
  width: min(920px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 48px));
  padding: 0;
  border: 0;
  border-radius: var(--radius-panel);
  background: transparent;
  color: var(--ink);
}

.export-modal::backdrop {
  background: rgba(18, 24, 38, 0.28);
  backdrop-filter: blur(14px);
}

.export-modal-shell {
  padding: 26px;
  border: 1px solid rgba(216, 222, 234, 0.84);
  border-radius: var(--radius-panel);
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 28px 72px rgba(18, 24, 38, 0.2),
    0 8px 24px rgba(23, 31, 49, 0.08);
}

.export-modal-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  box-shadow: inset 0 -1px 0 #edf1f6;
}

.export-modal-heading h2 {
  margin: 0;
  font-size: 1.2rem;
}

.export-modal-heading p {
  margin: 6px 0 0;
  color: #69758a;
}

.modal-close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(216, 222, 234, 0.9);
  border-radius: var(--radius-control);
  background: #fff;
  color: #1f2937;
  font-size: 0.9rem;
  font-weight: 900;
}

@media (max-width: 720px) {
  .export-modal-shell {
    padding: 20px;
  }

  .export-modal-heading {
    gap: 14px;
  }

  .export-modal .output-grid {
    grid-template-columns: 1fr;
  }
}

.feedback-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 30;
  max-width: min(360px, calc(100vw - 32px));
  padding: 12px 14px;
  border: 1px solid rgba(216, 222, 234, 0.86);
  border-radius: var(--radius-card);
  background: rgba(18, 24, 38, 0.94);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 850;
  box-shadow: 0 14px 32px rgba(18, 24, 38, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.feedback-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1280px) {
  .studio-shell {
    grid-template-columns: 320px minmax(0, 1fr);
  }

  .system-roles {
    display: contents;
  }

  .system-layout {
    gap: 18px;
  }

  .palette-source-layout {
    grid-template-columns: 1fr;
  }

  .typography-showcase,
  .ui-showcase {
    grid-template-columns: 1fr;
  }

  .harmony-pair {
    grid-template-columns: 1fr;
  }

  .support-bank {
    display: contents;
  }

  #supportRail {
    display: contents;
  }
}

@media (min-width: 1281px) {
  .stage-system .system-layout {
    grid-template-columns: repeat(auto-fit, minmax(81px, 101px));
  }
}

@media (max-width: 900px) {
  .topbar {
    grid-template-columns: 1fr auto;
  }

  .studio-shell {
    grid-template-columns: 1fr;
  }

  .control-panel {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .khromafy-v2 .stage-system .palette-source-tabs,
  .palette-source-tabs {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}

@media (max-width: 620px) {
  .topbar,
  .studio-shell {
    padding-left: 12px;
    padding-right: 12px;
  }

  .base-editor,
  .system-roles,
  .gradient-board,
  .output-grid,
  .option-grid,
  .gradient-type-showcase,
  .ui-token-grid {
    grid-template-columns: 1fr;
  }

  .palette-source-group > div,
  .palette-source-group + .palette-source-group > div {
    grid-template-columns: repeat(3, 48px);
  }

  .palette-source-group + .palette-source-group > div {
    grid-template-columns: 1fr;
  }

  .gradient-type-card {
    min-height: 310px;
  }

  .title-gradient-card h3 {
    font-size: 2.15rem;
  }

  .gradient-type-card h3 {
    font-size: 2.25rem;
  }

  .type-specimen {
    min-height: 340px;
    padding: 24px;
  }

  .type-display {
    font-size: 3rem;
  }

  .type-pair {
    grid-template-columns: 74px 1fr;
  }

  .mini-ui-card h3 {
    font-size: 1.65rem;
  }

  .harmony-scale {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .harmony-pair {
    grid-template-columns: 1fr;
  }

  #supportRail {
    display: contents;
  }

  .tonal-scale {
    grid-template-columns: repeat(auto-fit, minmax(81px, 101px));
  }

  .system-roles {
    display: contents;
  }

  .scale-view-select {
    width: 100%;
    min-width: 0;
  }

  .method-label {
    display: none;
  }
}

/* Custom premium scrollbar for sidebar */
.khromafy-v2 .control-panel::-webkit-scrollbar {
  width: 6px;
}
.khromafy-v2 .control-panel::-webkit-scrollbar-track {
  background: transparent;
}
.khromafy-v2 .control-panel::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.2);
  border-radius: 99px;
}
.khromafy-v2 .control-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.4);
}

.khromafy-v2 .brand:hover .brand-mark {
  transform: rotate(180deg) scale(1.08);
}

.khromafy-v2 .theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  color: #475569;
  font-size: 0.78rem;
  font-weight: 600;
  backdrop-filter: blur(8px);
  transition: all 0.2s ease;
}

.khromafy-v2 .theme-switch:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
  transform: translateY(-1px);
}

.khromafy-v2 .theme-switch-track {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: #cbd5e1;
  box-shadow: inset 0 1px 2px rgba(2, 6, 23, 0.05);
  transition: background 0.2s ease;
}

.khromafy-v2 .theme-switch-thumb {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(2, 6, 23, 0.1);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.khromafy-v2 .editor-card,
.khromafy-v2 .tuning-card,
.khromafy-v2 .compact-card {
  background: rgba(255, 255, 255, 0.8);
}

.khromafy-v2 .stage-panel {
  --stage: #0ec095;
}

.khromafy-v2 .stage-explore {
  --stage: #0ec095;
}

.khromafy-v2 .stage-system {
  --stage: #10b981;
}

.khromafy-v2 .stage-source {
  --stage: #8b5cf6;
  background: rgba(253, 253, 255, 0.75);
}

.khromafy-v2 .stage-gradient {
  --stage: #f59e0b;
  background: rgba(255, 253, 250, 0.75);
}

.khromafy-v2 .stage-examples,
.khromafy-v2 .stage-title,
.khromafy-v2 .stage-type {
  --stage: #ec4899;
  background: rgba(255, 250, 253, 0.75);
}

.khromafy-v2 .stage-ui,
.khromafy-v2 .stage-options,
.khromafy-v2 .stage-icons {
  --stage: #0284c7;
  background: rgba(250, 253, 255, 0.75);
}

.khromafy-v2 .stage-output {
  --stage: #475569;
  background: rgba(251, 252, 254, 0.75);
}

.khromafy-v2 .section-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-bottom: 6px;
  color: var(--stage, var(--ui-accent));
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.khromafy-v2 .section-title,
.khromafy-v2 .panel-heading {
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 rgba(226, 232, 240, 0.8);
}

.khromafy-v2 .panel-heading {
  margin-bottom: 30px;
}

.khromafy-v2 .section-control {
  display: grid;
  grid-template-columns: auto minmax(220px, 286px);
  align-items: center;
  gap: 12px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(241, 245, 249, 0.7);
  border: 0;
}

.khromafy-v2 .section-control > span {
  padding-left: 8px;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.khromafy-v2 .section-control .scale-view-select {
  min-width: 0;
}

.khromafy-v2 .section-control select {
  min-height: 38px;
  border-radius: 8px;
  border: 0;
  background-color: #ffffff;
  color: #0f172a;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(2, 6, 23, 0.05),
              inset 0 0 0 1px rgba(226, 232, 240, 0.8);
  padding: 0 28px 0 12px;
}

.khromafy-v2 .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.khromafy-v2 h1,
.khromafy-v2 h2,
.khromafy-v2 h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.khromafy-v2 h1,
.khromafy-v2 h2 {
  font-size: 1.15rem;
  line-height: 1.2;
}

.khromafy-v2 .panel-heading h2 {
  font-size: 1.35rem;
}

.khromafy-v2 .panel-heading p {
  max-width: 680px;
  margin-top: 6px;
  color: #64748b;
  font-size: 0.85rem;
  line-height: 1.5;
}

.khromafy-v2 .base-editor {
  grid-template-columns: 130px 1fr;
  gap: 20px;
}

.khromafy-v2 .color-canvas,
.khromafy-v2 .tone-chip,
.khromafy-v2 .harmony-chip,
.khromafy-v2 .system-swatch,
.khromafy-v2 .support-chip,
.khromafy-v2 .gradient-preview,
.khromafy-v2 .type-specimen,
.khromafy-v2 .mini-ui,
.khromafy-v2 .option-preview {
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06),
              0 8px 20px -4px rgba(15, 23, 42, 0.05);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.khromafy-v2 .tonal-scale {
  gap: 16px;
}

.khromafy-v2 .system-layout {
  gap: 20px;
}

.khromafy-v2 .system-roles {
  display: contents;
}

.khromafy-v2 .system-role > span {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 6px;
}

.khromafy-v2 .support-bank,
.khromafy-v2 .palette-source-tabs {
  border: 0;
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.5);
}

.khromafy-v2 .support-bank {
  display: contents;
}

.khromafy-v2 .palette-source-layout {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
  gap: 24px;
}

.khromafy-v2 .palette-source-tabs {
  padding: 16px;
  gap: 16px;
}

.khromafy-v2 .palette-source-group > span {
  color: #475569;
  font-weight: 700;
}

.khromafy-v2 .gradient-board,
.khromafy-v2 .gradient-type-showcase,
.khromafy-v2 .title-gradient-showcase,
.khromafy-v2 .icon-gradient-showcase,
.khromafy-v2 .option-grid,
.khromafy-v2 .output-grid {
  gap: 20px;
}

.khromafy-v2 .icon-gradient-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.khromafy-v2 .icon-gradient-card {
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: stretch;
  gap: 24px;
  min-height: 290px;
  padding: 24px;
  border-radius: 18px;
  background: var(--icon-gradient-bg);
  color: var(--icon-gradient-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25),
              0 10px 25px -5px rgba(15, 23, 42, 0.08);
}

.khromafy-v2 .icon-gradient-symbol {
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: center;
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--icon-gradient-ink), transparent 88%);
  color: var(--icon-gradient-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--icon-gradient-ink), transparent 75%),
              0 10px 24px rgba(2, 6, 23, 0.08);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.khromafy-v2 .icon-gradient-card:hover .icon-gradient-symbol {
  transform: scale(1.1) rotate(5deg);
}

.khromafy-v2 .icon-gradient-symbol svg {
  width: 44%;
  height: 44%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.khromafy-v2 .icon-gradient-card span {
  display: block;
  margin-bottom: 8px;
  color: var(--icon-gradient-muted);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.khromafy-v2 .icon-gradient-card h3 {
  margin: 0;
  color: var(--icon-gradient-ink);
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.khromafy-v2 .icon-gradient-card p {
  margin: 10px 0 0;
  color: var(--icon-gradient-muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.khromafy-v2 .gradient-module,
.khromafy-v2 .type-pair,
.khromafy-v2 .ui-token,
.khromafy-v2 .option-card,
.khromafy-v2 .output-grid button {
  border: 0;
  background: #ffffff;
  border-radius: 14px;
}

.khromafy-v2 .option-card:hover {
  transform: translateY(-3px);
  border-color: #cbd5e1;
  box-shadow: 0 12px 24px -10px rgba(15, 23, 42, 0.1);
}

.khromafy-v2 .typography-showcase,
.khromafy-v2 .ui-showcase {
  gap: 24px;
}

.khromafy-v2 .output-grid button {
  min-height: 90px;
  padding: 20px;
}

.khromafy-v2 .editor-card {
  padding: 24px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ui-accent), white 94%) 0%, #ffffff 50%);
  border: 0;
  box-shadow: 0 20px 40px -15px color-mix(in srgb, var(--ui-accent), transparent 85%),
              0 8px 20px rgba(15, 23, 42, 0.03);
}

.khromafy-v2 .editor-card .section-title {
  padding-bottom: 18px;
}

.khromafy-v2 .editor-card h1 {
  font-size: 1.3rem;
  font-family: var(--font-display);
}

.khromafy-v2 .editor-card .base-editor {
  grid-template-columns: 140px 1fr;
  align-items: center;
  margin-top: 20px;
}

.khromafy-v2 .editor-card .color-canvas {
  border-radius: 16px;
  border: 2px solid #ffffff;
  box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--accent), transparent 50%),
              inset 0 0 0 1px rgba(15, 23, 42, 0.1);
}

.khromafy-v2 .editor-card .hex-input,
.khromafy-v2 .editor-card .color-value-input {
  font-size: 1.1rem;
  font-family: var(--font-display);
  font-weight: 700;
}

.khromafy-v2 .editor-card .color-value-input[data-format="hex"] {
  font-size: 1.45rem;
}

.khromafy-v2 .tuning-card,
.khromafy-v2 .compact-card {
  box-shadow: var(--shadow);
}

.khromafy-v2 .tuning-card .section-title,
.khromafy-v2 .compact-card .section-title {
  padding-bottom: 14px;
}

.khromafy-v2 .compact-card dl {
  display: grid;
  gap: 0;
  margin-top: 0;
}

.khromafy-v2 .slider-stack {
  gap: 20px;
  margin-top: 20px;
}

.khromafy-v2 .slider-row {
  grid-template-columns: 96px minmax(0, 1fr) 48px;
  gap: 12px;
}

.khromafy-v2 .slider-row span,
.khromafy-v2 .palette-source-group > span {
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  font-weight: 700;
}

.khromafy-v2 .stage-system .panel-heading {
  padding-bottom: 24px;
}

.khromafy-v2 .stage-system .panel-heading h2 {
  font-size: 1.4rem;
}

.khromafy-v2 .stage-system .palette-source-layout {
  grid-template-columns: 1fr;
}

.khromafy-v2 .stage-system .palette-source-tabs {
  grid-template-columns: minmax(300px, max-content) minmax(360px, 1fr);
  gap: 28px;
  align-items: end;
  padding: 18px 20px;
}

.khromafy-v2 .stage-system .palette-source-select select {
  min-height: 54px;
}

.khromafy-v2 .stage-system .palette-source-block h2 {
  font-size: 1.25rem;
}

.khromafy-v2 .stage-system .system-layout {
  gap: 20px;
}

.khromafy-v2 .stage-system .system-swatch {
  min-height: 0;
  padding: 10px;
  border-radius: 14px;
}

.khromafy-v2 .stage-system #supportRail {
  display: contents;
}

.khromafy-v2 .stage-system .system-swatch span {
  font-size: 0.55rem;
  letter-spacing: 0.04em;
}

.khromafy-v2 .stage-system .system-swatch code {
  font-size: 0.66rem;
}

.khromafy-v2 .stage-system .system-swatch strong {
  font-size: 0.68rem;
}

@media (max-width: 900px) {
  .khromafy-v2 .stage-system .palette-source-tabs {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}

@media (max-width: 620px) {
  .khromafy-v2 .stage-system .palette-source-tabs {
    padding: 16px;
  }

  .khromafy-v2 .stage-system .palette-source-group:first-child > div {
    grid-template-columns: repeat(3, 48px);
  }
}

@media (max-width: 1280px) {
  .khromafy-v2 .system-roles {
    display: contents;
  }

  .khromafy-v2 .stage-system #supportRail {
    display: contents;
  }
}

@media (max-width: 620px) {
  .stage-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    top: 86px;
  }

  .stage-tab-button {
    min-height: 52px;
    font-size: 0.82rem;
  }

  .harmony-overview {
    grid-template-columns: 1fr;
  }

  .harmony-overview .harmony-scale,
  .harmony-overview .harmony-grouped {
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  }

  .khromafy-v2 .system-layout {
    grid-template-columns: repeat(auto-fit, minmax(81px, 101px));
  }

  .khromafy-v2 .system-roles,
  .khromafy-v2 .stage-system #supportRail {
    display: contents;
  }
}

.khromafy-v2 .stage-gradient .gradient-board {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.khromafy-v2 .stage-gradient .gradient-module {
  display: grid;
  align-content: start;
  padding: 18px;
  border-radius: 16px;
}

.khromafy-v2 .stage-gradient .gradient-preview {
  aspect-ratio: 16 / 9;
  border-radius: 12px;
}

.khromafy-v2 .stage-gradient .is-video-vertical .gradient-preview {
  aspect-ratio: 9 / 16;
}

.khromafy-v2 .stage-explore,
.khromafy-v2 .stage-gradient,
.khromafy-v2 .stage-source {
  box-shadow: var(--shadow);
}

.khromafy-v2 .stage-examples,
.khromafy-v2 .stage-type,
.khromafy-v2 .stage-title,
.khromafy-v2 .stage-ui,
.khromafy-v2 .stage-options,
.khromafy-v2 .stage-icons,
.khromafy-v2 .stage-output {
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.04);
}

.khromafy-v2 .stage-examples .panel-heading h2,
.khromafy-v2 .stage-type .panel-heading h2,
.khromafy-v2 .stage-title .panel-heading h2,
.khromafy-v2 .stage-ui .panel-heading h2,
.khromafy-v2 .stage-options .panel-heading h2,
.khromafy-v2 .stage-icons .panel-heading h2,
.khromafy-v2 .stage-output .panel-heading h2 {
  font-size: 1.25rem;
}

.khromafy-v2 .section-kicker {
  margin-bottom: 6px;
  font-size: 0.65rem;
}

.khromafy-v2 h1,
.khromafy-v2 h2,
.khromafy-v2 h3 {
  letter-spacing: -0.02em;
}

.khromafy-v2 h1,
.khromafy-v2 h2 {
  font-weight: 700;
}

/* Swatches Hover & Active Effects */
.khromafy-v2 .tone-chip:hover,
.khromafy-v2 .harmony-chip:hover,
.khromafy-v2 .system-swatch:hover,
.khromafy-v2 .support-chip:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05),
              0 14px 28px -6px rgba(15, 23, 42, 0.08);
  outline: none;
}

.khromafy-v2 .tone-chip.is-anchor,
.khromafy-v2 .harmony-chip.is-anchor,
.khromafy-v2 .system-swatch.is-anchor {
  box-shadow: inset 0 0 0 2px #ffffff,
              0 0 0 3px var(--accent),
              0 12px 28px -5px color-mix(in srgb, var(--accent), transparent 60%);
  transform: translateY(-2px);
}

/* Sleek inputs and range sliders styling */
.khromafy-v2 input[type="range"] {
  appearance: none;
  background: #e2e8f0;
  height: 8px;
  border-radius: 99px;
  outline: none;
  transition: background 0.2s ease;
}

.khromafy-v2 input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--accent);
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.15);
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), background 0.15s ease;
}

.khromafy-v2 input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  background: #f8fafc;
}

.khromafy-v2 input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(0.95);
  background: var(--accent);
  border-color: #ffffff;
}

.khromafy-v2 .rgb-slider {
  box-shadow: none;
}

/* Modern Mockups Refining */
.khromafy-v2 .mini-ui {
  border-radius: 16px;
  overflow: hidden;
  padding: 16px;
  border: 0;
}

.khromafy-v2 .mini-ui-top {
  border-bottom: 1px solid rgba(226, 232, 240, 0.5);
  padding-bottom: 12px;
}

.khromafy-v2 .mini-ui-nav {
  gap: 12px;
  margin: 12px 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.3);
  padding-bottom: 8px;
}

.khromafy-v2 .mini-ui-nav span {
  font-weight: 600;
  font-size: 0.72rem;
}

.khromafy-v2 .mini-ui-card {
  border-radius: 12px;
  padding: 16px;
  border: 0;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02);
}

.khromafy-v2 .mini-ui-card h3 {
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.khromafy-v2 .mini-ui-actions button {
  min-height: 36px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0 14px;
}

.khromafy-v2 .mini-ui-actions button:first-child {
  background: var(--ui-primary);
  color: var(--ui-primary-ink);
  box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--ui-primary), transparent 60%);
}

.khromafy-v2 .mini-ui-actions button:last-child {
  border: 1px solid rgba(226, 232, 240, 0.8);
  background: #ffffff;
  color: var(--ui-ink);
}

/* Business and Packaging Print Mockups */
.khromafy-v2 .print-mockup-card {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  border: 0;
}

.khromafy-v2 .print-card-face,
.khromafy-v2 .package-label-face {
  border-radius: 12px;
  border: 1px dashed rgba(100, 116, 139, 0.4);
  box-shadow: 0 10px 20px -8px rgba(15, 23, 42, 0.05);
}

.khromafy-v2 .registration-cross {
  color: rgba(100, 116, 139, 0.5);
}

.khromafy-v2 .cut-guide {
  background: rgba(100, 116, 139, 0.25);
  border: 0;
}

.khromafy-v2.is-dark .brand {
  color: #f2f2f3;
}

.khromafy-v2.is-dark .theme-switch {
  border-color: #3a3a40;
  background: #19191c;
  color: #ededee;
}

.khromafy-v2.is-dark .theme-switch:hover {
  background: #222226;
  color: #ededee;
  border-color: #3a3a40;
}

.khromafy-v2.is-dark .theme-switch-track {
  background: color-mix(in srgb, var(--ui-accent), #111111 34%);
}

.khromafy-v2.is-dark .theme-switch-thumb {
  transform: translateX(18px);
  background: #f2f2f3;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.khromafy-v2.is-dark .editor-card,
.khromafy-v2.is-dark .tuning-card,
.khromafy-v2.is-dark .compact-card {
  background: #141416;
}

.khromafy-v2.is-dark .stage-system {
  --stage: #10b981;
}

.khromafy-v2.is-dark .section-control {
  background: #18181b;
  border: 0;
}

.khromafy-v2.is-dark .section-control > span {
  color: #a7a7ad;
}

.khromafy-v2.is-dark .section-control select {
  background-color: #121214;
  color: #f2f2f3;
  box-shadow: inset 0 0 0 1px #29292d;
}

.khromafy-v2.is-dark .section-title,
.khromafy-v2.is-dark .panel-heading {
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

.khromafy-v2.is-dark h1,
.khromafy-v2.is-dark h2,
.khromafy-v2.is-dark h3,
.khromafy-v2.is-dark .type-pair strong,
.khromafy-v2.is-dark .ui-token strong,
.khromafy-v2.is-dark .option-card strong,
.khromafy-v2.is-dark .output-grid strong,
.khromafy-v2.is-dark .brand strong {
  color: #f2f2f3;
}

.khromafy-v2.is-dark p,
.khromafy-v2.is-dark .panel-heading p,
.khromafy-v2.is-dark .type-pair code,
.khromafy-v2.is-dark .ui-token code,
.khromafy-v2.is-dark .option-card code,
.khromafy-v2.is-dark .output-grid span,
.khromafy-v2.is-dark .system-role > span {
  color: #a7a7ad;
}

.khromafy-v2.is-dark .system-role:first-child::before,
.khromafy-v2.is-dark .support-chip:first-child::before {
  color: #cbd5e1;
}

.khromafy-v2.is-dark .section-gamut-note {
  color: #f8d08a;
}

.khromafy-v2.is-dark .section-gamut-label {
  background: rgba(245, 158, 11, 0.16);
}

.khromafy-v2.is-dark .section-gamut-note p {
  color: #f8d08a;
}

.khromafy-v2.is-dark .application-gamut-note {
  border-color: rgba(245, 158, 11, 0.34);
  background: rgba(245, 158, 11, 0.1);
  color: #f8d08a;
}

@media (max-width: 640px) {
  .section-gamut-note,
  .application-gamut-note {
    align-items: flex-start;
    flex-direction: column;
  }
}

.khromafy-v2.is-dark .stage-tabs {
  background: rgba(15, 23, 42, 0.84);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.32),
    inset 0 0 0 1px rgba(71, 85, 105, 0.62);
}

.khromafy-v2.is-dark .stage-tab-button {
  color: #94a3b8;
}

.khromafy-v2.is-dark .stage-tab-button:hover,
.khromafy-v2.is-dark .stage-tab-button.is-active {
  color: #8b85ff;
}

.khromafy-v2.is-dark .stage-tab-button::after {
  background: #8b85ff;
}

.khromafy-v2.is-dark .base-values input,
.khromafy-v2.is-dark .channel-field input,
.khromafy-v2.is-dark .format-fields input,
.khromafy-v2.is-dark .format-tabs,
.khromafy-v2.is-dark .palette-source-select select,
.khromafy-v2.is-dark .palette-library-tabs {
  border-color: #29292d;
  background-color: #121214;
  color: #f2f2f3;
}

.khromafy-v2.is-dark .format-tabs .is-active,
.khromafy-v2.is-dark .format-tabs button:hover,
.khromafy-v2.is-dark .palette-library-tabs button.is-active,
.khromafy-v2.is-dark .output-grid button:hover,
.khromafy-v2.is-dark .secondary-action:hover,
.khromafy-v2.is-dark .palette-library-item > button:first-child:hover {
  background: #1e1e22;
}

.khromafy-v2.is-dark .advanced-palette-settings summary {
  background: linear-gradient(180deg, #18181b 0%, #121214 100%),
              color-mix(in srgb, var(--ui-accent), #121214 80%);
  box-shadow: inset 0 0 0 1px #29292d;
}

.khromafy-v2.is-dark .advanced-palette-settings summary::after {
  background: #1e1e22;
  color: var(--ui-accent);
}

.khromafy-v2.is-dark .advanced-palette-settings summary span {
  color: #f2f2f3;
}

.khromafy-v2.is-dark .advanced-palette-settings summary small {
  color: #a7a7ad;
}

.khromafy-v2.is-dark .palette-library-saved {
  background: linear-gradient(135deg, color-mix(in srgb, var(--ui-accent), #18181b 75%), #121214 80%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-accent), transparent 80%);
}

.khromafy-v2.is-dark .palette-library-history {
  background: #18181b;
}

.khromafy-v2.is-dark .palette-library-tabs {
  background: #18181b;
}

.khromafy-v2.is-dark .palette-library-tabs button {
  color: #a7a7ad;
}

.khromafy-v2.is-dark .palette-library-tabs button.is-active {
  background: #222226;
  color: #f2f2f3;
}

.khromafy-v2.is-dark .palette-library-remove:hover {
  background: #351820;
  color: #ff8faa;
}

.khromafy-v2.is-dark .palette-source-tabs,
.khromafy-v2.is-dark .support-bank {
  border: 0;
  background: #18181b;
}

.khromafy-v2.is-dark .palette-source-tabs button {
  color: #cbd5e1;
}

.khromafy-v2.is-dark .palette-source-tabs button:hover {
  background: #222226;
}

.khromafy-v2.is-dark .palette-source-tabs button.is-active {
  background: var(--ui-accent);
  color: #ffffff;
}

.khromafy-v2.is-dark .output-grid button {
  border: 0;
  background: #18181b;
}

.khromafy-v2.is-dark .output-grid button::after {
  background: color-mix(in srgb, var(--ui-accent), #121214 40%);
  color: #ffffff;
}

.khromafy-v2.is-dark .export-modal-shell {
  border-color: #29292d;
  background: #121214;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.khromafy-v2.is-dark .export-modal-heading {
  box-shadow: inset 0 -1px 0 #29292d;
}

.khromafy-v2.is-dark .modal-close {
  border-color: #29292d;
  background: #18181b;
  color: #f2f2f3;
}

.khromafy-v2.is-dark .option-preview,
.khromafy-v2.is-dark .logo-lockup {
  color: var(--option-ink);
}

.khromafy-v2.is-dark .print-mockup-card {
  background: #18181b;
  border: 0;
}

.khromafy-v2.is-dark .print-card-face,
.khromafy-v2.is-dark .package-label-face {
  border-color: #29292d;
}

.khromafy-v2.is-dark .registration-cross {
  color: rgba(148, 163, 184, 0.4);
}

.khromafy-v2.is-dark .cut-guide {
  background: rgba(148, 163, 184, 0.2);
}

.khromafy-v2.is-dark .gradient-intent {
  background: #1e293b;
  color: #e2e8f0;
}

.khromafy-v2.is-dark .gradient-module,
.khromafy-v2.is-dark .type-pair,
.khromafy-v2.is-dark .ui-token,
.khromafy-v2.is-dark .option-card,
.khromafy-v2.is-dark .output-grid button {
  border: 0;
  background: #18181b;
}

.khromafy-v2.is-dark .mini-ui {
  border: 0;
}

.khromafy-v2.is-dark .mini-ui-top {
  border-bottom-color: #29292d;
}

.khromafy-v2.is-dark .mini-ui-nav {
  border-bottom-color: #29292d;
}

.khromafy-v2.is-dark .mini-ui-card {
  border-color: #29292d;
  background: #121214;
}

.khromafy-v2.is-dark .mini-ui-actions button:last-child {
  border-color: #29292d;
  background: #18181b;
  color: #f2f2f3;
}

.khromafy-v2.is-dark .ui-accessibility-alert {
  background: color-mix(in srgb, #f59e0b, #121214 75%);
  color: #ffedd5;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #f59e0b, transparent 60%);
}

.khromafy-v2.is-dark .feedback-toast {
  border-color: #29292d;
  background: #18181b;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
}

/* Micro-animations and tactile range sliders */
.khromafy-v2.is-dark input[type="range"] {
  background: #29292d;
}

.khromafy-v2.is-dark input[type="range"]::-webkit-slider-thumb {
  border-color: var(--accent);
  background: #121214;
}

.khromafy-v2.is-dark input[type="range"]::-webkit-slider-thumb:hover {
  background: #18181b;
}

.khromafy-v2.is-dark .tone-chip:hover,
.khromafy-v2.is-dark .harmony-chip:hover,
.khromafy-v2.is-dark .system-swatch:hover,
.khromafy-v2.is-dark .support-chip:hover {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}

.khromafy-v2.is-dark .tone-chip.is-anchor,
.khromafy-v2.is-dark .harmony-chip.is-anchor,
.khromafy-v2.is-dark .system-swatch.is-anchor {
  box-shadow: inset 0 0 0 2px #121214,
              0 0 0 3px var(--accent),
              0 14px 32px -4px color-mix(in srgb, var(--accent), transparent 50%);
}

.khromafy-v2.is-dark .gradient-type-card h3,
.khromafy-v2.is-dark .gradient-type-footer strong {
  color: var(--gradient-type-ink);
}

.khromafy-v2.is-dark .gradient-type-card p,
.khromafy-v2.is-dark .gradient-type-footer code {
  color: var(--gradient-type-muted);
}

.khromafy-v2.is-dark .icon-gradient-card,
.khromafy-v2.is-dark .icon-gradient-card h3,
.khromafy-v2.is-dark .icon-gradient-symbol {
  color: var(--icon-gradient-ink);
}

.khromafy-v2.is-dark .icon-gradient-card span,
.khromafy-v2.is-dark .icon-gradient-card p {
  color: var(--icon-gradient-muted);
}

.khromafy-v2.is-dark .type-specimen,
.khromafy-v2.is-dark .type-display,
.khromafy-v2.is-dark .type-pair-preview,
.khromafy-v2.is-dark .title-gradient-card {
  color: var(--type-ink, var(--pair-ink));
}

.khromafy-v2.is-dark .type-display span {
  color: var(--type-accent);
}

.khromafy-v2.is-dark .type-body,
.khromafy-v2.is-dark .type-kicker {
  color: var(--type-muted);
}

.khromafy-v2.is-dark .mini-ui,
.khromafy-v2.is-dark .mini-ui-card,
.khromafy-v2.is-dark .mini-ui-card h3,
.khromafy-v2.is-dark .mini-ui-brand,
.khromafy-v2.is-dark .mini-ui-user {
  color: var(--ui-ink);
}

.khromafy-v2.is-dark .mini-ui-card h3 span {
  color: var(--ui-support);
}

.khromafy-v2.is-dark .mini-ui-card p,
.khromafy-v2.is-dark .mini-ui-nav span {
  color: var(--ui-muted);
}

.khromafy-v2.is-dark .mini-ui-nav span:hover {
  color: var(--ui-ink);
}

@media (max-width: 620px) {
  .khromafy-v2 .topbar-actions {
    gap: 10px;
  }

  .khromafy-v2 .theme-switch-label {
    display: none;
  }
}

.panel-section,
.work-panel,
.khromafy-v2 .editor-card,
.khromafy-v2 .tuning-card,
.khromafy-v2 .compact-card {
  background: rgba(255, 255, 255, 0.5);
}

.khromafy-v2 .palette-source-tabs {
  background: rgba(255, 255, 255, 0.5);
}

/* --- RESTORE DYNAMIC TYPOGRAPHY AND GRADIENT FUNCTIONALITIES --- */

/* 1. Gradient Titles Showcase (.title-gradient-card h3) */
.khromafy-v2 .title-gradient-card h3,
.khromafy-v2.is-dark .title-gradient-card h3 {
  color: transparent !important;
  background: var(--title-gradient) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  display: block !important;
}

/* 2. Gradient Typography Showcase (.gradient-type-card h3) */
.khromafy-v2 .gradient-type-card h3,
.khromafy-v2.is-dark .gradient-type-card h3 {
  color: var(--gradient-type-ink) !important;
}

/* 3. Mini UI Mockup Showcase (.mini-ui-card h3) */
.khromafy-v2 .mini-ui-card h3,
.khromafy-v2.is-dark .mini-ui-card h3 {
  color: var(--ui-ink) !important;
}

/* 4. Product Packaging Label (.package-label-face h3) */
.khromafy-v2 .package-label-face h3,
.khromafy-v2.is-dark .package-label-face h3 {
  color: var(--print-deep) !important;
}

/* Explorar se organiza como modulos independientes, no como una sola tarjeta. */
.khromafy-v2 .stage-explore {
  display: grid;
  gap: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.khromafy-v2 .stage-explore:hover {
  box-shadow: none;
}

.khromafy-v2 .stage-explore .panel-heading,
.khromafy-v2 .stage-explore .explore-scale-card,
.khromafy-v2 .stage-explore .harmony-row {
  border: 1px solid rgba(226, 232, 240, 0.84);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.055);
  backdrop-filter: blur(14px);
}

.khromafy-v2 .stage-explore .panel-heading {
  margin-bottom: 0;
  padding: 28px 30px;
  border-radius: var(--radius-panel);
  box-shadow:
    0 16px 34px rgba(15, 23, 42, 0.045),
    inset 0 -1px 0 rgba(226, 232, 240, 0.72);
}

.khromafy-v2 .stage-explore .panel-heading > div:first-child {
  display: grid;
  gap: 18px;
  width: 100%;
}

.khromafy-v2 .stage-explore .explore-suggestion-card {
  display: grid;
  gap: 16px;
  max-width: 860px;
  padding-top: 8px;
}

.khromafy-v2 .stage-explore .explore-suggestion-palette {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 104px));
  gap: 12px;
}

.khromafy-v2 .stage-explore .suggestion-chip {
  position: relative;
  display: grid;
  align-content: space-between;
  aspect-ratio: 1;
  width: 100%;
  min-width: 0;
  padding: 11px;
  border: 0;
  border-radius: 14px;
  color: var(--chip-ink);
  box-shadow:
    inset 0 0 0 1px rgba(17, 24, 38, 0.06),
    0 10px 22px rgba(15, 23, 42, 0.06);
  text-align: left;
}

.khromafy-v2 .stage-explore .suggestion-chip span {
  color: color-mix(in srgb, var(--chip-ink), transparent 24%);
  font-size: 0.58rem;
  font-weight: 900;
  text-transform: uppercase;
}

.khromafy-v2 .stage-explore .suggestion-chip code {
  color: var(--chip-ink);
  font-size: 0.68rem;
  font-weight: 900;
}

.khromafy-v2 .stage-explore .explore-module-icon-star svg {
  width: 23px;
  height: 23px;
  fill: currentColor;
  stroke: currentColor;
}

.mode-icon-star {
  fill: currentColor;
}

.khromafy-v2 .stage-explore .explore-scale-card {
  display: grid;
  gap: 22px;
  padding: 28px;
  border-radius: var(--radius-panel);
}

.khromafy-v2 .stage-explore .explore-module-head {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.khromafy-v2 .stage-explore .explore-module-head h3 {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.15;
}

.khromafy-v2 .stage-explore .explore-module-head span:not(.explore-module-icon) {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
}

.khromafy-v2 .stage-explore .explore-module-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ui-accent), white 90%);
  color: var(--ui-accent);
}

.khromafy-v2 .stage-explore .explore-module-icon .mode-icon {
  width: 25px;
  height: 25px;
  stroke: currentColor;
}

.khromafy-v2 .stage-explore .explore-module-icon .mode-dot {
  fill: currentColor;
}

.khromafy-v2 .stage-explore .harmony-overview {
  gap: 26px;
  margin-top: 0;
}

.khromafy-v2 .stage-explore .harmony-row {
  padding: 26px;
  border-radius: var(--radius-panel);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(248, 250, 252, 0.82));
}

.khromafy-v2 .stage-explore .harmony-row:hover {
  border-color: rgba(203, 213, 225, 0.96);
  box-shadow: 0 22px 52px rgba(15, 23, 42, 0.075);
}

.khromafy-v2 .stage-explore .harmony-head {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.72);
}

.khromafy-v2 .stage-explore .harmony-grouped {
  padding-top: 2px;
}

@media (max-width: 620px) {
  .khromafy-v2 .stage-explore {
    gap: 18px;
  }

.khromafy-v2 .stage-explore .panel-heading,
.khromafy-v2 .stage-explore .explore-scale-card,
.khromafy-v2 .stage-explore .harmony-row {
  padding: 20px;
}
}

.khromafy-v2.is-dark .stage-explore {
  background: transparent;
}

.khromafy-v2.is-dark .stage-explore .panel-heading,
.khromafy-v2.is-dark .stage-explore .explore-scale-card,
.khromafy-v2.is-dark .stage-explore .harmony-row {
  border-color: rgba(63, 63, 70, 0.86);
  background: rgba(20, 20, 22, 0.82);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
}

.khromafy-v2.is-dark .stage-explore .explore-module-icon {
  background: color-mix(in srgb, var(--ui-accent), #111111 76%);
}

.khromafy-v2.is-dark .stage-explore .harmony-head {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* ==========================================
   NUEVOS ESTILOS: PANEL DE APLICACIONES
   ========================================== */

.app-dashboard-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  align-items: start;
  margin-top: 24px;
}

.app-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: var(--radius-panel);
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: var(--shadow-tight);
}

.app-sidebar-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 700;
  text-align: left;
  transition: all 220ms ease;
  cursor: pointer;
}

.app-sidebar-tab svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-width: 2.2;
}

.app-sidebar-tab:hover {
  background: rgba(255, 255, 255, 0.8);
  color: var(--accent);
  transform: translateX(4px);
}

.app-sidebar-tab.is-active {
  background: #ffffff;
  border-color: rgba(226, 232, 240, 0.8);
  color: var(--accent);
  box-shadow: 
    0 8px 20px -6px color-mix(in srgb, var(--accent), transparent 82%),
    0 1px 3px rgba(0, 0, 0, 0.02);
}

.app-viewer-panel {
  min-height: 450px;
  padding: 30px;
  border-radius: var(--radius-panel);
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: var(--shadow-premium);
  animation: fadeInApp 300ms ease;
}

@keyframes fadeInApp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.app-impact-kit {
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) minmax(320px, 1.05fr);
  gap: 24px;
  align-items: stretch;
  margin-bottom: 26px;
  padding: 22px;
  border-radius: var(--radius-panel);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent), white 91%), #ffffff 58%);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.055);
}

.app-impact-copy {
  display: grid;
  align-content: center;
  gap: 10px;
}

.app-impact-kicker {
  color: var(--accent);
  font-size: 0.66rem;
  font-weight: 950;
  text-transform: uppercase;
}

.app-impact-copy h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.28rem;
  line-height: 1.12;
}

.app-impact-copy p {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.app-impact-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.app-impact-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #475569;
  font-size: 0.68rem;
  font-weight: 850;
}

.app-impact-assets {
  display: grid;
  gap: 12px;
}

.app-token-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(58px, 1fr));
  gap: 10px;
}

.app-token-chip {
  position: relative;
  display: grid;
  align-content: space-between;
  min-width: 0;
  aspect-ratio: 1;
  padding: 10px;
  border: 0;
  border-radius: 14px;
  background: var(--token);
  color: var(--token-ink);
  text-align: left;
  box-shadow:
    inset 0 0 0 1px rgba(17, 24, 38, 0.06),
    0 10px 22px rgba(15, 23, 42, 0.075);
}

.app-token-chip .gamut-warning {
  top: 8px;
  right: 8px;
  transform: scale(0.82);
  transform-origin: right top;
}

.ui-contrast-explanation {
  margin: -2px 0 14px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.app-token-chip span {
  color: color-mix(in srgb, var(--token-ink), transparent 28%);
  font-size: 0.56rem;
  font-weight: 950;
  text-transform: uppercase;
}

.app-token-chip code {
  color: var(--token-ink);
  font-size: 0.62rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.app-impact-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.app-impact-metrics span {
  display: grid;
  gap: 2px;
  min-height: 56px;
  padding: 10px 12px;
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.76);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.app-impact-metrics strong {
  color: var(--ink);
  font-size: 0.94rem;
}

.app-rich-section {
  display: grid;
  gap: 22px;
  margin: 0 0 28px;
}

.app-rich-section--gradient-text,
.app-rich-section--title-gradient,
.app-rich-section--surfaces {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-gradient-message,
.app-gradient-title-card,
.app-gradient-surface {
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-panel);
  box-shadow:
    0 22px 44px -30px rgba(15, 23, 42, 0.44),
    inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.app-gradient-message {
  display: grid;
  align-content: space-between;
  min-height: 315px;
  padding: 28px;
  background: var(--message-bg);
  color: var(--message-ink);
}

.app-gradient-message span,
.app-gradient-surface span,
.app-gradient-title-card span {
  width: fit-content;
  max-width: 100%;
  padding: 8px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor, transparent 86%);
  color: currentColor;
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.app-gradient-message h3 {
  max-width: 13ch;
  margin: 28px 0 18px;
  color: var(--message-ink);
  font-family: var(--font-display);
  font-size: clamp(2rem, 2.6vw, 3rem);
  line-height: 0.98;
}

.app-gradient-message p {
  margin: 0;
  color: var(--message-muted);
  font-size: 0.9rem;
  line-height: 1.42;
}

.app-gradient-title-card {
  display: grid;
  align-content: space-between;
  min-height: 255px;
  padding: 28px;
  background: var(--title-bg);
  color: var(--title-ink);
}

.app-gradient-title-card h3 {
  margin: 26px 0 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 3.5rem);
  line-height: 0.98;
  color: transparent;
  background: var(--title-gradient);
  -webkit-background-clip: text;
  background-clip: text;
}

.app-gradient-surface {
  display: grid;
  align-content: space-between;
  min-height: 280px;
  padding: 24px;
  background: var(--surface-bg);
  color: var(--surface-ink);
}

.app-gradient-surface strong {
  max-width: 14ch;
  color: var(--surface-ink);
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2.4vw, 2.8rem);
  line-height: 1;
}

.app-rich-section--motion {
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.75fr);
}

.app-motion-hero {
  display: grid;
  align-content: space-between;
  min-height: 390px;
  padding: 28px;
  border-radius: var(--radius-panel);
  background: var(--motion-bg);
  color: var(--motion-ink);
  overflow: hidden;
  box-shadow: 0 22px 44px -30px rgba(15, 23, 42, 0.5);
}

.app-motion-frame {
  display: grid;
  gap: 14px;
  max-width: 520px;
}

.app-motion-frame span,
.app-motion-lower small {
  width: fit-content;
  padding: 7px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--motion-ink), transparent 84%);
  font-size: 0.64rem;
  font-weight: 950;
}

.app-motion-frame strong {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 3.7vw, 4rem);
  line-height: 0.95;
}

.app-motion-frame p {
  margin: 0;
  max-width: 360px;
  color: color-mix(in srgb, var(--motion-ink), transparent 24%);
}

.app-motion-lower {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--motion-ink), transparent 88%);
}

.app-motion-lower b {
  width: 8px;
  height: 42px;
  border-radius: 999px;
  background: var(--motion-accent);
}

.app-motion-lower strong,
.app-motion-lower span {
  display: block;
  color: var(--motion-ink);
}

.app-motion-lower span {
  margin-top: 3px;
  color: color-mix(in srgb, var(--motion-ink), transparent 32%);
  font-size: 0.74rem;
}

.app-motion-stack {
  display: grid;
  gap: 14px;
}

.app-motion-stack div {
  display: grid;
  align-content: space-between;
  min-height: 120px;
  padding: 18px;
  border-radius: var(--radius-card);
  background: var(--light);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--deep), transparent 90%);
}

.app-motion-stack span {
  color: var(--deep);
  font-size: 0.72rem;
  font-weight: 950;
}

.app-motion-stack b {
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--main), var(--support));
}

.app-motion-stack div:nth-child(2) b { background: var(--deep); }
.app-motion-stack div:nth-child(3) b { background: linear-gradient(90deg, var(--soft), var(--main)); }

.app-rich-section--editorial {
  grid-template-columns: minmax(240px, 0.75fr) minmax(320px, 1.25fr) minmax(220px, 0.7fr);
}

.app-editorial-cover,
.app-editorial-spread,
.app-editorial-slide {
  min-height: 360px;
  padding: 26px;
  border-radius: var(--radius-panel);
  overflow: hidden;
  box-shadow: 0 22px 44px -30px rgba(15, 23, 42, 0.42);
}

.app-editorial-cover {
  display: grid;
  align-content: space-between;
  background: var(--light);
  color: var(--deep);
}

.app-editorial-cover span,
.app-editorial-cover p {
  color: color-mix(in srgb, var(--deep), transparent 32%);
}

.app-editorial-cover h3 {
  max-width: 9ch;
  margin: 0;
  color: var(--deep);
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 3.2vw, 3.8rem);
  line-height: 0.96;
}

.app-editorial-spread {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 18px;
  background: var(--soft);
}

.app-editorial-spread > div {
  display: grid;
  align-content: space-between;
  min-width: 0;
}

.app-editorial-spread strong {
  color: var(--main);
  font-size: 3rem;
}

.app-editorial-spread h3 {
  margin: 0;
  color: var(--deep);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.3vw, 2.8rem);
}

.app-editorial-spread span,
.app-editorial-spread p,
.app-editorial-spread b {
  margin: 0;
  border-radius: 999px;
}

.app-editorial-spread span { height: 18px; background: var(--support); }
.app-editorial-spread p { height: 10px; background: color-mix(in srgb, var(--deep), transparent 80%); }
.app-editorial-spread b { height: 52px; background: var(--main); }

.app-editorial-slide {
  display: grid;
  align-content: center;
  gap: 14px;
  background: var(--deep);
}

.app-editorial-slide strong {
  color: var(--light);
  font-size: clamp(2.2rem, 3.8vw, 4.4rem);
}

.app-editorial-slide span,
.app-editorial-slide i {
  height: 14px;
  border-radius: 999px;
}

.app-editorial-slide span { background: var(--support); }
.app-editorial-slide i { background: var(--main); }
.app-editorial-slide i:nth-child(4) { width: 62%; background: var(--light); }

.app-rich-section--advertising {
  grid-template-columns: minmax(0, 1.2fr) minmax(180px, 0.55fr) minmax(240px, 0.8fr);
}

.app-ad-hero,
.app-ad-story,
.app-ad-carousel {
  min-height: 330px;
  padding: 24px;
  border-radius: var(--radius-panel);
  overflow: hidden;
  box-shadow: 0 22px 44px -30px rgba(15, 23, 42, 0.42);
}

.app-ad-hero {
  display: grid;
  align-content: space-between;
  background: linear-gradient(135deg, var(--deep), var(--main));
  color: var(--light);
}

.app-ad-hero h3 {
  max-width: 12ch;
  margin: 0;
  color: var(--light);
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.2vw, 3.8rem);
  line-height: 0.95;
}

.app-ad-hero span,
.app-ad-hero button,
.app-ad-story span,
.app-ad-story button {
  width: fit-content;
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  background: var(--support);
  color: var(--deep);
  font-weight: 950;
}

.app-ad-story {
  display: grid;
  align-content: space-between;
  justify-items: start;
  background: linear-gradient(180deg, var(--main), var(--deep));
  color: var(--main-ink);
}

.app-ad-story strong {
  color: var(--light);
  font-size: 3rem;
}

.app-ad-story i {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--support);
  justify-self: center;
}

.app-ad-carousel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: var(--light);
}

.app-ad-carousel span {
  display: grid;
  place-items: end start;
  padding: 12px;
  border-radius: 14px;
  background: var(--main);
  color: var(--main-ink);
  font-weight: 950;
}

.app-ad-carousel span:nth-child(2) { background: var(--support); color: var(--deep); }
.app-ad-carousel span:nth-child(3) { background: var(--deep); color: var(--light); }

.app-rich-section--symbols {
  grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.7fr) minmax(220px, 0.8fr);
}

.app-symbol-system,
.app-symbol-gradient,
.app-symbol-badges {
  min-height: 260px;
  padding: 24px;
  border-radius: var(--radius-panel);
  overflow: hidden;
  box-shadow: 0 22px 44px -30px rgba(15, 23, 42, 0.4);
}

.app-symbol-system {
  display: grid;
  align-content: space-between;
  background: var(--light);
}

.app-symbol-system div,
.app-symbol-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-content: center;
  justify-content: center;
}

.app-symbol-system span,
.app-symbol-badges span {
  display: grid;
  place-items: center;
  min-width: 52px;
  height: 52px;
  padding: 0 12px;
  border-radius: 16px;
  background: var(--main);
  color: var(--main-ink);
  font-weight: 950;
}

.app-symbol-system span:nth-child(2),
.app-symbol-badges span:nth-child(2) { background: var(--support); color: var(--deep); }
.app-symbol-system span:nth-child(3),
.app-symbol-badges span:nth-child(3) { background: var(--deep); color: var(--light); }
.app-symbol-system span:nth-child(4),
.app-symbol-badges span:nth-child(4) { background: var(--soft); color: var(--deep); }

.app-symbol-system h3 {
  margin: 0;
  color: var(--deep);
  font-family: var(--font-display);
  font-size: 1.6rem;
}

.app-symbol-system p {
  margin: 8px 0 0;
  color: color-mix(in srgb, var(--deep), transparent 34%);
}

.app-symbol-gradient {
  display: grid;
  place-items: center;
  gap: 14px;
  background: var(--symbol-bg);
  color: var(--symbol-ink);
  text-align: center;
}

.app-symbol-gradient i {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 26px;
  background: color-mix(in srgb, currentColor, transparent 86%);
}

.app-symbol-gradient svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.app-symbol-badges {
  background: var(--light);
}

/* UI Showcase Sub-styles */
.ui-section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.ui-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.app-demo-card {
  padding: 24px;
  border-radius: var(--radius-card);
  border: 1px solid rgba(226, 232, 240, 0.8);
  background: var(--surface);
  box-shadow: var(--shadow-tight);
  transition: transform 200ms ease;
}

.app-demo-card:hover {
  transform: translateY(-2px);
}

.app-demo-card h4 {
  margin: 0 0 16px 0;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--ink);
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
  padding-bottom: 8px;
}

.ui-interactive-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn-app-demo {
  padding: 10px 18px;
  border-radius: var(--radius-control);
  font-size: 0.8rem;
  font-weight: 800;
  border: 1px solid transparent;
  transition: all 180ms ease;
}

.btn-app-demo.primary {
  background: var(--btn-bg);
  color: var(--btn-ink);
}

.btn-app-demo.primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 14px var(--btn-shadow);
}

.btn-app-demo.secondary {
  background: var(--btn-bg);
  color: var(--btn-ink);
  border-color: var(--btn-border);
}

.btn-app-demo.secondary:hover {
  background: #ffffff;
  border-color: var(--btn-ink);
}

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

.ui-contrast-validator {
  display: grid;
  gap: 12px;
}

.ui-contrast-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: var(--radius-control);
  font-size: 0.78rem;
  font-weight: 700;
}

/* Video / Motion Section Styling */
.motion-viewer-card {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-premium);
  background: #000;
}

.motion-fluid-bg {
  position: absolute;
  inset: 0;
  background: var(--motion-gradient);
  background-size: 200% 200%;
  animation: fluidMotion 12s ease infinite;
}

@keyframes fluidMotion {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.motion-screen-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  z-index: 2;
  color: #ffffff;
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, transparent 40%, rgba(0,0,0,0.4) 100%);
}

.motion-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.motion-rec-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  background: rgba(0,0,0,0.6);
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}

.motion-rec-indicator::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  animation: pulseRec 1s ease infinite alternate;
}

@keyframes pulseRec {
  from { opacity: 0.2; }
  to { opacity: 1; }
}

.motion-lower-third-overlay {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--overlay-bg);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 12px 28px rgba(0,0,0,0.3);
  max-width: 600px;
  animation: slideLowerThird 5s cubic-bezier(0.16, 1, 0.3, 1) infinite alternate;
}

@keyframes slideLowerThird {
  0% { transform: translateY(40px); opacity: 0; }
  8%, 92% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(40px); opacity: 0; }
}

.motion-bar-indicator {
  width: 100%;
  height: 100%;
  background: var(--accent-color);
  border-radius: 4px;
}

.motion-lower-third-overlay strong {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--overlay-ink);
  letter-spacing: 0.02em;
}

.motion-lower-third-overlay span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--overlay-muted);
}

.motion-time-stamp {
  font-size: 0.7rem;
  font-weight: 800;
  opacity: 0.8;
  color: var(--overlay-ink);
}

/* Gráfica Editorial Sub-styles */
.editorial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.poster-mockup {
  position: relative;
  aspect-ratio: 1/1.414; /* A4 Ratio */
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--poster-bg);
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  transition: all 250ms ease;
}

.poster-mockup:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-premium);
}

.poster-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  color: var(--poster-ink);
  border-bottom: 1px solid var(--poster-ink-alpha);
  padding-bottom: 12px;
}

.poster-header h5 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
}

.poster-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  padding: 24px 0;
}

.poster-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1.1;
  color: var(--poster-accent);
}

.poster-geometric {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--poster-accent);
  box-shadow: 0 10px 24px var(--poster-accent-alpha);
  margin-top: 12px;
}

.poster-geometric.square {
  border-radius: var(--radius-control);
}

.poster-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  color: var(--poster-ink);
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
}

/* Packaging / Print Specific Styling */
.print-cmyk-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(226, 232, 240, 0.8);
}

.cmyk-checker-card {
  padding: 20px;
  border-radius: var(--radius-card);
  background: rgba(248, 250, 252, 0.8);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.cmyk-status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 800;
  margin-bottom: 12px;
}

.cmyk-status-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.64rem;
  text-transform: uppercase;
  font-weight: 900;
}

.cmyk-status-badge.safe {
  background: #d1fae5;
  color: #065f46;
}

.cmyk-status-badge.unsafe {
  background: #fef3c7;
  color: #92400e;
}

.khromafy-v2 .stage-gradient,
.khromafy-v2 .stage-ui,
.khromafy-v2 .stage-type,
.khromafy-v2 .stage-icons,
.khromafy-v2 .stage-title,
.khromafy-v2 .stage-options {
  display: none !important;
}

.system-application-panel {
  margin-top: 0;
}

.system-application-summary {
  display: grid;
  grid-template-columns: minmax(280px, 1.15fr) repeat(2, minmax(170px, 0.7fr));
  grid-auto-rows: minmax(158px, auto);
  gap: 16px;
}

.system-preview-hero,
.system-preview-card {
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.46),
    0 18px 34px -24px rgba(15, 23, 42, 0.34);
}

.system-preview-hero {
  grid-row: span 2;
  display: grid;
  align-content: space-between;
  min-height: 332px;
  padding: 24px;
  background: var(--gradient);
  color: var(--light);
}

.system-preview-hero > span,
.system-preview-card > strong {
  width: fit-content;
  padding: 7px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor, transparent 86%);
  color: currentColor;
  font-size: 0.66rem;
  font-weight: 950;
  text-transform: uppercase;
}

.system-preview-hero h3 {
  max-width: 10ch;
  margin: 26px 0 12px;
  color: var(--light);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.2vw, 3.8rem);
  line-height: 0.96;
}

.system-preview-hero p {
  max-width: 390px;
  margin: 0;
  color: color-mix(in srgb, var(--light), transparent 20%);
  font-size: 0.86rem;
}

.system-preview-hero div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 24px;
}

.system-preview-hero b {
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--light), transparent 14%);
}

.system-preview-hero b:nth-child(2) { background: var(--support); }
.system-preview-hero b:nth-child(3) { background: var(--deep); }

.system-preview-card {
  display: grid;
  align-content: space-between;
  gap: 10px;
  min-height: 158px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.system-preview-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.28;
}

.system-preview-card > div {
  min-height: 74px;
  border-radius: 12px;
}

.system-preview-ui > div,
.system-preview-type > div {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 12px;
  background: var(--light);
}

.system-preview-ui span,
.system-preview-type span,
.system-preview-type i {
  height: 9px;
  border-radius: 999px;
}

.system-preview-ui span:first-child { width: 72%; background: var(--deep); }
.system-preview-ui span:nth-child(2) { width: 42%; background: var(--support); }
.system-preview-ui button {
  width: 50px;
  border: 0;
  border-radius: 8px;
  background: var(--main);
  color: var(--main-ink);
  font-size: 0.58rem;
  font-weight: 950;
}

.system-preview-type b {
  color: var(--deep);
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
}

.system-preview-type span { width: 72%; background: var(--main); }
.system-preview-type i { width: 44%; background: var(--support); }

.system-preview-motion > div {
  display: grid;
  align-content: space-between;
  padding: 12px;
  background: var(--gradient);
}

.system-preview-motion span {
  width: fit-content;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--support);
  color: var(--deep);
  font-size: 0.56rem;
  font-weight: 950;
}

.system-preview-motion b,
.system-preview-motion i {
  height: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--light), transparent 10%);
}

.system-preview-motion i { width: 54%; }

.system-preview-social > div,
.system-preview-symbols > div {
  display: grid;
  gap: 8px;
  background: var(--light);
}

.system-preview-social > div {
  grid-template-columns: repeat(3, 1fr);
  padding: 10px;
}

.system-preview-social span,
.system-preview-symbols span {
  display: grid;
  place-items: center;
  border-radius: 11px;
  font-weight: 950;
}

.system-preview-social span:first-child,
.system-preview-symbols span:first-child { background: var(--main); color: var(--main-ink); }
.system-preview-social span:nth-child(2),
.system-preview-symbols span:nth-child(2) { background: var(--support); color: var(--deep); }
.system-preview-social span:nth-child(3),
.system-preview-symbols span:nth-child(3) { background: var(--deep); color: var(--light); }

.system-preview-symbols > div {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.system-preview-symbols span {
  width: 44px;
  height: 44px;
}

.app-expansion-section {
  display: grid;
  gap: 18px;
  margin-top: 24px;
  padding-top: 0;
  border-top: 0;
}

.app-expansion-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.app-expansion-heading span {
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.app-expansion-heading h3 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 1.05rem;
}

.app-expansion-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 24px;
}

.app-extension-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.app-extension-preview {
  min-height: 178px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: transparent;
  box-shadow:
    0 18px 34px -24px rgba(15, 23, 42, 0.38),
    inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

.app-extension-card > div:last-child {
  padding: 0 2px;
}

.app-extension-card h4 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 0.86rem;
}

.app-extension-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
}

.app-preview-form,
.app-preview-table,
.app-preview-alerts,
.app-preview-lower,
.app-preview-caption,
.app-preview-transitions,
.app-preview-type-scale,
.app-preview-reading,
.app-preview-quote,
.app-preview-magazine,
.app-preview-grid,
.app-preview-infographic,
.app-preview-icon-states,
.app-preview-badges,
.app-preview-monograms,
.app-preview-carousel,
.app-preview-product-ad,
.app-preview-testimonial,
.app-preview-card-duo,
.app-preview-sticker,
.app-preview-cmyk {
  width: 100%;
  min-height: 170px;
  padding: 16px;
}

.app-preview-form {
  display: grid;
  gap: 10px;
  background: var(--light);
}

.app-preview-form label {
  display: grid;
  gap: 5px;
}

.app-preview-form label span {
  color: var(--deep);
  font-size: 0.58rem;
  font-weight: 900;
}

.app-preview-form label i {
  height: 28px;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--deep), transparent 86%);
}

.app-preview-form .is-focus i {
  box-shadow: inset 0 0 0 2px var(--main);
}

.app-preview-form .is-error i {
  background: color-mix(in srgb, var(--support), white 72%);
  box-shadow: inset 0 0 0 2px var(--support);
}

.app-preview-table {
  display: grid;
  grid-template-columns: 1.1fr 0.7fr 0.7fr;
  gap: 8px;
  align-content: center;
  background: var(--light);
}

.app-preview-table span,
.app-preview-table i,
.app-preview-table b {
  min-height: 26px;
  border-radius: 7px;
}

.app-preview-table span { background: var(--deep); }
.app-preview-table i { background: var(--soft); }
.app-preview-table b { background: color-mix(in srgb, var(--main), white 62%); }

.app-preview-alerts,
.app-preview-badges,
.app-preview-monograms,
.app-preview-icon-states {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: center;
  justify-content: center;
  background: var(--light);
}

.app-preview-alerts span,
.app-preview-badges span {
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 900;
}

.app-preview-alerts span:nth-child(1),
.app-preview-badges span:nth-child(1) { background: var(--main); color: var(--main-ink); }
.app-preview-alerts span:nth-child(2),
.app-preview-badges span:nth-child(2) { background: var(--support); color: var(--deep); }
.app-preview-alerts span:nth-child(3),
.app-preview-badges span:nth-child(3) { background: var(--deep); color: var(--light); }

.app-preview-lower {
  display: grid;
  align-content: end;
  gap: 10px;
  background: linear-gradient(135deg, var(--main), var(--deep));
}

.app-preview-lower span {
  height: 30px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--light), transparent 10%);
}

.app-preview-lower span:nth-child(2) { width: 76%; background: var(--soft); }
.app-preview-lower span:nth-child(3) { width: 48%; background: var(--support); }

.app-preview-caption {
  display: grid;
  align-content: end;
  gap: 8px;
  background: linear-gradient(135deg, var(--deep), var(--main));
  color: var(--light);
}

.app-preview-caption b,
.app-preview-caption span {
  width: fit-content;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--deep), transparent 18%);
}

.app-preview-transitions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: var(--soft);
}

.app-preview-transitions i {
  border-radius: 10px;
  background: linear-gradient(135deg, var(--main), var(--support));
}

.app-preview-transitions i:nth-child(2) { background: linear-gradient(135deg, var(--support), var(--deep)); }
.app-preview-transitions i:nth-child(3) { background: linear-gradient(135deg, var(--soft), var(--main)); }

.app-preview-type-scale,
.app-preview-reading,
.app-preview-quote {
  display: grid;
  align-content: center;
  gap: 8px;
  background: var(--light);
}

.app-preview-type-scale strong { color: var(--deep); font-size: 2rem; line-height: 1; }
.app-preview-type-scale b { color: var(--main); font-size: 1.2rem; }
.app-preview-type-scale span { color: var(--muted); }
.app-preview-type-scale i { width: fit-content; padding: 4px 8px; border-radius: 999px; background: var(--soft); color: var(--deep); font-style: normal; font-size: 0.62rem; font-weight: 900; }

.app-preview-reading h5,
.app-preview-reading p,
.app-preview-reading span {
  margin: 0;
  border-radius: 999px;
}

.app-preview-reading h5 { width: 64%; height: 18px; background: var(--deep); }
.app-preview-reading p { height: 9px; background: color-mix(in srgb, var(--muted), transparent 74%); }
.app-preview-reading span { width: 38%; height: 12px; background: var(--main); }

.app-preview-quote {
  background: var(--deep);
  color: var(--light);
}

.app-preview-quote b { color: var(--support); font-size: 2.3rem; line-height: 0.8; }
.app-preview-quote span { font-weight: 900; font-size: 1.1rem; }
.app-preview-quote i { width: 52%; height: 8px; border-radius: 999px; background: var(--main); }

.app-preview-magazine {
  display: grid;
  align-content: space-between;
  background: var(--light);
  color: var(--deep);
}

.app-preview-magazine h5 { margin: 0; font-size: 0.62rem; color: var(--main); }
.app-preview-magazine strong { font-size: 1.8rem; line-height: 1; color: var(--deep); }
.app-preview-magazine span { width: 72%; height: 12px; background: var(--support); border-radius: 999px; }
.app-preview-magazine i { width: 48px; height: 48px; border-radius: 50%; background: var(--main); }

.app-preview-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  grid-template-rows: 1fr 0.7fr 0.9fr;
  gap: 8px;
  background: var(--light);
}

.app-preview-grid span { border-radius: 9px; background: var(--soft); }
.app-preview-grid span:nth-child(1) { grid-row: span 2; background: var(--main); }
.app-preview-grid span:nth-child(3) { background: var(--support); }
.app-preview-grid span:nth-child(5) { grid-column: span 2; background: var(--deep); }

.app-preview-infographic {
  display: grid;
  align-content: center;
  gap: 10px;
  background: var(--soft);
}

.app-preview-infographic strong { color: var(--main); font-size: 2rem; }
.app-preview-infographic span { height: 10px; border-radius: 999px; background: var(--deep); }
.app-preview-infographic i { height: 20px; border-radius: 8px; background: var(--support); }
.app-preview-infographic i:nth-child(4) { width: 62%; background: var(--main); }

.app-preview-icon-states span,
.app-preview-monograms span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-weight: 950;
}

.app-preview-icon-states span:nth-child(1),
.app-preview-monograms span:nth-child(1) { background: var(--main); color: var(--light); }
.app-preview-icon-states span:nth-child(2),
.app-preview-monograms span:nth-child(2) { background: var(--support); color: var(--support-ink, var(--deep)); }
.app-preview-icon-states span:nth-child(3),
.app-preview-monograms span:nth-child(3) { background: var(--deep); color: var(--light); }
.app-preview-icon-states span:nth-child(4) { background: var(--soft); color: var(--deep); opacity: 0.54; }

.app-preview-carousel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: var(--light);
}

.app-preview-carousel span {
  display: grid;
  place-items: end start;
  padding: 9px;
  border-radius: 10px;
  background: var(--main);
  color: var(--main-ink);
  font-weight: 950;
}

.app-preview-carousel span:nth-child(2) { background: var(--support); color: var(--deep); }
.app-preview-carousel span:nth-child(3) { background: var(--deep); color: var(--light); }

.app-preview-product-ad,
.app-preview-testimonial {
  display: grid;
  align-content: space-between;
  background: var(--light);
  color: var(--deep);
}

.app-preview-product-ad i {
  width: 74px;
  height: 54px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--soft), var(--support));
}

.app-preview-product-ad strong { color: var(--main); font-size: 1.5rem; }
.app-preview-product-ad button { width: fit-content; border: 0; border-radius: 8px; background: var(--deep); color: var(--light); font-weight: 900; padding: 7px 12px; }

.app-preview-testimonial i {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--main);
}

.app-preview-testimonial p,
.app-preview-testimonial span {
  margin: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--deep), transparent 82%);
}

.app-preview-testimonial p { height: 12px; }
.app-preview-testimonial span { width: 52%; height: 9px; background: var(--support); }

.app-preview-card-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  background: var(--soft);
}

.app-preview-card-duo span {
  border-radius: 12px;
  background: var(--light);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--deep), transparent 88%);
}

.app-preview-card-duo span:nth-child(2) { background: var(--deep); }

.app-preview-sticker {
  display: grid;
  place-items: center;
  background: var(--light);
}

.app-preview-sticker span {
  display: grid;
  place-items: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--main);
  color: var(--main-ink);
  font-weight: 950;
  box-shadow: inset 0 0 0 8px var(--support);
}

.app-preview-cmyk {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  gap: 10px;
  background: var(--light);
}

.app-preview-cmyk span {
  color: var(--deep);
  font-size: 0.64rem;
  font-weight: 950;
}

.app-preview-cmyk i {
  height: 24px;
  border-radius: 7px;
  background: linear-gradient(90deg, var(--main), var(--support), var(--deep));
}

.app-preview-cmyk i:nth-child(4) {
  filter: saturate(0.62) contrast(0.94);
}

.app-preview-settings,
.app-preview-navigation,
.app-preview-product-card,
.app-preview-overlays,
.app-preview-intro,
.app-preview-chapters,
.app-preview-type-hero,
.app-preview-emphasis,
.app-preview-headlines,
.app-preview-data-slide,
.app-preview-banner,
.app-preview-campaign-layout,
.app-preview-pictograms,
.app-preview-avatars,
.app-preview-category-seals,
.app-preview-story,
.app-preview-thumbnail,
.app-preview-offer,
.app-preview-label,
.app-preview-sleeve,
.app-preview-stationery {
  width: 100%;
  min-height: 170px;
  padding: 16px;
}

.app-expansion-section--new {
  margin-top: 20px;
}

.app-preview-settings {
  display: grid;
  align-content: center;
  gap: 10px;
  background: var(--light);
}

.app-preview-settings > span,
.app-preview-settings > b,
.app-preview-settings > strong {
  height: 10px;
  border-radius: 999px;
}

.app-preview-settings > span { width: 68%; background: var(--deep); }
.app-preview-settings > b { width: 42%; background: var(--support); }
.app-preview-settings > strong { width: 84%; background: linear-gradient(90deg, var(--main) 62%, var(--soft) 62%); }

.app-preview-settings label {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  align-items: center;
  margin: 0;
}

.app-preview-settings label i {
  height: 20px;
  border-radius: 999px;
  background: var(--soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--deep), transparent 82%);
}

.app-preview-settings label em {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--deep), transparent 78%);
}

.app-preview-settings .is-on i { background: var(--main); }
.app-preview-settings .is-on em { background: var(--support); }

.app-preview-navigation {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  background: var(--light);
}

.app-preview-navigation aside,
.app-preview-navigation main {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
}

.app-preview-navigation aside { background: var(--deep); }
.app-preview-navigation aside i { border-radius: 8px; background: color-mix(in srgb, var(--light), transparent 18%); }
.app-preview-navigation aside i:nth-child(2) { background: var(--main); }
.app-preview-navigation main { align-content: center; background: var(--soft); }
.app-preview-navigation main span,
.app-preview-navigation main b { height: 18px; border-radius: 999px; background: var(--main); }
.app-preview-navigation main b { background: color-mix(in srgb, var(--deep), transparent 82%); }

.app-preview-product-card {
  position: relative;
  display: grid;
  align-content: end;
  gap: 9px;
  background: var(--light);
}

.app-preview-product-card i {
  position: absolute;
  inset: 16px 16px auto auto;
  width: 68px;
  height: 58px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--soft), var(--support));
}

.app-preview-product-card span {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--main);
  color: var(--main-ink);
  font-size: 0.58rem;
  font-weight: 950;
}

.app-preview-product-card strong { height: 14px; width: 72%; border-radius: 999px; background: var(--deep); }
.app-preview-product-card button { width: 58px; border: 0; border-radius: 8px; background: var(--deep); color: var(--light); font-size: 0.62rem; font-weight: 900; padding: 7px 0; }

.app-preview-overlays {
  position: relative;
  display: grid;
  align-content: end;
  gap: 8px;
  background: linear-gradient(135deg, var(--deep), var(--main));
}

.app-preview-overlays i {
  position: absolute;
  inset: 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--light), transparent 84%);
}

.app-preview-overlays span,
.app-preview-overlays b,
.app-preview-overlays em {
  position: relative;
  z-index: 1;
  border-radius: 8px;
}

.app-preview-overlays span { width: fit-content; padding: 6px 9px; background: var(--support); color: var(--deep); font-size: 0.58rem; font-weight: 950; }
.app-preview-overlays b { width: 78%; height: 28px; background: color-mix(in srgb, var(--deep), transparent 18%); }
.app-preview-overlays em { width: 48%; height: 10px; background: var(--light); }

.app-preview-intro {
  display: grid;
  place-items: center;
  gap: 8px;
  background: radial-gradient(circle at 70% 20%, var(--support), transparent 32%), linear-gradient(135deg, var(--main), var(--deep));
  color: var(--light);
}

.app-preview-intro span { width: 42px; height: 42px; border-radius: 50%; background: var(--light); }
.app-preview-intro strong { font-size: 1.4rem; }
.app-preview-intro i { width: 72px; height: 8px; border-radius: 999px; background: var(--support); }

.app-preview-chapters {
  display: grid;
  align-content: center;
  gap: 10px;
  background: var(--light);
}

.app-preview-chapters span {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 10px;
  color: var(--deep);
  font-weight: 950;
  font-size: 0.72rem;
}

.app-preview-chapters span::after {
  content: "";
  height: 18px;
  border-radius: 999px;
  background: var(--soft);
}

.app-preview-chapters span:nth-child(2)::after { background: var(--main); }
.app-preview-chapters span:nth-child(3)::after { background: var(--support); }

.app-preview-type-hero {
  display: grid;
  align-content: center;
  gap: 10px;
  background: var(--main);
  color: var(--main-ink);
}

.app-preview-type-hero strong { font-size: 2rem; line-height: 1; }
.app-preview-type-hero span { width: 70%; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--main-ink), transparent 72%); }
.app-preview-type-hero button { width: 58px; border: 0; border-radius: 8px; padding: 7px 0; background: var(--deep); color: var(--light); font-weight: 900; }

.app-preview-emphasis {
  display: grid;
  align-content: center;
  gap: 12px;
  background: var(--light);
}

.app-preview-emphasis p { display: grid; gap: 7px; margin: 0; }
.app-preview-emphasis b,
.app-preview-emphasis i {
  height: 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--deep), transparent 78%);
}
.app-preview-emphasis i { width: 64%; background: var(--main); }
.app-preview-emphasis span,
.app-preview-emphasis a { width: fit-content; padding: 5px 9px; border-radius: 999px; font-size: 0.62rem; font-weight: 900; }
.app-preview-emphasis span { background: var(--support); color: var(--deep); }
.app-preview-emphasis a { color: var(--main); background: var(--soft); }

.app-preview-headlines {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: var(--soft);
}

.app-preview-headlines span {
  display: grid;
  place-items: center;
  padding: 8px;
  border-radius: 10px;
  color: var(--deep);
  font-size: 0.66rem;
  font-weight: 950;
  text-align: center;
}

.app-preview-headlines span:nth-child(1) { background: var(--light); }
.app-preview-headlines span:nth-child(2) { background: var(--main); color: var(--main-ink); }
.app-preview-headlines span:nth-child(3) { background: var(--deep); color: var(--light); }

.app-preview-data-slide,
.app-preview-banner,
.app-preview-campaign-layout {
  display: grid;
  background: var(--light);
  color: var(--deep);
}

.app-preview-data-slide { align-content: center; gap: 10px; }
.app-preview-data-slide strong { color: var(--main); font-size: 2rem; line-height: 1; }
.app-preview-data-slide span { height: 10px; border-radius: 999px; background: var(--deep); }
.app-preview-data-slide i { height: 22px; border-radius: 8px; background: var(--support); }
.app-preview-data-slide i:nth-child(4) { width: 62%; background: var(--soft); }

.app-preview-banner {
  align-content: center;
  gap: 9px;
  background: linear-gradient(90deg, var(--deep) 0 34%, var(--light) 34%);
  padding-left: 64px;
}

.app-preview-banner strong,
.app-preview-banner span {
  height: 12px;
  border-radius: 999px;
  background: var(--deep);
}
.app-preview-banner strong { width: 78%; }
.app-preview-banner span { width: 52%; background: var(--main); }
.app-preview-banner button { width: 48px; height: 24px; border: 0; border-radius: 8px; background: var(--support); }

.app-preview-campaign-layout {
  grid-template-columns: 1.1fr 0.8fr;
  grid-template-rows: 1fr auto auto;
  gap: 10px;
  background: var(--soft);
}

.app-preview-campaign-layout b { grid-row: span 2; border-radius: 12px; background: var(--deep); }
.app-preview-campaign-layout i { border-radius: 50%; background: var(--support); }
.app-preview-campaign-layout span { height: 12px; border-radius: 999px; background: var(--main); }
.app-preview-campaign-layout button { grid-column: span 2; height: 24px; border: 0; border-radius: 8px; background: var(--main); }

.app-preview-pictograms,
.app-preview-avatars,
.app-preview-category-seals {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: center;
  justify-content: center;
  background: var(--light);
}

.app-preview-pictograms span,
.app-preview-avatars span,
.app-preview-category-seals span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  font-weight: 950;
}

.app-preview-pictograms span { border-radius: 14px; border: 2px solid var(--main); color: var(--main); }
.app-preview-pictograms span:nth-child(2) { background: var(--support); border-color: var(--support); color: var(--deep); }
.app-preview-pictograms span:nth-child(3) { background: var(--main); color: var(--main-ink); }
.app-preview-pictograms span:nth-child(4) { background: var(--deep); border-color: var(--deep); color: var(--light); }

.app-preview-avatars span { border-radius: 50%; box-shadow: 0 0 0 4px var(--soft); }
.app-preview-avatars span:nth-child(1) { background: var(--main); color: var(--main-ink); }
.app-preview-avatars span:nth-child(2) { background: var(--support); color: var(--support-ink); }
.app-preview-avatars span:nth-child(3) { background: var(--deep); color: var(--light); }

.app-preview-category-seals span {
  border-radius: 999px;
  background: var(--soft);
  color: var(--deep);
  box-shadow: inset 0 0 0 2px var(--main);
}
.app-preview-category-seals span:nth-child(2) { box-shadow: inset 0 0 0 2px var(--support); }
.app-preview-category-seals span:nth-child(3) { background: var(--deep); color: var(--light); box-shadow: none; }

.app-preview-story,
.app-preview-thumbnail,
.app-preview-offer {
  display: grid;
  background: var(--light);
}

.app-preview-story {
  width: min(86px, 100%);
  min-height: 170px;
  margin: 0 auto;
  align-content: space-between;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--main), var(--deep));
  color: var(--main-ink);
}

.app-preview-story strong { color: var(--main-ink); font-size: 1rem; }
.app-preview-story span { width: 48px; height: 48px; border-radius: 50%; background: var(--support); }
.app-preview-story button { height: 22px; border: 0; border-radius: 999px; background: var(--light); }

.app-preview-thumbnail {
  position: relative;
  place-items: center;
  background: linear-gradient(135deg, var(--deep), var(--main));
  color: var(--light);
}

.app-preview-thumbnail i {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--support);
}

.app-preview-thumbnail strong { position: absolute; left: 16px; bottom: 18px; font-size: 1.3rem; }
.app-preview-thumbnail span { position: absolute; right: 14px; top: 14px; width: 42px; height: 16px; border-radius: 999px; background: var(--light); }

.app-preview-offer {
  align-content: space-between;
  background: var(--light);
}

.app-preview-offer span {
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--main);
  color: var(--main-ink);
  font-weight: 950;
}

.app-preview-offer i { width: 82px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, var(--soft), var(--support)); justify-self: end; }
.app-preview-offer button { width: 62px; border: 0; border-radius: 8px; padding: 7px 0; background: var(--deep); color: var(--light); font-weight: 900; }

.app-preview-label,
.app-preview-sleeve,
.app-preview-stationery {
  display: grid;
  background: var(--light);
  color: var(--deep);
}

.app-preview-label {
  align-content: space-between;
  border: 10px solid var(--soft);
}

.app-preview-label strong { font-size: 1.1rem; }
.app-preview-label span { height: 10px; border-radius: 999px; background: var(--main); }
.app-preview-label i { width: 52px; height: 52px; border-radius: 50%; background: var(--support); justify-self: center; }
.app-preview-label b { height: 20px; border-radius: 8px; background: var(--deep); }

.app-preview-sleeve {
  align-content: center;
  gap: 10px;
  background: linear-gradient(90deg, var(--soft) 0 18%, var(--main) 18% 82%, var(--soft) 82%);
}

.app-preview-sleeve span,
.app-preview-sleeve strong,
.app-preview-sleeve i {
  justify-self: center;
  border-radius: 999px;
}
.app-preview-sleeve span { width: 74%; height: 14px; background: var(--deep); }
.app-preview-sleeve strong { width: 42px; height: 42px; background: var(--support); border-radius: 50%; }
.app-preview-sleeve i { width: 52%; height: 9px; background: var(--light); }

.app-preview-stationery {
  align-content: space-between;
  gap: 10px;
  background: var(--light);
}

.app-preview-stationery header { height: 16px; border-radius: 999px; background: var(--main); }
.app-preview-stationery p { margin: 0; height: 9px; border-radius: 999px; background: color-mix(in srgb, var(--deep), transparent 78%); }
.app-preview-stationery p:nth-child(3) { width: 72%; }
.app-preview-stationery footer { height: 26px; border-radius: 8px; background: var(--deep); }

/* Dark Mode Overrides for Applications Section */
.khromafy-v2.is-dark .app-sidebar-nav {
  background: rgba(24, 24, 27, 0.9);
  border-color: rgba(63, 63, 70, 0.8);
}

.khromafy-v2.is-dark .app-sidebar-tab:hover {
  background: rgba(39, 39, 42, 0.8);
}

.khromafy-v2.is-dark .app-sidebar-tab.is-active {
  background: #18181b;
  border-color: rgba(63, 63, 70, 0.8);
}

.khromafy-v2.is-dark .app-viewer-panel {
  background: #18181b;
  border-color: rgba(63, 63, 70, 0.8);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.khromafy-v2.is-dark .app-impact-kit {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent), #18181b 82%), #18181b 62%);
  border-color: rgba(63, 63, 70, 0.86);
}

.khromafy-v2.is-dark .app-impact-tags span,
.khromafy-v2.is-dark .app-impact-metrics span {
  background: rgba(39, 39, 42, 0.76);
  color: #a1a1aa;
}

.khromafy-v2.is-dark .app-impact-copy h3,
.khromafy-v2.is-dark .app-impact-metrics strong {
  color: #f4f4f5;
}

.khromafy-v2.is-dark .app-gradient-message,
.khromafy-v2.is-dark .app-gradient-title-card,
.khromafy-v2.is-dark .app-gradient-surface {
  box-shadow:
    0 22px 44px -30px rgba(0, 0, 0, 0.84),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.khromafy-v2.is-dark .app-expansion-section {
  border-top-color: rgba(63, 63, 70, 0.82);
}

.khromafy-v2.is-dark .app-extension-card {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.khromafy-v2.is-dark .app-extension-preview {
  background: transparent;
  box-shadow:
    0 18px 34px -24px rgba(0, 0, 0, 0.72),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.khromafy-v2.is-dark .app-expansion-heading h3,
.khromafy-v2.is-dark .app-extension-card h4 {
  color: #f4f4f5;
}

.khromafy-v2.is-dark .app-demo-card {
  background: #27272a;
  border-color: rgba(63, 63, 70, 0.8);
}

.khromafy-v2.is-dark .system-application-panel {
  background: rgba(24, 24, 27, 0.7);
}

.khromafy-v2.is-dark .system-preview-card {
  background: rgba(39, 39, 42, 0.56);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 12px 26px -18px rgba(0, 0, 0, 0.72);
}

.khromafy-v2.is-dark .system-preview-card > strong {
  color: #f4f4f5;
}

@media (max-width: 980px) {
  .app-dashboard-layout {
    grid-template-columns: 1fr;
  }

  .app-sidebar-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .app-impact-kit {
    grid-template-columns: 1fr;
  }

  .app-rich-section--gradient-text,
  .app-rich-section--title-gradient,
  .app-rich-section--surfaces,
  .app-rich-section--motion,
  .app-rich-section--editorial,
  .app-rich-section--advertising,
  .app-rich-section--symbols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-motion-hero,
  .app-editorial-cover,
  .app-editorial-spread,
  .app-editorial-slide,
  .app-ad-hero,
  .app-ad-story,
  .app-ad-carousel,
  .app-symbol-system,
  .app-symbol-gradient,
  .app-symbol-badges {
    min-height: 280px;
  }

  .app-expansion-grid {
    grid-template-columns: 1fr;
  }

  .system-application-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .system-preview-hero {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 280px;
  }

  .ui-section-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .app-viewer-panel {
    padding: 18px;
  }

  .app-impact-kit {
    padding: 16px;
  }

  .app-rich-section--gradient-text,
  .app-rich-section--title-gradient,
  .app-rich-section--surfaces,
  .app-rich-section--motion,
  .app-rich-section--editorial,
  .app-rich-section--advertising,
  .app-rich-section--symbols {
    grid-template-columns: 1fr;
  }

  .app-gradient-message,
  .app-gradient-title-card,
  .app-gradient-surface {
    min-height: 230px;
    padding: 22px;
  }

  .app-token-strip {
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  }

  .app-impact-metrics {
    grid-template-columns: 1fr;
  }

  .app-expansion-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .app-extension-card {
    padding: 0;
  }

  .system-application-summary {
    grid-template-columns: 1fr;
  }
}

.khromafy-v2.is-dark .app-demo-card h4 {
  color: #f4f4f5;
  border-bottom-color: rgba(63, 63, 70, 0.6);
}

.khromafy-v2.is-dark .cmyk-checker-card {
  background: rgba(39, 39, 42, 0.5);
  border-color: rgba(63, 63, 70, 0.8);
}

/* --------------------------------------------------------------------------
   Khromafy workspace refresh
   Open, editorial hierarchy. Surfaces are separated by rhythm and tone
   instead of a stack of outlined containers.
   -------------------------------------------------------------------------- */

:root {
  --workspace-bg: #f4f5f8;
  --workspace-panel: rgba(250, 250, 252, 0.88);
  --workspace-ink: #11131a;
  --workspace-muted: #6e7280;
  --workspace-soft: #e9ebf1;
  --workspace-radius: 24px;
  --workspace-shadow: 0 24px 70px -48px rgba(19, 23, 38, 0.38);
}

body.khromafy-v2 {
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: -0.01em;
  background:
    radial-gradient(circle at 74% -10%, color-mix(in srgb, var(--ui-accent), transparent 88%), transparent 32rem),
    var(--workspace-bg);
  color: var(--workspace-ink);
}

.khromafy-v2 .topbar {
  height: 82px;
  padding: 0 clamp(22px, 3vw, 52px);
  border: 0;
  background: color-mix(in srgb, #ffffff, transparent 12%);
  box-shadow: 0 1px 0 rgba(18, 21, 31, 0.055);
  backdrop-filter: blur(20px) saturate(180%);
}

.khromafy-v2 .brand {
  gap: 14px;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.khromafy-v2 .brand::after {
  content: none;
}

.khromafy-v2 .brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  box-shadow:
    0 10px 24px color-mix(in srgb, var(--ui-accent), transparent 78%),
    inset 0 0 0 1px rgba(255, 255, 255, 0.48);
  background: conic-gradient(from 225deg, #FF3B30, #FF9500, #FFCC00, #4CD964, #5AC8FA, #007AFF, #5856D6, #FF2D55, #FF3B30);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.khromafy-v2 .topbar-actions {
  display: inline-flex;
  align-items: center;
  justify-content: end;
  gap: 10px;
}

.khromafy-v2 .export-button {
  min-height: 42px;
  padding-inline: 20px;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--ui-accent), transparent 38%);
}

.khromafy-v2 .studio-shell {
  grid-template-columns: minmax(340px, 400px) minmax(0, 1fr);
  gap: 0;
  max-width: none;
  min-height: calc(100vh - 82px);
  margin: 0;
  padding: 0;
}

.khromafy-v2 .control-panel {
  top: 82px;
  gap: 0;
  max-height: calc(100vh - 82px);
  padding: 34px clamp(24px, 2.4vw, 38px) 72px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(249, 249, 252, 0.88)),
    color-mix(in srgb, var(--ui-accent), white 97%);
  box-shadow: 18px 0 48px -44px rgba(22, 26, 42, 0.56);
  scrollbar-color: color-mix(in srgb, var(--ui-accent), transparent 70%) transparent;
}

.khromafy-v2 .panel-section,
.khromafy-v2 .work-panel {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.khromafy-v2 .panel-section {
  position: relative;
  padding: 30px 0;
  border-radius: 0;
}

.khromafy-v2 .panel-section:first-child {
  padding-top: 4px;
}

.khromafy-v2 .panel-section + .panel-section {
  margin-top: 12px;
}

.khromafy-v2 .panel-section + .panel-section::before {
  content: "";
  position: absolute;
  top: 0;
  right: 8%;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(32, 36, 50, 0.1), transparent);
}

.khromafy-v2 .section-kicker {
  color: var(--ui-accent);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.khromafy-v2 .section-title,
.khromafy-v2 .panel-heading {
  padding-bottom: 0;
  box-shadow: none;
}

.khromafy-v2 h1,
.khromafy-v2 h2 {
  margin-top: 5px;
  font-family: var(--font-display);
  font-size: 1.24rem;
  font-weight: 750;
  letter-spacing: -0.035em;
}

.khromafy-v2 .icon-button,
.khromafy-v2 .secondary-action {
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 24px -18px rgba(20, 25, 40, 0.7);
}

.khromafy-v2 .icon-button:hover,
.khromafy-v2 .secondary-action:hover {
  border: 0;
  background: #fff;
  transform: translateY(-1px);
}

.khromafy-v2 .base-editor {
  grid-template-columns: minmax(120px, 0.92fr) 1fr;
  gap: 22px;
  margin-top: 26px;
}

.khromafy-v2 .color-canvas {
  border: 0;
  border-radius: 22px;
  box-shadow:
    0 22px 42px -26px color-mix(in srgb, var(--accent), #10131d 30%),
    inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.khromafy-v2 .color-canvas:hover {
  box-shadow:
    0 26px 50px -24px color-mix(in srgb, var(--accent), #10131d 24%),
    inset 0 0 0 1px rgba(255, 255, 255, 0.36);
}

.khromafy-v2 .color-value-input {
  padding: 2px 0 9px;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.72rem);
  letter-spacing: -0.045em;
}

.khromafy-v2 .format-fields input {
  border: 0;
  border-radius: 9px;
  background: rgba(231, 233, 240, 0.64);
}

.khromafy-v2 .format-tabs,
.khromafy-v2 .palette-library-tabs {
  padding: 4px;
  border-radius: 999px;
  background: rgba(224, 227, 235, 0.7);
}

.khromafy-v2 .format-tabs button,
.khromafy-v2 .palette-library-tabs button,
.khromafy-v2 .format-tabs .is-active,
.khromafy-v2 .palette-library-tabs button.is-active {
  border: 0;
  border-radius: 999px;
}

.khromafy-v2 .slider-stack {
  gap: 20px;
}

.khromafy-v2 .slider-row {
  grid-template-columns: 92px minmax(0, 1fr) 44px;
  gap: 12px;
}

.khromafy-v2 .advanced-palette-settings summary {
  padding-inline: 0;
  background: transparent;
  box-shadow: none;
}

.khromafy-v2 .advanced-palette-settings summary::after {
  background: color-mix(in srgb, var(--ui-accent), white 90%);
  box-shadow: none;
}

.khromafy-v2 .palette-library {
  gap: 14px;
}

.khromafy-v2 .palette-library-column {
  padding: 14px 0 0;
  background: transparent;
  box-shadow: none;
}

.khromafy-v2 .palette-library-item {
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 12px 26px -22px rgba(22, 26, 42, 0.7);
}

.khromafy-v2 .canvas-area {
  display: block;
  min-width: 0;
  padding: 30px clamp(28px, 4vw, 72px) 100px;
}

.khromafy-v2 .stage-tabs {
  top: 98px;
  z-index: 24;
  grid-template-columns: repeat(4, auto);
  width: fit-content;
  margin: 0 auto 34px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow:
    0 18px 45px -30px rgba(23, 27, 42, 0.56),
    inset 0 0 0 1px rgba(255, 255, 255, 0.64);
}

.khromafy-v2 .stage-tab-button {
  min-width: 136px;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 0.82rem;
}

.khromafy-v2 .stage-tab-button::after {
  display: none;
}

.khromafy-v2 .stage-tab-button:hover {
  background: color-mix(in srgb, var(--ui-accent), white 95%);
}

.khromafy-v2 .stage-tab-button.is-active {
  background: #151821;
  color: #fff;
  box-shadow: 0 14px 28px -18px rgba(17, 20, 31, 0.7);
}

.khromafy-v2 .stage-tab-button.is-active svg {
  color: color-mix(in srgb, var(--ui-accent), white 22%);
}

.khromafy-v2 .work-panel {
  width: min(100%, 1480px);
  margin: 0 auto;
  padding: 46px 0 72px;
  border-radius: 0;
  overflow: visible;
}

.khromafy-v2 .work-panel + .work-panel:not([hidden]) {
  margin-top: 12px;
}

.khromafy-v2 .panel-heading {
  align-items: flex-end;
  margin-bottom: 32px;
}

.khromafy-v2 .panel-heading h2 {
  font-size: clamp(1.55rem, 2.2vw, 2.35rem);
  font-weight: 720;
  line-height: 1.04;
  letter-spacing: -0.055em;
}

.khromafy-v2 .panel-heading p {
  max-width: 680px;
  margin-top: 10px;
  color: var(--workspace-muted);
  font-size: 0.9rem;
  line-height: 1.65;
}

.khromafy-v2 .stage-explore {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.65fr);
  gap: clamp(28px, 4vw, 68px);
  align-items: start;
}

.khromafy-v2 .stage-explore .panel-heading {
  grid-column: 2;
  grid-row: 1;
  margin: 18px 0 0;
}

.khromafy-v2 .stage-explore .explore-scale-card {
  grid-column: 1;
  grid-row: 1 / span 2;
  min-width: 0;
}

.khromafy-v2 .stage-explore .harmony-overview {
  grid-column: 1 / -1;
}

.khromafy-v2 .stage-explore .explore-suggestion-card,
.khromafy-v2 .stage-explore .explore-scale-card,
.khromafy-v2 .stage-explore .harmony-row {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.khromafy-v2 .stage-explore .explore-suggestion-card {
  padding: 0;
}

.khromafy-v2 .stage-explore .explore-scale-card {
  padding: clamp(26px, 3vw, 46px);
  border-radius: 32px;
  background:
    radial-gradient(circle at 90% 0%, rgba(148, 163, 184, 0.16), transparent 42%),
    #fff;
  box-shadow: var(--workspace-shadow);
}

.khromafy-v2 .explore-module-head h3 {
  font-family: var(--font-display);
  font-size: 1.08rem;
  letter-spacing: -0.03em;
}

.khromafy-v2 .tonal-scale {
  grid-template-columns: repeat(var(--tone-count), minmax(72px, 1fr));
  gap: 8px;
  margin-top: 28px;
}

.khromafy-v2 .tone-chip {
  aspect-ratio: auto;
  min-height: clamp(150px, 13vw, 205px);
  border: 0;
  border-radius: 16px;
  box-shadow: none;
  transition: transform 180ms ease, filter 180ms ease;
}

.khromafy-v2 .tone-chip:hover {
  border: 0;
  filter: saturate(1.05);
  transform: translateY(-6px);
}

.khromafy-v2 .harmony-overview {
  margin-top: 4px;
}

.khromafy-v2 .harmony-overview .harmony-row {
  padding: 28px 0;
}

.khromafy-v2 .palette-source-block,
.khromafy-v2 .system-layout,
.khromafy-v2 .system-application-panel,
.khromafy-v2 .gradient-panel,
.khromafy-v2 .ui-panel,
.khromafy-v2 .typography-panel,
.khromafy-v2 .icon-gradient-panel,
.khromafy-v2 .gradient-type-panel,
.khromafy-v2 .title-gradient-panel,
.khromafy-v2 .options-panel {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.khromafy-v2 .palette-source-block {
  margin: 10px 0 56px;
  padding: 0;
}

.khromafy-v2 .palette-source-layout {
  margin-top: 22px;
}

.khromafy-v2 .palette-source-tabs {
  border: 0;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.64);
  box-shadow: 0 20px 54px -44px rgba(22, 26, 42, 0.6);
}

.khromafy-v2 .system-role,
.khromafy-v2 .gradient-module,
.khromafy-v2 .type-pair,
.khromafy-v2 .ui-token,
.khromafy-v2 .option-card {
  border: 0;
  box-shadow: 0 22px 46px -38px rgba(19, 23, 38, 0.55);
}

.khromafy-v2 .applications-panel > .panel-heading {
  max-width: 820px;
}

.khromafy-v2 .app-dashboard-layout {
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
}

.khromafy-v2 .app-sidebar-nav {
  position: sticky;
  top: 178px;
  align-self: start;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.khromafy-v2 .app-sidebar-tab {
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  background: transparent;
}

.khromafy-v2 .app-sidebar-tab.is-active {
  border: 0;
  background: #151821;
  color: #fff;
  box-shadow: 0 14px 30px -22px rgba(17, 20, 31, 0.75);
}

.khromafy-v2 .app-viewer-panel {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.khromafy-v2 .app-impact-kit,
.khromafy-v2 .app-demo-card,
.khromafy-v2 .cmyk-checker-card {
  border: 0;
  border-radius: 24px;
  box-shadow: var(--workspace-shadow);
}

.khromafy-v2 .export-modal {
  border: 0;
  background: transparent;
}

.khromafy-v2 .export-modal::backdrop {
  background: rgba(11, 13, 19, 0.44);
  backdrop-filter: blur(12px);
}

.khromafy-v2 .export-modal-shell {
  border: 0;
  border-radius: 30px;
  box-shadow: 0 42px 90px -38px rgba(6, 8, 14, 0.72);
}

.khromafy-v2 .output-grid button {
  border: 0;
  background: #f3f4f7;
}

body.khromafy-v2.is-dark {
  color-scheme: dark;
  --ink: #f2f2f3;
  --muted: #a7a7ad;
  --soft: #18181b;
  --surface: #121214;
  --line: #29292d;
  --line-strong: #3a3a40;
  --workspace-bg: #0d0f14;
  --workspace-panel: rgba(20, 22, 29, 0.9);
  --workspace-ink: #f1f2f6;
  --workspace-muted: #999eac;
  background:
    radial-gradient(circle at 72% -8%, color-mix(in srgb, var(--ui-accent), transparent 82%), transparent 34rem),
    var(--workspace-bg);
}

.khromafy-v2.is-dark .topbar {
  border: 0;
  background: rgba(15, 17, 23, 0.78);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.055);
}

.khromafy-v2.is-dark .control-panel {
  background: linear-gradient(180deg, rgba(19, 21, 28, 0.96), rgba(15, 17, 23, 0.98));
  box-shadow: 18px 0 50px -46px rgba(0, 0, 0, 0.9);
}

.khromafy-v2.is-dark .panel-section,
.khromafy-v2.is-dark .work-panel,
.khromafy-v2.is-dark .stage-explore,
.khromafy-v2.is-dark .stage-explore .panel-heading,
.khromafy-v2.is-dark .stage-explore .harmony-row {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.khromafy-v2.is-dark .section-title,
.khromafy-v2.is-dark .panel-heading {
  box-shadow: none;
}

.khromafy-v2.is-dark .panel-section + .panel-section::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.09), transparent);
}

.khromafy-v2.is-dark .stage-tabs {
  border: 0;
  background: rgba(25, 27, 35, 0.82);
  box-shadow: 0 18px 48px -30px rgba(0, 0, 0, 0.86);
}

.khromafy-v2.is-dark .stage-tab-button.is-active,
.khromafy-v2.is-dark .app-sidebar-tab.is-active {
  background: #f4f5f8;
  color: #151821;
}

.khromafy-v2.is-dark .stage-explore .explore-scale-card,
.khromafy-v2.is-dark .palette-source-tabs,
.khromafy-v2.is-dark .app-impact-kit,
.khromafy-v2.is-dark .app-demo-card,
.khromafy-v2.is-dark .cmyk-checker-card {
  border: 0;
  background-color: #181b23;
  box-shadow: 0 28px 70px -50px rgba(0, 0, 0, 0.96);
}

.khromafy-v2.is-dark .app-sidebar-nav,
.khromafy-v2.is-dark .app-viewer-panel {
  border: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 1180px) {
  .khromafy-v2 .studio-shell {
    grid-template-columns: 330px minmax(0, 1fr);
  }

  .khromafy-v2 .control-panel {
    padding-inline: 24px;
  }

  .khromafy-v2 .stage-explore {
    grid-template-columns: 1fr;
  }

  .khromafy-v2 .stage-explore .panel-heading,
  .khromafy-v2 .stage-explore .explore-scale-card,
  .khromafy-v2 .stage-explore .harmony-overview {
    grid-column: 1;
    grid-row: auto;
  }

  .khromafy-v2 .stage-explore .panel-heading {
    margin: 0;
  }

  .khromafy-v2 .app-dashboard-layout {
    grid-template-columns: 1fr;
  }

  .khromafy-v2 .app-sidebar-nav {
    position: static;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

@media (max-width: 820px) {
  .khromafy-v2 .topbar {
    height: 72px;
  }

  .khromafy-v2 .brand::after {
    display: none;
  }

  .khromafy-v2 .studio-shell {
    display: block;
  }

  .khromafy-v2 .control-panel {
    position: relative;
    top: auto;
    max-height: none;
    overflow: visible;
    padding: 28px 24px 40px;
    box-shadow: 0 24px 46px -42px rgba(22, 26, 42, 0.7);
  }

  .khromafy-v2 .canvas-area {
    padding: 24px 22px 72px;
  }

  .khromafy-v2 .stage-tabs {
    top: 84px;
    width: 100%;
  }

  .khromafy-v2 .stage-tab-button {
    min-width: 0;
    padding-inline: 12px;
  }
}

@media (max-width: 560px) {
  .khromafy-v2 .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding-inline: 16px;
    overflow: hidden;
  }

  .khromafy-v2 .brand {
    min-width: 0;
    gap: 9px;
  }

  .khromafy-v2 .brand-mark {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
  }

  .khromafy-v2 .brand strong {
    max-width: 66px;
    overflow: hidden;
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .khromafy-v2 .topbar-actions {
    gap: 5px;
  }

  .khromafy-v2 .theme-switch {
    min-width: 0;
    padding: 6px 8px;
  }

  .khromafy-v2 .theme-switch-label {
    display: none;
  }

  .khromafy-v2 .export-button {
    min-width: auto;
    min-height: 38px;
    padding-inline: 9px;
    font-size: 0.6rem;
  }

  .khromafy-v2 .control-panel,
  .khromafy-v2 .panel-section,
  .khromafy-v2 .section-title,
  .khromafy-v2 .base-editor,
  .khromafy-v2 .base-values,
  .khromafy-v2 .slider-row {
    width: 100%;
    min-width: 0;
  }

  .khromafy-v2 .control-panel {
    overflow-x: hidden;
  }

  .khromafy-v2 .section-title {
    gap: 10px;
  }

  .khromafy-v2 .section-title .icon-button,
  .khromafy-v2 .section-title .secondary-action {
    flex: 0 0 auto;
    padding-inline: 10px;
    font-size: 0.68rem;
  }

  .khromafy-v2 .base-editor {
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 16px;
  }

  .khromafy-v2 .stage-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
  }

  .khromafy-v2 .stage-tab-button {
    gap: 7px;
    min-height: 42px;
    font-size: 0.72rem;
  }

  .khromafy-v2 .stage-tab-button svg {
    width: 18px;
    height: 18px;
  }

  .khromafy-v2 .slider-row {
    grid-template-columns: 78px minmax(0, 1fr) 38px;
    gap: 8px;
  }

  .khromafy-v2 .slider-row input,
  .khromafy-v2 .slider-row output {
    min-width: 0;
  }

  .khromafy-v2 .work-panel {
    padding-top: 30px;
  }

  .khromafy-v2 .stage-explore .explore-scale-card {
    padding: 22px 18px;
    border-radius: 24px;
  }

  .khromafy-v2 .tonal-scale {
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
  }

  .khromafy-v2 .tone-chip {
    min-width: 92px;
    min-height: 164px;
    scroll-snap-align: start;
  }
}

/* Harmony browser: compact comparison with progressive disclosure */
.khromafy-v2 .harmony-browser {
  grid-column: 1 / -1;
  min-width: 0;
  margin-top: 18px;
}

.khromafy-v2 .harmony-browser-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  padding: 0 2px;
}

.khromafy-v2 .harmony-browser-heading h2 {
  margin: 5px 0 6px;
  font: 750 clamp(1.25rem, 1.8vw, 1.75rem)/1.1 var(--font-display);
  letter-spacing: -0.035em;
}

.khromafy-v2 .harmony-browser-heading p {
  max-width: 640px;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.khromafy-v2 .harmony-browser-hint {
  flex: 0 0 auto;
  padding: 9px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ui-accent), white 92%);
  color: var(--ui-accent);
  font-size: 0.66rem;
  font-weight: 800;
}

.khromafy-v2 .harmony-overview {
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 14px;
}

.khromafy-v2 .harmony-overview .harmony-row {
  display: block;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 14px 34px -28px rgba(15, 23, 42, 0.44);
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.khromafy-v2 .harmony-overview .harmony-row[open] {
  grid-column: 1 / -1;
  border-color: color-mix(in srgb, var(--ui-accent), transparent 72%);
  background: #fff;
  box-shadow: 0 22px 52px -36px rgba(15, 23, 42, 0.42);
}

.khromafy-v2 .harmony-summary {
  display: grid;
  min-height: 82px;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  list-style: none;
  cursor: pointer;
}

.khromafy-v2 .harmony-summary::-webkit-details-marker {
  display: none;
}

.khromafy-v2 .harmony-summary:hover {
  background: color-mix(in srgb, var(--ui-accent), white 97%);
}

.khromafy-v2 .harmony-summary-main {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
}

.khromafy-v2 .harmony-summary-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.khromafy-v2 .harmony-summary-copy strong {
  overflow: hidden;
  font: 750 0.86rem/1.2 var(--font-display);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.khromafy-v2 .harmony-summary-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.khromafy-v2 .harmony-summary-palette {
  display: flex;
  align-items: center;
  padding-left: 8px;
}

.khromafy-v2 .harmony-summary-palette i {
  width: 25px;
  height: 25px;
  margin-left: -8px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--summary-color);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
}

.khromafy-v2 .harmony-axis-count {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 800;
  white-space: nowrap;
}

.khromafy-v2 .harmony-chevron {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  background: #f5f6fa;
  color: #747b8f;
}

.khromafy-v2 .harmony-chevron svg {
  width: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform 180ms ease;
}

.khromafy-v2 .harmony-row[open] .harmony-chevron svg {
  transform: rotate(180deg);
}

.khromafy-v2 .harmony-expanded {
  padding: 4px 22px 24px;
  border-top: 1px solid rgba(226, 232, 240, 0.8);
}

.khromafy-v2 .harmony-explanation {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(280px, 1.28fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  padding: 28px clamp(10px, 3vw, 36px);
}

.khromafy-v2 .harmony-wheel {
  position: relative;
  width: min(100%, 270px);
  aspect-ratio: 1;
  justify-self: center;
}

.khromafy-v2 .harmony-wheel-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(#ff3b30, #ffcc00, #52d63d, #23d7c4, #2787f5, #6554ed, #d936d6, #ff3b30);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05), 0 16px 38px -28px rgba(15, 23, 42, 0.5);
}

.khromafy-v2 .harmony-wheel-ring::after {
  position: absolute;
  inset: 25%;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  content: "";
}

.khromafy-v2 .harmony-wheel-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: color-mix(in srgb, var(--ui-accent), transparent 88%);
  stroke: rgba(80, 86, 113, 0.42);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.khromafy-v2 .harmony-wheel-point {
  position: absolute;
  z-index: 2;
  top: var(--point-y);
  left: var(--point-x);
  width: 19px;
  height: 19px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--point);
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.22);
  transform: translate(-50%, -50%);
}

.khromafy-v2 .harmony-wheel-point.is-base {
  width: 23px;
  height: 23px;
  outline: 3px solid color-mix(in srgb, var(--point), transparent 68%);
  outline-offset: 2px;
}

.khromafy-v2 .harmony-wheel-center {
  position: absolute;
  z-index: 2;
  inset: 34%;
  display: grid;
  place-content: center;
  text-align: center;
}

.khromafy-v2 .harmony-wheel-center strong {
  font: 750 0.86rem/1.1 var(--font-display);
}

.khromafy-v2 .harmony-wheel-center small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.57rem;
  font-weight: 700;
}

.khromafy-v2 .harmony-explanation-copy h3 {
  margin: 7px 0 10px;
  font: 750 clamp(1.35rem, 2vw, 1.8rem)/1.1 var(--font-display);
  letter-spacing: -0.035em;
}

.khromafy-v2 .harmony-explanation-copy > p {
  max-width: 590px;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.65;
}

.khromafy-v2 .harmony-use-note {
  display: flex;
  max-width: 590px;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--ui-accent), white 94%);
  color: #545a70;
}

.khromafy-v2 .harmony-use-note > span {
  color: var(--ui-accent);
}

.khromafy-v2 .harmony-use-note p {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 650;
  line-height: 1.45;
}

.khromafy-v2 .harmony-colors-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(226, 232, 240, 0.76);
}

.khromafy-v2 .harmony-colors-heading > div {
  display: grid;
  gap: 3px;
}

.khromafy-v2 .harmony-colors-heading strong {
  font-size: 0.78rem;
}

.khromafy-v2 .harmony-colors-heading span,
.khromafy-v2 .harmony-colors-heading small {
  color: var(--muted);
  font-size: 0.62rem;
}

.khromafy-v2 .harmony-expanded .harmony-grouped {
  grid-template-columns: repeat(var(--count), minmax(210px, 1fr));
  justify-content: stretch;
  gap: 14px;
}

.khromafy-v2 .harmony-expanded .harmony-chip.compact {
  width: 100%;
  max-width: none;
  min-height: 76px;
  aspect-ratio: auto;
  padding: 10px 11px;
  border-radius: 11px;
}

.khromafy-v2 .harmony-expanded .harmony-axis {
  grid-template-columns: repeat(3, minmax(62px, 1fr));
  align-items: stretch;
  gap: 7px;
  padding: 12px;
  border: 1px solid rgba(226, 232, 240, 0.78);
  border-radius: 15px;
  background: #f8f9fc;
}

.khromafy-v2 .harmony-expanded .harmony-axis > small {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 0;
  padding: 0 2px 3px;
  text-align: left;
}

.khromafy-v2 .harmony-expanded .harmony-chip.compact code {
  font-size: 0.56rem;
}

.khromafy-v2 .harmony-levels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.khromafy-v2 .harmony-level {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(226, 232, 240, 0.78);
  border-radius: 15px;
  background: #f8f9fc;
}

.khromafy-v2 .harmony-level-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px 10px;
}

.khromafy-v2 .harmony-level-heading strong {
  font: 750 0.72rem/1 var(--font-display);
}

.khromafy-v2 .harmony-level-heading small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.55rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.khromafy-v2 .harmony-level-colors {
  display: grid;
  grid-template-columns: repeat(var(--count), minmax(54px, 1fr));
  gap: 7px;
}

.khromafy-v2 .harmony-level-colors .harmony-chip.compact {
  display: grid;
  min-width: 0;
  min-height: 84px;
  align-content: space-between;
}

.khromafy-v2 .harmony-level-colors .harmony-chip span {
  overflow: hidden;
  color: color-mix(in srgb, var(--chip-ink), transparent 28%);
  font-size: 0.54rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.khromafy-v2 .harmony-level-colors .harmony-chip.is-axis-base {
  order: 0;
}

.khromafy-v2 .harmony-level-colors .harmony-chip.is-axis-base span {
  color: var(--chip-ink);
  font-weight: 950;
}

.khromafy-v2.is-dark .harmony-overview .harmony-row,
.khromafy-v2.is-dark .harmony-overview .harmony-row[open] {
  border-color: rgba(63, 63, 70, 0.9);
  background: rgba(20, 20, 22, 0.86);
}

.khromafy-v2.is-dark .harmony-summary:hover,
.khromafy-v2.is-dark .harmony-chevron {
  background: rgba(255, 255, 255, 0.055);
}

.khromafy-v2.is-dark .harmony-summary-palette i {
  border-color: #18181b;
}

.khromafy-v2.is-dark .harmony-expanded,
.khromafy-v2.is-dark .harmony-colors-heading {
  border-color: rgba(255, 255, 255, 0.08);
}

.khromafy-v2.is-dark .harmony-expanded .harmony-axis {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

.khromafy-v2.is-dark .harmony-level {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

.khromafy-v2.is-dark .harmony-wheel-ring::after {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(24, 24, 27, 0.94);
}

.khromafy-v2.is-dark .harmony-use-note,
.khromafy-v2.is-dark .harmony-browser-hint {
  background: color-mix(in srgb, var(--ui-accent), #111 80%);
  color: #d4d4d8;
}

@media (max-width: 1280px) {
  .khromafy-v2 .harmony-overview {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }
}

@media (max-width: 760px) {
  .khromafy-v2 .harmony-browser-heading {
    align-items: start;
    flex-direction: column;
  }

  .khromafy-v2 .harmony-browser-hint {
    display: none;
  }

  .khromafy-v2 .harmony-overview {
    grid-template-columns: 1fr;
  }

  .khromafy-v2 .harmony-summary {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .khromafy-v2 .harmony-axis-count {
    display: none;
  }

  .khromafy-v2 .harmony-explanation {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-inline: 0;
  }

  .khromafy-v2 .harmony-wheel {
    width: min(78vw, 250px);
  }

  .khromafy-v2 .harmony-colors-heading {
    align-items: start;
    flex-direction: column;
  }

  .khromafy-v2 .harmony-expanded .harmony-grouped {
    grid-template-columns: 1fr;
  }

  .khromafy-v2 .harmony-expanded .harmony-axis {
    grid-template-columns: repeat(3, minmax(68px, 1fr));
  }

  .khromafy-v2 .harmony-levels {
    grid-template-columns: 1fr;
  }
}

/* Unified high-emphasis actions */
.khromafy-v2 .primary-action-button,
.khromafy-v2 .secondary-action.primary-action-button,
.khromafy-v2 .khromafy-color-apply.primary-action-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--ui-accent);
  color: #032523;
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--ui-accent), transparent 32%);
  font: 850 0.72rem/1 var(--font-display);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.khromafy-v2 .primary-action-button:hover,
.khromafy-v2 .secondary-action.primary-action-button:hover,
.khromafy-v2 .khromafy-color-apply.primary-action-button:hover {
  border: 0;
  background: var(--ui-accent);
  box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--ui-accent), transparent 22%);
  filter: saturate(1.06) brightness(1.01);
  transform: translateY(-2px);
}

.khromafy-v2 .primary-action-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ui-accent), #0f172a 22%);
  outline-offset: 3px;
}

.khromafy-v2 .harmony-apply-action {
  width: fit-content;
  margin-top: 16px;
}

.khromafy-v2 .export-button {
  background: var(--ui-accent);
  color: #032523;
}

.khromafy-v2.is-dark .primary-action-button,
.khromafy-v2.is-dark .secondary-action.primary-action-button,
.khromafy-v2.is-dark .khromafy-color-apply.primary-action-button,
.khromafy-v2.is-dark .export-button {
  color: #032523;
}

/* Feedback UI */
.feedback-fab {
  position: fixed;
  z-index: 90;
  right: 24px;
  bottom: 24px;
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  gap: 9px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #151821;
  color: #fff;
  box-shadow: 0 18px 40px -16px rgba(12, 15, 24, 0.62);
  font: 800 0.76rem/1 var(--font-display);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.feedback-fab svg { width: 20px; height: 20px; }
.feedback-fab:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--ui-accent), #151821 34%);
  box-shadow: 0 22px 48px -16px color-mix(in srgb, var(--ui-accent), transparent 55%);
}
.feedback-fab:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ui-accent), transparent 45%);
  outline-offset: 3px;
}

.feedback-modal {
  width: min(580px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: transparent;
  color: var(--ink);
  overflow: visible;
}
.feedback-modal::backdrop {
  background: rgba(11, 13, 19, 0.48);
  backdrop-filter: blur(12px);
}
.feedback-modal-shell {
  padding: 28px;
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 42px 90px -38px rgba(6, 8, 14, 0.72);
}
.feedback-modal-heading {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  margin-bottom: 24px;
}
.feedback-modal-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ui-accent), white 84%);
  color: color-mix(in srgb, var(--ui-accent), #0b1220 20%);
}
.feedback-modal-icon svg { width: 22px; height: 22px; }
.feedback-modal-heading h2 {
  margin: 4px 0 6px;
  color: var(--ink);
  font: 800 clamp(1.25rem, 3vw, 1.55rem)/1.15 var(--font-display);
}
.feedback-modal-heading p {
  max-width: 43ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
}
.feedback-form { display: grid; gap: 18px; }
.feedback-rating { min-width: 0; margin: 0; padding: 0; border: 0; }
.feedback-rating legend,
.feedback-field > span {
  margin-bottom: 9px;
  color: var(--ink);
  font: 750 0.76rem/1.3 var(--font-display);
}
.feedback-rating > div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.feedback-rating label {
  position: relative;
  display: grid;
  min-height: 72px;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--soft);
  cursor: pointer;
}
.feedback-rating input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.feedback-rating label:has(input:checked) {
  border-color: var(--ui-accent);
  background: color-mix(in srgb, var(--ui-accent), white 91%);
  box-shadow: inset 0 0 0 1px var(--ui-accent);
}
.feedback-rating label > span { font-size: 1.3rem; }
.feedback-rating small {
  color: var(--muted);
  font: 700 0.65rem/1 var(--font-display);
}
.feedback-field { display: grid; }
.feedback-field > span { display: flex; justify-content: space-between; }
.feedback-field > span small { color: var(--muted); font-weight: 600; }
.feedback-field textarea,
.feedback-field input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft);
  color: var(--ink);
  font: 500 0.8rem/1.5 'Inter', sans-serif;
  outline: none;
}
.feedback-field textarea {
  min-height: 118px;
  padding: 13px 14px;
  resize: vertical;
}
.feedback-field input { height: 46px; padding: 0 14px; }
.feedback-field textarea::placeholder,
.feedback-field input::placeholder { color: color-mix(in srgb, var(--muted), transparent 20%); }
.feedback-field textarea:focus,
.feedback-field input:focus {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent), transparent 82%);
}
.feedback-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 2px;
}
.feedback-form-actions p { margin: 0; color: var(--muted); font-size: 0.66rem; }
.feedback-submit {
  min-height: 46px;
  flex: 0 0 auto;
  padding: 0 18px;
  border: 0;
  border-radius: 13px;
  background: var(--ui-accent);
  color: #07120f;
  font: 800 0.74rem/1 var(--font-display);
  cursor: pointer;
}
.khromafy-v2.is-dark .feedback-fab { background: #f4f5f8; color: #151821; }
.khromafy-v2.is-dark .feedback-modal-icon,
.khromafy-v2.is-dark .feedback-rating label:has(input:checked) {
  background: color-mix(in srgb, var(--ui-accent), #181b23 84%);
}

@media (max-width: 640px) {
  .feedback-fab {
    right: 16px;
    bottom: 16px;
    width: 52px;
    padding: 0;
    justify-content: center;
  }
  .feedback-fab span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .feedback-modal-shell { padding: 22px; border-radius: 24px; }
  .feedback-modal-heading { grid-template-columns: auto minmax(0, 1fr); }
  .feedback-modal-heading .modal-close {
    position: absolute;
    top: -8px;
    right: -8px;
  }
  .feedback-form-actions { align-items: stretch; flex-direction: column; }
  .feedback-submit { width: 100%; }
}

.feedback-submit:disabled {
  cursor: wait;
  opacity: 0.68;
}
.feedback-honeypot {
  position: fixed;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.feedback-turnstile { min-height: 65px; }
.feedback-form-message {
  min-height: 18px;
  margin: -5px 0 0;
  color: var(--muted);
  font: 650 0.72rem/1.4 var(--font-display);
}
.feedback-form-message.is-error { color: #b42318; }
.feedback-form-message.is-success { color: #087a5b; }
.feedback-field textarea[aria-invalid="true"] {
  border-color: #d92d20;
  box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.12);
}
.khromafy-v2 .studio-language-select select {
  min-height: 38px;
  padding: 0 28px 0 12px;
  border: 1px solid color-mix(in srgb, var(--ui-accent), transparent 78%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface), white 28%);
  color: var(--text);
  font: 700 0.68rem/1 inherit;
  cursor: pointer;
}

.khromafy-v2.is-dark .studio-language-select select {
  background: color-mix(in srgb, var(--surface), black 10%);
  color: var(--text);
}

@media (max-width: 720px) {
  .khromafy-v2 .studio-language-select select {
    width: 58px;
    min-height: 36px;
    padding-inline: 7px;
    font-size: 0.62rem;
  }
}

/* Iconography and symbol application lab */
.symbol-lab { display:grid; gap:26px; min-width:0; }
.symbol-lab svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.symbol-lab-hero { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:28px; min-height:230px; padding:32px; overflow:hidden; border-radius:28px; background:linear-gradient(135deg,var(--deep),color-mix(in srgb,var(--main),var(--deep) 28%) 60%,var(--main)); color:var(--light); box-shadow:0 28px 60px -34px color-mix(in srgb,var(--deep),transparent 26%); }
.symbol-lab-hero::before,.symbol-lab-hero::after { position:absolute; border:1px solid color-mix(in srgb,var(--light),transparent 78%); border-radius:50%; content:""; pointer-events:none; }
.symbol-lab-hero::before { top:-120px; right:8%; width:310px; height:310px; }
.symbol-lab-hero::after { right:-85px; bottom:-155px; width:360px; height:360px; }
.symbol-lab-hero > div { position:relative; z-index:1; }
.symbol-lab-kicker { display:block; margin-bottom:12px; color:color-mix(in srgb,var(--support),white 28%); font-size:.68rem; font-weight:950; letter-spacing:.11em; text-transform:uppercase; }
.symbol-lab-hero h3 { max-width:720px; margin:0; color:var(--light); font-family:var(--font-display); font-size:clamp(2rem,3.1vw,3.65rem); line-height:.98; letter-spacing:-.045em; }
.symbol-lab-hero p { max-width:690px; margin:18px 0 0; color:color-mix(in srgb,var(--light),transparent 24%); font-size:.84rem; line-height:1.55; }
.symbol-lab-summary { display:grid; grid-template-columns:repeat(3,minmax(78px,1fr)); gap:8px; }
.symbol-lab-summary span { display:grid; min-height:74px; align-content:center; gap:4px; padding:12px; border-radius:16px; background:color-mix(in srgb,var(--light),transparent 87%); color:color-mix(in srgb,var(--light),transparent 20%); font-size:.62rem; text-align:center; backdrop-filter:blur(12px); }
.symbol-lab-summary b { color:var(--light); font-size:1.25rem; }
.symbol-family-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr); gap:24px; }
.symbol-family-panel { min-width:0; padding:24px; border-radius:26px; }
.symbol-family-panel > header,.symbol-duotone-panel > header { display:flex; align-items:end; justify-content:space-between; gap:22px; margin-bottom:20px; }
.symbol-family-panel small,.symbol-context-copy small,.symbol-duotone-panel small { color:var(--main); font-size:.6rem; font-weight:950; letter-spacing:.09em; }
.symbol-family-panel h4,.symbol-context-copy h4,.symbol-duotone-panel h4 { margin:5px 0 0; color:var(--deep); font-family:var(--font-display); font-size:1.18rem; }
.symbol-family-panel header > span { color:var(--muted); font-size:.62rem; font-weight:800; text-align:right; }
.symbol-family-panel--linear { background:color-mix(in srgb,var(--soft),white 56%); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--deep),transparent 92%); }
.symbol-linear-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.symbol-linear-tile { display:grid; min-width:0; aspect-ratio:1.08; place-items:center; align-content:center; gap:12px; padding:16px; border-radius:20px; background:var(--tile-bg); color:var(--tile-ink); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tile-ink),transparent 88%),0 16px 28px -22px color-mix(in srgb,var(--tile-bg),black 32%); transition:transform 180ms ease; }
.symbol-linear-tile:hover { transform:translateY(-4px); }
.symbol-linear-tile svg { width:52px; height:52px; stroke-width:1.8; }
.symbol-linear-tile span { color:currentColor; font-size:.63rem; font-weight:850; }
.symbol-family-panel--solid { background:rgba(255,255,255,.72); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--deep),transparent 91%),0 24px 54px -42px rgba(15,23,42,.35); }
.symbol-solid-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.symbol-solid-tile { position:relative; display:grid; min-width:0; aspect-ratio:.92; place-items:center; align-content:center; gap:9px; padding:12px 8px; overflow:hidden; border-radius:18px; background:white; color:var(--symbol-color); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--deep),transparent 92%),0 10px 24px -22px rgba(15,23,42,.45); }
.symbol-solid-tile::before { position:absolute; width:48px; height:48px; border-radius:16px 22px 14px 24px; background:color-mix(in srgb,var(--symbol-color),transparent 87%); content:""; transform:rotate(12deg); }
.symbol-solid-tile svg { position:relative; width:42px; height:42px; stroke-width:2.6; }
.symbol-solid-tile span { position:relative; color:var(--deep); font-size:.56rem; font-weight:850; }
.symbol-context-panel { display:grid; grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr); align-items:center; gap:28px; padding:26px; border-radius:26px; background:rgba(255,255,255,.58); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--deep),transparent 92%); }
.symbol-context-copy p { max-width:440px; margin:10px 0 0; color:var(--muted); font-size:.74rem; line-height:1.5; }
.symbol-context-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.symbol-context-grid article { display:grid; min-height:164px; place-items:center; align-content:center; gap:15px; border-radius:21px; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--deep),transparent 90%); }
.symbol-context-grid svg { width:62px; height:62px; stroke-width:2.15; }
.symbol-context-grid span { font-size:.63rem; font-weight:850; }
.symbol-context-grid .is-light { background:var(--light); color:var(--main); }
.symbol-context-grid .is-medium { background:color-mix(in srgb,var(--muted),white 40%); color:var(--deep); }
.symbol-context-grid .is-dark { background:var(--deep); color:var(--support); }
.symbol-duotone-panel { padding:26px; border-radius:26px; background:color-mix(in srgb,var(--soft),var(--deep) 14%); }
.symbol-duotone-panel header p { max-width:520px; margin:0; color:color-mix(in srgb,var(--deep),transparent 34%); font-size:.7rem; text-align:right; }
.symbol-duotone-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.symbol-duotone-tile { position:relative; display:grid; min-width:0; min-height:132px; place-items:center; align-content:center; gap:10px; overflow:hidden; border-radius:20px; background:color-mix(in srgb,var(--light),transparent 18%); color:var(--deep); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--deep),transparent 90%); }
.symbol-duotone-tile::after { position:absolute; top:18px; right:18px; width:19px; height:19px; border:5px solid var(--support); border-radius:50%; content:""; }
.symbol-duotone-tile.is-reverse { background:var(--support); color:var(--deep); }
.symbol-duotone-tile.is-reverse::after { border-color:var(--light); }
.symbol-duotone-tile svg { width:45px; height:45px; stroke-width:2.25; }
.symbol-duotone-tile span { font-size:.58rem; font-weight:850; }
.symbol-role-footer { display:flex; flex-wrap:wrap; gap:8px; padding-top:2px; }
.symbol-role-footer span { display:inline-flex; align-items:center; gap:7px; min-height:30px; padding:0 11px; border-radius:999px; background:rgba(255,255,255,.7); color:var(--muted); font-size:.6rem; font-weight:800; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--deep),transparent 92%); }
.symbol-role-footer i { width:9px; height:9px; border-radius:3px; background:var(--role); }
.khromafy-v2.is-dark .symbol-family-panel--solid,.khromafy-v2.is-dark .symbol-context-panel { background:rgba(28,30,38,.76); }
.khromafy-v2.is-dark .symbol-solid-tile { background:#20232c; }
.khromafy-v2.is-dark .symbol-solid-tile span,.khromafy-v2.is-dark .symbol-family-panel h4,.khromafy-v2.is-dark .symbol-context-copy h4,.khromafy-v2.is-dark .symbol-duotone-panel h4 { color:#f4f4f5; }
.khromafy-v2.is-dark .symbol-family-panel--linear,.khromafy-v2.is-dark .symbol-duotone-panel { background:color-mix(in srgb,var(--soft),#090b10 34%); }
.khromafy-v2.is-dark .symbol-duotone-panel header p { color:#a7a7ad; }
.khromafy-v2.is-dark .symbol-role-footer span { background:rgba(32,35,44,.72); }
@media(max-width:1180px){.symbol-family-layout{grid-template-columns:1fr}.symbol-solid-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.symbol-duotone-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.symbol-lab-hero{grid-template-columns:1fr;padding:24px}.symbol-lab-summary{max-width:360px}.symbol-linear-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.symbol-solid-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.symbol-context-panel{grid-template-columns:1fr}.symbol-family-panel>header,.symbol-duotone-panel>header{align-items:flex-start;flex-direction:column}.symbol-family-panel header>span,.symbol-duotone-panel header p{text-align:left}.symbol-context-grid{grid-template-columns:repeat(3,minmax(110px,1fr));overflow-x:auto}.symbol-context-grid article{min-height:140px}.symbol-duotone-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.symbol-family-panel,.symbol-context-panel,.symbol-duotone-panel{padding:18px;border-radius:22px}.symbol-linear-grid,.symbol-solid-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.symbol-context-grid{grid-template-columns:1fr;overflow:visible}.symbol-duotone-tile{min-height:112px}.symbol-lab-summary{grid-template-columns:repeat(3,1fr)}.symbol-lab-summary span{min-height:64px;padding:8px}}


/* Applications navigation and symbol lab responsive refinement */
@media(max-width:1600px){.symbol-family-layout{grid-template-columns:1fr}.symbol-solid-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.symbol-duotone-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.khromafy-v2 .app-dashboard-layout{gap:18px}.khromafy-v2 .app-sidebar-nav{position:relative;top:auto;display:flex;grid-template-columns:none;flex-direction:row;gap:8px;width:100%;padding:2px 0 10px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;scroll-snap-type:x proximity}.khromafy-v2 .app-sidebar-tab{width:auto;min-width:max-content;min-height:44px;flex:0 0 auto;padding:9px 13px;scroll-snap-align:start}.khromafy-v2 .app-sidebar-tab:hover{transform:none}.khromafy-v2 .app-sidebar-tab svg{width:16px;height:16px}.symbol-lab{gap:20px}}

.feedback-social-links {
  position: fixed;
  z-index: 90;
  right: 24px;
  bottom: 86px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.feedback-social-links a {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--line-strong), transparent 34%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #151821;
  box-shadow: 0 16px 32px -20px rgba(12, 15, 24, 0.54);
  backdrop-filter: blur(14px);
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.feedback-social-links a:hover {
  border-color: color-mix(in srgb, var(--ui-accent), transparent 46%);
  background: color-mix(in srgb, var(--ui-accent), white 88%);
  color: #07120f;
  box-shadow: 0 20px 42px -20px color-mix(in srgb, var(--ui-accent), transparent 46%);
  transform: translateY(-2px);
}

.feedback-social-links a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ui-accent), transparent 45%);
  outline-offset: 3px;
}

.feedback-social-links svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.85;
}

.feedback-social-links svg path:first-child {
  fill: currentColor;
  stroke: none;
}

.khromafy-v2.is-dark .feedback-social-links a {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(28, 31, 40, 0.88);
  color: #f4f5f8;
}

.khromafy-v2.is-dark .feedback-social-links a:hover {
  background: color-mix(in srgb, var(--ui-accent), #181b23 78%);
  color: #f4f5f8;
}

@media (max-width: 640px) {
  .feedback-social-links {
    right: 76px;
    bottom: 21px;
  }

  .feedback-social-links a {
    width: 42px;
    height: 42px;
  }
}
/* Center first-run onboarding in the viewport */
.onboarding-shell {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(680px, calc(100vw - 48px));
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  transform: translate(-50%, -50%);
}

@media (max-width: 720px) {
  .onboarding-shell {
    position: fixed;
    top: 50%;
    left: 50%;
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    transform: translate(-50%, -50%);
  }
}