:root {
  --bg: #fbf7f1;
  --paper: #ffffff;
  --line: #eadfd3;
  --ink: #2b2927;
  --navy: #425265;
  --muted: #81776d;
  --accent: #f08972;
  --accent-deep: #9d4b35;
  --accent-soft: #fbddc8;
  --shadow: 0 18px 44px rgba(75, 55, 39, 0.09);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 0%, rgba(240, 137, 114, 0.13), transparent 28%),
    linear-gradient(180deg, #fffaf4 0%, var(--bg) 100%);
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
  line-height: 1.7;
}

button, input, textarea, select { font: inherit; }
button { color: inherit; }

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 0 20px;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(66, 82, 101, 0.12);
  backdrop-filter: blur(12px);
}

.brand { color: var(--accent-deep); font-weight: 800; letter-spacing: 0.12em; }
.save-status { color: var(--muted); font-size: 12px; }
.save-status.is-error { color: #b54137; }

.editor-shell { width: min(100% - 24px, 760px); margin: 18px auto 130px; }
.editor-hero, .movie-panel, .section-card, .loading-card {
  margin-bottom: 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow);
}

.editor-hero { padding: clamp(22px, 5vw, 34px); text-align: center; }
.editor-hero h1 { margin: 4px 0 8px; color: var(--navy); font-size: clamp(30px, 8vw, 46px); }
.editor-hero p:last-child { margin: 0; color: var(--muted); font-size: 14px; }
.eyebrow { margin: 0; color: var(--accent); font-size: 11px; letter-spacing: 0.2em; }

.movie-panel { display: grid; gap: 14px; padding: clamp(18px, 4vw, 26px); }
.panel-label {
  padding: 12px 14px;
  border-radius: 6px;
  background: #f5f0ec;
  color: var(--navy);
  font-size: 18px;
  font-weight: 700;
}
.template-label { color: var(--muted); font-size: 13px; }
.movie-panel select {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}
.sample-frame { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #222; }
.sample-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

.sections { display: grid; gap: 18px; }
.loading-card { padding: 28px; color: var(--muted); text-align: center; }
.section-card { padding: 0; overflow: hidden; }
.section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 66px;
  padding: 0 18px;
  border: 0;
  background: #f5f0ec;
  color: var(--navy);
  font-weight: 800;
  cursor: pointer;
  text-align: left;
}
.section-toggle::after { content: "›"; order: 3; font-size: 34px; line-height: 1; transition: transform 160ms ease; }
.section-card.open .section-toggle::after { transform: rotate(90deg); }
.section-count {
  margin-left: auto;
  margin-right: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(66, 82, 101, 0.1);
  font-size: 12px;
}
.section-body { display: none; padding: 18px; }
.section-card.open .section-body { display: block; }
.section-title { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; color: var(--navy); font-size: 22px; }
.section-title::before { content: ""; width: 5px; height: 24px; border-radius: 999px; background: var(--navy); }
.section-guide { margin: 0; color: var(--muted); font-size: 13px; }
.slots { display: grid; gap: 14px; margin-top: 18px; }

