:root{--bg-color: #0d0d0d;--card-color: #0b0c2a;--text-color: #e0e0e0;--primary-neon: #00ffff;--secondary-neon: #ff00ff;--danger-neon: #ff3300;--shadow-strength: 15px;--text-shadow-strength: 5px}*{margin:0;padding:0;box-sizing:border-box}html{font-size:62.5%}body{font-size:1.6rem;line-height:1.6;color:var(--text-color);background-color:var(--bg-color);text-shadow:0 0 2px rgba(255,255,255,.1);transition:background-color .4s ease,color .4s ease}.App{display:flex;flex-direction:column;min-height:100vh}.app-content{flex:1;display:flex;justify-content:center;align-items:center;width:100%;padding:4rem 2rem}.main-container{width:100%;display:flex;flex-direction:column;align-items:center}.boxed--view{width:100%;max-width:450px}.app-header+.boxed--view{margin-top:3rem}.boxed--view{width:100%;max-width:450px;background-color:var(--card-color);border:2px solid var(--primary-neon);border-radius:12px;padding:2.5rem;box-shadow:0 0 var(--shadow-strength) var(--primary-neon),0 0 calc(var(--shadow-strength) * 1.5) var(--secondary-neon);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:all .4s ease-in-out}.boxed--view__box{width:100%}.list--container{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem}.app-header{display:flex;justify-content:center;align-items:center;width:100%;position:relative;margin-bottom:3rem;padding:0 1rem}.app--title{font-size:3.2rem;font-weight:900;color:var(--primary-neon);text-shadow:0 0 var(--text-shadow-strength) var(--primary-neon),0 0 calc(var(--text-shadow-strength) * 2) var(--secondary-neon)}.timer--box{border:1px solid var(--timer-neon-color, var(--primary-neon));background:none;background-color:#0000001a;border-radius:8px;overflow:hidden;box-shadow:0 0 5px var(--timer-shadow-color, var(--secondary-neon));display:flex;flex-direction:column;flex:1 1 300px;min-width:280px;transition:box-shadow .3s ease}.timer--box.is-running{box-shadow:0 0 12px var(--timer-shadow-color, var(--secondary-neon)),0 0 20px var(--timer-neon-color, var(--primary-neon))}.timer--content{padding:1.5rem;flex-grow:1}.timer--header h2{font-size:1.8rem;font-weight:700;color:var(--timer-neon-color, var(--primary-neon));text-transform:uppercase}.timer--meta p{font-size:1.3rem;color:var(--text-color);opacity:.8}.timer--h2{font-size:3.8rem;font-weight:900;text-align:center;margin:1.5rem 0;color:var(--timer-neon-color, var(--primary-neon));text-shadow:0 0 var(--text-shadow-strength) var(--timer-neon-color, var(--primary-neon)),0 0 calc(var(--text-shadow-strength) * 2) var(--timer-shadow-color, var(--primary-neon))}.actions{display:flex;justify-content:flex-end;gap:1.5rem;font-size:1.3rem;font-weight:700}.trash,.edit,.add-time{cursor:pointer;transition:all .2s ease-in-out;text-transform:uppercase}.trash:hover{color:var(--danger-neon);text-shadow:0 0 5px var(--danger-neon)}.edit:hover{color:var(--timer-neon-color, var(--primary-neon));text-shadow:0 0 5px var(--timer-neon-color, var(--primary-neon))}.add-time{color:var(--primary-neon)}.add-time:hover{text-shadow:0 0 5px var(--primary-neon)}.phase-info,.timer-type{color:var(--text-color)}.timer-type{display:inline-block;margin-left:1rem;padding:.2rem .6rem;font-size:1rem;font-weight:700;text-transform:uppercase;color:var(--timer-neon-color, var(--primary-neon));border:1px solid var(--timer-neon-color, var(--primary-neon));border-radius:4px;opacity:.7}.progress-bar-container{width:100%;height:4px;background-color:#0000001a}.progress-bar{height:100%;background-color:var(--timer-neon-color, var(--primary-neon));box-shadow:0 0 5px var(--timer-shadow-color, var(--secondary-neon));transition:width .1s linear}.form{border:1px solid var(--primary-neon);border-radius:8px;overflow:hidden;box-shadow:0 0 5px var(--secondary-neon);display:flex;flex-direction:column;background-color:var(--card-color)}.form--item label{display:block;font-weight:700;margin-bottom:.5rem;color:var(--primary-neon);text-transform:uppercase}.timer--content,.form--content{padding:1.5rem;flex-grow:1;overflow:hidden}.form--item input{width:100%;padding:1.2rem;border:1px solid var(--primary-neon);border-radius:6px;font-size:1.6rem;font-family:inherit;background-color:var(--bg-color);color:var(--text-color);transition:all .2s}.form--item input:focus{outline:none;box-shadow:0 0 8px var(--primary-neon),0 0 15px var(--secondary-neon)}.radio-group .radio-label{display:flex;align-items:center;cursor:pointer;transition:color .2s ease-in-out}.radio-group input[type=radio]{opacity:0;position:absolute;width:0;height:0}.radio-custom{display:inline-block;width:1.8rem;height:1.8rem;border:2px solid var(--secondary-neon);border-radius:50%;margin-right:1rem;transition:all .2s ease-in-out;position:relative}.radio-label:hover .radio-custom{border-color:var(--primary-neon)}.radio-group input[type=radio]:checked+.radio-custom{border-color:var(--primary-neon);box-shadow:0 0 8px var(--primary-neon)}.radio-custom:after{content:"";display:block;position:absolute;top:50%;left:50%;width:1rem;height:1rem;border-radius:50%;background-color:var(--primary-neon);transform:translate(-50%,-50%) scale(0);transition:transform .2s ease-in-out}.radio-group input[type=radio]:checked+.radio-custom:after{transform:translate(-50%,-50%) scale(1)}.radio-group input[type=radio]:checked+.radio-custom+span{color:var(--primary-neon);text-shadow:0 0 3px var(--primary-neon)}.btn-remove-phase{background-color:transparent;border:1px solid var(--danger-neon);color:var(--danger-neon);width:30px;height:30px;border-radius:50%;cursor:pointer;font-family:inherit;transition:all .2s ease}.btn-remove-phase:hover{background-color:var(--danger-neon);color:#fff;box-shadow:0 0 8px var(--danger-neon)}.button,.button__outline{display:flex;justify-content:center;align-items:center;width:100%;height:4.5rem;border:2px solid var(--timer-neon-color, var(--primary-neon));border-radius:8px;font-family:inherit;font-size:1.6rem;font-weight:700;color:var(--primary-neon);cursor:pointer;text-transform:uppercase;background:transparent;transition:all .3s ease;box-shadow:0 0 8px var(--timer-shadow-color, var(--secondary-neon)),0 0 15px var(--timer-neon-color, var(--primary-neon))}.button:hover,.button__outline:hover{background:var(--timer-neon-color, var(--primary-neon));color:var(--bg-color);box-shadow:0 0 15px var(--timer-shadow-color, var(--secondary-neon)),0 0 25px var(--timer-neon-color, var(--primary-neon))}.timer--box .button{border-bottom-left-radius:0;border-bottom-right-radius:0}.button__outline{margin-top:1rem;border-color:var(--primary-neon);box-shadow:0 0 8px var(--secondary-neon),0 0 15px var(--primary-neon)}.button__outline:hover{background:var(--primary-neon);color:var(--bg-color);box-shadow:0 0 15px var(--secondary-neon),0 0 25px var(--primary-neon)}.form--button{display:flex}.form--button .button{width:50%;border-radius:0}.btn--submit{border-color:var(--primary-neon);color:var(--primary-neon)}.btn--submit:hover{background:var(--primary-neon);color:var(--bg-color)}.btn--cancel{border-color:var(--text-color);color:var(--text-color);opacity:.7}.btn--cancel:hover{background:var(--text-color);color:var(--bg-color);opacity:1}.header-controls{display:flex;align-items:center;gap:1.5rem;position:absolute;right:0;top:50%;transform:translateY(-50%);font-family:inherit}.theme-selector{background-color:var(--card-color);color:var(--text-color);border:1px solid var(--primary-neon);border-radius:6px;padding:.8rem 1rem;font-family:inherit;cursor:pointer;appearance:none;transition:all .2s ease}.theme-selector:focus{outline:none;box-shadow:0 0 8px var(--primary-neon)}.btn-logout{position:static!important;transform:none!important;width:auto!important;height:auto!important;padding:.8rem 1.5rem!important;font-size:1.4rem!important;border-radius:6px!important;background:var(--card-color)!important;border:1px solid var(--danger-neon)!important;color:var(--danger-neon)!important;box-shadow:none!important;animation:none!important;transition:all .2s ease!important}.btn-logout:hover{background:var(--danger-neon)!important;color:#fff!important;box-shadow:0 0 8px var(--danger-neon)!important}@media (max-width: 768px){.app-header{flex-direction:column;gap:2rem}.app--title{font-size:2.8rem}.header-controls{position:static;transform:none;width:100%;justify-content:center}.theme-selector,.btn-logout{flex-grow:1;text-align:center}.boxed--view{max-width:700px}}@media (min-width: 1050px){.boxed--view{max-width:1050px}}.auth-description{text-align:center;max-width:600px;margin-bottom:4rem;color:var(--text-color)}.auth-description h2{font-size:2.2rem;font-weight:700;color:var(--primary-neon);margin-bottom:1rem;text-shadow:0 0 var(--text-shadow-strength) var(--primary-neon)}.auth-description p{font-size:1.6rem;opacity:.9;line-height:1.7}.app-footer{width:100%;text-align:center;padding:2rem;margin-top:auto;border-top:1px solid var(--secondary-neon);opacity:.6;transition:opacity .3s ease;flex-shrink:0}.app-footer:hover{opacity:1}.app-footer a{color:var(--text-color);text-decoration:none;margin:0 1.5rem;font-weight:700;transition:color .3s ease}.app-footer a:hover{color:var(--primary-neon);text-decoration:underline}
