/* =========================================================
   Palette — Visual Design Generator
   Tactile, Apple/Linear-inspired creative tool
   ========================================================= */

:root {
  /* Control system — unified (white pills, black ink) */
  --ctrl-radius: 14px;
  --ctrl-h: 44px;
  --ctrl-bg: #ffffff;
  --ctrl-ink: #0b0d12;
  --ctrl-mute: #8a8f9a;
  --ctrl-shadow:
    0 1px 2px rgba(15, 18, 25, 0.06),
    0 6px 18px rgba(15, 18, 25, 0.08),
    0 0 0 0.5px rgba(15, 18, 25, 0.04);

  /* Card system (overridden per material) */
  --card-radius: 36px;
  --card-stroke-color: #ffffff;
  --card-bg: rgba(255, 255, 255, 0.55);
  --card-border: rgba(255, 255, 255, 0.55);
  --card-blur: 28px;
  --card-saturate: 1.4;
  --card-shadow:
    0 1px 1px rgba(20, 24, 38, 0.04),
    0 24px 60px rgba(20, 24, 38, 0.10),
    0 50px 120px rgba(20, 24, 38, 0.10);
  --card-noise-opacity: 0.06;

  /* Background atmosphere (overridden per material) */
  --bg-base: #eef0f5;
  --bg-orb-a: #b8c6ff;   /* muted blue */
  --bg-orb-b: #a8e0d6;   /* teal */
  --bg-orb-c: #c9b8ff;   /* purple */
  --bg-orb-d: #ffd2e0;   /* pale pink */
  --bg-tint:  #d8dde6;   /* light gray */
  --page-bg:
    radial-gradient(circle at 8% 8%, var(--bg-orb-a) 0, transparent 34vw),
    radial-gradient(circle at 92% 18%, var(--bg-orb-b) 0, transparent 30vw),
    radial-gradient(circle at 88% 92%, var(--bg-orb-c) 0, transparent 36vw),
    radial-gradient(circle at 18% 94%, var(--bg-orb-d) 0, transparent 28vw),
    var(--bg-base);
  --page-overlay: linear-gradient(180deg, transparent, rgba(255,255,255,0.18) 80%);
  --page-overlay-opacity: 1;
  --page-overlay-blend: normal;
  --page-orb-filter: blur(110px);
  --page-orb-opacity: 0.85;
  --page-orb-scale-a: 1;
  --page-orb-scale-b: 1;
  --page-orb-scale-c: 1;
  --page-orb-scale-d: 1;

  /* Theme color tokens (overridden by generator) */
  --p1: #2563eb;
  --p2: #14b8a6;
  --p3: #8b5cf6;
  --g1: #f8fafc;
  --g2: #e2e8f0;
  --g3: #cbd5e1;
  --ink-strong: #1A1F2E;
  --ink-mute: #475569;
  --accent: var(--p1);

  /* Typography (overridden by generator) */
  --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-serif: 'Merriweather', Georgia, 'Times New Roman', serif;
  --sans-weight: 700;
  --serif-weight: 700;
  --sans-size: clamp(0.85rem, min(3vw, 2.8vh), 1.65rem);
  --serif-size: clamp(0.65rem, min(2.2vw, 2vh), 1rem);
  --sans-tracking: -0.02em;
  --serif-tracking: -0.005em;

  /* Button system (overridden by generator) */
  --btn-radius: 999px;
  --btn-h: clamp(44px, 6.4vh, 56px);
  --btn-primary-bg: linear-gradient(135deg, var(--p1), var(--p1));
  --btn-primary-shadow: 0 6px 18px rgba(37, 99, 235, 0.32), 0 1px 0 rgba(255,255,255,0.6) inset;
  --btn-secondary-bg: linear-gradient(180deg, #ffffff, var(--g2));
  --btn-secondary-shadow: 0 1px 2px rgba(15,18,25,0.06), 0 6px 18px rgba(15,18,25,0.06);
  --btn-tertiary-border: 1.5px solid rgba(0,0,0,0.12);
  --btn-tertiary-shadow: none;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: manipulation;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ctrl-ink);
  background: var(--bg-base);
  overflow: hidden;
  height: 100dvh;
}

