/* Design tokens */
:root {
  --sc-primary: #0d6efd;
  --sc-primary-600: #0b5ed7;
  --sc-surface: #ffffff;
  --sc-border: rgba(13,110,253,.12);
  --sc-shadow: 0 12px 30px rgba(13,110,253,.08);
  --sc-muted: #6c757d;
}

[data-theme="dark"] {
  --sc-primary: #66b0ff;
  --sc-primary-600: #8cc4ff;
  --sc-surface: #111418;
  --sc-border: rgba(255,255,255,.08);
  --sc-shadow: 0 10px 24px rgba(0,0,0,.6);
  --sc-muted: #9aa3ab;
}

/* Base */
body {
  background: linear-gradient(140deg, #f6f9ff 0%, #eef3ff 40%, #f8f9fa 100%);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #212529;
}

[data-theme="dark"] body, [data-theme="dark"]{
  background: linear-gradient(160deg, #0e1116 0%, #0b0f14 50%, #0f1319 100%);
  color: #eaeef3;
}

.container { text-align: left; }

/* Cards */
.card { border-radius: 14px; border: none; }

.glass-card {
  border-radius: 18px;
  background: rgba(255,255,255,0.78);
  box-shadow: var(--sc-shadow);
  border: 1px solid var(--sc-border);
  backdrop-filter: blur(10px);
}

[data-theme="dark"] .glass-card { background: rgba(20,24,30,0.72); }

/* Header */
.page-header h1 { letter-spacing: -.02em; }
.page-header .subtitle { color: var(--sc-muted); }

/* Buttons */
.btn-primary { background-color: var(--sc-primary); border-color: var(--sc-primary); }
.btn-primary:hover { background-color: var(--sc-primary-600); border-color: var(--sc-primary-600); }
.btn-soft { background: rgba(13,110,253,.08); color: var(--sc-primary); border: 1px solid rgba(13,110,253,.15); }
.btn-soft:hover { background: rgba(13,110,253,.12); color: var(--sc-primary-600); }

/* Dropzone */
.dropzone {
  border: 2px dashed rgba(13,110,253,.35);
  border-radius: 14px;
  padding: 26px;
  text-align: center;
  background: rgba(13,110,253,0.04);
  transition: all .2s ease;
}
.dropzone:hover { background: rgba(13,110,253,0.06); }
.dropzone.dragover { border-color: var(--sc-primary); background: rgba(13,110,253,0.1); }

/* Inline loader */
.loading-inline { display: inline-flex; align-items: center; gap: .6rem; }

/* Result */
.result-card { background: var(--sc-surface); border-radius: 14px; border: 1px solid rgba(0,0,0,.05); }
.result-card .header { border-bottom: 1px solid rgba(0,0,0,.06); }
[data-theme="dark"] .result-card { border-color: rgba(255,255,255,.06); }
[data-theme="dark"] .result-card .header { border-color: rgba(255,255,255,.08); }

/* Modern table */
.table-modern thead th { font-weight: 600; color: #495057; background: #f8f9fb; position: sticky; top: 0; z-index: 1; }
.table-modern tbody tr { transition: background .15s ease; }
.table-modern tbody tr:hover { background: rgba(13,110,253,.04); }
.table-modern .name-cell { max-width: 360px; }
.text-truncate-1 { max-width: 100%; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Badges */
.badge-soft { background: rgba(0,0,0,.05); color: #495057; border: 1px solid rgba(0,0,0,.06); }
.badge-soft.success { background: rgba(25,135,84,.1); color: #198754; border-color: rgba(25,135,84,.18); }
.badge-soft.primary { background: rgba(13,110,253,.12); color: var(--sc-primary); border-color: rgba(13,110,253,.2); }
.badge-soft.secondary { background: rgba(108,117,125,.12); color: #6c757d; border-color: rgba(108,117,125,.18); }
.badge-soft.danger { background: rgba(220,53,69,.12); color: #dc3545; border-color: rgba(220,53,69,.18); }

/* Utilities */
.shadow-soft { box-shadow: var(--sc-shadow); }
.muted { color: var(--sc-muted); }

/* Skeleton loader */
.skeleton {
  display: block;
  width: 100%;
  height: 12px;
  background: linear-gradient(90deg, rgba(0,0,0,.05), rgba(0,0,0,.08), rgba(0,0,0,.05));
  background-size: 200% 100%;
  border-radius: 6px;
  animation: shimmer 1.25s infinite;
}
.skeleton.sm { height: 10px; }
.skeleton.lg { height: 16px; }
.skeleton + .skeleton { margin-top: 10px; }

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.1), rgba(255,255,255,.06));
}

/* Progress steps */
.progress-steps { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.progress-step { display: inline-flex; align-items: center; gap: 6px; color: var(--sc-muted); font-size: .9rem; }
.progress-step .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,.2); }
.progress-step.active { color: var(--sc-primary); }
.progress-step.active .dot { background: var(--sc-primary); }
.progress-step.done { color: #198754; }
.progress-step.done .dot { background: #198754; }