/* Sorting Algorithms Page Styles */
body { 
    font-family: 'Inter', sans-serif; 
    background-color:#f8fafc; 
    color:#1e293b; 
}

.concept-card { 
    background:#fff; 
    border-radius:0.75rem; 
    padding:2rem; 
    box-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); 
    margin-bottom:2rem; 
}

.code-block { 
    background:#e2e8f0; 
    border-radius:.5rem; 
    padding:1rem; 
    font-family: ui-monospace, monospace; 
    white-space: pre; 
    overflow:auto; 
    font-size:.9rem; 
    color:#0f172a; 
}

.bar { 
    background:#94a3b8; 
    border-radius:.25rem .25rem 0 0; 
    transition:height .08s linear, background .08s linear; 
}

.bar.active { 
    background:#f59e0b; 
}

.bar.swap { 
    background:#ef4444; 
}

.bar.sorted { 
    background:#10b981; 
}

/* Button Styles */
.btn {
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    font-size: 0.875rem;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary {
    background-color: #3b82f6; /* blue-500 */
    color: white;
}

.btn-primary:hover {
    background-color: #2563eb; /* blue-600 */
}

/* Label styles for consistency */
.label {
    font-weight: 500;
    color: #374151; /* gray-700 */
}

/* Range input alignment fix */
input[type="range"] {
    vertical-align: middle;
    margin: 0;
}