:root{--bg-primary:#0a0e17;--bg-secondary:#111827;--bg-card:#1a2035;--bg-card-hover:#1f2842;--bg-input:#0d1220;--text-primary:#e8edf5;--text-secondary:#8892a8;--text-muted:#4a5568;--accent-cyan:#00e5ff;--accent-green:#0f8;--accent-pink:#f36;--accent-yellow:#fa0;--accent-purple:#a855f7;--glow-cyan:0 0 20px #00e5ff4d, 0 0 60px #00e5ff1a;--glow-green:0 0 20px #00ff884d, 0 0 60px #00ff881a;--glow-pink:0 0 20px #ff33664d;--border-color:#ffffff0f;--border-glow:#00e5ff33;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--font-mono:"JetBrains Mono", monospace;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--transition-fast:.15s ease;--transition-base:.25s ease;--transition-slow:.4s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;font-size:16px}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100dvh;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(at 20% 0,#00e5ff0f 0%,#0000 50%),radial-gradient(at 80% 100%,#00ff880a 0%,#0000 50%);position:fixed;inset:0}.flash-overlay{z-index:9999;opacity:0;pointer-events:none;transition:opacity 30ms linear;position:fixed;inset:0}.flash-overlay.active{opacity:1}#app{z-index:1;max-width:480px;margin:0 auto;padding:0 16px 100px;position:relative}.app-header{text-align:center;padding:28px 0 12px}.logo{justify-content:center;align-items:center;gap:10px;display:flex}.logo-icon{filter:drop-shadow(0 0 12px #00e5ff80);font-size:28px;animation:2s ease-in-out infinite pulse-glow}@keyframes pulse-glow{0%,to{filter:drop-shadow(0 0 12px #00e5ff80)}50%{filter:drop-shadow(0 0 24px #00e5ffcc)}}.logo h1{font-family:var(--font-mono);background:linear-gradient(135deg, var(--accent-cyan), var(--accent-green));-webkit-text-fill-color:transparent;letter-spacing:-.02em;-webkit-background-clip:text;background-clip:text;font-size:1.8rem;font-weight:700}.tagline{color:var(--text-secondary);letter-spacing:.05em;margin-top:4px;font-size:.85rem}.active-key-bar{border-radius:var(--radius-md);background:#00e5ff14;border:1px solid #00e5ff26;align-items:center;gap:8px;margin-bottom:8px;padding:8px 14px;font-size:.82rem;animation:.3s slide-down;display:flex}@keyframes slide-down{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.active-key-bar.hidden{display:none}.key-label{color:var(--text-secondary);white-space:nowrap}.key-name{color:var(--accent-cyan);font-family:var(--font-mono);text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.tab-nav{background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-color);z-index:100;-webkit-backdrop-filter:blur(16px);gap:4px;margin-bottom:16px;padding:4px;display:flex;position:sticky;top:8px}.tab-btn{border-radius:var(--radius-md);color:var(--text-muted);font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-base);-webkit-tap-highlight-color:transparent;background:0 0;border:none;flex-direction:column;flex:1;align-items:center;gap:2px;padding:10px 4px 8px;font-size:.7rem;font-weight:500;display:flex}.tab-btn .tab-icon{transition:transform var(--transition-base);font-size:1.2rem}.tab-btn:hover{color:var(--text-secondary)}.tab-btn.active{color:var(--accent-cyan);background:linear-gradient(135deg,#00e5ff1f,#00ff8814);box-shadow:inset 0 0 0 1px #00e5ff26}.tab-btn.active .tab-icon{transform:scale(1.15)}.tab-content{animation:.3s fade-in;display:none}.tab-content.active{display:block}@keyframes fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);transition:border-color var(--transition-base);margin-bottom:12px;padding:20px}.card:hover{border-color:#ffffff1a}.card-title{background:linear-gradient(90deg, var(--text-primary), var(--text-secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:6px;font-size:1.1rem;font-weight:700}.card-desc{color:var(--text-secondary);margin-bottom:16px;font-size:.82rem;line-height:1.6}.input-group{margin-bottom:14px}.input-group label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;font-size:.78rem;font-weight:600;display:block}.input-group input[type=text]{background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-md);width:100%;color:var(--text-primary);font-family:var(--font-sans);transition:all var(--transition-base);outline:none;padding:12px 14px;font-size:.95rem}.input-group input[type=text]:focus{border-color:var(--accent-cyan);box-shadow:0 0 0 3px #00e5ff1a}.input-group input[type=text]::placeholder{color:var(--text-muted)}.btn{border-radius:var(--radius-md);font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-base);-webkit-tap-highlight-color:transparent;border:none;justify-content:center;align-items:center;gap:8px;width:100%;padding:12px 24px;font-size:.9rem;font-weight:600;display:inline-flex}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-primary{background:linear-gradient(135deg, var(--accent-cyan), #00b8d4);color:#000}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg, #33ebff, var(--accent-cyan))}.btn-accent{background:linear-gradient(135deg, var(--accent-green), #00cc6a);color:#000}.btn-accent:hover:not(:disabled){background:linear-gradient(135deg, #3fa, var(--accent-green))}.btn-secondary{background:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border-color)}.btn-secondary:hover:not(:disabled){background:var(--bg-card-hover);color:var(--text-primary)}.btn-danger{color:var(--accent-pink);background:#ff336626;border:1px solid #f363;padding:8px 16px;font-size:.8rem}.btn-danger:hover:not(:disabled){background:#ff336640}.btn-glow{box-shadow:var(--glow-cyan)}.btn-glow:hover:not(:disabled){box-shadow:0 0 30px #00e5ff66,0 0 80px #00e5ff26}.btn-icon{font-size:1.1em}.btn-play{background:linear-gradient(135deg, var(--accent-cyan), var(--accent-green));color:#000;border-radius:var(--radius-xl);padding:16px 32px;font-size:1.1rem}.btn-play:hover:not(:disabled){box-shadow:0 0 40px #00e5ff66,0 0 100px #00ff8826}.shuffle-preview{border-radius:var(--radius-md);background:#00e5ff0a;border:1px solid #00e5ff1a;margin-top:16px;padding:16px}.shuffle-preview h3{color:var(--accent-cyan);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;font-size:.85rem;font-weight:600}.shuffle-table{grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:14px;display:grid}.shuffle-cell{background:var(--bg-input);border-radius:var(--radius-sm);border:1px solid var(--border-color);transition:all var(--transition-base);flex-direction:column;align-items:center;padding:6px 2px;display:flex}.shuffle-cell:hover{border-color:var(--accent-cyan);background:#00e5ff0d}.shuffle-cell .original{font-family:var(--font-mono);color:var(--text-muted);margin-bottom:2px;font-size:.7rem}.shuffle-cell .arrow{color:var(--accent-cyan);margin-bottom:2px;font-size:.55rem}.shuffle-cell .mapped{font-family:var(--font-mono);color:var(--accent-green);font-size:.85rem;font-weight:700}.saved-keys-list{flex-direction:column;gap:8px;display:flex}.empty-state{text-align:center;color:var(--text-muted);padding:24px 0;font-size:.85rem}.key-item{background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-md);transition:all var(--transition-base);cursor:pointer;align-items:center;gap:10px;padding:12px 14px;display:flex}.key-item:hover{background:var(--bg-card-hover);border-color:#00e5ff33}.key-item.active{border-color:var(--accent-cyan);box-shadow:0 0 0 1px #00e5ff1a, var(--glow-cyan)}.key-item-info{flex:1;min-width:0}.key-item-name{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;font-weight:600;overflow:hidden}.key-item-date{color:var(--text-muted);margin-top:2px;font-size:.72rem}.key-item-actions{flex-shrink:0;gap:6px;display:flex}.key-item-actions .btn{width:auto;padding:6px 10px;font-size:.75rem}.warning-box{border-radius:var(--radius-md);color:var(--accent-yellow);background:#ffaa0014;border:1px solid #ffaa0026;align-items:center;gap:8px;padding:12px 14px;font-size:.82rem;display:flex}.morse-preview{border-radius:var(--radius-md);background:#00ff880a;border:1px solid #00ff881a;margin:14px 0;padding:14px}.morse-preview.hidden{display:none}.morse-preview h3{color:var(--accent-green);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;font-size:.8rem;font-weight:600}.morse-display{font-family:var(--font-mono);color:var(--accent-green);word-break:break-all;text-shadow:0 0 8px #00ff884d;font-size:1.2rem;line-height:1.8}.morse-char-group{transition:background var(--transition-fast);background:#00ff880f;border-radius:4px;margin-right:6px;padding:2px 4px;display:inline-block}.morse-char-group:hover{background:#00ff881f}.morse-char-group .char-label{color:var(--text-muted);text-align:center;font-size:.55rem;display:block}.morse-word-space{width:16px;display:inline-block}.settings-row{flex-wrap:wrap;gap:14px;margin-bottom:16px;display:flex}.setting{flex:1;min-width:140px}.setting label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;font-size:.78rem;font-weight:600;display:block}input[type=range]{appearance:none;background:var(--bg-input);border-radius:4px;outline:none;width:100%;height:6px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:linear-gradient(135deg, var(--accent-cyan), var(--accent-green));cursor:pointer;border-radius:50%;width:20px;height:20px;box-shadow:0 0 10px #00e5ff4d}.color-options{gap:8px;display:flex}.color-btn{cursor:pointer;width:32px;height:32px;transition:all var(--transition-base);-webkit-tap-highlight-color:transparent;border:2px solid #0000;border-radius:50%}.color-btn:hover{transform:scale(1.15)}.color-btn.active{border-color:var(--accent-cyan);transform:scale(1.1);box-shadow:0 0 12px #00e5ff66}.play-controls{flex-direction:column;align-items:center;gap:12px;display:flex}.loop-toggle{color:var(--text-secondary);cursor:pointer;align-items:center;gap:8px;font-size:.82rem;display:flex}.loop-toggle input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent-cyan)}.qr-display-area.hidden{display:none}.qr-key-info{text-align:center;font-family:var(--font-mono);color:var(--accent-cyan);margin-bottom:16px;font-size:.9rem}.qr-canvas-wrapper{border-radius:var(--radius-lg);background:#fff;justify-content:center;margin-bottom:12px;padding:24px;display:flex}.qr-canvas-wrapper canvas{max-width:100%;height:auto}.qr-hint{text-align:center;color:var(--text-muted);font-size:.78rem}.scan-area{flex-direction:column;align-items:center;gap:12px;display:flex}.qr-reader{border-radius:var(--radius-md);width:100%;max-width:350px;overflow:hidden}.qr-reader video{border-radius:var(--radius-md)}#qr-reader{border:none!important}#qr-reader__scan_region{min-height:200px}#qr-reader__dashboard{display:none!important}.import-confirm{border-radius:var(--radius-lg);background:#00ff880f;border:2px solid #0f83;margin-top:16px;padding:16px;animation:.3s pop-in}.import-confirm.hidden{display:none}@keyframes pop-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.import-confirm h3{text-align:center;color:var(--accent-green);margin-bottom:12px;font-size:1rem}.import-actions{gap:8px;margin-top:12px;display:flex}.import-actions .btn{flex:1}.hidden{display:none!important}.toast-container{z-index:10000;pointer-events:none;flex-direction:column;gap:8px;display:flex;position:fixed;bottom:100px;left:50%;transform:translate(-50%)}.toast{background:var(--bg-card);border:1px solid var(--border-glow);border-radius:var(--radius-md);color:var(--text-primary);box-shadow:0 4px 24px #0006, var(--glow-cyan);pointer-events:auto;white-space:nowrap;padding:10px 20px;font-size:.85rem;font-weight:500;animation:.3s toast-in,.3s 2.7s forwards toast-out}@keyframes toast-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes toast-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}.light-source-toggle,.scan-mode-nav{background:var(--bg-card-hover);border-radius:var(--radius-md);gap:4px;padding:4px;display:flex}.source-btn,.scan-mode-btn{color:var(--text-muted);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-base);background:0 0;border:none;flex:1;padding:8px 12px;font-size:.8rem;font-weight:600}.source-btn:hover,.scan-mode-btn:hover{color:var(--text-primary)}.source-btn.active,.scan-mode-btn.active{background:var(--bg-input);color:var(--accent-cyan);box-shadow:0 2px 8px #0003}.scan-mode-nav{margin-bottom:20px}.scan-mode-content{animation:.3s fade-in;display:none}.scan-mode-content.active{display:block}.optical-decoder-container{flex-direction:column;gap:16px;display:flex}.optical-video-wrapper{border-radius:var(--radius-md);aspect-ratio:1;background:#000;width:100%;max-width:350px;margin:0 auto;position:relative;overflow:hidden}.optical-video-wrapper video{object-fit:cover;width:100%;height:100%}.optical-target{pointer-events:none;border:2px solid #0f8c;border-radius:50%;width:40px;height:40px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 10px #00ff8880}.optical-target:after{content:"";background:#0f8c;border-radius:50%;width:4px;height:4px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.luminance-meter{background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-md);flex-direction:column;gap:8px;padding:12px;display:flex}.luminance-bar-container{background:#ffffff0d;border-radius:6px;width:100%;height:12px;position:relative;overflow:hidden}.luminance-bar{background:linear-gradient(90deg, var(--accent-cyan), var(--accent-green));width:0%;height:100%;transition:width 50ms linear}.luminance-threshold{background:var(--accent-pink);z-index:2;width:2px;position:absolute;top:0;bottom:0;left:50%}.luminance-status{font-family:var(--font-mono);color:var(--text-muted);justify-content:center;align-items:center;gap:8px;font-size:.9rem;font-weight:700;display:flex}.status-dot{background:var(--text-muted);border-radius:50%;width:10px;height:10px;transition:all .1s}.luminance-status.is-on .status-dot{background:var(--accent-green);box-shadow:0 0 10px var(--accent-green)}.luminance-status.is-on #light-status-text{color:var(--accent-green)}.decode-controls{flex-direction:column;gap:12px;display:flex}.slider-val{text-align:right;color:var(--text-muted);margin-top:4px;font-size:.75rem}.decode-result-box{border-radius:var(--radius-md);background:#00e5ff0d;border:1px solid #00e5ff33;padding:16px}.decode-result-box h3{color:var(--accent-cyan);text-transform:uppercase;margin-bottom:8px;font-size:.8rem}.decode-text{font-family:var(--font-mono);color:var(--text-primary);min-height:2ren;word-wrap:break-word;font-size:1.4rem}.decode-morse{font-family:var(--font-mono);color:var(--accent-green);opacity:.7;word-wrap:break-word;margin-top:4px;font-size:.8rem}.btn-sm{padding:6px 12px;font-size:.75rem}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}@media (width<=380px){.shuffle-table{grid-template-columns:repeat(4,1fr)}.tab-label{font-size:.6rem}}