.sidebar{position:fixed;top:0;left:0;height:100vh;width:var(--sidebar-width);background:white;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:2px 0 5px #0000001a;overflow-x:hidden;z-index:100}.sidebar.collapsed{width:var(--sidebar-collapsed-width)}.sidebar-content{padding:1rem .5rem;display:flex;flex-direction:column;gap:.5rem;margin-top:var(--navbar-height)}.sidebar-item{display:flex;align-items:center;padding:.75rem 1rem;border-radius:8px;cursor:pointer;transition:all .2s ease;color:var(--text-color);position:relative;white-space:nowrap}.sidebar-item:hover{background-color:#8b1f1f1a;transform:translate(4px)}.sidebar-item.active{background-color:var(--primary-color);color:#fff}.sidebar-item-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:1rem;flex-shrink:0}.sidebar-item-icon svg{width:20px;height:20px}.sidebar-item-label{transition:opacity .3s ease}.collapsed .sidebar-item{padding:.75rem;justify-content:center}.collapsed .sidebar-item-icon{margin-right:0}.collapsed .sidebar-item-label{display:none;opacity:0;width:0}.collapsed .sidebar-item:hover:after{content:attr(data-tooltip);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);background:#333;color:#fff;padding:.5rem 1rem;border-radius:4px;font-size:.75rem;white-space:nowrap;z-index:1000;box-shadow:0 2px 5px #0003}.collapsed .sidebar-item:hover:before{content:"";position:absolute;left:calc(100% + 2px);top:50%;transform:translateY(-50%);border:8px solid transparent;border-right-color:#333;z-index:1000}.navbar{height:var(--navbar-height);background-color:var(--primary-color);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;position:fixed;top:0;right:0;left:0;z-index:1000;box-shadow:0 2px 5px #0000001a}.nav-left{display:flex;align-items:center;gap:1.5rem;margin-left:calc(var(--sidebar-width) - 3rem);transition:margin-left .3s ease}.sidebar-closed .nav-left{margin-left:calc(var(--sidebar-collapsed-width) - 3rem)}.menu-button{position:fixed;left:1rem;background:none;border:none;color:#fff;cursor:pointer;font-size:1.2rem;padding:.5rem;z-index:1001;display:flex;align-items:center;justify-content:center;transition:transform .2s}.nav-left h1{margin-left:1rem;font-size:1.2rem;font-weight:600}.nav-center{display:flex;gap:1.5rem;align-items:center}.nav-item{position:relative}.nav-link{color:#fff;text-decoration:none;padding:.5rem 1rem;border-radius:4px;transition:background-color .2s;font-weight:500;white-space:nowrap}.nav-link:hover,.nav-link.active{background-color:#ffffff1a}.has-dropdown .nav-link:after{content:"▼";font-size:.8em;margin-left:.5rem;transition:transform .2s}.has-dropdown .nav-link.active:after{transform:rotate(180deg)}.dropdown-menu{position:absolute;top:100%;left:0;background:white;border-radius:4px;box-shadow:0 2px 8px #0000001a;min-width:200px;padding:.5rem 0;margin-top:.5rem;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .2s ease;z-index:1000}.nav-item:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-item{display:block;padding:.75rem 1rem;color:var(--text-color);text-decoration:none;transition:all .2s}.dropdown-item:hover{background-color:#f5f5f5;color:var(--primary-color);padding-left:1.5rem}.nav-right{display:flex;align-items:center;gap:1.5rem}.nav-icon{font-size:1.2rem;cursor:pointer;transition:transform .2s}.nav-icon:hover{transform:scale(1.1)}.user-profile{display:flex;align-items:center;gap:.75rem;padding:.5rem;border-radius:4px;cursor:pointer;transition:background-color .2s}.user-profile:hover{background-color:#ffffff1a}.user-profile img{width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,.2)}.battle-card{background:white;border-radius:8px;padding:1.5rem;box-shadow:0 2px 4px #0000001a;display:flex;flex-direction:column;justify-content:space-between;transition:transform .2s,box-shadow .2s}.battle-card:hover{transform:translateY(-5px);box-shadow:0 4px 8px #0003}.battle-card-header{display:flex;gap:1rem;margin-bottom:1.5rem}.battle-status-group{display:flex;align-items:center;gap:.75rem}.battle-status{padding:.25rem .75rem;border-radius:15px;font-size:.8rem;font-weight:500;position:relative;overflow:hidden}.battle-status:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,transparent,rgba(255,255,255,.2),transparent);transform:translate(-100%);animation:shine 2s infinite}.battle-status.live{background:#ff4444;color:#fff}.battle-status.voting{background:#4caf50;color:#fff}.battle-info-group{display:flex;align-items:center;gap:.75rem;margin-left:auto}.battle-type,.battle-genre{padding:.25rem .75rem;border-radius:15px;background:#f0f0f0;font-size:.8rem}.tournament-badge{display:flex;align-items:center;gap:.25rem;padding:.25rem .75rem;background:linear-gradient(45deg,#ffd700,#ffc107);color:#000;border-radius:15px;font-size:.8rem;font-weight:500;box-shadow:0 2px 4px #ffd70033}.prize-pool{padding:.25rem .75rem;background:linear-gradient(45deg,#2196f3,#03a9f4);color:#fff;border-radius:15px;font-size:.8rem;font-weight:500}.audio-player{width:100%;background:#f8f9fa;border-radius:8px;padding:12px;margin:10px 0;box-shadow:0 1px 3px #0000001a;display:flex;align-items:center;gap:12px}.play-button{background:var(--primary-color, #4CAF50);color:#fff;border:none;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s,background-color .2s;flex-shrink:0}.play-button:hover{background:var(--primary-dark, #45a049);transform:scale(1.05)}.play-button:active{transform:scale(.95)}.play-button svg{width:14px;height:14px}.progress-bar{flex:1;height:6px;background:#e0e0e0;border-radius:3px;cursor:pointer;position:relative;overflow:hidden}.progress{position:absolute;top:0;left:0;height:100%;background:var(--primary-color, #4CAF50);border-radius:3px;transition:width .1s linear}.producer{text-align:center}.producer-header{margin-bottom:1rem}.producer h3{margin-bottom:.5rem;font-weight:700;font-size:1.2rem}.producer-stats{display:flex;justify-content:center;gap:1rem;margin-bottom:.5rem}.producer-rank,.producer-xp,.producer-wins{display:flex;align-items:center;gap:.25rem;font-size:.9rem;color:#666}.rank-icon{font-size:1.2rem}.rank-icon.bronze{color:#cd7f32}.rank-icon.silver{color:silver}.rank-icon.gold{color:gold}.rank-icon.platinum{color:#e5e4e2}.rank-icon.diamond{color:#b9f2ff;filter:drop-shadow(0 0 2px rgba(185,242,255,.5))}.versus-battle{display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;align-items:start}.vs-container{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-top:2rem}.vs{font-weight:700;color:var(--primary-color);font-size:1.5rem}.round-badge{padding:.25rem .75rem;background:#f0f0f0;border-radius:12px;font-size:.8rem;color:#666}.community-battle{padding:1rem}.participants-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-bottom:1rem}.participant-card{position:relative;background:#f8f9fa;border-radius:8px;padding:1rem;transition:transform .2s}.participant-card:hover{transform:translateY(-2px)}.participant-rank{position:absolute;top:-10px;right:-10px;background:#ff4444;color:#fff;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;box-shadow:0 2px 4px #0000001a}.tournament-battle{padding:1rem}.tournament-round{margin-bottom:2rem}.tournament-round h4{text-align:center;margin-bottom:1rem;color:#333;font-size:1.2rem}.bracket-matches{display:flex;flex-direction:column;gap:1rem}.bracket-match{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:center;background:#f8f9fa;padding:1rem;border-radius:8px;transition:transform .2s}.bracket-match:hover{transform:translate(5px)}.bracket-player{padding:1rem;background:white;border-radius:6px;text-align:center}.bracket-vs{font-weight:700;color:#666}.tournament-prize{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem;background:linear-gradient(45deg,#ffd700,#ffc107);border-radius:8px;color:#000;font-weight:600;margin-top:1rem}.fire-votes{display:flex;gap:.5rem;justify-content:center;margin-top:.5rem;position:relative;cursor:pointer;padding:.5rem;border-radius:20px;transition:transform .2s}.fire-votes:hover{transform:scale(1.05)}.fire-votes svg{color:#ddd;transition:color .2s;font-size:1.2rem}.fire-votes svg.active{color:#f44;filter:drop-shadow(0 0 2px rgba(255,68,68,.5))}.fire-votes.voting svg{animation:pulse 1s infinite}.vote-count{position:absolute;top:-8px;right:-8px;background:#ff4444;color:#fff;padding:.25rem .5rem;border-radius:12px;font-size:.75rem;font-weight:600}.chat-section{margin-top:1rem;width:100%;border:1px solid #eee;border-radius:8px;overflow:hidden;background:white;box-shadow:0 1px 3px #0000001a}.chat-messages{height:150px;overflow-y:auto;padding:10px;background-color:#f8f9fa}.message{margin-bottom:8px;padding:8px;background-color:#fff;border-radius:6px;box-shadow:0 1px 2px #0000000d;line-height:1.4}.message-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem}.user-avatar{font-size:1.2rem;color:#666}.message-user{font-weight:600;color:var(--primary-color, #2c3e50);font-size:.9rem}.message-time{margin-left:auto;color:#95a5a6;font-size:.8rem}.message-content{margin-left:1.7rem}.message-text{color:#34495e;font-size:.9rem;word-break:break-word}.chat-input{display:flex;padding:8px;background-color:#fff;border-top:1px solid #eee;gap:8px}.chat-input input{flex:1;padding:8px 12px;border:1px solid #e0e0e0;border-radius:4px;font-size:.9rem;transition:border-color .2s}.chat-input input:focus{outline:none;border-color:var(--primary-color, #4CAF50)}.send-button{background-color:var(--primary-color, #4CAF50);color:#fff;border:none;border-radius:4px;padding:8px;width:36px;height:36px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.send-button:hover{background-color:var(--primary-dark, #45a049);transform:scale(1.05)}.send-button:active{transform:scale(.95)}.battle-footer{display:flex;justify-content:space-between;align-items:center;margin-top:1.5rem;padding-top:1rem;border-top:1px solid #eee}.battle-info{display:flex;gap:1rem;color:#666;font-size:.9rem}.battle-actions{display:flex;gap:1rem;justify-content:flex-end;margin-top:1rem}.btn-join,.btn-challenge,.btn-submit{padding:.5rem 1rem;border-radius:4px;border:none;cursor:pointer;font-weight:500;transition:all .2s}.btn-join{background:#4caf50;color:#fff}.btn-join:hover{background-color:#45a049;transform:scale(1.05)}.btn-challenge{background:#d9534f;color:#fff}.btn-challenge:hover{background:#c9302c;transform:scale(1.05)}.btn-submit{background:var(--primary-color, #4CAF50);color:#fff}.btn-submit:hover{background:var(--primary-dark, #45a049);transform:scale(1.05)}.btn-join:disabled,.btn-challenge:disabled,.btn-submit:disabled{background-color:#ccc;cursor:not-allowe.leaderboard-panel {background: white; border-radius: 8px; padding: 1.5rem; box-shadow: 0 2px 4px rgba(0,0,0,.1);} .leaderboard-filters {display: flex; gap: 1rem; margin: 1rem 0;} .filter-btn {display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border: 1px solid #ddd; border-radius: 20px; background: white; cursor: pointer; transition: all .2s;} .filter-btn.active {background: var(--primary-color); color: white; border-color: var(--primary-color);} .leaderboard-list {display: flex; flex-direction: column; gap: 1rem;} .leaderboard-item {display: flex; align-items: center; gap: 1rem; padding: .75rem; border-radius: 4px; background: #f8f8f8;} .rank {font-weight: bold; color: var(--primary-color); min-width: 40px;} .producer-info {flex: 1;} .name {font-weight: 500; display: block;} .genre {font-size: .8rem; color: #666;} .score {display: flex; align-items: center; gap: .5rem; color: var(--primary-color); font-weight: 500;} .modal-overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6); z-index: 1000; display: flex; align-items: center; justify-content: center;} .modal {background: white; border-radius: 8px; padding: 2rem; width: 90%; max-width: 500px; box-shadow: 0 4px 8px rgba(0,0,0,.2); animation: fadeIn .3s ease-in-out;} .modal h2 {margin-top: 0; margin-bottom: 1rem; font-size: 1.5rem; color: #333;} .modal label {display: block; font-weight: bold; margin-bottom: .5rem; color: #555;} .modal input,.modal select {width: 100%; padding: .5rem; margin-bottom: 1rem; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem;} .modal button {padding: .5rem 1rem; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem;} .modal .btn-primary {background: #007bff; color: white; margin-right: .5rem;} .modal .btn-primary:hover {background: #0056b3;} .modal .btn-secondary {background: #6c757d; color: white;} .modal .btn-secondary:hover {background: #5a6268;} @keyframes fadeIn {from {opacity: 0; transform: translateY(-20px);} to {opacity: 1; transform: translateY(0);}} .join-battle-modal {position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); background: white; border-radius: 8px; padding: 2rem; box-shadow: 0 4px 8px rgba(0,0,0,.2); z-index: 1000; width: 400px; max-width: 90%;} .modal-content {display: flex; flex-direction: column; gap: 1rem;} .modal-content h2 {font-size: 1.5rem; font-weight: bold; color: #333; margin-bottom: 1rem;} .modal-content ul {list-style: none; padding: 0; margin: 0;} .modal-content li {margin-bottom: .5rem;} .modal-content label {font-size: 1rem; color: #555; cursor: pointer;} .modal-actions {display: flex; justify-content: space-between; margin-top: 1rem;} .btn-primary {background: var(--primary-color); color: white; padding: .5rem 1rem; border-radius: 4px; border: none; cursor: pointer; font-weight: 500; transition: background-color .2s;} .btn-primary:hover {background-color: #b30000;} .btn-secondary {background: #d9534f; color: white; padding: .5rem 1rem; border-radius: 4px; border: none; cursor: pointer; font-weight: 500; transition: background-color .2s;} .btn-secondary:hover {background: #c9302c;} .battle-arena {padding: 2rem; margin-top: 4rem;} .battle-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;} .battle-actions {display: flex; gap: 1rem;} .btn-primary {background: var(--primary-color); color: white; padding: .75rem 1.5rem; border-radius: 4px; border: none; cursor: pointer; font-weight: 500; transition: background-color .2s;} .btn-primary:hover {background-color: #b30000;} .btn-secondary {background: transparent; border: 2px solid var(--primary-color); color: var(--primary-color); padding: .75rem 1.5rem; border-radius: 4px; cursor: pointer; font-weight: 500; transition: all .2s;} .btn-secondary:hover {background: var(--primary-color); color: white;} .battle-grid {display: grid; grid-template-columns: 1fr 300px; gap: 2rem;} .battle-types {margin-bottom: 2rem;} .battle-filters {display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; gap: 1rem; flex-wrap: wrap;} .filter-group {display: flex; gap: 1rem; flex-wrap: wrap; flex: 1;} .genre-dropdown,.type-dropdown,.status-dropdown,.prize-dropdown {padding: .5rem; font-size: 1rem; border-radius: 8px; border: 1px solid #ddd; outline: none; background-color: #f9f9f9; cursor: pointer; transition: border-color .2s,box-shadow .2s; min-width: 120px;} .genre-dropdown:hover,.type-dropdown:hover,.status-dropdown:hover,.prize-dropdown:hover {border-color: #bbb;} .genre-dropdown:focus,.type-dropdown:focus,.status-dropdown:focus,.prize-dropdown:focus {border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(211,47,47,.4);} .filter-button {display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer; transition: all .2s;} .filter-button:hover {background: #f0f0f0; border-color: #bbb;} .loading-spinner {text-align: center; padding: 2rem; color: #666; font-size: 1.1rem;} .loading-spinner::after {content: ""; display: block; width: 30px; height: 30px; margin: 1rem auto; border: 3px solid #ddd; border-top-color: var(--primary-color); border-radius: 50%; animation: spin 1s infinite linear;} @keyframes spin {to {transform: rotate(360deg);}} .error-message {text-align: center; padding: 2rem; background: #fff3f3; border: 1px solid #ffcdd2; border-radius: 8px; color: #d32f2f; margin: 1rem 0;} .error-message button {margin-top: 1rem; padding: .5rem 1rem; background: var(--primary-color); color: white; border: none; border-radius: 4px; cursor: pointer;} .no-battles {text-align: center; padding: 3rem; background: #f8f9fa; border-radius: 8px; color: #666;} .no-battles button {margin-top: 1rem; padding: .5rem 1rem; background: transparent; border: 1px solid #666; border-radius: 4px; cursor: pointer; transition: all .2s;} .no-battles button:hover {background: #666; color: white;} .active-battles {display: grid; gap: 1.5rem;} .modal-container {position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); background: white; border-radius: 10px; padding: 2rem; box-shadow: 0 4px 8px rgba(0,0,0,.2); z-index: 1000; width: 90%; max-width: 500px;} .modal-overlay {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); z-index: 999;} .modal-actions {display: flex; justify-content: flex-end; gap: 1rem; margin-top: 1rem;} .modal-btn {padding: .5rem 1rem; border: none; border-radius: 4px; cursor: pointer; transition: all .2s;} .modal-btn-primary {background: var(--primary-color); color: white;} .modal-btn-primary:hover {background: #b30000;} .modal-btn-secondary {background: #ddd; color: #333;} .modal-btn-secondary:hover {background: #bbb;} .tooltip {position: relative; display: inline-block;} .tooltip:hover::after {content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding: .5rem; background: rgba(0,0,0,.8); color: white; border-radius: 4px; font-size: .875rem; white-space: nowrap; z-index: 1000;} .prize-badge {display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .5rem; background: #ffd700; color: #000; border-radius: 12px; font-size: .875rem; font-weight: 500;} @media (max-width: 768px) {.battle-grid {grid-template-columns: 1fr;} .battle-header {flex-direction: column; align-items: flex-start; gap: 1rem;} .battle-actions {justify-content: flex-start; width: 100%;} .battle-filters {flex-direction: column; align-items: stretch;} .filter-group {flex-direction: column;} .genre-dropdown,.type-dropdown,.status-dropdown,.prize-dropdown {width: 100%;}} @media (max-width: 480px) {.battle-arena {padding: 1rem;} .modal-container {width: 95%; padding: 1rem;}}.waveform-canvas {width: 100%; height: 100%;} .track {background-color: #2d2d2d; border-radius: 4px; margin-bottom: 1rem; border-left: 4px solid var(--track-color);} .track-header {display: flex; align-items: center; padding: .5rem; background-color: #333; border-radius: 4px 4px 0 0;} .track-name {background: none; border: none; color: #fff; font-size: .9rem; padding: .25rem; margin-right: 1rem; border-radius: 2px;} .track-name:focus {background-color: #444; outline: none;} .track-controls {display: flex; align-items: center; gap: .5rem;} .track-btn {background: none; border: none; color: #888; cursor: pointer; padding: .25rem; border-radius: 2px;} .track-btn:hover {color: #fff; background-color: #444;} .track-btn.active {color: var(--track-color);} .volume-slider,.pan-slider {width: 100px; height: 4px; -webkit-appearance: none; background: #444; border-radius: 2px;} .volume-slider::-webkit-slider-thumb,.pan-slider::-webkit-slider-thumb {-webkit-appearance: none; width: 12px; height: 12px; background: #fff; border-radius: 50%; cursor: pointer;} .track-content {height: 100px; position: relative; background-color: #2d2d2d; border-radius: 0 0 4px 4px;} .track-waveform {height: 100%; position: relative;} .playhead {position: absolute; top: 0; width: 2px; height: 100%; background-color: #fff; pointer-events: none;} .track-list {display: flex; flex-direction: column; gap: 1rem; padding: 1rem;} .track-list-empty {text-align: center; padding: 2rem; color: #666;} .track-list-container {flex: 1; overflow-y: auto; min-height: 0;} .track-drop-zone {border: 2px dashed transparent;} .track-drop-zone:hover {border-color: #888;} .transport {display: flex; align-items: center; padding: 1rem; background-color: #252525; border-top: 1px solid #333;} .transport-controls {display: flex; gap: .5rem;} .transport-btn {background: none; border: none; color: #fff; cursor: pointer; padding: .5rem; border-radius: 4px;} .transport-btn:hover {background-color: #444;} .transport-time {margin: 0 1rem; font-family: monospace; font-size: 1.2rem;} .transport-tempo {display: flex; align-items: center; gap: .5rem;} .tempo-input {width: 60px; background: #333; border: none; color: #fff; padding: .25rem; border-radius: 2px; text-align: center;} .grid {position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;} .grid-line {position: absolute; top: 0; width: 1px; height: 100%; background-color: #333;} .timeline {height: 30px; background-color: #252525; border-bottom: 1px solid #333; position: relative; overflow: hidden;} .time-markers {display: flex; height: 100%;} .time-marker {width: 60px; height: 100%; border-right: 1px solid #333; display: flex; align-items: flex-end; padding: 2px;} .time-marker span {font-size: .8rem; color: #888;} .collaborator-cursor {position: absolute; top: 0; width: 2px; height: 100%;} .collaborator-name {position: absolute; top: -20px; left: 50%; transform: translateX(-50%); background-color: inherit; padding: 2px 6px; border-radius: 2px; font-size: .8rem; white-space: nowrap;} .toolbar {display: flex; align-items: center; padding: .5rem; background-color: #252525; border-bottom: 1px solid #333;} .tool-group {display: flex; gap: .5rem; padding: 0 1rem; border-right: 1px solid #333;} .tool-group:last-child {border-right: none;} .tool-btn {display: flex; align-items: center; gap: .5rem; background: none; border: none; color: #fff; padding: .5rem; border-radius: 4px; cursor: pointer;} .tool-btn:hover {background-color: #444;} .tool-btn span {font-size: .9rem;} .library {height: 100%; display: flex; flex-direction: column;} .library-header {padding: 1rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #333;} .upload-btn {background: var(--primary-color); color: white; border: none; padding: .5rem 1rem; border-radius: 4px; cursor: pointer;} .library-content {flex: 1; overflow-y: auto; padding: 1rem;} .library-category {margin-bottom: 1rem;} .category-header {display: flex; align-items: center; gap: .5rem; padding: .5rem; cursor: pointer;} .category-items {padding-left: 1.5rem;} .library-item {display: flex; align-items: center; gap: .5rem; padding: .5rem; cursor: pointer; border-radius: 4px;} .library-item:hover {background-color: #333;} .mixer-panel {display: flex; background-color: #252525; padding: 1rem; border-top: 1px solid #333; overflow-x: auto;} .mixer-track {display: flex; flex-direction: column; align-items: center; margin-right: 1rem; border: 1px solid #333; border-radius: 4px; padding: .5rem;} .mixer-track-header {display: flex; align-items: center; margin-bottom: .5rem;} .mixer-track-name {background: none; border: none; color: #fff; font-size: .9rem; padding: .25rem; margin-right: .5rem; border-radius: 2px; text-align: center;} .mixer-track-controls {display: flex; align-items: center; gap: .5rem;} .mixer-track-btn {background: none; border: none; color: #888; cursor: pointer; padding: .25rem; border-radius: 2px;} .mixer-track-btn:hover {color: #fff; background-color: #444;} .mixer-track-btn.active {color: #fff;} .mixer-track-fader {writing-mode: bt-lr; -webkit-appearance: slider-vertical; width: 8px; height: 175px; padding: 0 5px;} .volume-slider,.pan-slider {width: 100px; height: 4px; -webkit-appearance: none; background: #444; border-radius: 2px; margin-bottom: .5rem;} .volume-slider::-webkit-slider-thumb,.pan-slider::-webkit-slider-thumb {-webkit-appearance: none; width: 12px; height: 12px; background: #fff; border-radius: 50%; cursor: pointer;} .mixer-track-pan {margin-top: .5rem;} .effects-panel {background-color: #252525; padding: 1rem; border-left: 1px solid #333; overflow-y: auto; height: 100%;} .effects-panel h3 {margin-bottom: 1rem; color: #fff;} .effects-tracks {display: flex; flex-direction: column; gap: 1rem;} .effects-track {border: 1px solid #333; border-radius: 4px; padding: .5rem;} .effects-track-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem;} .effects-add select {background: #333; color: #fff; border: none; padding: .25rem; border-radius: 2px;} .effects-list {display: flex; flex-direction: column; gap: .5rem;} .effect {background: #333; border-radius: 4px; padding: .5rem;} .effect-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem;} .remove-effect {background: none; border: none; color: #888; cursor: pointer; padding: .25rem;} .remove-effect:hover {color: #ff4444;} .effect-settings {display: flex; flex-direction: column; gap: .5rem;} .effect-setting {display: flex; align-items: center; gap: .5rem;} .effect-setting label {min-width: 80px; color: #888;} .effect-setting input[type="range"] {flex: 1;} .effect-setting span {min-width: 50px; text-align: right; color: #888;} .sample-browser {height: 100%; display: flex; flex-direction: column;} .library-header {padding: 1rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #333;} .library-content {flex: 1; overflow-y: auto; padding: 1rem;} .library-category {margin-bottom: 1rem;} .category-header {display: flex; align-items: center; gap: .5rem; padding: .5rem; cursor: pointer;} .category-items {padding-left: 1.5rem;} .library-item {display: flex; align-items: center; gap: .5rem; padding: .5rem; cursor: pointer; border-radius: 4px;} .library-item:hover {background-color: #333;} .project-settings-panel {background-color: #252525; padding: 1rem; border-left: 1px solid #333; overflow-y: auto; height: 100%;} .project-settings-panel h3 {margin-bottom: 1rem; color: #fff;} .setting-item {display: flex; align-items: center; margin-bottom: .5rem;} .setting-item label {width: 120px; color: #888;} .setting-item input,.setting-item select {background: #333; color: #fff; border: none; padding: .25rem; border-radius: 2px; flex: 1;} .studio {display: flex; flex-direction: column; height: calc(100vh - var(--navbar-height)); background-color: #1e1e1e; color: #fff; overflow: hidden;} .studio-main {display: flex; flex: 1; overflow: hidden;} .studio-sidebar {width: 250px; background-color: #252525; border-right: 1px solid #333; overflow-y: auto;} .studio-content {flex: 1; display: flex; flex-direction: column; overflow: hidden;} .studio * {color: #fff;} .studio ::-webkit-scrollbar {width: 8px; height: 8px;} .studio ::-webkit-scrollbar-track {background: #1e1e1e;} .studio ::-webkit-scrollbar-thumb {background: #444; border-radius: 4px;} .studio ::-webkit-scrollbar-thumb:hover {background: #555;} :root { --primary-color: #8B1F1F; --background-color: #f5f5f5; --text-color: #333; --sidebar-width: 240px; --sidebar-collapsed-width: 60px; --navbar-height: 60px; } * {margin: 0; padding: 0; box-sizing: border-box;} body {font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif; background-color: var(--background-color);} .app {display: flex; min-height: 100vh;} .main-container {flex: 1; margin-left: var(--sidebar-width); transition: margin-left .3s ease; display: flex; flex-direction: column;} .app.sidebar-closed .main-container {margin-left: var(--sidebar-collapsed-width);} .content {flex: 1; margin-top: var(--navbar-height); height: calc(100vh - var(--navbar-height)); overflow: hidden; position: relative;} button {border: none; background: none; font: inherit; cursor: pointer;} a {text-decoration: none; color: inherit;} :root { --primary-color: #8B1F1F; --background-color: #f5f5f5; --text-color: #333; --sidebar-width: 240px; --sidebar-collapsed-width: 60px; --navbar-height: 60px; } * {margin: 0; padding: 0; box-sizing: border-box;} body {margin: 0; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: var(--background-color); color: var(--text-color);} #root {height: 100vh;}}