/* Procity Color Studio — palette.css
 * Page-scoped design system for the /color-palettes page.
 * Inherits tokens (--brand, --ink, --line, etc.) from app.css.
 * Mobile-first, dark-mode aware via [data-theme="dark"].
 */

.cs-shell {
  --cs-radius: 18px;
  --cs-radius-sm: 12px;
  --cs-radius-lg: 26px;
  --cs-ring: 0 0 0 1px var(--line);
  --cs-shadow: 0 1px 2px rgba(14,17,22,.04), 0 18px 50px -28px rgba(14,17,22,.18);
  --cs-shadow-strong: 0 30px 80px -40px rgba(14,17,22,.40);
  --cs-surface: var(--surface);
  --cs-surface-2: var(--surface-2);
  --cs-surface-3: var(--surface-3, #F1F5F9);
  --cs-line: var(--line);
  --cs-ink: var(--ink);
  --cs-ink-soft: var(--ink-soft);
  --cs-muted: var(--muted);
  --cs-brand: var(--brand);
  --cs-accent-1: #1F3357;
  --cs-accent-2: #E7B388;
  position: relative;
  margin-top: clamp(20px, 4vw, 36px);
}

[data-theme="dark"] .cs-shell {
  --cs-shadow: 0 1px 2px rgba(0,0,0,.45), 0 22px 60px -34px rgba(0,0,0,.75);
}

/* ----- Sticky tab bar ----- */

.cs-tabbar {
  position: sticky;
  top: 64px;
  z-index: 8;
  background: color-mix(in srgb, var(--cs-surface) 92%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid var(--cs-line);
  border-radius: 999px;
  padding: 6px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  box-shadow: var(--cs-shadow);
  margin-bottom: 22px;
}
.cs-tabbar::-webkit-scrollbar { display: none; }

.cs-tab {
  flex: 1 0 auto;
  border: 0;
  background: transparent;
  color: var(--cs-ink-soft);
  font: 620 .92rem var(--font-body);
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.cs-tab:hover { background: var(--cs-surface-2); color: var(--cs-ink); }
.cs-tab.is-active {
  background: var(--cs-ink);
  color: var(--surface);
  box-shadow: 0 10px 22px -14px rgba(14,17,22,.4);
}
.cs-tab__icon {
  width: 18px; height: 18px;
  display: inline-grid; place-items: center;
}
.cs-tab__count {
  background: color-mix(in srgb, currentColor 12%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: .72rem;
  font-weight: 600;
}

/* ----- Panels ----- */

.cs-panel {
  display: none;
  animation: csFade .35s ease both;
}
.cs-panel.is-active { display: block; }

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

.cs-card {
  background: var(--cs-surface);
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius);
  padding: clamp(18px, 3vw, 28px);
  box-shadow: var(--cs-shadow);
}

.cs-section-title {
  font: 580 1.05rem var(--font-body);
  letter-spacing: -.005em;
  margin: 0 0 4px;
  color: var(--cs-ink);
}
.cs-section-sub {
  color: var(--cs-muted);
  font-size: .9rem;
  margin: 0 0 16px;
}

.cs-grid {
  display: grid;
  gap: 18px;
}

/* ===========================================================
 *  STUDIO
 * ========================================================= */

.cs-studio {
  display: grid;
  /* minmax(0, 1fr), not 1fr: a plain 1fr track has an auto minimum, so a child
     whose min-content is wider than the column (the scene SVG, the surface
     rows) pushes the whole page sideways on a phone. */
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
.cs-studio > * { min-width: 0; }

@media (min-width: 980px) {
  .cs-studio { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); }
}

.cs-stage {
  --c-ceiling: #FAFAF6;
  --c-wall: #F4F0E8;
  --c-feature: #C76D4B;
  --c-trim: #1A1A1C;
  --c-floor: #C9A07A;
  --c-accent: #E7B388;
  --c-light: #FFF6DC;
  position: relative;
  aspect-ratio: 800 / 520;
  border-radius: var(--cs-radius-lg);
  overflow: hidden;
  border: 1px solid var(--cs-line);
  box-shadow: var(--cs-shadow-strong);
  background: #000;
  transition: filter .55s ease;
}

.cs-stage__svg { position: absolute; inset: 0; }
.cs-stage svg.scene-svg {
  width: 100%; height: 100%; display: block;
  transition: transform .8s cubic-bezier(.16,.84,.44,1);
}
.cs-stage:hover svg.scene-svg { transform: scale(1.02); }

.cs-stage::after {
  /* Grain + vignette overlay for realism */
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 20% 20%, transparent 40%, rgba(0,0,0,.18) 100%),
    radial-gradient(60% 40% at 80% 0%, rgba(255,255,255,.18), transparent 70%);
  mix-blend-mode: multiply;
}
.cs-stage::before {
  /* Subtle film grain */
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.35'/></svg>");
  mix-blend-mode: overlay;
  opacity: .18;
}

.cs-stage.is-golden { filter: saturate(1.06) hue-rotate(-4deg) brightness(1.02); }
.cs-stage.is-night {
  filter: saturate(.85) brightness(.55) hue-rotate(8deg);
}
.cs-stage.is-night::after {
  background:
    radial-gradient(80% 60% at 50% 80%, transparent 0%, rgba(0,8,30,.55) 100%),
    radial-gradient(40% 30% at 30% 30%, rgba(255,220,170,.35), transparent 70%);
}

.cs-stage__controls {
  position: absolute;
  top: 12px; left: 12px; right: 12px;
  display: flex; gap: 8px; flex-wrap: wrap;
  z-index: 4;
}
.cs-stage__select {
  background: color-mix(in srgb, #000 55%, transparent);
  color: #fff;
  border: 1px solid color-mix(in srgb, #fff 18%, transparent);
  border-radius: 999px;
  padding: 8px 14px 8px 12px;
  font: 600 .82rem var(--font-body);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 30px;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.cs-stage__select:focus { outline: 2px solid rgba(255,255,255,.4); outline-offset: 2px; }

.cs-stage__badge {
  margin-left: auto;
  background: color-mix(in srgb, #000 50%, transparent);
  color: #fff;
  font: 600 .72rem var(--font-mono);
  letter-spacing: .04em;
  padding: 6px 12px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, #fff 16%, transparent);
}

/* Surface control panel */

.cs-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.cs-controls > * { min-width: 0; }
.cs-surfaces { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.cs-surfaces > * { min-width: 0; }
.cs-surface {
  background: var(--cs-surface-2);
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius-sm);
  padding: 12px;
}
.cs-surface__label {
  display: block;
  font: 620 .78rem var(--font-body);
  color: var(--cs-ink-soft);
  margin-bottom: 8px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.cs-surface__group {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.cs-surface__group > * { min-width: 0; }
/* Below ~380px the swatch, hex field and Name button cannot share one line. */
@media (max-width: 380px) {
  .cs-surface__group { grid-template-columns: 44px minmax(0, 1fr); }
  .cs-surface__group .cs-surface__name { grid-column: 1 / -1; }
}
.cs-surface__group input[type="color"] {
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 1px solid var(--cs-line);
  padding: 3px;
  background: var(--cs-surface);
  cursor: pointer;
}
.cs-surface__hex {
  height: 44px;
  border: 1px solid var(--cs-line);
  border-radius: 10px;
  padding: 0 12px;
  font: 600 .88rem var(--font-mono);
  color: var(--cs-ink);
  background: var(--cs-surface);
  text-transform: uppercase;
}
.cs-surface__hex:focus { outline: 2px solid var(--cs-brand); outline-offset: 1px; }
.cs-surface__name {
  border: 1px solid var(--cs-line);
  background: var(--cs-surface);
  border-radius: 999px;
  padding: 0 14px;
  height: 44px;
  font: 600 .8rem var(--font-body);
  color: var(--cs-ink);
  cursor: pointer;
}
.cs-surface__name:hover { border-color: var(--cs-brand); color: var(--cs-brand); }
.cs-surface__readout {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  font: 500 .76rem var(--font-mono);
  color: var(--cs-muted);
}
.cs-surface__readout b { color: var(--cs-ink); font-family: var(--font-body); font-weight: 600; }
.cs-surface__readout span:first-child { grid-column: 1 / -1; font-size: .85rem; }

/* Stage actions */

.cs-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.cs-btn {
  border: 1px solid var(--cs-line);
  background: var(--cs-surface);
  color: var(--cs-ink);
  border-radius: 999px;
  padding: 10px 16px;
  font: 600 .85rem var(--font-body);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform .14s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.cs-btn:hover { border-color: var(--cs-ink); transform: translateY(-1px); }
.cs-btn--solid {
  background: var(--cs-ink);
  border-color: var(--cs-ink);
  color: var(--surface);
}
.cs-btn--solid:hover { background: var(--cs-brand); border-color: var(--cs-brand); color: #fff; }
.cs-btn--brand {
  background: var(--cs-brand);
  border-color: var(--cs-brand);
  color: #fff;
}

/* Summary chips */

.cs-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 600px) { .cs-summary { grid-template-columns: repeat(3, 1fr); } }
.cs-summary__chip {
  border: 0;
  border-radius: var(--cs-radius-sm);
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  display: grid; gap: 2px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 12px 28px -22px rgba(0,0,0,.5);
  transition: transform .15s ease;
}
.cs-summary__chip:hover { transform: translateY(-2px); }
.cs-summary__chip span { font: 600 .7rem var(--font-body); text-transform: uppercase; letter-spacing: .06em; opacity: .82; }
.cs-summary__chip strong { font: 700 .9rem var(--font-mono); }
.cs-summary__chip em { font: 500 .76rem var(--font-body); font-style: normal; opacity: .82; }

/* ===========================================================
 *  LIBRARY
 * ========================================================= */

.cs-library__head {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}
@media (min-width: 760px) {
  .cs-library__head { grid-template-columns: 1.4fr 1fr 1fr 1fr auto; align-items: center; }
}

.cs-search {
  position: relative;
}
.cs-search input,
.cs-select {
  width: 100%;
  height: 46px;
  border: 1px solid var(--cs-line);
  background: var(--cs-surface);
  border-radius: 999px;
  padding: 0 16px 0 44px;
  font: 600 .9rem var(--font-body);
  color: var(--cs-ink);
}
.cs-search input:focus, .cs-select:focus { outline: none; border-color: var(--cs-ink); box-shadow: 0 0 0 4px rgba(14,17,22,.06); }
.cs-search::before {
  content: "";
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%236A6F78' stroke-width='2' viewBox='0 0 24 24'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>") center/contain no-repeat;
}
.cs-select {
  padding: 0 40px 0 18px;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%236A6F78' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}

.cs-library__meta {
  color: var(--cs-muted);
  font: 500 .82rem var(--font-body);
  margin: 12px 0 14px;
}

.cs-library__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) { .cs-library__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cs-library__grid { grid-template-columns: repeat(3, 1fr); } }

.cs-pal {
  background: var(--cs-surface);
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--cs-shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cs-pal:hover {
  transform: translateY(-4px);
  border-color: var(--cs-ink);
  box-shadow: var(--cs-shadow-strong);
}
.cs-pal__swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  height: 100px;
}
.cs-pal__swatches span { display: block; }

.cs-pal__body { padding: 16px; display: grid; gap: 10px; }
.cs-pal__body h3 { font: 620 1rem var(--font-body); margin: 0; color: var(--cs-ink); }
.cs-pal__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-tag {
  display: inline-flex; align-items: center;
  background: var(--cs-surface-2);
  border: 1px solid var(--cs-line);
  border-radius: 999px;
  padding: 4px 10px;
  font: 600 .72rem var(--font-body);
  color: var(--cs-ink-soft);
}
.cs-tag--mood {
  background: color-mix(in srgb, var(--cs-brand) 8%, transparent);
  border-color: color-mix(in srgb, var(--cs-brand) 35%, var(--cs-line));
  color: var(--cs-brand);
}
.cs-pal__codes {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.cs-pal__code {
  border: 0;
  padding: 8px 4px;
  border-radius: 8px;
  background: var(--cc, #ccc);
  font: 700 .68rem var(--font-mono);
  text-align: center;
  cursor: pointer;
  display: grid;
  gap: 2px;
}
.cs-pal__code i {
  font-style: normal;
  font-weight: 500;
  opacity: .85;
  letter-spacing: -.02em;
}
.cs-pal__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.cs-pal__actions .cs-btn { padding: 8px 12px; font-size: .8rem; }

/* Pagination */

.cs-pages {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
  margin-top: 22px;
}
.cs-page {
  border: 1px solid var(--cs-line);
  background: var(--cs-surface);
  color: var(--cs-ink);
  border-radius: 10px;
  padding: 8px 13px;
  font: 600 .82rem var(--font-body);
  cursor: pointer;
  min-width: 38px;
}
.cs-page:hover:not(:disabled) { border-color: var(--cs-ink); }
.cs-page.is-current { background: var(--cs-ink); color: var(--surface); border-color: var(--cs-ink); }
.cs-page:disabled { opacity: .4; cursor: not-allowed; }
.cs-page--gap { border: 0; background: transparent; cursor: default; padding: 8px 4px; }

/* ===========================================================
 *  MIXER
 * ========================================================= */

.cs-mixer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 980px) {
  .cs-mixer { grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); }
  .cs-mix__out { position: sticky; top: 124px; }
}

.cs-mix__head {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-bottom: 14px;
}
.cs-mix__head label { color: var(--cs-muted); font: 600 .82rem var(--font-body); }

.cs-mix__list { display: grid; gap: 12px; }
.cs-mix__row {
  display: grid;
  grid-template-columns: 56px 110px 1fr 1fr 38px;
  gap: 8px;
  align-items: center;
  background: var(--cs-surface-2);
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius-sm);
  padding: 10px;
}
@media (max-width: 720px) {
  .cs-mix__row {
    grid-template-columns: 56px 1fr 38px;
    grid-template-areas: 'sw hex rm' 'name name name' 'slider slider slider';
  }
  .cs-mix__row .cs-mix__swatch { grid-area: sw; }
  .cs-mix__row .cs-mix__hex { grid-area: hex; }
  .cs-mix__row .cs-mix__name { grid-area: name; }
  .cs-mix__row .cs-mix__slider { grid-area: slider; }
  .cs-mix__row .cs-mix__rm { grid-area: rm; }
}
.cs-mix__swatch {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 12px;
  border: 1px solid var(--cs-line);
  overflow: hidden;
}
.cs-mix__swatch input[type="color"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; padding: 0; background: transparent;
  cursor: pointer;
  opacity: 0;
}
.cs-mix__hex {
  border: 1px solid var(--cs-line);
  background: var(--cs-surface);
  border-radius: 10px;
  height: 44px;
  padding: 0 12px;
  font: 600 .85rem var(--font-mono);
  text-transform: uppercase;
  color: var(--cs-ink);
}
.cs-mix__name {
  border: 1px solid var(--cs-line);
  background: var(--cs-surface);
  border-radius: 10px;
  height: 44px;
  padding: 0 12px;
  font: 500 .9rem var(--font-body);
  color: var(--cs-ink);
}
.cs-mix__slider { display: grid; gap: 4px; }
.cs-mix__slider label {
  font: 600 .72rem var(--font-body);
  color: var(--cs-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cs-mix__slider input[type="range"] {
  width: 100%;
  accent-color: var(--cs-brand);
}
.cs-mix__rm {
  border: 1px solid var(--cs-line);
  background: var(--cs-surface);
  color: var(--cs-muted);
  border-radius: 10px;
  width: 38px; height: 44px;
  font-size: 22px;
  cursor: pointer;
}
.cs-mix__rm:hover:not(:disabled) { border-color: var(--cs-brand); color: var(--cs-brand); }
.cs-mix__rm:disabled { opacity: .4; cursor: not-allowed; }

.cs-mix__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.cs-mix__out {
  border-radius: var(--cs-radius);
  padding: 28px 22px;
  text-align: center;
  display: grid; gap: 14px;
  box-shadow: var(--cs-shadow-strong);
  transition: background .8s cubic-bezier(.16,.84,.44,1), color .8s ease;
  overflow: hidden;
  border: 1px solid var(--cs-line);
}
.cs-mix__out::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 45%);
  pointer-events: none;
}
.cs-mix__out > * { position: relative; }
.cs-mix__out-eyebrow {
  font: 600 .74rem var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .72;
}
.cs-mix__out-name {
  font: 620 1.4rem var(--font-body);
  letter-spacing: -.005em;
  margin: 0;
}
.cs-mix__out-hex {
  font: 700 1.1rem var(--font-mono);
  cursor: pointer;
  display: inline-block;
  padding: 6px 12px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.cs-mix__detail { display: grid; gap: 6px; font: 500 .8rem var(--font-body); opacity: .92; }
.cs-mix__detail span { opacity: .72; }
.cs-mix__detail b { font-family: var(--font-mono); letter-spacing: -.01em; }

.cs-recipe { display: grid; gap: 8px; margin-top: 16px; }
.cs-recipe__row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 2fr) 50px;
  align-items: center;
  gap: 8px;
  font: 500 .82rem var(--font-body);
  padding: 8px 10px;
  background: var(--cs-surface-2);
  border: 1px solid var(--cs-line);
  border-radius: 10px;
}
.cs-dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--cs-line); }
.cs-recipe__row strong { color: var(--cs-ink); }
.cs-recipe__row em { font-style: normal; color: var(--cs-muted); font-family: var(--font-mono); }
.cs-recipe__bar {
  background: var(--cs-surface-3);
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--cs-line);
}
.cs-recipe__bar b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--cs-brand), color-mix(in srgb, var(--cs-brand) 60%, #000));
  border-radius: 999px;
}
.cs-recipe__pct { text-align: right; font-family: var(--font-mono); color: var(--cs-ink); }

.cs-harmony { display: grid; gap: 10px; margin-top: 16px; }
.cs-harmony__row { display: grid; gap: 6px; }
.cs-harmony__label {
  font: 600 .76rem var(--font-body);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cs-muted);
}
.cs-harmony__swatches { display: flex; gap: 4px; flex-wrap: wrap; }
.cs-harmony__sw {
  border: 0;
  padding: 8px 10px;
  border-radius: 8px;
  font: 600 .72rem var(--font-mono);
  cursor: pointer;
  min-width: 70px;
  text-align: center;
}

/* ===========================================================
 *  ENCYCLOPEDIA
 * ========================================================= */

.cs-enc {
  display: grid;
  gap: 18px;
}
@media (min-width: 980px) { .cs-enc { grid-template-columns: minmax(0, 1.2fr) minmax(320px, .9fr); } }

.cs-enc__head { display: grid; gap: 12px; margin-bottom: 14px; }

.cs-enc__meta { color: var(--cs-muted); font: 500 .82rem var(--font-body); }

.cs-enc__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 520px) { .cs-enc__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 760px) { .cs-enc__grid { grid-template-columns: repeat(4, 1fr); } }

.cs-enc__sw {
  border: 0;
  padding: 14px 10px;
  border-radius: 10px;
  cursor: pointer;
  display: grid; gap: 4px;
  text-align: left;
  min-height: 80px;
  transition: transform .15s ease, box-shadow .2s ease;
}
.cs-enc__sw:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -18px rgba(0,0,0,.4); }
.cs-enc__sw strong { font: 620 .85rem var(--font-body); }
.cs-enc__sw span { font: 500 .72rem var(--font-mono); opacity: .85; }

