@import url('https://fonts.googleapis.com/css2?family=Lora:wght@600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root {
  --blue: #2f6f9f;
  --blue-dark: #245573;
  --navy: #253548;
  --navy-deep: #192531;
  --ink: #322e28;
  --muted: #756d62;
  --bg: #f3ecdf;
  --card: #fffaf1;
  --line: #d7c8b4;
  --radius: 8px;
  --radius-sm: 6px;
  --shadow: 0 8px 24px rgba(62, 49, 35, .10);
  --shadow-lg: 0 16px 36px rgba(62, 49, 35, .15);
  --rust: #ad4f37;
  --rust-dark: #843b2d;
  --amber: #dca64a;
  --paper: #fffaf1;
  --film: #201f1c;
}

html { background: var(--bg); }
body {
  font-family: 'Source Sans 3', 'Segoe UI', sans-serif !important;
  color: var(--ink);
  background-color: var(--bg) !important;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(220,166,74,.13), transparent 25rem),
    repeating-linear-gradient(0deg, rgba(92,70,44,.018) 0, rgba(92,70,44,.018) 1px, transparent 1px, transparent 4px) !important;
}
h1, h2, h3 { font-family: 'Lora', Georgia, serif !important; letter-spacing: -.02em; }
button, input, textarea, select { font-family: 'Source Sans 3', 'Segoe UI', sans-serif !important; }
a { text-underline-offset: 3px; }

header, nav {
  background: rgba(255,250,241,.94) !important;
  border-bottom-color: var(--line) !important;
  box-shadow: 0 4px 18px rgba(66,49,31,.06);
}
.logo, .brand { font-family: 'Source Sans 3', sans-serif !important; letter-spacing: .01em; }
.logo > span:not(.cloud-tag), .brand .hd-gold { color: var(--rust) !important; }
.cloud-tag, .admin-tag {
  border-radius: 3px !important;
  background: #e8d7bd !important;
  color: var(--rust-dark) !important;
  letter-spacing: .08em;
}

.card, .file-card, .share-section, .approve-card, .create-form, .lane, .empty-state,
.trust-strip, .quote-card, .estimate-inline, .order-summary {
  background: var(--card) !important;
  border-color: var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}
input, textarea, select {
  background: #fffdf8 !important;
  border-color: #cdbba4 !important;
  border-radius: 5px !important;
  color: var(--ink) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--rust) !important;
  box-shadow: 0 0 0 3px rgba(173,79,55,.12) !important;
}

