* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: Arial, sans-serif;
    transition: background 0.6s ease;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@font-face {
  font-family: "Digital-7";
  src: url("/font/digital-7.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

.digital-clock {
  font-family: "Digital-7", monospace;
  font-size: 120px;
  letter-spacing: 4px;
}
/* Customization Panel */
.customization-panel {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

@media (max-width: 768px) {
    .customization-panel {
        top: 10px;
        right: 10px;
        left: 10px;
        width: auto;
    }
}

.toggle-panel {
    background: rgba(0, 0, 0, 0.8);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 12px 24px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.3s;
    backdrop-filter: blur(10px);
}

.toggle-panel:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.05);
}

.panel-content {
    position: absolute;
    top: 60px;
    right: 0;
    width: 350px;
    max-height: 80vh;
    overflow-y: auto;
    background: rgba(20, 20, 30, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 25px;
    backdrop-filter: blur(15px);
    display: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
    .panel-content {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 70vh;
        border-radius: 20px 20px 0 0;
        padding: 20px;
    }
}

.panel-content.active {
    display: block;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.panel-content h2 {
    color: white;
    margin-bottom: 20px;
    font-size: 24px;
    text-align: center;
}

@media (max-width: 768px) {
    .panel-content h2 {
        font-size: 20px;
        margin-bottom: 15px;
    }
}

.section {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.section:last-child {
    border-bottom: none;
}

.section h3 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-description {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    margin-bottom: 15px;
    line-height: 1.4;
}

.theme-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

@media (max-width: 480px) {
    .theme-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
}

.preset-btn {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.2);
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    transition: all 0.3s;
}

.preset-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
}

.preset-btn.active {
    background: rgba(255, 255, 255, 0.3);
    border-color: #fff;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

@media (max-width: 480px) {
    .preset-btn {
        padding: 8px;
        font-size: 11px;
    }
}

.color-picker {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.color-picker label {
    color: #fff;
    font-size: 14px;
}

.color-picker input[type="color"] {
    width: 60px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
}

.apply-btn, .reset-btn {
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

.apply-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.apply-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.5);
}

.reset-btn {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.reset-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.toggle-option {
    margin-bottom: 12px;
}

.toggle-option label {
    display: flex;
    align-items: center;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
}

.toggle-option input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    cursor: pointer;
}

/* Background type selector */
.bg-type-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.radio-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

.radio-option:hover {
    background: rgba(255, 255, 255, 0.15);
}

.radio-option input[type="radio"] {
    margin-right: 6px;
}

.radio-option input[type="radio"]:checked + span {
    font-weight: bold;
}

.radio-option span {
    color: white;
    font-size: 13px;
}

.file-upload-label {
    display: block;
    padding: 12px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 15px;
}

.file-upload-label:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.5);
}

.file-upload-label input[type="file"] {
    display: none;
}

.option-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    margin-bottom: 10px;
    text-align: center;
}

.preset-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}

.preset-img {
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    color: white;
    font-size: 12px;
}

.preset-img:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.preset-img.active {
    background: rgba(255, 255, 255, 0.3);
    border-color: white;
}

@media (max-width: 480px) {
    .preset-img {
        padding: 10px 6px;
        font-size: 11px;
    }
}

/* Background controls */
.bg-controls {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.control-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 10px;
}

.control-group label {
    color: white;
    font-size: 12px;
    min-width: 100px;
}

.control-group input[type="range"] {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
    -webkit-appearance: none;
}

.control-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.control-group input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.control-group span {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    min-width: 40px;
    text-align: right;
}

@media (max-width: 480px) {
    .control-group {
        flex-wrap: wrap;
    }
    
    .control-group label {
        font-size: 11px;
        min-width: 80px;
    }
    
    .control-group span {
        font-size: 11px;
        min-width: 35px;
    }
}

/* Clock Styles */
.clock-container {
    border-radius: 25px;
    padding: 40px 50px;
    display: flex;
    gap: 25px;
    position: relative;
    transition: all 0.6s ease;
    
}

