/* VStudioFlow Galeria — brand: charcoal monochrome, heavy-oblique display voice.
   The gallery lives on dark so the photos carry the color. */

:root {
  --bg: #1c1c1e;
  --surface: #26262a;
  --surface-2: #2f2f34;
  --ink: #ececee;
  --ink-dim: #9a9aa2;
  --charcoal: #2d2d2f;
  --line: rgba(255, 255, 255, 0.08);
  --accent: #ececee;
  --danger: #ff9f43;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* `display` in a class beats the hidden attribute; make hidden always win. */
[hidden] { display: none !important; }
html, body { background: var(--bg); color: var(--ink); font: 15px/1.45 -apple-system, "SF Pro Text", Segoe UI, Roboto, sans-serif; }

.job-title { font-weight: 800; font-style: italic; letter-spacing: 0.01em; }

/* ---- top bar ---- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: calc(env(safe-area-inset-top) + 12px) 16px 12px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { height: 30px; }
.jobinfo { flex: 1; min-width: 0; }
.jobinfo h1 { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-sub { font-size: 12px; color: var(--ink-dim); }

/* ---- grid ---- */
.grid {
  display: grid; gap: 6px; padding: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  padding-bottom: 110px;   /* room for the counter bar */
}
@media (max-width: 480px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 4px 4px 110px; } }

.cell { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: var(--surface); cursor: pointer; }
.cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cell .num {
  position: absolute; left: 6px; bottom: 6px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  color: #fff; background: rgba(0, 0, 0, 0.45); padding: 2px 6px; border-radius: 4px;
}
.cell .heart {
  position: absolute; right: 6px; top: 6px;
  width: 34px; height: 34px; border-radius: 50%;
  border: none; cursor: pointer; font-size: 17px; line-height: 1;
  background: rgba(0, 0, 0, 0.40); color: #fff;
  display: grid; place-items: center;
}
.cell.selected { outline: 3px solid var(--accent); outline-offset: -3px; }
.cell.selected .heart { background: var(--accent); color: var(--charcoal); }

/* ---- footer counter ---- */
.counter {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px calc(env(safe-area-inset-bottom) + 12px);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.counter-info { flex: 1; display: flex; flex-direction: column; }
.counter-info strong { font-size: 14px; font-style: italic; }
.extras { font-size: 12px; color: var(--danger); font-weight: 600; }

/* ---- buttons ---- */
button { font: inherit; }
.primary {
  background: var(--accent); color: var(--charcoal);
  border: none; border-radius: 10px; padding: 12px 22px;
  font-weight: 800; font-style: italic; cursor: pointer;
}
.primary:disabled { opacity: 0.35; cursor: default; }
.ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; cursor: pointer;
}
.ghost.active { background: var(--accent); color: var(--charcoal); border-color: transparent; }

.state-msg { text-align: center; color: var(--ink-dim); padding: 48px 20px; }

/* ---- lightbox ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(10, 10, 12, 0.96);
  display: grid; place-items: center;
}
.lightbox img { max-width: 100vw; max-height: 86vh; object-fit: contain; }
.lb-btn {
  position: absolute; z-index: 41;
  background: rgba(255, 255, 255, 0.10); color: #fff; border: none;
  width: 44px; height: 44px; border-radius: 50%; font-size: 22px; cursor: pointer;
}
.lb-close { top: calc(env(safe-area-inset-top) + 12px); right: 12px; }
.lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 10px; top: 50%; transform: translateY(-50%); }
.lb-select {
  position: absolute; bottom: calc(env(safe-area-inset-bottom) + 18px); left: 50%; transform: translateX(-50%);
  border: none; border-radius: 12px; padding: 12px 26px; cursor: pointer;
  font-weight: 800; font-style: italic; font-size: 15px;
  background: rgba(255, 255, 255, 0.14); color: #fff;
}
.lb-select.on { background: var(--accent); color: var(--charcoal); }

/* ---- modals ---- */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(10, 10, 12, 0.7); display: grid; place-items: center; padding: 20px; }
.modal-card {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 16px; padding: 24px; max-width: 420px; width: 100%;
  display: flex; flex-direction: column; gap: 12px;
}
.modal-card.center { align-items: center; text-align: center; }
.modal-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; }
.brand-mark { height: 46px; margin-bottom: 4px; }

.pay-hint { font-size: 11px; color: var(--ink-dim); }
.modal-card.center .primary { width: 100%; padding: 14px; font-size: 16px; }
.modal-card.center .ghost { border: none; color: var(--ink-dim); font-size: 13px; }