/* Clock App Panel */
#clockPanel {
    position: relative;
    width: 350px;
    max-width: 90%;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    background: #1e1e1e;
    padding: 24px 20px;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.6);
}

/* Digital clock */
#digitalClock {
    font-size: 2.2rem;
    font-family: 'Segoe UI Mono', monospace;
    color: #1e90ff;
    text-align: center;
    letter-spacing: 2px;
    text-shadow: 0 0 8px rgba(30,144,255,0.5);
}

/* Date display */
#currentDate {
    font-size: 1rem;
    color: #aaa;
    text-align: center;
}

/* Analogue clock canvas */
#analogueClock {
    background: radial-gradient(circle at center, #2b2b2b 0%, #1a1a1a 100%);
    border-radius: 50%;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 4px 14px rgba(0,0,0,0.6);
}

/* Hover subtle scale effect */
#clockPanel:hover {
    transform: scale(1.02);
    transition: transform 0.3s ease;
}