.logo,body,textarea{color:var(--text-main)}.control-label,.eyebrow,.footer-column h4,.input-label,.letter-name,.nav-dropdown-label{text-transform:uppercase}.breadcrumb a,.footer-column a,.logo,.main-nav>a,.nav-dropdown a{text-decoration:none}:root{--bg-main:#0a0c0f;--bg-card:#14181c;--bg-panel:#1e2429;--accent:#e8b84b;--accent2:#4b9fe8;--text-main:#ffffff;--text-muted:#9aa5b5;--text-dim:#6c7a8d;--border:#2a3138;--border-glow:#3a4450;--radius:8px;--radius-lg:16px;--morse-font:'Share Tech Mono',monospace;--body-font:'Barlow',sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--body-font);background:var(--bg-main);line-height:1.6;min-height:100vh;display:flex;flex-direction:column}.container{max-width:1000px;margin:0 auto;padding:0 20px;width:100%}.site-header{background:var(--bg-card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1000;backdrop-filter:blur(8px);background:rgba(20,24,28,.95)}.header-inner,.nav-group{position:relative}.header-inner{display:flex;justify-content:space-between;align-items:center;height:70px}.logo,.main-nav{align-items:center;display:flex}.logo{gap:10px;font-size:1.4rem;font-weight:700;transition:color .2s}.breadcrumb .current,.breadcrumb a:hover,.footer-column a:hover,.hero h1 span,.logo:hover,.play-icon:hover{color:var(--accent)}.logo-dots{color:var(--accent);font-family:var(--morse-font);font-size:1.6rem;line-height:1}.logo-text{font-weight:600}.main-nav>a,.nav-group-btn{color:var(--text-muted);font-weight:500;padding:8px 12px;transition:.2s}.main-nav{gap:20px}.main-nav>a{border-radius:var(--radius)}.main-nav>a:hover,.nav-group-btn:hover{color:var(--accent);background:rgba(232,184,75,.1)}.nav-group-btn{background:0 0;border:none;font-family:var(--body-font);font-size:1rem;cursor:pointer;display:flex;align-items:center;gap:4px;border-radius:var(--radius)}.nav-dropdown,.nav-toggle{border:1px solid var(--border)}.nav-arrow{font-size:.8rem;transition:transform .2s}.nav-group:hover .nav-arrow{transform:rotate(180deg)}.nav-dropdown{position:absolute;top:100%;left:0;min-width:220px;background:var(--bg-card);border-radius:var(--radius);padding:12px 0;opacity:0;visibility:hidden;transform:translateY(-10px);transition:.2s;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.3);z-index:100}.nav-group:hover .nav-dropdown{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.nav-dropdown-label{color:var(--accent2);font-size:.7rem;letter-spacing:1px;padding:8px 16px 4px;font-weight:600}.breadcrumb a,.hero p,.nav-dropdown a,.nav-toggle{color:var(--text-muted)}.nav-dropdown a{display:block;padding:8px 16px;font-size:.9rem;transition:.2s}.nav-dropdown a:hover{background:rgba(232,184,75,.1);color:var(--accent);padding-left:20px}.nav-divider{height:1px;background:var(--border);margin:8px 0}.nav-toggle{display:none;background:0 0;font-size:1.5rem;padding:8px 12px;border-radius:var(--radius);cursor:pointer;transition:.2s}.translator-box,textarea{border:1px solid var(--border)}.btn:hover,.nav-toggle:hover{border-color:var(--accent);color:var(--accent)}.breadcrumb{display:flex;padding:15px 0;color:var(--text-dim);font-size:.9rem}.breadcrumb a{transition:color .2s}.breadcrumb span{margin:0 8px}.hero{text-align:center;padding:30px 0 20px}.hero h1{font-size:clamp(2rem, 5vw, 2.8rem);margin-bottom:15px}.hero p{max-width:700px;margin:0 auto;font-size:1.1rem}.eyebrow{color:var(--accent2);font-family:var(--morse-font);letter-spacing:3px;font-size:.8rem;margin-bottom:10px}.btn,.mode-tab{font-family:var(--body-font);transition:.2s;font-weight:600;cursor:pointer}.translator-box{background:var(--bg-card);border-radius:var(--radius-lg);padding:30px;margin:30px 0}.mode-tabs{display:flex;gap:10px;margin-bottom:25px;background:var(--bg-panel);padding:5px;border-radius:var(--radius)}.mode-tab{flex:1;padding:12px;background:0 0;border:none;color:var(--text-muted);border-radius:6px;font-size:1rem}.btn,textarea{background:var(--bg-panel)}.counter,.input-label{color:var(--text-dim);font-size:.8rem}.mode-tab.active{background:var(--bg-card);color:var(--accent);border:1px solid var(--border-glow)}.input-group{margin-bottom:20px}.input-label{display:flex;justify-content:space-between;margin-bottom:8px;letter-spacing:1px}textarea{width:100%;padding:15px;border-radius:var(--radius);font-size:1rem;font-family:inherit;resize:vertical;min-height:120px;transition:border-color .2s}.btn,.control-panel{border:1px solid var(--border)}textarea:focus{outline:0;border-color:var(--accent)}textarea.morse-output{font-family:var(--morse-font);color:var(--accent);font-size:1.1rem;letter-spacing:2px}.rtl-input{direction:rtl;text-align:right}.ltr-input{direction:ltr;text-align:left}.counter{text-align:right;margin-top:5px}.button-grid{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}.btn{padding:10px 20px;color:var(--text-muted);border-radius:var(--radius);display:inline-flex;align-items:center;gap:8px;font-size:.95rem}.morse-code,.status,.value-display{font-family:var(--morse-font)}.btn-primary,.sound-btn.active{background:var(--accent);color:#000;border-color:var(--accent)}.btn-primary:hover{background:#f5cc6a;color:#000}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-small{padding:6px 12px;font-size:.9rem}.control-panel{background:var(--bg-panel);border-radius:var(--radius);padding:20px;margin:20px 0;display:flex;flex-wrap:wrap;gap:25px;align-items:flex-end}.control-group{min-width:180px}.control-label{color:var(--text-dim);font-size:.8rem;margin-bottom:8px}.sound-buttons{display:flex;gap:5px}.sound-btn{padding:6px 15px;background:var(--bg-card);border:1px solid var(--border);color:var(--text-muted);border-radius:20px;cursor:pointer;font-size:.9rem;transition:.2s}.slider-container{display:flex;align-items:center;gap:10px}input[type=range]{width:150px;height:5px;background:var(--border);border-radius:5px;-webkit-appearance:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--accent);border-radius:50%;cursor:pointer}.value-display{color:var(--accent);min-width:50px}.status{margin-top:15px;padding:12px 15px;background:var(--bg-panel);border-radius:var(--radius);color:var(--text-muted);display:flex;align-items:center;gap:12px}.blink-indicator{width:12px;height:12px;border-radius:50%;background:var(--text-dim);transition:background 50ms,box-shadow 50ms}.article,.letter-card{border:1px solid var(--border)}.article,.faq-item,.footer,.letter-card{background:var(--bg-card)}.blink-indicator.on{background:var(--accent);box-shadow:0 0 12px var(--accent)}.examples{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}.examples-label{color:var(--text-dim);margin-right:5px;font-size:.9rem}.section-title{margin:40px 0 20px;font-size:1.8rem;color:var(--text-main)}.letter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:15px;margin:30px 0}.letter-card{border-radius:var(--radius);padding:20px 10px;text-align:center;transition:transform .2s,border-color .2s;position:relative}.letter-card:hover{transform:translateY(-3px);border-color:var(--accent)}.arabic-letter{font-size:2.2rem;display:block;margin-bottom:5px;line-height:1.2}.letter-name{color:var(--text-dim);font-size:.8rem;display:block;margin-bottom:10px}.morse-code{color:var(--accent);font-size:1rem;letter-spacing:2px;display:block;margin-bottom:8px}.play-icon{cursor:pointer;color:var(--text-muted);font-size:.9rem;transition:color .2s;display:inline-block;padding:5px}.article{border-radius:var(--radius-lg);padding:30px;margin:40px 0}.article h2{color:var(--accent);margin-bottom:25px;font-size:1.8rem}.article h3{color:var(--text-main);margin:30px 0 15px;font-size:1.3rem}.article p,.article ul{color:var(--text-muted)}.article p{margin-bottom:15px;line-height:1.8}.article ul{padding-left:20px;margin:15px 0 25px}.article li{margin-bottom:8px}.faq-section{margin:40px 0 60px}.faq-item{border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:12px;transition:border-color .2s}.faq-item:hover{border-color:var(--border-glow)}.copyright,.footer{border-top:1px solid var(--border)}.faq-question{font-size:1.1rem;font-weight:600;color:var(--accent);margin-bottom:12px;cursor:pointer;display:flex;align-items:center;gap:8px}.faq-question::before{content:'Q:';color:var(--accent2);font-weight:700}.faq-answer{color:var(--text-muted);line-height:1.8;padding-left:25px}.faq-answer::before{content:'A:';color:var(--accent);font-weight:700;margin-right:8px}.footer{margin-top:50px;padding:40px 0 20px}.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:30px;margin-bottom:30px}.footer-column h4{color:var(--text-dim);margin-bottom:15px;font-size:1rem;letter-spacing:1px}.footer-column a{display:block;color:var(--text-muted);margin-bottom:8px;font-size:.9rem;transition:color .2s}.copyright{text-align:center;padding:20px 0 0;color:var(--text-dim);font-size:.85rem}@media (max-width:900px){.main-nav{display:none;position:absolute;top:70px;left:0;right:0;background:var(--bg-card);flex-direction:column;align-items:stretch;padding:20px;border-bottom:1px solid var(--border);border-top:1px solid var(--border);max-height:80vh;overflow-y:auto;gap:5px}.main-nav.open{display:flex}.main-nav>a,.nav-group{width:100%}.nav-group-btn{width:100%;justify-content:space-between}.nav-dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:0 0 0 20px;margin-top:5px;display:none}.nav-group.open .nav-dropdown,.nav-toggle{display:block}}@media (max-width:768px){.btn,.control-group,input[type=range]{width:100%}.button-grid{flex-direction:column}.btn{justify-content:center}.control-panel{flex-direction:column;align-items:stretch}.slider-container{justify-content:space-between}.examples{justify-content:center}.footer-grid{grid-template-columns:1fr 1fr}}/* Language Toggle Button - Base Styling */.lang-toggle{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.4);border-radius:40px;padding:6px 14px;cursor:pointer;font-size:0.85rem;font-weight:500;color:white}.lang-toggle-en,.lang-toggle-tl{opacity:0.7;transition:opacity 0.2s}.lang-toggle-en.active,.lang-toggle-tl.active{opacity:1;font-weight:bold}.lang-toggle-sep{opacity:0.5}.nav-toggle{background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.4);border-radius:12px;padding:8px 14px;cursor:pointer;font-size:1.4rem;font-weight:bold;color:white;line-height:1}.logo{display:flex;align-items:center}.logo-wrap{display:flex;flex-direction:column;align-items:flex-start;line-height:1}.logo-img{height:42px;width:auto;display:block}.morse{font-size:10px;letter-spacing:6px;color:#aaa;margin-top:2px;font-weight:500}@media (max-width:480px){.translator-box{padding:20px}.hero h1{font-size:1.8rem}.letter-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr}}