:root {
  color-scheme: light;
  --bg: #ffffff;
  --paper: #fbfbfa;
  --ink: #171717;
  --graphite: #2a2926;
  --muted: #6d6a62;
  --line: #ece8e1;
  --orange: #ff6a00;
  --orange-strong: #ff4d00;
  --orange-soft: #fff1e7;
  --danger: #d92d20;
  --shadow: 0 24px 80px rgba(34, 25, 12, 0.12);
  --radius: 8px;
  --max: 1080px;
  --header-h: 72px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100svh;
  background:
    linear-gradient(90deg, rgba(255, 106, 0, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 106, 0, 0.04) 1px, transparent 1px),
    var(--bg);
  background-size: 72px 72px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
}

main {
  flex-grow: 1;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    linear-gradient(115deg, rgba(255, 106, 0, 0.12), transparent 32%),
    linear-gradient(245deg, rgba(20, 169, 148, 0.08), transparent 34%);
  opacity: 0.65;
  pointer-events: none;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

button {
  font-family: inherit;
}

.hidden {
  display: none !important;
}

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

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

.app-header {
  position: sticky;
  top: 0;
  z-index: 70;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  min-height: var(--header-h);
  padding: 12px clamp(16px, 4vw, 48px);
  background: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid rgba(236, 232, 225, 0.9);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
}

.brand-logo {
  display: block;
  width: 104px;
  height: auto;
  overflow: visible;
}

.brand-logo .logo-orange {
  fill: #f15a24;
}

.brand-logo .logo-black {
  fill: var(--ink);
}

.app-nav {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-left: auto;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.app-nav a {
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.92rem;
  font-weight: 620;
  transition: color 180ms ease, background 180ms ease;
}

.app-nav a:hover,
.app-nav a:focus-visible {
  color: var(--ink);
  background: var(--orange-soft);
  outline: none;
}

.app-nav a.is-active {
  color: var(--orange-strong);
  background: var(--orange-soft);
}

.header-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

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

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 0.92rem;
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

.button:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}

.button-ghost {
  color: var(--graphite);
  background: #ffffff;
  border-color: var(--line);
}

.button-ghost:hover,
.button-ghost:focus-visible {
  border-color: rgba(255, 106, 0, 0.5);
  box-shadow: 0 8px 24px rgba(255, 106, 0, 0.12);
}

.button-solid {
  color: #ffffff;
  background: linear-gradient(135deg, var(--orange), var(--orange-strong));
  box-shadow: 0 10px 30px rgba(255, 106, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.button-soft {
  color: var(--orange-strong);
  background: #fff8f2;
  border-color: rgba(255, 106, 0, 0.22);
}

.button-danger {
  color: #ffffff;
  background: var(--danger);
  box-shadow: 0 10px 30px rgba(217, 45, 32, 0.24);
}

.button-danger-ghost {
  color: var(--danger);
  background: #ffffff;
  border-color: rgba(217, 45, 32, 0.35);
}

.button-large {
  min-height: 50px;
  padding: 0 20px;
  font-size: 0.98rem;
}

.button-small {
  min-height: 34px;
  padding: 0 12px;
  font-size: 0.84rem;
}

.button-block {
  width: 100%;
}

/* ---------- Layout ---------- */

.shell {
  width: min(calc(100% - 32px), var(--max));
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) 0 clamp(48px, 7vw, 88px);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  color: var(--orange-strong);
  font-size: 0.78rem;
  font-weight: 820;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.eyebrow::before {
  width: 28px;
  height: 2px;
  content: "";
  background: var(--orange);
  box-shadow: 0 0 12px rgba(255, 106, 0, 0.7);
}

.page-title {
  margin-bottom: 10px;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 820;
  line-height: 0.98;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.page-lede {
  max-width: 640px;
  margin-bottom: 28px;
  color: var(--muted);
  font-size: 1.02rem;
}

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

.card {
  position: relative;
  padding: 24px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 45px rgba(28, 25, 21, 0.06);
}

.card-accent::after {
  position: absolute;
  top: 0;
  left: 18px;
  width: 56px;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, var(--orange), transparent);
  box-shadow: 0 0 16px rgba(255, 106, 0, 0.65);
}

/* ---------- Auth screens ---------- */

.auth-shell {
  display: grid;
  place-items: center;
  min-height: calc(100svh - var(--header-h));
  padding: clamp(24px, 5vw, 56px) 16px;
}

.auth-card {
  width: min(100%, 420px);
  padding: clamp(24px, 5vw, 36px);
}

.auth-card h1 {
  margin-bottom: 6px;
  font-size: 1.7rem;
  font-weight: 820;
  letter-spacing: -0.01em;
}

.auth-card .auth-sub {
  margin-bottom: 24px;
  color: var(--muted);
  font-size: 0.95rem;
}

.auth-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-top: 18px;
  font-size: 0.92rem;
}

.auth-links a {
  color: var(--orange-strong);
  font-weight: 700;
}

.auth-links a:hover {
  text-decoration: underline;
}

/* Signup point-of-sale disclosure: price, auto-renewal and cancellation
   summary shown right above the Terms checkbox. */
.plan-summary {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 2px 0 6px;
  background: var(--paper);
}

.plan-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  color: var(--ink);
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.plan-summary-notes {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.plan-summary-notes a {
  color: var(--orange-strong);
  font-weight: 700;
}

.plan-summary-notes a:hover {
  text-decoration: underline;
}

.terms-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 2px 0 4px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
  cursor: pointer;
}

.terms-check input {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--orange-strong);
  cursor: pointer;
}

.terms-check a {
  color: var(--orange-strong);
  font-weight: 700;
}

.terms-check a:hover {
  text-decoration: underline;
}

.auth-ok {
  padding: 12px 14px;
  margin: 0 0 14px;
  color: #0c5132;
  background: #e8f6ee;
  border: 1px solid #b6e2c8;
  border-radius: var(--radius);
  font-size: 0.92rem;
}

.save-notice {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(100%, 420px);
  padding: 26px 24px 24px;
  margin: 0 auto 24px;
  color: #ffffff;
  text-align: center;
  background: linear-gradient(135deg, var(--orange), var(--orange-strong));
  border: 1px solid rgba(255, 106, 0, 0.4);
  border-radius: var(--radius);
  box-shadow: 0 22px 56px rgba(255, 106, 0, 0.26);
  font-size: 1rem;
  font-weight: 780;
}

.save-notice:focus {
  outline: 3px solid rgba(255, 106, 0, 0.22);
  outline-offset: 2px;
}

.save-notice-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 12px 30px rgba(123, 38, 0, 0.18);
}