.cs-enc__detail {
  display: grid;
  gap: 12px;
}
@media (min-width: 980px) {
  .cs-enc__detail { position: sticky; top: 124px; }
}

.cs-enc__hero {
  position: relative;
  border-radius: var(--cs-radius);
  padding: 28px 22px;
  min-height: 180px;
  overflow: hidden;
  border: 1px solid var(--cs-line);
  display: flex; align-items: flex-end;
}
.cs-enc__hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 40% at 80% 20%, rgba(255,255,255,.22), transparent 60%);
}
.cs-enc__hero-inner { position: relative; }
.cs-enc__eyebrow { font: 600 .72rem var(--font-body); letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.cs-enc__hero h3 { font: 620 1.5rem var(--font-body); margin: 4px 0 6px; letter-spacing: -.005em; }
.cs-enc__hex { font: 700 1rem var(--font-mono); margin: 0; opacity: .9; }

.cs-enc__codes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.cs-enc__codes > div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  background: var(--cs-surface-2);
  border: 1px solid var(--cs-line);
  border-radius: 10px;
  padding: 10px 12px;
  font: 500 .8rem var(--font-body);
}
.cs-enc__codes span { color: var(--cs-muted); font: 600 .72rem var(--font-body); text-transform: uppercase; letter-spacing: .04em; grid-column: 1 / -1; margin-bottom: 4px; }
.cs-enc__codes b { font-family: var(--font-mono); color: var(--cs-ink); }
.cs-enc__codes button {
  border: 0; background: transparent;
  color: var(--cs-muted); cursor: pointer; font-size: 14px;
  width: 26px; height: 26px;
  display: inline-grid; place-items: center;
  border-radius: 6px;
}
.cs-enc__codes button:hover { background: var(--cs-line); color: var(--cs-ink); }

