body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .navbar-brand {
            font-weight: bold;
            color: #dc3545 !important;
        }
        .timer-container {
            background-color: white;
            border-radius: 15px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            padding: 30px;
            margin-top: 20px;
        }
        .timer-display {
            font-size: 4rem;
            font-weight: bold;
            text-align: center;
            margin: 20px 0;
            color: #343a40;
        }
        .phase-indicator {
            text-align: center;
            font-size: 1.5rem;
            margin-bottom: 20px;
            font-weight: bold;
            text-transform: uppercase;
            color: #dc3545;
        }
        .btn-control {
            font-size: 1.2rem;
            padding: 10px 25px;
            margin: 0 10px;
        }
        .form-range::-webkit-slider-thumb {
            background: #dc3545;
        }
        .form-range:focus::-webkit-slider-thumb {
            box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
        }
        .settings-panel {
            background-color: #f1f1f1;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .custom-content {
            background-color: white;
            border-radius: 15px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            padding: 30px;
            margin-top: 30px;
            min-height: 200px;
        }
        .custom-content-help {
            background-color: white;
            border-radius: 15px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            padding: 30px;
            margin-top: 20px;
            min-height: 200px;
        }
        .nav-link.active {
            color: #dc3545 !important;
            font-weight: bold;
        }
        .progress {
            height: 10px;
            margin-top: 20px;
        }
        .progress-bar {
            background-color: #dc3545;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }

body {
    background-color: #f8f9fa;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-image: url(data/wt-bg3.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100vh;
    background-attachment: fixed;
}