*{margin:0;padding:0;box-sizing:border-box}:root{--delta-color: #87CEEB;--theta-color: #DDA0DD;--alpha-color: #98FB98;--beta-color: #FFDAB9;--gamma-color: #FFB6C1;--all-color: #F5F5F5;--n1-color: #E6F3FF;--n2-color: #D4DDFF;--n3-color: #C2E0FF;--rem-color: #FFE6F0;--bg-primary: linear-gradient(135deg, #F0FFF0 0%, #FFF8DC 50%, #FFE4E1 100%);--bg-secondary: rgba(255, 255, 255, .95);--bg-card: rgba(255, 255, 255, .9);--bg-glass: rgba(255, 255, 255, .8);--text-primary: #2D3748;--text-secondary: #4A5568;--text-accent: #553C9A;--border-color: rgba(226, 232, 240, .9);--shadow-soft: 0 4px 25px rgba(0, 0, 0, .08);--shadow-medium: 0 8px 35px rgba(0, 0, 0, .12);--shadow-strong: 0 15px 45px rgba(0, 0, 0, .15);--accent-primary: #6366f1;--accent-success: #059669;--accent-warning: #d97706;--accent-danger: #dc2626;--transition-fast: .2s cubic-bezier(.4, 0, .2, 1);--transition-medium: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .5s cubic-bezier(.4, 0, .2, 1)}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;font-size:14px;line-height:1.6;overflow-x:hidden}.app-container{max-width:1600px;margin:0 auto;padding:20px;min-height:100vh;display:flex;flex-direction:column}.welcome-header{background:var(--bg-card);border-radius:24px;padding:24px 32px;margin-bottom:20px;box-shadow:var(--shadow-medium);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid var(--border-color);position:relative}.header-content{display:flex;justify-content:space-between;align-items:center}.user-greeting{display:flex;align-items:center;gap:16px}.profile-avatar{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--alpha-color),var(--beta-color));display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;cursor:pointer;transition:var(--transition-medium);box-shadow:var(--shadow-soft)}.profile-avatar:hover{transform:scale(1.05) rotate(5deg);box-shadow:var(--shadow-strong)}.greeting-text h1{font-size:28px;font-weight:700;color:var(--text-accent);margin-bottom:4px}.greeting-text p{color:var(--text-secondary);font-size:16px}.session-info{display:flex;align-items:center;gap:20px}.info-card{background:var(--bg-glass);border-radius:12px;padding:12px 16px;border:1px solid var(--border-color);text-align:center;min-width:100px}.info-label{display:block;font-size:12px;color:var(--text-secondary);margin-bottom:4px}.info-value{display:block;font-size:18px;font-weight:600;color:var(--text-primary)}.sleep-quality{color:var(--accent-success)}.status-dot{width:12px;height:12px;border-radius:50%;animation:pulse 2s ease-in-out infinite}.status-dot.recording{background:var(--accent-danger)}.user-setup-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:none;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.user-setup-modal.show{display:flex}.modal-content{background:var(--bg-card);border-radius:20px;padding:32px;max-width:400px;width:90%;text-align:center;box-shadow:var(--shadow-strong);border:1px solid var(--border-color)}.modal-content h3{font-size:24px;font-weight:600;color:var(--text-accent);margin-bottom:8px}.modal-content p{color:var(--text-secondary);margin-bottom:24px}#user-name{width:100%;padding:12px 16px;border:2px solid var(--border-color);border-radius:12px;font-size:16px;background:#fff;color:var(--text-primary);margin-bottom:20px;transition:var(--transition-fast)}#user-name:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px #6366f11a}.avatar-selection{margin-bottom:24px}.avatar-selection span{display:block;margin-bottom:12px;color:var(--text-secondary);font-size:14px}.avatar-options{display:flex;justify-content:center;gap:12px}.avatar-option{width:50px;height:50px;border-radius:50%;background:var(--bg-glass);border:2px solid var(--border-color);display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer;transition:var(--transition-fast)}.avatar-option:hover{border-color:var(--accent-primary);transform:scale(1.1)}.avatar-option.selected{border-color:var(--accent-primary);background:#6366f11a}.setup-btn{background:linear-gradient(135deg,var(--accent-primary),#8b5cf6);color:#fff;border:none;border-radius:12px;padding:14px 28px;font-size:16px;font-weight:600;cursor:pointer;transition:var(--transition-medium);width:100%}.setup-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-medium)}.main-dashboard{display:grid;grid-template-columns:1fr 450px;gap:20px;flex:1;margin-bottom:20px}.left-panel{background:var(--bg-card);border-radius:24px;padding:28px;box-shadow:var(--shadow-medium);border:1px solid var(--border-color);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}.section-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px}.section-header h2{font-size:20px;font-weight:600;color:var(--text-accent);display:flex;align-items:center;gap:10px}.eeg-controls{flex:1;display:flex;justify-content:flex-end}.band-toggles{display:flex;gap:8px;flex-wrap:wrap}.band-toggle{display:flex;align-items:center;gap:6px;padding:8px 12px;border:none;border-radius:10px;background:var(--bg-glass);color:var(--text-secondary);font-size:12px;font-weight:500;cursor:pointer;transition:var(--transition-fast);border:1px solid transparent}.band-toggle:hover{background:var(--bg-secondary);transform:translateY(-1px);box-shadow:var(--shadow-soft)}.band-toggle.active{background:var(--bg-secondary);color:var(--text-primary);border-color:var(--border-color);box-shadow:var(--shadow-soft)}.band-color{width:10px;height:10px;border-radius:50%;display:inline-block}.delta-band{background:var(--delta-color)}.theta-band{background:var(--theta-color)}.alpha-band{background:var(--alpha-color)}.beta-band{background:var(--beta-color)}.gamma-band{background:var(--gamma-color)}.all-band{background:var(--all-color)}.eeg-plot-container{background:#f8fafce6;border-radius:16px;margin-bottom:24px;border:1px solid var(--border-color);overflow:hidden;box-shadow:var(--shadow-soft)}.eeg-plot{width:100%;height:400px;background:#fff}.plot-controls{display:flex;gap:12px;padding:16px;background:var(--bg-glass);border-top:1px solid var(--border-color);justify-content:center}.control-btn{padding:10px 16px;border:none;border-radius:10px;background:var(--bg-secondary);color:var(--text-primary);font-weight:500;cursor:pointer;transition:var(--transition-fast);display:flex;align-items:center;gap:6px;font-size:12px;border:1px solid var(--border-color)}.control-btn:hover{background:var(--accent-primary);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-medium)}.control-btn.highlight{background:linear-gradient(135deg,var(--gamma-color),var(--theta-color));color:var(--text-primary);border-color:transparent}.timeline-section{background:var(--bg-glass);border-radius:16px;padding:20px;border:1px solid var(--border-color)}.timeline-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.timeline-header span:first-child{font-weight:600;color:var(--text-primary)}.time-display{font-family:Courier New,monospace;font-weight:600;color:var(--accent-primary);background:#6366f11a;padding:6px 12px;border-radius:8px;font-size:14px}.timeline-slider-container{position:relative;margin-bottom:16px}.timeline-slider{width:100%;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--delta-color),var(--theta-color),var(--alpha-color),var(--beta-color),var(--gamma-color));outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.timeline-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 3px 10px #0003;border:3px solid var(--accent-primary)}.timeline-annotations{position:absolute;top:-6px;left:0;width:100%;height:20px;pointer-events:none}.annotation-marker{position:absolute;width:10px;height:10px;border-radius:50%;transform:translate(-50%);cursor:pointer;pointer-events:auto;transition:var(--transition-fast)}.annotation-marker:hover{transform:translate(-50%) scale(1.3)}.annotation-marker.spindle{background:var(--theta-color)}.annotation-marker.k-complex{background:var(--delta-color)}.annotation-marker.rem-burst{background:var(--gamma-color)}.playback-speed{display:flex;align-items:center;gap:8px;justify-content:center}.playback-speed label{font-size:12px;color:var(--text-secondary)}.playback-speed select{padding:4px 8px;border:1px solid var(--border-color);border-radius:6px;background:#fff;color:var(--text-primary);font-size:12px;cursor:pointer}.right-panel{display:flex;flex-direction:column;gap:20px}.sleep-stage-display{background:var(--bg-card);border-radius:20px;padding:24px;box-shadow:var(--shadow-medium);border:1px solid var(--border-color);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}.stage-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.stage-header h3{font-size:16px;font-weight:600;color:var(--text-accent);display:flex;align-items:center;gap:8px}.stage-confidence{font-size:12px;color:var(--text-secondary)}.stage-confidence span{color:var(--accent-success);font-weight:600}.current-stage-card{display:flex;gap:16px}.stage-visual{display:flex;flex-direction:column;align-items:center;gap:12px}.stage-icon{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--gamma-color),var(--theta-color));display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;box-shadow:var(--shadow-soft)}.stage-waveform{width:80px;height:40px;background:var(--bg-glass);border-radius:8px;border:1px solid var(--border-color)}.mini-eeg-plot{width:100%;height:100%}.stage-details{flex:1}.stage-details h4{font-size:18px;font-weight:600;color:var(--text-primary);margin-bottom:6px}.stage-details p{font-size:14px;color:var(--text-secondary);margin-bottom:12px}.stage-metrics{display:flex;gap:16px}.metric{display:flex;flex-direction:column;gap:2px;font-size:12px}.metric span:first-child{color:var(--text-secondary)}.metric span:last-child{font-weight:600;color:var(--text-primary)}.sleep-cycle-overview{background:var(--bg-card);border-radius:20px;padding:24px;box-shadow:var(--shadow-medium);border:1px solid var(--border-color);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}.cycle-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.cycle-header h3{font-size:16px;font-weight:600;color:var(--text-accent);display:flex;align-items:center;gap:8px}.cycle-quality{text-align:center}.quality-score{display:block;font-size:28px;font-weight:700;color:var(--accent-success);line-height:1}.quality-label{font-size:12px;color:var(--text-secondary)}.cycle-chart-container{display:flex;gap:20px;align-items:center}.sleep-cycle-chart{width:120px;height:120px;flex-shrink:0}.cycle-legend{flex:1;display:flex;flex-direction:column;gap:8px}.legend-item{display:flex;align-items:center;gap:8px;font-size:12px}.legend-color{width:12px;height:12px;border-radius:2px}.n1-color{background:var(--n1-color);border:1px solid var(--delta-color)}.n2-color{background:var(--n2-color);border:1px solid var(--theta-color)}.n3-color{background:var(--n3-color);border:1px solid var(--delta-color)}.rem-color{background:var(--rem-color);border:1px solid var(--gamma-color)}.legend-percent{margin-left:auto;font-weight:600;color:var(--text-primary)}.rem-monitor{background:var(--bg-card);border-radius:20px;padding:24px;box-shadow:var(--shadow-medium);border:1px solid var(--border-color);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}.rem-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.rem-header h3{font-size:16px;font-weight:600;color:var(--text-accent);display:flex;align-items:center;gap:8px}.rem-status{padding:4px 12px;border-radius:6px;font-size:12px;font-weight:500}.rem-status.active{background:#0596691a;color:var(--accent-success)}.rem-timeline-plot{width:100%;height:80px;background:var(--bg-glass);border-radius:12px;margin-bottom:16px;border:1px solid var(--border-color)}.rem-stats{display:flex;justify-content:space-between;gap:12px}.rem-stat{text-align:center;flex:1}.stat-value{display:block;font-size:18px;font-weight:600;color:var(--accent-primary);line-height:1}.stat-label{font-size:11px;color:var(--text-secondary);margin-top:2px}.bottom-nav{display:flex;background:var(--bg-card);border-radius:24px;padding:16px;box-shadow:var(--shadow-strong);border:1px solid var(--border-color);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);justify-content:space-around;margin-top:auto}.nav-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 20px;border:none;border-radius:16px;background:transparent;color:var(--text-secondary);cursor:pointer;transition:var(--transition-medium);font-size:12px;font-weight:500;min-width:90px}.nav-item:hover{background:var(--bg-glass);color:var(--text-primary);transform:translateY(-2px)}.nav-item.active{background:linear-gradient(135deg,var(--accent-primary),#8b5cf6);color:#fff;box-shadow:var(--shadow-soft)}.nav-item i{font-size:20px}.tab-content{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg-primary);z-index:1000;padding:100px 20px 120px;overflow-y:auto}.tab-header{max-width:1600px;margin:0 auto 30px;text-align:center}.tab-header h2{font-size:32px;font-weight:700;color:var(--text-accent);margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:12px}.tab-header p{font-size:16px;color:var(--text-secondary)}.regions-grid{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:24px}.region-panel{background:var(--bg-card);border-radius:20px;padding:24px;box-shadow:var(--shadow-medium);border:1px solid var(--border-color);transition:var(--transition-medium)}.region-panel:hover{transform:translateY(-6px);box-shadow:var(--shadow-strong)}.region-panel.frontal-region{border-left:4px solid var(--delta-color)}.region-panel.temporal-region{border-left:4px solid var(--beta-color)}.region-panel.parietal-region{border-left:4px solid var(--alpha-color)}.region-panel.occipital-region{border-left:4px solid var(--gamma-color)}.region-header{display:flex;gap:16px;margin-bottom:20px}.region-icon{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,var(--accent-primary),#8b5cf6);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;flex-shrink:0}.region-info h3{font-size:18px;font-weight:600;color:var(--text-primary);margin-bottom:4px}.region-info p{font-size:12px;color:var(--text-secondary);margin-bottom:6px}.region-function{font-size:14px;color:var(--text-accent);font-style:italic}.region-plot-container{margin-bottom:16px}.region-plot{width:100%;height:200px;background:var(--bg-glass);border-radius:12px;border:1px solid var(--border-color)}.region-metrics{display:flex;gap:20px}.metric-item{display:flex;flex-direction:column;gap:4px;font-size:12px}.metric-label{color:var(--text-secondary)}.metric-value{font-weight:600;color:var(--accent-primary);font-size:14px}.sleep-stages-grid{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:24px}.sleep-stage-panel{background:var(--bg-card);border-radius:20px;padding:24px;box-shadow:var(--shadow-medium);border:1px solid var(--border-color);transition:var(--transition-medium)}.sleep-stage-panel:hover{transform:translateY(-6px);box-shadow:var(--shadow-strong)}.sleep-stage-panel.n1-stage{border-left:4px solid var(--n1-color)}.sleep-stage-panel.n2-stage{border-left:4px solid var(--n2-color)}.sleep-stage-panel.n3-stage{border-left:4px solid var(--n3-color)}.sleep-stage-panel.rem-stage{border-left:4px solid var(--rem-color)}.stage-panel-header{display:flex;gap:16px;margin-bottom:20px}.stage-panel-icon{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,var(--accent-primary),#8b5cf6);display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;flex-shrink:0}.stage-panel-info h3{font-size:18px;font-weight:600;color:var(--text-primary);margin-bottom:4px}.stage-panel-info p{font-size:14px;color:var(--text-secondary)}.stage-example-plot{margin-bottom:20px}.stage-plot{width:100%;height:150px;background:var(--bg-glass);border-radius:12px;border:1px solid var(--border-color)}.stage-characteristics h4{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:8px}.stage-characteristics ul{list-style:none;padding:0}.stage-characteristics li{font-size:13px;color:var(--text-secondary);padding:4px 0 4px 16px;position:relative}.stage-characteristics li:before{content:"•";color:var(--accent-primary);position:absolute;left:0}.reports-grid{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}.report-summary-card,.events-timeline-card,.annotations-card,.recommendations-card{background:var(--bg-card);border-radius:20px;padding:24px;box-shadow:var(--shadow-medium);border:1px solid var(--border-color)}.report-summary-card h3,.events-timeline-card h3,.annotations-card h3,.recommendations-card h3{font-size:18px;font-weight:600;color:var(--text-primary);margin-bottom:16px}.summary-content{display:flex;flex-direction:column;gap:12px}.summary-item{display:flex;justify-content:space-between;padding:8px 12px;background:var(--bg-glass);border-radius:8px;border:1px solid var(--border-color)}.summary-label{color:var(--text-secondary);font-size:14px}.summary-value{font-weight:600;color:var(--text-primary);font-size:14px}.events-timeline-plot{width:100%;height:200px;background:var(--bg-glass);border-radius:12px;border:1px solid var(--border-color)}.annotations-list{display:flex;flex-direction:column;gap:12px;max-height:300px;overflow-y:auto}.annotation-item{display:flex;gap:12px;padding:12px;background:var(--bg-glass);border-radius:12px;border:1px solid var(--border-color);transition:var(--transition-fast)}.annotation-item:hover{background:var(--bg-secondary);transform:translate(4px)}.annotation-item .annotation-marker{width:12px;height:12px;border-radius:50%;margin-top:4px;flex-shrink:0}.annotation-item.spindle-event .annotation-marker{background:var(--theta-color)}.annotation-item.k-complex-event .annotation-marker{background:var(--delta-color)}.annotation-item.rem-burst-event .annotation-marker{background:var(--gamma-color)}.annotation-content{flex:1}.annotation-time{font-family:Courier New,monospace;font-size:12px;color:var(--accent-primary);font-weight:600;display:block;margin-bottom:2px}.annotation-text{font-size:14px;color:var(--text-primary);font-weight:500;display:block;margin-bottom:2px}.annotation-detail{font-size:12px;color:var(--text-secondary)}.recommendations-list{display:flex;flex-direction:column;gap:12px}.recommendation-item{display:flex;align-items:center;gap:12px;padding:12px;background:var(--bg-glass);border-radius:12px;border:1px solid var(--border-color);font-size:14px}.recommendation-item.positive{border-left:4px solid var(--accent-success)}.recommendation-item.neutral{border-left:4px solid var(--accent-warning)}.recommendation-item i{color:var(--accent-success)}.recommendation-item.neutral i{color:var(--accent-warning)}.event-tooltip{position:absolute;background:#000000eb;color:#fff;padding:16px;border-radius:12px;font-size:12px;pointer-events:none;opacity:0;transform:translateY(-10px);transition:var(--transition-fast);z-index:1000;max-width:280px;box-shadow:var(--shadow-strong)}.event-tooltip.show{opacity:1;transform:translateY(0)}.tooltip-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.2)}.event-type{font-weight:600;color:var(--gamma-color)}.event-time{font-family:Courier New,monospace;font-size:10px;color:var(--alpha-color)}.tooltip-content p{margin-bottom:10px;line-height:1.4;color:#e2e8f0}.tooltip-metrics{display:flex;gap:12px}.tooltip-metric{display:flex;flex-direction:column;gap:2px;font-size:10px;text-align:center}.tooltip-metric span:first-child{color:var(--text-secondary)}.tooltip-metric span:last-child{color:var(--alpha-color);font-weight:600}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@media (max-width: 1200px){.main-dashboard{grid-template-columns:1fr}.header-content{flex-direction:column;gap:16px;text-align:center}.session-info{justify-content:center}}@media (max-width: 768px){.app-container{padding:12px}.welcome-header{padding:16px 20px}.user-greeting{flex-direction:column;text-align:center;gap:12px}.greeting-text h1{font-size:24px}.band-toggles{justify-content:center;gap:4px}.band-toggle{padding:6px 8px;font-size:11px}.plot-controls{flex-wrap:wrap;gap:8px}.control-btn{padding:8px 12px;font-size:11px}.regions-grid,.sleep-stages-grid,.reports-grid{grid-template-columns:1fr}.bottom-nav{padding:12px}.nav-item{padding:8px 12px;min-width:70px}.nav-item span{font-size:10px}.tab-content{padding:80px 12px 100px}}@media (max-width: 480px){.modal-content{padding:24px;margin:20px}.avatar-options{gap:8px}.avatar-option{width:40px;height:40px;font-size:20px}.left-panel,.sleep-stage-display,.sleep-cycle-overview,.rem-monitor{padding:16px}.section-header{flex-direction:column;gap:12px}.eeg-controls{justify-content:center}.current-stage-card{flex-direction:column;gap:12px}.stage-visual{flex-direction:row;justify-content:center}.cycle-chart-container{flex-direction:column;gap:16px}.rem-stats{gap:8px}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-glass);border-radius:4px}::-webkit-scrollbar-thumb{background:var(--accent-primary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#5a67d8}button:focus,input:focus,select:focus{outline:2px solid var(--accent-primary);outline-offset:2px}@media print{.bottom-nav,.plot-controls,.band-toggles,.user-setup-modal{display:none}.main-dashboard{grid-template-columns:1fr}.tab-content{position:static;display:block!important;padding:0}}