/* ============================================================
   InstaCaption AI: dark slate surface, violet accent.

   Semantic class names rather than utilities: every rule here is
   editable on the server without a build step of any kind.
   ============================================================ */

:root {
  --background:        #020617;
  --surface:           #0f172a;
  --surface-translucent: rgba(15, 23, 42, 0.5);
  --surface-high:      #1e293b;
  --surface-highest:   #334155;
  --surface-sunken:    #020617;

  --on-surface:        #ffffff;
  --on-surface-variant:#cbd5e1;
  --muted:             #94a3b8;
  --faint:             #64748b;
  --dim:               #475569;

  --outline:           #1e293b;
  --outline-strong:    #334155;

  --accent:            #a855f7;
  --accent-bright:     #c084fc;
  --accent-deep:       #9333ea;
  --accent-pink:       #db2777;

  --danger:            #f87171;
  --danger-soft:       #fca5a5;
  --success:           #34d399;
  --success-soft:      #6ee7b7;
  --warn:              #fbbf24;
  --warn-soft:         #fcd34d;
  --blue:              #3b82f6;

  --r-sm:   0.375rem;
  --r:      0.5rem;
  --r-md:   0.75rem;
  --r-lg:   1rem;
  --r-xl:   1.5rem;
  --r-full: 9999px;

  --shell-w: 80rem;
  --dock-h: 4.25rem;

  /* Google Sans family, all three self-hosted from fonts/. The stacks below
     only ever fall back to a system face while the woff2 is still in flight
     (font-display: swap), never to a fourth typeface by design.

     Weight ranges are fixed by the files: Sans 400-700, Flex 600-700,
     Code 400-500. The browser clamps anything outside its range silently, so
     nothing here asks for a weight the face cannot draw. */
  --sans:    'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --display: 'Google Sans Flex', 'Google Sans', -apple-system, sans-serif;
  --mono:    'Google Sans Code', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--background);
  color: var(--on-surface);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  padding-bottom: var(--dock-h);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent-pink); color: #fff; }

/* One visible focus ring everywhere. :focus-visible rather than :focus so a
   mouse click does not leave a ring behind, while keyboard users always get
   one: several controls here have no border or background of their own. */
:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-high); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--surface-highest); }

/* ---------- Utilities ----------------------------------------------------- */

.hidden { display: none !important; }

.sr-only, .offscreen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.offscreen { left: -9999px; top: 0; clip: auto; width: auto; height: auto; }

.muted { color: var(--muted); font-weight: 400; }
.hint { font-size: 0.6875rem; color: var(--faint); margin: 0.5rem 0 0; }
.accent { color: var(--accent-bright); }
.label-hint { color: var(--faint); font-weight: 400; text-transform: none; }
.wide-only { display: none; }

@media (min-width: 640px) { .wide-only { display: inline; } }

/* ---------- Icons ---------------------------------------------------------- */

.sprite { display: none; }

.icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-sm { width: 1.125rem; height: 1.125rem; }
.icon-xs { width: 0.875rem; height: 0.875rem; }

/* Solid glyphs rather than stroked outlines. The product mark relies on
   fill-rule evenodd, so its spark reads as a hole punched through the bubble
   and whatever sits behind shows through. */
.icon-solid { fill: currentColor; stroke: none; }

/* The verified tick is a solid glyph, not a stroked outline. */
.verified { fill: var(--blue); stroke: none; }

/* ---------- Ambient background --------------------------------------------- */

.ambient {
  position: fixed;
  inset: 0;
  background: var(--background);
  z-index: -2;
}

.ambient-glow {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--shell-w);
  height: 31rem;
  background: rgba(88, 28, 135, 0.2);
  filter: blur(120px);
  border-radius: var(--r-full);
  pointer-events: none;
  z-index: -1;
}

/* ---------- Header --------------------------------------------------------- */

.topbar {
  width: 100%;
  max-width: var(--shell-w);
  margin: 0 auto;
  padding: 2rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand { display: flex; align-items: center; gap: 0.75rem; }

.brand-mark {
  display: grid;
  place-items: center;
  padding: 0.5rem;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-pink) 100%);
  box-shadow: 0 10px 20px -8px rgba(168, 85, 247, 0.6);
  color: #fff;
}