.save-notice-icon::after {
  width: 18px;
  height: 32px;
  margin-top: -6px;
  content: "";
  border: solid var(--orange-strong);
  border-width: 0 5px 5px 0;
  transform: rotate(45deg);
}

.save-notice-message {
  display: block;
  max-width: 28rem;
  color: #ffffff;
  line-height: 1.35;
}

/* ---------- Registration success (checkout-success landing) ----------
   A dedicated, celebratory variant of .save-notice: the card drops in from
   the top, a white badge pops, and the checkmark draws itself, then — 5s after
   the checkmark appears — it lifts up and out (see .is-leaving). The global
   prefers-reduced-motion block neutralises every animation below, so each
   element's resting CSS is already its final visible state.

   Entrance animations are gated behind :not(.has-entered)/:not(.has-drawn):
   the billing-snapshot re-renders that fire under the landing rebuild the card
   from scratch, and main.js stamps those classes on every render after the
   first so the intro plays exactly once instead of restarting each snapshot. */

.save-notice-hero {
  position: relative;
  gap: 12px;
  padding: 32px 26px 28px;
}

.save-notice-hero:not(.has-entered) {
  animation: heroDropIn 620ms cubic-bezier(0.16, 0.84, 0.29, 1.06) both;
}

@keyframes heroDropIn {
  0% {
    opacity: 0;
    transform: translateY(-26px) scale(0.98);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.save-notice-badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 14px 34px rgba(123, 38, 0, 0.24);
}

.save-notice-hero:not(.has-entered) .save-notice-badge {
  animation: heroBadgePop 520ms cubic-bezier(0.22, 1.1, 0.36, 1) 140ms both;
}

/* Celebratory ring that expands once as the badge settles. */
.save-notice-badge::after {
  position: absolute;
  inset: -6px;
  content: "";
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  opacity: 0;
}

.save-notice-hero:not(.has-drawn) .save-notice-badge::after {
  animation: heroRing 900ms ease-out 360ms both;
}

@keyframes heroBadgePop {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  60% {
    opacity: 1;
    transform: scale(1.06);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes heroRing {
  0% {
    opacity: 0.7;
    transform: scale(0.9);
  }
  100% {
    opacity: 0;
    transform: scale(1.55);
  }
}

.save-notice-check {
  width: 42px;
  height: 42px;
  overflow: visible;
}

.save-notice-check-mark {
  fill: none;
  stroke: var(--orange-strong);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 26;
  stroke-dashoffset: 0;
}

.save-notice-hero:not(.has-drawn) .save-notice-check-mark {
  animation: heroCheckDraw 440ms ease-out 320ms backwards;
}

@keyframes heroCheckDraw {
  from {
    stroke-dashoffset: 26;
  }
}

/* Payment still confirming: a spinner in place of the checkmark. */
.save-notice-spinner {
  width: 34px;
  height: 34px;
  border: 4px solid rgba(255, 106, 0, 0.22);
  border-top-color: var(--orange-strong);
  border-radius: 999px;
  animation: heroSpin 0.7s linear infinite;
}

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

.save-notice-title {
  display: block;
  font-size: 1.24rem;
  font-weight: 820;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.save-notice-hero .save-notice-message {
  font-weight: 620;
  opacity: 0.96;
}

/* Auto-dismiss: 5s after the checkmark lands, main.js adds .is-leaving and the
   card lifts up, fades, and collapses the space it held so the account content
   slides up to fill it (main.js removes the node once this finishes). */
.save-notice-hero.is-leaving {
  overflow: hidden;
  pointer-events: none;
  animation: heroExit 560ms cubic-bezier(0.5, 0, 0.75, 0.15) forwards;
}

@keyframes heroExit {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    max-height: 320px;
    margin-bottom: 24px;
    padding-top: 32px;
    padding-bottom: 28px;
  }
  55% {
    opacity: 0;
    transform: translateY(-34px) scale(0.98);
  }
  100% {
    opacity: 0;
    transform: translateY(-52px) scale(0.97);
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* ---------- Fields ---------- */

.field {
  display: block;
  margin-bottom: 14px;
}

.field-label {
  display: block;
  margin-bottom: 6px;
  color: var(--graphite);
  font-size: 0.82rem;
  font-weight: 760;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.field input,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.98rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.field textarea {
  min-height: 64px;
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  border-color: rgba(255, 106, 0, 0.65);
  box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.14);
  outline: none;
}

.form-error {
  min-height: 20px;
  margin: 4px 0 12px;
  color: var(--danger);
  font-size: 0.9rem;
  font-weight: 620;
}

/* ---------- Dashboard stats ---------- */

.stat-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-bottom: clamp(24px, 4vw, 40px);
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.stat {
  position: relative;
  min-height: 112px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.88);
}

.stat::after {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 36px;
  height: 2px;
  content: "";
  background: var(--orange);
  box-shadow: 0 0 14px rgba(255, 106, 0, 0.65);
}

.stat-value {
  display: block;
  margin-bottom: 8px;
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  font-weight: 850;
  line-height: 0.95;
}

.stat-label {
  display: block;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---------- Archive drill-down ---------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 620;
}

.crumbs a {
  color: var(--orange-strong);
  font-weight: 760;
}

.crumbs a:hover {
  text-decoration: underline;
}

.crumbs .crumb-sep {
  color: var(--line);
}

.crumbs .crumb-here {
  color: var(--ink);
}

.drill-list {
  display: grid;
  gap: 10px;
}

.drill-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  overflow: hidden;
  color: inherit;
  text-align: left;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 32px rgba(28, 25, 21, 0.05);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.drill-row::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  content: "";
  background: linear-gradient(180deg, var(--orange), transparent);
  opacity: 0;
  transition: opacity 160ms ease;
}

.drill-row:hover,
.drill-row:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 106, 0, 0.45);
  box-shadow: 0 14px 40px rgba(255, 106, 0, 0.12);
  outline: none;
}

.drill-row:hover::before,
.drill-row:focus-visible::before {
  opacity: 1;
}

.drill-main {
  flex: 1;
  min-width: 0;
}

.drill-title {
  display: block;
  font-size: 1.02rem;
  font-weight: 760;
}

.drill-sub {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.88rem;
}

.drill-count {
  padding: 6px 10px;
  color: var(--orange-strong);
  background: var(--orange-soft);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 820;
  white-space: nowrap;
}

.drill-arrow {
  color: var(--orange);
  font-weight: 820;
}

.empty-state {
  padding: clamp(28px, 5vw, 44px);
  text-align: center;
}

.empty-state h3 {
  margin-bottom: 8px;
  font-size: 1.15rem;
  font-weight: 800;
}

.empty-state p {
  max-width: 460px;
  margin: 0 auto 18px;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ---------- Feedback cards ---------- */

.feedback-list {
  display: grid;
  gap: 12px;
}

.feedback-card {
  display: grid;
  gap: 14px;
}

.answer-title {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 780;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.answer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.answer-row .answer-title {
  margin-bottom: 0;
}

.stars {
  color: var(--orange);
  font-size: 1.05rem;
  letter-spacing: 2px;
  white-space: nowrap;
}

.stars .star-off {
  color: var(--line);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  padding: 4px 10px;
  color: var(--orange-strong);
  background: var(--orange-soft);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
}

.answer-quote {
  margin: 0;
  color: var(--graphite);
  font-size: 0.98rem;
  font-style: italic;
  line-height: 1.55;
}

.feedback-time {
  color: var(--muted);
  font-size: 0.8rem;
  text-align: right;
}

/* ---------- Feedback deletion controls ---------- */

.list-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.list-tools-count {
  margin-right: auto;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.month-tools {
  margin-top: 14px;
  margin-bottom: 0;
}

.feedback-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: -4px;
}

.feedback-foot .feedback-time {
  margin-left: auto;
}

.feedback-pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--graphite);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

.feedback-pick input {
  width: 18px;
  height: 18px;
  accent-color: var(--orange);
  cursor: pointer;
}

.feedback-card.is-selected {
  border-color: rgba(255, 106, 0, 0.55);
  box-shadow: 0 14px 40px rgba(255, 106, 0, 0.14);
}

.delete-confirm {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--danger);
  font-size: 0.88rem;
  font-weight: 700;
}

/* ---------- QR page ---------- */

.qr-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1fr);
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
}

