/* Homepage background shared by all tool pages. */
body { background: #050914 !important; isolation: isolate; }
#bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
/* Match the homepage's translucent navy cards without fading their contents. */
:root {
  --card-bg: rgba(13, 20, 37, .42);
  --input-bg: rgba(8, 15, 29, .40);
  --border-color: #22385c;
}
.container, .chat-container, .chat-card, .chat-sidebar, .panel {
  background: rgba(13, 20, 37, .42);
  border-color: #22385c;
  box-shadow: 0 16px 48px #0003;
}
.section, .params-grid, .prompt-panel, .manual-prompt, .reference-card, .job-panel {
  background: rgba(10, 19, 35, .24);
  border-color: #22385c;
}
.scene-helper, .drop-zone {
  background: linear-gradient(135deg, rgba(20, 43, 62, .30), rgba(13, 20, 37, .22));
  border-color: #2c4c66;
}
.pro-prompt-preview .scene-helper { background: rgba(24, 30, 41, .32); }
.header, .container > header { border-color: #22385c; }
textarea, input, select { border-color: #304766; }
textarea:focus, input:focus, select:focus { border-color: #00cbd9; }
/* Homepage typography and cyan/navy theme, shared across every tool. */
:root {
  --bg-color: #050914;
  --accent-color: #00f0ff;
  --accent-hover: #113747;
  --accent-cyan: #00f0ff;
  --accent-glow: rgba(0, 240, 255, .3);
  --text-main: #f0f6ff;
  --text-color: #f0f6ff;
  --text-muted: #7f95b6;
  --border-color: #16243d;
  --border-highlight: #22385c;
  --tech-tag-bg: #111d33;
  --header-bg: rgba(13, 20, 37, .65);
  --user-bubble: #12303e;
  --bot-bubble: rgba(13, 20, 37, .85);
}
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--text-main); line-height: 1.6; }
h1 {
  font-size: clamp(2rem, 4.5vw, 3.8rem); font-weight: 900; letter-spacing: -.03em;
  color: #fff; background: none; -webkit-text-fill-color: #fff;
  text-shadow: 0 0 35px var(--accent-glow); line-height: 1.15;
}
.image-page h1, .video-page h1 { text-transform: none; }
h2, h3 { color: #fff; font-weight: 700; letter-spacing: -.015em; }
.eyebrow, .section-title { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.eyebrow { color: var(--accent-color); }
.section-title { color: var(--text-muted); }
.subtitle, .intro { color: var(--text-muted); line-height: 1.6; }
.container, .chat-container, .chat-card, .chat-sidebar, .panel { border-radius: 12px; border-color: var(--border-color); backdrop-filter: blur(1px); }
.section, .params-grid, .prompt-panel, .manual-prompt, .reference-card { border-radius: 12px; border-color: var(--border-highlight); }
label { color: var(--text-main); font-weight: 600; font-size: .85rem; }
button, .btn, .download-btn, .button, .r2v-page .secondary, #newChatBtn {
  background: rgba(0, 240, 255, .06); color: var(--accent-color);
  border: 1px solid #285065; border-radius: 8px; font-weight: 700;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
button:hover:not(:disabled), .btn:hover:not(.disabled), .download-btn:hover, .button:hover, #newChatBtn:hover {
  background: rgba(0, 240, 255, .12); border-color: var(--accent-color); box-shadow: 0 6px 24px -12px var(--accent-glow);
}
button:disabled, .btn.disabled { background: rgba(17, 29, 51, .65); color: #7f95b6; border-color: #22385c; }
.usage-badge, .pro-badge, .scene-pill, .scene-pill.ai, .badge, .limit-badge, .patreon-badge {
  font-family: ui-monospace, monospace; font-size: .75rem; border-radius: 4px;
}
.usage-badge { background: var(--tech-tag-bg); border-color: var(--border-highlight); color: var(--text-main); }
.scene-pill, .scene-pill.ai { background: var(--tech-tag-bg); border-color: var(--border-highlight); color: var(--accent-color); }
textarea, select, input:not([type="range"]):not([type="checkbox"]) { background: rgba(5, 9, 20, .42); color: var(--text-main); border-color: var(--border-highlight); border-radius: 8px; }
select option { background: #0d1425; color: var(--text-main); }
:where(a, button, input, textarea, select, [tabindex]):focus-visible { outline-color: var(--accent-color); }
input[type="range"] { accent-color: var(--accent-color); }
.message.user { background: #12303e; color: var(--text-main); border: 1px solid #285065; }
.message.assistant { background: rgba(13,20,37,.85); border-color: var(--border-highlight); }
#terms-of-service-btn, #terms-text { color: var(--text-muted) !important; }
@media(max-width:600px) { h1 { font-size: 2rem; } .chat-header h1 { font-size: 1.5rem; } }
.r2v-page h1 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.2; }