body { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: #f5f7fb; margin: 0; }
main { max-width: 1200px; margin: 20px auto; padding: 0 12px; }
section { background: #fff; border: 1px solid #e7e9ef; border-radius: 10px; padding: 14px; margin-bottom: 12px; }
h1 { margin: 0 0 12px; font-size: 1.4rem; }
h2 { margin: 0 0 10px; font-size: 1rem; }
.row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
label { display: flex; flex-direction: column; font-size: 0.85rem; gap: 4px; }
input, select, button { border: 1px solid #cbd2e0; border-radius: 6px; padding: 8px; }
button { background: #0f172a; color: #fff; cursor: pointer; }
button[disabled] { opacity: 0.6; cursor: not-allowed; }
.muted { color: #5b6478; font-size: 0.9rem; }
.error { color: #b91c1c; }
.ok { color: #166534; }
.loader-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.loader-text { font-size: 0.9rem; color: #1f2937; }
.spinner { width: 16px; height: 16px; border: 2px solid #cbd5e1; border-top-color: #0f172a; border-radius: 50%; animation: spin 0.8s linear infinite; display: inline-block; }
.progress { width: 100%; max-width: 420px; height: 8px; background: #e2e8f0; border-radius: 999px; overflow: hidden; margin: 8px 0 4px; }
.progress-bar { height: 100%; background: #0f172a; transition: width 0.2s linear; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th, td { border: 1px solid #edf0f6; text-align: left; padding: 6px; }
.sortable { cursor: pointer; user-select: none; }
.pagination { display: flex; align-items: center; gap: 10px; margin-top: 10px; }