/* Make sure [hidden] always wins over any display: rules */
[hidden] { display: none !important; }

button {
  font-family: inherit;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
.seg-btn:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.45);
  outline-offset: 2px;
  border-radius: var(--ctrl-radius);
}

/* =========================================================
   Background — soft, diffused, no noise
   ========================================================= */
.bg {
  position: fixed; inset: 0; z-index: -1;
  background: var(--page-bg);
  background-color: var(--bg-base);
  overflow: hidden;
  transition: background 900ms cubic-bezier(.2,.7,.2,1);
}
.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: var(--page-orb-filter);
  opacity: var(--page-orb-opacity);
  transition: background 900ms cubic-bezier(.2,.7,.2,1),
              transform 1200ms cubic-bezier(.2,.7,.2,1),
              opacity 900ms ease,
              filter 900ms ease;
  will-change: transform, background;
}
.bg-orb--a { width: 60vw; height: 60vw; left: -10vw; top: -15vw; background: var(--bg-orb-a); transform: scale(var(--page-orb-scale-a)); }
.bg-orb--b { width: 55vw; height: 55vw; right: -10vw; top: 5vw;  background: var(--bg-orb-b); transform: scale(var(--page-orb-scale-b)); }
.bg-orb--c { width: 65vw; height: 65vw; right: -15vw; bottom: -20vw; background: var(--bg-orb-c); transform: scale(var(--page-orb-scale-c)); }
.bg-orb--d { width: 50vw; height: 50vw; left: 5vw; bottom: -10vw; background: var(--bg-orb-d); transform: scale(var(--page-orb-scale-d)); }
.bg-grain {
  position: absolute; inset: 0;
  background: var(--page-overlay);
  background-size: var(--page-overlay-size);
  opacity: var(--page-overlay-opacity);
  mix-blend-mode: var(--page-overlay-blend);
  pointer-events: none;
  transition: background 900ms ease, opacity 900ms ease;
}

/* =========================================================
   Stage — vertical rhythm, centered
   ========================================================= */
.stage {
  --stage-w: min(540px, 92vw);
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.6vh, 18px);
  padding: clamp(12px, 2.2vh, 32px) 20px clamp(12px, 2vh, 28px);
  overflow: hidden;
}

/* =========================================================
   Segmented control — unified component
   ========================================================= */
.segmented {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  background: var(--ctrl-bg);
  border-radius: var(--ctrl-radius);
  box-shadow: var(--ctrl-shadow);
  padding: 6px;
  gap: 0;
  touch-action: manipulation;
}
.segmented--top {
  width: var(--stage-w);
  max-width: 360px;
  z-index: 4;
  transition: opacity 260ms ease, filter 260ms ease;
}
.segmented--scope {
  flex: 1;
  width: 100%;
}