.brand-name {
  margin: 0;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
/* 400 rather than the old 300: Google Sans Flex carries 600-700 only, and the
   wordmark's lighter half falls back to Google Sans, whose floor is 400. */
.brand-name span {
  color: var(--accent-bright);
  font-family: var(--sans);
  font-weight: 400;
}

.topbar-actions { display: flex; align-items: center; gap: 1rem; }

.key-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--on-surface-variant);
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--outline);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.key-chip:hover { background: var(--surface-high); }

.key-chip.needs-key {
  color: var(--warn-soft);
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.4);
}
.key-chip.needs-key:hover { background: rgba(245, 158, 11, 0.2); }

.key-chip span:not(.key-dot) { display: none; }
@media (min-width: 640px) { .key-chip span:not(.key-dot) { display: inline; } }

.key-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--r-full);
  background: var(--success);
}
.needs-key .key-dot { background: var(--warn); }

.icon-btn {
  display: grid;
  place-items: center;
  padding: 0.5rem;
  color: var(--muted);
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--outline);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.icon-btn:hover { background: var(--surface-high); color: var(--on-surface); }

.spend-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--on-surface-variant);
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--outline);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 0.15s;
}
.spend-chip:hover { background: var(--surface-high); }
.spend-chip .icon { color: var(--accent-bright); }
.spend-cost { color: var(--muted); }
.spend-cost:empty { display: none; }

.spend-rows { display: flex; flex-direction: column; gap: 0.75rem; }

.spend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--surface-high);
  border-radius: var(--r-md);
}
.spend-row-main { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.spend-model { font-size: 0.8125rem; font-weight: 600; word-break: break-all; }
.spend-detail { font-family: var(--mono); font-size: 0.6875rem; color: var(--muted); }
.spend-amount { font-family: var(--mono); font-size: 0.875rem; font-weight: 500; flex: none; }

.spend-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--outline);
  font-weight: 600;
}
.spend-total span:last-child { font-family: var(--mono); font-weight: 500; }

/* ---------- Data tab ---------------------------------------------------------- */

.data-summary {
  padding: 0.75rem 1rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--on-surface-variant);
  background: var(--surface-high);
  border-radius: var(--r-md);
}

.data-actions { display: flex; gap: 0.75rem; }
.data-actions .btn { flex: 1 1 0; }

/* ---------- Shell ---------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell-w);
  margin: 0 auto;
  padding: 0 1rem 4rem;
}
@media (min-width: 640px) { .shell { padding: 0 1.5rem 4rem; } }

/* ---------- Banners --------------------------------------------------------- */

.banner {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  margin-bottom: 1.5rem;
  border-radius: var(--r-lg);
  animation: fade-in 0.3s ease-out;
}

.banner-error { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); }
.banner-notice { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); align-items: center; }

.banner-icon {
  display: grid;
  place-items: center;
  flex: none;
  padding: 0.5rem;
  border-radius: var(--r-full);
}
.banner-error .banner-icon { background: rgba(239, 68, 68, 0.2); color: var(--danger); }
.banner-notice .banner-icon { background: rgba(16, 185, 129, 0.2); color: var(--success); }

.banner-body { flex: 1 1 auto; margin: 0; font-size: 0.875rem; }
.banner-body h4 { margin: 0 0 0.25rem; font-size: 0.875rem; color: var(--danger); }
.banner-error .banner-body p { margin: 0; color: rgba(252, 165, 165, 0.8); }
.banner-notice .banner-body { color: rgba(110, 231, 183, 0.9); }

.banner-close {
  flex: none;
  padding: 0.25rem;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  color: inherit;
  cursor: pointer;
  opacity: 0.8;
}
.banner-close:hover { opacity: 1; }
.banner-error .banner-close { color: var(--danger); }
.banner-notice .banner-close { color: var(--success); }

/* ---------- Empty state ----------------------------------------------------- */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5rem 0;
  animation: fade-in 0.4s ease-out;
}

.hero { max-width: 42rem; text-align: center; margin-bottom: 3rem; }

