:root {
  --bg: #14151f;
  --panel: #1d1f2c;
  --accent: #4d8eff;
  --text: #e8e8f0;
  --muted: #9a9ab0;
  --border: #2c2e3f;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  padding: 40px 16px;
}
/* Fixed background image, never scrolls with the page - a pseudo-element
   with position:fixed rather than the more obvious background-attachment:
   fixed on body, since that property is unreliable on mobile Safari
   (often just scrolls anyway). A dark scrim over the image keeps the
   page title and footer links (which sit directly on this background,
   not inside an opaque .panel) readable against the image's bright
   center. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(20, 21, 31, 0.6), rgba(20, 21, 31, 0.6)),
    url("app/content/backgrounds/background_1.png") center center / cover no-repeat;
}

/* Front photo (left) and back photo (right) get a large, always-visible
   reference panel either side of the form, so the user can glance at
   their own card - or the assumed standard back - while filling in
   whatever the auto-fill pass couldn't. Collapses to a single column
   (image, then form, then image) once there's no room for three. */
.layout {
  display: grid;
  grid-template-columns: minmax(160px, 280px) minmax(320px, 560px) minmax(160px, 280px);
  /* title spans the full width as its own row, so the row below it -
     front panel / form / back panel - all start from the same top
     edge (the top of the entry box) regardless of how tall the title
     block is, rather than the side panels aligning to the title. */
  grid-template-areas: "title title title" "frontPanel main backPanel";
  grid-template-rows: auto 1fr;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 900px) {
  .layout {
    grid-template-columns: minmax(0, 560px);
    grid-template-areas: "title" "frontPanel" "main" "backPanel";
    justify-content: center;
  }
  /* Stacked, the panels sit full-width above/below the form instead of
     narrow side columns - cap their height so a portrait card photo
     doesn't push the form (what the user actually needs to reach) off
     the bottom of the screen. */
  .side-panel { max-height: 220px; }
  /* .layout itself is capped at 560px here, too narrow for a readable
     2-column FAQ - single column at the same breakpoint the rest of
     the page already stacks at. */
  .about-details { column-count: 1; }
}
.page-title { grid-area: title; text-align: center; }
main { grid-area: main; width: 100%; }
.logo { width: 100%; max-width: 320px; height: auto; margin-bottom: 8px; }
h1.tagline { font-size: 1.3rem; margin: 4px 0 8px; color: var(--text); }
p.subtitle {
  color: var(--muted);
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 0.9rem;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.about-toggle {
  margin-top: 4px;
  width: auto;
  padding: 4px 14px;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 20px;
  font-size: 0.8rem;
  cursor: pointer;
}
.about-toggle:hover { background: rgba(77, 142, 255, 0.1); }

.about-details {
  text-align: left;
  max-width: 1280px;
  margin: 20px auto 0;
  column-count: 2;
  column-gap: 40px;
}
/* Each Q&A as its own break-inside:avoid block, rather than flat h2/p
   siblings, so the multi-column flow never splits a question from its
   answer across the column break. */
.faq-item {
  break-inside: avoid;
  margin-bottom: 18px;
}
.faq-item:last-child { margin-bottom: 0; }
.about-details h2 {
  font-size: 0.95rem;
  color: var(--accent);
  margin: 0 0 6px;
}
.about-details p {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.side-panel {
  position: relative;
  border: 2px dashed var(--border);
  border-radius: 12px;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--panel);
}
/* Wraps the front photo box and the "how this works" blurb together so
   both occupy the frontPanel grid area as one column - the box keeps its
   own fixed-height, centered-image layout unchanged, the blurb just
   stacks below it. */
.front-panel-wrap { grid-area: frontPanel; display: flex; flex-direction: column; gap: 12px; }
#backPanel { grid-area: backPanel; }
.side-panel img { width: 100%; height: 100%; object-fit: contain; display: block; }
.side-panel img.is-placeholder { opacity: 0.55; }
.side-panel-empty { color: var(--muted); font-size: 0.85rem; text-align: center; padding: 20px; }

/* Lets the user correct an upside-down front photo before it's ever
   sent anywhere - the backend now assumes an upright photo by default
   (see optimization_lab.md) rather than auto-detecting this itself. */
.rotate-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(20, 21, 31, 0.85);
  border: 1px solid var(--border);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0;
  margin: 0;
}
.rotate-btn:hover { border-color: var(--accent); }

/* Same look as .rotate-btn, opposite corner - only ever shown on the back
   panel, and only once a real photo replaces the standard card back. */
.reset-btn {
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(20, 21, 31, 0.85);
  border: 1px solid var(--border);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0;
  margin: 0;
}
.reset-btn:hover { border-color: var(--accent); }

/* A width>height photo is almost certainly sideways (cards are
   portrait) - purely a dimension check, no image analysis, so it's
   free and instant. A hint, not a gate - Check Card still works
   either way. */
.orientation-hint {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  background: rgba(58, 51, 31, 0.92);
  color: #e0b768;
  font-size: 0.75rem;
  line-height: 1.3;
  padding: 6px 8px;
  border-radius: 6px;
  text-align: center;
}

.photo-buttons { display: flex; gap: 12px; margin-bottom: 16px; }
.photo-btn {
  flex: 1;
  margin-top: 0;
  padding: 10px;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
}
input[type="file"] { display: none; }

label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 4px; margin-top: 14px; }
select, input[type="number"], input[type="text"] {
  width: 100%;
  padding: 10px;
  background: #11121a;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
}