.slot {
  position: relative;
  padding: 12px;
  border: 1px solid rgba(234, 223, 211, 0.9);
  border-radius: 16px;
  background: #f2eadc;
}
.slot-top { display: flex; align-items: center; justify-content: space-between; min-height: 28px; }
.slot-top strong { color: var(--navy); font-size: 15px; }
.drag-handle {
  display: grid;
  flex: 0 0 auto;
  width: 42px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(66, 82, 101, 0.1);
  color: var(--navy);
  cursor: grab;
  font-size: 20px;
  line-height: 1;
  place-items: center;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.drag-handle span { pointer-events: none; }
.drag-handle:active { cursor: grabbing; }
.sequence-placeholder {
  position: relative;
  border: 2px dashed rgba(240, 137, 114, 0.75);
  border-radius: 16px;
  background: rgba(251, 221, 200, 0.46);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.56);
  animation: placeholder-pulse 900ms ease-in-out infinite alternate;
}
.sequence-placeholder::after {
  position: absolute;
  inset: 0;
  display: grid;
  color: var(--accent-deep);
  content: "ここに移動";
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  place-items: center;
}
.drag-ghost {
  position: fixed;
  z-index: 100;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.97;
  transform: rotate(-1deg) scale(1.025);
  transform-origin: center;
  box-shadow: 0 26px 58px rgba(75, 55, 39, 0.28);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  will-change: top, left, transform;
}
.drag-ghost.is-dropping {
  transition: top 120ms ease-out, left 120ms ease-out, transform 120ms ease-out, box-shadow 120ms ease-out;
  transform: rotate(0) scale(1);
  box-shadow: 0 8px 20px rgba(75, 55, 39, 0.14);
}
body.is-sorting { cursor: grabbing; user-select: none; }
body.is-sorting .drag-handle { cursor: grabbing; }
@keyframes placeholder-pulse {
  from { background-color: rgba(251, 221, 200, 0.3); }
  to { background-color: rgba(251, 221, 200, 0.62); }
}
.scene-content { display: grid; gap: 10px; margin-top: 10px; }
.scene-photos { display: grid; gap: 10px; }
.scene-photos.multi-photo { grid-template-columns: 1fr 1fr; }
.photo-entry { position: relative; min-width: 0; }
.photo-entry.is-busy { opacity: 0.55; pointer-events: none; }
.photo-picker {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(66, 82, 101, 0.14);
  border-radius: 12px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
}
.photo-picker.has-image.adjust-enabled { cursor: grab; touch-action: none; }
.photo-picker.has-image.is-adjusting { cursor: grabbing; }
.photo-picker img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
  max-height: none;
  transform-origin: center;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}