.hero h2 {
  margin: 0 0 1.5rem;
  font-family: var(--display);
  font-size: clamp(2.25rem, 7vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  background: linear-gradient(180deg, #fff 0%, var(--muted) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p { margin: 0; font-size: 1.125rem; color: var(--muted); }

.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 42rem;
  aspect-ratio: 16 / 9;
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  border: 2px dashed var(--outline-strong);
  border-radius: var(--r-xl);
  background: var(--surface-translucent);
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
}
.dropzone:hover { border-color: var(--dim); background: rgba(30, 41, 59, 0.5); }

.dropzone.is-dragging {
  background: var(--surface-high);
  border-style: solid;
  border-color: var(--accent);
  transform: scale(1.02);
}

.dropzone-icon {
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  border: 1px solid var(--outline-strong);
  border-radius: var(--r-lg);
  background: var(--surface-high);
  color: var(--accent-bright);
  transition: border-color 0.3s;
}
.dropzone-icon .icon { width: 2.5rem; height: 2.5rem; }
.dropzone:hover .dropzone-icon { border-color: rgba(168, 85, 247, 0.5); }

.dropzone-title {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.dropzone-hint { color: var(--muted); }

.chips { display: flex; gap: 0.75rem; }
.chip {
  padding: 0.25rem 0.5rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--faint);
  background: var(--surface-high);
  border-radius: var(--r-sm);
}

/* ---------- Saved caption view ---------------------------------------------- */

.saved-view {
  max-width: 36rem;
  margin: 0 auto;
  padding-top: 0.5rem;
  animation: fade-in 0.3s ease-out;
}

.saved-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.saved-head h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1.25rem;
}
.saved-head h2 .icon { color: var(--accent-bright); width: 1.25rem; height: 1.25rem; }
.saved-head p { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--muted); }

.saved-view .btn-block { margin-top: 1.5rem; }

/* ---------- Workspace ------------------------------------------------------- */

.workspace {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-top: 1rem;
  animation: slide-up 0.4s ease-out;
}

@media (min-width: 1024px) {
  .workspace { grid-template-columns: 7fr 5fr; gap: 3rem; }
  .col-preview { position: sticky; top: 2rem; align-self: start; }
}

