body,html{background-color:#f0f0f0;justify-content:center;align-items:center;min-height:100vh;margin:0;padding:0;font-family:Arial,sans-serif;display:flex}#root{box-sizing:border-box;justify-content:center;align-items:center;width:100%;min-height:100vh;padding:10px;display:flex}.card-container{text-align:center;background:#fff;border-radius:8px;flex-direction:column;width:100%;max-width:500px;height:auto;display:flex;overflow:hidden;box-shadow:0 4px 8px #0000001a}.tabs{background-color:#f9f9f9;border-bottom:2px solid #e0e0e0;flex-wrap:wrap;flex-shrink:0;display:flex}.tab-button{cursor:pointer;color:#666;background:0 0;border:none;flex:1;min-width:80px;padding:.75rem .5rem;font-size:.9rem;font-weight:500;transition:all .3s;position:relative}.tab-button:hover{color:#333;background-color:#f0f0f0}.tab-button.active{color:#2196f3;font-weight:600}.tab-button.active:after{content:"";background-color:#2196f3;height:3px;position:absolute;bottom:-2px;left:0;right:0}.tab-content{flex-direction:column;flex:1;justify-content:flex-start;max-height:calc(100vh - 300px);padding:1.5rem;animation:.3s fadeIn;display:flex;overflow-y:auto}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.counter-container{text-align:center}.counter-container h1{word-wrap:break-word;margin:.3rem 0;font-size:1rem;line-height:1.4}.count-display{color:#2196f3;margin:1rem 0;font-size:3.5rem;font-weight:700}.button-container{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.button-container button{cursor:pointer;border:none;border-radius:5px;flex:1;min-width:120px;margin:.25rem;padding:.75rem 1.5rem;font-size:.9rem;transition:background-color .3s}.button-container button:hover{transform:scale(1.05)}.button-container button:active{transform:scale(.98)}.button-container button:first-child{color:#fff;background-color:#4caf50}.button-container button:first-child:hover{background-color:#45a049}.button-container button:nth-child(2){color:#fff;background-color:#2196f3}.button-container button:nth-child(2):hover{background-color:#0b7dda}.info-container{text-align:left}.info-container h2{text-align:center;color:#2196f3;margin-top:0;font-size:1.3rem}.info-container p{color:#555;margin:.75rem 0;font-size:.95rem;line-height:1.6}.settings-container{text-align:left}.settings-container h2{text-align:center;color:#2196f3;margin-top:0;font-size:1.3rem}.settings-container p{color:#555;font-size:.95rem}.reset-btn{color:#fff;cursor:pointer;box-sizing:border-box;background-color:#ff6b6b;border:none;border-radius:4px;width:100%;padding:.75rem 1.5rem;font-size:.95rem;transition:background-color .3s}.reset-btn:hover{background-color:#ff5252}.reset-btn:active{background-color:#e63946}@media (width>=768px){.card-container{max-width:500px}.tab-button{min-width:auto;padding:1rem;font-size:1rem}.tab-content{max-height:640px;padding:2rem}.counter-container h1{margin:.5rem 0;font-size:1.2rem}.count-display{margin:1.5rem 0;font-size:4rem}.button-container button{flex:none;min-width:auto;margin:.5rem;padding:1rem 2rem;font-size:1rem}.info-container h2{font-size:1.5rem}.info-container p{font-size:1rem}.settings-container h2{font-size:1.5rem}.settings-container p{font-size:1rem}.reset-btn{width:auto}}@media (width<=480px){#root{padding:5px}.card-container{border-radius:4px}.tab-content{max-height:calc(100vh - 250px);padding:1rem}.counter-container h1{margin:.2rem 0;font-size:.85rem}.count-display{margin:.75rem 0;font-size:2.5rem}.button-container{gap:.25rem}.button-container button{margin:.2rem;padding:.6rem 1rem;font-size:.85rem}.info-container h2,.settings-container h2{margin:.5rem 0;font-size:1.1rem}.info-container p,.settings-container p{margin:.5rem 0;font-size:.9rem}.reset-btn{padding:.6rem 1rem;font-size:.9rem}}