.seg-btn {
  position: relative;
  z-index: 2;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: calc(var(--ctrl-h) - 12px);
  padding: 0 14px;
  border-radius: calc(var(--ctrl-radius) - 6px);
  font-size: 15px;
  font-weight: 600;
  color: var(--ctrl-mute);
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: color 220ms ease;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.seg-btn.is-active { color: var(--ctrl-ink); }
.seg-btn:hover:not(.is-active) { color: #4a4f5a; }
.segmented--top.is-disabled .seg-btn {
  pointer-events: none;
}
.segmented--top.is-disabled {
  opacity: 0.75;
  filter: blur(4px);
}

.seg-btn--stack {
  flex-direction: column;
  gap: 4px;
  height: auto;
  padding: 8px 10px 6px;
  font-size: 12px;
  font-weight: 500;
}
.seg-icon { display: block; opacity: 0.95; }
.seg-icon--type {
  width: 20px;
  height: 18px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0;
}

/* Active raised pill */
.seg-pill {
  position: absolute;
  z-index: 1;
  top: 6px;
  left: 0;
  bottom: 6px;
  background: #ffffff;
  border-radius: calc(var(--ctrl-radius) - 6px);
  box-shadow:
    0 1px 2px rgba(15, 18, 25, 0.06),
    0 4px 14px rgba(15, 18, 25, 0.08),
    0 0 0 0.5px rgba(15, 18, 25, 0.04);
  transition:
    transform 380ms cubic-bezier(.2,.85,.2,1),
    width 380ms cubic-bezier(.2,.85,.2,1);
  pointer-events: none;
}
/* JS sets transform/width inline */

.seg-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(11, 13, 18, 0.08);
  font-size: 11px;
  font-weight: 700;
  color: var(--ctrl-ink);
}
.seg-btn:not(.is-active) .seg-count { background: rgba(11, 13, 18, 0.06); color: var(--ctrl-mute); }

/* =========================================================
   View container — Create vs Saved
   ========================================================= */
.view {
  width: var(--stage-w);
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: stretch;
}
.view--create { align-items: stretch; }
.view--saved {
  align-items: stretch;
  padding: 0;
}

/* =========================================================
   Card — large glassmorphic output
   ========================================================= */
.card {
  position: relative;
  width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--card-radius);
  background: var(--card-bg);
  -webkit-backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
  backdrop-filter: blur(var(--card-blur)) saturate(var(--card-saturate));
  box-shadow: var(--card-shadow);
  padding: clamp(18px, 2.8vh, 28px) clamp(18px, 4vw, 28px);
  overflow: hidden;
  transition:
    background 600ms cubic-bezier(.2,.7,.2,1),
    backdrop-filter 600ms cubic-bezier(.2,.7,.2,1),
    box-shadow 600ms cubic-bezier(.2,.7,.2,1),
    border-radius 600ms cubic-bezier(.2,.7,.2,1);
}
/* 1px fading border (gradient stroke, not a hard line) */
.card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--card-stroke-color) 85%, transparent) 0%,
    color-mix(in srgb, var(--card-stroke-color) 25%, transparent) 30%,
    transparent 55%,
    color-mix(in srgb, var(--card-stroke-color) 18%, transparent) 80%,
    color-mix(in srgb, var(--card-stroke-color) 55%, transparent) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: var(--card-border-opacity, 1);
  transition: opacity 600ms ease;
}
/* Noise — only inside the card */
.card-noise {
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: var(--card-noise-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  transition: opacity 600ms ease;
}

.card-actions {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  gap: 10px;
  z-index: 3;
}

.card-body {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2.2vh, 22px);
}

/* =========================================================
   Control button (icon pill) — unified system
   ========================================================= */
.ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--ctrl-h);
  padding: 0 14px;
  border-radius: var(--ctrl-radius);
  background: var(--ctrl-bg);
  color: var(--ctrl-ink);
  box-shadow: var(--ctrl-shadow);
  font-weight: 600;
  font-size: 14px;
  transition: transform 160ms ease, box-shadow 220ms ease;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
@media (hover: hover) { .ctrl:hover { transform: translateY(-1px); } }
.ctrl:active { transform: translateY(0); }

.ctrl--icon {
  width: var(--ctrl-h);
  padding: 0;
}

.ctrl--regen {
  flex: 0 0 auto;
  background: #ffffff;
}

.ctrl.is-saved {
  color: #f5b400;
}
.ctrl.is-saved svg { fill: currentColor; stroke: currentColor; }

/* =========================================================
   Typography preview
   ========================================================= */
.type-pair {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.8vh, 10px);
  padding-right: 100px;
  flex-shrink: 0;
}
.type-sample {
  margin: 0;
  line-height: 1.05;
  letter-spacing: var(--sans-tracking);
  color: var(--ink-strong);
}
.type-sample--sans {
  font-family: var(--font-sans);
  font-weight: var(--sans-weight);
  font-size: var(--sans-size);
  letter-spacing: var(--sans-tracking);
}
.type-sample--serif {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--serif-size);
  letter-spacing: var(--sans-tracking);
  color: var(--ink-mute);
}