.btn-primary, .btn-submit, .btn-publish, .btn-create,
.page-login button, .share-url-row button {
  background: var(--rust) !important;
  border-radius: 5px !important;
  box-shadow: 0 5px 0 var(--rust-dark) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-submit:hover, .btn-publish:hover, .btn-create:hover,
.page-login button:hover, .share-url-row button:hover {
  background: var(--rust-dark) !important;
  transform: translateY(1px) !important;
  box-shadow: 0 3px 0 #622b22 !important;
}
.btn-secondary, .btn-reject, .sub-btn, button.secondary {
  background: transparent !important;
  border-color: #bca991 !important;
  color: var(--navy) !important;
  border-radius: 5px !important;
  box-shadow: none !important;
}

/* Sign-in: an old family frame with a clean, modern access card. */
.page-login {
  background:
    linear-gradient(90deg, rgba(25,37,49,.98) 0%, rgba(25,37,49,.91) 42%, rgba(25,37,49,.28) 72%),
    url('/static/archive-still.jpg') center / cover no-repeat fixed !important;
  justify-content: flex-start !important;
}
.page-login .container {
  max-width: 470px !important;
  margin-left: clamp(1rem, 8vw, 9rem);
  margin-right: 1rem;
  position: relative;
}
.page-login .brand, .page-login .subtitle, .page-login .footer-note { color: #f9f0df !important; }
.page-login .logo { color: #fff !important; }
.page-login .logo span { color: var(--amber) !important; }
.page-login .subtitle { font-family: 'Lora', Georgia, serif; font-style: italic; font-size: 1.05rem; }
.page-login .card {
  background: rgba(255,250,241,.97) !important;
  border-top: 5px solid var(--rust) !important;
  padding: 2.5rem 2.2rem !important;
}
.page-login .code-input { border-radius: 4px !important; }

/* Customer library: home movies presented like labeled archive reels. */
.page-library main { padding-top: 3rem; }
.page-library .greeting { border-left: 5px solid var(--rust); padding-left: 1.25rem; }
.page-library .greeting h1 { font-size: clamp(1.9rem, 4vw, 2.7rem) !important; }
.page-library .file-card { border-radius: 5px !important; overflow: hidden; }
.page-library .file-thumb {
  position: relative;
  background: linear-gradient(145deg, #273647, #171f27) !important;
  border: 8px solid var(--film);
  border-bottom-width: 12px;
}
.page-library .file-thumb::before,
.page-library .file-thumb::after {
  content: '';
  position: absolute; left: 8px; right: 8px; height: 7px;
  background: repeating-linear-gradient(90deg, #d7c8b4 0 12px, transparent 12px 23px);
  opacity: .72;
}
.page-library .file-thumb::before { top: -7px; }
.page-library .file-thumb::after { bottom: -10px; }
.page-library .play-circle { border-color: var(--amber) !important; }
.page-library .file-card:hover .play-circle { background: var(--rust) !important; border-color: var(--rust) !important; }
.page-library .file-info { background: linear-gradient(#fffaf1, #f5ead8); padding: 1.15rem !important; }
.page-library .file-name { font-family: 'Lora', Georgia, serif; font-size: 1.05rem !important; }

/* Video and share surfaces use a physical film-frame silhouette. */
.page-player main { max-width: 980px !important; padding-top: 3rem !important; }
.page-player .player-wrapper, .page-share .player-wrapper {
  border: 12px solid var(--film) !important;
  border-radius: 4px !important;
  outline: 1px solid #4e473e;
  box-shadow: 0 18px 42px rgba(42,32,22,.28) !important;
}
.page-player .file-details { border-left: 5px solid var(--rust); padding-left: 1rem; }
.page-player .file-details h1, .page-share h1 { font-size: clamp(1.55rem, 4vw, 2.2rem) !important; }
.page-player .share-section, .page-share .share-section { border-top: 4px solid var(--amber) !important; }
.platform-box { background: #fffaf1 !important; border-radius: 5px !important; border-color: var(--line) !important; }
.page-share { background: linear-gradient(160deg, #efe4d2, #f8f1e7) !important; }
.page-share .container { max-width: 900px !important; }
.page-share .shared-badge { background: #ead7b9 !important; border-color: #c8a66e !important; color: var(--rust-dark) !important; border-radius: 4px !important; }
.page-share .brand a strong { color: var(--rust) !important; }

/* Checkout: keepsake order sheet, not generic SaaS checkout chrome. */
.page-order .checkout-wrap { max-width: 1160px !important; padding-top: 40px !important; }
.page-order .progress-steps { justify-content: flex-start !important; }
.page-order .step-item .step-dot {
  border-radius: 3px !important; transform: rotate(-2deg);
  background: #e8d7bd !important; border-color: #c9b18d !important; color: var(--rust-dark) !important;
}
.page-order .step-item.active .step-dot { background: var(--rust) !important; border-color: var(--rust) !important; color: #fff !important; }
.page-order .step-line.done { background: var(--rust) !important; }
.page-order .trust-strip { justify-content: flex-start !important; border-left: 5px solid var(--amber) !important; }
.page-order .trust-icon { background: var(--rust) !important; border-radius: 3px !important; }
.page-order .card { border-top: 3px solid #e2d2bb !important; }
.page-order .card h3 { font-size: 1.2rem !important; }
.page-order .mode-btn, .page-order .tier-card, .page-order .format-chip, .page-order .day-btn {
  border-radius: 5px !important; border-color: var(--line) !important; background: #fffaf1 !important;
}
.page-order .mode-btn.active, .page-order .tier-card.selected, .page-order .format-chip.selected, .page-order .day-btn.selected {
  border-color: var(--rust) !important;
  background: #f8e9db !important;
  box-shadow: 0 0 0 2px rgba(173,79,55,.13) !important;
}
.page-order .tier-card .tier-price, .page-order .tape-counter input, .page-order .estimate-inline .total { color: var(--rust) !important; }
.page-order .tape-counter button { border-color: var(--line) !important; color: var(--rust) !important; background: var(--paper) !important; }
.page-order .disaster-item { background: #f0e5d4 !important; border-radius: 5px !important; }
.page-order .disaster-item .di-icon { background: var(--navy) !important; border-radius: 3px !important; }
.page-order .cloudflare-stat, .page-order .pickup-highlight { background: #eee3d2 !important; border-color: #d6c0a4 !important; border-radius: 5px !important; }
.page-order .order-summary {
  background: var(--navy-deep) !important;
  border: 1px solid #425164 !important;
  border-top: 6px solid var(--amber) !important;
  color: #fff5e5 !important;
}
.page-order .order-summary h3,
.page-order .order-summary .value,
.page-order .order-summary .summary-total { color: #fff5e5 !important; }
.page-order .order-summary .label,
.page-order .order-summary .summary-cloud,
.page-order .order-summary .summary-footer { color: #cfc5b5 !important; }
.page-order .order-summary h3,
.page-order .summary-divider,
.page-order .summary-cloud { border-color: rgba(255,255,255,.16) !important; }
.page-order .order-summary .cloud-badge { background: var(--amber) !important; color: var(--navy-deep) !important; border: none !important; border-radius: 3px !important; }
.page-order .summary-total span:last-child { color: var(--amber) !important; }

/* Admin stays compact, but belongs to the same archival system. */
.page-admin .tab-nav { background: #eee2d1 !important; border-color: var(--line) !important; }
.page-admin .tab-btn.active { color: var(--rust) !important; border-bottom-color: var(--rust) !important; }
.page-admin .count-pill, .page-admin .btn-publish { background: var(--rust) !important; }
.page-admin .lane { border-top: 4px solid #b8a78e !important; }
.page-admin .job-card { background: #f2e8d8 !important; border-radius: 4px !important; }
.page-admin th { background: var(--navy-deep) !important; }
.page-admin table { border-radius: 4px !important; }
.page-admin .create-form { border-top: 4px solid var(--amber) !important; }

:focus-visible { outline: 3px solid rgba(173,79,55,.35) !important; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (max-width: 800px) {
  .page-login { justify-content: center !important; background-position: 62% center !important; }
  .page-login .container { margin: 0 auto; }
  .page-login::before { content:''; position:fixed; inset:0; background:rgba(25,37,49,.40); pointer-events:none; }
  .page-login .container { z-index: 1; }
}
@media (max-width: 640px) {
  .page-order .checkout-wrap { padding-top: 22px !important; }
  .page-order .trust-strip { justify-content: center !important; }
  .page-player .player-wrapper, .page-share .player-wrapper { border-width: 7px !important; }
  .page-library .greeting h1 { font-size: 2rem !important; }
}