:root{--background: #050505;--glass-background: rgba(255, 255, 255, .03);--glass-border: rgba(255, 255, 255, .1);--text-primary: #ffffff;--text-muted: #a1a1aa;--primary-color: #8b5cf6;--primary-glow: rgba(139, 92, 246, .5);font-family:Inter,system-ui,sans-serif}*{box-sizing:border-box}.glass-panel{background:var(--glass-background);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:24px;transition:all .3s ease}.mission-log-container{background:var(--glass-background);border:1px solid var(--glass-border);border-radius:28px;padding:1.5rem;height:100%;display:flex;flex-direction:column;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);margin:0 12px}.mission-header{display:flex;justify-content:space-between;font-size:.85rem;text-transform:uppercase;font-weight:700;letter-spacing:1px;color:var(--text-muted);margin-bottom:1.25rem}.input-main-wrapper{display:flex;background:#0000004d;padding:5px;border-radius:18px;border:1px solid var(--glass-border);gap:8px;align-items:center}.btn-primary-action{background:var(--primary-color);color:#fff;border:none;border-radius:12px;cursor:pointer;box-shadow:0 4px 12px var(--primary-glow);transition:all .2s ease}body{margin:0;background-color:var(--background);color:var(--text-primary);display:flex;justify-content:center;min-height:100vh;overflow-x:hidden}.background-layer{position:fixed;inset:0;background-size:cover;background-position:center;z-index:0;transition:background-image .5s ease}.background-overlay{position:fixed;inset:0;background:#0009;z-index:1;pointer-events:none}.app-wrapper{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;align-items:center;padding:0 1rem;min-height:100vh;box-sizing:border-box}.header-container{width:100%;display:flex;justify-content:center;transition:opacity .3s ease}.header-container.hidden{opacity:0;pointer-events:none}.main-layout{display:flex;width:100%;flex:1;flex-direction:column;justify-content:center;align-items:center;gap:2rem;padding-bottom:8rem}.timer-section{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;padding:10px 0}.round-indicator{text-align:center;animation:fadeIn .5s ease-out}.tasks-section{width:100%;height:400px;margin-bottom:3rem}.task-item-card{display:flex;align-items:center;gap:12px;background:#ffffff0a;padding:14px;border-radius:18px}.timer-controls-fade{transition:opacity .3s ease}.timer-controls-fade.hidden{opacity:0;pointer-events:none}.dock-container{position:fixed;bottom:1rem;display:flex;align-items:center;gap:4px;background:#0f0f0f99;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:6px;border-radius:16px;border:1px solid var(--glass-border);z-index:50;transition:opacity .3s ease,transform .3s ease;overflow:visible!important}.dock-left{left:2rem}.dock-right{right:2rem}.dock-hidden{opacity:0;pointer-events:none;transform:translateY(20px)}.dock-btn{width:44px;height:44px;border-radius:14px;border:1px solid transparent;background:transparent;color:var(--text-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative}.dock-btn svg{width:22px;height:22px;stroke-width:2px;transition:transform .2s ease}.dock-btn:hover{background:#ffffff1a;color:#fff;border-color:#ffffff1a;transform:translateY(-2px)}.dock-btn:active{transform:scale(.95)}.dock-btn.active{background:#8b5cf633;color:var(--primary-purple);border-color:#8b5cf666;box-shadow:0 0 15px #8b5cf633}.dock-btn.active svg{stroke-width:2.5px}.volume-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.volume-popup{position:absolute;bottom:55px;left:50%;transform:translate(-50%);width:40px;height:120px;background:#141414cc;border:1px solid var(--glass-border);border-radius:20px;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:all .3s ease;box-shadow:0 10px 30px #00000080}.volume-wrapper:hover .volume-popup{opacity:1;visibility:visible;bottom:60px}.vertical-slider{width:100px;height:40px;transform:rotate(-90deg);background:transparent;cursor:pointer;appearance:none}.vertical-slider::-webkit-slider-runnable-track{width:100%;height:4px;background:#fff3;border-radius:2px}.music-indicator-wrapper{display:flex;align-items:center;gap:8px;position:relative}.track-floating-label{background:#0a0a0ad9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:18px;height:36px;display:flex;align-items:center;padding:0 12px;gap:10px;color:#fff;width:180px;cursor:pointer;overflow:hidden;transition:all .3s ease}.vertical-slider::-webkit-slider-thumb{-webkit-appearance:none;height:16px;width:16px;border-radius:50%;background:var(--primary-purple);margin-top:-6px;box-shadow:0 0 10px var(--primary-purple);border:2px solid white}.modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:100;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.modal-content{background:#09090b;width:400px;border-radius:16px;border:1px solid var(--glass-border);box-shadow:0 20px 40px #0006;overflow:hidden;animation:modalPop .3s ease}.modal-header{padding:1rem;border-bottom:1px solid var(--glass-border);display:flex;justify-content:space-between;align-items:center}.modal-body{padding:1rem}.setting-section{margin-bottom:1.5rem}.setting-label{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text-muted);margin-bottom:8px}.input-text{background:#ffffff0d;border:1px solid var(--glass-border);padding:8px 12px;border-radius:8px;color:#fff;width:100%;box-sizing:border-box}.music-widget-container{position:fixed;z-index:50;transition:all .4s cubic-bezier(.19,1,.22,1);transform-origin:bottom left;box-sizing:border-box;bottom:2rem;left:2rem}.widget-closed{opacity:0;transform:scale(.9) translateY(20px);pointer-events:none;visibility:hidden}.widget-open{opacity:1;transform:scale(1) translateY(0)}.music-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-bottom:1px solid var(--glass-border)}.icon-glow{width:32px;height:32px;background:var(--primary-color);border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 15px var(--primary-glow)}.action-btn.play.active{background:var(--primary-color);color:#fff;box-shadow:0 4px 12px var(--primary-glow)}.input-group:focus-within{border-color:var(--primary-color);box-shadow:0 0 0 2px var(--primary-glow)}.time-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.time-box{display:flex;flex-direction:column;align-items:center;gap:5px}.time-input{text-align:center;font-size:1.1rem}.time-label{font-size:.7rem;color:var(--text-muted)}.btn-upload{background:#ffffff0d;border:1px dashed var(--glass-border);padding:12px;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;color:var(--text-muted);font-size:.9rem}.upload-input-real{display:none}.color-picker-container{display:flex;gap:10px;align-items:center}.color-preview{width:40px;height:40px;border-radius:50%;border:2px solid white}.color-input-real{background:none;border:none;width:40px;height:40px;cursor:pointer}.btn-icon{background:none;border:none;color:var(--text-muted);cursor:pointer}@keyframes modalPop{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes scroll-left{0%{transform:translate(0)}to{transform:translate(-50%)}}.text-scroll-inner{display:flex;white-space:nowrap;animation:scroll-left 10s linear infinite}.text-scroll-mask{flex:1;overflow:hidden;mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent)}@media screen and (max-width:425px){.dock-container{bottom:1rem;width:auto;max-width:90vw}.track-floating-label{width:130px}}@media screen and (max-width:375px){.track-floating-label{width:100px;font-size:.75rem;padding:0 8px}.equalizer-icon{display:none}}@media screen and (max-width:320px){.track-floating-label{display:none!important}.dock-container{padding:6px}}@media(max-width:576px){.dock-container{bottom:1.5rem;padding:.1px}.dock-left{left:1rem}.dock-right{right:1rem}.music-widget-container{left:50%;transform:translate(-50%) scale(1);width:90%;max-width:400px;bottom:80px;transform-origin:center bottom}.widget-closed{transform:translate(-50%) scale(.9) translateY(20px)}}@media(min-width:576px){.app-wrapper{max-width:540px;padding:0}}@media(min-width:768px){.app-wrapper{max-width:900px}.main-layout{flex-direction:row;justify-content:center;gap:2rem;padding-bottom:0}.timer-section{width:50%;max-width:380px}.tasks-section{width:50%;height:500px}}@media(min-width:992px){.app-wrapper{max-width:960px}.main-layout{gap:4rem}}@media(min-width:1200px){.app-wrapper{max-width:1140px}}@media(min-width:1400px){.app-wrapper{max-width:1320px}}@media(max-width:480px){.modal-content{max-height:95vh;width:100%}.modal-body{padding:1rem}.time-grid{gap:8px}}@media(max-width:425px){.mission-log-container{padding:1.1rem;margin:0 8px}.track-floating-label{width:140px;left:48px}}@media(max-width:375px){.mission-log-container{padding:1rem;border-radius:24px;margin:0 6px}.main-layout{gap:1rem}.track-floating-label{width:120px;font-size:.75rem}.music-widget-container{width:92%}.input-view{padding:1.5rem}.hero-section h3{font-size:1.1rem}}@media(max-width:320px){.mission-log-container{padding:.8rem;margin:0 4px}.task-title-text{font-size:.85rem}.track-floating-label{display:none}.timer-section{transform:scale(.9)}.music-widget-container{width:95%;bottom:70px}}