:root {
  --bg: #ffffff;
  --bg-grad-1: #ffffff;
  --bg-grad-2: #ffffff;
  --card: rgba(255, 255, 255, 0.3); /* barely-there glass over the video */
  --ink: #14274e; /* navy — default body/lettering color */
  --ink-soft: #3a4d7a; /* muted navy — secondary text */
  --line: rgba(255, 255, 255, 0.35);
  --accent: #1e3f8f; /* navy blue — buttons, links, accents */
  --accent-dark: #15296b; /* deeper navy — hovers, emphasis text */
  --accent-soft: #e8eef9; /* light blue tint — soft fills, focus rings */
  --danger: #b4452f;
  --warn-bg: #fdf3d8;
  --warn-ink: #6b5414;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(40, 45, 55, 0.08);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  /* Static fallback behind the video backdrop; also shows while the video loads. */
  background: #05080b url("backdrop.png") center / cover no-repeat fixed;
  min-height: 100vh;
  line-height: 1.5;
}

/* Rotating video backdrop — pinned behind everything; cards stay solid white on top.
   Two stacked players alternate through the playlist; opacity crossfades the hand-off
   (the finished video holds its last frame underneath while the next one fades in). */
.bg-video {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  /* fill: the whole shot stays visible AND spans the full window edge-to-edge
     (the frame stretches to the window's shape rather than cropping or boxing) */
  object-fit: fill;
  z-index: -2;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.8s ease;
}
.bg-video-hidden { opacity: 0; }
/* Soft dark scrim so the logo chip and light labels stay readable over bright frames. */
.bg-scrim {
  position: fixed;
  inset: 0;
  background: rgba(3, 6, 10, 0.28);
  z-index: -1;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .bg-video { display: none; }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}
.brand-mark { font-size: 1.4rem; }
.brand-name { color: var(--accent-dark); }
.tagline {
  color: #b8cfdd;
  margin: 10px auto 0;
  max-width: 540px;
}

main {
  max-width: 820px;
  margin: 0 auto;
  padding: 6px 20px 40px;
}

.card {
  background: var(--card);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  /* soft white halo keeps the navy text readable when a dark video frame
     shows through the low-opacity glass */
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
  padding: 24px;
  margin-bottom: 22px;
}

.step-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.15rem;
  margin: 0 0 16px;
}
.step-num {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
}

/* Dropzone */
.dropzone {
  border: 2px dashed #cdc4b1;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.2);
  padding: 34px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.05s;
}
.dropzone:hover { border-color: var(--accent); background: rgba(232, 238, 249, 0.55); }
.dropzone:focus-visible { outline: 3px solid var(--accent-soft); border-color: var(--accent); }
.dropzone.dragover { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.005); }
.dropzone-icon { font-size: 2.2rem; }
.dropzone-primary { font-weight: 600; margin: 8px 0 2px; }
.dropzone-secondary { margin: 0; color: var(--ink-soft); }
.dropzone-hint { margin: 8px 0 0; font-size: 0.82rem; color: var(--ink-soft); }
.link-btn {
  background: none; border: none; padding: 0;
  color: var(--accent); font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: underline;
}

/* Thumbnails */
.thumb-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
}
.thumb {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(246, 247, 249, 0.3);
  aspect-ratio: 3 / 4;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .page-badge {
  position: absolute; top: 6px; left: 6px;
  background: rgba(31, 36, 48, 0.78); color: #fff;
  font-size: 0.72rem; padding: 2px 7px; border-radius: 20px;
}
.thumb .remove-thumb {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px; border-radius: 50%;
  border: none; cursor: pointer;
  background: rgba(31, 36, 48, 0.78); color: #fff;
  font-size: 0.95rem; line-height: 1; display: grid; place-items: center;
}
.thumb .remove-thumb:hover { background: var(--danger); }
.pdf-tile {
  width: 100%; height: 100%; padding: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: rgba(243, 244, 247, 0.3); text-align: center;
}
.pdf-ico {
  font-weight: 800; font-size: 0.9rem; letter-spacing: 0.05em;
  color: var(--danger); border: 2px solid var(--danger); border-radius: 6px; padding: 2px 8px;
}
.pdf-name { font-size: 0.7rem; color: var(--ink-soft); line-height: 1.2; overflow-wrap: anywhere; max-height: 2.4em; overflow: hidden; }

/* Buttons */
.actions { display: flex; gap: 10px; margin-top: 20px; align-items: center; }
.actions.wrap { flex-wrap: wrap; }
.btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 11px 18px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, transform 0.05s, opacity 0.15s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-dark); }
.btn-secondary { background: rgba(255, 255, 255, 0.4); color: var(--accent-dark); border-color: var(--line); }
.btn-secondary:hover:not(:disabled) { background: var(--accent-soft); }
.btn-ghost { background: transparent; color: var(--ink-soft); }
.btn-ghost:hover:not(:disabled) { color: var(--ink); }

