@import "https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;600;700&family=Outfit:wght@300;400;500;600;700&display=swap";@layer base{html{direction:ltr!important}body{text-align:left!important;direction:ltr!important}}:root{--bg-primary:#fff;--bg-secondary:#f8fafc;--border-color:#e2e8f0;--text-primary:#0f172a;--text-secondary:#475569;--accent-color:#4f46e5;--accent-hover:#4338ca;--accent-light:#eeebff;--textarea-bg:#fff;--font-sans:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-arabic:"Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace}@media (prefers-color-scheme:dark){:root{--bg-primary:#090d16;--bg-secondary:#111827;--border-color:#1f2937;--text-primary:#f3f4f6;--text-secondary:#9ca3af;--accent-color:#6366f1;--accent-hover:#4f46e5;--accent-light:#1e1b4b;--textarea-bg:#111827}}*,:before,:after{box-sizing:border-box;margin:0;padding:0;direction:ltr!important;unicode-bidi:isolate!important}html,body,#root,textarea,input,[contenteditable]{text-align:left!important;direction:ltr!important;unicode-bidi:isolate!important}[dir=rtl]{direction:ltr!important}[lang=ur],[lang=ur-PK],h1,h2,h3,h4,h5,h6,p,span,div,label,button,a{direction:ltr!important;unicode-bidi:isolate!important}body{background-color:var(--bg-primary);color:var(--text-primary);font-family:var(--font-sans);justify-content:center;align-items:flex-start;min-height:100vh;padding:40px 20px;line-height:1.5;transition:background-color .3s,color .3s;display:flex}#root{flex-direction:column;gap:32px;width:100%;max-width:1200px;display:flex}.app-header{border-bottom:1px solid var(--border-color);padding-bottom:20px}.header-top{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.app-header h1{letter-spacing:-.05em;color:var(--text-primary);margin:0;font-size:2.25rem;font-weight:700}.app-subtitle{color:var(--text-secondary);font-size:1rem}.workspace{grid-template-columns:1fr 1fr;gap:24px;display:grid}@media (width<=768px){.workspace{grid-template-columns:1fr}}.workspace-panel{flex-direction:column;gap:12px;display:flex}.panel-header{justify-content:space-between;align-items:flex-end;min-height:54px;display:flex}.panel-header label{color:var(--text-primary);padding-bottom:4px;font-size:.95rem;font-weight:600}.sample-controls-container{flex-direction:column;align-items:flex-end;gap:6px;display:flex}.samples-label{text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);font-size:.72rem;font-weight:600}.sample-controls{flex-wrap:wrap;gap:8px;display:flex}.btn-sample{background-color:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-secondary);font-family:var(--font-sans);cursor:pointer;border-radius:6px;padding:4px 10px;font-size:.8rem;font-weight:500;transition:all .2s}.btn-sample:hover{background-color:var(--border-color);color:var(--text-primary)}.btn-lang-switcher{background-color:var(--accent-light);border:1px solid var(--accent-color);color:var(--accent-color);font-family:var(--font-sans);cursor:pointer;border-radius:8px;padding:8px 18px;font-size:.88rem;font-weight:600;transition:all .2s}.btn-lang-switcher:hover{background-color:var(--accent-color);color:#fff}textarea{background-color:var(--textarea-bg);border:1px solid var(--border-color);width:100%;height:450px;color:var(--text-primary);font-family:var(--font-arabic), var(--font-sans);resize:none;border-radius:10px;outline:none;padding:20px;font-size:1.15rem;line-height:1.7;transition:border-color .2s,box-shadow .2s}textarea:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px #6366f126}textarea::placeholder{color:var(--text-secondary);font-size:1rem}.btn-action{background-color:var(--accent-color);color:#fff;font-family:var(--font-sans);cursor:pointer;border:none;border-radius:6px;padding:6px 14px;font-size:.85rem;font-weight:600;transition:all .2s}.btn-action:hover:not(:disabled){background-color:var(--accent-hover)}.btn-action:disabled{opacity:.5;cursor:not-allowed}.btn-action.copied{background-color:#10b981}body,html,#root{text-align:left!important;direction:ltr!important}.app-container,header,button,label,h1,h2,h3,p,span{direction:ltr!important;unicode-bidi:isolate!important}[data-lang=ur]{text-align:left!important;direction:ltr!important}