/* ═══════════════════════════════════════════════════════════════════════════
   CUTS CLIENT PORTAL — Editorial × Cinematic
   Ported 1:1 from the cuts-landing-v2 visual language.
   Studio black + drifting yellow auras + display typography.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The hidden attribute must always win: any class that sets its own display (flex,
   grid) silently overrides the browser's [hidden] rule, which is how "hidden" elements
   were showing up. The one justified !important in this file. */
[hidden] { display: none !important; }

/* ───── Fonts ───── */
@font-face {
  font-family: 'FbTypograph2';
  src: url('/static/FbTypograph2-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'FbTypograph2';
  src: url('/static/FbTypograph2-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'FbTypograph2';
  src: url('/static/FbTypograph2-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'FbTypograph2';
  src: url('/static/FbTypograph2-Black.otf') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ───── Tokens ───── */
:root {
  --primary: #FFD500;
  --ink:     #0A0A0A;
  --paper:   #FAF7F0;
  --muted:   #6B6B66;
  --line:    rgba(10,10,10,0.12);

  /* Dark studio theme (used throughout) */
  --bg:      #0A0A0A;
  --fg:      #F5F2E8;
  --accent:  var(--primary);
  --card:    #141414;
  --card-2:  #1A1A1A;
  --line2:   rgba(245,242,232,0.10);
  --line2-strong: rgba(245,242,232,0.16);

  /* Semantic tones (derived) */
  --fg-soft: rgba(245,242,232,0.78);
  --fg-mute: rgba(245,242,232,0.52);
  --fg-dim:  rgba(245,242,232,0.34);

  /* Yellow surfaces */
  --y-glow-1: rgba(255,213,0,0.16);
  --y-glow-2: rgba(255,213,0,0.10);
  --y-surface: rgba(255,213,0,0.06);
  --y-border:  rgba(255,213,0,0.20);

  /* Danger */
  --danger:    #E63946;
  --danger-soft: rgba(230,57,70,0.10);

  /* Radii */
  --r-pill: 999px;
  --r-card: 16px;
  --r-btn:  12px;
  --r-input:12px;

  /* Fonts */
  --font-display: 'FbTypograph2', system-ui, sans-serif;
  --font-body:    'FbTypograph2', system-ui, sans-serif;
  --font-mono:    'FbTypograph2', ui-monospace, monospace;
}

/* ───── Reset ───── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  direction: rtl;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;

  /* Layered yellow aura stack — exact port from landing's theme-bold */
  background-image:
    radial-gradient(1100px 700px at 12% 5%,   rgba(255,213,0,0.16), transparent 55%),
    radial-gradient(950px  600px at 92% 25%,  rgba(255,213,0,0.10), transparent 55%),
    radial-gradient(900px  600px at 8%  60%,  rgba(255,213,0,0.09), transparent 55%),
    radial-gradient(1000px 650px at 95% 95%,  rgba(255,213,0,0.13), transparent 55%),
    radial-gradient(700px  500px at 50% 45%,  rgba(255,213,0,0.05), transparent 70%);
  background-attachment: fixed;
}

/* Drifting fixed aura layer — sits behind everything, blends in */
body::before {
  content: "";
  position: fixed; inset: -15%;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(700px 500px at 25% 35%, rgba(255,213,0,0.14), transparent 60%),
    radial-gradient(600px 420px at 75% 70%, rgba(255,213,0,0.10), transparent 60%);
  animation: bgDrift 18s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  filter: blur(20px);
}

/* Subtle film-grain noise overlay — adds analog texture without competing */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

@keyframes bgDrift {
  0%   { transform: translate(0%, 0%)      scale(1);    opacity: 0.85; }
  35%  { transform: translate(-4%, 3%)     scale(1.12); opacity: 1;    }
  70%  { transform: translate(3%, -4%)     scale(1.08); opacity: 0.9;  }
  100% { transform: translate(-2%, -2%)    scale(1.05); opacity: 1;    }
}

/* Decorative legacy `.scene` from base.html — now a no-op wrapper */
.scene { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.orb, .dot-grid, .vignette { display: none; }

/* Selection */
::selection { background: var(--accent); color: #000; }

/* Custom yellow cursor glow (added by interactions.js) */
.cursor-glow {
  position: fixed;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,213,0,0.14) 0%, transparent 70%);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: transform;
}

/* Links */
a { color: inherit; text-decoration: none; }
a:not([class*="btn"]):hover { color: var(--accent); }
img { display: block; max-width: 100%; }

/* ───── Wrap / canvas ───── */
.site-canvas { container-type: inline-size; container-name: canvas; width: 100%; }

.main {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 120px 32px 100px;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

/* ───── Typography utilities ───── */
.display {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 0.96;
  text-wrap: balance;
}
.display--accent { color: var(--accent); text-shadow: 0 0 40px rgba(255,213,0,0.45); }

.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 8px 14px;
  border: 1px solid var(--y-border);
  border-radius: var(--r-pill);
  background: var(--y-surface);
}
.eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(255,213,0,0.7);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 11px;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
}

.tag--solid {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
}

.pulse { position: relative; }
.pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--accent);
  animation: pulseRing 1.8s ease-out infinite;
  pointer-events: none;
}
@keyframes pulseRing {
  0%   { opacity: 0.8; transform: scale(0.85); }
  100% { opacity: 0;   transform: scale(1.6);  }
}

.dot-pulse {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(255,213,0,0.8);
  animation: dotPulse 1.6s ease-in-out infinite;
  margin-inline-end: 8px;
  vertical-align: middle;
}
@keyframes dotPulse {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%      { opacity: 0.5; transform: scale(0.7); }
}

/* ───── Loader: the studio's ring, for the sign-in link page and modal fetches ───── */
.loader {
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255,213,0,0.18);
  border-top-color: var(--accent);
  animation: loaderSpin 0.9s linear infinite;
  vertical-align: middle;
}
.loader--big {
  display: block;
  width: 56px; height: 56px;
  border-width: 3px;
  margin: 0 auto 26px;
  box-shadow: 0 0 32px rgba(255,213,0,0.18);
  position: relative; z-index: 1;
}
.loader-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
@keyframes loaderSpin { to { transform: rotate(360deg); } }
.go-card { text-align: center; }
.go-title { margin-bottom: 10px; }
.go-subtitle { min-height: 1.4em; transition: opacity 0.3s; }
@media (prefers-reduced-motion: reduce) {
  .loader { animation-duration: 2s; }
}

/* Reveal on scroll (used by interactions.js) */
.reveal-init {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(.2,.8,.2,1), transform 0.7s cubic-bezier(.2,.8,.2,1);
}
.reveal-in { opacity: 1; transform: none; }