/* Processing */
.processing-msg { text-align: center; color: var(--ink-soft); margin: 14px 0 0; }
.spinner {
  width: 42px; height: 42px; margin: 6px auto 0;
  border: 4px solid var(--accent-soft);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Result */
.result-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.result-head .step-title { margin-bottom: 0; }
.result-hint { color: var(--ink-soft); font-size: 0.9rem; margin: 12px 0 14px; }
.result-hint code { background: #eef0f3; padding: 1px 5px; border-radius: 5px; font-size: 0.85em; }

.view-toggle { display: inline-flex; background: #eef0f3; border-radius: 9px; padding: 3px; }
.toggle-btn {
  border: none; background: transparent; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--ink-soft);
  padding: 6px 14px; border-radius: 7px;
}
.toggle-btn.active { background: rgba(255, 255, 255, 0.45); color: var(--accent-dark); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

.document {
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 28px 30px;
  min-height: 200px;
}
.preview.document h1 { font-size: 1.5rem; margin: 0.2em 0 0.4em; }
.preview.document h2 { font-size: 1.2rem; margin: 1em 0 0.4em; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.preview.document h3 { font-size: 1.05rem; margin: 0.9em 0 0.3em; }
.preview.document p { margin: 0.5em 0; }
.preview.document ul, .preview.document ol { margin: 0.5em 0; padding-left: 1.4em; }
.preview.document li { margin: 0.2em 0; }
.preview.document hr { border: none; border-top: 1px solid var(--line); margin: 1.4em 0; }
.preview.document table { border-collapse: collapse; margin: 0.6em 0; width: 100%; }
.preview.document th, .preview.document td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }
.preview.document .unsure { background: #fdeede; border-radius: 4px; padding: 0 3px; }
.preview.document .illegible { color: var(--danger); font-style: italic; }

.edit-pane {
  width: 100%;
  min-height: 360px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 0.92rem;
  line-height: 1.6;
  resize: vertical;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.35);
}

.title-input {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  flex: 1 1 160px;
  min-width: 140px;
  background: rgba(255, 255, 255, 0.35);
}

/* Banner */
.banner {
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: 0.92rem;
}
.banner.warn { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid #ecd9a0; }
.banner.error { background: #fbe6e0; color: var(--danger); border: 1px solid #f0c4b8; }
.banner.info { background: var(--accent-soft); color: var(--accent-dark); border: 1px solid #cfe2db; }

.site-footer { text-align: center; color: var(--ink-soft); font-size: 0.82rem; padding: 0 20px 36px; }

.hidden { display: none !important; }
.muted { color: var(--ink-soft); }
.small { font-size: 0.88rem; }

/* Mode tabs */
.mode-tabs {
  max-width: 820px;
  margin: 12px auto 0;
  padding: 0 20px;
  display: flex;
  gap: 8px;
}
.mode-tab {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom: none;
  background: rgba(16, 24, 32, 0.72);
  color: #cfe2ee;
  font: inherit;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 12px 12px 0 0;
  cursor: pointer;
}
.mode-tab.active { background: var(--card); color: var(--accent-dark); box-shadow: 0 -2px 8px rgba(0,0,0,0.04); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }

/* Upload-screen header (title + manual form picker) */
.upload-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.upload-head .step-title { margin: 0; }

/* Always-visible sales rep bar */
.rep-bar { max-width: 820px; margin: 6px auto 0; padding: 0 0 4px; }
.rep-bar label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600; color: #cfe2ee; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.rep-bar input, .rep-bar select {
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px;
  font: inherit; font-size: 0.95rem; color: var(--ink); background: rgba(255, 255, 255, 0.4); min-width: 260px;
}
.rep-bar select { min-width: 220px; }
.rep-bar input:focus, .rep-bar select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }

/* Submission history */
.history { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 16px; }
.history-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.history-head h3 { margin: 0; font-size: 1rem; }
.history-note { margin: 4px 0 10px; }
.history-search {
  width: 100%; box-sizing: border-box; margin: 0 0 12px;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  font: inherit; font-size: 0.95rem; background: rgba(255, 255, 255, 0.28);
}
.history-search:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.history-actions { display: flex; gap: 14px; }
.history-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.history-filters .history-search { flex: 1 1 220px; margin: 0; }
.rep-filter {
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px;
  font: inherit; font-size: 0.9rem; background: rgba(255, 255, 255, 0.28);
}
.rep-set { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--ink-soft); white-space: nowrap; }
.rep-set input { border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 0.88rem; width: 130px; background: rgba(255, 255, 255, 0.3); }
.history-empty { color: var(--ink-soft); font-size: 0.9rem; padding: 8px 2px; list-style: none; }
.history-exp, .history-del {
  flex: none; width: 28px; height: 28px; padding: 0;
  display: grid; place-items: center;
  border: none; border-radius: 50%; background: transparent;
  color: var(--ink-soft); cursor: pointer; line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.history-exp { font-size: 0.9rem; }
.history-exp:hover { background: var(--accent-soft); color: var(--accent-dark); }
.history-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.history-item { display: flex; align-items: center; gap: 6px; }
.history-open {
  flex: 1; text-align: left; cursor: pointer; font: inherit;
  background: rgba(255, 255, 255, 0.28); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 10px; padding: 10px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.history-open:hover { background: var(--accent-soft); border-color: var(--accent); }
.history-open strong { color: var(--accent-dark); font-size: 0.95rem; }
.history-meta { color: var(--ink-soft); font-size: 0.8rem; }
.history-del { font-size: 1.05rem; }
.history-del:hover { background: #fbe6e0; color: var(--danger); }

/* Review header right column */
.head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.jump-form { display: flex; flex-direction: column; gap: 4px; font-size: 0.76rem; font-weight: 600; color: var(--ink-soft); align-items: flex-end; }
.jump-form select {
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px;
  font-size: 0.9rem; color: var(--ink); background: rgba(255, 255, 255, 0.4); font-family: inherit; min-width: 220px;
}
.price-hint { font-size: 0.74rem; color: var(--accent-dark); margin-top: 3px; font-weight: 600; }

/* Detected badge */
.detect-badge { font-size: 0.85rem; font-weight: 600; padding: 5px 12px; border-radius: 20px; }
.detect-badge.citizens { background: var(--accent-soft); color: var(--accent-dark); }
.detect-badge.merrick { background: #e9ecf7; color: #2f3e7a; }
.detect-badge.unknown { background: var(--warn-bg); color: var(--warn-ink); }

/* Review form */
.section-off { display: none !important; } /* hidden when a form doesn't use this section */
.field-hidden { display: none !important; } /* field hidden when the chosen form doesn't use it */
.review-section { border: 1px solid var(--line); border-radius: 10px; margin: 14px 0; overflow: hidden; }
.review-section > summary {
  cursor: pointer; padding: 12px 16px; font-weight: 700; background: rgba(243, 245, 248, 0.3);
  list-style: none; display: flex; align-items: center; justify-content: space-between;
}
.review-section > summary::-webkit-details-marker { display: none; }
.review-section > summary::after { content: "▾"; color: var(--ink-soft); }
.review-section[open] > summary::after { content: "▴"; }
.section-body { padding: 14px 16px; }

.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; color: var(--ink-soft); }
.field-wide { grid-column: 1 / -1; } /* equipment model dropdown spans the full row */
/* Equipment picker: a custom text field stacked above the matrix dropdown. */
.equip-field { gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.25); }
.equip-sub { display: flex; flex-direction: column; gap: 4px; }
.equip-sub > span { font-weight: 600; font-size: 0.82rem; color: var(--ink-soft); }
.field > span { font-weight: 600; }
.field input, .field select {
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
  font-size: 0.95rem; color: var(--ink); background: rgba(255, 255, 255, 0.35); font-family: inherit;
}
.field input:focus, .field select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
/* Empty fields are not pre-highlighted; the focus outline above is the only highlight. */
.field.mirrored input { background: rgba(230, 233, 238, 0.3); color: var(--ink-soft); }
.checkfield { flex-direction: row; align-items: center; gap: 8px; font-size: 0.92rem; color: var(--ink); }
.checkfield input { width: 16px; height: 16px; }

/* ---- Sign Now bar (sits at the end of the form, before doc selection) ---- */
.sign-bar { margin-top: 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.btn-sign { background: rgba(255, 255, 255, 0.4); color: var(--accent); border: 1.5px solid var(--accent); font-weight: 700; }
.btn-sign:hover { background: var(--accent); color: #ffffff; }
.sign-status { font-weight: 700; font-size: 0.9rem; color: var(--ink-soft); }
.sign-status.signed { color: #1c7c3a; }

/* ---- Sign Now modal ---- */
.sign-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 20, 50, 0.55); padding: 16px; }
.sign-modal.hidden { display: none; }
.sign-card { background: #fff; border-radius: 14px; padding: 20px; width: 100%; max-width: 680px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.sign-modal-title { margin: 0 0 4px; color: var(--ink); font-size: 1.15rem; }
.sign-modal-help { margin: 0 0 14px; color: var(--ink-soft); font-size: 0.88rem; }
.sign-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.sign-tab { flex: 1; padding: 9px; border: 1px solid var(--line); background: #fafbfc; border-radius: 8px;
  font-weight: 700; color: var(--ink-soft); cursor: pointer; font-family: inherit; font-size: 0.9rem; }
.sign-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.sign-pad { width: 100%; height: 220px; border: 2px dashed var(--line); border-radius: 10px;
  background: #fff; touch-action: none; cursor: crosshair; display: block; }
.sign-type-input { width: 100%; box-sizing: border-box; padding: 12px; font-size: 1rem;
  border: 1px solid var(--line); border-radius: 8px; }
.sign-type-preview { margin-top: 10px; min-height: 90px; display: flex; align-items: center; padding: 8px 12px;
  border: 2px dashed var(--line); border-radius: 10px; color: var(--accent); overflow: hidden;
  font-family: "Brush Script MT", "Snell Roundhand", "Segoe Script", cursive; font-size: 2.6rem; }
.sign-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

.generate-actions { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 18px; }
.dl-title { font-weight: 700; color: var(--ink); margin: 0 0 10px; font-size: 0.95rem; }
.dl-picker { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.dl-check {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-size: 0.95rem; color: var(--ink); font-weight: 600;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.28);
}
.dl-check:hover { border-color: var(--accent); background: var(--accent-soft); }
.dl-check input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }

/* Menu table */
.table-wrap { overflow-x: auto; margin: 12px 0; }
.menu-table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
.menu-table th, .menu-table td { border: 1px solid var(--line); padding: 4px; text-align: left; }
.menu-table th { background: rgba(246, 247, 249, 0.3); font-size: 0.8rem; }
.menu-table input { width: 100%; border: none; padding: 6px; font: inherit; background: transparent; }
.menu-table input:focus { outline: 2px solid var(--accent-soft); border-radius: 4px; }
.menu-table td.price-col { width: 90px; }
.menu-table td.cat-col { width: 150px; }
.row-del { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 1.1rem; padding: 0 6px; }

@media (max-width: 560px) {
  .card { padding: 18px; }
  .actions { flex-wrap: wrap; }
  .document { padding: 20px 18px; }
}

/* On wide screens, dock the content column to the right so the helmet in the
   video backdrop stays in view, and shrink the whole panel (every field kept,
   just rendered smaller). Tune --panel-zoom to taste: 0.5 = exact half size.
   Narrow screens keep the centered, full-size column. */
:root { --panel-zoom: 0.6; }
@media (min-width: 1100px) {
  .mode-tabs,
  .rep-bar,
  main {
    margin-left: auto;
    margin-right: 5vw;
    zoom: var(--panel-zoom);
  }
}


/* "+N older" hint under the trimmed history list */
.history-more { list-style: none; padding: 8px 4px 2px; color: var(--ink-soft); font-size: 0.85rem; font-style: italic; }