@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap";:root{font-family:Inter,system-ui,sans-serif;--primary: #E28426;--primary-glow: rgba(226, 132, 38, .5);--secondary: #002147;--bg-color: #F4F6F9;--header-bg: #002147;--text: #444444;--text-muted: #64748b;--text-white: #ffffff;--glass-bg: rgba(255, 255, 255, .95);--glass-border: rgba(0, 33, 71, .1);--glass-shadow: 0 4px 6px -1px rgba(0, 33, 71, .1);--cell-size: 52px;--cell-border: rgba(0, 33, 71, .15)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}body{background-color:var(--bg-color);color:var(--text);min-height:100vh;background:var(--bg-color);overscroll-behavior-y:none}#root{display:flex;flex-direction:column;height:100vh;height:100dvh}header{padding:.75rem 1.25rem;background:var(--header-bg);color:#fff;border-bottom:none;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;z-index:50;box-shadow:0 4px 6px -1px #0000001a}h1{font-size:1.25rem;font-weight:700;color:#fff;background:none;-webkit-background-clip:unset;-webkit-text-fill-color:initial;letter-spacing:.02em}header p{display:none}.header-controls{display:flex;align-items:center;gap:12px}.search-box{display:flex;align-items:center;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:6px 12px;gap:8px;transition:all .2s ease}.search-box:focus-within{background:#ffffff26;border-color:var(--primary);box-shadow:0 0 0 2px #e284264d}.search-icon{color:#fff9;flex-shrink:0}.search-input{background:transparent;border:none;outline:none;color:#fff;font-size:.85rem;width:120px;font-family:inherit}.search-input::placeholder{color:#ffffff80}.search-clear{background:#fff3;border:none;color:#fff;width:18px;height:18px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;padding:0;transition:all .15s ease}.search-clear:hover{background:var(--primary)}.language-selector{display:flex;background:#ffffff1a;border-radius:99px;padding:4px;border:1px solid rgba(255,255,255,.2)}.lang-btn{padding:6px 14px;font-size:.75rem;font-weight:600;border:none;background:transparent;color:#ffffffb3;border-radius:99px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;z-index:1}.lang-btn.active{background:var(--primary);color:#fff;box-shadow:0 2px 8px #0003}main{flex:1;overflow:hidden;display:flex;position:relative}.chart-container{flex:1;overflow:auto;position:relative;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;padding:0}.pinyin-grid{display:grid;grid-template-columns:60px repeat(23,minmax(52px,1fr));width:max-content}.cell{background:#fff6;border:1px solid var(--cell-border);min-height:var(--cell-size);height:auto;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;transition:all .15s ease;padding:4px 2px;position:relative}@media(hover:hover){.cell:hover{background:#fff;border-color:var(--primary);z-index:10;transform:scale(1.08);box-shadow:0 0 0 1px var(--primary),0 4px 12px #00214726}.cell:hover .pinyin-text{color:var(--primary);transform:scale(1.05);transition:all .15s ease}}.cell:active{transform:scale(.95)}.cell-active{background:var(--primary)!important;border-color:var(--primary)!important;box-shadow:0 0 0 2px #6366f14d;z-index:10}.cell-active .pinyin-text,.cell-active .phonetic-text{color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.1)}.cell-search-match{background:var(--primary)!important;border-color:var(--primary)!important;box-shadow:0 0 0 3px #e2842666,0 8px 25px #e284264d!important;z-index:20!important;transform:scale(1.15)!important;animation:pulse-match 1s ease-in-out infinite}.cell-search-match .pinyin-text,.cell-search-match .phonetic-text{color:#fff!important}@keyframes pulse-match{0%,to{box-shadow:0 0 0 3px #e2842666,0 8px 25px #e284264d}50%{box-shadow:0 0 0 6px #e284264d,0 8px 30px #e2842666}}.pinyin-text{font-family:Inter,sans-serif;font-size:.7rem;text-transform:uppercase;color:var(--text-muted);font-weight:700;letter-spacing:.02em;margin-bottom:2px}.phonetic-text{font-family:IBM Plex Sans Arabic,sans-serif;font-size:1rem;font-weight:500;color:var(--text);direction:rtl;line-height:1}.header-col,.header-row,.corner-cell{background:#e2842614!important;border:1px solid rgba(226,132,38,.2)!important;font-weight:800;font-size:.75rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.header-col{position:sticky;left:0;z-index:20;box-shadow:4px 0 12px #e284261a}.header-row{position:sticky;top:0;z-index:15;box-shadow:0 4px 12px #e284261a}.corner-cell{position:sticky;top:0;left:0;z-index:30;font-size:.8rem;background:#e2842614!important;color:var(--primary)!important;box-shadow:4px 4px 12px #e284261a}.header-highlight{background:#e28426bf!important;border:1px solid rgba(255,255,255,.4)!important;box-shadow:0 4px 12px #e284264d!important;z-index:25;transform:scale(1.05);border-radius:4px;transition:all .1s ease}.header-highlight.header-col .pinyin-text,.header-highlight.header-row .pinyin-text,.header-highlight .pinyin-text{color:#fff!important;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.2)}.header-highlight .phonetic-text{color:#333!important;font-weight:500}.header-col .phonetic-text,.header-row .phonetic-text{color:var(--text)!important;font-size:.9rem}.header-col .pinyin-text,.header-row .pinyin-text{color:var(--primary)!important;font-weight:700}.empty-cell{background:transparent;border-color:transparent;pointer-events:none}.header-standalone{background:#e2842614!important;min-width:50px}.header-clickable{cursor:pointer;transition:all .15s ease}.header-clickable:hover{background:#e2842633!important;transform:scale(1.02)}.header-clickable:active{transform:scale(.98)}#root{width:100vw;height:100vh;margin:0;display:flex;flex-direction:column}body{margin:0;min-width:320px;min-height:100vh;background-color:var(--bg);background-image:radial-gradient(at 0% 0%,rgba(226,132,38,.05) 0px,transparent 50%),radial-gradient(at 100% 0%,rgba(99,102,241,.05) 0px,transparent 50%);background-attachment:fixed;font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--text);overflow:hidden}.app-layout{display:flex;width:100%;height:100%;overflow:hidden}.app-sidebar{width:240px;background:#fff;border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:50;flex-shrink:0;box-shadow:2px 0 5px #00000008;transition:width .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:visible}.app-sidebar.collapsed{width:0px;border-right:none}.sidebar-content{width:240px;height:100%;display:flex;flex-direction:column;padding:24px 16px;opacity:1;transition:opacity .2s ease;overflow:hidden}.app-sidebar.collapsed .sidebar-content{opacity:0;pointer-events:none;visibility:hidden}.sidebar-header{display:flex;align-items:center;gap:12px;margin-bottom:32px;width:100%;height:48px;flex-shrink:0}.sidebar-logo{width:40px;height:40px;background:var(--primary);color:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;box-shadow:0 4px 12px #e284264d;flex-shrink:0}.sidebar-title{font-weight:700;font-size:1.1rem;color:var(--secondary);white-space:nowrap}.sidebar-nav{display:flex;flex-direction:column;gap:8px;width:100%}.nav-item{width:100%;height:48px;border-radius:12px;border:none;background:transparent;color:var(--text-muted);display:flex;align-items:center;justify-content:flex-start;padding:0 12px;cursor:pointer;transition:all .2s ease;overflow:hidden}.nav-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.nav-text{margin-left:12px;font-weight:600;font-size:.95rem;white-space:nowrap}.nav-item:hover{background:#e2842614;color:var(--primary)}.nav-item.active{background:#e284261f;color:var(--primary)}.nav-item.active:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);height:24px;width:4px;background:var(--primary);border-radius:0 4px 4px 0;opacity:1}.sidebar-toggle{position:absolute;top:50%;right:-24px;width:24px;height:48px;background:#fff;border:1px solid var(--border);border-left:1px solid var(--border);border-radius:0 12px 12px 0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);box-shadow:4px 0 8px #0000000d;z-index:60;width:28px}.app-sidebar.collapsed .sidebar-toggle{right:-24px;background:var(--primary);color:#fff;border-color:var(--primary)}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;background:#f8fafc}header{padding:0 24px;height:64px;display:flex;justify-content:space-between;align-items:center;background:var(--header-bg);color:#fff;border-bottom:none;z-index:40;box-shadow:0 4px 6px -1px #0000001a}header h1{color:#fff}.search-box{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff}.search-input{color:#fff}.search-input::placeholder{color:#fff9}.search-icon{color:#fffc}.header-tone-selector{position:fixed;z-index:1000;background:#fff;border-radius:12px;padding:8px;box-shadow:0 8px 32px #00000026;border:1px solid rgba(226,132,38,.2);width:160px;animation:spotlightPop .2s ease-out}.header-tone-title{font-size:.7rem;font-weight:600;color:var(--text-muted);margin-bottom:8px;text-align:center}.header-tone-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.header-tone-btn{padding:8px 4px;border:1px solid var(--glass-border);background:#fff;border-radius:8px;font-size:.7rem;font-weight:600;color:var(--text);cursor:pointer;transition:all .15s ease}.header-tone-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}.cell-playing{background:var(--primary)!important;border-color:var(--primary)!important;box-shadow:0 0 0 3px #e2842666,0 4px 12px #e284264d!important;z-index:15;animation:cellPulse .5s ease-in-out}.cell-playing .pinyin-text,.cell-playing .phonetic-text{color:#fff!important}.tone-badge{position:absolute;top:-8px;right:-8px;width:22px;height:22px;background:#fff;color:var(--primary);border-radius:50%;font-size:.75rem;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0003;animation:badgePop .2s ease-out}@keyframes badgePop{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.header-play-all-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;background:var(--primary);color:#fff;border:none;border-radius:8px;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .15s ease}.header-play-all-btn:hover{background:#c76f1b;transform:translateY(-1px)}@keyframes cellPulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.stop-sequence-btn{position:fixed;bottom:24px;right:24px;z-index:1000;display:flex;align-items:center;gap:8px;padding:12px 20px;background:#ef4444;color:#fff;border:none;border-radius:99px;font-size:.85rem;font-weight:600;cursor:pointer;box-shadow:0 4px 12px #ef444466;animation:slideUp .2s ease-out}.stop-sequence-btn:hover{background:#dc2626}.popover-backdrop{position:fixed;inset:0;background:#0f172a66;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:900;animation:fadeIn .15s ease-out}.spotlight-cell{position:fixed;z-index:950;background:var(--primary);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2px;border-radius:8px;box-shadow:0 4px 20px #0003;cursor:pointer;animation:spotlightPop .2s ease-out}.spotlight-cell .pinyin-text{color:#fff;font-weight:700}.spotlight-cell .phonetic-text{color:#ffffffe6}@keyframes spotlightPop{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.popover-card{position:fixed;z-index:1000;background:#fffffffa;border-radius:16px;padding:16px;width:max-content;min-width:240px;max-width:90vw;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border:none;animation:slideUp .2s cubic-bezier(.16,1,.3,1)}.popover-card:before{content:"";position:absolute;left:50%;transform:translate(-50%);border:8px solid transparent}.popover-card.bottom:before{top:-16px;border-bottom-color:#fffffff2}.popover-card.top:before{bottom:-16px;border-top-color:#fffffff2}.popover-header{padding:0 0 12px;display:flex;justify-content:space-between;align-items:center;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--border);margin-bottom:12px}main.lang-urdu{flex:1;overflow:hidden;position:relative;display:flex;flex-direction:column}.popover-pinyin{font-size:1.8rem;font-weight:800;color:var(--primary);background:none;-webkit-background-clip:unset;-webkit-text-fill-color:initial;text-shadow:0 2px 4px rgba(226,132,38,.2)}.popover-phonetic{font-family:IBM Plex Sans Arabic,sans-serif;font-size:1.25rem;color:var(--primary);font-weight:600}.popover-close{width:24px;height:24px;border-radius:50%;background:#f1f5f9;border:none;color:var(--text-muted);font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;line-height:1;padding-bottom:2px}.popover-close:hover{background:#fee2e2;color:#ef4444}.audio-mode-toggle{display:flex;gap:6px;margin-bottom:12px;padding:4px;background:#f1f5f9;border-radius:10px}.mode-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;border:none;background:transparent;border-radius:8px;cursor:pointer;font-size:.75rem;font-weight:600;color:var(--text-muted);transition:all .2s ease}.mode-btn:hover{background:#ffffff80;color:var(--text)}.mode-btn.active{background:#fff;color:var(--primary);box-shadow:0 1px 3px #0000001a}.mode-btn svg{flex-shrink:0}.popover-tones{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tone-btn{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--glass-border);border-radius:12px;padding:10px 12px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 2px #0000000d}.tone-btn:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 4px 6px -1px #6366f11a}.tone-btn.playing{background:var(--primary);border-color:var(--primary);box-shadow:0 4px 12px #6366f14d}.tone-btn.playing .tone-char,.tone-btn.playing .tone-label,.tone-btn.playing .play-btn{color:#fff}.tone-info{display:flex;flex-direction:column;align-items:flex-start;gap:0px}.tone-char{font-weight:700;font-size:1.1rem;color:var(--text);line-height:1.2}.tone-label{font-size:.6rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.tone-urdu{font-family:IBM Plex Sans Arabic,Noto Nastaliq Urdu,sans-serif;font-size:.95rem;font-weight:600;color:var(--primary);direction:rtl;line-height:1.3}.tone-btn.playing .tone-urdu{color:#ffffffe6}.play-btn{width:24px;height:24px;border-radius:50%;background:#e0e7ff;color:var(--primary);display:flex;align-items:center;justify-content:center;transition:all .2s ease}.tone-btn.playing .play-btn{background:#fff;color:var(--primary);animation:pulse 1.5s infinite}.tone-btn.loading{opacity:.7;pointer-events:none}.tone-btn.loading .play-btn{background:var(--primary);color:#fff}.spinner{animation:spin .8s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes slideUp{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes pulse{0%{box-shadow:0 0 #fff6}70%{box-shadow:0 0 0 6px #fff0}to{box-shadow:0 0 #fff0}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#94a3b8}@media(max-width:640px){header{padding:.5rem 1rem}h1{font-size:1rem}.lang-btn{padding:4px 10px;font-size:.7rem}.popover-card{position:fixed!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;width:85vw;max-width:320px;animation:zoomIn .2s ease-out}.popover-card:before{display:none}.header-col,.corner-cell{font-size:.7rem}}@keyframes zoomIn{0%{opacity:0;transform:translate(-50%,-48%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.corner-toggle{cursor:pointer;display:flex!important;align-items:center;justify-content:center;transition:all .2s ease;color:var(--primary)!important}.corner-toggle:hover{background:var(--primary)!important;color:#fff!important;box-shadow:inset 0 0 12px #0000001a}.corner-toggle:active{transform:scale(.95)}.corner-toggle svg{opacity:.8;transition:opacity .2s}.corner-toggle:hover svg{opacity:1}