/* ───── Nav ───── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}
.nav--scrolled {
  background: rgba(10,10,10,0.72);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--line2);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 32px;
}
.nav-logo { height: 36px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-link {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-soft);
  padding: 10px 14px;
  border-radius: 8px;
  transition: color 0.2s ease, background 0.2s ease;
}
.nav-link:hover { color: var(--accent); background: var(--y-surface); }
.nav-link--cta {
  background: var(--accent);
  color: var(--ink) !important;
  padding: 10px 18px;
  border-radius: var(--r-btn);
  font-weight: 700;
  letter-spacing: 0.1em;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.nav-link--cta:hover {
  background: var(--accent);
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 8px 24px rgba(255,213,0,0.3);
}
.nav-link--logout { color: var(--fg-dim); }
.nav-link--logout:hover { color: var(--danger); background: var(--danger-soft); }

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--line2);
  border-radius: 10px;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--fg);
  margin: 0 auto;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ───── Flash / messages ───── */
.flash-messages { margin-bottom: 32px; display: grid; gap: 12px; }
.flash {
  padding: 14px 20px;
  background: var(--y-surface);
  border: 1px solid var(--y-border);
  border-radius: var(--r-btn);
  color: var(--accent);
  font-weight: 500;
}

/* ───── Buttons ───── */
.btn,
.btn-primary,
.btn-cancel,
.btn-back,
.btn-shorts,
.btn-revision,
.btn-reschedule,
.btn-view-deliverables,
.btn--primary,
.btn--secondary,
.btn--full,
.btn-show-more,
.cancel-modal-no,
.cancel-modal-yes,
.sp-details-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  padding: 12px 22px;
  border: 1.5px solid transparent;
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn:disabled,
.btn-primary:disabled,
.btn--primary:disabled,
.btn-shorts:disabled,
.btn-revision:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Primary — yellow solid */
.btn-primary,
.btn--primary {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
  padding: 16px 32px;
  font-size: 16px;
}
.btn-primary:hover:not(:disabled),
.btn--primary:hover:not(:disabled) {
  color: var(--ink);
  transform: scale(1.03);
  box-shadow: 0 14px 36px rgba(255,213,0,0.3);
}
.btn-primary:active:not(:disabled),
.btn--primary:active:not(:disabled) { transform: scale(0.98); }

.btn--full { width: 100%; }

/* Ghost / outline */
.btn-cancel,
.btn-back,
.btn--secondary,
.btn-show-more,
.sp-details-back,
.cancel-modal-no {
  border-color: var(--line2-strong);
  color: var(--fg-soft);
}
.btn-cancel:hover,
.btn-back:hover,
.btn--secondary:hover,
.btn-show-more:hover,
.sp-details-back:hover,
.cancel-modal-no:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--y-surface);
}

/* Danger */
.cancel-modal-yes {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
.cancel-modal-yes:hover {
  background: #f4515e;
  transform: scale(1.03);
}

/* Project-row action buttons (smaller, inline with project meta) */
.btn-reschedule,
.btn-shorts,
.btn-revision,
.btn-view-deliverables {
  padding: 8px 14px;
  font-size: 12px;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-color: var(--line2);
  color: var(--fg-soft);
  border-radius: var(--r-pill);
}
.btn-reschedule:hover,
.btn-shorts:hover,
.btn-revision:hover:not(:disabled):not(.btn-revision--disabled),
.btn-view-deliverables:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--y-surface);
}
.btn-cancel {
  padding: 8px 14px;
  font-size: 12px;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
}
.btn-revision--disabled {
  border-color: var(--line2);
  color: var(--fg-dim);
  cursor: not-allowed;
}

/* ───── Forms ───── */
.form, form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.label, label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
select,
textarea {
  width: 100%;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.02);
  border: 1.5px solid var(--line2);
  border-radius: var(--r-input);
  color: var(--fg);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder,
input::placeholder,
textarea::placeholder { color: var(--fg-dim); }

.input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  background: rgba(255,213,0,0.04);
  box-shadow: 0 0 0 4px rgba(255,213,0,0.10);
}

select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23F5F2E8' d='M6 8L0 0h12z' opacity='0.6'/></svg>");
  background-repeat: no-repeat;
  background-position: left 16px center;
  padding-inline-start: 40px;
}

textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.6;
}

/* Custom checkbox */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border: 1.5px solid var(--line2-strong);
  border-radius: 5px;
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.2s ease, background 0.2s ease;
}
input[type="checkbox"]:hover { border-color: var(--y-border); }
input[type="checkbox"]:checked {
  border-color: var(--accent);
  background: var(--accent);
}
input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 50%; top: 45%;
  width: 5px; height: 9px;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* ───── Page header ───── */
.page-header {
  margin-bottom: 56px;
  text-align: center;
}
.page-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(38px, 5.2cqw, 72px);
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0 0 14px;
  text-wrap: balance;
}
.pod-name {
  position: relative;
  display: inline-block;
  color: var(--accent);
  text-shadow: 0 0 40px rgba(255,213,0,0.45);
  padding-bottom: 0.14em;
}
.pod-name::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0.07em;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg,
    rgba(255,213,0,0) 0%,
    rgba(255,213,0,0.95) 50%,
    rgba(255,213,0,0) 100%);
  box-shadow: 0 0 18px rgba(255,213,0,0.55);
}
.page-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin: 0;
}

/* Section headings */
.section { margin-bottom: 64px; }
.section-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(22px, 2.6cqw, 30px);
  letter-spacing: -0.015em;
  color: var(--fg);
  margin: 0 0 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.section-title::before {
  content: '';
  flex: 0 0 6px;
  height: 22px;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 18px rgba(255,213,0,0.55);
}

/* ───── Alerts ───── */
.alert {
  position: relative;
  padding: 20px 24px;
  border-radius: var(--r-card);
  border: 1px solid var(--line2);
  background: rgba(255,255,255,0.02);
  font-weight: 400;
  line-height: 1.55;
  margin-bottom: 24px;
}
.alert--warning {
  border-color: rgba(230,57,70,0.30);
  background: rgba(230,57,70,0.06);
  color: rgba(255,205,210,0.92);
}
.alert--info {
  border-color: var(--y-border);
  background: var(--y-surface);
  color: var(--fg-soft);
}
.alert--new {
  border-color: var(--y-border);
  background: var(--y-surface);
  color: var(--accent);
  font-weight: 700;
}
.alert--draft {
  border-color: var(--y-border);
  background: var(--y-surface);
  color: var(--fg-soft);
}
.badge-new {
  display: inline-block;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  margin-inline-start: 8px;
}

