:root {
  --bs-primary: #2563eb;
  --bs-primary-rgb: 37, 99, 235;
  --bs-body-font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --app-bg: #f5f7fb;
  --radius: 14px;
}
[data-bs-theme="dark"] { --app-bg: #0f1420; }
body { background: var(--app-bg); }
.btn-primary { --bs-btn-bg: #2563eb; --bs-btn-border-color: #2563eb; --bs-btn-hover-bg: #1d4ed8; --bs-btn-hover-border-color: #1d4ed8; --bs-btn-disabled-bg: #93b4f5; --bs-btn-disabled-border-color: #93b4f5; }
.app-header { background: var(--bs-body-bg); }
.logo { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, #2563eb, #60a5fa); color: #fff; font-size: 1.3rem; }
.card { border: 1px solid var(--bs-border-color-translucent); border-radius: var(--radius); }
.section-title { font-weight: 600; letter-spacing: .01em; margin-bottom: 1rem; }
.status-badge { background: var(--bs-secondary-bg); color: var(--bs-body-color); font-weight: 500; padding: .5em .8em; }
.status-badge .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #9ca3af; margin-right: 6px; }
.status-badge.ok .dot { background: #16a34a; }
.status-badge.none .dot { background: #dc2626; }
.dropzone { border: 2px dashed var(--bs-border-color); border-radius: var(--radius); min-height: 240px;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem; cursor: pointer;
  transition: border-color .15s, background .15s; background: var(--bs-tertiary-bg); }
.dropzone:hover, .dropzone:focus-visible, .dropzone.drag { border-color: #2563eb; background: rgba(37,99,235,.06); outline: none; }
.preview { max-width: 100%; max-height: 420px; width: auto; height: auto; object-fit: contain; border-radius: 10px; }
.result-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid var(--bs-border-color); }
.pred-class { font-size: 2rem; font-weight: 700; letter-spacing: .06em; color: #1d4ed8; text-transform: uppercase; }
[data-bs-theme="dark"] .pred-class { color: #93c5fd; }
.pred-prob { font-size: 1.6rem; font-weight: 600; }
.progress { height: 12px; border-radius: 999px; }
.progress-bar { background: #2563eb; transition: width .5s ease; }
.class-row { display: grid; grid-template-columns: 70px 1fr 70px; gap: .5rem; align-items: center; font-size: .9rem; margin-bottom: .4rem; }
.class-row .progress { height: 8px; }
.class-row.top .name { font-weight: 700; }
.class-row .bar-neutral { background: #94a3b8; }
.history li { display: flex; gap: .75rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--bs-border-color-translucent); }
.history li:last-child { border-bottom: 0; }
.history img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; }