.col-controls { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.col-preview { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }

.preview-head { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.preview-head h3 { margin: 0; font-size: 1.125rem; }
@media (min-width: 1024px) { .preview-head { justify-content: flex-start; } }

/* ---------- Cards ----------------------------------------------------------- */

.card {
  padding: 1.5rem;
  background: var(--surface-translucent);
  border: 1px solid var(--outline);
  border-radius: var(--r-xl);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
}

.card-flush { padding: 0; overflow: hidden; }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.card-head h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.card-foot {
  display: flex;
  gap: 0.75rem;
  padding: 1.5rem;
  border-top: 1px solid var(--outline);
  background: rgba(15, 23, 42, 0.3);
}

.stage {
  position: relative;
  height: 16rem;
  margin-bottom: 1rem;
  overflow: hidden;
  background: var(--surface-sunken);
  border: 1px solid rgba(30, 41, 59, 0.5);
  border-radius: var(--r-lg);
}
.stage img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- Image strip ------------------------------------------------------ */

.strip {
  display: flex;
  gap: 0.75rem;
  padding-bottom: 0.5rem;
  overflow-x: auto;
}

.thumb {
  position: relative;
  flex: none;
  width: 6rem;
  height: 6rem;
  overflow: hidden;
  border: 2px solid var(--outline);
  border-radius: var(--r-md);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.thumb:hover, .thumb:focus-within { border-color: var(--dim); }
.thumb.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.3); }

/* The picker fills the tile and sits beneath the controls, which are its
   siblings rather than its children so no button is nested in another. */
.thumb-select {
  position: absolute;
  inset: 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.thumb-select img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Inset, because the tile clips overflow and an outset ring would vanish. */
.thumb-select:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: -4px; }
.thumb-badge, .thumb-remove, .thumb-nav { z-index: 1; }

.thumb-badge {
  position: absolute;
  top: 0.25rem; left: 0.25rem;
  padding: 0.125rem 0.375rem;
  font-size: 0.625rem;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  border-radius: var(--r-sm);
}

.thumb-remove {
  position: absolute;
  top: 0.25rem; right: 0.25rem;
  display: grid;
  place-items: center;
  padding: 0.25rem;
  color: var(--danger-soft);
  background: rgba(0, 0, 0, 0.7);
  border: 0;
  border-radius: var(--r-full);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}
/* focus-within as well as hover: a keyboard user tabbing onto these controls
   must be able to see the one they have landed on. */
.thumb:hover .thumb-remove,
.thumb:focus-within .thumb-remove { opacity: 1; }
.thumb-remove:hover { background: rgba(239, 68, 68, 0.8); color: #fff; }

.thumb-nav {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 0.25rem 0.25rem;
  opacity: 0;
  transition: opacity 0.15s;
}
.thumb:hover .thumb-nav,
.thumb:focus-within .thumb-nav { opacity: 1; }

.thumb-nav button {
  display: grid;
  place-items: center;
  padding: 0.25rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.thumb-nav button:hover:not(:disabled) { background: rgba(0, 0, 0, 0.9); }
.thumb-nav button:disabled { opacity: 0.3; cursor: default; }

.thumb-add {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 6rem;
  height: 6rem;
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--faint);
  background: none;
  border: 2px dashed var(--outline-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.thumb-add:hover {
  color: var(--accent-bright);
  border-color: rgba(168, 85, 247, 0.6);
  background: rgba(30, 41, 59, 0.4);
}

/* ---------- Tabs -------------------------------------------------------------- */

.tabs { display: flex; border-bottom: 1px solid var(--outline); }

.tab {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0.5rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--faint);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.tab:hover { color: var(--on-surface-variant); background: rgba(30, 41, 59, 0.3); }
.tab.is-active {
  color: var(--on-surface);
  background: rgba(30, 41, 59, 0.5);
  border-bottom-color: var(--accent);
}

.tabs-modal { padding: 0 1.75rem; gap: 1.5rem; }
.tabs-modal .tab { flex: none; justify-content: flex-start; padding: 0 0 0.75rem; background: none; }
.tabs-modal .tab.is-active { background: none; }

/* ---------- Panels and fields -------------------------------------------------- */

.panel { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; animation: fade-in 0.25s ease-out; }
@media (min-width: 640px) { .card-flush > .panel { padding: 2rem; } }

.field-row { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }

.field label,
.field-label-row label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.field-label-row .hint { margin: 0; }

input[type="text"],
input[type="password"],
textarea,
select {
  width: 100%;
  padding: 0.75rem 1rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--on-surface);
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid var(--outline-strong);
  border-radius: var(--r-md);
  transition: border-color 0.15s, box-shadow 0.15s;
}

textarea { resize: none; line-height: 1.6; }

select {
  background: var(--surface-high);
  appearance: none;
  cursor: pointer;
  /* Room for the chevron drawn by the background image below. */
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 1rem;
}

::placeholder { color: var(--faint); }

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25);
}

/* Modal fields sit on a darker surface than workspace fields. */
.modal input[type="text"], .modal input[type="password"] { background: var(--surface-sunken); border-color: var(--outline); }

/* ---------- Segmented controls and pills ---------------------------------------- */

.seg {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--surface-high);
  border-radius: var(--r-md);
}

.seg-btn {
  flex: 1 1 0;
  padding: 0.625rem 0.5rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--faint);
  background: none;
  border: 0;
  border-radius: var(--r);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.seg-btn:hover { color: var(--on-surface-variant); }