/* ───── Auth (login) ───── */
.auth-page {
  min-height: calc(100vh - 200px);
  display: grid;
  place-items: center;
  padding: 0 24px;
}
.auth-card {
  width: 100%;
  max-width: 440px;
  padding: 48px 40px;
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: 24px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 30px 80px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,213,0,0.06);
  position: relative;
  overflow: hidden;
}
.auth-card::before {
  content: '';
  position: absolute;
  top: -120px; left: -120px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(255,213,0,0.18), transparent 70%);
  pointer-events: none;
}
.auth-logo {
  display: block;
  margin: 0 auto 28px;
  height: 56px; width: auto;
  position: relative; z-index: 1;
}
.auth-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 36px;
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-align: center;
  margin: 0 0 12px;
  position: relative; z-index: 1;
}
.auth-subtitle {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-mute);
  text-align: center;
  margin: 0 0 36px;
  position: relative; z-index: 1;
}

/* ───── Dashboard cards ───── */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-bottom: 48px;
}
.card {
  position: relative;
  padding: 28px 26px;
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: var(--r-card);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
  border-color: var(--line2-strong);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.4);
}
.card--highlight {
  background:
    radial-gradient(280px 220px at 80% 10%, rgba(255,213,0,0.10), transparent 70%),
    var(--card);
  border-color: var(--y-border);
  box-shadow: inset 0 0 0 1px rgba(255,213,0,0.10);
}
.card-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.card-value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 40px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fg);
}
.card-value--large {
  color: var(--accent);
  text-shadow: 0 0 40px rgba(255,213,0,0.35);
}
.card-sub {
  font-size: 13px;
  color: var(--fg-mute);
  margin-top: 4px;
}

/* CTA blocks */
.cta-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-bottom: 32px;
}
.cta-block--row {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

/* ───── Project list ───── */
.project-list {
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: var(--r-card);
  overflow: hidden;
  margin-bottom: 24px;
}
.project-list--done { opacity: 0.92; }

.project-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 20px 26px;
  border-bottom: 1px dashed var(--line2);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.project-item:last-child { border-bottom: none; }
.project-item:hover { background: rgba(255,213,0,0.04); }
.project-item--new { background: var(--y-surface); }
.project-item--done { opacity: 0.62; }
.project-item--hidden { display: none; }

.project-info { display: flex; flex-direction: column; gap: 6px; flex: 1 1 240px; min-width: 0; }

.project-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--fg);
  transition: color 0.2s ease;
}
.project-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.project-meta--dim { color: var(--fg-dim); }
.project-meta .accent,
.project-meta .yellow { color: var(--accent); }

.project-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 5px 11px;
  border: 1px solid var(--y-border);
  border-radius: var(--r-pill);
  background: var(--y-surface);
}
.project-status-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(255,213,0,0.8);
  animation: dotPulse 1.6s ease-in-out infinite;
}

/* ───── Project progress bar ───── */
.ptl { margin-top: 14px; }
.ptl-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 8px;
}
.ptl-now {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--accent);
  text-shadow: 0 0 24px rgba(255,213,0,0.35);
}
.ptl-step {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--fg-mute);
  white-space: nowrap;
}
.ptl-bar {
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--line2);
  overflow: hidden;
}
.ptl-fill {
  display: block;
  height: 100%;
  width: var(--pct);
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, #f5cf00, var(--accent));
  box-shadow: 0 0 12px rgba(255,213,0,0.5);
  transform-origin: right center;
  animation: ptlFill 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes ptlFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.project-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* "Show more" toggle */
#showMoreDone {
  display: block;
  margin: 16px auto 0;
}

/* ───── Modal overlays ───── */
.revision-overlay,
.cancel-overlay,
.shorts-overlay,
.deliv-overlay,
.video-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8,8,8,0.78);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  display: grid;
  place-items: center;
  padding: 24px;
}
.revision-overlay.active,
.cancel-overlay.active,
.shorts-overlay.active,
.deliv-overlay.active,
.video-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.revision-modal,
.cancel-modal,
.shorts-modal,
.deliv-modal,
.video-modal {
  width: 100%;
  max-width: 720px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: 24px;
  padding: 36px;
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 40px 100px rgba(0,0,0,0.7);
  transform: translateY(8px);
  transition: transform 0.25s ease;
}
.revision-overlay.active .revision-modal,
.cancel-overlay.active .cancel-modal,
.shorts-overlay.active .shorts-modal,
.deliv-overlay.active .deliv-modal,
.video-overlay.active .video-modal { transform: translateY(0); }

.revision-modal-header,
.cancel-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.revision-modal-title,
.cancel-modal-title,
.video-modal-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}
.revision-modal-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin: 0 0 28px;
}
.revision-close,
#shortsClose {
  background: none;
  border: 1px solid var(--line2);
  color: var(--fg-soft);
  width: 38px; height: 38px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.revision-close:hover,
#shortsClose:hover { border-color: var(--accent); color: var(--accent); transform: rotate(90deg); }

.revision-textarea {
  width: 100%;
  min-height: 140px;
  font-family: var(--font-body);
  padding: 16px;
  background: rgba(255,255,255,0.02);
  border: 1.5px solid var(--line2);
  border-radius: var(--r-input);
  color: var(--fg);
  font-size: 15px;
  line-height: 1.55;
  resize: vertical;
}
.revision-textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255,213,0,0.04);
}

.rev-section { margin-bottom: 22px; }
.rev-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.rev-section-label,
.rev-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.rev-section-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.rev-counter {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.rev-video-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.rev-video-label {
  flex: 0 0 92px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-soft);
  padding-top: 14px;
}
.rev-video-textarea {
  flex: 1;
  min-height: 80px;
}
.rev-play {
  background: none;
  border: 1px solid var(--line2);
  border-radius: 8px;
  color: var(--fg-soft);
  padding: 8px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.rev-play:hover { border-color: var(--accent); color: var(--accent); }

.revision-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
.revision-actions .btn--primary,
.revision-actions button[type="submit"] { flex: 1; }

.revision-success {
  text-align: center;
  padding: 28px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--accent);
}

/* Cancel modal */
.cancel-modal { max-width: 480px; }
/* Success state: keep it centred on every screen (override the mobile
   bottom-sheet alignment) and give it a pill shape + entrance animation. */
.cancel-overlay.cancel-overlay--success { align-items: center; }
.cancel-overlay--success .cancel-modal {
  border-radius: 24px;
  animation: cancelModalIn 0.42s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}
