@import url('https://cdn.jsdmirror.com/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css');

body {
    font-family: 'Inter', 'Noto Sans SC', sans-serif;
    background-color: #f0f9ff;
    min-height: 100vh;
}

.bg-sky-50 {
    background-color: #f0f9ff;
}

.bg-sky-100 {
    background-color: #e0f2fe;
}

.bg-sky-500 {
    background-color: #0ea5e9;
}

.bg-sky-600 {
    background-color: #0284c7;
}

.text-sky-500 {
    color: #0ea5e9;
}

.text-sky-600 {
    color: #0284c7;
}

.text-sky-700 {
    color: #0369a1;
}

.border-sky-200 {
    border-color: #bae6fd;
}

.shadow-soft {
    box-shadow: 0 4px 20px -2px rgba(14, 165, 233, 0.1);
}

.htmx-indicator {
    display: none;
    opacity: 0;
    transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator {
    display: flex;
    opacity: 1;
}

.htmx-request.htmx-indicator {
    display: flex;
    opacity: 1;
}
.fade-in {
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.spinner-border {
    width: 1.5rem;
    height: 1.5rem;
}