:root {
  --bg: #0f1216;
  --surface: #191d23;
  --surface-2: #222831;
  --text: #eef1f5;
  --muted: #9aa4b2;
  --accent: #3b82f6;
  --accent-press: #2563eb;
  --danger: #ef4444;
  --ok: #22c55e;
  --border: #2c333d;
  --radius: 14px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.45;
  /* The page declares viewport-fit=cover and a black-translucent status bar, so
     an installed PWA owns the whole screen — including the strip behind the
     Dynamic Island / notch. Without these insets the header renders underneath
     the camera. Only the bottom inset was set before, which is why the top was
     the one that broke. All four are here because the app is installable and a
     rotated phone puts an inset on the sides too.
     In a normal browser tab every inset resolves to 0, so this changes nothing
     outside the installed app. */
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

.app-header {
  text-align: center;
  /* Sits on top of whatever inset the device reports, so the wordmark clears the
     camera on a notched phone and still has room to breathe on everything else. */
  padding: 30px 16px 10px;
}

/* Wordmark. Two tones rather than two typefaces: "Set" carries the weight and
   "Solver" recedes, which gives the lockup a deliberate shape without shipping
   a webfont the app would then have to cache for offline use. */
.wordmark {
  margin: 0;
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--muted);
  line-height: 1.1;
}

.wordmark__set {
  color: var(--text);
}

.tagline {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  /* Wide tracking to offset the tight wordmark above it — the contrast between
     the two is what makes the pair read as designed. */
  letter-spacing: 0.14em;
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 16px 40px;
}

.step {
  animation: fade 0.25s ease;
}

.hidden {
  display: none !important;
}

@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hint {
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}

/* Welcome-screen footer */
.app-footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.app-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.9rem;
  text-decoration: none;
  transition: color 0.15s;
}

.app-footer__brand img {
  /* The Kirkor mark ships on an opaque white field — it is drawn for light
     backgrounds, and its navy limbs would disappear against this one. So it is
     presented as a deliberate white chip rather than a stray white square:
     rounded, inset, and dimmed slightly so it doesn't glare on the dark page. */
  background: #fff;
  border-radius: 6px;
  padding: 2px;
  opacity: 0.88;
  transition: opacity 0.15s;
}

.app-footer__brand strong {
  color: var(--text);
  font-weight: 600;
}

.app-footer__brand:hover {
  color: var(--text);
}

.app-footer__brand:hover img {
  opacity: 1;
}

.app-footer__copy {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

/* Capture button */
.capture-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  margin: 24px 0 8px;
  background: var(--surface);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 1.1rem;
  transition: border-color 0.15s, background 0.15s;
}

.capture-btn:active {
  background: var(--surface-2);
  border-color: var(--accent);
}

.capture-btn__icon {
  font-size: 2.6rem;
}

/* Preview */
.preview-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border);
}

#preview {
  display: block;
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
}

/* Buttons */
.row-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.btn {
  flex: 1;
  padding: 14px 16px;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.05s, background 0.15s;
}

.btn:active {
  transform: scale(0.98);
}

.btn--primary {
  background: var(--accent);
  color: white;
}

.btn--primary:active {
  background: var(--accent-press);
}

.btn--ghost {
  background: var(--surface-2);
  color: var(--text);
}

/* Spinner */
.spinner {
  width: 44px;
  height: 44px;
  margin: 40px auto 16px;
  border: 4px solid var(--surface-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

#loading-step {
  text-align: center;
}

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

/* Card grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.card-tile {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 10px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.card-tile.lowconf {
  border-color: #b45309;
  box-shadow: 0 0 0 1px #b45309 inset;
}

.card-tile__art {
  display: flex;
  justify-content: center;
}

.card-svg {
  border-radius: 8px;
}

.card-tile__attrs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  width: 100%;
}

.attr-chip {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: 8px;
  padding: 5px 4px;
  font-size: 0.72rem;
  text-align: center;
  cursor: pointer;
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attr-chip:active {
  background: var(--accent);
}

.card-tile__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 0.8rem;
  cursor: pointer;
  line-height: 1;
}

/* Results */
#results-summary {
  text-align: center;
  margin: 8px 0 20px;
}

.summary-badge {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.05rem;
}

.summary-badge.found {
  background: rgba(34, 197, 94, 0.15);
  color: var(--ok);
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.summary-badge.none {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.set-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 12px;
}

.set-row__label {
  color: var(--muted);
  font-size: 0.82rem;
  margin-bottom: 8px;
  font-weight: 600;
}

.set-row__cards {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Error banner */
.error-banner {
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  border-radius: var(--radius);
  font-size: 0.9rem;
}