/* =========================================================
   Color grid 3×2
   ========================================================= */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: clamp(8px, 1.4vh, 12px);
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}
.swatch {
  position: relative;
  min-width: 0;
  min-height: 36px;
  border-radius: clamp(12px, 2vw, 18px);
  background: #ccc;
  box-shadow:
    0 1px 2px rgba(15,18,25,0.06),
    0 8px 24px rgba(15,18,25,0.08),
    0 0 0 0.5px rgba(15,18,25,0.03);
  display: flex;
  align-items: flex-end;
  padding: 8px 10px;
  overflow: hidden;
  transition: background 600ms ease, box-shadow 600ms ease;
}
.swatch-hex {
  font-family: var(--font-sans);
  font-size: clamp(10px, 1.8vw, 12px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.18);
}
.swatch[data-role="gray"] .swatch-hex {
  color: var(--ink-strong);
  text-shadow: none;
}

/* =========================================================
   Button preview stack
   ========================================================= */
.btn-stack { display: flex; flex-direction: column; gap: clamp(6px, 1.2vh, 10px); flex-shrink: 0; }
.pv {
  position: relative;
  height: var(--btn-h);
  border-radius: var(--btn-radius);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(14px, 1.8vh, 16px);
  letter-spacing: -0.005em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 180ms cubic-bezier(.2,.7,.2,1),
              box-shadow 220ms ease, filter 220ms ease,
              background 400ms ease, color 400ms ease, border 400ms ease;
  will-change: transform;
}
@media (hover: hover) { .pv:hover { transform: translateY(-1px); filter: brightness(1.04); } }
.pv:active { transform: translateY(1px) scale(0.995); filter: brightness(0.96); transition-duration: 60ms; }
.pv:focus-visible { outline: 2px solid rgba(0,0,0,0.25); outline-offset: 3px; }

.pv--primary {
  background: var(--btn-primary-bg);
  color: #ffffff;
  box-shadow: var(--btn-primary-shadow);
  border: var(--btn-primary-border, none);
}
.pv--primary:hover { box-shadow: var(--btn-primary-shadow), 0 12px 28px rgba(0,0,0,0.06); }
.pv--secondary {
  background: var(--btn-secondary-bg);
  color: var(--ink-strong);
  box-shadow: var(--btn-secondary-shadow);
  border: var(--btn-secondary-border, none);
}
.pv--tertiary {
  background: transparent;
  color: var(--accent);
  border: var(--btn-tertiary-border);
  box-shadow: var(--btn-tertiary-shadow);
}
.pv--tertiary:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pv--tertiary:active { background: color-mix(in srgb, var(--accent) 16%, transparent); }

/* =========================================================
   Bottom controls
   ========================================================= */
.controls {
  position: relative;
  z-index: 4;
  width: var(--stage-w);
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-shrink: 0;
  touch-action: manipulation;
}
.controls .ctrl--regen {
  width: calc(var(--ctrl-h) + 12px);
  height: auto;
  align-self: stretch;
  border-radius: var(--ctrl-radius);
}
.controls.is-saved-edit [data-scope="all"] { display: none; }

.controls.is-hidden {
  visibility: hidden;
  pointer-events: none;
}

/* =========================================================
   Pixel / 8-bit family — material-driven hard-edged styling
   ========================================================= */
.card[data-family="pixel"] {
  border-radius: 6px !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow:
    0 0 0 4px var(--ink-strong),
    8px 8px 0 var(--ink-strong) !important;
}
.card[data-family="pixel"]::before { display: none; }
.card[data-family="pixel"] .card-noise { display: none; }

.card[data-family="pixel"] .swatch {
  border-radius: 4px;
  box-shadow:
    0 0 0 2px var(--ink-strong),
    3px 3px 0 var(--ink-strong);
}
.card[data-family="pixel"] .swatch-hex {
  text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
  letter-spacing: 0.04em;
}