.cancel-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 8px;
}
.cancel-success-icon {
  display: grid;
  place-items: center;
  width: 88px; height: 88px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--y-surface);
  border: 2px solid var(--accent);
  color: var(--accent);
  font-size: 40px;
  box-shadow: 0 0 50px rgba(255,213,0,0.32);
  animation: cancelIconPop 0.5s cubic-bezier(0.2, 0.9, 0.25, 1) 0.08s both;
}
.cancel-success-msg {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.01em;
  animation: cancelMsgIn 0.4s ease 0.18s both;
}
@keyframes cancelModalIn {
  from { opacity: 0; transform: translateY(10px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cancelIconPop {
  0%   { opacity: 0; transform: scale(0.4); }
  60%  { transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes cancelMsgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cancel-modal-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-soft);
  margin-bottom: 22px;
}
.cancel-modal-actions { display: flex; gap: 12px; }
.cancel-modal-actions button { flex: 1; }

/* Shorts modal */
.shorts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.short-option {
  position: relative;
  aspect-ratio: 1;
  border: 1.5px solid var(--line2);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
  background: var(--card-2);
}
.short-option:hover { border-color: var(--line2-strong); transform: translateY(-2px); }
.short-option-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* keep the bottom strip clear of the corner play button, so a two-digit
     number never crowds it */
  padding-bottom: 20px;
  cursor: pointer;
}
.short-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.short-num {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--fg-soft);
  transition: color 0.2s ease, transform 0.2s ease;
}
.short-check {
  position: absolute;
  top: 7px; left: 7px;
  width: 17px; height: 17px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line2-strong);
  background: rgba(0,0,0,0.35);
  display: grid;
  place-items: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.short-check::after {
  /* Drawn, not typed: the ✓ glyph carries its own font-dependent padding and never sat
     centred in the circle. Two borders on a rotated box always do. */
  content: '';
  width: 4px;
  height: 8px;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  /* the rotated tick's mass falls below the box centre; translate composes with the
     scale animation instead of fighting it */
  translate: 0 -1px;
  opacity: 0;
  transform: rotate(45deg) scale(0.4);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.short-option:has(.short-checkbox:checked) {
  border-color: var(--accent);
  background: var(--y-surface);
  box-shadow: 0 0 0 1px var(--accent) inset, 0 8px 24px rgba(255,213,0,0.12);
}
.short-option:has(.short-checkbox:checked) .short-num {
  color: var(--accent);
  transform: scale(1.06);
}
.short-option:has(.short-checkbox:checked) .short-check {
  background: var(--accent);
  border-color: var(--accent);
}
.short-option:has(.short-checkbox:checked) .short-check::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}
.short-play {
  position: absolute;
  bottom: 5px; right: 5px;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--line2-strong);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  color: var(--accent);
  z-index: 2;
  transition: transform 0.2s ease, background 0.2s ease;
}
.short-play::before {
  content: '▶';
  font-size: 9px;
  margin-right: -2px;
}
.short-option:hover .short-play { transform: scale(1.12); background: rgba(0,0,0,0.75); }

/* Full-episode tile in the shorts picker — same look as a short, but a single
   full-width, view-only row (no checkbox). */
.shorts-grid--episode { grid-template-columns: 1fr; margin: 16px 0 0; }
.short-option--episode {
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.short-option--episode .short-num { font-size: 18px; color: var(--accent); }

.shorts-limit-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
  margin-top: 14px;
}
.custom-shorts { margin-top: 14px; }
.custom-shorts-list { display: grid; gap: 8px; margin-bottom: 10px; }
.custom-short-row { display: flex; gap: 8px; align-items: center; }
.custom-short-input {
  flex: 1;
  background: #0f0f0f;
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--fg);
  font-family: inherit;
}
.custom-short-remove {
  flex: none;
  width: 36px; height: 36px;
  border: 1px solid var(--line2);
  border-radius: 10px;
  background: transparent;
  color: var(--fg-soft);
  font-size: 18px;
  cursor: pointer;
}
.custom-short-add {
  width: 100%;
  background: transparent;
  border: 1.5px dashed var(--line2-strong);
  color: var(--fg-soft);
  border-radius: 10px;
  padding: 11px 14px;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.custom-short-add:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.custom-short-add:disabled { opacity: 0.4; cursor: not-allowed; }
.shorts-empty {
  text-align: center;
  padding: 40px 0;
  color: var(--fg-mute);
}

/* ───── Extra-shorts upsell ───── */
/* Quota meter on the project card: how much of the allowance is left, before the
   modal is even opened. */
.shorts-meter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.shorts-meter-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--fg-mute);
  white-space: nowrap;
}

/* Beyond the allowance: a real pick, just one that costs. It keeps the checked tile's
   look and adds a dashed outline and a ₪ badge, so "picked" and "picked and billable"
   are never the same thing on screen. The badge takes the free top-right corner — the
   tick sits top-left and the play button bottom-right. */
/* Beyond the package — this pick costs money, so it must not read as one more ticked
   tile. Extra picks are ticked too, so these rules have to out-specify the checked
   state above: filled in accent, badged with a price, and quietly moving so the eye
   lands on them before the client reaches the total. */
/* A package pick is already an accent-outlined tile, so "more accent" would say nothing.
   An extra pick inverts instead — filled solid, dark type — which no free pick can be
   mistaken for. */
.short-option--extra:has(.short-checkbox:checked) {
  border-color: var(--accent);
  background: linear-gradient(150deg, #ffe95e, var(--accent) 55%, #f5c400);
  box-shadow: 0 8px 26px rgba(255,222,31,0.32);
  animation: extra-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Each of these has to clear the checked state's own :has() specificity, or the tile
   would keep its accent-on-accent type and vanish into the fill. */
.short-option--extra:has(.short-checkbox:checked) .short-num {
  color: var(--ink);
  transform: none;
}
.short-option--extra:has(.short-checkbox:checked) .short-check {
  background: var(--ink);
  border-color: rgba(0,0,0,0.45);
}
.short-option--extra:has(.short-checkbox:checked) .short-check::after {
  border-color: var(--accent);
}
.short-option--extra:has(.short-checkbox:checked) .short-play {
  background: rgba(0,0,0,0.82);
  border-color: rgba(0,0,0,0.5);
}
/* A gloss travelling across the chip, clipped by the tile's own overflow. */
.short-option--extra::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.55) 50%, transparent 62%);
  animation: extra-sweep 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
