/* The product's palette, shared by every web surface: the marketing pages, the
   signed-in pages and all thirteen admin pages.

   These are a port of the app's `keyart` palette (mobile/lib/ui/theme/
   palettes.dart), which is built from the PixPicker key art and is the app's
   default. The file used to hold a port of the app's *Studio* palette, which
   the app has since demoted, and three values had drifted from the app's own
   later fixes — so the website, the panel and the app were three different
   blues. Changing anything here now means changing it in palettes.dart too, or
   the fork starts again.

   The key art names three colours — gold #F8C000, cyan #00D0E8 and the check
   green #40C830 — and **none of the three can carry text**: on white they
   measure 1.68, 1.88 and 2.21 to one. So they are fills here, never type. The
   readable teal below is what the app derives for the same reason.

   Flat, hairline, token-based. Light default, dark automatic. */
:root {
  --surface-0: #ebf2f4;   /* page */
  --surface-1: #f6fafb;   /* subtle fill */
  --surface-2: #ffffff;   /* card */
  --text-primary: #121a1c;
  --text-secondary: #4c5a5e;
  --text-muted: #626e71;
  --border: rgba(0,0,0,.10);
  --border-strong: rgba(0,0,0,.18);
  --accent: #00899f;
  /* The app has no equivalent of these two, because Flutter's buttons are not
     wired accent-plus-white the way `.btn.primary` is. White on --accent is
     4.13:1 in light and 2.12:1 in dark — both fail — so a fill that carries a
     label uses this pair instead: 7.14:1 light, 8.78:1 dark. */
  --accent-strong: #02616f;
  --accent-ink: #ffffff;
  --bg-accent: #def4f8;
  --text-accent: #02616f;
  /* The key art's gold. A fill and a tint; --text-brand is the only one of the
     three that may be set as type. */
  --brand: #f8c000;
  --bg-brand: #fff4cf;
  --text-brand: #7a5600;
  /* Pro stays indigo deliberately, in the app too: a plan badge painted in a
     brand hue is indistinguishable from brand chrome. */
  --bg-pro: #eeedfe;
  --text-pro: #3c3489;
  --bg-success: #e3f6e1;
  --text-success: #1c7a20;
  --radius: 8px;
  --card-radius: 12px;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* The dark values, written once and applied from two places.
 *
 * The site now has a real switch (theme.js, the button in the marketing nav),
 * so the operating system is the *default* rather than the only word. The
 * media query is guarded with :not([data-theme="light"]) so an explicit light
 * choice wins on a machine set to dark; the attribute rule below applies the
 * same values when someone explicitly picks dark on a machine set to light.
 *
 * Keep the two lists identical. They are duplicated because a media query and
 * an attribute cannot be combined in one selector, and because @media
 * (prefers-color-scheme) cannot be overridden by specificity alone. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-0: #0c1417;
    --surface-1: #131f23;
    --surface-2: #1a272c;
    --text-primary: #e9f1f2;
    --text-secondary: #9fadb0;
    --text-muted: #8a989b;
    --border: rgba(255,255,255,.11);
    --border-strong: rgba(255,255,255,.20);
    --accent: #35c2dc;
    /* Inverted in dark: the bright cyan is the fill and the ink goes dark. */
    --accent-strong: #35c2dc;
    --accent-ink: #0c1417;
    --bg-accent: #06303a;
    --text-accent: #79d8ec;
    --brand: #ffc90d;
    --bg-brand: #3a2f06;
    --text-brand: #ffd84a;
    --bg-pro: #241f3a;
    --text-pro: #cecbf6;
    --bg-success: #0e2c10;
    --text-success: #63d255;
  }
}
:root[data-theme="dark"] {
  --surface-0: #0c1417;
  --surface-1: #131f23;
  --surface-2: #1a272c;
  --text-primary: #e9f1f2;
  --text-secondary: #9fadb0;
  --text-muted: #8a989b;
  --border: rgba(255,255,255,.11);
  --border-strong: rgba(255,255,255,.20);
  --accent: #35c2dc;
  --accent-strong: #35c2dc;
  --accent-ink: #0c1417;
  --bg-accent: #06303a;
  --text-accent: #79d8ec;
  --brand: #ffc90d;
  --bg-brand: #3a2f06;
  --text-brand: #ffd84a;
  --bg-pro: #241f3a;
  --text-pro: #cecbf6;
  --bg-success: #0e2c10;
  --text-success: #63d255;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-weight: 500; margin: 0; }
h2 { font-size: 18px; }
h3 { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }

/* top bar */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px clamp(16px, 4vw, 28px);
  background: var(--surface-2); border-bottom: .5px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.btn.sm { height: 32px; padding: 5px 12px; font-size: 13px; }
a.btn { text-decoration: none; }
.mark {
  width: 30px; height: 30px; border-radius: 8px; background: var(--bg-accent);
  color: var(--text-accent); display: grid; place-items: center; font-size: 18px;
}
.name { font-weight: 500; font-size: 16px; }
.badge-pro {
  font-size: 12px; padding: 3px 10px; border-radius: 20px;
  background: var(--bg-success); color: var(--text-success);
}
.badge-pro:empty { display: none; }

main { max-width: 900px; margin: 0 auto; padding: clamp(16px, 4vw, 28px) clamp(16px, 4vw, 28px) 64px; }

/* cards */
.card {
  background: var(--surface-2); border: .5px solid var(--border);
  border-radius: var(--card-radius); padding: clamp(16px, 3vw, 22px);
  margin-bottom: 16px;
}
.step { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.num {
  width: 24px; height: 24px; border-radius: 50%; background: var(--surface-1);
  border: .5px solid var(--border); color: var(--text-secondary);
  display: grid; place-items: center; font-size: 13px; font-weight: 500;
}

/* segmented control */
.segmented { display: inline-flex; background: var(--surface-1); border: .5px solid var(--border); border-radius: var(--radius); padding: 3px; gap: 3px; margin-bottom: 16px; }
.seg { background: transparent; color: var(--text-secondary); border: none; border-radius: 6px; padding: 7px 14px; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.seg.active { background: var(--surface-2); color: var(--text-primary); box-shadow: 0 0 0 .5px var(--border); }

/* dropzone */
#dropzone {
  display: flex; align-items: center; gap: 16px; cursor: pointer;
  border: 1px dashed var(--border-strong); border-radius: var(--card-radius);
  padding: 20px; background: var(--surface-1);
}
#dropzone:hover, #dropzone:focus-visible, #dropzone.drag { border-color: var(--accent); background: var(--bg-accent); outline: none; }
.dz-icon { font-size: 28px; color: var(--text-accent); }
.dz-title { margin: 0; font-size: 15px; font-weight: 500; }
.dz-sub { margin: 2px 0 0; font-size: 13px; color: var(--text-muted); }

.selection { margin-top: 14px; }
.sel-summary { margin: 0; font-size: 14px; }
.sel-summary .muted { color: var(--text-muted); }
.subtoggle { display: inline-flex; align-items: center; gap: 9px; margin-top: 10px; font-size: 14px; background: var(--surface-1); border: .5px solid var(--border); border-radius: var(--radius); padding: 9px 13px; cursor: pointer; }
.subtoggle input { width: 16px; height: 16px; accent-color: var(--accent); }

/* fields */
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.field.inline { flex-direction: row; align-items: center; gap: 8px; }
/* `email` and `password` were missing, so those inputs inherited nothing: on
   the contact page the "Work email" box rendered full-width and unstyled
   beside the boxes either side of it. Easy to miss, because the fields that
   *were* styled looked right. */
input[type=text], input[type=number], input[type=email], input[type=password] {
  background: var(--surface-2); color: var(--text-primary); border: .5px solid var(--border-strong);
  border-radius: var(--radius); padding: 9px 11px; font-size: 14px; font-family: inherit; height: 38px;
}
input[type=text], input[type=email], input[type=password] {
  width: 100%; max-width: 340px;
}
input[type=number] { width: 90px; }
input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }

/* tier cards */
.tier-block { margin-top: 20px; }
.tier-head { margin-bottom: 10px; }
.tier-head .lbl { font-size: 13px; color: var(--text-muted); }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tier {
  position: relative; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface-2); border: .5px solid var(--border); border-radius: var(--card-radius);
  padding: 14px;
}
.tier .ticon { font-size: 20px; color: var(--text-secondary); margin-bottom: 4px; }
.tier b { font-size: 15px; font-weight: 500; }
.tier small { color: var(--text-muted); font-size: 12px; }
.tier .lock { display: none; position: absolute; top: 12px; right: 12px; color: var(--text-muted); font-size: 15px; }
.tier:hover { border-color: var(--border-strong); }
.tier.active { border: 2px solid var(--accent); padding: 13px; }
.tier.active .ticon { color: var(--text-accent); }
.tier.locked { cursor: not-allowed; }
.tier.locked b, .tier.locked small, .tier.locked .ticon { color: var(--text-muted); }
.tier.locked .lock { display: block; }
.tier[data-tier="pro"].active, .tier[data-tier="ultra"].active { border-color: var(--text-pro); }
.upsell { margin: 12px 0 0; font-size: 13px; color: var(--text-pro); display: flex; align-items: center; gap: 6px; }

