:root{--bg:#071018;--card:#0b0f16;--accent:#7c3aed;--muted:#9aa0a6;--text:#e6e6ee}
*{box-sizing:border-box}
body{font-family:Inter, 'Cairo', 'IBM Plex Sans Arabic', Arial, sans-serif;background:var(--bg);color:var(--text);margin:0;padding:24px;display:flex;min-height:100vh;align-items:center;justify-content:center}
.wrap{width:100%;max-width:920px}
.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.header h1{font-size:1.25rem;margin:0;background:linear-gradient(90deg,#39d9ff,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand h1{font-size:1.05rem;margin:0;font-weight:800;background:linear-gradient(90deg,#39d9ff,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent}
.tool-heading{text-align:center;margin:8px 0 18px}
.tool-heading h2{font-size:1.6rem;margin:0 0 8px;font-weight:900;background:linear-gradient(90deg,#39d9ff,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent}
.seo-desc{max-width:860px;margin:0 auto;color:var(--muted);font-size:0.98rem;line-height:1.5}
.lang-select select{padding:6px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:var(--text)}
.content{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 10px 40px rgba(0,0,0,0.6)}
.field-label{display:block;margin-bottom:8px;font-weight:700;color:var(--muted)}
.input-wrap{position:relative;border-radius:12px;border:1px solid rgba(255,255,255,0.04);overflow:hidden}
.input-wrap textarea{width:100%;border:0;resize:vertical;padding:14px;background:transparent;color:var(--text);font-size:0.98rem;min-height:160px}
.drop-hint{position:absolute;right:12px;bottom:8px;font-size:0.8rem;color:var(--muted)}
.controls{display:flex;align-items:center;gap:10px;margin:12px 0}
.btn{padding:10px 14px;border-radius:10px;border:0;cursor:pointer;font-weight:800}
.btn.primary{background:linear-gradient(90deg,#39d9ff,#7c3aed);color:#fff}
.result-wrap{position:relative;margin-top:8px;border-radius:12px;border:1px solid rgba(255,255,255,0.04);background:rgba(0,0,0,0.25);padding:12px;min-height:120px}
.result{white-space:pre-wrap;margin:0;color:var(--text);opacity:0;transform:translateY(8px);transition:opacity .28s ease,transform .28s ease}
.result.visible{opacity:1;transform:none}
.copy-btn{position:absolute;right:12px;top:12px;padding:8px 10px;border-radius:8px;border:0;background:rgba(255,255,255,0.04);color:var(--text);font-weight:700;opacity:0;transition:opacity .18s ease}
.result-wrap:hover .copy-btn{opacity:1}
.foot{margin-top:12px;text-align:center;color:var(--muted);font-size:0.9rem}

/* Responsive */
@media(max-width:640px){body{padding:12px}.header{flex-direction:column;align-items:flex-start;gap:8px}.controls{flex-wrap:wrap}}