*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--primary:#6366f1;--primary-dark:#4f46e5;--primary-light:#eef2ff;--dark:#0f172a;--text:#334155;--muted:#64748b;--border:#e2e8f0;--bg:#f8fafc;--white:#fff;--success:#10b981;--danger:#ef4444;--radius:12px;--shadow:0 4px 24px rgba(0,0,0,.07);--shadow-lg:0 12px 48px rgba(0,0,0,.12)}
html{scroll-behavior:smooth}
body{font-family:'Inter','Segoe UI',system-ui,sans-serif;color:var(--text);background:var(--bg);line-height:1.7;font-size:16px}
a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}
.navbar{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:0 24px;height:64px}
.nav-inner{max-width:1100px;margin:0 auto;height:100%;display:flex;align-items:center;justify-content:space-between}
.nav-brand{font-size:1.2rem;font-weight:700;color:var(--dark);text-decoration:none;display:flex;align-items:center;gap:8px}.nav-brand:hover{text-decoration:none}
.nav-cta{background:var(--primary);color:white!important;padding:8px 20px;border-radius:50px;font-size:.9rem;font-weight:500;transition:background .2s}.nav-cta:hover{background:var(--primary-dark);text-decoration:none}
.landing-hero{min-height:calc(100vh - 64px);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;max-width:1100px;margin:0 auto;padding:80px 24px}
.hero-badge{display:inline-block;background:var(--primary-light);color:var(--primary-dark);padding:6px 16px;border-radius:50px;font-size:.85rem;font-weight:500;margin-bottom:20px;border:1px solid #c7d2fe}
.hero-title{font-size:clamp(2rem,4vw,3rem);font-weight:700;color:var(--dark);line-height:1.2;letter-spacing:-.5px;margin-bottom:20px}
.hero-highlight{background:linear-gradient(135deg,var(--primary) 0%,#8b5cf6 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:1.1rem;color:var(--muted);max-width:500px;margin-bottom:32px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.btn-primary-lg{background:var(--primary);color:white!important;padding:14px 28px;border-radius:50px;font-size:1rem;font-weight:600;transition:all .2s;box-shadow:0 4px 14px rgba(99,102,241,.4);display:inline-block}.btn-primary-lg:hover{background:var(--primary-dark);transform:translateY(-2px);text-decoration:none}
.btn-ghost-lg{background:transparent;color:var(--text)!important;padding:14px 28px;border-radius:50px;font-size:1rem;font-weight:500;border:1px solid var(--border);transition:all .2s;display:inline-block}.btn-ghost-lg:hover{border-color:var(--primary);color:var(--primary)!important;text-decoration:none}
.hero-note{font-size:.85rem;color:var(--muted)}
.hero-preview{display:flex;justify-content:center;align-items:center}
.preview-card{background:white;border-radius:16px;box-shadow:var(--shadow-lg);width:100%;max-width:380px;overflow:hidden;border:1px solid var(--border)}
.preview-card-header{background:#f1f5f9;padding:12px 16px;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--border)}
.dot{width:12px;height:12px;border-radius:50%}.dot.red{background:#ff5f57}.dot.yellow{background:#ffbd2e}.dot.green{background:#28c840}
.preview-card-title{font-size:.8rem;color:var(--muted);margin-left:8px}
.preview-card-body{padding:24px}
.preview-avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#8b5cf6);margin-bottom:16px}
.preview-lines{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.preview-line{height:10px;border-radius:4px;background:#e2e8f0}
.preview-line.w80{width:80%}.preview-line.w70{width:70%}.preview-line.w90{width:90%}.preview-line.w50{width:50%}
.preview-line.bold{height:14px;background:#94a3b8}.preview-line.muted{background:#cbd5e1;height:8px}.preview-line.sm{height:8px}
.preview-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.preview-badge{background:var(--primary-light);color:var(--primary-dark);padding:4px 10px;border-radius:50px;font-size:.75rem;font-weight:500}
.preview-cards-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.preview-mini-card{height:52px;background:#f1f5f9;border-radius:8px;border:1px solid var(--border)}
.how-it-works{background:var(--white);padding:80px 24px}
.section-inner{max-width:1000px;margin:0 auto}
.section-title{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;color:var(--dark);text-align:center;margin-bottom:8px}
.section-sub{text-align:center;color:var(--muted);font-size:1.05rem;margin-bottom:48px}
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px}
.step-card{position:relative;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:32px 28px;text-align:center;transition:box-shadow .2s}.step-card:hover{box-shadow:var(--shadow)}
.step-number{position:absolute;top:16px;right:20px;font-size:2.5rem;font-weight:800;color:var(--border);line-height:1}
.step-icon{font-size:2.5rem;margin-bottom:16px}.step-card h3{font-size:1.1rem;font-weight:600;color:var(--dark);margin-bottom:8px}.step-card p{color:var(--muted);font-size:.925rem}
.features-section{padding:80px 24px;background:var(--bg)}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.feature-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:28px;transition:box-shadow .2s,transform .2s}.feature-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.feature-icon{font-size:1.8rem;display:block;margin-bottom:12px}
.feature-card h3{font-size:1rem;font-weight:600;color:var(--dark);margin-bottom:8px}.feature-card p{font-size:.9rem;color:var(--muted)}
.cta-section{background:linear-gradient(135deg,var(--dark) 0%,#1e1b4b 100%);padding:80px 24px;text-align:center}
.cta-inner{max-width:600px;margin:0 auto}
.cta-inner h2{font-size:2rem;font-weight:700;color:white;margin-bottom:12px}.cta-inner p{color:#a5b4fc;font-size:1.05rem;margin-bottom:32px}
.btn-white{background:white!important;color:var(--primary-dark)!important;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.site-footer{background:var(--dark);color:#64748b;padding:24px;text-align:center;font-size:.875rem}
.footer-inner strong{color:#94a3b8}
.upload-page{min-height:calc(100vh - 64px);display:flex;align-items:center;justify-content:center;padding:48px 24px}
.upload-container{background:white;border-radius:20px;box-shadow:var(--shadow-lg);padding:48px;width:100%;max-width:560px;border:1px solid var(--border)}
.upload-header{text-align:center;margin-bottom:32px}
.upload-header h1{font-size:1.8rem;font-weight:700;color:var(--dark);margin-bottom:8px}.upload-header p{color:var(--muted)}
.drop-zone{border:2px dashed var(--border);border-radius:var(--radius);padding:40px 24px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;margin-bottom:16px;position:relative}
.drop-zone:hover,.drop-zone.dragover{border-color:var(--primary);background:var(--primary-light)}
.drop-zone.has-file{border-color:var(--success);background:#f0fdf4}
.drop-zone-icon{font-size:3rem;color:var(--muted);margin-bottom:12px;line-height:1}
.drop-zone-text{font-size:1rem;font-weight:500;color:var(--dark);margin-bottom:4px}.drop-zone-sub{color:var(--muted);font-size:.9rem;margin-bottom:12px}
.btn-browse{display:inline-block;background:var(--primary-light);color:var(--primary-dark);padding:8px 20px;border-radius:50px;font-size:.9rem;font-weight:500;cursor:pointer;border:1px solid #c7d2fe;transition:background .2s;margin-bottom:12px}.btn-browse:hover{background:#e0e7ff}
.file-input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.file-info{font-size:.85rem;color:var(--muted)}
.photo-section{border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;margin-bottom:20px;background:var(--bg)}
.photo-label{font-size:.9rem;font-weight:600;color:var(--dark);margin-bottom:12px;display:block}
.photo-optional{font-weight:400;color:var(--muted);font-size:.8rem}
.photo-zone{display:flex;align-items:center;gap:16px}
.photo-preview{width:64px;height:64px;border-radius:50%;background:var(--primary-light);border:2px dashed #c7d2fe;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.btn-browse-photo{display:inline-block;background:var(--primary-light);color:var(--primary-dark);padding:8px 18px;border-radius:50px;font-size:.875rem;font-weight:500;cursor:pointer;border:1px solid #c7d2fe;transition:background .2s}.btn-browse-photo:hover{background:#e0e7ff}
.btn-clear-photo{background:none;border:none;color:var(--danger);font-size:.8rem;cursor:pointer;text-decoration:underline}
.btn-generate{width:100%;background:var(--primary);color:white;border:none;padding:16px;border-radius:50px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 4px 14px rgba(99,102,241,.4);margin-bottom:24px}.btn-generate:hover:not(:disabled){background:var(--primary-dark);transform:translateY(-1px)}.btn-generate:disabled{opacity:.7;cursor:not-allowed;transform:none}
.features-list{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
.feature{font-size:.85rem;color:var(--muted);display:flex;align-items:center;gap:6px}
.feature span{color:var(--success);font-weight:700}
.alert{padding:14px 18px;border-radius:var(--radius);margin-bottom:20px;font-size:.9rem}
.alert-danger{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
.alert-warning{background:#fffbeb;color:#92400e;border:1px solid #fde68a}
.theme-page{max-width:1100px;margin:0 auto;padding:60px 24px}
.theme-page-header{text-align:center;margin-bottom:48px}
.theme-page-header h1{font-size:2rem;font-weight:700;color:var(--dark);margin-bottom:8px}.theme-page-header p{color:var(--muted);font-size:1.05rem}
.theme-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:40px}
.theme-card{border:2px solid var(--border);border-radius:20px;overflow:hidden;cursor:pointer;transition:all .25s;position:relative;background:white}
.theme-card:hover{border-color:var(--primary);box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.theme-card.selected{border-color:var(--primary);box-shadow:0 0 0 4px rgba(99,102,241,.15)}
.theme-selected-badge{position:absolute;top:12px;right:12px;background:var(--primary);color:white;padding:4px 12px;border-radius:50px;font-size:.75rem;font-weight:700;opacity:0;transition:opacity .2s}
.theme-card.selected .theme-selected-badge{opacity:1}
.theme-card-preview{height:200px;overflow:hidden;padding:12px;display:flex;flex-direction:column;gap:8px}
.minimal-preview{background:#0f172a}.creative-preview{background:#1c1917}.dark-preview{background:#0d1117}
.tp-nav{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border-radius:6px;background:rgba(255,255,255,.08);margin-bottom:4px}
.tp-logo{width:40px;height:8px;background:rgba(255,255,255,.4);border-radius:2px}
.tp-nav-links{display:flex;gap:6px}
.tp-nav-links span{width:20px;height:6px;background:rgba(255,255,255,.25);border-radius:2px}
.tp-hero{padding:10px;border-radius:8px;display:flex;align-items:center;gap:8px}
.tp-hero-dark{background:rgba(99,102,241,.15)}.tp-hero-warm{background:rgba(249,115,22,.15)}.tp-hero-black{background:rgba(88,166,255,.08)}
.tp-avatar{width:24px;height:24px;border-radius:50%;flex-shrink:0}
.tp-avatar-indigo{background:linear-gradient(135deg,#6366f1,#8b5cf6)}.tp-avatar-orange{background:linear-gradient(135deg,#f97316,#ec4899)}.tp-avatar-blue{background:linear-gradient(135deg,#58a6ff,#3fb950)}
.tp-lines{flex:1;display:flex;flex-direction:column;gap:4px}
.tp-line{height:6px;border-radius:2px}.tp-line.w70{width:70%}.tp-line.w45{width:45%}.tp-line.w80{width:80%}.tp-line.w60{width:60%}.tp-line.bold{height:8px}.tp-line.sm{height:4px}
.tp-line.white{background:rgba(255,255,255,.7)}.tp-line.indigo{background:#6366f1}.tp-line.gray{background:rgba(255,255,255,.2)}
.tp-line.orange{background:#f97316}.tp-line.warm-gray{background:rgba(255,255,255,.2)}
.tp-line.light{background:rgba(230,237,243,.7)}.tp-line.blue{background:#58a6ff}.tp-line.dark-gray{background:rgba(139,148,158,.4)}
.tp-section{padding:6px 8px;border-radius:6px;background:rgba(255,255,255,.05)}
.tp-section-warm{background:rgba(249,115,22,.05)}.tp-section-dark{background:rgba(88,166,255,.05)}
.tp-section-title{height:6px;width:50px;border-radius:2px;margin-bottom:6px}
.indigo-text{background:#6366f1}.orange-text{background:#f97316}.blue-text{background:#58a6ff}
.tp-badges{display:flex;gap:4px;flex-wrap:wrap}
.tp-badge{height:14px;width:40px;border-radius:50px}
.indigo-badge{background:rgba(99,102,241,.3)}.orange-badge{background:rgba(249,115,22,.3)}.pink-badge{background:rgba(236,72,153,.3)}.dark-badge{background:rgba(48,54,61,.8)}
.blue-b{background:rgba(88,166,255,.3)!important}.green-b{background:rgba(63,185,80,.3)!important}
.tp-cards-row{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.tp-mini-card{height:28px;background:rgba(255,255,255,.08);border-radius:4px}.tp-mini-card.warm{background:rgba(249,115,22,.12)}.tp-mini-card.dark-card{background:rgba(48,54,61,.6);border:1px solid rgba(48,54,61,.8)}
.theme-card-info{padding:16px 20px}
.theme-card-name{font-size:.95rem;font-weight:700;color:var(--dark);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.theme-dot-sm{width:10px;height:10px;flex-shrink:0}
.theme-card-desc{font-size:.85rem;color:var(--muted);line-height:1.5;margin-bottom:8px}
.theme-card-best{font-size:.78rem;font-weight:600;color:var(--primary);background:var(--primary-light);padding:3px 10px;border-radius:50px;display:inline-block;border:1px solid #c7d2fe}
.theme-actions{text-align:center}
.btn-apply-theme{background:var(--primary);color:white;border:none;padding:16px 40px;border-radius:50px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 4px 14px rgba(99,102,241,.4);margin-bottom:12px}.btn-apply-theme:hover{background:var(--primary-dark);transform:translateY(-2px)}
.theme-note{font-size:.85rem;color:var(--muted)}
.preview-page{display:flex;flex-direction:column;height:calc(100vh - 64px)}
.preview-toolbar{background:white;border-bottom:1px solid var(--border);padding:10px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;flex-shrink:0}
.toolbar-left{display:flex;align-items:center;gap:10px}.toolbar-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.preview-badge{background:#fef3c7;color:#92400e;padding:4px 12px;border-radius:50px;font-size:.8rem;font-weight:600}
.preview-slug{font-size:.85rem;color:var(--muted);font-family:monospace}
.success-msg{font-size:.85rem;color:var(--success);font-weight:500}
.btn-toolbar{padding:7px 14px;border-radius:8px;font-size:.825rem;font-weight:500;cursor:pointer;transition:all .2s;border:none;text-decoration:none!important;display:inline-block}
.btn-download{background:var(--primary-light);color:var(--primary-dark)!important;border:1px solid #c7d2fe}.btn-download:hover{background:#e0e7ff}
.btn-publish{background:var(--primary);color:white!important}.btn-publish:hover:not(:disabled){background:var(--primary-dark)}.btn-publish:disabled{background:var(--success);cursor:default}
.btn-new{background:var(--bg);color:var(--text)!important;border:1px solid var(--border)}.btn-new:hover{border-color:var(--primary);color:var(--primary)!important}
.btn-unlock{background:linear-gradient(135deg,var(--primary),#8b5cf6);color:white!important;border:none;box-shadow:0 2px 8px rgba(99,102,241,.4)}.btn-unlock:hover{opacity:.9;transform:translateY(-1px)}
.theme-picker{display:flex;align-items:center;gap:5px;background:var(--bg);border:1px solid var(--border);border-radius:50px;padding:3px 10px 3px 8px}
.theme-picker-label{font-size:.72rem;color:var(--muted);font-weight:500;margin-right:2px}
.theme-pick-btn{display:inline-flex;align-items:center;gap:4px;background:none;border:1.5px solid transparent;border-radius:50px;padding:3px 8px;font-size:.75rem;font-weight:500;color:var(--muted);cursor:pointer;transition:all .2s}.theme-pick-btn:hover{color:var(--text);border-color:var(--border);background:white}.theme-pick-btn.active{color:var(--primary-dark);background:var(--primary-light);border-color:#c7d2fe}
.payment-banner{background:linear-gradient(135deg,#1e1b4b,#312e81);padding:12px 24px;flex-shrink:0}
.payment-banner-inner{max-width:900px;margin:0 auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.payment-banner-icon{font-size:1.4rem}
.payment-banner-inner div{flex:1;font-size:.875rem;color:#c7d2fe}
.payment-banner-inner strong{color:white;display:block;margin-bottom:2px}
.btn-banner-pay{background:white;color:var(--primary-dark)!important;padding:7px 18px;border-radius:50px;font-size:.85rem;font-weight:600;white-space:nowrap;transition:all .2s;text-decoration:none!important}.btn-banner-pay:hover{background:#eef2ff;transform:translateY(-1px)}
.preview-frame-container{flex:1;overflow:hidden}.preview-frame{width:100%;height:100%;border:none}
.checkout-page{min-height:calc(100vh - 64px);display:flex;align-items:center;justify-content:center;padding:48px 24px}
.checkout-container{background:white;border-radius:20px;box-shadow:var(--shadow-lg);padding:48px;width:100%;max-width:480px;border:1px solid var(--border);text-align:center}
.checkout-icon{font-size:3rem;margin-bottom:12px}.checkout-header{margin-bottom:28px}
.checkout-header h1{font-size:1.6rem;font-weight:700;color:var(--dark);margin-bottom:8px}.checkout-header p{color:var(--muted)}
.pricing-card{background:var(--primary-light);border:2px solid #c7d2fe;border-radius:var(--radius);padding:28px;margin-bottom:20px}
.price-amount{font-size:3rem;font-weight:800;color:var(--primary-dark);line-height:1;margin-bottom:16px}
.price-label{font-size:1rem;font-weight:400;color:var(--muted);margin-left:4px}
.price-features{list-style:none;text-align:left;display:flex;flex-direction:column;gap:10px}
.price-features li{font-size:.925rem;color:var(--text);display:flex;align-items:center;gap:8px}
.preview-reminder{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.875rem;color:var(--muted);background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:12px 16px;margin-bottom:24px}
.btn-pay{width:100%;background:var(--primary);color:white;border:none;padding:16px;border-radius:50px;font-size:1.05rem;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 4px 14px rgba(99,102,241,.4);margin-bottom:16px}.btn-pay:hover{background:var(--primary-dark);transform:translateY(-1px)}
.secure-note{font-size:.8rem;color:var(--muted);margin-bottom:12px}
.card-logos{display:flex;justify-content:center;gap:8px}
.card-badge{background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:4px 10px;font-size:.75rem;font-weight:700;color:var(--muted)}
.edit-page{min-height:calc(100vh - 64px);background:var(--bg)}
.edit-header{background:white;border-bottom:1px solid var(--border);padding:18px 24px;position:sticky;top:64px;z-index:10}
.edit-header-inner{max-width:860px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.edit-header h1{font-size:1.25rem;font-weight:700;color:var(--dark)}.edit-header p{font-size:.875rem;color:var(--muted)}
.edit-body{max-width:860px;margin:0 auto;padding:28px 24px 80px}
.edit-section{background:white;border:1px solid var(--border);border-radius:var(--radius);padding:24px 28px;margin-bottom:20px}
.edit-section-title{font-size:1rem;font-weight:700;color:var(--dark);margin-bottom:18px;display:flex;align-items:center;gap:8px}
.edit-hint{font-size:.8rem;color:var(--muted);margin-bottom:8px}
.edit-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group label{font-size:.78rem;font-weight:600;color:var(--text);text-transform:uppercase;letter-spacing:.3px}
.form-input{border:1.5px solid var(--border);border-radius:8px;padding:10px 14px;font-size:.9rem;font-family:inherit;color:var(--text);background:var(--bg);transition:border-color .2s,box-shadow .2s;outline:none;resize:vertical}.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,.12)}
.edit-card{border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:14px;background:var(--bg)}
.edit-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.edit-card-num{font-size:.75rem;font-weight:700;color:var(--primary);background:var(--primary-light);padding:3px 10px;border-radius:50px;border:1px solid #c7d2fe}
.btn-remove-card{background:none;border:1px solid var(--border);color:var(--muted);width:28px;height:28px;border-radius:6px;cursor:pointer;font-size:.8rem;transition:all .2s;display:flex;align-items:center;justify-content:center}.btn-remove-card:hover{background:#fef2f2;color:#ef4444;border-color:#fecaca}
.btn-add-card{background:var(--primary-light);color:var(--primary-dark);border:1.5px dashed #c7d2fe;border-radius:var(--radius);padding:12px;width:100%;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-add-card:hover{background:#e0e7ff;border-style:solid}
.edit-save-bar{display:flex;gap:12px;align-items:center;position:sticky;bottom:0;background:white;border-top:1px solid var(--border);padding:14px 0;margin-top:28px}
.btn-save{background:var(--primary);color:white;border:none;padding:13px 28px;border-radius:50px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 4px 14px rgba(99,102,241,.4)}.btn-save:hover:not(:disabled){background:var(--primary-dark);transform:translateY(-1px)}.btn-save:disabled{opacity:.7;cursor:not-allowed}
.btn-cancel{color:var(--muted);font-size:.9rem;font-weight:500;padding:13px 20px}
@media(max-width:900px){.theme-cards{grid-template-columns:1fr}.landing-hero{grid-template-columns:1fr;padding:48px 20px;text-align:center;gap:40px}.hero-actions{justify-content:center}.hero-sub{margin:0 auto 32px}.upload-container{padding:32px 24px}.preview-toolbar{flex-direction:column;align-items:flex-start}}
@media(max-width:640px){.edit-grid-2{grid-template-columns:1fr}.hero-preview{display:none}.steps-grid{grid-template-columns:1fr}}
/* ================================
   THEME SWITCHER BAR
   ================================ */
.theme-bar {
    background: white;
    border-bottom: 1px solid var(--border);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.theme-bar-label {
    font-size: .82rem;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.theme-bar-options {
    display: flex;
    gap: 10px;
    flex: 1;
}

.theme-bar-right {
    margin-left: auto;
}

.theme-saving-msg {
    font-size: .8rem;
    color: var(--primary);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--primary-light);
    padding: 5px 14px;
    border-radius: 50px;
    border: 1px solid #c7d2fe;
}

/* Big theme buttons */
.theme-big-btn {
    display: flex;
    align-items: center;
    gap: 0;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: white;
    cursor: pointer;
    transition: all .2s;
    overflow: hidden;
    flex: 1;
    min-width: 0;
    padding: 0;
}

    .theme-big-btn:hover {
        border-color: var(--primary);
        box-shadow: 0 4px 16px rgba(99,102,241,.15);
        transform: translateY(-2px);
    }

/* Active states — each theme has its own color */
.theme-active-minimal {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.2) !important;
}

.theme-active-creative {
    border-color: #f97316 !important;
    box-shadow: 0 0 0 3px rgba(249,115,22,.2) !important;
}

.theme-active-dark {
    border-color: #58a6ff !important;
    box-shadow: 0 0 0 3px rgba(88,166,255,.2) !important;
}

/* Left preview strip */
.tbtn-preview {
    width: 52px;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
    padding: 10px 8px;
    flex-shrink: 0;
}

.tbtn-preview-minimal {
    background: linear-gradient(160deg, #0f172a 0%, #1e1b4b 100%);
}

.tbtn-preview-creative {
    background: linear-gradient(160deg, #1c1917 0%, #f97316 100%);
}

.tbtn-preview-dark {
    background: #0d1117;
    border-right: 1px solid #30363d;
}

/* Nav dot at top of preview strip */
.tbtn-nav-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-bottom: 2px;
    opacity: .9;
}

/* Traffic light dots for dark theme */
.tbtn-dots {
    display: flex;
    gap: 3px;
    margin-bottom: 2px;
}

    .tbtn-dots span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        flex-shrink: 0;
    }

/* Horizontal bars in preview strip */
.tbtn-bar {
    height: 4px;
    border-radius: 2px;
    display: block;
}

/* Right text body */
.tbtn-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 10px;
    flex: 1;
    text-align: left;
    min-width: 0;
}

.tbtn-name {
    font-size: .875rem;
    font-weight: 700;
    color: var(--dark);
    display: block;
}

.tbtn-desc {
    font-size: .75rem;
    color: var(--muted);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Checkmark — only visible when active */
.tbtn-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e2e8f0;
    color: transparent;
    font-size: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
    font-weight: 700;
    transition: all .2s;
}

.theme-active-minimal .tbtn-check {
    background: #6366f1;
    color: white;
}

.theme-active-creative .tbtn-check {
    background: #f97316;
    color: white;
}

.theme-active-dark .tbtn-check {
    background: #58a6ff;
    color: white;
}

/* Name color when active */
.theme-active-minimal .tbtn-name {
    color: #6366f1;
}

.theme-active-creative .tbtn-name {
    color: #f97316;
}

.theme-active-dark .tbtn-name {
    color: #58a6ff;
}

/* Responsive */
@media(max-width:640px) {
    .theme-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .theme-bar-options {
        width: 100%;
        flex-direction: column;
    }

    .theme-big-btn {
        flex: none;
        width: 100%;
    }

    .tbtn-preview {
        width: 44px;
        min-height: 52px;
    }
}