html,body,#root{width:100%;min-height:100vh}:root{--bg-primary: #09090b;--bg-secondary: #18181b;--bg-tertiary: #27272a;--bg-card: #1c1917;--text-primary: #fafafa;--text-secondary: #a1a1aa;--text-muted: #71717a;--accent: #0ea5e9;--accent-hover: #0284c7;--accent-glow: rgba(14, 165, 233, .3);--border: #3f3f46;--border-light: #27272a;--error: #f87171;--success: #4ade80;--warning: #fbbf24}.feedback-float-btn{position:fixed;bottom:24px;right:24px;width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px #0ea5e966;transition:all .2s;z-index:100}.feedback-float-btn:hover{transform:scale(1.1);box-shadow:0 6px 20px #0ea5e980}.preview-banner{background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:#fff;padding:12px 24px;display:flex;justify-content:center;align-items:center;gap:16px;font-weight:500;font-size:14px}.preview-banner button{background:#fff3;border:1px solid rgba(255,255,255,.3);color:#fff;padding:6px 16px;border-radius:6px;cursor:pointer;font-size:13px;transition:all .2s}.preview-banner button:hover{background:#ffffff4d}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;min-height:100vh;background:var(--bg-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:var(--text-primary)}.upload-page{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.upload-background{position:absolute;inset:0;overflow:hidden}.bg-gradient{position:absolute;border-radius:50%;filter:blur(120px);opacity:.4}.bg-gradient-1{width:600px;height:600px;background:var(--accent);top:-200px;right:-100px;animation:float 20s ease-in-out infinite}.bg-gradient-2{width:500px;height:500px;background:#8b5cf6;bottom:-150px;left:-100px;animation:float 25s ease-in-out infinite reverse}.bg-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:60px 60px}@keyframes float{0%,to{transform:translate(0)}50%{transform:translate(30px,30px)}}.upload-container-modern{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;gap:40px;padding:40px}.upload-card-modern{background:#18181bcc;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:24px;padding:60px 50px;text-align:center;max-width:500px;width:100%;box-shadow:0 25px 50px -12px #00000080,0 0 0 1px #ffffff0d}.upload-icon-modern{width:120px;height:120px;margin:0 auto 32px;position:relative;display:flex;align-items:center;justify-content:center}.icon-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);opacity:.3;animation:pulse-ring 2s ease-out infinite}@keyframes pulse-ring{0%{transform:scale(.8);opacity:.5}to{transform:scale(1.4);opacity:0}}.upload-icon-modern svg{color:var(--accent);z-index:1}.upload-card-modern h1{font-size:32px;font-weight:700;margin-bottom:12px;background:linear-gradient(135deg,var(--text-primary),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.upload-card-modern .subtitle{color:var(--text-secondary);font-size:16px;margin-bottom:36px}.upload-button-modern{display:inline-flex;align-items:center;gap:10px;padding:16px 40px;background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 20px var(--accent-glow)}.upload-button-modern:hover{transform:translateY(-2px);box-shadow:0 8px 30px var(--accent-glow)}.upload-hint-modern{font-size:14px;color:var(--text-muted);margin-top:20px}.supported-devices{margin-top:32px;padding-top:24px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:12px}.supported-devices>span{font-size:13px;color:var(--text-muted)}.device-tags{display:flex;gap:8px;justify-content:center}.device-tag{padding:6px 14px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:20px;font-size:12px;font-weight:500;color:var(--text-secondary)}.error-message-modern{background:#f871711a;border:1px solid var(--error);color:var(--error);padding:14px 20px;border-radius:12px;margin-bottom:24px;font-size:14px}.loading-modern{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--accent);font-size:16px}.loading-spinner{width:24px;height:24px;border:3px solid var(--bg-tertiary);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}.progress-group-modern{width:100%;margin-top:20px;display:flex;flex-direction:column;gap:8px;align-items:center}.progress-track{width:100%;height:6px;background:var(--bg-tertiary);border-radius:999px;overflow:hidden;border:1px solid rgba(255,255,255,.05)}.progress-fill{height:100%;background:linear-gradient(135deg,var(--accent),var(--accent-hover));border-radius:inherit;transition:width .2s ease;width:0%}.progress-text{font-size:13px;color:var(--text-muted)}@keyframes spin{to{transform:rotate(360deg)}}.features-showcase{display:flex;gap:32px}.feature-item{display:flex;align-items:center;gap:10px;color:var(--text-secondary);font-size:14px}.feature-item svg{color:var(--accent)}.app-modern{height:100vh;display:flex;flex-direction:column;background:var(--bg-primary)}.header-modern{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:#18181be6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}.header-left-modern{display:flex;align-items:center;gap:16px}.file-badge{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--bg-tertiary);border-radius:10px;border:1px solid var(--border)}.file-badge svg{color:var(--accent)}.file-name{font-weight:600;font-size:14px}.file-meta{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary)}.separator{color:var(--border)}.tab-nav{display:flex;gap:4px;background:var(--bg-tertiary);padding:4px;border-radius:12px}.tab-button{display:flex;align-items:center;gap:8px;padding:10px 20px;background:transparent;border:none;border-radius:8px;color:var(--text-secondary);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.tab-button:hover{color:var(--text-primary)}.tab-button.active{background:var(--bg-secondary);color:var(--text-primary);box-shadow:0 2px 8px #0003}.header-actions-modern{display:flex;align-items:center;gap:8px}.zoom-controls{display:flex;align-items:center;gap:4px;padding:4px;background:var(--bg-tertiary);border-radius:10px;margin-right:8px}.zoom-level{font-size:12px;color:var(--text-secondary);min-width:40px;text-align:center}.icon-button-modern{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);border:1px solid transparent;border-radius:8px;color:var(--text-secondary);cursor:pointer;transition:all .2s}.icon-button-modern:hover{background:var(--bg-secondary);color:var(--text-primary);border-color:var(--border)}.icon-button-modern.close:hover{background:#ef444433;color:var(--error);border-color:var(--error)}.main-content{flex:1;display:flex;flex-direction:column;min-height:0}.chart-view{flex:1;display:flex;flex-direction:column;padding:24px;gap:20px;min-height:0}.info-banner{display:flex;gap:12px;align-items:flex-start;background:#0ea5e914;border:1px solid rgba(14,165,233,.5);border-radius:12px;padding:14px 18px;color:var(--text-secondary)}.info-banner strong{display:block;color:var(--text-primary);margin-bottom:4px}.info-banner p{margin:0;font-size:13px;line-height:1.6}.chart-wrapper{flex:1;min-height:60vh;display:flex;flex-direction:column;background:var(--bg-secondary);border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:0 4px 20px #0003}.live-values-panel{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:20px}.live-values-panel h3{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-secondary);margin-bottom:16px}.live-values-grid{display:flex;gap:20px;flex-wrap:wrap}.live-time{padding:8px 16px;background:var(--bg-tertiary);border-radius:8px;font-size:13px;color:var(--text-secondary)}.live-value{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--bg-tertiary);border-radius:8px;border-left:3px solid}.live-label{font-size:12px;color:var(--text-muted)}.live-number{font-size:16px;font-weight:600;font-family:JetBrains Mono,monospace}.live-unit{font-size:12px;color:var(--text-muted)}.hover-hint{font-size:13px;color:var(--text-muted);font-style:italic}.data-view{flex:1;padding:24px}.data-table-wrapper{background:var(--bg-secondary);border:1px solid var(--border);border-radius:16px;overflow:hidden}.data-table{width:100%;border-collapse:collapse}.data-table th,.data-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border)}.data-table th{background:var(--bg-tertiary);font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.data-table td{font-size:13px;font-family:JetBrains Mono,monospace;color:var(--text-secondary)}.data-table tr:hover td{background:var(--bg-tertiary)}.table-note{padding:16px;text-align:center;font-size:13px;color:var(--text-muted)}.settings-view{flex:1;padding:24px;overflow-y:auto}.settings-grid-modern{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:24px}.settings-section{background:var(--bg-secondary);border:1px solid var(--border);border-radius:16px;padding:24px}.settings-section h3{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}.settings-section h3 svg{color:var(--accent)}.settings-group{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}.toggle-label{display:flex;align-items:center;gap:12px;cursor:pointer}.toggle-label input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent);cursor:pointer}.toggle-text{font-size:14px;color:var(--text-secondary)}.settings-row-modern{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.settings-row-modern label{font-size:13px;color:var(--text-secondary)}.settings-row-modern input[type=range]{width:100%;accent-color:var(--accent)}.settings-row-modern input[type=text],.settings-row-modern input[type=number],.settings-row-modern select{padding:10px 14px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);font-size:14px;outline:none;transition:border-color .2s}.settings-row-modern input:focus,.settings-row-modern select:focus{border-color:var(--accent)}.channels-section{background:var(--bg-secondary);border:1px solid var(--border);border-radius:16px;padding:24px}.channels-section h3{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;margin-bottom:20px}.channels-section h3 svg{color:var(--accent)}.channels-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.channel-card{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:border-color .2s}.channel-card:hover{border-color:var(--channel-color, var(--accent))}.channel-header{display:flex;align-items:center;padding:14px 16px;cursor:pointer}.channel-toggle{display:flex;align-items:center;gap:10px;flex:1}.channel-toggle input{accent-color:var(--accent)}.channel-name{font-weight:600;font-size:14px}.channel-unit{font-size:12px;color:var(--text-muted)}.channel-details{padding:16px;border-top:1px solid var(--border);background:var(--bg-primary)}.channel-stats-mini{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:16px}.stat-mini{display:flex;flex-direction:column;gap:4px}.stat-mini .stat-label{font-size:11px;color:var(--text-muted);text-transform:uppercase}.stat-mini .stat-value{font-size:14px;font-weight:600;font-family:JetBrains Mono,monospace}.channel-offset{display:flex;align-items:center;gap:12px}.channel-offset label{font-size:13px;color:var(--text-secondary)}.channel-offset input{flex:1;padding:8px 12px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);font-size:13px;font-family:JetBrains Mono,monospace}.footer-modern{padding:16px 24px;background:#18181be6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--border)}.quick-stats{display:flex;gap:16px;overflow-x:auto}.quick-stat{display:flex;flex-direction:column;gap:4px;padding:10px 16px;background:var(--bg-tertiary);border-radius:10px;border-left:3px solid;white-space:nowrap}.quick-stat-label{font-size:11px;color:var(--text-muted);text-transform:uppercase}.quick-stat-values{display:flex;gap:12px}.quick-stat-item{display:flex;flex-direction:column;gap:1px}.quick-stat-sublabel{font-size:9px;color:var(--text-muted);text-transform:uppercase}.quick-stat-value{font-size:12px;font-weight:600;font-family:JetBrains Mono,monospace}.quick-stat-unit{font-size:10px;color:var(--text-muted)}.feedback-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.feedback-modal{background:var(--bg-secondary);border:1px solid var(--border);border-radius:16px;padding:24px;width:400px;max-width:90vw;box-shadow:0 20px 60px #00000080}.feedback-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.feedback-header h3{margin:0;font-size:18px;color:var(--text-primary)}.feedback-close{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:6px}.feedback-close:hover{background:var(--bg-tertiary);color:var(--text-primary)}.feedback-type{display:flex;gap:8px;margin-bottom:16px}.feedback-type-btn{flex:1;padding:8px 12px;border:1px solid var(--border);background:var(--bg-tertiary);color:var(--text-secondary);border-radius:8px;cursor:pointer;font-size:13px;transition:all .2s}.feedback-type-btn:hover{border-color:var(--primary)}.feedback-type-btn.active.bug{background:#ef444433;border-color:#ef4444;color:#ef4444}.feedback-type-btn.active.feature{background:#22c55e33;border-color:#22c55e;color:#22c55e}.feedback-type-btn.active.general{background:#a855f733;border-color:#a855f7;color:#a855f7}.feedback-modal textarea{width:100%;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:8px;padding:12px;color:var(--text-primary);font-family:inherit;font-size:14px;resize:vertical;margin-bottom:16px}.feedback-modal textarea:focus{outline:none;border-color:var(--primary)}.feedback-modal textarea::placeholder{color:var(--text-muted)}.feedback-submit{width:100%;padding:12px;background:var(--primary);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .2s}.feedback-submit:hover:not(:disabled){background:var(--primary-hover)}.feedback-submit:disabled{opacity:.5;cursor:not-allowed}.feedback-success{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;color:#22c55e}.feedback-success p{margin-top:16px;font-size:16px}.spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.recharts-cartesian-grid-horizontal line,.recharts-cartesian-grid-vertical line{stroke:var(--border);stroke-opacity:.5}.recharts-text{fill:var(--text-secondary)}.recharts-legend-item-text{color:var(--text-secondary)!important}.recharts-tooltip-wrapper{outline:none}@media(max-width:768px){.header-modern{flex-direction:column;gap:16px;padding:12px 16px}.tab-nav{order:-1}.header-left-modern{flex-wrap:wrap;justify-content:center}.file-meta{display:none}.settings-grid-modern,.channels-grid{grid-template-columns:1fr}}