/* ═══════════════════════════════════════════════════════════════════
   settings.css — the Settings redesign (design change, CHANGELOG
   2026-09-30; Swift: SettingsPlane.swift, future SettingsVisuals.swift)

   Plane: large title + a live glass bento (one tile per section).
   Sheets: inset-grouped glass cards, iOS 26 controls, per-section
   hue (--card-rgb, from the palace families) for each hero visual.
   Prefix: .set-
   ═══════════════════════════════════════════════════════════════════ */

.pm-app {
  --set-card-bg: rgb(var(--wash-rgb) / calc(0.055 * var(--wash-k)));
  --set-card-stroke: rgb(var(--wash-rgb) / calc(0.10 * var(--wash-k)));
  --set-well-bg: rgb(var(--wash-rgb) / calc(0.05 * var(--wash-k)));
  --set-mark-base: rgb(17 21 34);
}
.pm-app[data-appearance="light"] {
  --set-card-bg: rgb(255 255 255 / 0.52);
  --set-card-stroke: rgb(255 255 255 / 0.85);
  --set-well-bg: rgb(var(--wash-rgb) / 0.045);
  --set-mark-base: rgb(246 249 253);
}

/* ── Plane: ScrollView > VStack(minHeight: viewport).padding(.bottom, planeBottom) ── */
.set-plane {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
.set-plane-content { display: flex; flex-direction: column; }

/* Large title on the grid's 20 pt inset (fixes the old 24/20 misalignment). */
.set-header { display: flex; flex-direction: column; gap: 2px; padding: 0 20px 16px; }
.set-header.wide { width: 100%; max-width: 780px; margin: 0 auto; }
.set-header-title { font: 700 34px/41px var(--font-display); letter-spacing: 0.37px; color: var(--ink); }
.set-header-sub { font: 400 15px/20px var(--font-sans); letter-spacing: -0.24px; color: var(--ink-soft); }

/* ── Bento: Grid(2 or 3 columns, spacing 12) ── */
.set-bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 20px 18px; }
.set-bento.wide { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 780px; margin: 0 auto; }
.set-tile-slot { display: flex; min-width: 0; opacity: 0; }
.set-bento.entered .set-tile-slot { animation: set-tile-in var(--dur-glide) var(--ease-glide) calc(var(--i) * 45ms) both; }
@keyframes set-tile-in {
  from { opacity: 0; transform: translateY(16px) scale(0.965); }
  60% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
.set-tile-slot.span-2 { grid-column: span 2; }
.set-tile-slot.span-3 { grid-column: span 3; }
.set-tile-glass { flex: 1; min-width: 0; display: flex; }
.set-tile-halo {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(130% 100% at 0% 0%, rgb(var(--card-rgb) / 0.17), transparent 62%);
  pointer-events: none;
  z-index: -1;
}
.pm-app .set-tile {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-height: 142px;
  padding: 14px;
  border-radius: inherit;
  text-align: left;
  color: var(--ink);
}
.set-tile-slot.span-2 .set-tile, .set-tile-slot.span-3 .set-tile { min-height: 0; gap: 8px; }
.set-tile > .set-tile-value:not(:first-child) { margin-top: auto; }
.set-tile-head { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 2px; }
.set-tile-icon {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: rgb(var(--card-rgb));
  background: rgb(var(--card-rgb) / 0.15);
  box-shadow: inset 0 0 0 0.5px rgb(var(--card-rgb) / 0.4), 0 0 14px rgb(var(--card-rgb) / 0.25);
}
.set-tile-title {
  flex: 1;
  min-width: 0;
  font: 600 13px/16px var(--font-sans);
  letter-spacing: -0.08px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.set-tile-chevron { flex: none; display: grid; color: var(--ink-ghost); }
.set-tile-value { min-width: 0; font: 600 17px/22px var(--font-sans); letter-spacing: -0.41px; color: var(--ink); overflow-wrap: anywhere; }
.set-tile-value.clamp2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.set-tile-sub {
  min-width: 0;
  font: 400 13px/17px var(--font-sans);
  letter-spacing: -0.08px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.set-tile-sub .sf { vertical-align: -1px; }
.set-tile-sub.with-icon { display: flex; align-items: center; gap: 4px; }
.set-tile-sub.with-icon .sf { flex: none; }
.set-tile-sub.warn { color: var(--orange); }
.set-tile-sub.bad { color: var(--danger); }
.set-tile-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.set-tile-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.set-tile-glyph { display: flex; align-items: center; height: 30px; color: rgb(var(--card-rgb)); }

/* Status pill (tile, hero) */
.set-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  font: 600 12px/16px var(--font-sans);
  color: var(--ink-soft);
  background: rgb(var(--wash-rgb) / calc(0.07 * var(--wash-k)));
  white-space: nowrap;
}
.set-pill.status-connected { color: var(--accent); background: rgb(var(--accent-rgb) / 0.13); }
.set-pill.status-connecting { color: var(--orange); background: rgb(var(--orange-rgb) / 0.13); }
.set-pill.status-disconnected { color: var(--danger); background: rgb(var(--danger-rgb) / 0.13); }
.set-pill.status-vault { color: rgb(var(--card-rgb)); background: rgb(var(--card-rgb) / 0.13); }

/* Model tile: capability orbs */
.set-tile-caps { display: flex; align-items: center; gap: 6px; height: 30px; }
.set-tile-cap {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink-ghost);
  background: rgb(var(--wash-rgb) / calc(0.05 * var(--wash-k)));
  box-shadow: inset 0 0 0 0.5px rgb(var(--wash-rgb) / calc(0.1 * var(--wash-k)));
}
.set-tile-cap.on {
  color: rgb(var(--card-rgb));
  background: rgb(var(--card-rgb) / 0.14);
  box-shadow: inset 0 0 0 0.6px rgb(var(--card-rgb) / 0.5), 0 0 12px rgb(var(--card-rgb) / 0.3);
}

/* Sparkline: the distribution a profile makes */
.set-spark { display: flex; align-items: flex-end; gap: 3px; height: 30px; min-width: 0; }
.set-spark i {
  flex: 1 1 0;
  max-width: 10px;
  height: calc(var(--h) * 100%);
  border-radius: 2px;
  background: linear-gradient(to top, rgb(var(--card-rgb) / 0.5), rgb(var(--card-rgb)));
  transition: height var(--dur-settle) var(--ease-settle), background 0.3s ease;
}
.set-spark i.cut { background: rgb(var(--wash-rgb) / calc(0.14 * var(--wash-k))); }

/* Voice tile: bars that breathe */
.set-wave { display: flex; align-items: center; gap: 3px; height: 30px; }
.set-wave i {
  width: 3.5px;
  height: calc(var(--s) * 100%);
  border-radius: 2px;
  background: rgb(var(--card-rgb));
  box-shadow: 0 0 8px rgb(var(--card-rgb) / 0.45);
  transform: scaleY(0.5);
  animation: set-wave 1.7s var(--ease-in-out) var(--d) infinite alternate;
}
.set-wave.lively i { animation-duration: 0.6s; }
.set-bento:not(.entered) .set-wave i { animation-play-state: paused; }
@keyframes set-wave { from { transform: scaleY(0.3); } to { transform: scaleY(1); } }

/* Library monograms (tile stack, sheet cards) */
.set-tile-marks { display: flex; align-items: center; height: 30px; padding-left: 2px; }
.set-mark {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 10px/1 var(--font-rounded);
  letter-spacing: -0.2px;
  color: rgb(var(--mark-rgb));
  background: radial-gradient(circle at 30% 25%, rgb(var(--mark-rgb) / 0.34), rgb(var(--mark-rgb) / 0.1) 70%), var(--set-mark-base);
  box-shadow: 0 0 0 1.5px var(--set-mark-base), inset 0 0 0 0.6px rgb(var(--mark-rgb) / 0.55);
}
.set-tile-marks .set-mark + .set-mark { margin-left: -7px; }

/* Theme swatch: a tiny phone in one appearance. Colours depict the themes themselves. */
.set-swatch {
  position: relative;
  flex: none;
  width: 42px;
  height: 56px;
  border-radius: 10px;
  overflow: clip;
  box-shadow: 0 0 0 0.6px rgb(var(--wash-rgb) / calc(0.22 * var(--wash-k))), 0 4px 12px -4px rgb(0 0 0 / 0.4);
}
.set-swatch-screen { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 4px; padding: 22% 14% 0; }
.set-swatch-screen.dark { background: radial-gradient(90% 60% at 30% 20%, rgb(60 110 200 / 0.55), transparent), linear-gradient(165deg, rgb(21 32 66), rgb(6 8 16) 75%); }
.set-swatch-screen.light { background: radial-gradient(90% 60% at 30% 20%, rgb(150 200 255 / 0.6), transparent), linear-gradient(165deg, rgb(246 249 255), rgb(200 218 243)); }
.set-swatch-screen.split { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.set-swatch-screen i { display: block; height: 11%; max-height: 7px; border-radius: 4px; }
.set-swatch-screen .b1 { align-self: flex-end; width: 60%; }
.set-swatch-screen .b2 { width: 88%; }
.set-swatch-screen .b3 { width: 55%; }
.set-swatch-screen.dark .b1 { background: rgb(107 219 255 / 0.85); }
.set-swatch-screen.dark .b2, .set-swatch-screen.dark .b3 { background: rgb(255 255 255 / 0.32); }
.set-swatch-screen.light .b1 { background: rgb(0 117 168 / 0.85); }
.set-swatch-screen.light .b2, .set-swatch-screen.light .b3 { background: rgb(26 31 46 / 0.24); }

/* ── Link line: phone ── photons ── host ── */
.set-link { display: flex; align-items: center; gap: 6px; height: 44px; min-width: 0; }
.set-link.compact { height: 32px; }
.set-link-canvas { flex: 1 1 auto; min-width: 0; height: 100%; display: block; }
.set-link-node {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  background: rgb(var(--wash-rgb) / calc(0.06 * var(--wash-k)));
  box-shadow: inset 0 0 0 0.6px rgb(var(--wash-rgb) / calc(0.16 * var(--wash-k)));
  transition: color 0.35s ease, box-shadow 0.45s var(--ease-settle), background 0.35s ease;
}
.set-link.compact .set-link-node { width: 30px; height: 30px; }
.set-link.status-connected .set-link-node {
  color: var(--accent);
  background: rgb(var(--accent-rgb) / 0.1);
  box-shadow: inset 0 0 0 0.6px rgb(var(--accent-rgb) / 0.5), 0 0 16px rgb(var(--accent-rgb) / 0.3);
}
.set-link.status-connecting .set-link-node.host {
  color: var(--orange);
  box-shadow: inset 0 0 0 0.6px rgb(var(--orange-rgb) / 0.55), 0 0 14px rgb(var(--orange-rgb) / 0.3);
  animation: set-node-pulse 1.3s var(--ease-in-out) infinite alternate;
}
.set-link.status-disconnected .set-link-node.host {
  color: var(--danger);
  background: rgb(var(--danger-rgb) / 0.08);
  box-shadow: inset 0 0 0 0.6px rgb(var(--danger-rgb) / 0.55);
}
@keyframes set-node-pulse { from { transform: scale(0.94); } to { transform: scale(1.04); } }

/* ── SettingsSectionSheet ── */
.set-sheet { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; --toolbar-tint: rgb(var(--accent-rgb) / 0.95); }
/* The Done capsule reads its label in onAccent, so it stays legible on the light-cyan tint. */
.pm-app .set-sheet .toolbar-button.confirm { color: var(--on-accent); }
.pm-app .set-sheet button.toolbar-button.lg { background: var(--lg-tint, var(--lg-fill)); }
/* iOS 26 soft scroll-edge under the transparent navigation bar (off while the lens is pinned there). */
.set-sheet-scroll.scrolled:not(.lens-docked) {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22px);
  mask-image: linear-gradient(180deg, transparent 0, #000 22px);
}
.set-sheet-content { padding: 8px 16px calc(48px + var(--safe-bottom, 34px)); }
.set-sheet input::placeholder, .set-sheet textarea::placeholder { color: var(--label3); }

/* Holo.settle while a preset re-applies values: sliders, lens bars and sparklines glide together. */
.set-sheet.settling .ios-slider-thumb { transition: left var(--dur-settle) var(--ease-settle), transform 0.25s var(--ease-snappy), background 0.2s ease, box-shadow 0.2s ease; }
.set-sheet.settling .ios-slider-fill { transition: width var(--dur-settle) var(--ease-settle); }

/* ── Layout helpers ── */
.set-stack { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.set-spacer { flex: 1 1 auto; min-width: 0; }
.set-btn-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.set-lead { padding: 0 4px; font: 400 15px/20px var(--font-sans); letter-spacing: -0.24px; color: var(--ink-soft); }
.set-footnote { font: 500 11px/15px var(--font-mono); color: var(--ink-faint); }
.set-inline-caption { font: 400 13px/18px var(--font-sans); letter-spacing: -0.08px; color: var(--ink-soft); }
.set-inline-body { font: 400 17px/22px var(--font-sans); letter-spacing: -0.41px; color: var(--ink-soft); }

/* ── Group: Section(header:footer:) in an inset glass card ── */
.set-group { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.set-group-title { padding: 0 16px; font: 600 15px/20px var(--font-sans); letter-spacing: -0.24px; color: var(--ink); }
.set-group-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 22px;
  background: var(--set-card-bg);
  box-shadow: inset 0 0 0 0.6px var(--set-card-stroke);
}
.pm-app .set-group.bare > .set-group-card { background: none; box-shadow: none; border-radius: 0; }
.set-group.bare > .set-group-card > .set-item { padding: 0; }
.set-group-footer { padding: 0 16px; font: 400 13px/18px var(--font-sans); letter-spacing: -0.08px; color: var(--ink-faint); }
.set-item { position: relative; min-width: 0; padding: 12px 16px; }
.set-group-card > .set-item + .set-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 0;
  height: 0.5px;
  background: var(--separator);
}
.set-item-icon {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: rgb(var(--accent-rgb) / 0.13);
}
.set-capsule {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font: 500 11px/14px var(--font-mono);
  color: var(--ink-soft);
  background: rgb(var(--wash-rgb) / calc(0.07 * var(--wash-k)));
  white-space: nowrap;
}
.set-capsule.tone-ghost { color: var(--ink-faint); }

/* Picker row */
.set-picker { display: flex; align-items: center; gap: 12px; min-height: 28px; }
.set-picker-title { flex: 1 1 auto; min-width: 0; font: 400 17px/22px var(--font-sans); letter-spacing: -0.41px; color: var(--ink); }
.set-picker .ios-menu-picker { flex: 0 1 auto; min-width: 0; max-width: 62%; line-height: 22px; }

/* Slider row — the technical name in mono beneath the friendly one */
.set-slider { display: flex; flex-direction: column; gap: 6px; }
.set-slider-head { display: flex; align-items: baseline; gap: 8px; }
.set-slider-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.set-slider-title { font: 400 17px/22px var(--font-sans); letter-spacing: -0.41px; color: var(--ink); }
.set-slider-foot { font: 500 10px/13px var(--font-mono); color: var(--ink-faint); }
.set-slider-value {
  margin-left: auto;
  font: 500 17px/22px var(--font-sans);
  letter-spacing: -0.41px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  white-space: nowrap;
}
.set-slider-track { display: flex; align-items: center; gap: 10px; }
.set-slider-track .ios-slider { flex: 1 1 auto; }
.set-slider-glyph { flex: none; display: grid; place-items: center; min-width: 14px; font-family: var(--font-sans); font-weight: 500; line-height: 1; color: var(--ink-faint); }

/* Toggle row */
.set-toggle, .set-sandbox, .set-vault, .set-seed { display: flex; align-items: center; gap: 12px; }
.set-toggle-label { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.set-toggle-title { font: 400 17px/22px var(--font-sans); letter-spacing: -0.41px; color: var(--ink); }
.set-toggle-caption { font: 400 13px/18px var(--font-sans); letter-spacing: -0.08px; color: var(--ink-soft); }
.set-toggle .ios-toggle, .set-sandbox .ios-toggle { flex: none; }
.pm-app .set-sheet button.ios-toggle:not(.on) { background: rgb(120 120 128 / 0.36); }
.pm-app[data-appearance="light"] .set-sheet button.ios-toggle:not(.on) { background: rgb(120 120 128 / 0.16); }
.pm-app .set-sheet button.ios-toggle.on { background: var(--tint); }

/* Status row */
.set-status-row { display: flex; align-items: center; gap: 12px; }
.set-status-label { flex: none; font: 400 17px/22px var(--font-sans); letter-spacing: -0.41px; color: var(--ink); }
.set-status-value {
  min-width: 0;
  max-width: 55%;
  font: 400 15px/20px var(--font-sans);
  letter-spacing: -0.24px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Segmented glass: a luminous thumb glides between options ── */
.set-seg {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  padding: 4px;
  min-width: 0;
}
.set-seg-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / var(--n));
  transform: translateX(calc(var(--i) * 100%));
  border-radius: 14px;
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.22), rgb(var(--accent-rgb) / 0.12));
  box-shadow: inset 0 0 0 0.6px rgb(var(--accent-rgb) / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.14), 0 0 18px rgb(var(--accent-rgb) / 0.28);
  transition: transform var(--dur-picker) var(--ease-picker);
}
.pm-app .set-seg-opt {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 6px;
  font: 500 15px/20px var(--font-sans);
  letter-spacing: -0.24px;
  color: var(--ink-soft);
  transition: color 0.25s ease;
}
.set-seg-opt > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-seg-opt .sf { flex: none; }
.pm-app .set-seg-opt.on { color: var(--accent); font-weight: 600; }

