@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";
:root{--bg-color:#0f172a;--text-primary:#f8fafc;--text-secondary:#94a3b8;--accent-color:#f59e0b;--accent-hover:#d97706;--card-bg:#1e293b;--border-color:#334155;--shadow-sm:0 4px 12px #0000004d;--shadow-md:0 8px 30px #00000080}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Outfit,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.6}.hero-container{text-align:center;flex-direction:column;align-items:center;max-width:1200px;min-height:100vh;margin:0 auto;padding:6rem 2rem;display:flex}.badge{color:var(--accent-color);border:1px solid var(--accent-color);background:#fff;border-radius:99px;margin-bottom:2rem;padding:.5rem 1rem;font-size:.875rem;font-weight:600;display:inline-block}.hero-title{color:var(--text-primary);letter-spacing:-.02em;margin-bottom:1.5rem;font-size:4rem;font-weight:700;line-height:1.1}.hero-title span{color:var(--accent-color);display:block}.hero-subtitle{color:var(--text-secondary);max-width:500px;margin-bottom:3rem;font-size:1.25rem}.btn-primary{background-color:var(--accent-color);color:#fff;cursor:pointer;box-shadow:var(--shadow-sm);border:none;border-radius:99px;padding:1rem 3rem;font-size:1.125rem;font-weight:600;text-decoration:none;transition:all .2s;display:inline-block}.btn-primary:hover{background-color:var(--accent-hover);box-shadow:var(--shadow-md);transform:translateY(-2px)}.btn-secondary{background-color:var(--bg-color);color:var(--text-primary);border:1px solid var(--border-color);cursor:pointer;border-radius:99px;padding:1rem 3rem;font-size:1.125rem;font-weight:600;transition:all .2s;display:inline-block}.btn-secondary:hover{border-color:var(--text-secondary);box-shadow:var(--shadow-sm);background-color:#f0ebe1;transform:translateY(-2px)}.btn-text{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:8px;padding:.5rem 1rem;font-size:1rem;font-weight:600;text-decoration:underline;transition:all .2s}.btn-text:hover{color:var(--text-primary);background-color:#4a403a0d}.btn-result{background-color:var(--bg-color);color:var(--text-secondary);border:1px solid var(--border-color);cursor:pointer;border-radius:99px;justify-content:center;align-items:center;width:100%;max-width:300px;padding:1rem 2rem;font-size:1.125rem;font-weight:600;transition:all .3s cubic-bezier(.175,.885,.32,1.275);display:flex}.btn-result:hover{background-color:var(--text-primary);color:#fff;border-color:var(--text-primary);box-shadow:var(--shadow-md);transform:scale(1.05)}.preview-card-wrapper{aspect-ratio:2.125/3.375;background:var(--card-bg);width:100%;max-width:280px;box-shadow:var(--shadow-md);border:1px solid var(--border-color);border-radius:20px;flex-direction:column;margin-top:1rem;padding:1.5rem;display:flex;position:relative;overflow:hidden}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-15px)}to{transform:translateY(0)}}.preview-photo{aspect-ratio:1;background-color:var(--border-color);border-radius:12px;width:100%;margin-bottom:1.5rem}.preview-lines{flex-direction:column;gap:.75rem;display:flex}.preview-line{background-color:var(--border-color);border-radius:99px;width:80%;height:12px}.preview-line.short{width:40%}.preview-line.medium{width:60%}.create-container{grid-template-columns:.85fr 1.15fr;gap:2rem;max-width:1000px;margin:0 auto;padding:2rem;display:grid}@media (max-width:768px){.create-container{grid-template-columns:1fr;gap:3rem}}.form-section{background:var(--card-bg);box-shadow:var(--shadow-sm);border:1px solid var(--border-color);border-radius:20px;padding:1.2rem}.form-group{margin-bottom:1rem}.form-group label{color:var(--text-primary);margin-bottom:.4rem;font-size:.85rem;font-weight:600;display:block}.form-group input,.form-group select{border:1px solid var(--border-color);background:var(--bg-color);width:100%;color:var(--text-primary);border-radius:12px;outline:none;padding:.8rem;font-family:inherit;font-size:.9rem;transition:all .2s}.form-group input:focus,.form-group select:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px #e8b4b833}.image-upload-box{aspect-ratio:1;text-align:center;cursor:pointer;background:#e8b4b80d;border:2px dashed #94a3b8;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;width:60%;max-width:240px;margin:0 auto 2rem;transition:all .2s;display:flex;position:relative;overflow:hidden}.image-upload-box:hover{background:#e8b4b81a}.image-upload-box img{object-fit:cover;z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}.image-upload-box p{color:var(--text-secondary);z-index:2;font-weight:500}.preview-section{justify-content:center;align-items:flex-start;display:flex;position:sticky;top:4rem}.preview-photo{aspect-ratio:1;background-color:var(--border-color);border-radius:12px;justify-content:center;align-items:center;width:100%;margin-bottom:1.5rem;display:flex;position:relative;overflow:hidden}.preview-photo img{object-fit:cover;width:100%;height:100%}.page-title{margin-bottom:2rem;font-size:2.5rem;font-weight:700}.form-submit-btn{width:100%;margin-top:1rem}@keyframes gradientBG{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.gradient-bg{z-index:0;position:relative}.gradient-bg:before{content:"";z-index:-2;pointer-events:none;background:linear-gradient(-45deg,#fff5f5,#fdf2f8,#f0fdf4,#f8fafc);position:fixed;inset:0}@keyframes breatheDark{0%{opacity:0}66%{opacity:1}to{opacity:0}}.breathe-btn{animation:9s ease-in-out infinite breatheButton;transition:transform .3s,box-shadow .3s,background-color .3s,color .3s!important}.breathe-btn.free-btn:hover{color:#fff!important;background-color:#6896ff!important;border-color:#6896ff!important;transform:scale(1.05)translateY(-2px)!important;box-shadow:0 10px 20px #6896ff66!important}.breathe-btn.premium-btn:hover{color:#fff!important;background-color:#eab308!important;border-color:#ca8a04!important;transform:scale(1.05)translateY(-2px)!important;box-shadow:0 10px 20px #eab30866!important}@keyframes breatheButton{0%{color:#334155;background-color:#ffffffe6;border-color:#94a3b8}66%{color:#fff;background-color:#000;border-color:#000}to{color:#334155;background-color:#ffffffe6;border-color:#94a3b8}}.breathe-panel{animation:9s ease-in-out infinite breathePanel}@keyframes breathePanel{0%{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background-color:#fff0;box-shadow:0 8px 32px #1f26870d}66%{box-shadow:none;-webkit-backdrop-filter:blur();backdrop-filter:blur();background-color:#0000}to{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background-color:#fff0;box-shadow:0 8px 32px #1f26870d}}.breathe-panel-text{animation:9s ease-in-out infinite breathePanelText}@keyframes breathePanelText{0%{color:#475569}66%{color:#fff}to{color:#475569}}.sync-btn-bg{animation:6s ease-in-out infinite syncBtn}@keyframes syncBtn{0%{color:#334155;background-color:#ffffffe6;border-color:#94a3b8}50%{color:#fff;background-color:#151025;border-color:#fff3}to{color:#334155;background-color:#ffffffe6;border-color:#94a3b8}}.sync-glass-bg{animation:6s ease-in-out infinite syncGlass}@keyframes syncGlass{0%{color:#475569;background-color:#fff6;border-color:#ffffff80}50%{color:#fff;background-color:#151025;border-color:#ffffff1a}to{color:#475569;background-color:#fff6;border-color:#ffffff80}}.glass-panel{-webkit-backdrop-filter:blur(12px);background:#fff6;box-shadow:0 8px 32px #1f26870d}.premium-badge{color:#854d0e;background:linear-gradient(135deg,#fef08a 0%,#fde047 100%);border:1px solid #fde047;font-weight:700;box-shadow:0 4px 10px #fde0474d}@keyframes neonCatFlash{0%,44%{opacity:0;transform:translate(calc(100px - 50%),calc(220px - 50%))scale(.95)}45%,66%{opacity:.85;filter:drop-shadow(0 0 20px #fff6);transform:translate(calc(100px - 50%),calc(220px - 50%))scale(1)}to{opacity:0;transform:translate(calc(100px - 50%),calc(220px - 50%))scale(1.05)}}.neon-cat-overlay{opacity:0;mix-blend-mode:screen;pointer-events:none;z-index:1;width:160vw;max-width:1280px;height:auto;animation:9s ease-in-out infinite neonCatFlash;position:absolute;top:50%;left:50%;transform:translate(calc(100px - 50%),calc(220px - 50%));-webkit-mask-image:linear-gradient(#000 35%,#0000 50%);mask-image:linear-gradient(#000 35%,#0000 50%)}
