/* 5 Lobsters — AI 影像魔法工坊 */
:root {
  --primary: #e63946;
  --primary-dark: #c1121f;
  --secondary: #457b9d;
  --bg: #f8f9fa;
  --card-bg: #fff;
  --text: #1d3557;
  --text-light: #6c757d;
  --border: #e9ecef;
  --radius: 12px;
  --shadow: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
}

* { margin:0; padding:0; box-sizing:border-box; }

body { font-family: -apple-system, 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif; background:var(--bg); color:var(--text); line-height:1.6; }

.container { max-width:1100px; margin:0 auto; padding:0 20px; }

/* Navbar */
.navbar { background:var(--card-bg); box-shadow:var(--shadow); position:sticky; top:0; z-index:100; }
.nav-container { max-width:1100px; margin:0 auto; padding:12px 20px; display:flex; justify-content:space-between; align-items:center; }
.logo { font-size:1.4rem; font-weight:700; text-decoration:none; color:var(--text); }
.nav-links { display:flex; gap:24px; }
.nav-links a { text-decoration:none; color:var(--text-light); font-weight:500; padding:6px 12px; border-radius:8px; transition:all .2s; }
.nav-links a:hover, .nav-links a.active { color:var(--primary); background:rgba(230,57,70,0.08); }
.nav-toggle { display:none; background:none; border:none; font-size:1.5rem; cursor:pointer; }

/* Hero */
.hero { text-align:center; padding:80px 20px; background:linear-gradient(135deg, #e63946 0%, #f77f00 100%); color:#fff; }
.hero h1 { font-size:3rem; margin-bottom:16px; }
.hero-sub { font-size:1.3rem; opacity:.95; margin-bottom:32px; }
.hero-cta { display:flex; gap:16px; justify-content:center; margin-bottom:16px; }
.hero-note { font-size:.9rem; opacity:.8; }

/* Buttons */
.btn { display:inline-block; padding:12px 28px; border-radius:var(--radius); font-size:1rem; font-weight:600; text-decoration:none; cursor:pointer; border:none; transition:all .2s; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-dark); transform:translateY(-1px); }
.btn-secondary { background:#fff; color:var(--primary); border:2px solid var(--primary); }
.btn-secondary:hover { background:var(--primary); color:#fff; }
.btn-large { padding:16px 40px; font-size:1.1rem; width:100%; max-width:400px; margin:24px auto; display:block; }

/* Features */
.features { padding:80px 0; }
.features h2, .how-it-works h2, .testimonials h2, .faq h2 { text-align:center; font-size:2rem; margin-bottom:48px; }
.feature-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:24px; }
.feature-card { background:var(--card-bg); border-radius:var(--radius); padding:32px 24px; text-align:center; text-decoration:none; color:var(--text); box-shadow:var(--shadow); transition:all .3s; border:2px solid transparent; }
.feature-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--primary); }
.feature-icon { font-size:3rem; margin-bottom:16px; }
.feature-card h3 { font-size:1.2rem; margin-bottom:8px; }
.feature-card p { color:var(--text-light); font-size:.95rem; }

/* How it works */
.how-it-works { padding:80px 0; background:#fff; }
.steps { display:flex; justify-content:center; gap:48px; flex-wrap:wrap; }
.step { text-align:center; max-width:200px; }
.step-num { display:inline-flex; width:48px; height:48px; border-radius:50%; background:var(--primary); color:#fff; font-size:1.5rem; font-weight:700; align-items:center; justify-content:center; margin-bottom:16px; }

/* Testimonials */
.testimonials { padding:80px 0; }
.testimonial-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:24px; }
.testimonial { background:var(--card-bg); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); }
.testimonial p { margin-bottom:12px; font-style:italic; }
.testimonial .author { color:var(--text-light); font-size:.9rem; }