/* ── Glass buttons ── */
.pm-app .set-gbtn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 17px;
  font: 600 15px/20px var(--font-sans);
  letter-spacing: -0.24px;
  color: var(--ink);
  white-space: nowrap;
}
.pm-app .set-gbtn.lg { background: var(--lg-tint, var(--lg-fill)); }
.set-gbtn > :not(.lg-glint) { position: relative; z-index: 1; }
.pm-app .set-gbtn.small { min-height: 34px; padding: 0 13px; gap: 6px; font-size: 14px; letter-spacing: -0.15px; }
.pm-app .set-gbtn.wide { width: 100%; min-height: 52px; font-size: 17px; letter-spacing: -0.41px; }
.pm-app .set-gbtn.kind-prominent { --lg-tint: rgb(var(--accent-rgb) / 0.9); color: var(--on-accent); }
.set-gbtn.kind-prominent:not(:disabled) { box-shadow: inset 0 1px 0.5px var(--lg-inner-top), 0 6px 20px -6px rgb(var(--accent-rgb) / 0.6); }
.pm-app .set-gbtn.kind-destructive { --lg-tint: rgb(var(--danger-rgb) / 0.13); color: var(--danger); }
.set-gbtn:disabled { opacity: 0.45; }
.set-gbtn .set-ring { flex: none; }

