body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}*{box-sizing:border-box}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}*{margin:0;padding:0;box-sizing:border-box}.app{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;justify-content:center;align-items:center;padding:20px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;position:relative;overflow:hidden}.app:before{content:"";position:absolute;width:500px;height:500px;background:radial-gradient(circle,rgba(255,255,255,.15) 0%,transparent 70%);border-radius:50%;top:-150px;left:-150px;animation:float1 20s ease-in-out infinite;z-index:0}.app:after{content:"";position:absolute;width:400px;height:400px;background:radial-gradient(circle,rgba(255,255,255,.12) 0%,transparent 70%);border-radius:50%;bottom:-100px;right:-100px;animation:float2 15s ease-in-out infinite;z-index:0}@keyframes float1{0%,to{transform:translate(0) scale(1)}25%{transform:translate(100px,50px) scale(1.1)}50%{transform:translate(200px,100px) scale(1)}75%{transform:translate(100px,150px) scale(.9)}}@keyframes float2{0%,to{transform:translate(0) scale(1)}33%{transform:translate(-80px,-60px) scale(1.15)}66%{transform:translate(-150px,-120px) scale(.95)}}.bg-circle{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.12) 0%,transparent 70%);pointer-events:none;z-index:0}.bg-circle-1{width:350px;height:350px;top:15%;right:10%;animation:float3 18s ease-in-out infinite}.bg-circle-2{width:280px;height:280px;top:60%;left:5%;animation:float4 22s ease-in-out infinite}.bg-circle-3{width:400px;height:400px;bottom:20%;left:50%;animation:float5 25s ease-in-out infinite}.bg-circle-4{width:300px;height:300px;top:40%;right:20%;animation:float6 16s ease-in-out infinite}@keyframes float3{0%,to{transform:translate(0) rotate(0)}50%{transform:translate(-100px,80px) rotate(180deg)}}@keyframes float4{0%,to{transform:translate(0) scale(1)}50%{transform:translate(120px,-100px) scale(1.2)}}@keyframes float5{0%,to{transform:translate(0) rotate(0) scale(1)}33%{transform:translate(-80px,-60px) rotate(120deg) scale(.9)}66%{transform:translate(60px,40px) rotate(240deg) scale(1.1)}}@keyframes float6{0%,to{transform:translate(0)}25%{transform:translate(-50px,70px)}75%{transform:translate(40px,-50px)}}.container{background:#fffffff2;border-radius:30px;padding:30px 60px;box-shadow:0 20px 60px #0000004d;max-width:900px;width:100%;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;z-index:1}.title{text-align:center;font-size:2.5rem;font-weight:700;margin-bottom:26px;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.mode-selector{display:flex;gap:15px;justify-content:center;margin-bottom:40px}.mode-btn{padding:12px 30px;font-size:1rem;font-weight:600;border:2px solid #e2e8f0;border-radius:12px;background:#fff;color:#4a5568;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px}.mode-btn:hover{border-color:#667eea;color:#667eea}.mode-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:transparent;box-shadow:0 4px 15px #667eea66}.effect-selector{display:flex;align-items:center;justify-content:center;gap:15px;margin-bottom:40px}.effect-selector label{font-size:1.1rem;font-weight:600;color:#4a5568}.effect-dropdown{padding:12px 20px;border:2px solid #e2e8f0;border-radius:12px;font-size:1rem;background:#fff;cursor:pointer;transition:all .3s ease;font-weight:500;color:#2d3748;outline:none}.effect-dropdown:hover{border-color:#667eea}.effect-dropdown:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.input-section{margin:40px 0}.time-input-group{display:flex;gap:20px;justify-content:center;align-items:center}.time-input{display:flex;flex-direction:column;align-items:center;gap:10px}.time-input label{font-size:.95rem;font-weight:600;color:#4a5568;text-transform:uppercase;letter-spacing:1px}.time-input input{width:100px;padding:15px;font-size:2rem;text-align:center;border:2px solid #e2e8f0;border-radius:15px;transition:all .3s ease;font-weight:600;color:#2d3748;background:#f7fafc}.time-input input:hover{border-color:#cbd5e0}.time-input input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 4px #667eea1a;background:#fff}.time-select{width:100px;padding:15px;font-size:2rem;text-align:center;border:2px solid #e2e8f0;border-radius:15px;transition:all .3s ease;font-weight:600;color:#2d3748;background:#f7fafc;cursor:pointer}.time-select:hover{border-color:#cbd5e0}.time-select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 4px #667eea1a;background:#fff}.timer-display{margin:50px 0;perspective:1000px}.time-units{display:flex;justify-content:center;align-items:center;gap:15px}.time-unit{display:flex;flex-direction:column;align-items:center;gap:12px}.digit-box{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:15rem;font-weight:700;padding:25px 35px;border-radius:20px;min-width:140px;text-align:center;box-shadow:0 10px 30px #667eea66;position:relative;overflow:hidden}.digit-box:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s}.digit-box:hover:before{left:100%}.separator{font-size:3.5rem;font-weight:700;color:#667eea;margin:0 5px;padding-bottom:40px}.label{font-size:.9rem;font-weight:600;color:#718096;text-transform:uppercase;letter-spacing:1.5px}.controls{display:flex;gap:20px;justify-content:center;margin-top:40px}.btn{padding:16px 40px;font-size:1.1rem;font-weight:600;border:none;border-radius:15px;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px;box-shadow:0 4px 15px #0003}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-primary:hover{box-shadow:0 6px 25px #667eea80;transform:translateY(-2px)}.btn-warning{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff}.btn-warning:hover{box-shadow:0 6px 25px #f5576c80;transform:translateY(-2px)}.btn-danger{background:linear-gradient(135deg,#fa709a,#fee140);color:#fff}.btn-danger:hover{box-shadow:0 6px 25px #fa709a80;transform:translateY(-2px)}.btn-secondary{background:linear-gradient(135deg,#a8b8d8,#8a9bb8);color:#fff}.btn-secondary:hover{box-shadow:0 6px 25px #8a9bb880;transform:translateY(-2px)}.btn:active{transform:translateY(0)}.completion-message{margin-top:30px;text-align:center;font-size:2rem;font-weight:700;color:#667eea;padding:20px;background:linear-gradient(135deg,#667eea1a,#764ba21a);border-radius:15px;border:2px solid #667eea}.fullscreen-btn{position:fixed;bottom:30px;right:30px;width:60px;height:60px;border-radius:50%;background:#ffffffe6;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px #0003;transition:all .3s ease;color:#667eea;z-index:1000}.fullscreen-btn:hover{background:#fff;box-shadow:0 6px 30px #667eea66}.fullscreen-btn svg{width:24px;height:24px}.language-btn{position:fixed;bottom:30px;right:110px;width:60px;height:60px;border-radius:50%;background:#ffffffe6;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px #0003;transition:all .3s ease;color:#667eea;z-index:1000;font-size:1.1rem;font-weight:700;text-transform:uppercase}.language-btn:hover{background:#fff;box-shadow:0 6px 30px #667eea66}.music-btn{position:fixed;bottom:30px;right:190px;width:60px;height:60px;border-radius:50%;background:#ffffffe6;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px #0003;transition:all .3s ease;color:#667eea;z-index:1000}.music-btn:hover{background:#fff;box-shadow:0 6px 30px #667eea66}.music-btn svg{width:24px;height:24px}.music-indicator{position:absolute;top:8px;right:8px;width:10px;height:10px;background:#4ade80;border-radius:50%;border:2px solid white;animation:pulse 2s ease-in-out infinite}.audio-controls-container{position:fixed;bottom:30px;right:270px;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:15px;box-shadow:0 4px 20px #0003;z-index:999}.audio-controls-container audio{width:300px;height:40px;outline:none}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.1)}}@media(max-width:768px){.container{padding:30px 25px}.title{font-size:2rem}.time-input-group{flex-direction:column;gap:15px}.time-input input{width:80px;font-size:1.5rem;padding:12px}.digit-box{font-size:2.5rem;padding:15px 20px;min-width:90px}.separator{font-size:2rem;padding-bottom:30px}.controls{flex-direction:column;width:100%}.btn{width:100%}.fullscreen-btn{width:50px;height:50px;bottom:20px;right:20px}.fullscreen-btn svg{width:20px;height:20px}.language-btn{width:50px;height:50px;bottom:20px;right:85px;font-size:.9rem}.music-btn{width:50px;height:50px;bottom:20px;right:150px}.music-btn svg{width:20px;height:20px}.audio-controls-container{bottom:20px;right:210px;padding:8px 10px}.audio-controls-container audio{width:150px;height:30px}}