.photo-picker span { font-size: 13px; letter-spacing: 0.05em; }
.crop-hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: none;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(43, 41, 39, 0.68);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
}
.photo-picker.adjust-enabled .crop-hint { display: inline-flex; }
.adjust-done {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(66, 82, 101, 0.94);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.photo-clear {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(43, 41, 39, 0.72);
  color: #fff;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.comment-grid { display: grid; gap: 8px; }
.comment-grid label { color: var(--muted); font-size: 12px; }
.text-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  resize: vertical;
}
.text-input:focus { border-color: var(--accent); outline: 3px solid rgba(240, 137, 114, 0.18); }
.title-slot .comment-grid { margin-top: 10px; }
.fatal-error { padding: 20px; border-radius: 16px; background: #fff; color: #b54137; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(35, 37, 38, 0.46);
  backdrop-filter: blur(3px);
}
.modal[hidden] { display: none; }
.modal-card {
  display: grid;
  gap: 10px;
  width: min(100%, 380px);
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(35, 37, 38, 0.22);
}
.menu-button {
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-weight: 700;
  cursor: pointer;
}
.menu-button--soft { background: #f5f0ec; color: var(--muted); }

.editor-actions {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  padding: 10px 14px max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(66, 82, 101, 0.12);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
}
.editor-actions-inner { display: grid; width: min(100%, 760px); margin: 0 auto; gap: 8px; }
.editor-action-buttons { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 10px; }
.editor-action-buttons .primary-button { margin: 0; }
.editor-action-buttons .secondary-button:disabled { opacity: 0.45; }
.editor-preview-button { margin: 0; box-shadow: 0 10px 24px rgba(157, 75, 53, 0.2); }
.editor-previous-preview {
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  text-underline-offset: 3px;
}
.preview-confirm-card { gap: 14px; padding: 24px; }
.preview-confirm-card h2 { margin: 0; color: var(--navy); font-size: 26px; }
.preview-notes { display: grid; gap: 8px; margin: 0; padding-left: 1.25em; color: var(--muted); font-size: 13px; }
.confirm-check { display: flex; align-items: flex-start; gap: 9px; padding: 12px; border-radius: 10px; background: #f5f0ec; font-size: 13px; }
.confirm-check input { width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--accent); }
.confirm-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 10px; }
.confirm-actions .primary-button { margin: 0; }
.secondary-button {
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
}

.preview-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 3px 12px;
  border-radius: 999px;
  background: #f5f0ec;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.preview-status-badge.is-processing { background: var(--accent-soft); color: var(--accent-deep); }
.preview-status-badge.is-done { background: #dceee2; color: #316547; }
.preview-status-badge.is-error { background: #f8dfdc; color: #a33e35; }
.preview-shell { width: min(100% - 24px, 760px); margin: 18px auto 60px; }
.preview-hero {
  margin-bottom: 18px;
  padding: clamp(26px, 7vw, 44px) 22px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--paper);
  box-shadow: var(--shadow);
  text-align: center;
}
.preview-hero h1 { margin: 5px 0 8px; color: var(--navy); font-size: clamp(25px, 7vw, 40px); line-height: 1.35; }
.preview-hero p:last-child { margin: 0; color: var(--muted); font-size: 14px; }
.preview-card {
  min-height: 280px;
  padding: clamp(16px, 4vw, 26px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.preview-pending, .preview-error {
  display: grid;
  min-height: 230px;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 26px 18px;
  border-radius: 17px;
  background: linear-gradient(145deg, #5b6470, #7c7976);
  color: #fff;
  text-align: center;
}
.preview-pending strong, .preview-error strong { font-size: clamp(22px, 6vw, 32px); }
.preview-pending p, .preview-error p { margin: 0; font-size: 13px; }
.render-spinner {
  width: 58px;
  height: 58px;
  border: 4px solid rgba(255, 255, 255, 0.28);
  border-top-color: #fff;
  border-radius: 50%;
  animation: render-spin 900ms linear infinite;
}
@keyframes render-spin { to { transform: rotate(360deg); } }
.preview-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  background: #252525;
}
.preview-video-wrap video { display: block; width: 100%; height: 100%; background: #000; object-fit: contain; }
.preview-video-loading { position: absolute; inset: 0; display: grid; padding: 20px; color: #fff; font-size: 13px; place-items: center; }
.preview-error { background: #f8ebe7; color: #923e35; }
.preview-error .secondary-button { min-width: 170px; margin-top: 8px; }
.preview-actions { display: grid; gap: 10px; margin-top: 18px; }
.preview-actions.is-done { grid-template-columns: 1fr 1.25fr; }
.primary-link,
.secondary-link {
  display: grid;
  min-height: 52px;
  padding: 0 20px;
  border: 1px solid var(--navy);
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  place-items: center;
}
.primary-link {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 10px 24px rgba(157, 75, 53, 0.2);
}
.primary-link.is-disabled { pointer-events: none; opacity: 0.45; }
.purchase-dialog-card { width: min(100%, 440px); padding: clamp(20px, 5vw, 28px); }
.purchase-dialog-card h2 { margin: 4px 0 2px; color: var(--navy); font-size: clamp(20px, 5vw, 26px); line-height: 1.5; }
.purchase-dialog-card > p:not(.eyebrow, .purchase-code-message) { margin: 0; color: var(--muted); font-size: 13px; }
.purchase-code-row { display: grid; gap: 10px; margin-top: 10px; }
.purchase-code-row strong {
  display: grid;
  min-height: 52px;
  padding: 8px 12px;
  border: 1px dashed var(--accent);
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(17px, 5vw, 22px);
  letter-spacing: 0.04em;
  place-items: center;
}
.purchase-dialog-card .primary-button { min-height: 52px; margin: 0; cursor: pointer; }
.purchase-dialog-card .primary-button:disabled { cursor: wait; opacity: 0.45; }
.purchase-code-message { min-height: 1.6em; margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.header-text-link { color: var(--navy); font-size: 13px; font-weight: 700; text-decoration: none; }
.delivery-ready { display: grid; gap: 14px; padding: clamp(24px, 7vw, 46px) 18px; text-align: center; }
.delivery-ready strong { color: var(--navy); font-size: clamp(22px, 6vw, 32px); }
.delivery-ready p { margin: 0; color: var(--muted); font-size: 13px; }
.delivery-ready .primary-link { width: min(100%, 360px); margin: 8px auto 0; }

.admin-page { min-height: 100vh; }
.admin-shell { display: grid; width: min(100% - 24px, 680px); gap: 18px; margin: 24px auto 80px; }
.admin-card { padding: clamp(22px, 6vw, 34px); border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: var(--shadow); }
.admin-card h1, .admin-card h2 { margin: 4px 0 8px; color: var(--navy); }
.admin-card > p:not(.eyebrow, .message) { margin: 0; color: var(--muted); font-size: 13px; }
.admin-form { display: grid; gap: 15px; margin-top: 22px; }
.admin-form label:not(.confirm-check) { display: grid; gap: 6px; color: var(--navy); font-size: 13px; font-weight: 700; }
.admin-form input[type="text"], .admin-form input[type="password"], .admin-form select { min-height: 50px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.purchase-result-list { display: grid; gap: 0; margin: 18px 0 0; }
.purchase-result-list div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.purchase-result-list dt { color: var(--muted); font-size: 12px; }
.purchase-result-list dd { margin: 0; overflow-wrap: anywhere; color: var(--navy); font-weight: 700; }
.admin-preview-open { width: 100%; margin-top: 18px; }
.admin-preview-panel {
  overflow: hidden;
  margin-top: 14px;
  border-radius: 14px;
  background: #000;
  aspect-ratio: 16 / 9;
}
.admin-preview-panel[hidden] { display: none; }
.admin-preview-panel video { display: block; width: 100%; height: 100%; object-fit: contain; }

.start-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at top left, #fff 0, var(--bg) 58%, var(--accent-soft) 150%);
}
.start-card { width: min(100%, 520px); padding: 36px 28px; background: rgba(255,255,255,0.94); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
.start-card h1 { margin: 4px 0 12px; color: var(--navy); font-size: 34px; }
.start-card > p:not(.eyebrow, .message) { color: var(--muted); }
.primary-button { width: 100%; min-height: 52px; margin-top: 16px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; }
.primary-button:disabled { opacity: 0.45; }
.message { color: #b54137; font-size: 13px; }

.header-text-button {
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.auth-page, .account-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 0%, rgba(240, 137, 114, 0.16), transparent 30%),
    linear-gradient(180deg, #fffaf4 0%, var(--bg) 100%);
}

.auth-page { overflow-x: hidden; }

.auth-shell {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  padding: 28px 18px;
  place-items: center;
}

.auth-card {
  width: min(100%, 440px);
  max-width: 100%;
  min-width: 0;
  padding: clamp(28px, 7vw, 44px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
}

.auth-brand {
  margin: 0 0 30px;
  color: var(--accent-deep);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.auth-card > *, .verification-panel > * { max-width: 100%; min-width: 0; }
.auth-card h1 {
  margin: 5px 0 10px;
  overflow-wrap: anywhere;
  color: var(--navy);
  font-size: clamp(28px, 8vw, 38px);
  line-height: 1.4;
}
.auth-guide { margin: 0; color: var(--muted); font-size: 14px; }
.auth-form { display: grid; gap: 16px; margin-top: 26px; }
.auth-form, .auth-form label, .auth-form label > span { min-width: 0; }
.auth-guide, .auth-form label > span, .auth-card .message { overflow-wrap: anywhere; }
.auth-form label { display: grid; gap: 6px; color: var(--navy); font-size: 13px; font-weight: 700; }
.auth-form input {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  font-size: 16px;
}
.auth-form input:focus { border-color: var(--accent); outline: 3px solid rgba(240, 137, 114, 0.18); }
.auth-form small { color: var(--muted); font-size: 11px; font-weight: 400; }
.auth-form .legal-consent {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
}
.auth-form .legal-consent input {
  width: 18px;
  min-height: 18px;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--accent);
}
.legal-consent a, .purchase-legal-note a { color: var(--navy); text-underline-offset: 3px; }
.auth-form .primary-button { margin-top: 4px; cursor: pointer; }
.auth-card .message { min-height: 1.7em; margin: 12px 0 0; }
.auth-switch {
  display: block;
  margin: 6px auto 0;
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth-sub-link {
  display: block;
  width: fit-content;
  margin: 10px auto 0;
  color: var(--navy);
  font-size: 13px;
  text-align: center;
  text-underline-offset: 3px;
}
.auth-message-neutral { color: var(--navy); }
.verification-panel { display: grid; width: 100%; min-width: 0; gap: 12px; margin-top: 24px; }
.verification-panel[hidden] { display: none; }
.verification-panel .secondary-button { width: 100%; max-width: 100%; white-space: normal; }
.auth-primary-link {
  display: grid;
  place-items: center;
  text-decoration: none;
}

.account-shell { width: min(100% - 24px, 760px); margin: 18px auto 80px; }
.account-hero, .account-section {
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.account-hero { padding: clamp(28px, 7vw, 46px) 22px; text-align: center; }
.account-hero h1 { margin: 5px 0 8px; color: var(--navy); font-size: clamp(28px, 8vw, 42px); }
.account-hero p:last-child { margin: 0; color: var(--muted); font-size: 14px; }
.account-section { padding: clamp(18px, 5vw, 30px); }
.account-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.account-section-heading h2 { margin: 3px 0 0; color: var(--navy); font-size: clamp(20px, 5vw, 27px); }
.compact-primary-button {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}
.compact-primary-button:disabled { opacity: 0.45; }
.template-chooser {
  display: grid;
  gap: 12px;
  margin-top: 20px;
  padding: 16px;
  border-radius: 16px;
  background: #f7f3ef;
}
.template-chooser-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.template-chooser-heading strong { color: var(--navy); font-size: 15px; }
.template-chooser-heading button {
  padding: 5px 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.template-choice-list { display: grid; gap: 10px; }
.template-choice-card {
  display: grid;
  gap: 10px;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  text-align: left;
}
.template-choice-name { color: var(--navy); font-size: 18px; font-weight: 800; }
.template-choice-name small {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 10px;
  vertical-align: middle;
}
.template-choice-description { color: var(--navy); font-size: 13px; line-height: 1.75; }
.template-choice-sample {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background: #eeeae6;
}
.template-choice-sample iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.template-choice-action {
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
}
.template-choice-action:disabled { cursor: wait; opacity: 0.5; }
.project-list { display: grid; gap: 12px; margin-top: 22px; }
.data-retention-notice {
  display: grid;
  gap: 6px;
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 1px solid #eadfd6;
  border-radius: 12px;
  background: #fffaf6;
  color: var(--navy);
}
.data-retention-notice strong { font-size: 14px; }
.data-retention-notice p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}
.delivery-retention-note {
  width: min(100%, 420px);
  margin: 4px auto 0 !important;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.project-room-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 104px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
}
.project-room-card strong { display: block; color: var(--navy); font-size: 21px; }
.project-room-card small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.project-room-arrow { color: #c9c5c0; font-size: 38px; line-height: 1; }
.empty-projects, .account-loading {
  padding: 26px 18px;
  border-radius: 16px;
  background: #f7f3ef;
  color: var(--muted);
  text-align: center;
}
.empty-projects strong { color: var(--navy); }
.empty-projects p { margin: 5px 0 0; font-size: 13px; }
.account-section > .message { margin-bottom: 0; }

.legal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  width: min(100% - 32px, 760px);
  margin: 34px auto 24px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.legal-footer a { color: inherit; text-underline-offset: 3px; }
.legal-footer a:hover { color: var(--navy); }
.editor-legal-footer { margin-bottom: 130px; }
.purchase-legal-note { color: var(--muted); font-size: 12px; }

.legal-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 0%, rgba(240, 137, 114, 0.12), transparent 26%),
    linear-gradient(180deg, #fffaf4 0%, var(--bg) 100%);
}
.legal-shell { width: min(100% - 24px, 820px); margin: 24px auto 60px; }
.legal-card {
  padding: clamp(24px, 6vw, 54px);
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.legal-card h1 {
  margin: 5px 0 4px;
  color: var(--navy);
  font-size: clamp(28px, 7vw, 42px);
  line-height: 1.35;
}
.legal-updated { margin: 0 0 28px; color: var(--muted); font-size: 12px; }
.legal-card section { margin-top: 34px; }
.legal-card h2 {
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  color: var(--navy);
  font-size: clamp(18px, 4vw, 22px);
}
.legal-card p, .legal-card li { color: #514c47; font-size: 14px; line-height: 1.9; }
.legal-card p { margin: 10px 0 0; }
.legal-card ul { margin: 10px 0 0; padding-left: 1.35em; }
.legal-card a { color: var(--navy); text-underline-offset: 3px; }

@media (max-width: 520px) {
  .editor-shell { width: min(100% - 18px, 760px); margin-top: 10px; }
  .editor-hero, .movie-panel { border-radius: 20px; }
  .section-card { border-radius: 16px; }
  .section-body { padding: 14px 10px; }
  .scene-photos.multi-photo { grid-template-columns: 1fr; }
  .auth-shell { min-height: auto; align-items: start; padding: 12px 10px 24px; }
  .auth-card { padding: 22px 16px; border-radius: 20px; }
  .auth-brand { margin-bottom: 22px; }
  .auth-card h1 { font-size: 28px; }
  .verification-pending .auth-card h1 { font-size: 24px; }
  .account-shell { width: min(100% - 18px, 760px); margin-top: 10px; }
  .account-hero, .account-section { border-radius: 20px; }
  .account-section-heading { align-items: flex-end; }
  .editor-action-buttons { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .legal-shell { width: min(100% - 16px, 820px); margin-top: 10px; }
  .legal-card { border-radius: 20px; }
}