/* Shared component classes used across templates (Tailwind CDN handles utilities; this file holds the small set of reusable "components" that would otherwise be repeated as inline <style> blocks on every page). */

.feature-card { border-radius: 1rem; border: 1px solid rgb(226 232 240); padding: 1.75rem; background: #fff; }
html.dark .feature-card { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); }
.feature-icon { font-size: 1.75rem; }
.feature-card h3 { font-weight: 700; margin-top: 0.75rem; }
.feature-card p { margin-top: 0.4rem; font-size: 0.875rem; color: rgb(100 116 139); }
html.dark .feature-card p { color: rgb(148 163 184); }

.step-card { border-radius: 1rem; padding: 1.75rem; background: rgb(248 250 252); border: 1px solid rgb(226 232 240); }
html.dark .step-card { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.1); }
.step-number { display:inline-flex; width:2.25rem; height:2.25rem; border-radius:9999px; align-items:center; justify-content:center; background: linear-gradient(135deg,#7c5cff,#ec4899); color:#fff; font-weight:700; font-size:0.9rem; }
.step-card h3 { font-weight:700; margin-top:0.75rem; }
.step-card p { margin-top:0.4rem; font-size:0.875rem; color: rgb(100 116 139); }
html.dark .step-card p { color: rgb(148 163 184); }

.usecase-card { border-radius: 1rem; padding: 1.75rem; text-align:center; font-size:1.75rem; border:1px solid rgb(226 232 240); }
html.dark .usecase-card { border-color: rgba(255,255,255,0.1); }
.usecase-card h3 { font-size:1rem; font-weight:700; margin-top:0.6rem; }
.usecase-card p { margin-top:0.3rem; font-size:0.8rem; color: rgb(100 116 139); }
html.dark .usecase-card p { color: rgb(148 163 184); }

.stat-card { border-radius: 1rem; border: 1px solid rgb(226 232 240); background: #fff; padding: 1.25rem; }
html.dark .stat-card { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); }
.stat-label { font-size: 0.8rem; color: rgb(100 116 139); font-weight: 500; }
html.dark .stat-label { color: rgb(148 163 184); }
.stat-value { font-size: 1.75rem; font-weight: 800; margin-top: 0.25rem; font-family: 'Lexend', sans-serif; }

.project-card { display:block; border-radius: 1rem; border: 1px solid rgb(226 232 240); background: #fff; padding: 0.9rem; transition: all .15s; }
html.dark .project-card { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); }
.project-card:hover { border-color: rgba(124,92,255,0.5); transform: translateY(-2px); }

.status-badge { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.2rem 0.55rem; border-radius: 9999px; }
.status-ready { background: rgba(16,185,129,0.15); color: #10b981; }
.status-processing { background: rgba(245,158,11,0.15); color: #f59e0b; }
.status-parsing,
.status-validating,
.status-normalizing,
.status-matching { background: rgba(245,158,11,0.15); color: #f59e0b; }
.status-pending { background: rgba(148,163,184,0.2); color: #94a3b8; }
.status-queued { background: rgba(148,163,184,0.2); color: #94a3b8; }
.status-unmatched { background: rgba(148,163,184,0.2); color: #94a3b8; }
.status-failed { background: rgba(239,68,68,0.15); color: #ef4444; }
.status-rejected { background: rgba(239,68,68,0.15); color: #ef4444; }
.status-completed { background: rgba(16,185,129,0.15); color: #10b981; }
.status-confirmed { background: rgba(16,185,129,0.15); color: #10b981; }
.status-modified { background: rgba(56,189,248,0.15); color: #38bdf8; }
.status-pending_review { background: rgba(245,158,11,0.15); color: #f59e0b; }
.status-insufficient_credits,
.status-needs_credits { background: rgba(245,158,11,0.18); color: #d97706; }
.status-draft,
.status-mapping { background: rgba(148,163,184,0.2); color: #94a3b8; }
.status-done { background: rgba(16,185,129,0.15); color: #10b981; }
.status-single { background: rgba(16,185,129,0.15); color: #10b981; }
.status-partial,
.status-multi,
.status-group { background: rgba(245,158,11,0.15); color: #f59e0b; }
.status-payment_only { background: rgba(239,68,68,0.12); color: #ef4444; }
.status-invoice_only { background: rgba(148,163,184,0.2); color: #94a3b8; }

.empty-state { text-align:center; border: 1px dashed rgb(203 213 225); border-radius: 1rem; padding: 3rem 1.5rem; }
html.dark .empty-state { border-color: rgba(255,255,255,0.15); }

.card { border-radius: 1rem; border: 1px solid rgb(226 232 240); background: #fff; }
html.dark .card { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); }

.btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; border-radius:9999px; background: #0f172a; color:#fff; font-weight:600; padding: 0.65rem 1.25rem; transition: opacity .15s; }
html.dark .btn-primary { background:#fff; color:#0f172a; }
.btn-primary:hover { opacity: 0.9; }
.btn-secondary { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; border-radius:9999px; border:1px solid rgb(203 213 225); font-weight:600; padding: 0.6rem 1.2rem; transition: background .15s; }
html.dark .btn-secondary { border-color: rgba(255,255,255,0.15); }
.btn-secondary:hover { background: rgb(241 245 249); }
html.dark .btn-secondary:hover { background: rgba(255,255,255,0.06); }

.input { width:100%; border-radius:0.6rem; border:1px solid rgb(203 213 225); padding:0.6rem 0.85rem; font-size:0.9rem; background:#fff; }
html.dark .input { border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.03); color:#fff; }
.input:focus { outline:none; border-color:#7c5cff; box-shadow: 0 0 0 3px rgba(124,92,255,0.15); }

.settings-tab { display:flex; align-items:center; gap:0.6rem; padding:0.55rem 0.9rem; border-radius:0.6rem; font-weight:500; font-size:0.9rem; color: rgb(100 116 139); }
html.dark .settings-tab { color: rgb(148 163 184); }
.settings-tab:hover { background: rgb(241 245 249); }
html.dark .settings-tab:hover { background: rgba(255,255,255,0.06); }
.settings-tab-active { background: rgba(124,92,255,0.1); color:#7c5cff !important; font-weight:600; }

.nav-link { display:flex; align-items:center; gap:0.65rem; padding:0.55rem 0.75rem; border-radius:0.6rem; color:rgb(71 85 105); font-weight:500; transition:all .15s; }
html.dark .nav-link { color:rgb(148 163 184); }
.nav-link:hover { background-color: rgb(241 245 249); color: rgb(15 23 42); }
html.dark .nav-link:hover { background-color: rgba(255,255,255,0.06); color:#fff; }
.nav-link-active { background: linear-gradient(90deg, rgba(124,92,255,0.15), rgba(236,72,153,0.08)); color: #7c5cff !important; font-weight:600; }

/* Landing "Comment ça marche": real screenshots in a browser-style frame. */
.how-shot { margin: 0; border-radius: 1rem; overflow: hidden; border: 1px solid rgb(226 232 240); background: #fff;
  box-shadow: 0 20px 50px -20px rgba(124, 92, 255, 0.35); }
html.dark .how-shot { border-color: rgba(255,255,255,0.12); box-shadow: 0 20px 50px -20px rgba(124, 92, 255, 0.45); }
.how-shot-bar { display: flex; gap: .35rem; padding: .6rem .8rem; background: rgb(241 245 249); border-bottom: 1px solid rgb(226 232 240); }
html.dark .how-shot-bar { background: rgb(30 30 46); border-bottom-color: rgba(255,255,255,0.1); }
.how-shot-bar span { width: .6rem; height: .6rem; border-radius: 9999px; background: rgb(203 213 225); }
html.dark .how-shot-bar span { background: rgb(71 85 105); }