@font-face{font-family:'Material Symbols Outlined';font-style:normal;font-weight:400;src:url('./assets/material-symbols.woff2') format('woff2')}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}:root{--bg-color:#121212;--card-color:#2d2d2d;--font-color:#ffffff;--hl1-color:#4da6ff;--hl2-color:#ff4d4d;--text-muted:#888888;--card-border:#444444}*{box-sizing:border-box;margin:0;padding:0}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background-color:var(--bg-color);color:var(--font-color);height:100vh;overflow:hidden;display:flex;padding:20px;gap:20px}#side-panel{width:260px;background-color:var(--card-color);border-radius:16px;display:flex;flex-direction:column;padding:15px;flex-shrink:0}.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.app-title{font-size:1.2rem;font-weight:700;color:var(--font-color)}.panel-content{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}.add-module-btn{background-color:var(--bg-color);color:var(--font-color);border:1px solid var(--card-border);padding:15px;border-radius:12px;cursor:pointer;display:flex;align-items:center;gap:10px;font-size:1rem;transition:background-color .2s}.add-module-btn:hover{background-color:var(--hl1-color);border-color:var(--hl1-color);color:var(--bg-color)}.audio-control-panel{background-color:var(--bg-color);border-radius:12px;padding:15px;display:flex;flex-direction:column;gap:10px;margin-top:auto}.audio-header{display:flex;align-items:center;gap:8px;color:var(--text-muted);font-size:.9rem;font-weight:700;margin-bottom:3px}.waveform-toggles{display:flex;gap:5px}.wave-btn{flex:1;padding:6px 0;background:var(--card-color);color:var(--text-muted);border:1px solid var(--card-border);border-radius:6px;cursor:pointer;font-size:.75rem;font-weight:700;transition:all .2s}.wave-btn:hover{background:var(--card-border);color:var(--font-color)}.wave-btn.active{background:var(--hl1-color);color:var(--bg-color);border-color:var(--hl1-color)}.melody-toggles{display:flex;flex-wrap:wrap;gap:5px}.melody-btn{flex:1 1 18%;padding:6px 0;background:var(--card-color);color:var(--text-muted);border:1px solid var(--card-border);border-radius:6px;cursor:pointer;font-size:.8rem;font-weight:700;transition:all .2s}.melody-btn:hover{background:var(--card-border);color:var(--font-color)}.melody-btn.active{background:var(--hl1-color);color:var(--bg-color);border-color:var(--hl1-color)}.volume-slider{cursor:pointer;width:100%;margin-top:5px}#app-container{flex:1;display:flex;flex-direction:column;background-color:var(--card-color);border-radius:16px;position:relative;overflow:hidden}.top-bar{display:flex;justify-content:flex-end;padding:15px 20px}.pip-wrapper{display:flex;align-items:center;gap:10px}.pip-hint{color:var(--text-muted);font-size:.9rem;font-weight:700;pointer-events:none}#pip-btn{background:0 0;border:none;color:var(--text-muted);cursor:pointer;transition:color .2s;display:flex}#pip-btn:hover{color:var(--hl1-color)}#cards-container{flex:1;padding:20px;overflow-y:auto;display:flex;flex-wrap:wrap;gap:20px;align-content:flex-start}.timer-channel{background-color:var(--bg-color);border-radius:12px;padding:15px 20px;display:flex;flex-direction:column;gap:15px;width:340px;border:2px solid transparent;transition:all .3s}.channel-header{display:flex;justify-content:space-between;align-items:center}.channel-name{background:0 0;border:none;color:var(--text-muted);font-weight:700;font-size:1.1rem;width:150px;outline:0;border-bottom:1px solid transparent}.channel-name:focus,.channel-name:hover{color:var(--font-color);border-bottom-color:var(--hl1-color)}.header-icons{display:flex;gap:5px}.time-display-wrapper,.time-setting{display:flex;align-items:center;justify-content:center}.time-input{background-color:var(--card-color);border:2px solid var(--card-border);color:var(--font-color);text-align:center;border-radius:10px;font-family:monospace;cursor:ns-resize;transition:all .2s}.time-input:hover{border-color:var(--hl1-color)}.time-input:focus{outline:0;border-color:var(--hl1-color)}.time-input::-webkit-inner-spin-button,.time-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.time-input.small{font-size:2.6rem;width:75px;padding:4px 0}.time-input.large{font-size:2.6rem;width:250px;padding:4px 0;letter-spacing:2px}.colon{font-size:2.2rem;font-weight:700;margin:0 8px;color:var(--card-border);padding-bottom:5px}.sw-display{font-size:3rem;font-weight:700;font-family:monospace;color:var(--font-color);letter-spacing:2px}.sw-ms{font-size:1.5rem;color:var(--text-muted);margin-left:5px;margin-top:15px;font-family:monospace}.timer-channel.is-active{border-color:var(--hl1-color);box-shadow:0 0 15px rgba(0,0,0,.2)}.timer-channel.is-active .time-input{background-color:transparent;border-color:transparent;color:var(--font-color);pointer-events:none}.timer-channel.is-active .sw-display{color:var(--hl1-color)}.timer-channel.is-active .sw-ms{color:var(--font-color)}@keyframes pulse-red{0%{border-color:transparent;box-shadow:0 0 0 transparent}50%{box-shadow:0 0 20px var(--hl2-color);border-color:var(--hl2-color)}100%{border-color:transparent;box-shadow:0 0 0 transparent}}.timer-channel.is-alarming{animation:pulse-red 1.5s infinite;cursor:pointer}.timer-channel.is-alarming .time-input{color:var(--hl2-color)}.control-panel{display:flex;justify-content:center;gap:18px}.icon-btn{background:0 0;border:none;color:var(--text-muted);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.icon-btn .material-symbols-outlined{font-size:32px}.icon-btn:not(:disabled):hover{color:var(--font-color);transform:scale(1.1)}.play-btn:hover{color:var(--hl1-color)}.icon-btn.delete-btn:not(:disabled):hover{color:var(--hl2-color)}.loop-btn.active{color:var(--hl1-color)}.sound-btn.active{color:var(--font-color)}.modal{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:999}.modal.hidden{display:none}.modal-content{background-color:var(--card-color);padding:30px;border-radius:16px;width:400px;display:flex;flex-direction:column;gap:20px;box-shadow:0 10px 30px rgba(0,0,0,.5)}.modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--card-border);padding-bottom:10px}.modal-section{display:flex;flex-direction:column;gap:15px}.modal-section h3{font-size:1rem;color:var(--text-muted)}.theme-grid{display:flex;flex-direction:column;gap:10px}.theme-grid label{display:flex;justify-content:space-between;align-items:center;font-size:.9rem;cursor:pointer}.theme-grid input[type=color]{background:0 0;border:none;width:40px;height:30px;cursor:pointer}.reset-btn{background-color:var(--bg-color);color:var(--font-color);border:1px solid var(--card-border);padding:10px;border-radius:8px;cursor:pointer}.reset-btn:hover{background-color:var(--card-border)}.credits{font-size:.8rem;color:var(--text-muted);text-align:center;border-top:1px solid var(--card-border);padding-top:15px}body.pip-active{display:block;padding:0;overflow:hidden!important;background-color:var(--bg-color)!important}body.pip-active #settings-modal,body.pip-active #side-panel{display:none}#app-container.pip-active{width:100vw;height:100vh;padding:0;background-color:var(--bg-color);overflow:hidden!important;border-radius:0}#app-container.pip-active #cards-container{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:flex-start!important;padding:0;gap:0}.pip-active .hide-in-pip{display:none!important}.pip-active .timer-channel:not(.is-active):not(.is-alarming){display:none!important}.pip-active .timer-channel{padding:10px 0;width:100%;border:none!important;border-bottom:1px solid var(--card-border)!important;background-color:transparent;box-shadow:none!important;border-radius:0;animation:none}.pip-active .timer-channel:last-child{border-bottom:none!important}.pip-active .channel-header{justify-content:center;margin-bottom:0}.pip-active .channel-name{font-size:1rem;color:var(--text-muted);text-align:center;width:100%}.pip-active .time-input{background:0 0!important;border:none!important;padding:0}.pip-active .time-setting{transform:scale(.9)}.pip-active .sw-display{font-size:2.2rem}.pip-active .sw-ms{font-size:1.2rem;margin-top:10px}@media (max-width:800px){body{flex-direction:column;padding:10px;overflow-y:auto}#side-panel{width:100%;flex-direction:column;gap:15px}.panel-content{flex-direction:row;flex-wrap:wrap}.add-module-btn{flex:1;white-space:nowrap;justify-content:center}.audio-control-panel{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}.audio-header{margin-right:auto}.melody-toggles{flex:1;justify-content:flex-end;min-width:250px}#cards-container{justify-content:center}}