.cs-enc__section {
  background: var(--cs-surface);
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius);
  padding: 16px;
}
.cs-enc__section h4 {
  margin: 0 0 12px;
  font: 620 .92rem var(--font-body);
  color: var(--cs-ink);
}

.cs-enc__similar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.cs-enc__sim {
  border: 0; cursor: pointer;
  border-radius: 10px;
  padding: 10px;
  display: grid; gap: 2px;
  text-align: left;
}
.cs-enc__sim strong { font: 620 .8rem var(--font-body); }
.cs-enc__sim span { font: 500 .7rem var(--font-mono); opacity: .85; }
.cs-enc__sim em { font-style: normal; font-family: var(--font-mono); opacity: .7; font-size: .68rem; }

.cs-enc__send { display: flex; gap: 6px; flex-wrap: wrap; }
.cs-enc__send .cs-btn { padding: 8px 12px; font-size: .8rem; }

/* ===========================================================
 *  NAME PICKER OVERLAY
 * ========================================================= */

.cs-namepick {
  position: fixed; inset: 0;
  background: color-mix(in srgb, #000 55%, transparent);
  backdrop-filter: blur(6px);
  z-index: 100;
  display: grid; place-items: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .2s ease;
}
.cs-namepick.is-in { opacity: 1; }
.cs-namepick__panel {
  background: var(--cs-surface);
  border-radius: var(--cs-radius-lg);
  box-shadow: var(--cs-shadow-strong);
  width: 100%;
  max-width: 720px;
  max-height: 80vh;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--cs-line);
  transform: translateY(8px) scale(.98);
  transition: transform .25s cubic-bezier(.16,.84,.44,1);
}
.cs-namepick.is-in .cs-namepick__panel { transform: translateY(0) scale(1); }
.cs-namepick__head {
  display: grid;
  grid-template-columns: 1fr 44px;
  gap: 8px;
  padding: 14px;
  border-bottom: 1px solid var(--cs-line);
  background: var(--cs-surface-2);
}
.cs-namepick__input {
  height: 44px;
  border: 1px solid var(--cs-line);
  background: var(--cs-surface);
  border-radius: 10px;
  padding: 0 16px;
  font: 500 .95rem var(--font-body);
  color: var(--cs-ink);
}
.cs-namepick__close {
  border: 1px solid var(--cs-line);
  background: var(--cs-surface);
  border-radius: 10px;
  font-size: 22px; line-height: 1;
  cursor: pointer;
  color: var(--cs-muted);
}
.cs-namepick__grid {
  padding: 14px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 540px) { .cs-namepick__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px) { .cs-namepick__grid { grid-template-columns: repeat(4, 1fr); } }
