:root{--bg-primary:#f8fafc;--bg-sidebar:#ffffff;--card-bg:#ffffff;--text-main:#1e293b;--text-muted:#64748b;--accent:#2563eb;--accent-hover:#1d4ed8;--border:#e2e8f0;--shadow:0 4px 6px -1px rgb(0 0 0 / 0.05),0 2px 4px -2px rgb(0 0 0 / 0.05)}*{box-sizing:border-box;margin:0;padding:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}body{background-color:var(--bg-primary);color:var(--text-main);display:flex;height:100vh;overflow:hidden}.app-container{display:flex;width:100%;height:calc(100vh - 90px)}.sidebar{width:320px;background-color:var(--bg-sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0}.brand{padding:1.5rem;display:flex;align-items:center;gap:.75rem;color:var(--accent);font-size:1.25rem;font-weight:700;border-bottom:1px solid var(--border)}.search-box{padding:1rem;position:relative;border-bottom:1px solid var(--border)}.search-box i{position:absolute;left:1.75rem;top:50%;transform:translateY(-50%);color:var(--text-muted)}.search-box input{width:100%;padding:.65rem .75rem .65rem 2.5rem;border:1px solid var(--border);border-radius:8px;outline:0;font-size:.9rem;background:var(--bg-primary);transition:border-color .2s}.search-box input:focus{border-color:var(--accent)}.units-nav{flex:1;overflow-y:auto;padding:1rem}.unit-group-title{font-size:.85rem;font-weight:700;text-transform:uppercase;color:var(--text-muted);padding:.5rem .75rem;letter-spacing:.05em}.unit-item{display:block;width:100%;text-align:left;background:0 0;border:none;padding:.75rem;border-radius:8px;font-size:.95rem;font-weight:500;color:var(--text-main);cursor:pointer;transition:background .2s,color .2s;margin-bottom:.25rem}.unit-item:hover{background-color:var(--bg-primary);color:var(--accent)}.unit-item.active{background-color:var(--accent);color:#fff}.loading-text{text-align:center;color:var(--text-muted);padding:2rem}.main-content{flex:1;display:flex;flex-direction:column;overflow-y:auto;padding:2.5rem}.content-header{margin-bottom:1.5rem}.content-header h1{font-size:1.8rem;font-weight:700;margin-bottom:.25rem}.content-header p{color:var(--text-muted)}.content-tabs{display:flex;gap:.75rem;margin-bottom:1.5rem;border-bottom:1px solid var(--border);padding-bottom:.75rem}.tab-btn{background:var(--card-bg);border:1px solid var(--border);padding:.5rem 1rem;border-radius:8px;font-weight:600;font-size:.9rem;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s}.tab-btn:hover{border-color:var(--accent);color:var(--accent)}.tab-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.tracks-section{flex:1}.tracks-list{display:flex;flex-direction:column;gap:.75rem;padding-bottom:30px}.track-card{background:var(--card-bg);border:1px solid var(--border);padding:1rem 1.25rem;border-radius:12px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow);cursor:pointer;transition:transform .15s,border-color .15s}.track-card:hover{border-color:var(--accent);transform:translateY(-1px)}.track-info-side{display:flex;align-items:center;gap:1rem}.track-play-btn{width:40px;height:40px;border-radius:50%;background:var(--bg-primary);border:1px solid var(--border);color:var(--accent);display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}.track-card:hover .track-play-btn,.track-play-btn.playing{background:var(--accent);color:#fff;border-color:var(--accent)}.track-title{font-weight:600;font-size:1rem}.welcome-card{text-align:center;padding:4rem 2rem;background:var(--card-bg);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}.welcome-card i{font-size:3rem;color:var(--accent);margin-bottom:1rem}.welcome-card h3{font-size:1.5rem;margin-bottom:.5rem}.welcome-card p{color:var(--text-muted)}.video-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);align-items:center;justify-content:center;z-index:1000}.video-modal.active{display:flex}.modal-content{background:var(--card-bg);width:90%;max-width:800px;border-radius:16px;overflow:hidden;box-shadow:0 20px 25px -5px rgb(0 0 0 / .1);animation:scaleUp .2s ease-out}@keyframes scaleUp{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}.modal-header{padding:1rem 1.25rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.modal-header h3{font-size:1.1rem;font-weight:600}.modal-header button{background:0 0;border:none;font-size:1.25rem;color:var(--text-muted);cursor:pointer}.modal-header button:hover{color:var(--text-main)}.video-container{position:relative;width:100%;padding-bottom:56.25%;background:#000}.video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%}.audio-player-bar{position:fixed;bottom:0;left:0;width:100%;height:90px;background:var(--bg-sidebar);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 2rem;box-shadow:0 -4px 10px rgba(0,0,0,.03);z-index:100}.player-track-info{width:250px;display:flex;flex-direction:column;gap:.2rem}#nowPlayingTitle{font-weight:600;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#nowPlayingUnit{font-size:.8rem;color:var(--text-muted)}.player-controls-group{flex:1;max-width:600px;display:flex;flex-direction:column;align-items:center;gap:.5rem}.player-buttons{display:flex;align-items:center;gap:1.25rem}.player-buttons button{background:0 0;border:none;font-size:1.1rem;color:var(--text-main);cursor:pointer;transition:color .2s}.player-buttons button:hover{color:var(--accent)}.play-main-btn{width:38px;height:38px;background:var(--accent)!important;color:#fff!important;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.9rem!important;box-shadow:0 2px 5px rgba(37,99,235,.3)}.player-progress-container{width:100%;display:flex;align-items:center;gap:.75rem;font-size:.75rem;color:var(--text-muted)}.player-progress-container input[type=range]{flex:1;accent-color:var(--accent);cursor:pointer}.player-extras{width:250px;display:flex;align-items:center;justify-content:flex-end;gap:1.5rem}.speed-control{display:flex;align-items:center;gap:.4rem;color:var(--text-muted);font-size:.85rem}.speed-control select{padding:.25rem .5rem;border-radius:6px;border:1px solid var(--border);background:var(--bg-primary);cursor:pointer}.volume-control{display:flex;align-items:center;gap:.5rem;color:var(--text-muted)}.volume-control input[type=range]{width:80px;accent-color:var(--accent);cursor:pointer}.site-footer{position:fixed;bottom:5px;right:20px;font-size:.7rem;color:var(--text-muted);background:0 0;z-index:101;pointer-events:none}@media (max-width:768px){body{flex-direction:column;height:auto}.app-container{flex-direction:column;height:calc(100vh - 120px)}.sidebar{width:100%;height:40vh}.main-content{height:60vh;padding:1.25rem}.audio-player-bar{height:110px;flex-direction:column;padding:.75rem 1rem;gap:.5rem}.player-extras,.player-track-info{width:100%;text-align:center;flex-direction:row;justify-content:space-between}.player-extras{display:none}.site-footer{bottom:2px;font-size:.6rem}.main-content{padding-bottom:120px}}