.card[data-family="pixel"] .pv {
  border-radius: 4px !important;
  letter-spacing: 0.04em;
}
@media (hover: hover) { .card[data-family="pixel"] .pv:hover { transform: translate(-1px, -1px); } }
.card[data-family="pixel"] .pv:active { transform: translate(2px, 2px); filter: none; }

.card[data-family="pixel"] .type-sample {
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: auto;
  font-smooth: never;
  letter-spacing: 0;
  line-height: 1.15;
}
/* Press Start 2P is huge per em — scale the headline down a touch */
.card[data-family="pixel"] .type-sample--sans { font-size: clamp(0.95rem, min(2.6vw, 2.4vh), 1.4rem); }
.card[data-family="pixel"] .type-sample--serif { font-size: clamp(0.7rem, min(1.8vw, 1.6vh), 0.95rem); font-weight: 400; }

/* Pixel page background keeps a faint grid by default. Page regen can override it. */
body[data-family="pixel"] .bg-grain {
  background: var(--page-overlay, 
    linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px));
  background-size: var(--page-overlay-size, 24px 24px);
}

/* =========================================================
   Hand-drawn family — paper materials, sketch vs calligraphic
   ========================================================= */
.card[data-family="hand"] {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* Reuse ::before as a drawn outline instead of a glass rim */
.card[data-family="hand"]::before {
  background: none;
  padding: 0;
  -webkit-mask: none;
          mask: none;
  border-radius: inherit;
}

/* --- Sketch sub-style — wobbly, casual --- */
.card[data-family="hand"][data-style="sketch"] {
  border-radius: 18px !important;
}
.card[data-family="hand"][data-style="sketch"]::before {
  border: 2px dashed var(--ink-strong);
  opacity: 0.5;
}
.card[data-family="hand"][data-style="sketch"] .swatch {
  border-radius: 12px;
  box-shadow:
    0 0 0 1.5px rgba(0,0,0,0.10),
    2px 3px 0 rgba(0,0,0,0.08);
}
.card[data-family="hand"][data-style="sketch"] .pv {
  border-radius: 14px !important;
  letter-spacing: 0;
}
@media (hover: hover) { .card[data-family="hand"][data-style="sketch"] .pv:hover { transform: translate(-1px, -1px); } }
.card[data-family="hand"][data-style="sketch"] .pv:active { transform: translate(1px, 2px); filter: none; }

/* --- Calligraphic sub-style — refined, elegant --- */
.card[data-family="hand"][data-style="calligraphic"] {
  border-radius: 8px !important;
}
.card[data-family="hand"][data-style="calligraphic"]::before {
  border: 1px solid var(--ink-strong);
  opacity: 0.25;
}
.card[data-family="hand"][data-style="calligraphic"] .swatch {
  border-radius: 6px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.10),
    0 6px 16px rgba(0,0,0,0.08);
}
.card[data-family="hand"][data-style="calligraphic"] .pv {
  border-radius: 6px !important;
}

/* Type — different scales because handwriting vs script have very different
   perceived sizes per em. */
.card[data-family="hand"] .type-sample { letter-spacing: 0; line-height: 1.05; }
.card[data-family="hand"][data-style="sketch"] .type-sample--sans {
  font-size: clamp(1.5rem, min(4.4vw, 4vh), 2.4rem);
}
.card[data-family="hand"][data-style="sketch"] .type-sample--serif {
  font-size: clamp(1rem, min(2.8vw, 2.6vh), 1.4rem);
  font-weight: 400;
}
.card[data-family="hand"][data-style="calligraphic"] .type-sample--sans {
  font-size: clamp(2rem, min(5.5vw, 5vh), 3.2rem);
  line-height: 1;
}
.card[data-family="hand"][data-style="calligraphic"] .type-sample--serif {
  font-size: clamp(1.2rem, min(3.3vw, 3vh), 1.8rem);
  font-weight: 400;
}

