:root{--bg-primary: #07070d;--bg-secondary: #0c0c16;--surface-1: rgba(15, 15, 25, .8);--surface-2: rgba(20, 20, 35, .6);--surface-3: rgba(30, 30, 50, .4);--surface-card: rgba(14, 14, 24, .85);--border: rgba(255, 255, 255, .06);--border-hover: rgba(255, 255, 255, .14);--border-focus: rgba(139, 92, 246, .4);--accent-gold: #f59e0b;--accent-gold-hover: #d97706;--accent-gold-soft: rgba(245, 158, 11, .12);--accent-purple: #8b5cf6;--accent-purple-hover: #7c3aed;--accent-purple-soft: rgba(139, 92, 246, .12);--accent-purple-glow: rgba(139, 92, 246, .25);--text-primary: rgba(255, 255, 255, .92);--text-secondary: rgba(255, 255, 255, .55);--text-muted: rgba(255, 255, 255, .28);--text-inverse: #07070d;--font-heading: "Outfit", sans-serif;--font-body: "Inter", sans-serif;--font-mono: "JetBrains Mono", monospace;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-pill: 50px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--shadow-md: 0 4px 20px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 40px rgba(0, 0, 0, .5);--shadow-glow-purple: 0 0 30px rgba(139, 92, 246, .15);--shadow-glow-gold: 0 0 30px rgba(245, 158, 11, .15);--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-smooth: .4s cubic-bezier(.16, 1, .3, 1);--transition-bounce: .5s cubic-bezier(.34, 1.56, .64, 1)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-body);font-size:15px;line-height:1.6;color:var(--text-primary);background:var(--bg-primary);min-height:100vh;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;line-height:1.2}a{color:var(--accent-purple);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--accent-purple-hover)}button{font-family:var(--font-body);border:none;cursor:pointer;outline:none}input,textarea{font-family:var(--font-body);outline:none;border:none}::selection{background:var(--accent-purple-soft);color:var(--text-primary)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#fff3}#app{min-height:100vh;display:flex;flex-direction:column;position:relative}.hero-section{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:40px 24px;text-align:center;position:relative;overflow:hidden}.hero-section:before{content:"";position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;background:radial-gradient(circle,var(--accent-purple-soft) 0%,rgba(139,92,246,.03) 50%,transparent 70%);pointer-events:none;z-index:0}.hero-section:after{content:"";position:absolute;top:40%;left:55%;transform:translate(-50%,-50%);width:500px;height:500px;background:radial-gradient(circle,var(--accent-gold-soft) 0%,rgba(245,158,11,.02) 50%,transparent 70%);pointer-events:none;z-index:0}.hero-content{position:relative;z-index:1;max-width:700px;width:100%}.hero-emoji{font-size:4rem;margin-bottom:16px;display:block;animation:float 3s ease-in-out infinite}.hero-title{font-size:clamp(2.2rem,6vw,4.2rem);font-weight:800;letter-spacing:-.02em;margin-bottom:16px;background:linear-gradient(135deg,#fff,#ffffffb3);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{color:var(--text-secondary);font-size:1.1rem;max-width:480px;margin:0 auto 40px;line-height:1.6}.input-area{max-width:580px;width:100%;margin:0 auto;position:relative}.main-input{width:100%;padding:20px 28px;font-size:1.05rem;color:var(--text-primary);background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-xl);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:all var(--transition-normal)}.main-input::placeholder{color:var(--text-muted)}.main-input:focus{border-color:var(--border-focus);box-shadow:0 0 0 4px #8b5cf614,var(--shadow-glow-purple)}.input-hint{margin-top:12px;font-size:.8rem;color:var(--text-muted)}.input-hint a{color:var(--accent-purple);cursor:pointer}.suggestion-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:32px;max-width:580px}.chat-section{max-width:700px;width:100%;margin:0 auto;padding:80px 24px 120px;display:flex;flex-direction:column;gap:16px;min-height:100vh}.chat-input-area{position:fixed;bottom:0;left:0;right:0;padding:16px 24px 24px;background:linear-gradient(transparent,var(--bg-primary) 30%);z-index:50;display:flex;justify-content:center}.chat-input-wrapper{max-width:660px;width:100%;position:relative}.chat-input{width:100%;padding:16px 24px;font-size:.95rem;color:var(--text-primary);background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-xl);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:all var(--transition-normal)}.chat-input:focus{border-color:var(--border-focus);box-shadow:0 0 0 4px #8b5cf614}.kit-section{max-width:1100px;width:100%;margin:0 auto;padding:60px 24px 100px}.kit-header{text-align:center;margin-bottom:48px}.kit-emoji{font-size:3.5rem;margin-bottom:12px;display:block}.kit-title{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;margin-bottom:8px;background:linear-gradient(135deg,#fff,#ffffffa6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.kit-meta{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px}.kit-count{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;font-size:.8rem;font-weight:500;color:var(--text-secondary);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-pill)}.kit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:20px}.api-key-bar{position:fixed;top:0;left:0;right:0;padding:10px 24px;background:var(--surface-1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;z-index:100;transform:translateY(-100%);transition:transform var(--transition-smooth)}.api-key-bar.visible{transform:translateY(0)}.api-key-bar .key-display{font-family:var(--font-mono);font-size:.78rem;color:var(--text-muted)}.api-key-bar .key-actions{display:flex;gap:8px}.api-key-bar button{padding:5px 14px;font-size:.75rem;border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text-secondary);border:1px solid var(--border);transition:all var(--transition-fast)}.api-key-bar button:hover{color:var(--text-primary);border-color:var(--border-hover)}.footer{text-align:center;padding:40px 24px;font-size:.78rem;color:var(--text-muted)}.footer a{color:var(--text-muted);text-decoration:underline;text-underline-offset:2px}.history-section{max-width:700px;width:100%;margin:0 auto;padding:0 24px 40px}.history-title{font-size:1rem;font-weight:600;color:var(--text-secondary);margin-bottom:16px;text-align:center}.history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:16px}.history-card{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal)}.history-card:hover{border-color:var(--border-hover);background:var(--surface-1);transform:translateY(-1px)}.history-card-emoji{font-size:1.3rem;flex-shrink:0}.history-card-name{font-size:.82rem;font-weight:600;color:var(--text-primary);font-family:var(--font-heading);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-card-meta{font-size:.7rem;color:var(--text-muted);flex-shrink:0}.history-clear{display:block;margin:0 auto;padding:6px 16px;font-size:.72rem;color:var(--text-muted);background:transparent;border:none;cursor:pointer;transition:color var(--transition-fast)}.history-clear:hover{color:var(--text-secondary)}.upsell-bar{text-align:center;padding:20px 24px;font-size:.88rem;color:var(--text-secondary);background:var(--accent-purple-soft);border:1px solid rgba(139,92,246,.15);border-radius:var(--radius-lg);margin:24px auto 0;max-width:600px}.upsell-link{color:var(--accent-purple);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px}.restart-area{text-align:center;margin-top:48px;padding-bottom:40px}.restart-button{padding:14px 36px;font-size:.9rem;font-weight:600;font-family:var(--font-heading);color:var(--text-secondary);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-pill);transition:all var(--transition-normal)}.restart-button:hover{color:var(--text-primary);border-color:var(--border-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:200;padding:24px;animation:fadeIn .3s ease}.modal-card{background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:36px;max-width:440px;width:100%;-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);box-shadow:var(--shadow-lg);animation:cardReveal .4s var(--transition-smooth)}.modal-card h2{font-size:1.5rem;margin-bottom:10px}.modal-card p{color:var(--text-secondary);font-size:.9rem;margin-bottom:20px;line-height:1.6}.modal-card .modal-input{width:100%;padding:14px 20px;font-size:.9rem;color:var(--text-primary);background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:16px;transition:border-color var(--transition-fast)}.modal-card .modal-input:focus{border-color:var(--border-focus)}.modal-card .modal-submit{width:100%;padding:14px;font-size:.95rem;font-weight:700;font-family:var(--font-heading);color:var(--text-inverse);background:var(--accent-gold);border-radius:var(--radius-md);transition:all var(--transition-fast);text-transform:uppercase;letter-spacing:.5px}.modal-card .modal-submit:hover{background:var(--accent-gold-hover)}.modal-card .modal-link{display:block;text-align:center;margin-top:12px;font-size:.8rem;color:var(--accent-purple)}@media(max-width:768px){.kit-grid{grid-template-columns:1fr}.hero-emoji{font-size:3rem}.main-input{padding:16px 20px;font-size:.95rem}.suggestion-chips{gap:8px}.kit-section{padding:40px 16px 80px}.chat-section{padding:70px 16px 110px}}@media(max-width:480px){.hero-subtitle{font-size:.95rem}.kit-grid{gap:14px}}.chip{padding:10px 20px;font-size:.85rem;font-weight:500;color:var(--text-secondary);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-pill);cursor:pointer;transition:all var(--transition-normal);-webkit-user-select:none;user-select:none}.chip:hover{color:var(--text-primary);border-color:var(--border-hover);transform:translateY(-2px);box-shadow:var(--shadow-sm);background:var(--surface-1)}.chip:active{transform:translateY(0)}.chat-bubble-wrapper{display:flex;align-items:flex-start;gap:8px;animation:fadeInUp .4s ease both}.chat-bubble-wrapper.user{flex-direction:row-reverse;align-self:flex-end}.chat-bubble-wrapper.ai{align-self:flex-start}.bubble-retry{flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:.9rem;color:var(--text-muted);background:transparent;border:1px solid transparent;border-radius:50%;cursor:pointer;transition:all var(--transition-fast);margin-top:8px;opacity:0}.chat-bubble-wrapper:hover .bubble-retry{opacity:1}.bubble-retry:hover{color:var(--accent-purple);background:var(--accent-purple-soft);border-color:#8b5cf633}.chat-bubble{max-width:85%;padding:16px 22px;border-radius:var(--radius-lg);line-height:1.6;font-size:.95rem}.chat-bubble.user{background:#8b5cf61a;border:1px solid rgba(139,92,246,.15);color:var(--text-primary)}.chat-bubble.ai{background:var(--surface-1);border:1px solid var(--border);color:var(--text-primary);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.chat-bubble.ai .ai-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-purple);margin-bottom:8px;font-family:var(--font-heading)}.product-card{background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:all var(--transition-smooth);opacity:0;transform:translateY(30px) scale(.97);display:flex;flex-direction:column}.product-card.visible{opacity:1;transform:translateY(0) scale(1)}.product-card:hover{border-color:var(--border-hover);transform:translateY(-4px) scale(1);box-shadow:0 12px 40px #0000004d,var(--shadow-glow-purple)}.product-card .product-number{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;font-size:.75rem;font-weight:700;font-family:var(--font-mono);color:var(--accent-purple);background:var(--accent-purple-soft);border-radius:50%;margin-bottom:14px}.product-card .product-category{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);font-family:var(--font-heading);margin-bottom:12px}.product-image-container{width:100%;height:180px;border-radius:var(--radius-sm);overflow:hidden;margin-bottom:16px;background:var(--surface-2)}.product-image{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-smooth)}.product-card:hover .product-image{transform:scale(1.05)}.product-card .product-title{font-family:var(--font-heading);font-weight:700;font-size:1rem;color:var(--text-primary);margin-bottom:10px;line-height:1.3}.product-card .product-desc{font-size:.8rem;color:var(--text-secondary);line-height:1.55;margin-bottom:12px}.product-card .product-why{font-size:.8rem;font-style:italic;color:#ffffffa6;padding:0 0 0 14px;border-left:2px solid var(--accent-purple);margin-bottom:18px;line-height:1.5}.product-card .product-price{font-family:var(--font-mono);font-weight:600;font-size:1.05rem;color:var(--accent-gold);margin-bottom:18px}.product-card .product-bottom{margin-top:auto}.buy-button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px 20px;font-size:.85rem;font-weight:800;font-family:var(--font-heading);text-transform:uppercase;letter-spacing:.8px;color:#111;background:linear-gradient(135deg,#fbbf24,#f59e0b);border:none;border-radius:var(--radius-pill);transition:all var(--transition-normal);text-decoration:none;box-shadow:0 4px 15px #f59e0b33}.buy-button:hover{background:linear-gradient(135deg,#fcd34d,#fbbf24);color:#000;box-shadow:0 6px 20px #f59e0b66;transform:translateY(-2px)}.buy-button:after{content:"↗";font-size:.9rem}.buy-button:active{transform:translateY(0)}.loading-card{align-self:flex-start;max-width:85%;background:var(--surface-card);border:1px solid rgba(139,92,246,.2);border-radius:var(--radius-lg);padding:20px 24px;display:flex;align-items:center;gap:16px;animation:fadeIn .4s ease,pulseGlow 2s infinite ease-in-out}.loading-spinner-wrapper{flex-shrink:0;display:flex;align-items:center;justify-content:center}.loading-spinner{width:24px;height:24px;border:2px solid rgba(139,92,246,.2);border-top-color:var(--accent-purple);border-radius:50%;animation:spin 1s linear infinite}.loading-title{font-family:var(--font-heading);font-weight:700;font-size:.95rem;color:var(--text-primary);margin-bottom:2px}.loading-subtitle{font-size:.75rem;color:var(--text-muted)}.error-bubble{align-self:flex-start;max-width:85%;padding:14px 20px;border-radius:var(--radius-lg);background:#ef444414;border:1px solid rgba(239,68,68,.2);color:#fca5a5;font-size:.9rem;animation:fadeInUp .4s ease both;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.error-retry{padding:6px 16px;font-size:.8rem;font-weight:600;font-family:var(--font-heading);color:#fca5a5;background:#ef44441f;border:1px solid rgba(239,68,68,.25);border-radius:var(--radius-pill);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.error-retry:hover{background:#ef444433;border-color:#ef444466;color:#fee2e2}.powered-by{text-align:center;padding:24px;font-size:.75rem;color:var(--text-muted);letter-spacing:.02em}.powered-by span{color:var(--accent-purple);font-weight:500}.affiliate-disclosure{text-align:center;font-size:.7rem;color:var(--text-muted);padding:12px 20px;margin-top:8px;opacity:.6}@keyframes fadeInUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideDown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes pulseGlow{0%,to{box-shadow:0 0 20px #8b5cf61a}50%{box-shadow:0 0 40px #8b5cf633}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes cardReveal{0%{opacity:0;transform:scale(.93) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}.stagger-0{transition-delay:0ms}.stagger-1{transition-delay:.1s}.stagger-2{transition-delay:.2s}.stagger-3{transition-delay:.3s}.stagger-4{transition-delay:.4s}.stagger-5{transition-delay:.5s}.stagger-6{transition-delay:.6s}.stagger-7{transition-delay:.7s}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
