body { font-family: Tajawal, sans-serif; background: #090d16; -webkit-tap-highlight-color: transparent; }
.panel { background: #111827; border: 1px solid #1f2937cc; border-radius: 1rem; box-shadow: 0 10px 20px #0002; }
.inner-panel, .hint { background: #03071299; border: 1px solid #1f2937; border-radius: .75rem; padding: .75rem; }
.quick-button { width: 2rem; height: 2rem; background: #1e293b; border-radius: .5rem; display: grid; place-items: center; color: #34d399; }
.badge { font-size: 10px; padding: .2rem .55rem; border-radius: 999px; font-weight: bold; white-space: nowrap; }
.badge-green { background: #10b98122; color: #34d399; }.badge-blue { background: #3b82f622; color: #60a5fa; border: 1px solid #3b82f633; }.badge-muted { background: #030712; color: #94a3b8; }
.input-field { flex: 1; min-width: 0; background: #030712; border: 1px solid #1f2937; border-radius: .75rem; padding: .5rem .75rem; font-size: .75rem; color: #e2e8f0; outline: none; }.input-field:focus { border-color: #10b981; }
.audio-wave { display:flex; align-items:center; gap:4px; height:40px; }.audio-wave i { width:3px; height:8px; background:#10b981; border-radius:4px; animation:sound-bounce .1s ease infinite alternate; }.audio-wave i:nth-child(2){animation-delay:.1s}.audio-wave i:nth-child(3){animation-delay:.2s}.audio-wave i:nth-child(4){animation-delay:.15s}.audio-wave i:nth-child(5){animation-delay:.3s}@keyframes sound-bounce{to{height:32px}}
.braille-cell { background:#111827; border:1px solid #1f2937; border-radius:.75rem; padding:.5rem; }.braille-dots { display:grid; grid-template-columns:repeat(2,14px); gap:8px; }.dot { width:14px; height:14px; border-radius:50%; background:#374151; transition:.25s; }.dot.active { background:#10b981; box-shadow:0 0 10px #10b981, inset 0 0 4px #fff; transform:scale(1.15); }.braille-label { display:block; text-align:center; color:#64748b; font-size:8px; margin-top:6px; }
.flash-light { width:2.5rem; height:2.5rem; border-radius:.75rem; background:#0f172a; border:1px solid #1f2937; display:grid; place-items:center; flex:none; }.morse-active-flash { background:#f59e0b !important; box-shadow:0 0 20px #f59e0b, inset 0 0 5px #fff !important; border-color:#fbbf24 !important; }.morse-active-icon { color:#fff !important; transform:scale(1.2); }
.command { width:100%; display:flex; justify-content:space-between; align-items:center; text-align:right; background:#111827; border:1px solid #1f2937; padding:1rem; border-radius:.75rem; font-size:.875rem; font-weight:bold; }.command:hover { background:#172033; }
.bottom-bar { position:fixed; z-index:50; bottom:0; left:0; right:0; max-width:28rem; margin:auto; background:#111827f2; border-top:1px solid #1f2937; backdrop-filter:blur(12px); padding:1rem 1.5rem; display:flex; justify-content:space-around; align-items:center; }.nav-button { display:flex; flex-direction:column; align-items:center; gap:4px; color:#94a3b8; font-size:9px; font-weight:bold; }.nav-button i { font-size:1.125rem; }.mic-button { width:4rem; height:4rem; border-radius:50%; display:grid; place-items:center; color:white; background:#059669; font-size:1.5rem; box-shadow:0 12px 25px #022c22; }.mic-label { position:absolute; top:4.4rem; left:50%; transform:translateX(-50%); white-space:nowrap; color:#94a3b8; font-size:9px; font-weight:bold; }.pulse-emerald { animation:pulse-ring 1.5s infinite; }@keyframes pulse-ring{0%{transform:scale(1)}70%{transform:scale(1.1);box-shadow:0 0 0 18px #10b98100}100%{transform:scale(1)}}