*,:after,:before{box-sizing:border-box}html{max-width:100vw;overflow-x:clip;width:100%}body{background-color:#f0f4f8;font-family:Roboto,sans-serif;margin:0}.App,body{max-width:100vw;overflow-x:clip;position:relative;width:100%}.App{text-align:center}#header{align-items:center;background-color:#fff;border-bottom:2px solid #ddd;display:flex;justify-content:space-between;padding:20px}#header img{height:50px;margin-right:20px}#header h1{color:#333;flex-grow:1;font-size:2rem;font-weight:700;text-align:left}#logout{background-color:#ff5252;border:none;border-radius:5px;color:#fff;cursor:pointer;font-size:1rem;padding:10px 20px}#logout:hover{background-color:#ff1744}.pause-menu-overlay{align-items:center;background-color:#000c;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1000}.pause-menu{background-color:#fff;border-radius:15px;box-shadow:0 8px 32px #0000004d;max-width:400px;padding:40px;text-align:center;width:90%}.pause-menu h2{color:#333;font-size:2rem;margin-bottom:15px}.pause-menu p{color:#666;font-size:1.1rem;margin-bottom:30px}.pause-menu-buttons{display:flex;flex-direction:column;gap:15px}.quit-btn,.resume-btn{border:none;border-radius:8px;cursor:pointer;font-size:1.2rem;font-weight:700;padding:15px 30px;transition:all .3s ease}.resume-btn{background-color:#4caf50;color:#fff}.resume-btn:hover{background-color:#45a049;transform:translateY(-2px)}.quit-btn{background-color:#f44336;color:#fff}.quit-btn:hover{background-color:#da190b;transform:translateY(-2px)}.pause-button{background-color:#ff9800;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1.1rem;font-weight:700;margin-right:10px;padding:12px 24px;transition:all .3s ease}.pause-button:hover{background-color:#f57c00;transform:translateY(-2px)}.workout-controls{display:flex;gap:15px;justify-content:center;margin-top:20px}.keyboard-hint{border-top:1px solid #eee;margin-top:20px;padding-top:15px}.keyboard-hint small{color:#666;font-size:.9rem}.keyboard-hint kbd{background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px;font-family:monospace;font-size:.85rem;font-weight:700;padding:2px 6px}.workout-loading{align-items:center;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:1px solid #0000000d;border-radius:12px;box-shadow:0 4px 16px #0000001a;display:flex;flex-direction:column;height:200px;justify-content:center;margin:20px;overflow:hidden;position:relative}.workout-loading:before{animation:shimmer 2s infinite;background:linear-gradient(45deg,#0000 30%,#667eea0d 50%,#0000 70%);bottom:0;content:"";left:0;position:absolute;right:0;top:0}.workout-loading .spinner{animation:spin 1s linear infinite;border:3px solid #e9ecef;border-radius:50%;border-top-color:#667eea;box-shadow:0 0 15px #667eea4d;height:40px;margin-bottom:20px;position:relative;width:40px;z-index:1}.workout-loading p{color:#495057;font-size:14px;font-weight:500;margin:0;position:relative;z-index:1}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes shimmer{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}