/* =========================================================
   Saved view — full-fidelity cards in a vertical snap stack
   ========================================================= */
.snap-stack {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100vw;
  height: 100dvh;
  overflow-y: scroll;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scroll-behavior: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  isolation: isolate;
  contain: strict;
}
.snap-stack.is-editing {
  overflow: hidden;
  touch-action: none;
}
.snap-stack::-webkit-scrollbar { display: none; }

.snap-page {
  width: 100%;
  height: 100dvh;
  position: relative;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: 100dvh;
}

.saved-card {
  position: absolute;
  top: var(--saved-card-top, 0);
  left: var(--saved-card-left, 50%);
  width: var(--saved-card-width, var(--stage-w));
  height: var(--saved-card-height, 100%);
  max-height: none;
  transform: var(--saved-card-transform, translateX(-50%));
  backface-visibility: hidden;
  contain: layout paint style;
}

.saved-edit-btn {
  position: fixed;
  z-index: 5;
  top: var(--saved-edit-top, calc(var(--saved-card-top, 0px) + var(--saved-card-height, 100%) + 12px));
  left: var(--saved-card-center, 50%);
  width: var(--ctrl-h);
  height: var(--ctrl-h);
  border-radius: var(--ctrl-radius);
  transform: translateX(-50%);
  will-change: transform;
}
.saved-edit-btn:hover,
.saved-edit-btn:active {
  transform: translateX(-50%);
}

.saved-empty {
  width: 100%;
  align-self: center;
  padding: 60px 0;
  text-align: center;
  color: var(--ink-mute);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.saved-empty p { margin: 0; font-weight: 600; color: var(--ink-strong); }
.saved-empty-sub { margin-top: 4px !important; font-weight: 500 !important; color: var(--ink-mute) !important; opacity: 0.85; }

/* =========================================================
   Sheet / modal (share)
   ========================================================= */
.sheet {
  position: fixed; inset: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.sheet[hidden] { display: none; }
.sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 18, 25, 0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn 220ms ease;
}
.sheet-panel {
  position: relative;
  width: min(420px, 100%);
  background: #ffffff;
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.25);
  padding: 18px;
  animation: sheetIn 280ms cubic-bezier(.2,.85,.2,1);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.sheet-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.sheet-header h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.sheet-close { width: 32px; height: 32px; }
.sheet-options { display: flex; flex-direction: column; gap: 8px; }
.ctrl--row {
  width: 100%;
  height: auto;
  padding: 12px 14px;
  justify-content: flex-start;
  gap: 12px;
  border-radius: 14px;
  background: #f5f6f8;
  box-shadow: none;
}
.ctrl--row:hover { background: #eef0f4; transform: none; }
.row-icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.row-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.row-text strong { font-size: 14px; font-weight: 700; }
.row-text em { font-size: 12px; font-style: normal; color: var(--ctrl-mute); font-weight: 500; }

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--toast-bottom, 80px);
  z-index: 3;
  min-width: 96px;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(15, 18, 25, 0.94);
  color: #ffffff;
  box-shadow: 0 14px 38px rgba(0,0,0,0.22);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(100% + 28px));
  transition: transform 240ms ease-out, opacity 180ms ease-out;
}
.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes sheetIn { from { opacity: 0; transform: translateY(8px) scale(0.98) } to { opacity: 1; transform: translateY(0) scale(1) } }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 480px) {
  :root { --ctrl-h: 42px; }
  .stage { gap: 14px; }
  .card { padding: 22px 20px 18px; }
  .card-actions { top: 14px; right: 14px; }
  .type-pair { padding-right: 80px; }
  .seg-btn { font-size: 14px; padding: 0 10px; }
  .seg-btn--stack { font-size: 11px; padding: 6px 6px 4px; }
  .pv { height: 50px; font-size: 15px; }
}

@media (min-width: 720px) {
  .stage { --stage-w: min(560px, 92vw); gap: 22px; padding-top: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}