.clock {
    position: relative;
    width: 12.5rem;
    height: 12.5rem;
    border: 2px solid black;
    border-radius: 50%;
    margin: 4rem auto;
    background: var(--card);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.hand {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform-origin: 50% 100%;
    border-radius: 0.625rem;
}

.hand.hour {
    width: 0.375rem;
    height: 3.75rem;
    background: var(--accent);
    transform: translateX(-50%) rotate(0deg);
}

.hand.minute {
    width: 0.25rem;
    height: 5rem;
    background: #374151;
    transform: translateX(-50%) rotate(0deg);
}

.hand.second {
    width: 0.125rem;
    height: 5.625rem;
    background: var(--danger);
    transform: translateX(-50%) rotate(0deg);
}

.center-point {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.625rem;
    height: 0.625rem;
    background: var(--accent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.input-container {
    text-align: center;
    margin-bottom: 1.25rem;
}

.input-container label {
    display: block;
    margin-bottom: 0.625rem;
    font-size: 0.875rem;
    color: var(--muted);
}

.input-wrapper {
    display: flex;
    justify-content: center;
    gap: 0.625rem;
}

.input-wrapper input {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 1rem;
    text-align: center;
    width: 7.5rem;
}

.input-wrapper button {
    padding: 0.625rem 1.25rem;
    background: blue;
    color: white;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 1rem;
}

.input-wrapper button:hover {
    background: #5a35a8;
}

.input-wrapper button:active {
    background: blue;
}

@media (max-width: 1440px) {
    .clock {
        width: 11.875rem;
        height: 11.875rem;
        margin: 1.125rem auto;
    }
    .clock::before {
        top: 0.3rem;
        width: 0.11875rem;
    }
    .clock::after {
        left: 0.3rem;
        height: 0.11875rem;
    }
    .hand.hour {
        width: 0.35625rem;
        height: 3.5625rem;
    }
    .hand.minute {
        width: 0.2375rem;
        height: 4.75rem;
    }
    .hand.second {
        width: 0.11875rem;
        height: 5.34375rem;
    }
    .center-point {
        width: 0.59375rem;
        height: 0.59375rem;
    }
    .input-container {
        margin-bottom: 1.125rem;
    }
    .input-container label {
        margin-bottom: 0.6rem;
        font-size: 0.8125rem;
    }
    .input-wrapper {
        gap: 0.6rem;
    }
    .input-wrapper input {
        padding: 0.6rem 0.7125rem;
        font-size: 0.95rem;
        width: 7.125rem;
    }
    .input-wrapper button {
        padding: 0.6rem 1.1875rem;
        font-size: 0.95rem;
    }
}

@media (max-width: 1024px) {
    .clock {
        width: 11.25rem;
        height: 11.25rem;
        margin: 1rem auto;
    }
    .clock::before {
        top: 0.2875rem;
        width: 0.1125rem;
    }
    .clock::after {
        left: 0.2875rem;
        height: 0.1125rem;
    }
    .hand.hour {
        width: 0.3375rem;
        height: 3.375rem;
    }
    .hand.minute {
        width: 0.225rem;
        height: 4.5rem;
    }
    .hand.second {
        width: 0.1125rem;
        height: 5.0625rem;
    }
    .center-point {
        width: 0.5625rem;
        height: 0.5625rem;
    }
    .input-container {
        margin-bottom: 1rem;
    }
    .input-container label {
        margin-bottom: 0.575rem;
        font-size: 0.75rem;
    }
    .input-wrapper {
        gap: 0.575rem;
    }
    .input-wrapper input {
        padding: 0.575rem 0.675rem;
        font-size: 0.9rem;
        width: 6.75rem;
    }
    .input-wrapper button {
        padding: 0.575rem 1.125rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .clock {
        width: 10rem;
        height: 10rem;
        margin: 0.875rem auto;
    }
    .clock::before {
        top: 0.275rem;
        width: 0.10625rem;
    }
    .clock::after {
        left: 0.275rem;
        height: 0.10625rem;
    }
    .hand.hour {
        width: 0.31875rem;
        height: 3.1875rem;
    }
    .hand.minute {
        width: 0.2125rem;
        height: 4.25rem;
    }
    .hand.second {
        width: 0.10625rem;
        height: 4.78125rem;
    }
    .center-point {
        width: 0.53125rem;
        height: 0.53125rem;
    }
    .input-container {
        margin-bottom: 0.875rem;
    }
    .input-container label {
        margin-bottom: 0.55rem;
        font-size: 0.6875rem;
    }
    .input-wrapper {
        gap: 0.55rem;
        flex-direction: column;
        align-items: center;
    }
    .input-wrapper input {
        padding: 0.55rem 0.6375rem;
        font-size: 0.85rem;
        width: 6rem;
    }
    .input-wrapper button {
        padding: 0.55rem 1.0625rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .clock {
        width: 8.75rem;
        height: 8.75rem;
        margin: 0.75rem auto;
    }
    .clock::before {
        top: 0.2625rem;
        width: 0.1rem;
    }
    .clock::after {
        left: 0.2625rem;
        height: 0.1rem;
    }
    .hand.hour {
        width: 0.3rem;
        height: 3rem;
    }
    .hand.minute {
        width: 0.2rem;
        height: 4rem;
    }
    .hand.second {
        width: 0.1rem;
        height: 4.5rem;
    }
    .center-point {
        width: 0.5rem;
        height: 0.5rem;
    }
    .input-container {
        margin-bottom: 0.75rem;
    }
    .input-container label {
        margin-bottom: 0.525rem;
        font-size: 0.625rem;
    }
    .input-wrapper {
        gap: 0.525rem;
    }
    .input-wrapper input {
        padding: 0.525rem 0.6rem;
        font-size: 0.8rem;
        width: 5.25rem;
    }
    .input-wrapper button {
        padding: 0.525rem 1rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 375px) {
    .clock {
        width: 7.5rem;
        height: 7.5rem;
        margin: 0.625rem auto;
    }
    .clock::before {
        top: 0.25rem;
        width: 0.09375rem;
    }
    .clock::after {
        left: 0.25rem;
        height: 0.09375rem;
    }
    .hand.hour {
        width: 0.28125rem;
        height: 2.8125rem;
    }
    .hand.minute {
        width: 0.1875rem;
        height: 3.75rem;
    }
    .hand.second {
        width: 0.09375rem;
        height: 4.21875rem;
    }
    .center-point {
        width: 0.46875rem;
        height: 0.46875rem;
    }
    .input-container {
        margin-bottom: 0.625rem;
    }
    .input-container label {
        margin-bottom: 0.5rem;
        font-size: 0.5625rem;
    }
    .input-wrapper {
        gap: 0.5rem;
    }
    .input-wrapper input {
        padding: 0.5rem 0.5625rem;
        font-size: 0.75rem;
        width: 4.5rem;
    }
    .input-wrapper button {
        padding: 0.5rem 0.9375rem;
        font-size: 0.75rem;
    }
}