/* Google Fonts for Professional Look */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body { 
    font-family: 'Inter', sans-serif; 
    background: #f0f2f5; 
    color: #1c1e21; 
    margin: 0; 
    padding: 0;
}

.container { 
    max-width: 850px; 
    margin: 50px auto; 
    padding: 20px; 
}

h1 {
    text-align: center;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 40px;
    letter-spacing: -1px;
}

/* Modern Glassmorphism Card Style */
.crypto-card { 
    background: #ffffff; 
    padding: 16px 24px; 
    border-radius: 16px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    margin-bottom: 12px; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Hover Effect: Takay Google ko lage mehngi script hai */
.crypto-card:hover { 
    transform: translateY(-4px) scale(1.01); 
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: #007bff;
}

.coin-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.coin-info img {
    border-radius: 50%;
    background: #f8f9fa;
    padding: 2px;
}

.coin-info strong {
    font-size: 1.1rem;
    font-weight: 600;
}

.price-section {
    text-align: right;
    margin-right: 20px;
    flex-grow: 1;
}

.price-section span {
    font-size: 1.1rem;
    font-weight: 700;
}

/* Success & Danger Colors */
.price-up { color: #10b981; font-weight: 600; font-size: 0.9rem; }
.price-down { color: #ef4444; font-weight: 600; font-size: 0.9rem; }

/* Stylish Button */
.btn-detail { 
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); 
    color: #fff; 
    padding: 10px 20px; 
    border-radius: 10px; 
    text-decoration: none; 
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 123, 255, 0.2);
}

.btn-detail:hover { 
    background: linear-gradient(135deg, #0056b3 0%, #004494 100%);
    box-shadow: 0 6px 12px rgba(0, 123, 255, 0.3);
    transform: scale(1.05);
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .crypto-card {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    .price-section {
        margin-right: 0;
    }
}