/* public/css/style.css */
:root {
  --primary: #0d6efd;
  --muted: #6c757d;
  --bg: #f8f9fa;
}
body { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: var(--bg); }
.hero {
  min-height: 100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  color:#fff;
  background: linear-gradient(135deg,#00c6ff 0%, #0072ff 100%);
  text-align:center;
}
.hero h1 { font-size:48px; margin:0; font-weight:700; }
.hero p { font-size:18px; margin:0; opacity:0.95; }
.btn { padding:10px 18px; border-radius:8px; background:#fff; color:#0072ff; text-decoration:none; font-weight:600; }
.card { border-radius:12px; }
#previewArea img, #previewArea video { max-width:120px; margin-right:8px; margin-bottom:8px; border-radius:6px; }