/* ── Connection ── */
.set-link-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 22px;
  background: var(--set-card-bg);
  box-shadow: inset 0 0 0 0.6px var(--set-card-stroke);
  overflow: clip;
  isolation: isolate;
}
.set-link-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(70% 90% at 50% 30%, rgb(var(--accent-rgb) / 0.14), transparent 70%);
  opacity: 0;
  transition: opacity 0.6s ease;
}
.set-link-card.status-connected::before { opacity: 1; }
.set-link-labels { display: flex; justify-content: space-between; gap: 12px; font: 500 12px/16px var(--font-sans); color: var(--ink-faint); }
.set-link-host { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-link-status { display: flex; align-items: center; gap: 10px; min-width: 0; padding-top: 4px; }
.set-link-status-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.set-link-status-title { font: 500 15px/20px var(--font-sans); letter-spacing: -0.24px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-link-status-meta { font: 500 11px/14px var(--font-mono); color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.set-host { display: flex; align-items: flex-start; gap: 12px; transition: background 0.3s ease; }
.set-group-card > .set-host:first-child { border-radius: 22px 22px 0 0; }
.set-group-card > .set-host:last-child { border-radius: 0 0 22px 22px; }
.set-group-card > .set-host:only-child { border-radius: 22px; }
.set-host.selected { background: rgb(var(--accent-rgb) / 0.07); }
.pm-app .set-host-select { flex: none; width: 28px; height: 28px; margin-top: 1px; display: grid; place-items: center; }
.set-host-ring {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--on-accent);
  box-shadow: inset 0 0 0 1.5px rgb(var(--wash-rgb) / calc(0.3 * var(--wash-k)));
  transition: background 0.3s var(--ease-settle), box-shadow 0.4s var(--ease-settle);
}
.set-host-select.on .set-host-ring {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.18), 0 0 14px rgb(var(--accent-rgb) / 0.55);
}
.set-host-fields { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pm-app .set-input { display: block; width: 100%; min-width: 0; caret-color: var(--accent); }
.pm-app .set-host-name { height: 24px; font: 500 17px/24px var(--font-sans); letter-spacing: -0.41px; color: var(--ink); }
.pm-app .set-host-url { height: 18px; font: 500 12px/18px var(--font-mono); color: var(--ink-soft); }
.set-host-key { display: flex; align-items: center; gap: 6px; color: var(--ink-faint); }
.set-host-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.set-host-trailing { flex: none; display: flex; align-items: center; margin: -2px -6px 0 0; }
.pm-app .set-host-icon { width: 32px; height: 32px; display: grid; place-items: center; color: var(--ink-faint); transition: color 0.2s ease, opacity 0.2s ease; }
.pm-app .set-host-icon.on { color: var(--accent); }
.pm-app .set-host-remove:disabled { opacity: 0.3; }

.set-bento-help {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: 22px;
  background: rgb(var(--card-rgb) / 0.08);
  box-shadow: inset 0 0 0 0.6px rgb(var(--card-rgb) / 0.3);
}
.set-bento-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: rgb(var(--card-rgb));
  background: rgb(var(--card-rgb) / 0.15);
}
.set-bento-title { font: 600 15px/20px var(--font-sans); letter-spacing: -0.24px; color: var(--ink); }
.set-bento-body { font: 400 13px/18px var(--font-sans); letter-spacing: -0.08px; color: var(--ink-soft); }
.set-field { display: flex; align-items: center; gap: 10px; }
.pm-app .set-bento-url { height: 20px; font: 500 13px/20px var(--font-mono); color: var(--ink-soft); }

/* ── Models & capabilities ── */
.set-model-hero { flex: none; display: flex; }
.pm-app .set-model-hero-btn {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: inherit;
  text-align: left;
  color: var(--ink);
  background: radial-gradient(110% 90% at 0% 0%, rgb(var(--card-rgb) / 0.2), transparent 62%);
}
.set-model-eyebrow { display: flex; align-items: center; gap: 8px; font: 600 13px/18px var(--font-sans); letter-spacing: -0.08px; color: var(--ink-soft); }
.set-model-chip {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: rgb(var(--card-rgb));
  background: rgb(var(--card-rgb) / 0.15);
  box-shadow: inset 0 0 0 0.5px rgb(var(--card-rgb) / 0.4), 0 0 14px rgb(var(--card-rgb) / 0.3);
}
.set-model-switch { display: inline-flex; align-items: center; gap: 5px; font: 500 13px/18px var(--font-sans); color: var(--accent); }
.set-model-name { font: 700 26px/32px var(--font-display); letter-spacing: 0.2px; color: var(--ink); overflow-wrap: anywhere; }
.set-model-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.set-model-stat {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--set-well-bg);
  box-shadow: inset 0 0 0 0.5px rgb(var(--wash-rgb) / calc(0.09 * var(--wash-k)));
}
.set-model-stat b { font: 600 17px/22px var(--font-rounded); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-model-stat i { font: 500 11px/14px var(--font-sans); font-style: normal; color: var(--ink-faint); white-space: nowrap; }
.set-model-detail { font: 400 15px/20px var(--font-sans); color: var(--ink-soft); }
.set-model-caps { display: flex; flex-wrap: wrap; gap: 6px; }
.set-cap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  font: 600 12px/16px var(--font-sans);
  color: var(--ink-ghost);
  background: rgb(var(--wash-rgb) / calc(0.04 * var(--wash-k)));
  box-shadow: inset 0 0 0 0.5px rgb(var(--wash-rgb) / calc(0.1 * var(--wash-k)));
}
.set-cap.on {
  color: rgb(var(--card-rgb));
  background: rgb(var(--card-rgb) / 0.13);
  box-shadow: inset 0 0 0 0.6px rgb(var(--card-rgb) / 0.45), 0 0 12px rgb(var(--card-rgb) / 0.2);
}
.pm-app .set-nav-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; color: var(--ink); }
.set-nav-title { flex: 1 1 auto; min-width: 0; font: 400 17px/22px var(--font-sans); letter-spacing: -0.41px; }