.seg-btn.is-active { color: #fff; background: var(--dim); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }

.pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.pill {
  padding: 0.5rem 1rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  background: var(--surface-high);
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.pill:hover { background: var(--surface-highest); color: var(--on-surface-variant); }
.pill.is-active {
  color: #000;
  background: #fff;
  transform: scale(1.05);
  box-shadow: 0 10px 20px -10px rgba(255, 255, 255, 0.4);
}

/* ---------- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, opacity 0.15s, transform 0.1s;
}
.btn:disabled { opacity: 0.7; cursor: not-allowed; }

.btn-grow { flex: 1 1 auto; padding: 1rem; gap: 0.75rem; }
.btn-block { width: 100%; padding: 0.875rem; }

.btn-primary { color: #000; background: #fff; }
.btn-primary:hover:not(:disabled) { background: #e2e8f0; }
.btn-primary:active:not(:disabled) { transform: scale(0.99); }

.btn-muted { color: var(--on-surface-variant); background: var(--surface-high); font-weight: 600; }
.btn-muted:hover { background: var(--surface-highest); }

.btn-danger {
  color: var(--danger-soft);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  padding: 1rem 1.25rem;
}
.btn-danger:hover { background: rgba(239, 68, 68, 0.2); }

.btn-ghost-danger {
  color: var(--danger);
  background: none;
  border: 1px solid rgba(239, 68, 68, 0.4);
  font-weight: 600;
}
.btn-ghost-danger:hover { background: rgba(239, 68, 68, 0.1); }

.link-danger, .link-accent {
  padding: 0;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.link-danger { color: var(--danger); }
.link-danger:hover { color: var(--danger-soft); }
.link-accent { color: var(--accent-bright); }
.link-accent:hover { color: #ddd6fe; }

.spinner {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-top-color: #000;
  border-radius: var(--r-full);
  animation: spin 0.7s linear infinite;
}

/* ---------- Instagram preview ----------------------------------------------------- */

.phone {
  width: 100%;
  max-width: 23.75rem;
  margin: 0 auto;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--outline);
  border-radius: 2.5rem;
  box-shadow: 0 0 0 8px var(--surface), 0 25px 50px -12px rgba(0, 0, 0, 0.8);
  animation: fade-in 0.3s ease-out;
}

/* The numeric chrome uses Google Sans Code for its tabular figures: the clock,
   the slide counter and the like count all change value in place, and
   proportional digits make them jitter as they do. Weight 500 is the face's
   ceiling, so nothing here is clamped. */
.phone-status {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 1rem 1.5rem 0.5rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}
.phone-status-dots { display: flex; gap: 0.375rem; }
.phone-status-dots i {
  width: 1rem;
  height: 1rem;
  border: 1px solid currentColor;
  border-radius: var(--r-full);
  opacity: 0.4;
}

.phone-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(30, 41, 59, 0.5);
}

.phone-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  background: none;
  border: 0;
  cursor: pointer;
}

.phone-head-icons { display: flex; gap: 1.25rem; color: #fff; }

.phone-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--surface);
}
.phone-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.phone-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--outline-strong);
}
.phone-placeholder .icon { width: 3rem; height: 3rem; }

.slide-counter {
  position: absolute;
  top: 0.75rem; right: 0.75rem;
  padding: 0.25rem 0.625rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  border-radius: var(--r-full);
  backdrop-filter: blur(4px);
}

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  padding: 0.375rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  border: 0;
  border-radius: var(--r-full);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}
.carousel-nav.prev { left: 0.5rem; }
.carousel-nav.next { right: 0.5rem; }
.phone-media:hover .carousel-nav { opacity: 1; }
.carousel-nav:hover { background: rgba(0, 0, 0, 0.8); }


.phone-dots { display: flex; align-items: center; justify-content: center; gap: 0.375rem; padding-top: 0.75rem; }

.dot {
  width: 0.375rem;
  height: 0.375rem;
  padding: 0;
  background: var(--dim);
  border: 0;
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background 0.15s;
}
.dot:hover { background: var(--faint); }
.dot.is-active { background: var(--blue); }

.phone-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  color: #fff;
}
.phone-actions-left { display: flex; align-items: center; gap: 1rem; }
.phone-actions .heart { cursor: pointer; transition: color 0.15s; }
.phone-actions .heart:hover { color: #ef4444; }
.phone-actions .rotated { transform: rotate(-90deg); }

.phone-likes {
  padding: 0 0.75rem;
  margin-bottom: 0.5rem;
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 500;
}

.phone-caption { padding: 0 0.75rem 1.5rem; font-size: 0.875rem; }

.caption-view {
  position: relative;
  margin: -0.25rem;
  padding: 0.25rem;
  border-radius: var(--r);
  transition: background 0.15s;
}
.caption-view.is-editable { cursor: text; }
.caption-view.is-editable:hover { background: rgba(15, 23, 42, 0.4); }

.caption-view p { margin: 0; color: #f1f5f9; white-space: pre-wrap; line-height: 1.6; }
.caption-handle { font-weight: 700; margin-right: 0.5rem; }

.caption-edit-hint {
  position: absolute;
  top: 0.25rem; right: 0.25rem;
  color: var(--faint);
  opacity: 0;
  transition: opacity 0.15s;
}
.caption-view.is-editable:hover .caption-edit-hint { opacity: 1; }

.caret {
  display: inline-block;
  width: 0.375rem;
  height: 1rem;
  margin-left: 0.125rem;
  margin-bottom: -0.125rem;
  background: var(--accent-bright);
  animation: pulse 1s ease-in-out infinite;
}

.caption-editor textarea {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(168, 85, 247, 0.5);
  padding: 0.5rem;
  font-size: 0.875rem;
  overflow: hidden;
}
.caption-editor .link-accent { margin-top: 0.5rem; }

.phone-time {
  margin: 0.5rem 0 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--faint);
}

.phone-foot {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--surface);
  border-top: 1px solid var(--outline);
}