/* Clock container effects - controlled by toggles */
.clock-container.box-shadow-enabled {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.clock-container.backdrop-blur-enabled {
    backdrop-filter: blur(15px);
}

.clock-container.border-enabled {
    border: 2px solid rgba(255, 255, 255, 0.1);
}

body:not(.bg-image) .clock-container {
   
}


.days-section {
    display: flex;
    flex-direction:column;
    gap: 9px;
    justify-content: center;
    font-family: "Digital-7", monospace;
}

.info-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    margin-left: 12px;
}

.date-display {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Mobile responsive clock */
@media (max-width: 768px) {
    .clock-container {
        padding: 25px 30px;
        gap: 15px;
        flex-direction: column;
        align-items: center;
        min-width:380px;
       
    }
    
    .days-section {
    display: flex;
    flex-direction: row;
    gap: 9px;
    justify-content: center;
    font-family: "Digital-7", monospace;
}
    
    .day {
        font-size: 12px;
    }
    
    .time-section {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    
   .info-section {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    margin-left: 12px;
}

.date-display {
    display: flex;
    flex-direction: row;
    gap: 10px;
}


}

@media (max-width: 480px) {
    .clock-container {
        padding: 20px;
        gap: 10px;
        min-width:380px;
    }
    
    .digit {
        font-size: 60px;
        min-width: 38px;
    }
    
    .colon {
        font-size: 60px;
    }
    
    .am-pm {
        font-size: 18px;
        margin-top: 8px;
    }
    
    .temp {
        font-size: 32px;
    }
    
    .date-value {
        font-size: 24px;
    }
    
    .day {
        font-size: 10px;
    }
    
    .seconds-group .digit {
        font-size: 40px;
        min-width: 28px;
    }
    
    .seconds-group .colon {
        font-size: 40px;
    }
}


.day {
    font-size: 17px;
    font-weight: bold;
    letter-spacing: 1.2px;
    opacity: 0.2;
    transition: all 0.4s;
}

.day.active {
    opacity: 1;
    transform: scale(1.15);
}

.time-section {
    display: flex;
    align-items: center;
    gap: 6px;
}

.digit-group {
    display: flex;
    gap: 6px;
}

.seconds-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.digit {
    font-size: 90px;
    font-weight: 900;
    line-height: 1;
    min-width: 55px;
    text-align: center;
    transition: all 0.6s;
    font-family: "Digital-7", monospace;
    letter-spacing: -4px;
}

.seconds-group .digit {
    font-size: 90px;
    min-width: 40px;
}

.colon {
    font-size: 90px;
    font-weight: 900;
    animation: blink 1s infinite;
}

.seconds-group .colon {
    font-size: 60px;
}

@keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 99% { opacity: 0.15; }
}

.am-pm {
    font-size: 24px;
    font-weight: bold;
    align-self: flex-start;
    margin-top: 12px;
    margin-left: 6px;
    transition: all 0.6s;
}

.temp {
    font-size: 45px;
    font-weight: 900;
    font-family: "Digital-7", monospace;
    transition: all 0.6s;
}

.temp-unit {
    font-size: 24px;
    vertical-align: super;
}

.date-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.date-label {
    font-size: 11px;
    font-weight: bold;
    opacity: 0.75;
    transition: all 0.6s;
    letter-spacing: 0.8px;
}

.date-value {
    font-size: 32px;
    font-weight: 900;
    font-family: "Digital-7", monospace;
    transition: all 0.6s;
}

/* Glow Effects */
body.glow-enabled .day.active,
body.glow-enabled .digit,
body.glow-enabled .colon,
body.glow-enabled .am-pm,
body.glow-enabled .temp,
body.glow-enabled .date-value {
    filter: drop-shadow(0 0 10px currentColor);
}

/* Text Shadow Toggle */
body:not(.text-shadow-enabled) .day,
body:not(.text-shadow-enabled) .digit,
body:not(.text-shadow-enabled) .colon,
body:not(.text-shadow-enabled) .am-pm,
body:not(.text-shadow-enabled) .temp,
body:not(.text-shadow-enabled) .date-value {
    text-shadow: none !important;
}

/* Background Types */
body.bg-solid {
    background-image: none !important;
}

body.bg-image::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 0;
    pointer-events: none;
}