.short-option--extra::after {
  content: '₪';
  position: absolute;
  top: 5px; right: 5px;
  width: 18px; height: 18px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  z-index: 2;
  animation: extra-badge 2s ease-out infinite;
}
@keyframes extra-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes extra-sweep {
  0% { transform: translateX(-130%); }
  55%, 100% { transform: translateX(130%); }
}
@keyframes extra-badge {
  0% { box-shadow: 0 0 0 0 rgba(0,0,0,0.5); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(0,0,0,0); }
}
@media (prefers-reduced-motion: reduce) {
  .short-option--extra:has(.short-checkbox:checked),
  .short-option--extra::before,
  .short-option--extra::after { animation: none; }
  .short-option--extra::before { opacity: 0; }
}
.custom-short-row--extra { position: relative; }
.custom-short-row--extra .custom-short-input {
  border-color: var(--accent);
  background: linear-gradient(155deg, rgba(255,222,31,0.16), rgba(255,222,31,0.04));
  box-shadow: 0 0 0 1px var(--accent) inset;
  padding-inline-start: 30px;
}
.custom-short-row--extra::after {
  content: '₪';
  position: absolute;
  inset-inline-start: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
  pointer-events: none;
}

/* Already produced: ticked, and not something the client can take back. Reads as a
   settled fact rather than a disabled control. */
.short-option--chosen { border-color: var(--y-border); }
.short-option--chosen .short-option-label { cursor: default; }
.custom-short-row--chosen .custom-short-input {
  color: var(--fg-mute);
  border-style: dashed;
}
.custom-short-done {
  flex: none;
  width: 36px;
  text-align: center;
  color: var(--accent);
}


/* The accumulator in the shorts modal's footer: what the selection now costs, and the
   one way forward while it costs anything. It stands where the send button stands, so
   the two can never be mistaken for each other. */
.shorts-extra-bar {
  margin-top: 20px;
  padding: 16px;
  border: 1.5px solid var(--y-border);
  border-radius: var(--r-card);
  background: var(--y-surface);
  text-align: center;
}
.shorts-extra-count {
  margin: 0;
  font-weight: 700;
  font-size: 15px;
  color: var(--fg);
}
.shorts-extra-total {
  margin: 6px 0 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
}
.shorts-extra-bar .cart-note { margin-top: 2px; }
.shorts-extra-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-mute);
}
.shorts-extra-cta { width: 100%; margin-top: 14px; }

.cart-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 22px;
}
.cart-step {
  width: 44px; height: 44px;
  border: 1px solid var(--line2-strong);
  border-radius: 12px;
  background: transparent;
  color: var(--fg);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.cart-step:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.cart-step:disabled { opacity: 0.35; cursor: not-allowed; }
.cart-qty {
  min-width: 56px;
  text-align: center;
  font-size: 28px;
  font-weight: 900;
  color: var(--fg);
}
.cart-total {
  text-align: center;
  margin-top: 18px;
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
}
.cart-note {
  text-align: center;
  margin-top: 4px;
  font-size: 12px;
  color: var(--fg-mute);
}
.cart-error {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 13px;
  text-align: center;
}

/* ───── Payment return ───── */
.pay-return .pay-title { text-align: center; }
.pay-spinner {
  width: 46px; height: 46px;
  margin: 0 auto 20px;
  border: 3px solid var(--line2-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: pay-spin 0.9s linear infinite;
}
@keyframes pay-spin { to { transform: rotate(360deg); } }

.btn--waiting {
  animation: btn-wait-pulse 1.2s ease-in-out infinite;
  cursor: progress;
}
@keyframes btn-wait-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.pay-icon-wait { font-size: 42px; text-align: center; margin-bottom: 14px; }
.pay-back { margin-top: 1.5rem; }

/* Adding shorts is available wherever an episode is still in the studio. Marked with
   the accent so it is findable, kept at pill weight so it never competes with the
   stage's own action. */
.btn-shorts--add { border-color: var(--y-border); color: var(--accent); }
.approval-add-shorts { margin-inline-end: auto; font-size: 13px; }

.shorts-finish-note {
  color: var(--accent);
  font-weight: 700;
}
.pay-ref {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--fg-dim);
}

/* Deliverables modal */
.deliv-grid { margin-top: 18px; }
.deliv-section { margin-bottom: 24px; }
.deliv-section:last-child { margin-bottom: 0; }
.deliv-section-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 12px;
}
.deliv-items {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.deliv-item {
  position: relative;
  display: grid;
  place-items: center;
  width: 140px;
  aspect-ratio: 16 / 10;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--line2);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}
.deliv-item:hover { border-color: var(--accent); transform: translateY(-2px); }
.deliv-item--wide { width: 176px; }
.deliv-play::before { content: '\25B6'; }
.deliv-item-label {
  position: absolute;
  bottom: 8px; right: 10px;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-soft);
  background: rgba(0,0,0,0.5);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px);
}
.deliv-play { font-size: 30px; color: var(--accent); }
.deliv-item--corrected { border-color: var(--accent); }
.deliv-item--corrected::after {
  content: '\2713 תיקון נשמר';
  position: absolute;
  top: 8px;
  right: 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--ink);
  background: var(--accent);
  padding: 3px 8px;
  border-radius: var(--r-pill);
}

/* Posting plan */
.plan-loading {
  margin-top: 24px;
  font-size: 13px;
  color: var(--fg-mute);
}
.plan-section { margin-top: 28px; }
.plan-intro {
  font-size: 13px;
  color: var(--fg-mute);
  margin: -4px 0 14px;
}
.plan-row {
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: rgba(0,0,0,0.25);
}
.plan-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.plan-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
}
.plan-title {
  flex: 1;
  font-weight: 600;
  font-size: 15px;
}
.plan-date {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--fg-mute);
}
.plan-caption {
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-soft);
  margin-bottom: 10px;
}
.plan-copy {
  background: none;
  border: 1px solid var(--line2);
  border-radius: var(--r-pill);
  color: var(--fg-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 6px 14px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.plan-copy:hover { border-color: var(--accent); color: var(--accent); }

/* Stills gallery — shared by the shorts modal and the deliverables modal */
.stills-section { margin-top: 24px; }
.stills-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.stills-download-all {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.stills-download-all:hover { text-decoration: underline; }
.stills-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.still-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--line2);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}
.still-tile:hover, .still-tile:focus-visible {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.still-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.still-dl {
  position: absolute;
  bottom: 6px; right: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--ink);
  background: var(--accent);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.still-tile:hover .still-dl,
.still-tile:focus-within .still-dl { opacity: 1; }
@media (hover: none) {
  .still-dl { opacity: 1; }  /* no hover on touch — the button must always be reachable */
}

/* Video modal */
.video-modal { max-width: 880px; }
/* The arrows sit BESIDE the media, never on top of it. The negative margin borrows the
   modal's own padding for them, so the frame keeps almost all of its width. */
.video-stage {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-inline: -26px;
}
.video-stage .video-iframe-wrap { flex: 1 1 auto; min-width: 0; }
.video-stage .video-iframe-wrap.is-image { flex: 0 1 auto; margin-inline: auto; }
.video-nav {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255,213,0,0.35);
  border-radius: 50%;
  background: rgba(255,213,0,0.08);
  color: var(--accent);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}
/* Drawn, not typed: ‹ and › are bidi-mirrored and point the wrong way in an RTL page. */
.video-nav svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.video-nav:hover, .video-nav:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
  box-shadow: 0 0 24px rgba(255,213,0,0.35);
}
.video-nav--next:hover { transform: translateX(-3px); }
.video-nav--prev:hover { transform: translateX(3px); }
/* Held, not removed: dropping it from the flow at the ends would shift the media sideways. */
.video-nav.is-off { visibility: hidden; }
/* The press itself, so the click answers before the new file has loaded. */
.video-nav:active { transform: scale(0.88); transition-duration: 0.06s; }
.video-nav.is-tapped { animation: video-nav-pulse 0.4s ease-out; }
@keyframes video-nav-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,213,0,0.55); }
  100% { box-shadow: 0 0 0 16px rgba(255,213,0,0); }
}