/* Instagram's ceilings, shown before the user finds out the hard way. */
.limits {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--muted);
}
.limits .is-over { color: var(--danger); font-weight: 500; }

/* Everything past the 125-character fold, which readers only see after
   tapping "more". Dimmed rather than hidden so it stays editable. */
.caption-rest { color: var(--muted); }
.caption-more { color: var(--faint); font-weight: 500; }

.foot-actions { display: flex; gap: 0.75rem; }
.foot-actions .btn-copy { flex: 1 1 auto; }

.btn-share {
  flex: none;
  padding: 0.75rem 1rem;
  color: var(--accent-bright);
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.35);
}
.btn-share:hover:not(:disabled) { background: rgba(168, 85, 247, 0.22); }

.btn-copy { width: 100%; padding: 0.75rem; color: var(--faint); background: var(--surface-high); }
.btn-copy:not(:disabled) { color: #000; background: #fff; }
.btn-copy:not(:disabled):hover { background: #e2e8f0; }
.btn-copy.is-copied, .btn-copy.is-copied:hover { color: #fff; background: #22c55e; }
.btn-copy.is-failed, .btn-copy.is-failed:hover {
  color: var(--danger-soft);
  background: rgba(239, 68, 68, 0.2);
  font-size: 0.8125rem;
}

.phone-foot .seg-btn.is-active { background: var(--accent-deep); }

/* ---------- History dock -------------------------------------------------------- */

.history-dock {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 30;
  background: rgba(15, 23, 42, 0.9);
  border-top: 1px solid var(--outline);
  box-shadow: 0 -10px 40px -15px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
}

.history-inner { max-width: var(--shell-w); margin: 0 auto; }

.history-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem;
  font: inherit;
  color: var(--on-surface-variant);
  background: none;
  border: 0;
  cursor: pointer;
  transition: background 0.15s;
}
.history-toggle:hover { background: rgba(30, 41, 59, 0.5); }

.history-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
}
.history-title .icon { color: var(--muted); }

.chevron { color: var(--muted); transition: transform 0.3s; }
.chevron.is-open { transform: rotate(180deg); }

.history-panel { padding: 1rem; border-top: 1px solid var(--outline-strong); }

.history-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 15rem;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.history-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: rgba(30, 41, 59, 0.5);
  border-radius: var(--r);
}

.history-thumb {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 5rem;
  height: 5rem;
  overflow: hidden;
  color: var(--faint);
  background: var(--outline-strong);
  border-radius: var(--r-sm);
}
.history-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.history-badge {
  position: absolute;
  top: 0.25rem; right: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.375rem;
  font-size: 0.625rem;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  border-radius: var(--r-sm);
}

.history-body { flex: 1 1 auto; min-width: 0; }
.history-time { margin: 0 0 0.25rem; font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }

.history-caption {
  margin: 0;
  font-size: 0.875rem;
  color: var(--on-surface-variant);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.history-actions { display: flex; flex-direction: column; gap: 0.5rem; flex: none; }
@media (min-width: 640px) { .history-actions { flex-direction: row; } }

.history-actions button {
  display: grid;
  place-items: center;
  padding: 0.5rem;
  color: var(--on-surface-variant);
  background: var(--outline-strong);
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.history-actions button:hover { background: var(--dim); }
.history-actions button.is-danger { color: var(--danger); background: rgba(127, 29, 29, 0.5); }
.history-actions button.is-danger:hover { background: rgba(127, 29, 29, 0.8); }

.history-empty { padding: 1rem 0; text-align: center; color: var(--muted); }

.history-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--outline-strong);
}
.history-foot .link-danger { font-size: 0.875rem; }