.card-number-wrapper { position: relative; }
/* Room for the widest realistic denominator ("/307" plus a margin) so
   typed digits never run under the suffix. Also drops the native
   up/down spinner - not useful for a card number, and it would
   otherwise overlap the suffix in the same corner. */
.card-number-wrapper input[type="number"] {
  padding-right: 44px;
  -moz-appearance: textfield;
}
.card-number-wrapper input[type="number"]::-webkit-outer-spin-button,
.card-number-wrapper input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.card-number-suffix {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 0.95rem;
  pointer-events: none;
}

button {
  margin-top: 20px;
  width: 100%;
  padding: 12px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
}
button:disabled { opacity: 0.5; cursor: not-allowed; }

.result-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.result-card .label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); }
.result-card .value { font-size: 1.1rem; font-weight: 600; margin: 4px 0; }
.result-card .blurb { font-size: 0.88rem; color: var(--muted); line-height: 1.4; }
/* Two consecutive descriptions (e.g. Rarity's rarity + secret-rare text)
   read as separate paragraphs with a blank line between them, rather than
   running together. */
.result-card .blurb p { margin: 0 0 0.6em; }
.result-card .blurb p:last-child { margin-bottom: 0; }

/* Pokemon/Set/Regulation Mark/Rarity share one "Card" panel (see
   renderCardPanel in index.html) as stacked .card-attr blocks rather
   than four separate result-cards. The adjacent-sibling selector (not
   :first-of-type - every .card-attr here is preceded by the panel's own
   .label div, so none of them is literally the first div child) puts a
   divider between consecutive attributes without one above the first.
   Nested labels ("Pokémon", "Set", ...) render a touch smaller/muted
   than the panel's own "Card" title so the hierarchy reads clearly. */
.result-card > .label { margin-bottom: 6px; }
.card-attr + .card-attr { padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--border); }
.card-attr .label { font-size: 0.68rem; opacity: 0.85; }

/* Image-left/text-right layout (Set's logo, Rarity's card image) - image
   top-center in its own column, text top-left in its own, sized so a wide
   landscape logo and a tall card photo both fit without either dominating
   the card. */
.card-attr--split {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
}
.result-card-image { display: flex; justify-content: center; align-items: flex-start; }
.result-card-image img { max-width: 110px; max-height: 90px; width: auto; height: auto; display: block; }
.result-card-text { text-align: left; min-width: 0; }

/* Regulation Mark's stand-in for an image - there's no icon asset for a
   single printed letter, so a bordered badge with the letter itself
   fills the same slot, similar in size to the image column it sits
   alongside for Set/Rarity. */
.reg-mark-badge {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent);
  background: rgba(77, 142, 255, 0.12);
  border: 2px solid var(--accent);
  border-radius: 12px;
}

.price-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.88rem; }
.price-table th, .price-table td {
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.price-table thead th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  font-weight: 600;
}
.price-table tbody tr:last-child td { border-bottom: none; }
.price-table .price-source, .price-table .price-value { font-weight: 600; white-space: nowrap; }
.price-table .price-blurb { color: var(--muted); line-height: 1.4; font-weight: 400; }

.error { color: #ff6b6b; font-size: 0.85rem; margin-top: 10px; }
.note { font-size: 0.78rem; color: var(--muted); margin: 0; line-height: 1.5; }

.analyze-banner {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.4;
}
.analyze-banner.resolved { background: #1f3a2a; color: #7fd99a; }
.analyze-banner.ambiguous { background: #3a331f; color: #e0b768; }
.analyze-banner.failed { background: #3a1f1f; color: #ff9b9b; }

/* Just a printed-detail strip from the actual photo, at the panel's full
   width - already a real zoom-in versus how small that same sliver reads
   inside the full-card side-panel thumbnail, with no re-upload since the
   browser already has the original photo in memory. Only 10% of the
   card's height, so the rendered strip is short - the up/down arrows sit
   beside it rather than overlaid on top (they'd have no room to avoid
   overlapping each other), sized by flexbox to split whatever height the
   image ends up at, so they slide the strip over the rest of the photo
   when the default bottom slice landed on background instead of the
   number/set symbol. */
.card-number-crop-wrapper {
  margin-top: 12px;
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.card-number-crop {
  display: block;
  flex: 1;
  min-width: 0;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.crop-scroll-btns {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.crop-scroll-btn {
  flex: 1;
  width: 32px;
  min-height: 18px;
  border-radius: 6px;
  background: rgba(20, 21, 31, 0.85);
  border: 1px solid var(--border);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0;
  margin: 0;
}
.crop-scroll-btn:hover { border-color: var(--accent); }

.set-search-wrapper { position: relative; }
.set-search-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  object-fit: contain;
  background: #fff;
  border-radius: 3px;
  pointer-events: none;
}
.set-search-wrapper input#setSearch.has-icon { padding-left: 38px; }

.set-search-results {
  margin-top: 6px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #11121a;
}
.set-search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}
.set-search-result:last-child { border-bottom: none; }
.set-search-result:hover { background: #191a26; }
.set-search-result img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  background: #fff;
  border-radius: 3px;
  flex-shrink: 0;
}
.set-search-result .total { color: var(--muted); font-size: 0.78rem; margin-left: auto; }
.set-search-empty { padding: 10px; color: var(--muted); font-size: 0.85rem; }

footer { margin-top: 24px; font-size: 0.8rem; color: var(--muted); }
footer a { color: var(--muted); margin-right: 16px; }
footer a:last-child { margin-right: 0; }