/* ===== FB Stylish Text Generator - WordPress Plugin CSS ===== */
.fbstg-widget{--pri:#1877F2;--pri-d:#1464d1;--pri-l:#e7f0ff;--bg:#fff;--txt:#1c1e21;--muted:#65676b;--border:#dddfe2;--sec:#f0f2f5;--shadow:0 2px 12px rgba(0,0,0,.08);--shadow-h:0 6px 24px rgba(24,119,242,.13);--r:12px;--rs:8px;--t:.22s cubic-bezier(.4,0,.2,1);--f:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-family:var(--f);color:var(--txt);line-height:1.6;-webkit-font-smoothing:antialiased;max-width:860px;margin:0 auto;padding:0 8px}

/* Dark Mode */
.fbstg-widget.fbstg-dark{--bg:#1a1a2e;--txt:#e0e0e0;--muted:#a0a0b0;--border:#2a2a3e;--sec:#16213e;--shadow:0 2px 12px rgba(0,0,0,.3);--shadow-h:0 6px 24px rgba(24,119,242,.25);--pri-l:#1a2744}

/* Hero */
.fbstg-hero{background:linear-gradient(135deg,#1877F2 0%,#42a5f5 100%);padding:36px 20px 28px;text-align:center;color:#fff;border-radius:var(--r)}
.fbstg-hero h1{font-size:clamp(1.35rem,4.5vw,2rem);font-weight:800;margin:0 0 8px;line-height:1.25;letter-spacing:-.3px}
.fbstg-hero p{font-size:clamp(.88rem,2.3vw,1.02rem);opacity:.92;max-width:520px;margin:0 auto}

/* Input Card */
.fbstg-input-card{background:var(--bg);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;margin:18px 0 0;border:2px solid transparent;transition:border-color var(--t),box-shadow var(--t)}
.fbstg-input-card:focus-within{border-color:var(--pri);box-shadow:0 0 0 4px rgba(24,119,242,.12)}
.fbstg-input-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap;gap:8px}
.fbstg-input-hdr h2{font-size:1rem;font-weight:700;margin:0}
.fbstg-meta{display:flex;align-items:center;gap:8px}
.fbstg-cc{font-size:.78rem;color:var(--muted);font-weight:500;background:var(--sec);padding:3px 10px;border-radius:20px}
.fbstg-btn-clear{display:inline-flex;align-items:center;gap:4px;background:none;border:1px solid var(--border);color:var(--muted);font-size:.78rem;font-weight:500;padding:5px 12px;border-radius:20px;cursor:pointer;transition:all var(--t);font-family:var(--f)}
.fbstg-btn-clear:hover{border-color:#e74c3c;color:#e74c3c;background:#fef2f2}
#fbstg-input{width:100%;border:1.5px solid var(--border);border-radius:var(--rs);padding:12px 14px;font-size:1rem;font-family:var(--f);resize:vertical;min-height:80px;transition:border-color var(--t);background:var(--sec);color:var(--txt);line-height:1.5}
#fbstg-input:focus{outline:none;border-color:var(--pri);background:var(--bg)}
#fbstg-input::placeholder{color:#b0b3b8}

/* Controls */
.fbstg-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin:16px 0;flex-wrap:wrap}
.fbstg-btn-generate{display:inline-flex;align-items:center;gap:8px;background:var(--pri);color:#fff;border:none;padding:12px 32px;border-radius:28px;font-size:.95rem;font-weight:700;cursor:pointer;font-family:var(--f);transition:all var(--t);letter-spacing:.2px}
.fbstg-btn-generate:hover{background:var(--pri-d);transform:scale(1.03)}
.fbstg-btn-generate:active{transform:scale(.97)}
.fbstg-btn-generate svg{flex-shrink:0}

/* Auto Toggle */
.fbstg-toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
.fbstg-toggle input{display:none}
.fbstg-toggle-slider{width:38px;height:20px;background:var(--border);border-radius:20px;position:relative;transition:background var(--t)}
.fbstg-toggle-slider::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform var(--t);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.fbstg-toggle input:checked+.fbstg-toggle-slider{background:var(--pri)}
.fbstg-toggle input:checked+.fbstg-toggle-slider::after{transform:translateX(18px)}
.fbstg-toggle-label{font-size:.8rem;font-weight:600;color:var(--muted)}

/* Count */
.fbstg-count{font-size:.83rem;color:var(--muted);font-weight:500;margin-bottom:12px;text-align:center}

/* Output Grid */
.fbstg-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:600px){.fbstg-grid{grid-template-columns:1fr 1fr}}

/* Style Card */
.fbstg-card{background:var(--bg);border-radius:var(--r);box-shadow:var(--shadow);padding:14px 16px;display:flex;flex-direction:column;gap:8px;transition:box-shadow var(--t),transform var(--t);animation:fbstgUp .35s ease both;position:relative;overflow:hidden}
.fbstg-card::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:var(--pri);border-radius:4px 0 0 4px;opacity:0;transition:opacity var(--t)}
.fbstg-card:hover{box-shadow:var(--shadow-h);transform:translateY(-2px)}
.fbstg-card:hover::before{opacity:1}
.fbstg-card.pop{border:1.5px solid var(--pri)}
.fbstg-card.pop .fbstg-badge{display:inline-flex}
.fbstg-card-hdr{display:flex;align-items:center;justify-content:space-between;gap:6px}
.fbstg-name{font-size:.76rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.fbstg-badge{display:none;align-items:center;gap:3px;font-size:.66rem;font-weight:700;color:var(--pri);background:var(--pri-l);padding:2px 8px;border-radius:20px;text-transform:uppercase}
.fbstg-preview{font-size:1.1rem;line-height:1.5;word-break:break-word;color:var(--txt);min-height:22px;user-select:all}
.fbstg-foot{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.fbstg-copy{display:inline-flex;align-items:center;gap:5px;background:var(--pri);color:#fff;border:none;padding:6px 14px;border-radius:20px;font-size:.78rem;font-weight:600;cursor:pointer;font-family:var(--f);transition:all var(--t);white-space:nowrap}
.fbstg-copy:hover{background:var(--pri-d);transform:scale(1.04)}
.fbstg-copy:active{transform:scale(.97)}
.fbstg-copy.copied{background:#22c55e;pointer-events:none}
.fbstg-fav{background:none;border:1px solid var(--border);color:var(--muted);width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:.9rem;transition:all var(--t);padding:0}
.fbstg-fav:hover,.fbstg-fav.active{border-color:#e74c3c;color:#e74c3c;background:#fef2f2}

/* Load More */
.fbstg-loadmore-wrap{text-align:center;margin:18px 0}
.fbstg-btn-loadmore{background:var(--bg);color:var(--pri);border:2px solid var(--pri);padding:10px 28px;border-radius:24px;font-size:.9rem;font-weight:600;cursor:pointer;font-family:var(--f);transition:all var(--t)}
.fbstg-btn-loadmore:hover{background:var(--pri);color:#fff}

/* Info Sections */
.fbstg-info{margin-top:36px}
.fbstg-info h2,.fbstg-faq h2{font-size:1.25rem;font-weight:800;text-align:center;margin:0 0 18px}
.fbstg-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.fbstg-step{background:var(--bg);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 14px;text-align:center}
.fbstg-step-n{width:38px;height:38px;background:var(--pri);color:#fff;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:800;margin-bottom:8px}
.fbstg-step h3{font-size:.9rem;font-weight:700;margin:0 0 4px}
.fbstg-step p{font-size:.82rem;color:var(--muted);margin:0}

/* FAQ */
.fbstg-faq{margin-top:28px}
.fbstg-faq details{border:1px solid var(--border);border-radius:var(--rs);margin-bottom:8px;overflow:hidden;background:var(--bg)}
.fbstg-faq summary{padding:12px 16px;font-weight:600;font-size:.88rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;transition:background var(--t)}
.fbstg-faq summary::-webkit-details-marker{display:none}
.fbstg-faq summary::after{content:'+';font-size:1.15rem;color:var(--pri);font-weight:300;flex-shrink:0;margin-left:8px}
.fbstg-faq details[open] summary::after{content:'\2212'}
.fbstg-faq summary:hover{background:var(--sec)}
.fbstg-faq details p{padding:0 16px 12px;font-size:.83rem;color:var(--muted);line-height:1.6;margin:0}

/* Toast */
.fbstg-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(80px);background:#22c55e;color:#fff;padding:10px 26px;border-radius:24px;font-size:.88rem;font-weight:600;box-shadow:0 6px 20px rgba(34,197,94,.35);z-index:99999;opacity:0;pointer-events:none;transition:all .35s cubic-bezier(.4,0,.2,1);font-family:var(--f)}
.fbstg-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@keyframes fbstgUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}