*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #07070c;--bg-secondary: #0e0e16;--bg-card: #13131d;--bg-card-hover: #18182a;--bg-input: #10101a;--neon-green: #00ff88;--neon-green-dim: #00cc6a;--neon-cyan: #00d4ff;--neon-purple: #a855f7;--neon-pink: #ff006e;--neon-amber: #fbbf24;--text-primary: #eaeaf2;--text-secondary: #8a8aa8;--text-muted: #50506a;--text-inverse: #07070c;--border-subtle: rgba(255, 255, 255, .06);--border-glow: rgba(0, 255, 136, .18);--border-input: rgba(255, 255, 255, .1);--glass-bg: rgba(19, 19, 29, .88);--glass-border: rgba(255, 255, 255, .08);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--shadow-md: 0 4px 24px rgba(0, 0, 0, .45);--shadow-glow-green: 0 0 24px rgba(0, 255, 136, .1);--shadow-glow-cyan: 0 0 24px rgba(0, 212, 255, .1);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 999px;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .25s cubic-bezier(.4, 0, .2, 1);--transition-smooth: .35s cubic-bezier(.4, 0, .2, 1);--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace}html{font-size:16px;scroll-behavior:smooth}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;overflow-x:hidden;background-image:radial-gradient(circle at 20% 50%,rgba(0,255,136,.03) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(0,212,255,.03) 0%,transparent 50%),linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:100% 100%,100% 100%,60px 60px,60px 60px}a{color:var(--neon-cyan);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--neon-green)}::selection{background:#00ff8840;color:#fff}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.app-container{max-width:720px;margin:0 auto;padding:0 1.25rem 3rem}.top-bar{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;border-bottom:1px solid var(--border-subtle);margin-bottom:1rem}.top-bar-left{display:flex;align-items:center;gap:.5rem}.logo-mark{font-size:1.4rem}.logo-text{font-size:1rem;font-weight:700;letter-spacing:-.3px;color:var(--text-secondary)}.settings-trigger{display:flex;align-items:center;gap:.4rem;padding:.5rem 1rem;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-full);color:var(--text-secondary);font-family:var(--font-sans);font-size:.85rem;font-weight:500;cursor:pointer;transition:all var(--transition-normal)}.settings-trigger:hover{border-color:var(--border-glow);color:var(--neon-green);background:var(--bg-card-hover)}.gear-icon{font-size:1rem}.hero{text-align:center;padding:2.5rem 0 2rem}.hero-title{font-size:clamp(2.2rem,6vw,3.5rem);font-weight:900;letter-spacing:-1.5px;line-height:1.1;background:linear-gradient(135deg,var(--neon-green),var(--neon-cyan),var(--neon-green));background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradient-shift 6s ease infinite;margin-bottom:.6rem}@keyframes gradient-shift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.hero-subtitle{font-size:1.1rem;color:var(--text-secondary);font-weight:400;max-width:480px;margin:0 auto}.accent{color:var(--neon-green);-webkit-text-fill-color:var(--neon-green);font-weight:700}.input-section{margin-bottom:2rem}.input-tabs{display:flex;gap:.25rem;padding:.25rem;background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);margin-bottom:1.25rem}.input-tab{flex:1;padding:.6rem .75rem;background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--text-muted);font-family:var(--font-sans);font-size:.85rem;font-weight:600;cursor:pointer;transition:all var(--transition-normal)}.input-tab:hover{color:var(--text-secondary);background:#ffffff08}.input-tab.active{background:var(--bg-card);color:var(--neon-green);border-color:var(--border-glow);box-shadow:var(--shadow-glow-green)}.upload-zone{position:relative;border:2px dashed rgba(0,255,136,.2);border-radius:var(--radius-lg);padding:3rem 2rem;text-align:center;cursor:pointer;transition:all var(--transition-smooth);background:#00ff8805;margin-bottom:1rem}.upload-zone:hover,.upload-zone.drag-over{border-color:var(--neon-green);background:#00ff880d;box-shadow:var(--shadow-glow-green)}.upload-zone.drag-over{transform:scale(1.01)}.upload-zone input[type=file]{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.upload-icon{font-size:2.5rem;margin-bottom:.75rem;filter:grayscale(.3)}.upload-text{font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:.3rem}.upload-hint{font-size:.82rem;color:var(--text-muted)}.image-preview{position:relative;border-radius:var(--radius-lg);overflow:hidden;margin-bottom:1rem;border:1px solid var(--border-subtle)}.image-preview img{width:100%;display:block;border-radius:var(--radius-lg)}.remove-image-btn{position:absolute;top:.75rem;right:.75rem;width:32px;height:32px;border-radius:50%;background:#000000b3;border:1px solid rgba(255,255,255,.15);color:var(--text-primary);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.remove-image-btn:hover{background:var(--neon-pink);color:#fff;border-color:var(--neon-pink)}.text-input-zone{margin-bottom:1rem}.text-input-zone textarea{width:100%;padding:1rem 1.25rem;background:var(--bg-input);border:1px solid var(--border-input);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-sans);font-size:.92rem;line-height:1.6;resize:vertical;min-height:140px;transition:border-color var(--transition-normal)}.text-input-zone textarea:focus{outline:none;border-color:var(--neon-green);box-shadow:0 0 0 3px #00ff8814}.text-input-zone textarea::placeholder{color:var(--text-muted)}.context-input-wrapper{margin-bottom:1.5rem}.context-label{display:block;font-size:.82rem;font-weight:600;color:var(--text-secondary);margin-bottom:.4rem}.context-input-wrapper input{width:100%;padding:.75rem 1rem;background:var(--bg-input);border:1px solid var(--border-input);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-sans);font-size:.92rem;transition:border-color var(--transition-normal)}.context-input-wrapper input:focus{outline:none;border-color:var(--neon-cyan);box-shadow:0 0 0 3px #00d4ff14}.context-input-wrapper input::placeholder{color:var(--text-muted)}.generate-wrapper{display:flex;justify-content:center}.generate-btn{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;max-width:360px;padding:.9rem 2rem;background:linear-gradient(135deg,var(--neon-green),var(--neon-green-dim));border:none;border-radius:var(--radius-md);color:var(--text-inverse);font-family:var(--font-sans);font-size:1.05rem;font-weight:800;letter-spacing:.3px;cursor:pointer;transition:all var(--transition-normal);box-shadow:0 4px 20px #00ff8840;position:relative;overflow:hidden}.generate-btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.1),transparent);transform:translate(-100%);transition:transform .5s ease}.generate-btn:hover:not(:disabled):after{transform:translate(100%)}.generate-btn:hover:not(:disabled){box-shadow:0 6px 28px #0f86;transform:translateY(-2px)}.generate-btn:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 12px #0f83}.generate-btn:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}.btn-icon{font-size:1.2rem}.loading-section{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:4rem 0}.loader-ring{width:48px;height:48px;border:3px solid var(--border-subtle);border-top-color:var(--neon-green);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-size:1rem;color:var(--neon-green);font-weight:500;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}.results-section{margin-top:1rem}.results-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:.75rem}.results-title{font-size:1.3rem;font-weight:700}.results-actions{display:flex;gap:.5rem}.linkedin-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);margin-bottom:1.5rem;overflow:hidden;transition:all var(--transition-smooth);box-shadow:var(--shadow-md)}.linkedin-card:hover{border-color:var(--border-glow);box-shadow:var(--shadow-md),var(--shadow-glow-green);transform:translateY(-3px)}.card-label{display:flex;align-items:center;gap:.5rem;padding:.65rem 1.25rem;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:2px;border-bottom:1px solid var(--border-subtle)}.card-label.story{background:linear-gradient(90deg,rgba(0,255,136,.08),transparent);color:var(--neon-green)}.card-label.breakdown{background:linear-gradient(90deg,rgba(0,212,255,.08),transparent);color:var(--neon-cyan)}.card-label.hottake{background:linear-gradient(90deg,rgba(255,0,110,.08),transparent);color:var(--neon-pink)}.card-profile{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem .25rem}.profile-avatar{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--neon-green),var(--neon-cyan));display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:800;color:var(--text-inverse);flex-shrink:0}.profile-info{display:flex;flex-direction:column;gap:1px}.profile-name{font-weight:600;font-size:.92rem}.profile-meta{font-size:.78rem;color:var(--text-muted)}.card-body{padding:.75rem 1.25rem 1rem;font-size:.9rem;line-height:1.7;color:var(--text-primary);white-space:pre-wrap;word-wrap:break-word;max-height:450px;overflow-y:auto}.card-engagement{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1.25rem;border-top:1px solid var(--border-subtle);font-size:.78rem;color:var(--text-muted)}.engagement-reactions{display:flex;align-items:center;gap:.25rem}.card-footer{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1.25rem .75rem;border-top:1px solid var(--border-subtle);flex-wrap:wrap;gap:.5rem}.card-actions{display:flex;gap:.5rem}.char-count{font-family:var(--font-mono);font-size:.75rem;font-weight:500;padding:.2rem .6rem;border-radius:var(--radius-sm);background:#ffffff0a}.char-count.green{color:var(--neon-green)}.char-count.yellow{color:var(--neon-amber)}.char-count.red{color:var(--neon-pink)}.action-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .9rem;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:.8rem;font-weight:600;cursor:pointer;transition:all var(--transition-normal);border:1px solid}.action-btn.primary{background:linear-gradient(135deg,#00ff8826,#00d4ff26);border-color:#00ff884d;color:var(--neon-green)}.action-btn.primary:hover{background:#0f83;border-color:#00ff8880;box-shadow:0 0 12px #00ff8826}.action-btn.secondary{background:#ffffff0a;border-color:var(--border-subtle);color:var(--text-secondary)}.action-btn.secondary:hover{background:#ffffff14;border-color:var(--border-input);color:var(--text-primary)}.icon-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:1.4rem;padding:.25rem;transition:color var(--transition-fast);line-height:1}.icon-btn:hover{color:var(--text-primary)}.icon-btn.small{font-size:1rem}.settings-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:90;transition:opacity var(--transition-smooth);opacity:1}.settings-overlay.hidden{opacity:0;pointer-events:none}.settings-panel{position:fixed;top:0;right:0;width:340px;max-width:90vw;height:100vh;background:var(--bg-secondary);border-left:1px solid var(--border-subtle);z-index:100;padding:1.5rem;overflow-y:auto;transform:translate(100%);transition:transform var(--transition-smooth);box-shadow:-8px 0 32px #00000080}.settings-panel.open{transform:translate(0)}.settings-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border-subtle)}.settings-header h3{font-size:1.1rem;font-weight:700}.settings-section{margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border-subtle)}.settings-section:last-child{border-bottom:none}.settings-label{display:block;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);margin-bottom:.5rem}.api-key-wrapper{display:flex;gap:.4rem;margin-bottom:.4rem}.api-key-wrapper input{flex:1;padding:.65rem .85rem;background:var(--bg-input);border:1px solid var(--border-input);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-mono);font-size:.85rem;transition:border-color var(--transition-normal)}.api-key-wrapper input:focus{outline:none;border-color:var(--neon-green)}.settings-hint{font-size:.78rem;color:var(--text-muted);margin-bottom:.5rem}.status-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .7rem;border-radius:var(--radius-full);font-size:.72rem;font-weight:600}.status-badge.connected{background:#00ff881a;color:var(--neon-green);border:1px solid rgba(0,255,136,.2)}.status-badge.disconnected{background:#ff006e14;color:var(--neon-pink);border:1px solid rgba(255,0,110,.15)}.settings-section select{width:100%;padding:.65rem .85rem;background:var(--bg-input);border:1px solid var(--border-input);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-sans);font-size:.88rem;cursor:pointer;transition:border-color var(--transition-normal);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238a8aa8'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center}.settings-section select:focus{outline:none;border-color:var(--neon-cyan)}.how-it-works{list-style:none;counter-reset:steps;margin:.5rem 0}.how-it-works li{counter-increment:steps;position:relative;padding-left:2rem;margin-bottom:.5rem;font-size:.85rem;color:var(--text-secondary);line-height:1.5}.how-it-works li:before{content:counter(steps);position:absolute;left:0;top:0;width:1.4rem;height:1.4rem;border-radius:50%;background:#00ff881a;color:var(--neon-green);font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,255,136,.2)}.post-types{display:flex;gap:.4rem;margin-top:.75rem;flex-wrap:wrap}.type-tag{padding:.25rem .6rem;border-radius:var(--radius-full);font-size:.72rem;font-weight:700;letter-spacing:.5px}.type-tag.story{background:#00ff881a;color:var(--neon-green);border:1px solid rgba(0,255,136,.2)}.type-tag.breakdown{background:#00d4ff1a;color:var(--neon-cyan);border:1px solid rgba(0,212,255,.2)}.type-tag.hottake{background:#ff006e1a;color:var(--neon-pink);border:1px solid rgba(255,0,110,.15)}.error-toast{position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%) translateY(0);background:#ff006e1f;border:1px solid rgba(255,0,110,.3);color:var(--neon-pink);padding:.75rem 1.25rem;border-radius:var(--radius-md);display:flex;align-items:center;gap:.75rem;font-size:.88rem;font-weight:500;z-index:200;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 4px 24px #00000080;max-width:90vw;transition:all var(--transition-smooth)}.error-toast.hidden{opacity:0;pointer-events:none;transform:translate(-50%) translateY(20px)}.copy-toast{position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%) translateY(0);background:#00ff881f;border:1px solid rgba(0,255,136,.3);color:var(--neon-green);padding:.6rem 1.25rem;border-radius:var(--radius-md);font-size:.88rem;font-weight:600;z-index:200;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 4px 24px #0006;animation:toast-in .3s ease,toast-out .3s ease 1.5s forwards}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) translateY(16px)}}@keyframes toast-out{to{opacity:0;transform:translate(-50%) translateY(16px)}}.app-footer{text-align:center;padding:2rem 0 1rem;color:var(--text-muted);font-size:.82rem;border-top:1px solid var(--border-subtle);margin-top:2rem}.hidden{display:none!important}@keyframes fade-up{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.linkedin-card{animation:fade-up .5s ease both}.linkedin-card:nth-child(2){animation-delay:.12s}.linkedin-card:nth-child(3){animation-delay:.24s}@media(max-width:600px){.app-container{padding:0 .75rem 2rem}.hero-title{font-size:2rem}.hero-subtitle{font-size:.95rem}.input-tabs{flex-direction:column}.upload-zone{padding:2rem 1rem}.settings-trigger-label{display:none}.results-header,.card-footer{flex-direction:column;align-items:flex-start}.top-bar-right{gap:.5rem}.usage-counter{font-size:.65rem}}.top-bar-right{display:flex;align-items:center;gap:1rem}.usage-counter{font-size:.75rem;font-weight:500;color:var(--text-secondary);background:var(--bg-card);padding:.35rem .75rem;border-radius:100px;border:1px solid var(--border-subtle);white-space:nowrap}.usage-counter.pro{color:var(--neon-green);border-color:var(--neon-green-dim);background:#00ff880d}.usage-counter.depleted{color:var(--neon-pink);border-color:var(--neon-pink);background:#ff006e0d}.upgrade-banner{max-width:700px;margin:2rem auto;padding:2rem;text-align:center;background:linear-gradient(135deg,#a855f71a,#00d4ff1a);border:1px solid var(--neon-purple);border-radius:var(--radius);animation:glowPulse 2s ease-in-out infinite}@keyframes glowPulse{0%,to{box-shadow:0 0 20px #a855f71a}50%{box-shadow:0 0 30px #a855f740}}.upgrade-content h3{font-size:1.4rem;color:var(--text-primary);margin-bottom:.5rem}.upgrade-content p{color:var(--text-secondary);margin-bottom:1.5rem}.upgrade-btn-main{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 2rem;font-size:1rem;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--neon-purple),var(--neon-cyan));border:none;border-radius:100px;cursor:pointer;transition:transform .2s,box-shadow .2s}.upgrade-btn-main:hover{transform:translateY(-2px);box-shadow:0 8px 25px #a855f766}.pro-features{list-style:none;padding:0;margin-bottom:1rem}.pro-features li{padding:.3rem 0;color:var(--text-secondary);font-size:.85rem}.upgrade-btn-settings{width:100%;padding:.7rem 1rem;font-size:.85rem;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--neon-purple),var(--neon-cyan));border:none;border-radius:var(--radius);cursor:pointer;transition:opacity .2s}.upgrade-btn-settings:hover{opacity:.9}