/* ============================================
   Marketing Asset Generator — Flexxi-flavored
   ============================================ */

/* ---- Real brand display face: ES Rebond Grotesque ---- */
@font-face {
  font-family: "ES Rebond Grotesque";
  src: url("fonts/ESRebondGrotesque-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ES Rebond Grotesque";
  src: url("fonts/ESRebondGrotesque-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ES Rebond Grotesque";
  src: url("fonts/ESRebondGrotesque-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ES Rebond Grotesque";
  src: url("fonts/ESRebondGrotesque-Semibold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ES Rebond Grotesque";
  src: url("fonts/ESRebondGrotesque-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ES Rebond Grotesque";
  src: url("fonts/ESRebondGrotesque-Extrabold.otf") format("opentype");
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  /* Surfaces — clean, minimal, rooted in black & white */
  --bg: #ECECEF;
  --bg-2: #E3E3E8;
  --surface: #FFFFFF;
  --surface-2: #FFFFFF;
  --surface-elev: #FFFFFF;

  /* Ink */
  --ink: #070707;
  --ink-2: #383838;
  --ink-3: #6E6E6E;
  --ink-4: #A7A6A6;

  /* Lines */
  --line: #E5E5E5;
  --line-2: #D6D6D6;

  /* Brand accent — purple is the single expressive note.
     Legacy accent slots are remapped onto the mono+purple system
     so existing references stay on-brand. */
  --purple: #AC55FF;
  --purple-deep: #8B2FE6;
  --grey: #E9E9F0;
  --yellow: #AC55FF;        /* primary accent → purple */
  --yellow-deep: #8B2FE6;
  --green: #070707;         /* → ink */
  --green-deep: #000000;
  --coral: #AC55FF;
  --coral-deep: #8B2FE6;
  --cobalt: #AC55FF;        /* selection / interactive → purple */
  --pink: #E9E9F0;
  --teal: #AC55FF;

  /* Holographic foil — the brand's iridescent chrome, used as the
     CTA stroke. This is the real scanned foil texture, not a synthetic
     gradient — it's the source of every holographic stroke in the UI. */
  --holo-img: url("assets/holo-texture.png");
  /* Legacy gradient fallback (kept for non-image contexts). */
  --holo: conic-gradient(from 210deg,
    #3fd9ff, #5b8cff, #a855ff, #ff5bc4, #ffc14d,
    #4dff9e, #3fffe0, #3fd9ff);

  /* Sizing */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --sidebar-w: 248px;

  /* Type — ES Rebond Grotesque (display) + Aspekta→Hanken Grotesk (body) */
  --font-display: "ES Rebond Grotesque", "Arial Narrow", sans-serif;
  --font-ui: "Hanken Grotesk", system-ui, sans-serif;
  --font-serif: "ES Rebond Grotesque", "Arial Narrow", sans-serif;
  --font-mono: "Hanken Grotesk", ui-monospace, monospace;

  color-scheme: light;
}

/* ============================================
   DARK THEME — matches flexxi.studio
   ============================================ */
html.dark {
  color-scheme: dark;
  --bg: #070707;
  --bg-2: #0E0E0E;
  --surface: #0F0F0F;
  --surface-2: #131313;
  --surface-elev: #181818;
  --ink: #FFFFFF;
  --ink-2: #BFBFBF;
  --ink-3: #8A8A8A;
  --ink-4: #5C5C5C;
  --line: #242424;
  --line-2: #383838;
  --grey: #1A1A1A;
}

/* Theme-aware hover/contrast fixes */
html.dark .nav-item:hover { background: rgba(255,255,255,0.06); }
html.dark .nav-item.active { background: #1A1A1A; color: #fff; }
html.dark .btn-ghost:hover { background: rgba(255,255,255,0.06); }
html.dark .btn-surface { background: var(--surface-2); border-color: var(--line-2); }
html.dark .input { background: var(--surface-2); }
html.dark .pill { background: var(--surface-2); }
html.dark .gen-tab-row { background: var(--surface-2); }
html.dark .gen-tab.active { background: #FFFFFF; color: #070707; }
html.dark .option-card.selected { background: var(--surface-2); border-color: #FFFFFF; }

/* Smooth theme transition (surfaces only — never text color, to avoid
   laggy inherited-color cascades) */
.app, .sidebar, .main, .card, .nav-item, .btn, .input, .pill,
.sidebar-user, .gen-tab-row { transition: background-color 0.25s ease, border-color 0.25s ease; }

/* Inverted promo card (home AI block + sidebar help) — dark in both themes */
.promo-invert { background: #0C0C0C; color: #fff; border: 1px solid #232323 !important; }
html.dark .promo-invert { background: #161616; border-color: #2A2A2A !important; }

/* Theme toggle control */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.theme-toggle button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  transition: background 120ms ease, color 120ms ease;
}
.theme-toggle button svg { width: 14px; height: 14px; }
.theme-toggle button.active { background: var(--ink); color: var(--surface); }

* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }

body {
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
input, textarea { font-family: inherit; }
a { color: inherit; }

/* ============================================
   APP SHELL
   ============================================ */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh;
  background: var(--bg);
}
.app.editor-mode { grid-template-columns: 1fr; }

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar {
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  border-right: 1px solid var(--line);
  background: var(--bg);
  gap: 4px;
  min-height: 0;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  padding: 4px 14px 18px 18px;
  overflow: visible;
}
.sidebar-brand-logo {
  display: block;
  width: 100%;
  max-width: 150px;
  height: auto;
  object-fit: contain;
}
.sidebar-brand-logo--dark { display: none; }
html.dark .sidebar-brand-logo--light { display: none; }
html.dark .sidebar-brand-logo--dark { display: block; }
.sidebar-section-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  padding: 16px 10px 8px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--ink-2);
  font-weight: 500;
  font-size: 14px;
  transition: background 120ms ease, color 120ms ease;
  text-align: left;
  width: 100%;
}
.nav-item:hover { background: rgba(0,0,0,0.04); color: var(--ink); }
.nav-item.active {
  background: var(--ink);
  color: var(--surface);
}
.nav-item.active svg { color: var(--yellow); }
.nav-item svg { width: 18px; height: 18px; flex: 0 0 18px; }

.sidebar-user {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.sidebar-user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ink);
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 13px;
  color: #FFFFFF;
}
.sidebar-user-name { font-weight: 600; font-size: 13px; line-height: 1.1; }
.sidebar-user-org { font-size: 11px; color: var(--ink-3); }

/* ============================================
   MAIN
   ============================================ */
.main {
  overflow-y: auto;
  min-height: 0;
}
.main-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 32px 40px 80px;
}

/* ============================================
   COMMON TYPE
   ============================================ */
.eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.page-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 56px;
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 8px 0 0;
  text-wrap: balance;
}
.page-title .italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.page-subtitle {
  font-size: 16px;
  color: var(--ink-2);
  max-width: 640px;
  margin: 16px 0 0;
  line-height: 1.45;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin: 0;
}
.section-title .italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  border: 1px solid transparent;
  transition: transform 100ms ease, background 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 14px; height: 14px; }

/* Holographic CTA — black pill with iridescent foil stroke, inverts on hover.
   The brand's signature button. The stroke is the real foil texture image
   (--holo-img) clipped to the border-box; the solid fill sits over the
   padding-box, leaving only the 2px ring showing the foil. */
.btn-primary {
  background-image:
    linear-gradient(#070707, #070707),
    var(--holo-img);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  color: #FFFFFF;
  border: 2px solid transparent;
}
.btn-primary:hover {
  background-image:
    linear-gradient(#FFFFFF, #FFFFFF),
    var(--holo-img);
  color: #070707;
}
.btn-yellow { background: var(--purple); color: #FFFFFF; }
.btn-yellow:hover { background: var(--purple-deep); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: rgba(0,0,0,0.04); }
.btn-surface { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.btn-surface:hover { background: var(--surface); }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-lg { padding: 14px 22px; font-size: 14px; }

/* ============================================
   CARDS
   ============================================ */
.card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.hover-card {
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  cursor: pointer;
}
.hover-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-2);
  box-shadow: 0 14px 40px -20px rgba(15,15,15,0.18);
}

/* ============================================
   GRIDS
   ============================================ */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

/* ============================================
   PILL / TAG
   ============================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-2);
}
.pill.yellow { background: var(--purple); border-color: transparent; color: #FFFFFF; }
.pill.purple { background: var(--purple); border-color: transparent; color: white; }
.pill.green { background: var(--grey); border-color: transparent; color: var(--ink); }
.pill.dark { background: var(--ink); border-color: transparent; color: var(--surface); }

/* ============================================
   STICKER (flexxi-style brand element)
   ============================================ */
.sticker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: #FFFFFF;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.01em;
  transform: none;
  box-shadow: none;
  border: 1px solid var(--ink);
}
.sticker.purple { background: var(--purple); color: white; border-color: var(--purple); }
.sticker.green { background: var(--grey); color: var(--ink); border-color: var(--grey); }
.sticker.coral { background: var(--purple); color: white; border-color: var(--purple); }

/* Tweaks: visual filters */
.no-stickers .sticker { display: none; }
.no-italics .italic, .no-italics .font-serif { font-family: var(--font-display) !important; font-style: normal !important; font-weight: 600 !important; }

/* ============================================
   INPUTS
   ============================================ */
.input {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(15,15,15,0.06);
}
textarea.input { resize: vertical; min-height: 90px; line-height: 1.45; }

/* ============================================
   SCROLLBARS
   ============================================ */
.main::-webkit-scrollbar { width: 10px; height: 10px; }
.main::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 5px; }
.main::-webkit-scrollbar-track { background: transparent; }

/* ============================================
   UTILITIES
   ============================================ */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mt-12 { margin-top: 48px; }
.mb-2 { margin-bottom: 8px; }
.text-ink-2 { color: var(--ink-2); }
.text-ink-3 { color: var(--ink-3); }
.font-display { font-family: var(--font-display); }
.font-serif { font-family: var(--font-serif); }

/* ============================================
   EDITOR
   ============================================ */
.editor {
  display: grid;
  grid-template-rows: 56px 1fr;
  height: 100vh;
  background: #141414;
  color: white;
}
.editor-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: #0A0A0A;
  border-bottom: 1px solid #242424;
}
.editor-topbar-left { display: flex; align-items: center; gap: 16px; }
.editor-back {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: #A7A6A6;
}
.editor-back:hover { background: #242424; color: white; }
.editor-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
}
.editor-title-input {
  background: transparent;
  border: 1px solid transparent;
  color: white;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 6px;
  outline: none;
}
.editor-title-input:hover { background: #242424; }
.editor-title-input:focus { background: #242424; border-color: var(--yellow); }

.editor-body {
  display: grid;
  grid-template-columns: 72px 1fr 320px;
  min-height: 0;
}
.editor-tools {
  background: #0A0A0A;
  border-right: 1px solid #242424;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 4px;
}
.tool-btn {
  width: 56px;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
  color: #A7A6A6;
  font-size: 10px;
  font-weight: 500;
}
.tool-btn:hover { background: #242424; color: white; }
.tool-btn.active { background: #242424; color: var(--yellow); }
.tool-btn svg { width: 20px; height: 20px; }

.editor-canvas-area {
  position: relative;
  background: #141414;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.editor-canvas-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 32px;
  position: relative;
}
.editor-canvas {
  position: relative;
  background: white;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,0.6);
  flex: 0 0 auto;
}
.editor-element {
  position: absolute;
  cursor: pointer;
  transition: outline 80ms ease;
  outline: 2px solid transparent;
}
.editor-element.selected {
  outline: 2px solid var(--cobalt);
  outline-offset: 1px;
}
.editor-element.editing {
  outline: 2px solid var(--cobalt);
  cursor: text;
}
.editor-element [contenteditable]:focus { outline: none; }
.editor-element-handles {
  position: absolute;
  inset: -6px;
  pointer-events: none;
}
.editor-element-handles::before,
.editor-element-handles::after,
.editor-element-handles span {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: white;
  border: 1.5px solid var(--cobalt);
  border-radius: 2px;
}
.editor-element-handles::before { top: -1px; left: -1px; }
.editor-element-handles::after { top: -1px; right: -1px; }
.editor-element-handles span:nth-child(1) { bottom: -1px; left: -1px; }
.editor-element-handles span:nth-child(2) { bottom: -1px; right: -1px; }

.editor-slides {
  background: #0A0A0A;
  border-top: 1px solid #242424;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  flex: 0 0 auto;
}
.editor-slide-thumb {
  position: relative;
  flex: 0 0 auto;
  background: white;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 120ms ease;
}
.editor-slide-thumb.active { border-color: var(--yellow); }
.editor-slide-thumb-number {
  position: absolute;
  top: 4px; left: 6px;
  color: #141414;
  font-size: 10px;
  font-weight: 700;
  background: white;
  padding: 1px 5px;
  border-radius: 4px;
  z-index: 2;
}
.editor-slide-add {
  flex: 0 0 auto;
  width: 60px; height: 84px;
  border: 1px dashed #383838;
  border-radius: 6px;
  color: #6E6E6E;
  display: grid;
  place-items: center;
  font-size: 22px;
}
.editor-slide-add:hover { color: var(--yellow); border-color: var(--yellow); }

.editor-inspector {
  /* The inspector is always a light panel, so pin the color tokens to their
     light values — otherwise in dark theme var(--ink) becomes white and every
     icon/label here goes invisible on the light background. */
  --ink: #070707;
  --ink-2: #383838;
  --ink-3: #6E6E6E;
  --ink-4: #A7A6A6;
  --line: #E5E5E5;
  --line-2: #D6D6D6;
  --surface: #FFFFFF;
  --surface-2: #FFFFFF;
  --bg: #ECECEF;
  background: #F4F4F6;
  color: var(--ink);
  border-left: 1px solid #242424;
  overflow-y: auto;
  padding: 18px;
}
.inspector-section {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.inspector-section:first-child { padding-top: 0; }
.inspector-section:last-child { border-bottom: 0; }
.inspector-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.inspector-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.inspector-row:last-child { margin-bottom: 0; }

.swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid white;
  box-shadow: 0 0 0 1px var(--line);
  cursor: pointer;
  flex: 0 0 auto;
  transition: transform 120ms ease;
}
.swatch:hover { transform: scale(1.1); }
.swatch.active { box-shadow: 0 0 0 2px var(--ink); }
.swatch-row { display: flex; gap: 8px; flex-wrap: wrap; }

.font-pill {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: white;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}
.font-pill.active { border-color: var(--ink); background: var(--bg); }

.number-input {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  overflow: hidden;
}
.number-input button {
  padding: 6px 10px;
  font-size: 14px;
  color: var(--ink-3);
}
.number-input button:hover { background: var(--bg); color: var(--ink); }
.number-input input {
  width: 50px;
  border: 0;
  text-align: center;
  font-size: 13px;
  background: transparent;
  outline: none;
}

/* ============================================
   ASSET SWAP MENU
   ============================================ */
.asset-popover {
  position: absolute;
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.2);
  padding: 14px;
  width: 340px;
  z-index: 100;
}
.asset-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.asset-thumb {
  aspect-ratio: 1;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  background: var(--bg);
  border: 1.5px solid transparent;
  transition: transform 100ms ease, border-color 100ms ease;
}
.asset-thumb:hover { border-color: var(--ink); transform: scale(1.03); }

/* ============================================
   COLOR PICKER
   ============================================ */
.cp-row { display: flex; align-items: center; gap: 10px; }
.cp-input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  background: white;
  text-transform: uppercase;
}
.cp-input:focus { border-color: var(--ink); outline: none; }
.cp-native {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  background: none;
}
.cp-native::-webkit-color-swatch { border: 0; border-radius: 6px; }
.cp-native::-webkit-color-swatch-wrapper { padding: 0; }

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fade-in 280ms ease both; }

@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 18px; height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

/* ============================================
   AI GENERATE PAGE
   ============================================ */
.gen-tab-row {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}
.gen-tab {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}
.gen-tab.active { background: var(--ink); color: var(--surface); }

.option-card {
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  cursor: pointer;
  background: var(--surface-2);
  transition: border-color 120ms ease, background 120ms ease;
}
.option-card:hover { border-color: var(--ink-3); }
.option-card.selected { border-color: var(--ink); background: var(--bg); }
.option-card-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.option-card-desc { font-size: 12px; color: var(--ink-3); line-height: 1.4; }