/* 123rdy.com — Dark Mode App Styles */
:root {
    --rdy-blue: #3b82f6;
    --rdy-purple: #8b5cf6;
    --rdy-pink: #ec4899;
    --rdy-bg: #0a0a0f;
    --rdy-surface: #111118;
    --rdy-card: #16161f;
    --rdy-border: #1e1e2e;
    --rdy-text: #e4e4ec;
    --rdy-text-light: #7a7a90;
    --rdy-text-dim: #55556a;
    --rdy-radius: 12px;
    --rdy-gradient: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
    --rdy-glow-blue: rgba(59,130,246,0.15);
    --rdy-glow-purple: rgba(139,92,246,0.15);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', -apple-system, sans-serif; color: var(--rdy-text); background: var(--rdy-bg); line-height: 1.6; overflow-x: hidden; }
a { color: var(--rdy-blue); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--rdy-purple); }
::selection { background: rgba(139,92,246,0.3); color: #fff; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--rdy-bg); }
::-webkit-scrollbar-thumb { background: #2a2a3a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a4a; }

/* ─── Top Bar ──────────────────────────────────────────── */
#top-bar { background: rgba(10,10,15,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--rdy-border); position: sticky; top: 0; z-index: 1000; }
.top-bar-inner { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; height: 56px; display: flex; align-items: center; gap: 2rem; }

.logo { display: flex; align-items: center; font-weight: 800; font-size: 1.35rem; gap: 6px; }
.logo-icon { flex-shrink: 0; }
.logo-text { background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.02em; }
.logo-rdy { -webkit-text-fill-color: var(--rdy-text); }

#step-indicator { display: none; align-items: center; gap: 0.5rem; margin-left: auto; }
#step-indicator.visible { display: flex; }
.step { font-size: 0.85rem; color: var(--rdy-text-dim); font-weight: 500; display: flex; align-items: center; gap: 0.35rem; }
.step.active { color: var(--rdy-blue); font-weight: 600; }
.step.completed { color: var(--rdy-purple); }
.step-num { width: 22px; height: 22px; border-radius: 50%; background: var(--rdy-border); color: var(--rdy-text-dim); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; }
.step.active .step-num { background: var(--rdy-blue); color: #fff; }
.step.completed .step-num { background: var(--rdy-purple); color: #fff; }
.step-arrow { color: var(--rdy-border); font-size: 0.8rem; }

#user-area { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
#oomph-display { font-size: 0.8rem; font-weight: 600; color: var(--rdy-purple); background: rgba(139,92,246,0.1); padding: 0.3rem 0.75rem; border-radius: 20px; }
.btn-small { font-size: 0.8rem; padding: 0.35rem 0.85rem; border-radius: 6px; font-weight: 500; color: var(--rdy-text-light); border: 1px solid var(--rdy-border); cursor: pointer; transition: all 0.2s; background: none; }
.btn-small:hover { border-color: var(--rdy-blue); color: var(--rdy-blue); }
.btn-primary-small { background: var(--rdy-blue); color: #fff !important; border-color: var(--rdy-blue); }
.btn-primary-small:hover { background: #2563eb; }
/* Oomph icon */
.oomph-icon { display: inline-block; width: 1em; height: 1em; background: url('/img/oomph.svg') center/contain no-repeat; vertical-align: -0.1em; }
.oomph-icon-lg { width: 1.25em; height: 1.25em; }

/* Hamburger menu */
.hamburger-btn { background: none; border: 1px solid var(--rdy-border); color: var(--rdy-text-light); width: 36px; height: 36px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.hamburger-btn:hover { border-color: var(--rdy-blue); color: var(--rdy-text); }
.hamburger-menu { display: none; position: absolute; top: 100%; right: 0; margin-top: 4px; min-width: 200px; background: var(--rdy-card); border: 1px solid var(--rdy-border); border-radius: var(--rdy-radius); box-shadow: 0 8px 30px rgba(0,0,0,0.4); overflow: hidden; z-index: 1001; }
.hamburger-menu.open { display: block; }
.hamburger-menu a { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem; color: var(--rdy-text-light); font-size: 0.85rem; font-weight: 500; transition: all 0.15s; }
.hamburger-menu a:hover { background: var(--rdy-surface); color: var(--rdy-text); }
.hamburger-menu .hm-logout { border-top: 1px solid var(--rdy-border); color: #ef4444; }
.hamburger-menu .hm-logout:hover { background: rgba(239,68,68,0.05); color: #f87171; }
#user-area { position: relative; }

/* ─── Landing Page ─────────────────────────────────────── */
#landing { min-height: calc(100vh - 56px); }

.landing-hero { text-align: center; padding: 6rem 2rem 4rem; position: relative; overflow: hidden; }
.landing-hero::before { content: ''; position: absolute; top: -40%; left: 50%; transform: translateX(-50%); width: 800px; height: 800px; background: radial-gradient(circle, rgba(59,130,246,0.08) 0%, rgba(139,92,246,0.04) 40%, transparent 70%); pointer-events: none; }
.landing-hero-icon { margin-bottom: 2rem; }
.landing-hero h1 { font-size: 3.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 1rem; }
.landing-hero h1 .gradient-text { background: var(--rdy-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.landing-hero .subtitle { font-size: 1.25rem; color: var(--rdy-text-light); max-width: 560px; margin: 0 auto 2.5rem; line-height: 1.7; }
.landing-cta-group { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.landing-btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--rdy-blue); color: #fff; padding: 0.9rem 2rem; border-radius: 8px; font-weight: 600; font-size: 1rem; border: none; cursor: pointer; transition: all 0.2s; }
.landing-btn-primary:hover { background: #2563eb; color: #fff; transform: translateY(-1px); box-shadow: 0 8px 30px rgba(59,130,246,0.25); }
.landing-btn-secondary { display: inline-flex; align-items: center; gap: 0.5rem; background: transparent; color: var(--rdy-text-light); padding: 0.9rem 2rem; border-radius: 8px; font-weight: 500; font-size: 1rem; border: 1px solid var(--rdy-border); cursor: pointer; transition: all 0.2s; }
.landing-btn-secondary:hover { border-color: var(--rdy-blue); color: var(--rdy-blue); }

.landing-section { padding: 5rem 2rem; }
.landing-container { max-width: 1000px; margin: 0 auto; }
.landing-section-title { text-align: center; font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; }
.landing-section-subtitle { text-align: center; color: var(--rdy-text-light); font-size: 1.05rem; margin-bottom: 3rem; max-width: 550px; margin-left: auto; margin-right: auto; }

/* How it works - 3 steps */
.landing-steps { display: flex; gap: 2rem; align-items: flex-start; justify-content: center; margin-top: 3rem; }
.landing-step { text-align: center; flex: 1; max-width: 280px; }
.landing-step-icon { width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; }
.landing-step-icon svg { width: 32px; height: 32px; }
.landing-step h3 { font-weight: 700; margin-bottom: 0.5rem; font-size: 1.1rem; }
.landing-step p { color: var(--rdy-text-light); font-size: 0.9rem; line-height: 1.6; }
.landing-step-arrow { display: flex; align-items: center; padding-top: 1.5rem; color: var(--rdy-text-dim); font-size: 1.5rem; }

/* Feature cards */
.landing-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.landing-feature { background: var(--rdy-card); border: 1px solid var(--rdy-border); border-radius: var(--rdy-radius); padding: 1.75rem; transition: all 0.2s; }
.landing-feature:hover { border-color: rgba(139,92,246,0.3); }
.landing-feature-icon { margin-bottom: 1rem; }
.landing-feature-icon svg { width: 28px; height: 28px; }
.landing-feature h4 { font-weight: 600; margin-bottom: 0.4rem; }
.landing-feature p { color: var(--rdy-text-light); font-size: 0.9rem; line-height: 1.6; }

/* Stats */
.landing-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 3rem; }
.landing-stat { text-align: center; padding: 1.5rem; background: var(--rdy-card); border: 1px solid var(--rdy-border); border-radius: var(--rdy-radius); }
.landing-stat-value { font-size: 1.75rem; font-weight: 700; background: var(--rdy-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.landing-stat-label { color: var(--rdy-text-light); font-size: 0.85rem; margin-top: 0.25rem; }

/* Preview mockup */
.landing-preview { margin-top: 4rem; position: relative; }
.landing-preview-window { background: var(--rdy-card); border: 1px solid var(--rdy-border); border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.landing-preview-bar { height: 36px; background: var(--rdy-surface); border-bottom: 1px solid var(--rdy-border); display: flex; align-items: center; padding: 0 12px; gap: 6px; }
.landing-preview-dot { width: 10px; height: 10px; border-radius: 50%; }
.landing-preview-body { padding: 2rem; min-height: 200px; display: flex; flex-direction: column; gap: 12px; }
.landing-preview-block { border-radius: 6px; opacity: 0.6; }

/* CTA */
.landing-cta-section { text-align: center; padding: 5rem 2rem 6rem; position: relative; }
.landing-cta-section::before { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 800px; height: 400px; background: radial-gradient(circle, rgba(236,72,153,0.06) 0%, rgba(139,92,246,0.03) 40%, transparent 70%); pointer-events: none; }
.landing-cta-section h2 { font-size: 2.25rem; font-weight: 700; margin-bottom: 1rem; }
.landing-cta-section p { color: var(--rdy-text-light); font-size: 1.1rem; margin-bottom: 2rem; }

/* ─── Step Panels ──────────────────────────────────────── */
.step-panel { display: none; min-height: calc(100vh - 56px); }
.step-panel.active { display: block; }
.step-content { max-width: 1100px; margin: 0 auto; padding: 3rem 1.5rem; }
.step-header { text-align: center; margin-bottom: 2.5rem; }
.step-header h1 { font-size: 2.5rem; font-weight: 800; color: var(--rdy-text); line-height: 1.15; margin-bottom: 0.5rem; }
.step-header p { font-size: 1.1rem; color: var(--rdy-text-light); max-width: 550px; margin: 0 auto; }

/* Site name input */
.site-name-input-wrap { max-width: 480px; margin: 0 auto 2.5rem; }
.site-name-input { width: 100%; padding: 0.85rem 1.25rem; border: 1.5px solid var(--rdy-border); border-radius: 10px; font-size: 1.05rem; font-family: inherit; font-weight: 500; background: var(--rdy-card); color: var(--rdy-text); text-align: center; transition: border-color 0.2s, box-shadow 0.2s; }
.site-name-input:focus { outline: none; border-color: var(--rdy-blue); box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
.site-name-input::placeholder { color: var(--rdy-text-dim); font-weight: 400; }

/* Step 1: Templates */
.template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.template-card { background: var(--rdy-card); border-radius: var(--rdy-radius); border: 2px solid var(--rdy-border); cursor: pointer; transition: all 0.25s; overflow: hidden; }
.template-card:hover { border-color: var(--rdy-blue); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(59,130,246,0.1); }
.template-preview { height: 200px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.template-preview img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.template-card:hover .template-preview img { transform: scale(1.05); }
.template-preview-blocks { display: flex; flex-direction: column; gap: 4px; width: 80%; }
.template-preview-block { border-radius: 3px; opacity: 0.5; }
.template-info { padding: 1.25rem; }
.template-info h3 { font-weight: 700; font-size: 1.1rem; margin-bottom: 0.25rem; }
.template-info p { color: var(--rdy-text-light); font-size: 0.85rem; }
.template-info .page-count { font-size: 0.75rem; color: var(--rdy-text-dim); margin-top: 0.5rem; }

/* Preview placeholder (before first generation) */
.preview-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--rdy-text-dim); text-align: center; padding: 3rem; }
.preview-placeholder-icon { font-size: 4rem; margin-bottom: 1.5rem; opacity: 0.3; }
.preview-placeholder h2 { font-size: 1.5rem; font-weight: 600; color: var(--rdy-text-light); margin-bottom: 0.75rem; }
.preview-placeholder p { font-size: 1rem; max-width: 420px; line-height: 1.6; }
.btn-primary { background: var(--rdy-blue); color: #fff; border: none; padding: 0.75rem 2rem; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-primary:hover { background: #2563eb; }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-link { background: none; border: none; color: var(--rdy-text-light); font-size: 0.9rem; cursor: pointer; margin-top: 1.5rem; display: inline-block; }
.btn-link:hover { color: var(--rdy-blue); }

/* Page tabs */
.page-tabs { display: flex; gap: 0; background: var(--rdy-surface); border-bottom: 1px solid var(--rdy-border); padding: 0 1rem; }
.page-tab { padding: 0.75rem 1.25rem; font-size: 0.85rem; font-weight: 500; color: var(--rdy-text-dim); cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; }
.page-tab:hover { color: var(--rdy-text-light); }
.page-tab.active { color: var(--rdy-blue); border-bottom-color: var(--rdy-blue); }
.page-tabs .tab-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; }
.btn-deploy-step { background: var(--rdy-purple); color: #fff; border: none; padding: 0.45rem 1rem; border-radius: 6px; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-deploy-step:hover { background: #7c3aed; }

/* Preview iframe */
#preview-frame-wrapper { width: 100%; height: calc(100vh - 56px - 45px - 70px); position: relative; }
#preview-frame { width: 100%; height: 100%; border: none; background: #fff; }

/* Overlay Prompt Bar */
.prompt-bar { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(17,17,24,0.95); backdrop-filter: blur(12px); border-top: 1px solid var(--rdy-border); z-index: 999; padding: 0.5rem 0; }
.prompt-bar-inner { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }
.prompt-bar-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
.prompt-bar-hint { font-size: 0.75rem; color: var(--rdy-text-dim); }
#prompt-bar-oomph { font-size: 0.75rem; font-weight: 600; color: var(--rdy-purple); }
.prompt-bar-input { display: flex; gap: 0.5rem; align-items: center; }
.prompt-bar-input input { flex: 1; padding: 0.65rem 1rem; border: 1.5px solid var(--rdy-border); border-radius: 8px; font-size: 0.9rem; font-family: inherit; transition: border-color 0.2s; background: var(--rdy-card); color: var(--rdy-text); }
.prompt-bar-input input:focus { outline: none; border-color: var(--rdy-blue); }
.prompt-bar-input input::placeholder { color: var(--rdy-text-dim); }
/* Custom Model Dropdown */
.rdy-model-dropdown { position: relative; display: inline-block; }
.rdy-dropdown-trigger { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.75rem; border: 1px solid var(--rdy-border); border-radius: 6px; font-size: 0.78rem; background: var(--rdy-card); color: var(--rdy-text); cursor: pointer; white-space: nowrap; font-family: inherit; }
.rdy-dropdown-trigger:hover { border-color: var(--rdy-blue); }
.rdy-dropdown-selected { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.rdy-dropdown-chevron { font-size: 0.6rem; opacity: 0.5; }
.rdy-dropdown-cost { color: var(--rdy-text-dim); font-size: 0.7rem; margin-left: 0.25rem; }
.rdy-dropdown-panel { position: fixed; z-index: 10000; width: 360px; max-height: 80vh; background: var(--rdy-card); border: 1px solid var(--rdy-border); border-radius: var(--rdy-radius); box-shadow: 0 8px 40px rgba(0,0,0,0.5); overflow: hidden; display: none; flex-direction: column; }
.rdy-dropdown-panel.open { display: flex; }
.rdy-dropdown-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--rdy-border); }
.rdy-dropdown-header span { font-weight: 600; font-size: 0.9rem; }
.rdy-dropdown-close { background: none; border: none; color: var(--rdy-text-light); font-size: 1.25rem; cursor: pointer; padding: 0; line-height: 1; }
.rdy-dropdown-close:hover { color: var(--rdy-text); }
.rdy-dropdown-options { overflow-y: auto; padding: 0.5rem; flex: 1; }
.rdy-dropdown-option { padding: 0.65rem 0.75rem; margin-bottom: 0.35rem; background: var(--rdy-surface); border: 1px solid transparent; border-radius: 8px; cursor: pointer; transition: all 0.15s; }
.rdy-dropdown-option:hover { border-color: rgba(59,130,246,0.3); }
.rdy-dropdown-option.selected { border-color: var(--rdy-blue); background: rgba(59,130,246,0.05); }
.rdy-dropdown-option .opt-row { display: flex; align-items: center; justify-content: space-between; }
.rdy-dropdown-option .opt-name { font-weight: 500; font-size: 0.85rem; }
.rdy-dropdown-option .opt-meta { display: flex; align-items: center; gap: 0.5rem; }
.rdy-dropdown-option .opt-cost { font-size: 0.75rem; color: var(--rdy-purple); font-weight: 600; }
.rdy-dropdown-option .opt-info-btn { background: none; border: 1px solid var(--rdy-border); color: var(--rdy-text-dim); width: 20px; height: 20px; border-radius: 50%; font-size: 0.7rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.rdy-dropdown-option .opt-info-btn:hover { border-color: var(--rdy-blue); color: var(--rdy-blue); }
.rdy-dropdown-option .opt-details { display: none; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--rdy-border); }
.rdy-dropdown-option .opt-details.open { display: block; }
/* Star ratings */
.rdy-rating-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.rdy-stars { display: flex; gap: 2px; }
.rdy-star { width: 20px; height: 20px; cursor: pointer; transition: transform 0.1s; color: var(--rdy-text-dim); }
.rdy-star:hover { transform: scale(1.2); }
.rdy-star.star-full { color: #f1c40f; }
.rdy-star.star-user { color: #ffd700; filter: drop-shadow(0 0 3px rgba(255,215,0,0.4)); }
.rdy-rating-count { font-size: 0.75rem; color: var(--rdy-text-dim); }
.rdy-rating-label { font-size: 0.7rem; color: var(--rdy-text-dim); }
/* Comments in dropdown */
.rdy-comments-toggle { background: none; border: none; color: var(--rdy-text-dim); font-size: 0.75rem; cursor: pointer; padding: 0.25rem 0; display: flex; align-items: center; gap: 0.35rem; }
.rdy-comments-toggle:hover { color: var(--rdy-blue); }
.rdy-comments-section { margin-top: 0.5rem; }
.rdy-comment { padding: 0.5rem; background: var(--rdy-bg); border-radius: 6px; margin-bottom: 0.35rem; font-size: 0.8rem; }
.rdy-comment-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem; }
.rdy-comment-user { font-weight: 600; font-size: 0.75rem; color: var(--rdy-text-light); }
.rdy-comment-date { font-size: 0.65rem; color: var(--rdy-text-dim); }
.rdy-comment-text { color: var(--rdy-text); line-height: 1.4; }
.rdy-comment-actions { display: flex; gap: 0.75rem; margin-top: 0.3rem; }
.rdy-vote-btn { background: none; border: none; color: var(--rdy-text-dim); font-size: 0.7rem; cursor: pointer; display: flex; align-items: center; gap: 0.2rem; padding: 0; }
.rdy-vote-btn:hover { color: var(--rdy-blue); }
.rdy-vote-btn.voted { color: var(--rdy-blue); }
.rdy-comment-form { display: flex; gap: 0.35rem; margin-top: 0.5rem; }
.rdy-comment-form input { flex: 1; padding: 0.4rem 0.6rem; border: 1px solid var(--rdy-border); border-radius: 6px; font-size: 0.75rem; background: var(--rdy-bg); color: var(--rdy-text); font-family: inherit; }
.rdy-comment-form input:focus { outline: none; border-color: var(--rdy-blue); }
.rdy-comment-form button { background: var(--rdy-blue); color: #fff; border: none; padding: 0.4rem 0.6rem; border-radius: 6px; font-size: 0.7rem; font-weight: 600; cursor: pointer; }
.btn-prompt-send { background: var(--rdy-blue); color: #fff; border: none; padding: 0.65rem 1.25rem; border-radius: 8px; font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.btn-prompt-send:hover { background: #2563eb; }

/* Step 3: Deploy */
.deploy-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 3rem; }
.deploy-card { background: var(--rdy-card); border: 1px solid var(--rdy-border); border-radius: var(--rdy-radius); padding: 2rem 1.5rem; text-align: center; transition: all 0.2s; }
.deploy-card:hover { border-color: rgba(139,92,246,0.3); }
.deploy-card.featured { border-color: var(--rdy-blue); box-shadow: 0 4px 20px rgba(59,130,246,0.08); }
.deploy-icon { margin-bottom: 1rem; }
.deploy-icon svg { width: 48px; height: 48px; }
.deploy-card h3 { font-weight: 700; margin-bottom: 0.5rem; }
.deploy-card p { color: var(--rdy-text-light); font-size: 0.9rem; margin-bottom: 1rem; }
.deploy-price { font-weight: 700; color: var(--rdy-blue); margin-bottom: 1rem; font-size: 0.95rem; }
.deploy-note { font-size: 0.8rem; color: var(--rdy-text-dim); }
.deploy-db-choice { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; text-align: left; }
.deploy-db-choice label { font-size: 0.85rem; color: var(--rdy-text-light); cursor: pointer; display: flex; align-items: center; gap: 0.4rem; }
.deploy-card .btn-primary { width: 100%; }

/* Sync Status */
.sync-status { font-size: 0.85rem; padding: 0.6rem 0.75rem; border-radius: 8px; margin-bottom: 1rem; text-align: left; }
.sync-status.published { background: rgba(34,197,94,0.08); color: #4ade80; border: 1px solid rgba(34,197,94,0.2); }
.sync-status.unpublished { background: rgba(59,130,246,0.08); color: var(--rdy-blue); border: 1px solid rgba(59,130,246,0.15); }
.sync-key-display { font-size: 0.75rem; color: var(--rdy-text-dim); word-break: break-all; margin-top: 0.5rem; background: var(--rdy-surface); padding: 0.5rem; border-radius: 6px; cursor: pointer; }
.sync-key-display:hover { background: var(--rdy-border); }

/* Affiliate Section */
.affiliate-section { background: var(--rdy-card); border-radius: var(--rdy-radius); padding: 2rem; border: 1px solid var(--rdy-border); }
.affiliate-section h3 { font-weight: 700; margin-bottom: 1.25rem; }
.affiliate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.affiliate-card { padding: 1.25rem; border: 1px solid var(--rdy-border); border-radius: 8px; transition: all 0.2s; color: var(--rdy-text); }
.affiliate-card:hover { border-color: rgba(59,130,246,0.3); background: rgba(59,130,246,0.03); }
.affiliate-card h4 { font-weight: 600; margin-bottom: 0.25rem; }
.affiliate-card .aff-price { color: var(--rdy-blue); font-weight: 600; font-size: 0.9rem; margin-bottom: 0.25rem; }
.affiliate-card .aff-desc { color: var(--rdy-text-light); font-size: 0.8rem; margin-bottom: 0.75rem; }
.affiliate-card .btn-aff { display: inline-block; background: var(--rdy-blue); color: #fff; padding: 0.4rem 1rem; border-radius: 6px; font-size: 0.8rem; font-weight: 600; }
.affiliate-note { color: var(--rdy-text-dim); font-size: 0.85rem; }

/* ─── Footer ───────────────────────────────────────────── */
.site-footer { padding: 2rem 2rem; border-top: 1px solid var(--rdy-border); text-align: center; margin-top: auto; }
.footer-inner { max-width: 1000px; margin: 0 auto; }
.footer-links { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem; }
.footer-links a { color: var(--rdy-text-dim); font-size: 0.85rem; transition: color 0.15s; }
.footer-links a:hover { color: var(--rdy-blue); }
.footer-company { font-size: 0.8rem; color: var(--rdy-text-dim); }
.footer-company a { color: var(--rdy-text-dim); }
.footer-company a:hover { color: var(--rdy-blue); }

/* ─── Loading ──────────────────────────────────────────── */
#loading-overlay { position: fixed; inset: 0; background: rgba(10,10,15,0.8); backdrop-filter: blur(4px); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.loading-content { text-align: center; color: #fff; }
.loading-spinner { width: 48px; height: 48px; border: 4px solid rgba(255,255,255,0.1); border-top-color: var(--rdy-blue); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 1rem; }
@keyframes spin { to { transform: rotate(360deg); } }
#loading-text { font-size: 1.1rem; font-weight: 500; }

/* ─── Oomph nudge ──────────────────────────────────────── */
.oomph-nudge { background: linear-gradient(135deg, var(--rdy-purple), var(--rdy-pink)); color: #fff; padding: 1rem 1.5rem; border-radius: var(--rdy-radius); text-align: center; margin-top: 1rem; }
.oomph-nudge a { color: #fff; text-decoration: underline; font-weight: 600; }

/* ─── Image Generation Modal ──────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(10,10,15,0.8); backdrop-filter: blur(4px); z-index: 9998; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal-panel { background: var(--rdy-card); border: 1px solid var(--rdy-border); border-radius: var(--rdy-radius); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--rdy-border); }
.modal-header h3 { font-weight: 700; font-size: 1.1rem; }
.modal-close { background: none; border: none; color: var(--rdy-text-light); font-size: 1.5rem; cursor: pointer; padding: 0; line-height: 1; }
.modal-close:hover { color: var(--rdy-text); }
.modal-body { padding: 1.5rem; }
.modal-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--rdy-text-light); margin-bottom: 0.5rem; }
.modal-textarea { width: 100%; padding: 0.85rem; border: 1.5px solid var(--rdy-border); border-radius: 8px; font-family: inherit; font-size: 0.9rem; resize: vertical; background: var(--rdy-surface); color: var(--rdy-text); margin-bottom: 1rem; }
.modal-textarea:focus { outline: none; border-color: var(--rdy-blue); }
.modal-textarea::placeholder { color: var(--rdy-text-dim); }
.modal-cost { font-size: 0.85rem; color: var(--rdy-text-light); margin-top: 0.75rem; }
.modal-footer { padding: 1rem 1.5rem 1.5rem; }

.aspect-ratio-options { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.aspect-option { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border: 1.5px solid var(--rdy-border); border-radius: 8px; cursor: pointer; font-size: 0.8rem; color: var(--rdy-text-light); transition: all 0.15s; }
.aspect-option:hover { border-color: var(--rdy-blue); color: var(--rdy-text); }
.aspect-option.active { border-color: var(--rdy-blue); background: rgba(59,130,246,0.08); color: var(--rdy-blue); }
.aspect-icon { display: inline-block; border: 1.5px solid currentColor; border-radius: 2px; }

.image-result { margin-bottom: 1rem; border-radius: 8px; overflow: hidden; border: 1px solid var(--rdy-border); }
.image-result img { width: 100%; display: block; max-height: 300px; object-fit: contain; background: var(--rdy-surface); }
.image-result-actions { display: flex; gap: 0.5rem; padding: 0.75rem; background: var(--rdy-surface); }
.image-result-actions .btn-small { flex: 1; text-align: center; }

.btn-prompt-image { background: none; border: 1.5px solid var(--rdy-border); color: var(--rdy-text-light); padding: 0.5rem; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.btn-prompt-image:hover { border-color: var(--rdy-purple); color: var(--rdy-purple); }

/* ─── Ideation Panel ──────────────────────────────────── */
.ideation-panel { position: fixed; top: 56px; right: -420px; width: 400px; max-width: 90vw; height: calc(100vh - 56px - 90px); background: var(--rdy-card); border-left: 1px solid var(--rdy-border); z-index: 1000; display: flex; flex-direction: column; transition: right 0.3s ease; box-shadow: -4px 0 20px rgba(0,0,0,0.3); }
.ideation-panel.open { right: 0; }
.ideation-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--rdy-border); }
.ideation-header-left { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.95rem; }
.ideation-close { background: none; border: none; color: var(--rdy-text-light); font-size: 1.4rem; cursor: pointer; padding: 0; line-height: 1; }
.ideation-close:hover { color: var(--rdy-text); }
.ideation-messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.ideation-msg { padding: 0.75rem 1rem; border-radius: 10px; font-size: 0.85rem; line-height: 1.6; max-width: 90%; white-space: pre-wrap; word-wrap: break-word; }
.ideation-msg-user { background: var(--rdy-blue); color: #fff; align-self: flex-end; border-bottom-right-radius: 2px; }
.ideation-msg-ai { background: var(--rdy-surface); color: var(--rdy-text); align-self: flex-start; border-bottom-left-radius: 2px; position: relative; }
.ideation-msg-ai .ideation-use-btn { display: block; margin-top: 0.5rem; padding: 0.3rem 0.6rem; background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.2); border-radius: 5px; color: var(--rdy-blue); font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.ideation-msg-ai .ideation-use-btn:hover { background: rgba(59,130,246,0.2); border-color: var(--rdy-blue); }
.ideation-msg-loading { background: var(--rdy-surface); color: var(--rdy-text-dim); align-self: flex-start; font-style: italic; }
.ideation-input-wrap { border-top: 1px solid var(--rdy-border); padding: 0.5rem 1rem 0.75rem; }
.ideation-cost { font-size: 0.7rem; color: var(--rdy-text-dim); margin-bottom: 0.35rem; }
.ideation-input-row { display: flex; gap: 0.5rem; }
.ideation-input-row input { flex: 1; padding: 0.6rem 0.85rem; border: 1.5px solid var(--rdy-border); border-radius: 8px; font-size: 0.85rem; font-family: inherit; background: var(--rdy-surface); color: var(--rdy-text); }
.ideation-input-row input:focus { outline: none; border-color: var(--rdy-blue); }
.ideation-input-row input::placeholder { color: var(--rdy-text-dim); }

/* My Projects cards */
#my-projects-grid .template-card { border-color: rgba(59,130,246,0.2); }
#my-projects-grid .template-card:hover { border-color: var(--rdy-blue); box-shadow: 0 8px 30px rgba(59,130,246,0.15); }
#my-projects-grid .template-preview { height: 120px; display: flex; align-items: center; justify-content: center; }

/* Image placement select */
.image-place-select { padding: 0.35rem 0.5rem; border: 1px solid var(--rdy-border); border-radius: 6px; font-size: 0.8rem; font-family: inherit; background: var(--rdy-card); color: var(--rdy-text); cursor: pointer; flex: 1; min-width: 0; }
.image-place-select:focus { outline: none; border-color: var(--rdy-blue); }

/* ─── Responsive ───────────────────────────────────────── */
@media (max-width: 768px) {
    .landing-hero { padding: 3.5rem 1.5rem 2.5rem; }
    .landing-hero h1 { font-size: 2.25rem; }
    .landing-hero .subtitle { font-size: 1.05rem; }
    .landing-steps { flex-direction: column; align-items: center; }
    .landing-step-arrow { transform: rotate(90deg); }
    .landing-features { grid-template-columns: 1fr; }
    .landing-stats { grid-template-columns: repeat(2, 1fr); }
    .step-header h1 { font-size: 1.75rem; }
    .template-grid { grid-template-columns: 1fr; }
    .deploy-options { grid-template-columns: 1fr; }
    #step-indicator { display: none !important; }
    .top-bar-inner { gap: 1rem; }
    #user-area { margin-left: auto; }
    .ideation-panel { width: 100%; max-width: 100vw; }
}