*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0f1117;--bg-panel:#16181f;--bg-input:#1a1c26;--bg-hover:#1e2030;--bg-card:#171a23;--border:#2a2d3a;--border-focus:#f44;--text:#c4c8d4;--text-heading:#e8eaed;--text-muted:#7c8192;--accent:#f44;--accent-hover:#f66;--accent-bg:#ff44441a;--green:#22c55e;--orange:#f59e0b;--radius:12px;--radius-sm:8px;--sans:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--mono:"JetBrains Mono", "Fira Code", ui-monospace, monospace;font:16px/1.6 var(--sans);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}body{min-height:100vh}a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-hover);text-decoration:underline}#app{flex-direction:column;max-width:900px;min-height:100vh;margin:0 auto;padding:0 20px 40px;display:flex}header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;margin-bottom:24px;padding:20px 0;display:flex}.header-left{align-items:center;gap:12px;display:flex}.header-left .logo{font-size:28px}header h1{color:var(--text-heading);letter-spacing:-.3px;font-size:22px;font-weight:700}.pro-btn{border-radius:var(--radius-sm);background:linear-gradient(135deg,#f44,#ff6b6b);padding:6px 16px;font-size:14px;font-weight:600;transition:opacity .2s;color:#fff!important;text-decoration:none!important}.pro-btn:hover{opacity:.9}.input-section{margin-bottom:24px}.input-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:28px}.input-card label{color:var(--text-heading);margin-bottom:16px;font-size:18px;font-weight:600;display:block}.input-row{gap:10px;display:flex}#topic-input{border:2px solid var(--border);border-radius:var(--radius-sm);font:16px var(--sans);color:var(--text-heading);background:var(--bg-input);outline:none;flex:1;padding:14px 18px;transition:border-color .2s}#topic-input:focus{border-color:var(--accent)}#topic-input::placeholder{color:var(--text-muted)}.input-hint{color:var(--text-muted);margin-top:12px;font-size:13px}.btn{border-radius:var(--radius-sm);border:1px solid var(--border);cursor:pointer;background:var(--bg);color:var(--text);font-size:14px;font-weight:600;font-family:var(--sans);white-space:nowrap;align-items:center;gap:6px;padding:8px 20px;text-decoration:none;transition:all .15s;display:inline-flex}.btn:hover{background:var(--bg-hover);border-color:var(--accent);color:var(--text-heading)}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff!important}.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.btn-small{padding:6px 14px;font-size:12px;font-weight:500}.btn-pro{background:linear-gradient(135deg,#f44,#ff6b6b);border:none;padding:8px 20px;font-weight:700;color:#fff!important;text-decoration:none!important}.btn-pro:hover{opacity:.9;box-shadow:0 0 20px #ff44444d}.results-section{flex-direction:column;gap:20px;display:flex}.hidden{display:none!important}.result-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:24px}.result-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.result-header h2{color:var(--text-heading);font-size:18px;font-weight:600}.suggestions-list{flex-direction:column;gap:8px;list-style:none;display:flex}.suggestions-list li{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-heading);cursor:pointer;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;font-size:15px;line-height:1.5;transition:all .15s;display:flex}.suggestions-list li:hover{border-color:var(--accent);background:var(--bg-hover)}.suggestions-list li .copy-icon{opacity:.4;flex-shrink:0;font-size:14px;transition:opacity .15s}.suggestions-list li:hover .copy-icon{opacity:.8}.suggestions-list li .title-text{flex:1}.hashtags-grid{flex-wrap:wrap;gap:8px;display:flex}.hashtag-chip{background:var(--accent-bg);color:var(--accent-hover);cursor:pointer;border:1px solid #ff444440;border-radius:20px;align-items:center;gap:6px;padding:8px 14px;font-size:14px;font-weight:500;transition:all .15s;display:inline-flex}.hashtag-chip:hover{border-color:var(--accent);background:#f443}.hashtag-chip .tag-count{color:var(--text-muted);font-size:11px;font-weight:400}.toast{border-radius:var(--radius-sm);color:#fff;z-index:100;background:#22c55e;padding:12px 28px;font-size:14px;font-weight:600;animation:.3s toast-in;position:fixed;bottom:30px;left:50%;transform:translate(-50%);box-shadow:0 4px 20px #22c55e4d}.toast.fade-out{animation:.3s forwards toast-out}@keyframes toast-in{0%{opacity:0;transform:translate(-50%)translateY(20px)}to{opacity:1;transform:translate(-50%)translateY(0)}}@keyframes toast-out{0%{opacity:1;transform:translate(-50%)translateY(0)}to{opacity:0;transform:translate(-50%)translateY(20px)}}.pro-upsell{border-radius:var(--radius);background:linear-gradient(135deg,#ff444414,#ff6b6b14);border:1px solid #ff44444d;margin-top:20px;padding:16px 20px}.pro-content{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.pro-star{font-size:20px}.pro-features{color:var(--text-muted);font-size:13px}@media (width<=700px){.pro-content{text-align:center;flex-direction:column}}footer{border-top:1px solid var(--border);text-align:center;color:var(--text-muted);flex-wrap:wrap;justify-content:center;gap:16px;margin-top:24px;padding:16px 0;font-size:13px;display:flex}footer a{color:var(--text-muted)}footer a:hover{color:var(--text-heading)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:18px;height:18px;animation:.6s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=600px){.input-row{flex-direction:column}.result-header{flex-direction:column;align-items:flex-start;gap:10px}}