#162031: #162031;
#667085: #667085;
#e7eaf0: #e7eaf0;
#6c4cf1: #6c4cf1;
#5137c8: #5137c8;
#ffffff: #ffffff;
#f6f7fb: #f6f7fb;
#138a5b: #138a5b;
#c43d4f: #c43d4f;
20px: 20px;
0 18px 60px rgba(36, 31, 80, .10): 0 18px 60px rgba(36, 31, 80, .10);

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: #162031; background: #fbfbfd; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }
.container { width: min(1160px, calc(100% - 32px)); margin-inline: auto; }

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.88); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(231,234,240,.8); }
.nav-wrap { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.02em; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: white; background: linear-gradient(135deg, #6c4cf1, #a34ff1); box-shadow: 0 8px 24px rgba(108,76,241,.3); }
.nav-links { display: flex; align-items: center; gap: 22px; font-size: .94rem; font-weight: 650; }
.nav-links > a:not(.btn):hover { color: #6c4cf1; }
.nav-toggle { display: none; border: 0; background: #f0eefc; border-radius: 10px; padding: 8px 12px; cursor: pointer; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 12px; padding: 11px 17px; font-weight: 750; cursor: pointer; transition: .2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { color: white; background: linear-gradient(135deg, #6c4cf1, #8b51ed); box-shadow: 0 10px 24px rgba(108,76,241,.24); }
.btn-primary:hover { background: linear-gradient(135deg, #5137c8, #7640dc); }
.btn-secondary { background: white; border-color: #e7eaf0; color: #162031; }
.btn-secondary:hover { border-color: #c9c2f3; color: #6c4cf1; }
.btn-ghost { background: transparent; border-color: #e7eaf0; }
.btn-premium { background: linear-gradient(135deg, #1d1633, #563a90); color: #f6d98d; box-shadow: 0 12px 30px rgba(29,22,51,.22); }
.btn-light { background: white; color: #362261; }
.btn-danger { background: #fff0f2; color: #c43d4f; border-color: #ffd5db; }
.btn-sm { padding: 8px 13px; border-radius: 10px; font-size: .88rem; }
.btn-xs { padding: 6px 9px; border-radius: 8px; font-size: .78rem; }
.btn-lg { padding: 14px 22px; border-radius: 14px; }
.btn-block { width: 100%; }

.membership-badge, .tag, .status { display: inline-flex; align-items: center; width: fit-content; border-radius: 999px; padding: 5px 9px; font-size: .72rem; font-weight: 850; letter-spacing: .05em; }
.membership-badge.free, .tag-free { color: #246f5a; background: #e7f8f1; }
.membership-badge.vip, .tag-vip { color: #735315; background: linear-gradient(135deg,#fff4c9,#f7d881); }
.status-success { color: #138a5b; background: #e5f8ef; }
.status-pending { color: #99700b; background: #fff6d9; }
.status-failed { color: #c43d4f; background: #ffedf0; }

.hero { position: relative; overflow: hidden; padding: 96px 0 86px; background: radial-gradient(circle at 84% 15%, rgba(152,92,246,.18), transparent 32%), radial-gradient(circle at 15% 90%, rgba(63,189,173,.12), transparent 30%); }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 70px; align-items: center; }
.eyebrow { display: inline-block; color: #6c4cf1; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 850; margin-bottom: 12px; }
.hero h1, .auth-copy h1, .dashboard-heading h1 { margin: 0; font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: 1.05; letter-spacing: -.055em; }
.hero p { max-width: 650px; margin: 23px 0; color: #667085; font-size: 1.08rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-stats { display: flex; gap: 34px; margin-top: 34px; }
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats strong { font-size: 1.05rem; }
.hero-stats span { color: #667085; font-size: .82rem; }
.glass-card { background: rgba(255,255,255,.76); border: 1px solid rgba(255,255,255,.9); backdrop-filter: blur(18px); border-radius: 28px; padding: 22px; box-shadow: 0 28px 90px rgba(63,44,122,.18); transform: rotate(1deg); }
.mock-top { display: flex; gap: 6px; margin-bottom: 22px; }
.mock-top span { width: 10px; height: 10px; border-radius: 50%; background: #d9d6e6; }
.mock-field, .mock-prompt { border: 1px solid #e7eaf0; border-radius: 14px; background: white; padding: 14px 16px; }
.mock-field small { display:block; color:#667085; }
.mock-preview { display:grid; grid-template-columns: 105px 1fr; gap:16px; align-items:center; padding:20px 0; }
.mock-image { aspect-ratio: 9/13; border-radius:16px; display:grid; place-items:center; color:white; font-weight:800; background:linear-gradient(155deg,#192136,#8552ee 70%,#f1ad72); }
.mock-preview h3 { margin:8px 0 2px; }.mock-preview p { margin:0; font-size:.88rem; }.mock-prompt { color:#667085; margin-bottom:14px; }

.section { padding: 82px 0; }
.section-soft { background: #f6f7fb; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:28px; }
.section-heading h2 { margin:0; font-size:clamp(1.7rem,3vw,2.5rem); letter-spacing:-.035em; }.section-heading p { margin:4px 0 0; color:#667085; }
.section-heading.compact { align-items:center; margin-bottom:18px; }.section-heading.compact h2 { font-size:1.35rem; }
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.content-card { position:relative; padding:24px; border:1px solid #e7eaf0; border-radius:20px; background:white; box-shadow:0 8px 30px rgba(42,47,67,.05); }
.content-card h3 { margin:18px 0 4px; }.content-card p { color:#667085; margin:0; }.content-icon { float:right; font-size:1.5rem; color:#6c4cf1; }
.three-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:45px; }.three-steps > div { border-left:2px solid #d9d4fb; padding-left:22px; }.three-steps span { color:#6c4cf1; font-weight:900; }.three-steps h3 { margin:5px 0; }.three-steps p { margin:0;color:#667085; }
.site-footer { border-top:1px solid #e7eaf0; background:white; }.footer-inner { min-height:120px; display:flex; justify-content:space-between; align-items:center; gap:20px; color:#667085; font-size:.9rem; }.footer-inner strong { color:#162031; }

.auth-section { min-height: calc(100vh - 195px); display:grid; align-items:center; padding:70px 0; background:radial-gradient(circle at 10% 20%, rgba(108,76,241,.1), transparent 28%); }
.auth-grid { display:grid; grid-template-columns:1fr .78fr; align-items:center; gap:80px; }.auth-narrow { max-width:520px; }.auth-copy p { color:#667085; font-size:1.05rem; }.feature-list { padding:0; margin:28px 0; list-style:none; }.feature-list li { margin:10px 0; }.feature-list li::before { content:'✓'; display:inline-grid; place-items:center; width:22px; height:22px; margin-right:10px; border-radius:50%; color:#138a5b; background:#e5f8ef; font-weight:900; }
.form-card, .card-panel { background:white; border:1px solid #e7eaf0; border-radius:20px; box-shadow:0 18px 60px rgba(36, 31, 80, .10); padding:28px; }.form-card h1,.form-card h2 { margin-top:0; letter-spacing:-.03em; }.muted { color:#667085; }.form-foot { text-align:center;color:#667085;margin:20px 0 0; }.form-foot a { color:#6c4cf1;font-weight:700; }
label { display:flex; flex-direction:column; gap:7px; margin-bottom:17px; font-size:.9rem; font-weight:700; }
input,textarea,select { width:100%; border:1px solid #dfe3ea; border-radius:12px; background:white; padding:11px 13px; color:#162031; outline:none; transition:.2s; }
input:focus,textarea:focus,select:focus { border-color:#9f8cf3; box-shadow:0 0 0 4px rgba(108,76,241,.10); }.otp-input { text-align:center;font-size:2rem;letter-spacing:.35em;font-weight:850; }
.alert { padding:12px 14px; border-radius:12px; margin:12px 0; font-size:.9rem; }.alert-success { background:#e5f8ef;color:#126c4a; }.alert-error { background:#ffedf0;color:#9d2939; }.alert-info { background:#edf2ff;color:#36548b; }.flash-wrap { margin-top:18px; }

.dashboard-hero { padding:54px 0 38px; background:linear-gradient(180deg,#f4f1ff 0%,#fbfbfd 100%); }.dashboard-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; }.dashboard-heading h1 { font-size:clamp(2rem,4vw,3.4rem); }.dashboard-heading p { color:#667085;margin:10px 0 0; }
.generator-section { padding-top:28px; }.generator-layout { display:grid; grid-template-columns:340px 1fr; gap:22px; align-items:start; }.generator-control { position:sticky; top:96px; }.panel-title { display:flex; gap:12px; align-items:center; margin-bottom:16px; }.panel-title > span { flex:0 0 auto; width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:#efeafd;color:#6c4cf1;font-weight:900; }.panel-title h3 { margin:0; }.panel-title p { margin:0;color:#667085;font-size:.82rem; }.panel-gap { margin-top:28px; }.mini-note { display:flex;align-items:center;justify-content:space-between;border-top:1px solid #e7eaf0;padding-top:18px;margin-top:24px;font-size:.86rem; }
.generator-preview { min-height:620px; }.empty-state { min-height:550px;display:grid;place-content:center;text-align:center;color:#667085; }.empty-state h2 { color:#162031;margin:10px 0 0; }.empty-state p { margin:5px 0; }.empty-icon { width:66px;height:66px;border-radius:22px;display:grid;place-items:center;margin:auto;background:#efeafd;color:#6c4cf1;font-size:1.8rem; }
.preview-header { display:flex;justify-content:space-between;gap:15px;margin-bottom:18px; }.preview-header h2 { margin:9px 0 2px; }.preview-header p { margin:0;color:#667085; }.media-area { margin-bottom:22px; }.demo-media { min-height:315px;border-radius:18px;overflow:hidden;background:#f0f2f7;border:1px solid #e7eaf0; }.demo-media img { width:100%;height:430px;object-fit:cover; }.video-frame { display:grid;place-items:center; }.video-frame iframe { width:100%;height:430px;border:0; }.video-link { display:grid;place-items:center;width:100%;height:315px;color:#6c4cf1;font-weight:800; }.no-media { display:grid;place-content:center;text-align:center;color:#667085; }.no-media span { font-size:2rem;color:#6c4cf1; }
.locked-box { text-align:center;padding:42px 20px;border-radius:18px;background:linear-gradient(135deg,#1e1831,#3e286d);color:white; }.locked-box h3 { margin:12px 0 4px; }.locked-box p { color:#cfc7df; }.lock-icon { font-size:2rem; }.prompt-box { border:1px solid #e7eaf0;border-radius:16px;overflow:hidden; }.prompt-box-head { display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:#f8f8fb;border-bottom:1px solid #e7eaf0; }.prompt-box textarea { border:0;border-radius:0;min-height:210px;resize:vertical;line-height:1.7;padding:18px;box-shadow:none; }.copy-status { min-height:20px;margin:0;padding:0 18px 10px;color:#138a5b;font-size:.84rem; }
.profile-grid { display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:start; }.profile-card { text-align:center; }.profile-card p { color:#667085;word-break:break-word; }.profile-card small { display:block;color:#667085;margin-top:12px; }.avatar { width:84px;height:84px;border-radius:28px;display:grid;place-items:center;margin:0 auto 15px;color:white;background:linear-gradient(135deg,#6c4cf1,#b456e7);font-size:2rem;font-weight:900; }
.upgrade-grid { display:grid;grid-template-columns:.8fr 1.2fr;gap:24px;align-items:start; }.premium-card { border-radius:26px;padding:34px;color:white;background:radial-gradient(circle at 90% 10%,rgba(248,205,109,.25),transparent 30%),linear-gradient(145deg,#171225,#44306b);box-shadow:0 24px 70px rgba(25,17,42,.25); }.premium-card h1 { margin:0;font-size:2.2rem; }.premium-card p { color:#d9d3e5; }.eyebrow.light { color:#f3d88d; }.price { display:flex;align-items:end;gap:8px;margin:28px 0; }.price strong { font-size:2.7rem;line-height:1; }.price span { color:#cbc2d8; }.light-list li::before { color:#6e531a;background:#f7da8e; }.sandbox-note { display:block;text-align:center;margin-top:12px;color:#cfc7df; }.status-card { text-align:center; }.status-illustration { width:72px;height:72px;display:grid;place-items:center;margin:0 auto 16px;border-radius:24px;background:#edf2ff;color:#526f9e;font-size:2rem;font-weight:900; }.status-illustration.success { background:#e5f8ef;color:#138a5b; }.status-illustration.pending { background:#fff6d9;color:#99700b; }.status-illustration.failed { background:#ffedf0;color:#c43d4f; }

.admin-body { background:#f4f5f8; }.admin-shell { min-height:100vh;display:grid;grid-template-columns:250px 1fr; }.admin-sidebar { position:sticky;top:0;height:100vh;padding:24px 18px;background:#171524;color:white; }.brand-admin { padding:0 8px 26px; }.admin-nav { display:flex;flex-direction:column;gap:7px; }.admin-nav a { padding:11px 13px;border-radius:11px;color:#c9c6d4;font-weight:650;font-size:.92rem; }.admin-nav a:hover { background:#2a263d;color:white; }.admin-main { min-width:0; }.admin-topbar { height:76px;display:flex;justify-content:flex-end;align-items:center;padding:0 28px;background:white;border-bottom:1px solid #e7eaf0; }.admin-topbar > div { display:flex;flex-direction:column;text-align:right; }.admin-topbar span { color:#667085;font-size:.8rem; }.admin-content { padding:26px; }.admin-card { margin-bottom:22px;box-shadow:0 8px 26px rgba(34,40,56,.05); }.stat-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-bottom:22px; }.stat-card { padding:22px;background:white;border:1px solid #e7eaf0;border-radius:17px; }.stat-card span,.stat-card small { display:block;color:#667085; }.stat-card strong { display:block;font-size:1.8rem;letter-spacing:-.04em;margin:4px 0; }.three-stats { grid-template-columns:repeat(3,1fr); }.admin-two-col { display:grid;grid-template-columns:minmax(320px,.72fr) minmax(500px,1.28fr);gap:22px;align-items:start; }.form-grid { display:grid;gap:14px; }.form-grid.two { grid-template-columns:repeat(2,1fr); }.form-grid.three { grid-template-columns:repeat(3,1fr);align-items:end; }.form-actions,.actions,.search-form,.filter-pills { display:flex;align-items:center;gap:8px; }.actions form { margin:0; }.checkbox-label { flex-direction:row;align-items:center;height:44px; }.checkbox-label input { width:auto; }.admin-thumb { width:140px;height:95px;object-fit:cover;border-radius:10px;margin-top:8px; }.prompt-editor { font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem; }.filter-pills { padding:4px;background:#f0f1f5;border-radius:11px; }.filter-pills a { padding:6px 10px;border-radius:8px;font-size:.8rem;font-weight:750;color:#667085; }.filter-pills a.active { background:white;color:#6c4cf1;box-shadow:0 3px 10px rgba(45,51,69,.08); }
.table-wrap { overflow:auto; }.table-wrap table { width:100%;border-collapse:collapse;white-space:nowrap;font-size:.88rem; }.table-wrap th { text-align:left;color:#667085;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;padding:12px;border-bottom:1px solid #e7eaf0; }.table-wrap td { padding:13px 12px;border-bottom:1px solid #eef0f4;vertical-align:middle; }.table-wrap td small { display:block;color:#667085;max-width:250px;overflow:hidden;text-overflow:ellipsis; }.empty-cell,.empty-mini { color:#667085;text-align:center;padding:30px!important; }.prompt-list-item { display:flex;align-items:center;gap:10px; }.prompt-list-item img,.thumb-placeholder { width:48px;height:48px;border-radius:10px;object-fit:cover; }.thumb-placeholder { display:grid;place-items:center;background:#efeafd;color:#6c4cf1; }

@media (max-width: 980px) {
  .hero-grid,.auth-grid,.upgrade-grid { grid-template-columns:1fr; }.hero-grid { gap:40px; }.glass-card { max-width:620px; }.generator-layout { grid-template-columns:1fr; }.generator-control { position:static; }.profile-grid { grid-template-columns:1fr; }.admin-shell { grid-template-columns:1fr; }.admin-sidebar { position:fixed;z-index:100;left:-270px;width:250px;transition:.2s; }.admin-sidebar.open { left:0; }.admin-topbar { justify-content:space-between; }.admin-topbar .nav-toggle { display:block; }.admin-two-col { grid-template-columns:1fr; }.stat-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 760px) {
  .nav-toggle { display:block; }.nav-links { display:none;position:absolute;left:16px;right:16px;top:68px;flex-direction:column;align-items:stretch;padding:16px;background:white;border:1px solid #e7eaf0;border-radius:16px;box-shadow:0 18px 60px rgba(36, 31, 80, .10); }.nav-links.open { display:flex; }.nav-links .membership-badge { align-self:flex-start; }.hero { padding-top:62px; }.hero-stats { gap:16px;justify-content:space-between; }.card-grid,.three-steps { grid-template-columns:1fr; }.section { padding:58px 0; }.dashboard-heading { align-items:start;flex-direction:column; }.demo-media img,.video-frame iframe { height:330px; }.form-grid.two,.form-grid.three { grid-template-columns:1fr; }.stat-grid,.three-stats { grid-template-columns:1fr; }.admin-content { padding:16px; }.admin-topbar { padding:0 16px; }.search-form { align-items:stretch;flex-direction:column; }.section-heading.compact { align-items:flex-start;flex-direction:column; }.footer-inner { flex-direction:column;align-items:flex-start;justify-content:center;padding:25px 0; }
}