/* The new item arrives from the side it was reached from, so the direction of travel
   is visible rather than just a flicker. */
@keyframes video-slide-next {
  from { opacity: 0; transform: translateX(28px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes video-slide-prev {
  from { opacity: 0; transform: translateX(-28px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.video-stage.is-sliding-next .video-iframe-wrap {
  animation: video-slide-next 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.video-stage.is-sliding-prev .video-iframe-wrap {
  animation: video-slide-prev 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .video-stage.is-sliding-next .video-iframe-wrap,
  .video-stage.is-sliding-prev .video-iframe-wrap { animation: none; }
  .video-nav.is-tapped { animation: none; }
}
.video-iframe-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  margin: 16px 0;
}
.video-iframe-wrap iframe { width: 100%; height: 100%; border: 0; }
#videoImage {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 58vh;
  margin: 0 auto;
  border-radius: 12px;
  object-fit: contain;
}
/* Image thumbnail: the frame hugs the image (no black side bars) and never forces 16/9. */
.video-iframe-wrap.is-image {
  width: fit-content;
  max-width: 100%;
  aspect-ratio: auto !important;
  background: transparent;
  overflow: visible;
  margin: 12px auto;
}
.video-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.video-btn-approve,
.video-btn-note,
.video-btn-download {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  padding: 13px 20px;
  border: 1.5px solid transparent;
  border-radius: var(--r-btn);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.video-btn-approve,
.video-btn-note,
.video-btn-download {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}
.video-btn-approve:hover,
.video-btn-note:hover,
.video-btn-download:hover {
  background: #f2cf00;
  border-color: #f2cf00;
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(255,213,0,0.32);
}
.video-btn-approve:active,
.video-btn-note:active,
.video-btn-download:active { transform: translateY(0); }
.video-note-form {
  margin-top: 16px;
  padding: 18px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line2);
  border-radius: var(--r-card);
}
.video-note-textarea {
  width: 100%;
  min-height: 90px;
  margin-bottom: 12px;
}
.video-approval-form {
  margin-top: 16px;
  padding: 18px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line2);
  border-radius: var(--r-card);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.video-approval-label { font-weight: 700; font-size: 14px; }
.video-approval-hint { font-size: 13px; color: var(--fg-soft); }
.video-approval-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.approval-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line2);
}
.approval-round { font-weight: 700; font-size: 14px; color: var(--fg-soft); }
.approval-actions { display: flex; gap: 12px; }

.video-notes-list { margin-top: 18px; display: grid; gap: 10px; }
.video-note-item {
  padding: 12px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line2);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
}

/* ───── Slots picker (slots.html) ───── */
.sp-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  gap: 12px;
}
.sp-back {
  position: absolute;
  right: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  padding: 8px 14px;
  border: 1px solid var(--line2);
  border-radius: var(--r-pill);
  transition: all 0.2s;
}
.sp-back:hover { color: var(--accent); border-color: var(--accent); }
.sp-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 4cqw, 44px);
  letter-spacing: -0.025em;
  text-align: center;
  margin: 0;
  flex: 1;
}

.sp-outer {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: stretch;
}
.sp-card {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 32px;
  align-items: start;
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: 24px;
  padding: 28px;
  position: relative;
}

/* Calendar */
.sp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.sp-nav-btn {
  width: 40px; height: 40px;
  border: 1px solid var(--line2);
  border-radius: 50%;
  background: none;
  color: var(--fg);
  font-size: 18px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.2s;
}
.sp-nav-btn:hover { border-color: var(--accent); color: var(--accent); transform: scale(1.05); }
.sp-nav-btn:disabled { opacity: 0.25; cursor: not-allowed; }
.sp-nav-month {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
/* Both card columns must be allowed to shrink, otherwise the 7-column calendar's
   min-content width inflates the track and overflows the card on narrow screens. */
.sp-cal, .sp-slots { min-width: 0; }
.sp-wdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
.sp-wdays > * {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
  text-align: center;
  padding: 8px 0;
}
.sp-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 6px;
}
.sp-day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
  color: var(--fg);
  position: relative;
}
.sp-day:hover:not(.sp-day-off) {
  background: var(--y-surface);
  border-color: var(--y-border);
}
.sp-day-off { opacity: 0.25; cursor: not-allowed; background: none; }
.sp-day-today { color: var(--accent); }
.sp-day-avail::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(255,213,0,0.7);
}
.sp-day-sel {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(255,213,0,0.32);
}
.sp-day-sel::after { background: var(--ink); box-shadow: none; }

/* Slots column */
.sp-slots-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.sp-slots-hd > div:first-child {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.sp-slots-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.sp-slot-list { display: grid; gap: 10px; }
.sp-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border: 1.5px solid var(--line2);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
}
.sp-slot:hover { border-color: var(--accent); color: var(--accent); }
.sp-slot-sel {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink);
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(255,213,0,0.3);
}
.sp-slot-taken,
.sp-slot-na { opacity: 0.3; cursor: not-allowed; }
.sp-slot-taken:hover,
.sp-slot-na:hover { border-color: var(--line2); color: var(--fg-soft); transform: none; }
.sp-stime { letter-spacing: 0.16em; }
.sp-stag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.6;
}
.sp-empty {
  padding: 40px 0;
  text-align: center;
  color: var(--fg-mute);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Confirm bar */
.sp-confirm {
  position: sticky;
  bottom: 24px;
  margin-top: 28px;
  background: var(--card);
  border: 1px solid var(--y-border);
  border-radius: var(--r-card);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.sp-confirm-text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-soft);
}