.cs-namepick__sw {
  border: 0; cursor: pointer;
  padding: 12px 10px;
  border-radius: 10px;
  display: grid; gap: 2px;
  text-align: left;
  transition: transform .15s ease;
}
.cs-namepick__sw:hover { transform: translateY(-2px); }
.cs-namepick__sw strong { font: 620 .82rem var(--font-body); }
.cs-namepick__sw span { font: 500 .7rem var(--font-mono); opacity: .85; }

/* ===========================================================
 *  NAME SUGGEST POPOVER (inline; mixer)
 * ========================================================= */

.cs-suggest {
  position: absolute;
  z-index: 30;
  max-height: 240px;
  overflow-y: auto;
  background: var(--cs-surface);
  border: 1px solid var(--cs-line);
  border-radius: 12px;
  padding: 6px;
  box-shadow: var(--cs-shadow-strong);
  display: none;
}
.cs-suggest.is-in { display: block; }
.cs-suggest button {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 6px;
  padding: 8px;
  text-align: left;
  cursor: pointer;
  font: 500 .85rem var(--font-body);
}
.cs-suggest button:hover { background: var(--cs-surface-2); }
.cs-suggest__dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--cs-line); }
.cs-suggest button em { font-style: normal; font-family: var(--font-mono); color: var(--cs-muted); font-size: .72rem; }