/* FAQ */
.faq { padding:80px 0; background:#fff; }
.faq-item { margin-bottom:24px; }
.faq-item h3 { margin-bottom:8px; color:var(--primary); }
.faq-item p { color:var(--text-light); }

/* Page header */
.page-header { background:linear-gradient(135deg, #e63946 0%, #f77f00 100%); color:#fff; padding:48px 0; text-align:center; }
.page-header h1 { font-size:2.5rem; margin-bottom:8px; }

/* Tool sections */
.tool-section { padding:48px 0; }

/* Upload boxes */
.upload-row { display:flex; gap:24px; margin-bottom:24px; }
.upload-box { flex:1; background:var(--card-bg); border:2px dashed var(--border); border-radius:var(--radius); padding:40px 24px; text-align:center; cursor:pointer; transition:all .2s; min-height:240px; display:flex; align-items:center; justify-content:center; }
.upload-box:hover { border-color:var(--primary); background:rgba(230,57,70,0.04); }
.upload-box.single { max-width:400px; margin:0 auto 24px; }
.upload-placeholder { display:flex; flex-direction:column; align-items:center; gap:8px; }
.upload-icon { font-size:3rem; }
.upload-hint { font-size:.85rem; color:var(--text-light); }
.preview-img { max-width:100%; max-height:300px; border-radius:8px; }

/* Options */
.options-row { display:flex; gap:24px; margin-bottom:24px; flex-wrap:wrap; }
.checkbox-label { display:flex; align-items:center; gap:8px; cursor:pointer; }
.option-group { display:flex; flex-direction:column; gap:6px; }
.option-group label { font-size:.85rem; color:var(--text-light); font-weight:600; }
.option-group select { padding:8px 12px; border:1px solid var(--border); border-radius:8px; font-size:1rem; }

/* Prompt */
.prompt-area { margin-bottom:24px; }
.prompt-area label { display:block; margin-bottom:8px; font-weight:600; }
.prompt-area textarea { width:100%; padding:12px; border:1px solid var(--border); border-radius:var(--radius); font-size:1rem; resize:vertical; font-family:inherit; }
.prompt-count { text-align:right; font-size:.85rem; color:var(--text-light); }

/* Style grid */
.style-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:16px; margin-bottom:24px; }
.style-card { cursor:pointer; }
.style-card input { display:none; }
.style-card-content { background:var(--card-bg); border:2px solid var(--border); border-radius:var(--radius); padding:20px; text-align:center; transition:all .2s; }
.style-card input:checked + .style-card-content { border-color:var(--primary); background:rgba(230,57,70,0.06); }
.style-emoji { font-size:2rem; display:block; margin-bottom:8px; }
.style-name { font-weight:600; display:block; }
.style-desc { font-size:.85rem; color:var(--text-light); }

/* Result */
.result-area { margin-top:32px; text-align:center; }
.result-area h3 { margin-bottom:16px; }
.result-container { margin-bottom:16px; }
.result-img { max-width:100%; border-radius:var(--radius); box-shadow:var(--shadow-lg); }
.result-video { max-width:100%; border-radius:var(--radius); box-shadow:var(--shadow-lg); }

/* Loading */
.loading { text-align:center; padding:48px; }
.spinner { width:48px; height:48px; border:4px solid var(--border); border-top-color:var(--primary); border-radius:50%; margin:0 auto 16px; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Pricing */
.pricing-section { padding:48px 0; }
.pricing-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:24px; margin-bottom:64px; }
.pricing-card { background:var(--card-bg); border-radius:var(--radius); padding:32px 24px; text-align:center; box-shadow:var(--shadow); position:relative; border:2px solid transparent; transition:all .3s; }
.pricing-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.pricing-popular { border-color:var(--primary); }
.pricing-badge { display:inline-block; background:var(--secondary); color:#fff; padding:4px 16px; border-radius:20px; font-size:.8rem; font-weight:600; margin-bottom:16px; }
.pricing-badge.popular { background:var(--primary); }
.pricing-card h3 { font-size:1.3rem; margin-bottom:16px; }
.price { margin-bottom:24px; }
.price-amount { font-size:2.5rem; font-weight:700; color:var(--text); }
.price-period { font-size:1rem; color:var(--text-light); margin-left:4px; }
.pricing-features { list-style:none; text-align:left; margin-bottom:24px; }
.pricing-features li { padding:8px 0; border-bottom:1px solid var(--border); font-size:.95rem; }
.pricing-features li:before { content:'✓ '; color:#28a745; font-weight:700; }
.credits-table { margin-bottom:48px; }
.credits-table h2 { text-align:center; margin-bottom:24px; }
.pricing-table { width:100%; border-collapse:collapse; background:var(--card-bg); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.pricing-table th, .pricing-table td { padding:14px 20px; text-align:left; border-bottom:1px solid var(--border); }
.pricing-table th { background:var(--text); color:#fff; font-weight:600; }
.pricing-table tbody tr:hover { background:rgba(230,57,70,0.04); }

/* Action select */
.action-select { display:flex; gap:24px; margin-bottom:20px; }
.action-select label { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:1.1rem; font-weight:600; }
.action-select input { width:20px; height:20px; cursor:pointer; }

/* Footer */
footer { background:var(--text); color:#fff; padding:32px 0; text-align:center; }
footer p { margin-bottom:4px; opacity:.8; font-size:.9rem; }

/* Responsive */
@media (max-width:768px) {
  .hero h1 { font-size:2rem; }
  .hero-sub { font-size:1rem; }
  .hero-cta { flex-direction:column; }
  .nav-toggle { display:block; }
  .nav-links { display:none; position:absolute; top:100%; left:0; right:0; background:#fff; flex-direction:column; padding:16px; box-shadow:var(--shadow); }
  .nav-links.show { display:flex; }
  .upload-row { flex-direction:column; }
  .steps { gap:24px; }
}