.set-disclosure .ios-disclosure-head { align-items: center; }
.set-disclosure-label { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.set-disclosure-title { font: 600 17px/22px var(--font-sans); letter-spacing: -0.41px; color: var(--ink); }
.set-disclosure-caption { font: 400 13px/18px var(--font-sans); letter-spacing: -0.08px; color: var(--ink-soft); }
.set-disclosure-body { gap: 14px; padding-top: 12px; }
.set-disclosure-body .set-item, .set-controls > .set-item { padding-left: 0; padding-right: 0; }
.set-disclosure-body .set-item { padding-top: 4px; padding-bottom: 4px; }

.set-imggen-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.set-imggen-label { flex: 0 1 auto; min-width: 0; font: 400 17px/22px var(--font-sans); letter-spacing: -0.41px; color: var(--ink); white-space: nowrap; }
.set-imggen-status { flex: none; font: 500 13px/18px var(--font-sans); color: var(--ink-soft); white-space: nowrap; }
.set-well {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--set-well-bg);
  box-shadow: inset 0 0 0 0.5px rgb(var(--wash-rgb) / calc(0.09 * var(--wash-k)));
}
.set-field-prefix { flex: none; font: 600 10px/13px var(--font-mono); letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink-faint); }
.pm-app .set-comfy-url { flex: 1 1 auto; height: 18px; font: 500 13px/18px var(--font-mono); color: var(--ink-soft); }
.set-workflows { display: flex; flex-direction: column; gap: 7px; }
.set-workflow { display: flex; align-items: center; gap: 8px; min-width: 0; font: 400 13px/18px var(--font-sans); }
.set-workflow-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-ghost); }
.set-workflow.tone-ok .set-workflow-dot { background: var(--accent); box-shadow: 0 0 8px rgb(var(--accent-rgb) / 0.7); }
.set-workflow.tone-warn .set-workflow-dot { background: var(--orange); box-shadow: 0 0 8px rgb(var(--orange-rgb) / 0.6); }
.set-workflow-name { flex: 0 1 auto; max-width: 50%; min-width: 0; font-weight: 500; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-workflow.current .set-workflow-name { color: var(--ink); }
.set-workflow-status { flex: 1 1 auto; min-width: 0; text-align: right; font-size: 12px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-workflow.tone-warn .set-workflow-status { color: rgb(var(--orange-rgb) / 0.9); }

/* ── Generation: the sampling lens ── */
.set-lens { display: flex; flex-direction: column; gap: 12px; }
.set-lens-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.set-lens-prompt { min-width: 0; padding-top: 2px; font: 500 17px/22px var(--font-sans); letter-spacing: -0.41px; color: var(--ink-soft); }
.set-lens-word {
  display: inline-block;
  margin-left: 5px;
  font-weight: 650;
  color: rgb(var(--card-rgb));
  text-shadow: 0 0 14px rgb(var(--card-rgb) / 0.55);
  animation: set-word-in 0.55s var(--ease-glide);
}
@keyframes set-word-in { from { opacity: 0; filter: blur(6px); transform: translateY(5px); } }
.set-lens-lock { display: inline-grid; margin-left: 5px; color: var(--ink-faint); vertical-align: 1px; }
.set-lens-readout { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.set-lens-choices { font: 700 24px/26px var(--font-rounded); color: var(--ink); font-variant-numeric: tabular-nums; }
.set-lens-choices-label { font: 500 11px/13px var(--font-sans); color: var(--ink-faint); }
.set-lens-mood {
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font: 600 11px/14px var(--font-sans);
  color: rgb(var(--card-rgb));
  background: rgb(var(--card-rgb) / 0.14);
  transition: color 0.3s ease, background 0.3s ease;
}
.set-lens-mood.mood-wild { color: var(--danger); background: rgb(var(--danger-rgb) / 0.13); }
.set-lens-mood.mood-deterministic, .set-lens-mood.mood-focused { color: var(--accent); background: rgb(var(--accent-rgb) / 0.13); }
.set-lens-rows { display: flex; flex-direction: column; gap: 5px; }
.set-lens-row { display: grid; grid-template-columns: 78px minmax(0, 1fr) 46px; align-items: center; gap: 8px; height: 16px; }
.set-lens-token {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  font: 500 12px/16px var(--font-mono);
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  transition: color 0.3s ease;
}
.set-lens-row.picked .set-lens-token { color: var(--ink); }
.set-lens-row.cut .set-lens-token { color: var(--ink-ghost); text-decoration: line-through; text-decoration-color: rgb(var(--ink-rgb) / 0.35); }
.set-lens-repeat { flex: none; color: var(--orange); }
.set-lens-track { position: relative; height: 8px; border-radius: 4px; background: rgb(var(--wash-rgb) / calc(0.05 * var(--wash-k))); }
.set-lens-ghost {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--g) * 100%);
  border-radius: 4px;
  background: repeating-linear-gradient(135deg, rgb(var(--ink-rgb) / 0.12) 0 2px, transparent 2px 5px);
  box-shadow: inset 0 0 0 0.6px rgb(var(--ink-rgb) / 0.2);
  opacity: 0;
  transition: width var(--dur-settle) var(--ease-settle), opacity 0.3s ease;
}
.set-lens-row.cut .set-lens-ghost { opacity: 1; }
.set-lens-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p) * 100%);
  border-radius: 4px;
  background: linear-gradient(90deg, rgb(var(--card-rgb) / 0.5), rgb(var(--card-rgb)));
  transition: width var(--dur-settle) var(--ease-settle), box-shadow 0.3s ease;
}
.set-lens-row.picked .set-lens-bar { box-shadow: 0 0 12px rgb(var(--card-rgb) / 0.65); }
.set-lens-row.picked .set-lens-bar::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: rgb(255 255 255);
  box-shadow: 0 0 0 1.5px rgb(var(--card-rgb)), 0 0 10px rgb(var(--card-rgb));
}
.set-lens-pct { font: 500 11px/16px var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--ink-soft); white-space: nowrap; }
.set-lens-row.cut .set-lens-pct { font-size: 10px; color: var(--ink-faint); }
.set-lens-note { font: 400 13px/18px var(--font-sans); letter-spacing: -0.08px; color: var(--ink-soft); }