/* Details (step 2) */
.sp-details-wrap { display: none; }
.sp-details-card {
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: 24px;
  padding: 36px;
  max-width: 580px;
  margin: 0 auto;
  text-align: center;
}
.sp-details-chosen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.sp-details-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 24px;
}
.sp-details-form { display: flex; flex-direction: column; gap: 18px; }
.sp-field { display: flex; flex-direction: column; gap: 6px; }
.sp-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.sp-required { color: var(--accent); }
.sp-input,
.sp-select {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.02);
  border: 1.5px solid var(--line2);
  border-radius: var(--r-input);
  color: var(--fg);
  text-align: center;
  transition: all 0.2s;
}
.sp-input:focus,
.sp-select:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255,213,0,0.04);
  box-shadow: 0 0 0 4px rgba(255,213,0,0.10);
}
.sp-input--error,
.sp-input--error:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px rgba(230,57,70,0.12);
}
.sp-field-error {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--danger);
  text-align: center;
}
.sp-guests { display: flex; flex-direction: column; gap: 8px; }
.sp-guest-row { display: flex; gap: 8px; align-items: center; }
.sp-guest-row .sp-input { flex: 1; }
.sp-guest-remove {
  width: 36px; height: 36px;
  border: 1px solid var(--line2);
  border-radius: 50%;
  background: none;
  color: var(--fg-soft);
  font-size: 18px;
  cursor: pointer;
}
.sp-guest-remove:hover { border-color: var(--danger); color: var(--danger); }
.sp-add-guest {
  align-self: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 14px;
  background: none;
  border: 1px dashed var(--line2-strong);
  border-radius: var(--r-pill);
  color: var(--fg-soft);
  cursor: pointer;
  transition: all 0.2s;
}
.sp-add-guest:hover { border-color: var(--accent); color: var(--accent); background: var(--y-surface); }
.sp-check-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  color: var(--fg-soft);
  line-height: 1.5;
}
.sp-link { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.sp-details-footer { display: flex; gap: 12px; margin-top: 12px; }
.sp-details-footer > * { flex: 1; }

/* Success state */
.sp-success {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 72px 44px;
  background: var(--card);
  border: 1px solid var(--y-border);
  border-radius: 28px;
  max-width: 540px;
  margin: 0 auto;
}
.sp-success-icon {
  display: grid;
  place-items: center;
  width: 116px; height: 116px;
  margin: 0 auto 28px;
  border-radius: 50%;
  background: var(--y-surface);
  border: 2px solid var(--accent);
  color: var(--accent);
  font-size: 54px;
  box-shadow: 0 0 60px rgba(255,213,0,0.35);
}
.sp-success-msg {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Success state: show only the confirmation, centered in the viewport. */
body.sp-done .sp-header { display: none; }
body.sp-done .sp-outer {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 5;
}

/* ───── Upload page ───── */
.upl-wrap {
  max-width: 580px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: 24px;
  padding: 36px;
}
.upl-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.upl-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.upl-star { color: var(--accent); }
.upl-sub {
  font-size: 12px;
  color: var(--fg-dim);
  margin-top: 4px;
  line-height: 1.5;
}
.upl-input,
.upl-textarea {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.02);
  border: 1.5px solid var(--line2);
  border-radius: var(--r-input);
  color: var(--fg);
  width: 100%;
  transition: all 0.2s;
}
.upl-input:focus,
.upl-textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255,213,0,0.04);
  box-shadow: 0 0 0 4px rgba(255,213,0,0.10);
}
.upl-textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.upl-check-row { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 24px; }
.upl-check-text { font-size: 14px; color: var(--fg-soft); line-height: 1.5; }
.upl-submit { width: 100%; }
.upl-success {
  display: none;
  text-align: center;
  padding: 50px 20px;
}
.upl-success-icon {
  display: grid;
  place-items: center;
  width: 84px; height: 84px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--y-surface);
  border: 2px solid var(--accent);
  color: var(--accent);
  font-size: 40px;
  box-shadow: 0 0 50px rgba(255,213,0,0.3);
}
.upl-success-msg {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  margin-bottom: 24px;
}

/* ───── Confirmed (booking success) ───── */
.page--centered {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: calc(100vh - 240px);
}
.confirmed-icon {
  display: grid;
  place-items: center;
  width: 120px; height: 120px;
  margin: 0 auto 32px;
  border-radius: 50%;
  background: var(--y-surface);
  border: 2px solid var(--accent);
  color: var(--accent);
  font-size: 56px;
  box-shadow:
    0 0 60px rgba(255,213,0,0.4),
    inset 0 0 30px rgba(255,213,0,0.08);
}
.confirmed-date {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 18px;
}
.confirmed-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-top: 16px;
}