/* ===========================================================
 *  TOAST
 * ========================================================= */

.cs-toast-host {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 200;
  display: grid;
  gap: 8px;
  pointer-events: none;
}
.cs-toast {
  background: var(--cs-ink);
  color: var(--surface);
  border-radius: 12px;
  padding: 10px 16px;
  font: 600 .82rem var(--font-body);
  box-shadow: var(--cs-shadow-strong);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease;
}
.cs-toast.is-in { opacity: 1; transform: translateY(0); }

/* ===========================================================
 *  SMALL UTILITIES + DARK MODE NUDGES
 * ========================================================= */

[data-theme="dark"] .cs-tabbar {
  background: color-mix(in srgb, var(--cs-surface) 70%, transparent);
}
[data-theme="dark"] .cs-tab.is-active { background: #fff; color: #0B0B0D; }
[data-theme="dark"] .cs-btn--solid { background: #fff; color: #0B0B0D; border-color: #fff; }
[data-theme="dark"] .cs-stage::before { opacity: .25; }

@media (prefers-reduced-motion: reduce) {
  .cs-stage svg.scene-svg, .cs-pal, .cs-summary__chip, .cs-mix__out, .cs-tab { transition: none !important; }
  @keyframes csFade { from { opacity: 1; } to { opacity: 1; } }
}