/* ── Loading Screen ─────────────────────────────────────────────── */
.loading-shield {
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: 0.8; }
}

.loading-dots .dot:nth-child(1) { animation: bounce-dot 1.4s ease-in-out infinite 0s; }
.loading-dots .dot:nth-child(2) { animation: bounce-dot 1.4s ease-in-out infinite 0.2s; }
.loading-dots .dot:nth-child(3) { animation: bounce-dot 1.4s ease-in-out infinite 0.4s; }

@keyframes bounce-dot {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* ── Checking Spinner ──────────────────────────────────────────── */
.checking-spinner {
    width: 56px;
    height: 56px;
    border: 4px solid rgba(255, 255, 255, 0.08);
    border-top-color: #10b981;
    border-right-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── URL Input ─────────────────────────────────────────────────── */
#url-input::placeholder {
    text-align: left;
    direction: ltr;
}

#url-input:focus {
    box-shadow: none;
}

/* ── Scrollbar ─────────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #374151;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}

/* ── Line clamp ────────────────────────────────────────────────── */
.line-clamp-5 {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Smooth transitions ────────────────────────────────────────── */
* {
    scroll-behavior: smooth;
}

/* ── Selection ─────────────────────────────────────────────────── */
::selection {
    background: rgba(16, 185, 129, 0.3);
    color: white;
}

/* ── Score bar animation ───────────────────────────────────────── */
@keyframes grow-bar {
    from { width: 0; }
}

#scores-grid .rounded-full > div {
    animation: grow-bar 1s ease-out;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .url-input-wrapper .relative {
        flex-direction: column;
    }
    
    .url-input-wrapper .relative {
        display: flex;
        flex-direction: column;
    }
    
    .url-input-wrapper input {
        padding: 16px;
        text-align: center;
        font-size: 15px;
    }
    
    .url-input-wrapper button {
        width: calc(100% - 16px);
        margin: 0 8px 8px 8px;
    }
    
    .url-input-wrapper .pr-4 {
        display: none;
    }
}