/* ---------- Settings modal -------------------------------------------------------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  animation: fade-in 0.2s ease-out;
}

.modal {
  width: 100%;
  max-width: 28rem;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--r-xl);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
}

.modal-head { display: flex; align-items: center; gap: 0.75rem; padding: 1.75rem 1.75rem 1rem; }
.modal-head h2 { flex: 1 1 auto; margin: 0; font-size: 1.25rem; }

.modal-mark {
  display: grid;
  place-items: center;
  padding: 0.5rem;
  color: #fff;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-pink) 100%);
  border-radius: var(--r-md);
}

.modal .panel { padding: 1.75rem; gap: 1.25rem; }
.panel-note { margin: 0; font-size: 0.875rem; color: var(--muted); line-height: 1.6; }
.panel-note a { color: var(--accent-bright); }

.checkbox {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.checkbox input { width: 1rem; height: 1rem; accent-color: var(--accent); }

.status { padding: 0.75rem 1rem; font-size: 0.875rem; border: 1px solid; border-radius: var(--r-md); }
.status.is-ok { color: var(--success-soft); background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.2); }
.status.is-bad { color: var(--danger-soft); background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.2); }

.modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.modal-foot .btn-primary { padding: 0.625rem 1.5rem; }

/* ---------- User guide ---------------------------------------------------------- */

/* Wider than the settings dialog, and capped so the guide scrolls inside the
   modal rather than pushing the page around behind it. */
.modal-wide { max-width: 44rem; display: flex; flex-direction: column; max-height: min(85vh, 52rem); }

.guide {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.guide-section { padding-top: 1.5rem; border-top: 1px solid var(--outline); }
.guide-section:first-child { padding-top: 0.5rem; border-top: 0; }

.guide-section h3 {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 0.75rem;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 600;
}

.step {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-pink) 100%);
  border-radius: var(--r-full);
}

.guide-section > p { margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--on-surface-variant); line-height: 1.65; }
.guide-section a { color: var(--accent-bright); }

.guide-note {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  font-size: 0.8125rem !important;
  color: var(--muted) !important;
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.2);
  border-radius: var(--r-md);
}
.guide-note .icon { color: var(--accent-bright); margin-top: 0.125rem; }

.guide-cards { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 640px) { .guide-cards { grid-template-columns: 1fr 1fr; } }

.guide-card {
  padding: 0.875rem 1rem;
  background: var(--surface-high);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--r-md);
}
.guide-card b {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
}
.guide-card b .icon { color: var(--accent-bright); }
.guide-card p { margin: 0; font-size: 0.8125rem; color: var(--muted); line-height: 1.6; }

.guide-foot {
  flex: none;
  display: flex;
  justify-content: flex-end;
  padding: 1.25rem 1.75rem;
  border-top: 1px solid var(--outline);
}
.guide-foot .btn { padding: 0.625rem 1.75rem; }

/* ---------- Touch ---------------------------------------------------------
   Everything revealed by :hover has to be revealed some other way here,
   because a touch device never produces a hover state. The slide controls
   were the worst of it: on a phone the remove and reorder buttons were
   invisible until the tile happened to take focus, so the way this app is
   mainly used had no discoverable way to reorder a carousel.

   Hit areas grow at the same time. The icons keep their size; only padding
   changes, so nothing is redrawn, it just becomes reachable by thumb.

   This block sits at the end deliberately. An earlier version was placed up
   beside the carousel rules, where the later .dot declaration simply
   overrode it and the enlarged dot target silently did nothing.
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .carousel-nav,
  .thumb-remove,
  .thumb-nav,
  .caption-edit-hint { opacity: 1; }

  .thumb-remove,
  .thumb-nav button,
  .carousel-nav { padding: 0.5rem; }

  /* Border-box sizing means the padding eats inwards, so the visible dot
     stays 6px while the tappable square grows to 24px. */
  .dot {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0.5625rem;
    background-clip: content-box;
  }
}

/* ---------- Animations -------------------------------------------------------- */

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.2; }
}

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