@import url(https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700&display=swap);:root{--bg-color:#0f172a;--bg-gradient:radial-gradient(circle at 50% 0%, #1e293b 0%, #0f172a 100%);--text-main:#f8fafc;--text-muted:#94a3b8;--primary:#3b82f6;--primary-glow:rgba(59, 130, 246, 0.5);--glass-bg:rgba(30, 41, 59, 0.7);--glass-border:rgba(255, 255, 255, 0.1);--key-bg:rgba(51, 65, 85, 0.6);--key-bg-active:rgba(59, 130, 246, 0.8);--key-hover:rgba(71, 85, 105, 0.8);--radius-lg:16px;--radius-md:12px;--radius-sm:8px;--shadow-lg:0 10px 30px -10px rgba(0, 0, 0, 0.5)}*,::after,::before{box-sizing:border-box;margin:0;padding:0}body{font-family:Outfit,sans-serif;background-color:var(--bg-color);background-image:var(--bg-gradient);background-attachment:fixed;color:var(--text-main);min-height:100vh;display:flex;flex-direction:column;align-items:center;overflow-x:hidden}a{text-decoration:none;color:var(--primary);transition:all .2s ease}a:hover{text-shadow:0 0 8px var(--primary-glow)}.container{width:100%;max-width:1200px;padding:2rem;display:flex;flex-direction:column;gap:2rem}header{text-align:center;margin-bottom:2rem;animation:fadeInDown .8s ease-out}.header-inline{display:flex;align-items:center;justify-content:flex-start;gap:1.5rem;margin-bottom:2rem}.header-inline .back-link{margin-bottom:0}.page-title-small{font-size:2rem!important;margin-bottom:0!important;line-height:1}.back-link{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:30px;color:var(--text-muted);font-weight:500;font-size:.9rem;margin-bottom:1rem;transition:all .2s cubic-bezier(.4, 0, .2, 1)}.back-link:hover{background:rgba(59,130,246,.15);border-color:var(--primary);color:#fff;box-shadow:0 0 15px rgba(59,130,246,.3);transform:translateX(-2px)}.back-link .arrow{transition:transform .2s ease}.back-link:hover .arrow{transform:translateX(-3px)}h1{font-size:3rem;font-weight:700;margin-bottom:.5rem;background:linear-gradient(135deg,#fff 0,#94a3b8 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.02em}p.subtitle{color:var(--text-muted);font-size:1.2rem;max-width:600px;margin:0 auto}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--shadow-lg)}.lang-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;animation:fadeInUp .8s ease-out .2s backwards}.lang-card{background:rgba(30,41,59,.4);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:1.5rem;transition:all .3s cubic-bezier(.4, 0, .2, 1);cursor:pointer;display:flex;flex-direction:column;align-items:center;text-align:center}.lang-card:hover{transform:translateY(-5px);background:rgba(59,130,246,.1);border-color:var(--primary);box-shadow:0 0 20px var(--primary-glow)}.lang-icon{font-size:3rem;margin-bottom:1rem}.lang-name{font-size:1.5rem;font-weight:600;margin-bottom:.5rem}.app-container{max-width:1000px;width:100%}.output-area{margin-bottom:1.5rem;position:relative}textarea#output{width:100%;height:70px;min-height:auto;background:rgba(0,0,0,.3);border:2px solid var(--glass-border);border-radius:var(--radius-md);color:#fff;font-size:1.5rem;padding:1rem;font-family:inherit;resize:vertical;outline:0;transition:border-color .2s;white-space:pre;overflow-x:auto;overflow-y:hidden}textarea#output:focus{border-color:var(--primary)}.rtl textarea#output{direction:rtl;text-align:right}.actions{display:flex;gap:1rem;justify-content:flex-end;margin-top:1rem}.btn{background:var(--key-bg);color:#fff;border:1px solid var(--glass-border);padding:.8rem 1.5rem;border-radius:var(--radius-sm);font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:.5rem}.btn:hover{background:var(--key-hover);transform:translateY(-2px)}.btn-primary{background:var(--primary);border-color:var(--primary)}.btn-primary:hover{background:#2563eb;box-shadow:0 0 15px var(--primary-glow)}.toggle-switch{display:flex;align-items:center;gap:.8rem;cursor:pointer;margin-right:auto;color:var(--text-muted);font-size:1rem;user-select:none}.toggle-switch input{opacity:0;width:0;height:0}.slider{position:relative;display:inline-block;width:44px;height:24px;background-color:var(--key-bg);border-radius:24px;transition:.3s;border:1px solid var(--glass-border)}.slider:before{position:absolute;content:"";height:18px;width:18px;left:2px;bottom:2px;background-color:var(--text-muted);border-radius:50%;transition:.3s}input:checked+.slider{background-color:var(--primary);border-color:var(--primary)}input:checked+.slider:before{transform:translateX(20px);background-color:#fff}input:focus+.slider{box-shadow:0 0 1px var(--primary)}.label-text{font-weight:500}.keyboard-wrapper{perspective:1000px}.keyboard{display:grid;gap:.3rem;padding:1.5rem;background:rgba(15,23,42,.5);border-radius:var(--radius-lg);border:1px solid var(--glass-border)}.key-row{display:flex;justify-content:center;gap:.2rem}.key{appearance:none;background:var(--key-bg);border:1px solid rgba(255,255,255,.05);border-radius:var(--radius-sm);color:var(--text-main);font-size:1.5rem;font-family:inherit;min-width:35px;flex:1;max-width:70px;height:60px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .1s,background-color .1s,box-shadow .1s;user-select:none;position:relative;overflow:hidden;box-shadow:0 4px 0 rgba(0,0,0,.3)}.key.active,.key:active{transform:translateY(4px);box-shadow:none;background:var(--key-bg-active)}.key:hover{background:var(--key-hover)}.key-special{flex-grow:1;font-size:1rem;font-weight:600;text-transform:uppercase;max-width:120px}.key-space{flex-grow:4;max-width:400px}@keyframes fadeInDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-red{0%{box-shadow:0 0 0 0 rgba(239,68,68,.7)}70%{box-shadow:0 0 0 10px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}.listening{animation:pulse-red 2s infinite;background-color:#ef4444!important;border-color:#ef4444!important;color:#fff!important}@media (max-width:768px){.key{min-width:40px;height:50px;font-size:1.2rem}.container{padding:1rem}}