@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap";:root{--bg-primary:#0f1219;--bg-secondary:#181c25;--bg-tertiary:#262a36;--bg-glow:#00ccf514;--border-color:#2f3441;--border-glow:#00ccf5;--text-primary:#f9fafb;--text-secondary:#c5ccd3;--text-muted:#818c98;--color-primary:#00ccf5;--color-primary-hover:#00b2d6;--color-secondary:#9855f6;--color-secondary-hover:#83f;--color-success:#06e061;--color-warning:#f9a006;--color-danger:#fa3858;--font-sans:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", monospace;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-normal:.25s cubic-bezier(.4, 0, .2, 1);--shadow-sm:0 4px 12px #0006;--shadow-md:0 8px 24px #0009;--shadow-lg:0 16px 48px #000c}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-primary);color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.6;overflow-x:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}:root{--bg-primary:#080a0f;--bg-secondary:#0d111cb3;--bg-tertiary:#161c2dd9;--border-color:#ffffff14;--text-primary:#f8fafc;--text-secondary:#cbd5e1;--text-muted:#64748b;--color-primary:#00f0ff;--color-primary-rgb:0, 240, 255;--color-secondary:#bd5cff;--color-secondary-rgb:189, 92, 255;--color-success:#22c55e;--color-warning:#eab308;--color-danger:#ef4444;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-xl:30px;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-normal:.25s cubic-bezier(.4, 0, .2, 1)}.app-layout{background-color:var(--bg-primary);flex-direction:column;min-height:100vh;display:flex;position:relative;overflow-x:hidden}.glow-blob-1,.glow-blob-2{filter:blur(120px);z-index:0;pointer-events:none;opacity:.45;border-radius:50%;position:fixed}.glow-blob-1{background:radial-gradient(circle,#00f0ff26 0%,#0000 70%);width:40vw;height:40vw;animation:25s ease-in-out infinite alternate float-glow-1;top:-10%;left:-10%}.glow-blob-2{background:radial-gradient(circle,#bd5cff26 0%,#0000 70%);width:45vw;height:45vw;animation:30s ease-in-out infinite alternate float-glow-2;bottom:-10%;right:-10%}@keyframes float-glow-1{0%{transform:translate(0)scale(1)}50%{transform:translate(5vw,5vh)scale(1.1)}to{transform:translate(-2vw,10vh)scale(.9)}}@keyframes float-glow-2{0%{transform:translate(0)scale(.9)}50%{transform:translate(-6vw,-8vh)scale(1.15)}to{transform:translate(2vw,4vh)scale(1)}}.header{-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border-color);z-index:50;background-color:#080a0fbf;justify-content:space-between;align-items:center;height:76px;padding:0 40px;display:flex;position:sticky;top:0}.brand{align-items:center;gap:14px;display:flex}.logo-icon{background:linear-gradient(135deg, var(--color-primary), var(--color-secondary));border-radius:var(--radius-sm);color:#000;justify-content:center;align-items:center;width:36px;height:36px;font-size:20px;font-weight:800;display:flex;box-shadow:0 0 20px #00f0ff66}.logo-text{letter-spacing:-.8px;background:linear-gradient(135deg, var(--color-primary) 30%, var(--text-primary) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:22px;font-weight:800}.tagline{color:var(--text-muted);font-size:9px;font-family:var(--font-mono);border:1px solid var(--border-color);letter-spacing:1px;text-transform:uppercase;background-color:#ffffff08;border-radius:20px;padding:4px 10px}.header-actions{align-items:center;gap:16px;display:flex}.workspace-container{z-index:10;flex-direction:column;gap:48px;width:100%;max-width:1100px;margin:0 auto;padding:60px 24px 100px;display:flex;position:relative}.hero-block{text-align:center;flex-direction:column;gap:16px;max-width:700px;margin:0 auto 10px;display:flex}.hero-title{letter-spacing:-2px;background:linear-gradient(180deg, var(--text-primary) 0%, #ffffffa6 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:48px;font-weight:800;line-height:1.1}.hero-desc{color:var(--text-secondary);font-size:16px;line-height:1.6}.section-card{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(24px);flex-direction:column;gap:28px;padding:40px;display:flex;position:relative;overflow:hidden;box-shadow:0 25px 50px -12px #0009,inset 0 1px #ffffff0d}.section-card:before{content:"";background:linear-gradient(90deg, var(--color-primary), var(--color-secondary));z-index:10;opacity:.8;height:3px;position:absolute;top:0;left:0;right:0}.section-header{border-bottom:1px solid var(--border-color);align-items:center;gap:20px;margin-bottom:8px;padding-bottom:20px;display:flex}.section-num{font-family:var(--font-mono);color:#000;background:linear-gradient(135deg, var(--color-primary), var(--color-secondary));border-radius:var(--radius-sm);justify-content:center;align-items:center;width:40px;height:40px;font-size:15px;font-weight:800;display:flex;box-shadow:0 0 15px #00f0ff4d}.section-title{letter-spacing:-.8px;color:var(--text-primary);font-size:22px;font-weight:800}.templates-carousel{scroll-snap-type:x mandatory;gap:20px;padding-bottom:16px;display:flex;overflow-x:auto}.template-card{scroll-snap-align:start;border:1px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);background-color:#ffffff05;flex-direction:column;flex:0 0 250px;gap:12px;padding:24px;display:flex}.template-card:hover{background-color:#ffffff0a;border-color:#00f0ff80;transform:translateY(-4px);box-shadow:0 10px 20px #00f0ff0d}.template-card.active{border-color:var(--color-primary);background:linear-gradient(#ffffff08,#00f0ff0a);box-shadow:0 0 20px #00f0ff1a,inset 0 1px #00f0ff33}.card-tag{font-family:var(--font-mono);color:var(--color-primary);text-transform:uppercase;letter-spacing:1px;font-size:9px;font-weight:700}.card-title{letter-spacing:-.3px;font-size:17px;font-weight:800}.card-desc{color:var(--text-muted);font-size:13px;line-height:1.5}.inputs-grid{grid-template-columns:1fr 1fr;gap:24px;display:grid}.blank-group{flex-direction:column;gap:10px;display:flex}.blank-label{text-transform:uppercase;color:var(--text-secondary);font-size:11px;font-weight:700;font-family:var(--font-mono);letter-spacing:.8px}.blank-input{border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);transition:all var(--transition-fast);background-color:#ffffff08;outline:none;width:100%;padding:16px;font-family:inherit;font-size:15px}.blank-input:focus{border-color:var(--color-primary);background-color:#ffffff0d;box-shadow:0 0 20px #00f0ff26}.custom-editor-text{resize:vertical;min-height:140px;font-size:16px;line-height:1.6}.results-grid{grid-template-columns:1fr 1.25fr;align-items:flex-start;gap:40px;display:grid}.phone-panel{flex-direction:column;align-items:center;gap:28px;display:flex}.phone-mockup-wrapper{padding:10px;position:relative}.phone-mockup-wrapper:after{content:"";background:linear-gradient(135deg, var(--color-primary), var(--color-secondary));filter:blur(35px);z-index:0;opacity:.15;pointer-events:none;position:absolute;inset:5%}.phone-mockup{width:320px;height:640px;transition:background-image var(--transition-normal);z-index:1;background-color:#0b0d12;background-position:50%;background-size:cover;border:14px solid #1c1f26;border-radius:50px;flex-direction:column;justify-content:flex-end;padding:36px;display:flex;position:relative;overflow:hidden;box-shadow:0 30px 60px -20px #000c,0 0 0 1px #ffffff0d}.phone-mockup:before{content:"";z-index:1;background:linear-gradient(#0000000d 0%,#0006 85%);position:absolute;inset:0}.simulated-caption-wrapper{z-index:2;text-align:center;width:100%;margin-bottom:90px;padding:12px}.simulated-caption{text-shadow:2.5px 2.5px #000,-2.5px -2.5px #000,2.5px -2.5px #000,-2.5px 2.5px #000;font-family:Arial Black,Impact,sans-serif;line-height:1.4}.simulated-caption span{margin:0 4px;display:inline-block}.simulated-caption .word-highlight{animation:.15s cubic-bezier(.175,.885,.32,1.275) popIn;transform:scale(1.15)}.phone-notch{z-index:10;background-color:#1c1f26;border-radius:0 0 16px 16px;width:130px;height:26px;position:absolute;top:0;left:50%;transform:translate(-50%)}.analytics-panel{flex-direction:column;gap:28px;display:flex}.score-summary-card{border:1px solid var(--border-color);border-radius:var(--radius-lg);background:linear-gradient(135deg,#ffffff05 0%,#ffffff03 100%);align-items:center;gap:28px;padding:32px;display:flex;position:relative;box-shadow:inset 0 1px #ffffff0d}.overall-score-circle{background:radial-gradient(circle,#111620cc 50%,#0000 100%);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:110px;height:110px;animation:3s ease-in-out infinite alternate pulse-border;display:flex;position:relative;box-shadow:0 0 25px #00f0ff1a}@keyframes pulse-border{0%{box-shadow:0 0 15px #00f0ff14}to{box-shadow:0 0 30px #00f0ff38}}.overall-score-num{color:var(--color-primary);letter-spacing:-1px;font-size:42px;font-weight:800;line-height:1}.overall-score-label{text-transform:uppercase;color:var(--text-muted);font-size:9px;font-family:var(--font-mono);letter-spacing:1px;margin-top:4px}.grade-badge{background:linear-gradient(135deg, var(--color-primary), var(--color-secondary));color:#000;width:36px;height:36px;box-shadow:0 0 15px var(--color-primary);border:2px solid var(--bg-primary);border-radius:50%;justify-content:center;align-items:center;font-size:16px;font-weight:900;display:flex;position:absolute;top:-12px;right:-12px}.score-stats{flex-direction:column;flex:1;gap:8px;display:flex}.score-title{letter-spacing:-.5px;font-size:22px;font-weight:800}.score-rating{letter-spacing:.5px;text-transform:uppercase;font-size:14px;font-weight:700}.form-select{border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);transition:all var(--transition-fast);cursor:pointer;background-color:#ffffff08;outline:none;padding:12px 16px;font-family:inherit;font-size:13px}.form-select option{color:#f8fafc!important;background-color:#0d0f14!important}.form-select:focus{border-color:var(--color-primary);box-shadow:0 0 15px #00f0ff1a}.metric-row{border-radius:var(--radius-md);background-color:#ffffff03;border:1px solid #ffffff05;flex-direction:column;gap:8px;padding:12px 16px;display:flex}.metric-meta{justify-content:space-between;align-items:center;font-size:13px;display:flex}.metric-name{color:var(--text-secondary);align-items:center;gap:8px;font-weight:700;display:flex}.metric-val{font-family:var(--font-mono);font-weight:700}.progress-track{background-color:#ffffff08;border:1px solid #ffffff05;border-radius:4px;width:100%;height:8px;overflow:hidden}.progress-fill{background-color:var(--color-primary);height:100%;transition:width .4s cubic-bezier(.4,0,.2,1)}.ai-variation-card{border:1px solid var(--border-color);border-radius:var(--radius-md);background-color:#ffffff04;flex-direction:column;gap:12px;padding:16px;transition:border-color .2s;display:flex}.ai-variation-card:hover{border-color:#bd5cff66}.ai-meta{justify-content:space-between;align-items:center;display:flex}.ai-avatar{font-family:var(--font-mono);color:var(--color-secondary);text-transform:uppercase;align-items:center;gap:8px;font-size:10px;font-weight:700;display:flex}.ai-avatar svg{color:var(--color-secondary)}.customizer-card{border:1px solid var(--border-color);border-radius:var(--radius-md);background-color:#ffffff03;padding:20px}.tips-list{flex-direction:column;gap:12px;display:flex}.tip-item{border-radius:var(--radius-md);border-left:3px solid var(--color-primary);border-top:1px solid var(--border-color);border-right:1px solid var(--border-color);border-bottom:1px solid var(--border-color);background-color:#ffffff05;gap:14px;padding:16px 20px;font-size:13px;line-height:1.5;display:flex;box-shadow:0 4px 12px #00000026}.tip-text{color:var(--text-secondary)}.word-pill{border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;text-align:center;transition:all var(--transition-fast);color:var(--text-secondary);background-color:#ffffff05;padding:8px 14px;font-size:12px}.word-pill:hover{border-color:var(--color-primary);color:var(--color-primary);background-color:#00f0ff14;transform:translateY(-1px);box-shadow:0 4px 10px #00f0ff1a}.btn{background:linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);color:#000;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);border:none;justify-content:center;align-items:center;gap:10px;width:100%;padding:16px 28px;font-family:inherit;font-size:15px;font-weight:800;display:inline-flex;box-shadow:0 4px 20px #00f0ff33}.btn:hover{background:var(--color-primary);transform:translateY(-1px);box-shadow:0 6px 24px #00f0ff59}.btn:active{transform:translateY(1px)}.btn-secondary{color:var(--text-primary);border:1px solid var(--border-color);box-shadow:none;background:#ffffff08}.btn-secondary:hover{background:#ffffff0f;border-color:#ffffff26;box-shadow:0 4px 12px #0003}.btn-accent{background:linear-gradient(135deg, var(--color-primary), var(--color-secondary));color:var(--text-primary);box-shadow:0 4px 20px #bd5cff40}.btn-accent:hover{box-shadow:0 6px 24px #bd5cff66}.toast{border:1px solid var(--color-success);border-radius:var(--radius-md);z-index:110;box-shadow:var(--shadow-lg);opacity:0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background-color:#161c2df2;align-items:center;gap:10px;padding:12px 24px;font-weight:600;transition:transform .3s cubic-bezier(.175,.885,.32,1.275),opacity .3s;display:flex;position:fixed;bottom:32px;left:50%;transform:translate(-50%)translateY(100px)}.toast.show{opacity:1;transform:translate(-50%)translateY(0)}.spinner{border:2px solid #00000026;border-top-color:#000;border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=860px){.results-grid{grid-template-columns:1fr;gap:40px}.inputs-grid{grid-template-columns:1fr}}