/* Pinned lens: a zero-height sticky slot (a pinned section header) holding the glass strip. */
.set-lens-dock { position: sticky; top: 0; z-index: 6; height: 0; margin: -11px 0; }
.set-lens-strip {
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px 12px;
  opacity: 0;
  transform: translateY(-10px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.22s var(--ease-out), transform var(--dur-settle) var(--ease-settle);
}
.set-lens-strip.shown { opacity: 1; transform: none; }
.set-lens-strip-text { display: flex; align-items: baseline; gap: 0; min-width: 0; font: 500 15px/20px var(--font-sans); letter-spacing: -0.24px; color: var(--ink-soft); }
.set-lens-strip-choices { flex: none; font: 500 12px/16px var(--font-mono); color: var(--ink-soft); }
.set-lens-spectrum { display: flex; gap: 2px; height: 8px; }
.set-lens-seg {
  flex-basis: 0;
  min-width: 2px;
  border-radius: 3px;
  background: rgb(var(--card-rgb) / calc(0.28 + 0.6 * var(--k, 0)));
  transition: flex-grow var(--dur-settle) var(--ease-settle), background 0.3s ease;
}
.set-lens-seg.picked { background: rgb(var(--card-rgb)); box-shadow: 0 0 10px rgb(var(--card-rgb) / 0.8); }
.set-lens-seg.cut { background: repeating-linear-gradient(135deg, rgb(var(--ink-rgb) / 0.14) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 0.6px rgb(var(--ink-rgb) / 0.18); }

/* Preset rail */
.set-group-card > .set-preset-item { padding: 12px 0; }
.set-preset-rail {
  display: flex;
  gap: 8px;
  padding: 2px 16px 4px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding: 0 16px;
  scrollbar-width: none;
}
.set-preset-rail::-webkit-scrollbar { display: none; }
.pm-app .set-preset {
  flex: none;
  width: 112px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 11px 12px;
  border-radius: 16px;
  text-align: left;
  color: var(--ink);
  background: rgb(var(--wash-rgb) / calc(0.045 * var(--wash-k)));
  box-shadow: inset 0 0 0 0.6px rgb(var(--wash-rgb) / calc(0.1 * var(--wash-k)));
  scroll-snap-align: start;
  transition: background 0.3s ease, box-shadow 0.35s var(--ease-settle), transform var(--dur-settle) var(--ease-settle);
}
.pm-app .set-preset:active { transform: scale(0.97); }
.set-preset .set-spark { width: 100%; height: 26px; }
.set-preset:not(.on) .set-spark i:not(.cut) { opacity: 0.6; }
.set-preset-name { display: flex; align-items: center; gap: 4px; font: 600 14px/18px var(--font-sans); letter-spacing: -0.15px; white-space: nowrap; }
.set-preset-name .sf { color: rgb(var(--card-rgb)); }
.set-preset-sub { font: 500 11px/14px var(--font-sans); color: var(--ink-faint); white-space: nowrap; }
.pm-app .set-preset.on {
  background: rgb(var(--card-rgb) / 0.12);
  box-shadow: inset 0 0 0 1px rgb(var(--card-rgb) / 0.6), 0 0 18px rgb(var(--card-rgb) / 0.22);
}
.pm-app .set-link-btn { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font: 500 15px/20px var(--font-sans); letter-spacing: -0.24px; color: var(--accent); }

/* Instructions editor */
.set-group-card > .set-editor-item { padding: 8px 12px 10px; }
.pm-app .set-editor {
  display: block;
  width: 100%;
  min-height: 96px;
  max-height: 150px;
  padding: 8px 5px;
  resize: none;
  overflow-y: auto;
  font: 400 17px/22px var(--font-sans);
  letter-spacing: -0.41px;
  color: var(--ink);
  caret-color: var(--accent);
}
.set-editor-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding: 6px 5px 0; border-top: 0.5px solid var(--separator); font: 500 12px/16px var(--font-sans); color: var(--ink-faint); }
.pm-app .set-editor-reset { font: 500 13px/16px var(--font-sans); color: var(--accent); }

/* Thinking: segmented + a depth gauge */
.set-thinking { display: flex; align-items: center; gap: 12px; }
.set-thinking .set-seg { flex: 1 1 0; width: auto; min-width: 0; }
.set-depth { flex: none; display: flex; align-items: flex-end; gap: 2px; height: 20px; }
.set-depth i { width: 4px; border-radius: 2px; background: rgb(var(--wash-rgb) / calc(0.16 * var(--wash-k))); transition: background 0.3s ease, box-shadow 0.3s ease; }
.set-depth i:nth-child(1) { height: 40%; }
.set-depth i:nth-child(2) { height: 65%; }
.set-depth i:nth-child(3) { height: 85%; }
.set-depth i:nth-child(4) { height: 100%; }
.set-depth i.on { background: rgb(var(--card-rgb)); box-shadow: 0 0 8px rgb(var(--card-rgb) / 0.55); }

/* Advanced controls */
.set-controls { padding-top: 6px; }
.set-controls > .set-item { padding-top: 10px; padding-bottom: 10px; }
.set-subhead {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font: 700 11px/14px var(--font-sans);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgb(var(--card-rgb));
}
.set-subhead:first-child { margin-top: 4px; }
.set-controls-foot { padding-top: 14px; }
.set-seed-field {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 10px;
  border-radius: 11px;
  background: var(--set-well-bg);
  box-shadow: inset 0 0 0 0.5px rgb(var(--wash-rgb) / calc(0.1 * var(--wash-k)));
}
.pm-app .set-seed-input { width: 64px; height: 18px; font: 500 13px/18px var(--font-mono); text-align: right; color: var(--ink); }
.pm-app .set-seed-btn { display: grid; color: var(--ink-faint); }
.pm-app .set-seed-dice {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: rgb(var(--card-rgb));
  background: rgb(var(--card-rgb) / 0.13);
  box-shadow: inset 0 0 0 0.6px rgb(var(--card-rgb) / 0.45);
}
.set-seed-dice.rolling svg { animation: set-dice 0.62s var(--ease-bouncy); }
@keyframes set-dice { 40% { transform: rotate(210deg) scale(0.78); } 100% { transform: rotate(360deg) scale(1); } }

/* ── Canvas libraries ── */
.set-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.set-lib {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px;
  border-radius: 20px;
  background: var(--set-card-bg);
  box-shadow: inset 0 0 0 0.6px var(--set-card-stroke);
  overflow: clip;
  isolation: isolate;
}
.set-lib::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(100% 70% at 0% 0%, rgb(var(--mark-rgb) / 0.16), transparent 62%);
}
.set-lib-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.set-mark.big { width: 38px; height: 38px; border-radius: 12px; font-size: 13px; box-shadow: inset 0 0 0 0.6px rgb(var(--mark-rgb) / 0.55), 0 0 16px rgb(var(--mark-rgb) / 0.22); }
.set-lib-version {
  padding: 2px 7px;
  border-radius: 999px;
  font: 600 11px/14px var(--font-mono);
  color: rgb(var(--mark-rgb));
  background: rgb(var(--mark-rgb) / 0.13);
  white-space: nowrap;
}
.set-lib-name { font: 600 15px/20px var(--font-sans); letter-spacing: -0.24px; color: var(--ink); }
.set-lib-summary { min-height: 32px; font: 400 12px/16px var(--font-sans); color: var(--ink-soft); }
.set-lib-path { margin-top: 4px; font: 500 10px/13px var(--font-mono); color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-lib-path.missing { color: var(--danger); }

.set-shield {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: rgb(var(--accent-rgb) / 0.12);
  box-shadow: inset 0 0 0 0.6px rgb(var(--accent-rgb) / 0.45), 0 0 18px rgb(var(--accent-rgb) / 0.22);
  transition: color 0.35s ease, background 0.35s ease, box-shadow 0.45s var(--ease-settle);
}
.set-sandbox.open .set-shield {
  color: var(--orange);
  background: rgb(var(--orange-rgb) / 0.12);
  box-shadow: inset 0 0 0 0.6px rgb(var(--orange-rgb) / 0.5), 0 0 18px rgb(var(--orange-rgb) / 0.28);
}
.set-sandbox.open .set-toggle-title { color: var(--orange); }
.set-shield.vault {
  color: rgb(var(--card-rgb));
  background: rgb(var(--card-rgb) / 0.12);
  box-shadow: inset 0 0 0 0.6px rgb(var(--card-rgb) / 0.45), 0 0 18px rgb(var(--card-rgb) / 0.22);
}

/* ── Voice ── */
.set-voice-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.set-voice-orb { display: block; width: 100%; height: 176px; }
.set-voice-status { min-height: 20px; font: 600 15px/20px var(--font-rounded); color: var(--ink-soft); }

/* ── Appearance & data ── */
.set-preview {
  position: relative;
  height: 186px;
  border-radius: 26px;
  overflow: clip;
  isolation: isolate;
  background: var(--void);
  box-shadow: inset 0 0 0 0.6px rgb(var(--wash-rgb) / calc(0.16 * var(--wash-k))), 0 16px 36px -16px rgb(0 0 0 / 0.55);
}
.set-preview .living-aurora { z-index: 0; }
.set-preview-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 35%, rgb(var(--veil-lo-rgb) / calc(0.3 * var(--veil-lo-k)))); }
.set-preview-chat {
  position: absolute;
  inset: 16px 16px 36px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  line-height: 1.32;
  -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent);
  mask-image: linear-gradient(180deg, #000 76%, transparent);
  transition: font-size var(--dur-settle) var(--ease-settle);
}
.set-preview-user {
  align-self: flex-end;
  max-width: 80%;
  padding: 0.45em 0.8em;
  border-radius: 1.15em;
  font-size: 0.86em;
  color: var(--on-accent);
  background: rgb(var(--accent-rgb) / 0.9);
}
.set-preview-reply { font-size: 0.86em; color: var(--ink); }
.set-preview-badge {
  position: absolute;
  left: 14px;
  bottom: 11px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 999px;
  font: 600 10px/13px var(--font-mono);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: rgb(var(--wash-rgb) / calc(0.08 * var(--wash-k)));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.set-theme-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pm-app .set-theme {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px 12px;
  border-radius: 20px;
  color: var(--ink);
  background: var(--set-card-bg);
  box-shadow: inset 0 0 0 0.6px var(--set-card-stroke);
  transition: background 0.3s ease, box-shadow 0.4s var(--ease-settle);
}
.pm-app .set-theme.on {
  background: rgb(var(--card-rgb) / 0.1);
  box-shadow: inset 0 0 0 1.2px rgb(var(--card-rgb) / 0.7), 0 0 20px rgb(var(--card-rgb) / 0.2);
}
.set-theme .set-swatch { width: 54px; height: 76px; border-radius: 13px; }
.set-theme-label { font: 500 15px/20px var(--font-sans); letter-spacing: -0.24px; }
.set-theme-check { display: grid; color: var(--ink-faint); transition: color 0.3s ease; }
.set-theme.on .set-theme-check { color: rgb(var(--card-rgb)); }
.set-storage-error { display: flex; align-items: flex-start; gap: 8px; font: 500 12px/16px var(--font-mono); color: var(--danger); overflow-wrap: anywhere; cursor: text; }
.set-storage-error .sf { flex: none; margin-top: 2px; }

/* ── Motion: numeric text and content swaps ── */
.set-roll { display: inline-flex; overflow: hidden; vertical-align: bottom; }
.set-roll-value { display: inline-block; }
.set-roll-value.up { animation: set-roll-up 0.34s var(--ease-settle); }
.set-roll-value.down { animation: set-roll-down 0.34s var(--ease-settle); }
@keyframes set-roll-up { from { opacity: 0; transform: translateY(55%); } }
@keyframes set-roll-down { from { opacity: 0; transform: translateY(-55%); } }
.set-swap { animation: set-swap 0.42s var(--ease-out); }
@keyframes set-swap { from { opacity: 0; filter: blur(3px); } }

/* ── Light: glass over morning ice ── */
.pm-app[data-appearance="light"] .set-group-card,
.pm-app[data-appearance="light"] .set-link-card,
.pm-app[data-appearance="light"] .set-lib,
.pm-app[data-appearance="light"] .set-theme:not(.on) { box-shadow: inset 0 0 0 0.6px var(--set-card-stroke), 0 1px 3px rgb(20 26 41 / 0.06); }
.pm-app[data-appearance="light"] .set-lens-row.picked .set-lens-bar::after { background: rgb(var(--card-rgb)); box-shadow: 0 0 0 2px rgb(255 255 255), 0 0 10px rgb(var(--card-rgb) / 0.6); }
.pm-app[data-appearance="light"] .set-lens-word { text-shadow: none; }
.pm-app[data-appearance="light"] .set-preview { box-shadow: inset 0 0 0 0.6px rgb(255 255 255 / 0.9), 0 14px 30px -16px rgb(20 26 41 / 0.35); }