.qr-panel {
  position: relative;
  /* Pin to the top of the grid row: with the layout's align-items:center, an
     expanded working-hours editor makes the left column tall and would slide
     the (shorter) centred QR preview downward. align-self:start keeps the QR
     fixed in place regardless of the editor being open or closed. */
  align-self: start;
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: clamp(24px, 4vw, 40px);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 106, 0, 0.12), transparent 42%),
    #23211e;
  border: 1px solid rgba(255, 106, 0, 0.28);
  border-radius: var(--radius);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.26), 0 0 42px rgba(255, 106, 0, 0.12);
}

.qr-topline {
  display: flex;
  gap: 8px;
  justify-self: start;
}

.qr-topline span {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.28);
  border-radius: 999px;
}

.qr-topline span:first-child {
  background: var(--orange);
  box-shadow: 0 0 18px rgba(255, 106, 0, 0.82);
}

.qr-box {
  position: relative;
  width: min(100%, 300px);
  padding: 16px;
  background: #ffffff;
  border-radius: var(--radius);
  box-shadow: 0 0 34px rgba(255, 106, 0, 0.22);
}

.qr-box svg {
  display: block;
  width: 100%;
  height: auto;
}

.qr-scanline {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 18%;
  width: 1px;
  background: var(--orange);
  box-shadow: 0 0 24px rgba(255, 106, 0, 0.95);
  animation: scanMove 4.2s ease-in-out infinite;
  pointer-events: none;
}