/* ───── Tables (legacy) ───── */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}
th, td {
  text-align: right;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line2);
}
th {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* ───── Reduced motion ───── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  body::before { animation: none; opacity: 0.4; }
  .cursor-glow { display: none; }
  .reveal-init { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — Container queries (fires on canvas width)
   ═══════════════════════════════════════════════════════════════════════════ */
@container canvas (max-width: 720px) {
  .main { padding: 100px 18px 80px; }
  .nav-inner { padding: 16px 18px; }
  .nav-links {
    position: fixed;
    inset: 76px 0 0 0;
    flex-direction: column;
    align-items: stretch;
    padding: 28px 22px;
    background: rgba(10,10,10,0.96);
    backdrop-filter: blur(28px) saturate(1.4);
    border-top: 1px solid var(--line2);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    gap: 6px;
  }
  .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: all; }
  .nav-link {
    padding: 16px 12px;
    font-size: 14px;
    border-radius: var(--r-btn);
    border-bottom: 1px dashed var(--line2);
  }
  .nav-link:last-child { border-bottom: none; }
  .nav-link--cta {
    margin-top: 14px;
    padding: 18px 12px !important;
    text-align: center;
    font-size: 14px;
  }
  .hamburger { display: flex; }

  body::before { display: none; }
  .cursor-glow { display: none; }

  .page-header { margin-bottom: 36px; }
  .page-title { font-size: clamp(28px, 9.6cqw, 44px); line-height: 1.1; }
  .section { margin-bottom: 44px; }
  .section-title { font-size: 22px; }

  .cards { grid-template-columns: 1fr 1fr; gap: 12px; }
  .card { padding: 22px 18px; }
  .card-value { font-size: 32px; }

  .project-item { padding: 18px 18px; }
  .project-name { font-size: 16px; }
  .project-actions { width: 100%; justify-content: flex-end; }
  .btn-reschedule, .btn-shorts, .btn-revision, .btn-view-deliverables, .btn-cancel {
    padding: 7px 12px;
    font-size: 10px;
  }

  .sp-outer { gap: 18px; }
  .sp-card { grid-template-columns: 1fr; gap: 22px; padding: 22px 18px; }
  .sp-title { font-size: 28px; }
  .sp-day { font-size: 14px; border-radius: 8px; }
  .sp-slot { padding: 16px 18px; font-size: 14px; }
  .sp-details-card { padding: 28px 22px; }
  .sp-details-title { font-size: 22px; }
  .sp-details-footer { flex-direction: column; }
  .sp-confirm { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
  .sp-confirm-text { text-align: center; }

  .revision-modal, .cancel-modal, .shorts-modal, .deliv-modal, .video-modal {
    padding: 26px 20px;
    border-radius: 22px 22px 0 0;
    max-height: 92vh;
  }
  .revision-overlay, .cancel-overlay, .shorts-overlay, .deliv-overlay, .video-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .revision-modal-title, .cancel-modal-title, .video-modal-title { font-size: 22px; }
  .rev-video-row { flex-direction: column; gap: 6px; }
  .rev-video-label { padding-top: 0; flex: none; }
  .shorts-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
  .stills-gallery { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  /* Less padding to borrow on a phone, and a smaller target still beats overlaying. */
  .video-stage { margin-inline: -14px; gap: 2px; }
  .video-nav { width: 38px; height: 38px; }
  .video-nav svg { width: 17px; height: 17px; }
  .deliv-item { width: calc(50% - 6px); }
  .deliv-item--wide { width: 100%; }

  .upl-wrap { padding: 26px 20px; }
  .confirmed-icon { width: 96px; height: 96px; font-size: 44px; }
  .auth-card { padding: 36px 26px; }
  .auth-title { font-size: 28px; }
}

@container canvas (max-width: 420px) {
  .cards { grid-template-columns: 1fr; }
  .page-title { font-size: 28px; }
  .shorts-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
  .stills-gallery { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
  .deliv-item, .deliv-item--wide { width: 100%; }
}

/* ───── Fallback viewport-based queries (until .site-canvas is applied) ───── */
@media (max-width: 720px) {
  body::before { display: none; }
  .cursor-glow { display: none; }
  .hamburger { display: flex; }
  .nav-links {
    position: fixed;
    inset: 76px 0 0 0;
    flex-direction: column;
    align-items: stretch;
    padding: 28px 22px;
    background: rgba(10,10,10,0.96);
    backdrop-filter: blur(28px);
    border-top: 1px solid var(--line2);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    gap: 6px;
  }
  .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: all; }
  .main { padding: 100px 18px 80px; }
  .cards { grid-template-columns: 1fr 1fr; gap: 12px; }
  .sp-card { grid-template-columns: 1fr; gap: 22px; }
  .page-title { font-size: clamp(28px, 9.6vw, 44px); }
  .sp-details-footer { flex-direction: column; }
}

@media (max-width: 420px) {
  .cards { grid-template-columns: 1fr; }
}

/* ───── Admin Mode (inline editor) ───── */
.cuts-admin-editing .cuts-editable {
  outline: 1px dashed var(--y-border);
  outline-offset: 3px;
  border-radius: 4px;
  transition: outline-color 0.15s ease, background 0.15s ease;
  cursor: text;
}
.cuts-admin-editing .cuts-editable:hover {
  outline-color: var(--accent);
  background: rgba(255, 213, 0, 0.05);
}
.cuts-admin-editing .cuts-editable:focus {
  outline: 2px solid var(--accent);
  background: rgba(255, 213, 0, 0.07);
}
.cuts-admin-toolbar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--y-border);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
.cuts-admin-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--accent);
  padding-inline-end: 4px;
}
.cuts-admin-btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--line2, rgba(255, 255, 255, 0.12));
  background: transparent;
  color: var(--text, #fff);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cuts-admin-btn:hover { border-color: var(--accent); color: var(--accent); }
.cuts-admin-btn--primary {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
}
.cuts-admin-btn--primary:hover { color: var(--ink); filter: brightness(1.05); }
.cuts-admin-toolbar--dirty .cuts-admin-btn--primary {
  box-shadow: 0 0 0 3px rgba(255, 213, 0, 0.25);
}
.cuts-admin-status {
  font-size: 12px;
  color: var(--text-2, var(--text-3, #999));
  min-width: 70px;
}

/* selected element + center guide */
.cuts-admin-editing .cuts-selected {
  outline: 2px solid var(--accent) !important;
  outline-offset: 3px;
}
.cuts-center-guide {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed var(--accent);
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.cuts-center-guide.show { opacity: 0.8; }

/* properties panel */
.cuts-admin-panel {
  position: fixed;
  top: 70px;
  inset-inline-start: 16px;
  width: 250px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  z-index: 9999;
  background: var(--card);
  border: 1px solid var(--y-border);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  font-family: var(--font-body);
  transform: translateX(calc(-100% - 24px));
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.cuts-admin-panel.is-open { transform: none; opacity: 1; }
.cuts-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
  border-bottom: 1px solid var(--line2, rgba(255, 255, 255, 0.1));
}
.cuts-panel-x {
  background: none;
  border: none;
  color: var(--text-3, #999);
  cursor: pointer;
  font-size: 14px;
}
.cuts-panel-empty { padding: 18px 14px; font-size: 13px; color: var(--text-3, #999); }
.cuts-panel-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 14px; }
.cuts-ctl {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2, #bbb);
}
.cuts-ctl [data-out] { color: var(--accent); font-weight: 700; }
.cuts-ctl input[type="range"] { width: 100%; accent-color: var(--accent); }
.cuts-ctl select {
  background: var(--card-2, #1a1a1a);
  color: #fff;
  border: 1px solid var(--line2, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  padding: 7px 8px;
  font-size: 13px;
}
.cuts-ctl input[type="color"] {
  width: 100%;
  height: 30px;
  border: 1px solid var(--line2, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  background: none;
  cursor: pointer;
}
.cuts-ctl-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cuts-ctl-row .cuts-ctl { flex: 1; min-width: 70px; }
.cuts-tog {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--line2, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
}
.cuts-tog.is-on { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.cuts-sep { flex: 1; }
.cuts-mini {
  padding: 6px 10px;
  border: 1px solid var(--line2, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  background: transparent;
  color: var(--text-2, #bbb);
  cursor: pointer;
  font-size: 11px;
}
.cuts-mini--wide { width: 100%; margin-top: 2px; }
.cuts-mini:hover { border-color: var(--accent); color: var(--accent); }