/* AI Provider Hub — small custom styles layered on top of Tailwind CDN. */

@keyframes fadein {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(100,116,139,.4); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* Reusable component classes (applied via class="...") */
.card { background:#fff; border:1px solid rgb(226 232 240); border-radius:1rem; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.dark .card { background:#0f172a; border-color:#1e293b; }

/* Form controls used across pages */
.input, .select, .textarea {
    width: 100%;
    border-radius: 0.625rem;
    border: 1px solid rgb(203 213 225);
    background: #fff;
    padding: 0.55rem 0.75rem;
    font-size: 0.875rem;
    color: #0f172a;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,.2);
}
.dark .input, .dark .select, .dark .textarea {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

.btn { display:inline-flex; align-items:center; gap:.5rem; border-radius:.625rem; padding:.55rem 1rem; font-size:.875rem; font-weight:600; cursor:pointer; transition:.15s; border:1px solid transparent; }
.btn-primary { background:#4f46e5; color:#fff; }
.btn-primary:hover { background:#4338ca; }
.btn-secondary { background:transparent; border-color: rgb(203 213 225); color:#334155; }
.dark .btn-secondary { border-color:#334155; color:#cbd5e1; }
.btn-secondary:hover { background: rgba(148,163,184,.1); }
.btn-danger { background:#dc2626; color:#fff; }
.btn-danger:hover { background:#b91c1c; }
.btn:disabled { opacity:.6; cursor:not-allowed; }

.badge { display:inline-flex; align-items:center; gap:.35rem; padding:.15rem .6rem; border-radius:999px; font-size:.7rem; font-weight:600; }
.label { display:block; font-size:.8rem; font-weight:600; margin-bottom:.35rem; color:#475569; }
.dark .label { color:#94a3b8; }