.qr-url {
  max-width: 100%;
  padding: 8px 12px;
  overflow-wrap: anywhere;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  font-size: 0.8rem;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  user-select: all;
}

.qr-actions {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

/* Separates the standard Judgy poster download from the customizable formats */
.qr-divider {
  color: var(--muted);
  font-size: 0.88rem;
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* Print-size picker for the designed poster PDF */

.qr-sizes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 6px;
}

.qr-size {
  position: relative;
  display: block;
  cursor: pointer;
}

.qr-size input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.qr-size-card {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.qr-size-card strong {
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
}

.qr-size-card span {
  font-size: 0.8rem;
  font-weight: 620;
  color: var(--graphite);
}

.qr-size-card small {
  font-size: 0.72rem;
  color: var(--muted);
}

.qr-size:hover .qr-size-card {
  border-color: rgba(255, 106, 0, 0.5);
}

.qr-size input:checked + .qr-size-card {
  background: var(--orange-soft);
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange);
}

.qr-size input:checked + .qr-size-card strong {
  color: var(--orange-strong);
}

.qr-size input:focus-visible + .qr-size-card {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* Reminds owners to print the poster PDF at 100% so sizes stay exact */
.qr-print-note {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
  margin-top: -2px;
}

/* ---------- Working hours (anti-spam window) ---------- */

/* Set apart from the download buttons above by a divider + extra space, so the
   orange toggle reads as its own feature rather than another download. */
.qr-hours {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  /* Land clear of the sticky header when the editor scrolls itself into view. */
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.qr-hours-toggle {
  width: 100%;
}

.qr-hours-ico {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.qr-hours-ico svg {
  display: block;
}

.qr-hours-lede {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.qr-hours-panel {
  margin-top: 16px;
}

.hours-card {
  display: grid;
  gap: 18px;
  animation: hoursReveal 220ms ease-out;
}

@keyframes hoursReveal {
  from { opacity: 0; transform: translateY(-6px); }
}

/* Enable/disable switch */
.hours-switch {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.hours-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.hours-switch-track {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  margin-top: 2px;
  background: var(--line);
  border-radius: 999px;
  transition: background 180ms ease;
}

.hours-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(28, 25, 21, 0.28);
  transition: transform 180ms ease;
}

.hours-switch input:checked + .hours-switch-track {
  background: linear-gradient(135deg, var(--orange), var(--orange-strong));
}

.hours-switch input:checked + .hours-switch-track .hours-switch-thumb {
  transform: translateX(18px);
}

.hours-switch input:focus-visible + .hours-switch-track {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.hours-switch-text strong {
  display: block;
  font-size: 0.96rem;
  font-weight: 760;
  color: var(--ink);
}

.hours-switch-text small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

/* Days list — dimmed (but still editable) while the window is off */
.hours-days {
  display: grid;
  gap: 10px;
  transition: opacity 180ms ease;
}

.hours-card.is-off .hours-days {
  opacity: 0.5;
}

.hours-day {
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.hours-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hours-day-head h3 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 780;
}

.hours-closed {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.hours-slots {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.hours-slot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.hours-range {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.hours-from-to {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 620;
}

.hours-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hours-colon {
  color: var(--muted);
  font-weight: 800;
}

.hours-slot select {
  padding: 7px 8px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 620;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.hours-slot select:focus {
  border-color: rgba(255, 106, 0, 0.65);
  box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.14);
  outline: none;
}

.hours-meal {
  font-weight: 760 !important;
}

.hours-remove {
  margin-left: auto;
}

/* ---------- Customize form ---------- */

.question-card {
  margin-bottom: 12px;
}

.question-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.question-badge {
  color: var(--orange-strong);
  font-size: 0.76rem;
  font-weight: 820;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.question-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--orange-strong);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 820;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.icon-button:hover:not(:disabled),
.icon-button:focus-visible {
  background: var(--orange-soft);
  border-color: rgba(255, 106, 0, 0.4);
  outline: none;
}

.icon-button:disabled {
  color: var(--line);
  cursor: default;
}

.link-danger {
  padding: 0 6px;
  color: var(--danger);
  background: none;
  border: none;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

.link-danger:hover {
  text-decoration: underline;
}

.type-hint {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  margin-top: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.94rem;
  font-weight: 620;
}

.add-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.add-row input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.94rem;
}

.add-row input:focus {
  border-color: rgba(255, 106, 0, 0.65);
  box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.14);
  outline: none;
}

/* A category groups some of a choice question's options; rendered as a
   nested box inside the question card, with an orange spine like the
   category headings guests see on the form. */
.category-card {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 3px solid rgba(255, 106, 0, 0.45);
  border-radius: var(--radius);
}

.category-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.category-head .question-controls {
  margin-left: auto;
}

.category-name {
  flex: 1;
  min-width: 160px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.94rem;
  font-weight: 700;
}

.category-name:focus {
  border-color: rgba(255, 106, 0, 0.65);
  box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.14);
  outline: none;
}

.add-category {
  margin-top: 12px;
}

.add-question-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 20px;
}

.section-label {
  margin: 26px 0 6px;
  font-size: 1.05rem;
  font-weight: 800;
}

.section-hint {
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---------- Account ---------- */

.account-grid {
  display: grid;
  gap: 16px;
  max-width: 560px;
}

.kv-label {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 780;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kv-label:first-child {
  margin-top: 0;
}

.kv-value {
  display: block;
  margin-top: 2px;
  font-size: 1rem;
  font-weight: 620;
  overflow-wrap: anywhere;
}

.badge-ok {
  color: #0c5132;
  font-weight: 760;
}

.badge-warn {
  color: #b54708;
  font-weight: 760;
}

.danger-card {
  border-color: rgba(217, 45, 32, 0.3);
}

.danger-card::after {
  background: linear-gradient(90deg, var(--danger), transparent);
  box-shadow: 0 0 16px rgba(217, 45, 32, 0.4);
}

.danger-card h3 {
  color: var(--danger);
}

.stack {
  display: grid;
  gap: 10px;
}

/* ---------- Loading splash ---------- */

.splash {
  display: grid;
  place-items: center;
  gap: 14px;
  min-height: 60svh;
  color: var(--muted);
}

.splash-pulse {
  width: 42px;
  height: 3px;
  background: var(--orange);
  box-shadow: 0 0 16px rgba(255, 106, 0, 0.7);
  animation: lineBlink 1.6s ease-in-out infinite;
}

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

@keyframes scanMove {
  0%,
  100% {
    left: 8%;
    opacity: 0;
  }

  18%,
  82% {
    opacity: 1;
  }

  50% {
    left: 92%;
  }
}

@keyframes lineBlink {
  0%,
  100% {
    opacity: 0.35;
    transform: scaleX(0.68);
  }

  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .qr-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  :root {
    --header-h: 64px;
  }

  .app-header {
    padding: 10px 12px;
  }

  .brand-logo {
    width: 88px;
  }

  .app-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
  }

  .app-nav a {
    padding: 8px 10px;
    font-size: 0.86rem;
  }

  .header-user {
    margin-left: auto;
  }

  .stat-track {
    grid-template-columns: 1fr;
  }

  .stat {
    min-height: 92px;
  }
}

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

/* ---------- persistent legal footer ---------- */

.app-footer {
  width: min(calc(100% - 32px), var(--max));
  margin: 40px auto 0;
  padding: 18px 0 26px;
  border-top: 1px solid var(--line);
}

.app-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
}

.app-footer a {
  color: var(--muted);
  font-size: 0.82rem;
}

.app-footer a:hover,
.app-footer a:focus-visible {
  color: var(--orange-strong);
  text-decoration: underline;
}