/* locked while a run is in flight — only Cancel/completion re-enables these */
.locked-while-running { pointer-events: none; opacity: 0.5; }

/* buttons + controls */
.controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: .5px solid var(--border-strong); background: var(--surface-2); color: var(--text-primary);
  border-radius: var(--radius); padding: 9px 16px; font-size: 14px; font-weight: 500; font-family: inherit;
}
.btn:hover { background: var(--surface-1); }
.btn:active { transform: scale(.98); }
/* Not --accent: white on it is 4.13:1 in light and 2.12:1 in dark. A fill that
   carries a label uses the pair that was added for the purpose. */
.btn.primary { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.06); background: var(--accent-strong); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.link { color: var(--text-accent); text-decoration: none; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; }
.link:hover { text-decoration: underline; }
.hidden { display: none !important; }
.err { color: #c0392b; font-size: 13px; min-height: 16px; margin: 10px 0 0; }

/* progress */
.progress { margin-top: 18px; display: flex; align-items: center; gap: 12px; }
.bar { flex: 1; height: 6px; background: var(--surface-1); border: .5px solid var(--border); border-radius: 6px; overflow: hidden; }
#barFill { height: 100%; width: 0; background: var(--accent); transition: width .3s; }
#stageText { font-size: 13px; color: var(--text-secondary); min-width: 150px; }

/* two-phase progress (send -> AI filtering) */
.progress-block { margin-top: 18px; display: flex; flex-direction: column; gap: 16px; }
.phase { display: flex; flex-direction: column; gap: 7px; }
.phase-head { display: flex; align-items: center; justify-content: space-between; }
.phase-name { font-size: 13px; font-weight: 500; color: var(--text-primary); display: inline-flex; align-items: center; gap: 6px; }
.phase-pct { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.phase .fill { height: 100%; width: 0; background: var(--accent); transition: width .35s ease; }
.phase.hidden .fill { transition: none; }

/* a moving shimmer so the bar reads as "still working" between progress
   updates, instead of sitting frozen for the length of a whole stage */
.phase .fill.live {
  background-image: linear-gradient(
    100deg, var(--accent) 40%, color-mix(in srgb, var(--accent) 55%, white) 50%, var(--accent) 60%);
  background-size: 250% 100%;
  animation: fillShimmer 1.4s ease-in-out infinite;
}
@keyframes fillShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.phase-stage { font-size: 12px; color: var(--text-secondary); }
.btn.danger { color: #b02020; }
@media (prefers-color-scheme: dark) { .btn.danger { color: #f08a8a; } }
.run-done { margin-top: 16px; padding: 12px 14px; border-radius: var(--radius); background: var(--bg-success); color: var(--text-success); font-size: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* review */
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--surface-1); border: .5px solid var(--border); border-radius: 20px; padding: 5px 12px; font-size: 13px; color: var(--text-secondary); }
.chip b { color: var(--text-primary); font-weight: 500; }
.people { display: flex; flex-direction: column; gap: 8px; }
.person { display: flex; align-items: center; gap: 12px; background: var(--surface-1); border: .5px solid var(--border); border-radius: var(--radius); padding: 8px 12px; }
.person img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.person .meta { flex: 1; font-size: 13px; }
.person .meta b { font-weight: 500; }
.person .meta small { color: var(--text-muted); display: block; }
.person .pri { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.person .pri input { width: 64px; height: 32px; }

/* gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }
.gallery:empty::after { content: "Your ranked photos will appear here."; color: var(--text-muted); font-size: 14px; }
.shot { position: relative; border-radius: var(--card-radius); overflow: hidden; border: .5px solid var(--border); background: var(--surface-1); }
.shot img { width: 100%; height: 130px; object-fit: cover; display: block; }
.shot .rank { position: absolute; top: 7px; left: 7px; background: var(--surface-2); color: var(--text-primary); font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 20px; border: .5px solid var(--border); }
.shot .score { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.62); color: #fff; font-size: 11px; padding: 8px 7px 5px; }
.shot .score .ev { color: #63d255; }

/* view nav (Select vs Image Tools) */
.viewnav {
  max-width: 900px; margin: 0 auto; padding: 16px clamp(16px, 4vw, 28px) 0;
  display: flex; gap: 4px;
}
.vtab {
  background: transparent; border: none; border-bottom: 2px solid transparent;
  color: var(--text-secondary); padding: 8px 14px 12px; font-size: 14px;
  font-weight: 500; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
}
.vtab:hover { color: var(--text-primary); }
.vtab.active { color: var(--text-accent); border-bottom-color: var(--accent); }

/* native select styled like inputs */
.select {
  appearance: none; -webkit-appearance: none;
  background: var(--surface-2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23626e71' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 10px center;
  color: var(--text-primary); border: .5px solid var(--border-strong);
  border-radius: var(--radius); padding: 9px 32px 9px 11px; font-size: 14px;
  font-family: inherit; height: 38px; cursor: pointer; max-width: 260px;
}
.select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }

/* resize-before-selection block */
.speed-block { margin-top: 20px; padding-top: 18px; border-top: .5px solid var(--border); }
.lbl-row { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 8px; color: var(--text-secondary); }
.hint-tag { background: var(--bg-success); color: var(--text-success); font-size: 11px; padding: 1px 8px; border-radius: 12px; font-weight: 500; }
.field-note { margin: 8px 0 0; font-size: 12px; color: var(--text-muted); }

/* image tools */
.view-intro { font-size: 14px; color: var(--text-secondary); margin: 0 0 16px; }
.view-intro b { color: var(--text-primary); font-weight: 500; }
.mark-sm { width: 26px; height: 26px; border-radius: 7px; background: var(--bg-pro); color: var(--text-pro); display: grid; place-items: center; font-size: 15px; }
.tool-sub { margin: -6px 0 14px; font-size: 13px; color: var(--text-muted); }
.dropzone-sm {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  border: 1px dashed var(--border-strong); border-radius: var(--card-radius);
  padding: 16px; background: var(--surface-1); margin-bottom: 14px;
}
.dropzone-sm:hover, .dropzone-sm:focus-visible, .dropzone-sm.drag { border-color: var(--accent); background: var(--bg-accent); outline: none; }
.dz-icon-sm { font-size: 22px; color: var(--text-accent); }
.dz-pick { font-size: 14px; color: var(--text-secondary); }
.tool-opts { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.tool-status { font-size: 13px; color: var(--text-secondary); }

/* admin tables + stats */
.stat-row { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.stat { background: var(--surface-1); border: .5px solid var(--border); border-radius: var(--radius); padding: 10px 16px; min-width: 90px; }
.stat b { font-size: 20px; font-weight: 600; display: block; }
.stat small { color: var(--text-muted); font-size: 12px; }
.table-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; color: var(--text-muted); font-weight: 500; padding: 8px 10px; border-bottom: .5px solid var(--border); white-space: nowrap; }
.tbl td { padding: 9px 10px; border-bottom: .5px solid var(--border); }
.tbl td.muted { color: var(--text-muted); }
.pill { font-size: 11px; padding: 2px 9px; border-radius: 12px; background: var(--surface-1); border: .5px solid var(--border); color: var(--text-secondary); }
.pill.admin { background: var(--bg-pro); color: var(--text-pro); border-color: transparent; }
.select.sm { height: 30px; padding: 4px 26px 4px 8px; font-size: 13px; }

/* Secondary text. Was only ever defined nested (.sel-summary .muted,
   .tbl td.muted), so billing.html's bare `class="muted"` rendered unstyled. */
.muted { color: var(--text-muted); }

/* Save confirmations on the signed-in pages. Same shape as the admin panel's
   (admin.css) so both halves of the site behave identically. */
.toast { position: fixed; right: 16px; bottom: 16px; z-index: 50;
         background: var(--surface-1); border: .5px solid var(--border);
         border-radius: 10px; padding: 10px 14px; font-size: 13px;
         box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.toast.err { border-color: #b02020; color: #b02020; cursor: pointer; }

/* billing plans */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.plan { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.plan .price { font-size: 24px; font-weight: 600; }

@media (max-width: 560px) {
  .tiers { grid-template-columns: 1fr; }
  #stageText { min-width: 0; }
  .tool-opts { gap: 12px; }
  .select { max-width: 100%; }
}

/* Page footer. Lived only in index.html's inline <style> until now, which left
   the same markup on privacy/account/delete-account rendering as a bare stack
   of links. One definition, so the pages stop drifting apart. */
footer {
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  padding: 20px 0 8px;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}