body.bg-image .clock-container {
    position: relative;
    z-index: 1;
}

body.bg-image .customization-panel {
    z-index: 1001;
}

/* Fullscreen mode */
body:fullscreen,
body:-webkit-full-screen,
body:-moz-full-screen {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

body:fullscreen .customization-panel,
body:-webkit-full-screen .customization-panel,
body:-moz-full-screen .customization-panel {
    position: fixed;
    top: 20px;
    right: 20px;
}

body:fullscreen .fullscreen-btn::before,
body:-webkit-full-screen .fullscreen-btn::before,
body:-moz-full-screen .fullscreen-btn::before {
    content: '⛶ Exit Fullscreen';
}

/* Mobile specific adjustments */
@media (max-width: 768px) {
    body {
        padding: 10px;
    }
    
    .color-picker {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .color-picker input[type="color"] {
        width: 100%;
        height: 45px;
    }
    
    .section-description {
        font-size: 11px;
    }
    
    .apply-btn, .reset-btn {
        font-size: 13px;
        padding: 10px;
    }
}

@media (max-width: 480px) {
    body {
        padding: 5px;
    }
}
/* Base transition */
:fullscreen .customization-panel,
:-webkit-full-screen .customization-panel,
:-moz-full-screen .customization-panel {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Hidden state */
:fullscreen .customization-panel.hide-controls,
:-webkit-full-screen .customization-panel.hide-controls,
:-moz-full-screen .customization-panel.hide-controls {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-16px);
}

/* Desktop hover (only works on non-touch devices) */
@media (hover: hover) {
  :fullscreen .customization-panel:hover,
  :-webkit-full-screen .customization-panel:hover,
  :-moz-full-screen .customization-panel:hover {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
}

/* Preset Themes */
.theme-1 { background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); }
.theme-1 .clock-container { background: linear-gradient(135deg, rgba(15, 12, 41, 0.8), rgba(48, 43, 99, 0.8)); }
.theme-1 .day { color: #00ff41; }
.theme-1 .day.active { text-shadow: 0 0 15px #00ff41; }
.theme-1 .digit, .theme-1 .colon, .theme-1 .am-pm { color: #ff006e; text-shadow: 0 0 25px #ff006e; }
.theme-1 .temp, .theme-1 .date-value { color: #00f5ff; text-shadow: 0 0 20px #00f5ff; }
.theme-1 .date-label { color: #00f5ff; }

.theme-2 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.theme-2 .clock-container { background: linear-gradient(135deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3)); }
.theme-2 .day { color: #4facfe; }
.theme-2 .day.active { text-shadow: 0 0 15px #4facfe; }
.theme-2 .digit, .theme-2 .colon, .theme-2 .am-pm { color: #00f2fe; text-shadow: 0 0 25px #00f2fe; }
.theme-2 .temp, .theme-2 .date-value { color: #ffd700; text-shadow: 0 0 20px #ffd700; }
.theme-2 .date-label { color: #ffd700; }

.theme-3 { background: linear-gradient(135deg, #ff512f 0%, #dd2476 100%); }
.theme-3 .clock-container { background: linear-gradient(135deg, rgba(255, 81, 47, 0.3), rgba(221, 36, 118, 0.3)); }
.theme-3 .day { color: #fff200; }
.theme-3 .day.active { text-shadow: 0 0 15px #fff200; }
.theme-3 .digit, .theme-3 .colon, .theme-3 .am-pm { color: #ff6b35; text-shadow: 0 0 25px #ff6b35; }
.theme-3 .temp, .theme-3 .date-value { color: #f7931e; text-shadow: 0 0 20px #f7931e; }
.theme-3 .date-label { color: #f7931e; }

.theme-4 { background: linear-gradient(135deg, #0093E9 0%, #80D0C7 100%); }
.theme-4 .clock-container { background: linear-gradient(135deg, rgba(0, 147, 233, 0.3), rgba(128, 208, 199, 0.3)); }
.theme-4 .day { color: #7c3aed; }
.theme-4 .day.active { text-shadow: 0 0 15px #7c3aed; }
.theme-4 .digit, .theme-4 .colon, .theme-4 .am-pm { color: #06ffa5; text-shadow: 0 0 25px #06ffa5; }
.theme-4 .temp, .theme-4 .date-value { color: #ec4899; text-shadow: 0 0 20px #ec4899; }
.theme-4 .date-label { color: #ec4899; }

.theme-5 { background: linear-gradient(135deg, #000000 0%, #0a1f0a 100%); }
.theme-5 .clock-container { background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(10, 31, 10, 0.8)); }
.theme-5 .day { color: #00ff00; }
.theme-5 .day.active { text-shadow: 0 0 15px #00ff00; }
.theme-5 .digit, .theme-5 .colon, .theme-5 .am-pm { color: #00ff00; text-shadow: 0 0 25px #00ff00; }
.theme-5 .temp, .theme-5 .date-value { color: #39ff14; text-shadow: 0 0 20px #39ff14; }
.theme-5 .date-label { color: #39ff14; }

.theme-6 { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); }
.theme-6 .clock-container { background: linear-gradient(135deg, rgba(255, 236, 210, 0.4), rgba(252, 182, 159, 0.4)); }
.theme-6 .day { color: #d946ef; }
.theme-6 .day.active { text-shadow: 0 0 15px #d946ef; }
.theme-6 .digit, .theme-6 .colon, .theme-6 .am-pm { color: #ec4899; text-shadow: 0 0 25px #ec4899; }
.theme-6 .temp, .theme-6 .date-value { color: #f97316; text-shadow: 0 0 20px #f97316; }
.theme-6 .date-label { color: #f97316; }

.theme-7 { background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%); }
.theme-7 .clock-container { background: linear-gradient(135deg, rgba(30, 27, 75, 0.8), rgba(49, 46, 129, 0.8)); }
.theme-7 .day { color: #a78bfa; }
.theme-7 .day.active { text-shadow: 0 0 15px #a78bfa; }
.theme-7 .digit, .theme-7 .colon, .theme-7 .am-pm { color: #c084fc; text-shadow: 0 0 25px #c084fc; }
.theme-7 .temp, .theme-7 .date-value { color: #fbbf24; text-shadow: 0 0 20px #fbbf24; }
.theme-7 .date-label { color: #fbbf24; }

.theme-8 { background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%); }
.theme-8 .clock-container { background: linear-gradient(135deg, rgba(224, 247, 250, 0.4), rgba(178, 235, 242, 0.4)); }
.theme-8 .day { color: #0891b2; }
.theme-8 .day.active { text-shadow: 0 0 15px #0891b2; }
.theme-8 .digit, .theme-8 .colon, .theme-8 .am-pm { color: #06b6d4; text-shadow: 0 0 25px #06b6d4; }
.theme-8 .temp, .theme-8 .date-value { color: #8b5cf6; text-shadow: 0 0 20px #8b5cf6; }
.theme-8 .date-label { color: #8b5cf6; }

.theme-9 { background: linear-gradient(135deg, #ff9a56 0%, #ff6a88 100%); }
.theme-9 .clock-container { background: linear-gradient(135deg, rgba(255, 154, 86, 0.3), rgba(255, 106, 136, 0.3)); }
.theme-9 .day { color: #fde047; }
.theme-9 .day.active { text-shadow: 0 0 15px #fde047; }
.theme-9 .digit, .theme-9 .colon, .theme-9 .am-pm { color: #fb923c; text-shadow: 0 0 25px #fb923c; }
.theme-9 .temp, .theme-9 .date-value { color: #fef08a; text-shadow: 0 0 20px #fef08a; }
.theme-9 .date-label { color: #fef08a; }

.theme-10 { background: linear-gradient(135deg, #141e30 0%, #243b55 100%); }
.theme-10 .clock-container { background: linear-gradient(135deg, rgba(20, 30, 48, 0.8), rgba(36, 59, 85, 0.8)); }
.theme-10 .day { color: #60a5fa; }
.theme-10 .day.active { text-shadow: 0 0 15px #60a5fa; }
.theme-10 .digit, .theme-10 .colon, .theme-10 .am-pm { color: #818cf8; text-shadow: 0 0 25px #818cf8; }
.theme-10 .temp, .theme-10 .date-value { color: #f472b6; text-shadow: 0 0 20px #f472b6; }
.theme-10 .date-label { color: #f472b6; }

.theme-11 { background: linear-gradient(135deg, #134e4a 0%, #064e3b 100%); }
.theme-11 .clock-container { background: linear-gradient(135deg, rgba(19, 78, 74, 0.7), rgba(6, 78, 59, 0.7)); }
.theme-11 .day { color: #6ee7b7; }
.theme-11 .day.active { text-shadow: 0 0 15px #6ee7b7; }
.theme-11 .digit, .theme-11 .colon, .theme-11 .am-pm { color: #34d399; text-shadow: 0 0 25px #34d399; }
.theme-11 .temp, .theme-11 .date-value { color: #fbbf24; text-shadow: 0 0 20px #fbbf24; }
.theme-11 .date-label { color: #fbbf24; }

.theme-12 { background: linear-gradient(135deg, #f3e7e9 0%, #e3c5cd 100%); }
.theme-12 .clock-container { background: linear-gradient(135deg, rgba(243, 231, 233, 0.5), rgba(227, 197, 205, 0.5)); }
.theme-12 .day { color: #be185d; }
.theme-12 .day.active { text-shadow: 0 0 15px #be185d; }
.theme-12 .digit, .theme-12 .colon, .theme-12 .am-pm { color: #db2777; text-shadow: 0 0 25px #db2777; }
.theme-12 .temp, .theme-12 .date-value { color: #ea580c; text-shadow: 0 0 20px #ea580c; }
.theme-12 .date-label { color: #ea580c; }

.theme-13 { background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%); }
.theme-13 .clock-container { background: linear-gradient(135deg, rgba(30, 58, 138, 0.7), rgba(30, 64, 175, 0.7)); }
.theme-13 .day { color: #93c5fd; }
.theme-13 .day.active { text-shadow: 0 0 15px #93c5fd; }
.theme-13 .digit, .theme-13 .colon, .theme-13 .am-pm { color: #3b82f6; text-shadow: 0 0 25px #3b82f6; }
.theme-13 .temp, .theme-13 .date-value { color: #fde047; text-shadow: 0 0 20px #fde047; }
.theme-13 .date-label { color: #fde047; }

.theme-14 { background: linear-gradient(135deg, #fed7aa 0%, #fca5a5 100%); }
.theme-14 .clock-container { background: linear-gradient(135deg, rgba(254, 215, 170, 0.4), rgba(252, 165, 165, 0.4)); }
.theme-14 .day { color: #dc2626; }
.theme-14 .day.active { text-shadow: 0 0 15px #dc2626; }
.theme-14 .digit, .theme-14 .colon, .theme-14 .am-pm { color: #f97316; text-shadow: 0 0 25px #f97316; }
.theme-14 .temp, .theme-14 .date-value { color: #0891b2; text-shadow: 0 0 20px #0891b2; }
.theme-14 .date-label { color: #0891b2; }

.theme-15 { background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%); }
.theme-15 .clock-container { background: linear-gradient(135deg, rgba(221, 214, 254, 0.5), rgba(196, 181, 253, 0.5)); }
.theme-15 .day { color: #7c3aed; }
.theme-15 .day.active { text-shadow: 0 0 15px #7c3aed; }
.theme-15 .digit, .theme-15 .colon, .theme-15 .am-pm { color: #a78bfa; text-shadow: 0 0 25px #a78bfa; }
.theme-15 .temp, .theme-15 .date-value { color: #f59e0b; text-shadow: 0 0 20px #f59e0b; }
.theme-15 .date-label { color: #f59e0b; }

.theme-16 { background: linear-gradient(135deg, #18181b 0%, #27272a 100%); }
.theme-16 .clock-container { background: linear-gradient(135deg, rgba(24, 24, 27, 0.9), rgba(39, 39, 42, 0.9)); }
.theme-16 .day { color: #ff10f0; }
.theme-16 .day.active { text-shadow: 0 0 15px #ff10f0; }
.theme-16 .digit, .theme-16 .colon, .theme-16 .am-pm { color: #00ffff; text-shadow: 0 0 25px #00ffff; }
.theme-16 .temp, .theme-16 .date-value { color: #ffff00; text-shadow: 0 0 20px #ffff00; }
.theme-16 .date-label { color: #ffff00; }

.theme-17 { background: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%); }
.theme-17 .clock-container { background: linear-gradient(135deg, rgba(124, 58, 237, 0.4), rgba(76, 29, 149, 0.4)); }
.theme-17 .day { color: #86efac; }
.theme-17 .day.active { text-shadow: 0 0 15px #86efac; }
.theme-17 .digit, .theme-17 .colon, .theme-17 .am-pm { color: #6ee7b7; text-shadow: 0 0 25px #6ee7b7; }
.theme-17 .temp, .theme-17 .date-value { color: #fde68a; text-shadow: 0 0 20px #fde68a; }
.theme-17 .date-label { color: #fde68a; }

.theme-18 { background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 100%); }
.theme-18 .clock-container { background: linear-gradient(135deg, rgba(69, 10, 10, 0.8), rgba(127, 29, 29, 0.8)); }
.theme-18 .day { color: #fca5a5; }
.theme-18 .day.active { text-shadow: 0 0 15px #fca5a5; }
.theme-18 .digit, .theme-18 .colon, .theme-18 .am-pm { color: #ef4444; text-shadow: 0 0 25px #ef4444; }
.theme-18 .temp, .theme-18 .date-value { color: #fb923c; text-shadow: 0 0 20px #fb923c; }
.theme-18 .date-label { color: #fb923c; }

.theme-19 { background: linear-gradient(135deg, #84cc16 0%, #65a30d 100%); }
.theme-19 .clock-container { background: linear-gradient(135deg, rgba(132, 204, 22, 0.3), rgba(101, 163, 13, 0.3)); }
.theme-19 .day { color: #fef08a; }
.theme-19 .day.active { text-shadow: 0 0 15px #fef08a; }
.theme-19 .digit, .theme-19 .colon, .theme-19 .am-pm { color: #fde047; text-shadow: 0 0 25px #fde047; }
.theme-19 .temp, .theme-19 .date-value { color: #f97316; text-shadow: 0 0 20px #f97316; }
.theme-19 .date-label { color: #f97316; }

.theme-20 { background: linear-gradient(135deg, #71717a 0%, #52525b 100%); }
.theme-20 .clock-container { background: linear-gradient(135deg, rgba(113, 113, 122, 0.4), rgba(82, 82, 91, 0.4)); }
.theme-20 .day { color: #e4e4e7; }
.theme-20 .day.active { text-shadow: 0 0 15px #e4e4e7; }
.theme-20 .digit, .theme-20 .colon, .theme-20 .am-pm { color: #fafafa; text-shadow: 0 0 25px #fafafa; }
.theme-20 .temp, .theme-20 .date-value { color: #3b82f6; text-shadow: 0 0 20px #3b82f6; }
.theme-20 .date-label { color: #3b82f6; }

/* Custom Theme */
body.custom-theme {
    background: var(--custom-bg-gradient);
}

body.custom-theme .clock-container {
    background: var(--custom-container-bg);
}

body.custom-theme .day {
    color: var(--custom-day-color);
}

body.custom-theme .day.active {
    text-shadow: 0 0 15px var(--custom-day-color);
}

body.custom-theme .digit,
body.custom-theme .colon,
body.custom-theme .am-pm {
    color: var(--custom-time-color);
    text-shadow: 0 0 25px var(--custom-time-color);
}

body.custom-theme .temp,
body.custom-theme .date-value {
    color: var(--custom-date-color);
    text-shadow: 0 0 20px var(--custom-date-color);
}

body.custom-theme .date-label {
    color: var(--custom-date-color);
}