/* Shared presentation layer, loaded after page-specific styles. */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../vendor/fonts/material-symbols-outlined.ttf') format('truetype');
}
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: 400;
  font-style: normal;
  font-feature-settings: 'liga';
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
}
:root {
  color-scheme: light;
  --accent: #ad3d68;
  --accent-2: #8e2e54;
  --bg: #fff4f7;
  --card: #fff;
  --ink: #362c32;
  --muted: #756771;
  --chip: #fbe8ef;
  --chip-text: #855269;
  --dash-bg: var(--bg);
  --card-bg: #fff;
  --border-soft: #eedde4;
  --surface-soft: #fff8fa;
  --border: #eedde4;
  --text-main: var(--ink);
  --text-muted: var(--muted);
  --shadow-soft: 0 1px 3px rgba(25,30,36,.04);
  --radius-xl: 8px;
  --accent-hover: #8e2e54;
  --accent-soft: #fbe8ef;
  --focus: #d894ad;
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { color: var(--ink); font-weight: 650; letter-spacing: 0; }
h1 { font-size: 28px; } h2 { font-size: 24px; } h3 { font-size: 22px; } h4 { font-size: 20px; } h5 { font-size: 17px; } h6 { font-size: 15px; }
a { color: #9e3c63; text-underline-offset: 3px; }
hr { border: 0; border-top: 1px solid var(--border); opacity: 1; }
code { color: #505b6b; font-size: .85em; overflow-wrap: anywhere; }
pre { max-width: 100%; overflow: auto; }
.container { max-width: 1440px; padding-inline: 28px; }
.min-w-0 { min-width: 0; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flex-fill { flex: 1 1 auto; }
.ms-auto { margin-left: auto !important; }
.fw-semibold { font-weight: 600; }
.small, small { font-size: .875em; }
body > .container, body > .page-wrap { padding-top: 24px; padding-bottom: 32px; }
.appbar {
  background: #fffafb;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 14px 0;
  box-shadow: 0 1px 4px rgba(25,30,36,.03);
}
.appbar > .container { gap: 20px !important; flex-wrap: wrap; }
.appbar .workspace-brand { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.mgram-mark { display: block; width: 38px; height: 38px; object-fit: contain; flex: 0 0 auto; }
.mgram-wordmark { color: #75324d; font-size: 25px; font-weight: 750; line-height: 1; letter-spacing: 0; }
.brand .mgram-mark { width: 44px; height: 44px; }
.brand .mgram-wordmark { color: #75324d; font-size: 28px; }
.appbar h2 { font-size: 19px; white-space: nowrap; }
.appbar .workspace-nav-group { min-width: 0; flex: 1 1 auto; flex-wrap: wrap; }
.quick-nav { display: flex; gap: 3px; min-width: 0; }
.quick-nav a { color: #626a74; background: transparent; border: 1px solid transparent; padding: 7px 10px; border-radius: 5px; font-size: 13px; font-weight: 550; white-space: nowrap; }
.quick-nav a:hover { color: var(--accent-hover); background: var(--accent-soft); }
.quick-nav a.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.appbar .workspace-account { flex: 0 0 auto; margin-left: auto; }
.appbar .chip { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.chip, .pill, .counter-badge { background: var(--chip); color: var(--chip-text); border: 1px solid var(--border); border-radius: 5px; }
.dropdown-menu { border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 10px 30px rgba(72,35,52,.12); padding: 6px; font-size: 13px; }
.appbar .dropdown-menu { min-width: min(22rem, calc(100vw - 32px)) !important; max-width: calc(100vw - 32px); top: calc(100% + 10px); }
.dropdown-item { border-radius: 4px; padding: 9px 12px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--accent-soft); }
.dropdown-header { overflow-wrap: anywhere; white-space: normal; }
.card-like, .shell, .table-shell, .auth-card, .explain-card,
.hero-card, .panel-card, .page-title-card, .page-shell,
.search-card, .page-card, .section-card, .notes-card, .history-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(25,30,36,.04);
  backdrop-filter: none;
}
.hero-card, .page-title-card { background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; padding: 0 0 20px; margin-bottom: 24px !important; }
.hero-title, .panel-title, .history-section-title { letter-spacing: 0; font-weight: 650; }
.hero-subtitle { max-width: 760px; }
.kpi-card, .count-card, .kpi, .result-card, .image-card, .preview-card {
  border-radius: 8px;
  border-color: var(--border);
  background: #fff;
  box-shadow: 0 1px 3px rgba(25,30,36,.04);
}
.kpi-card { min-height: 148px; height: 100%; padding: 20px; transition: border-color .15s; }
.kpi-card:hover { transform: none; border-color: #d9a6b9; box-shadow: 0 1px 3px rgba(25,30,36,.04); }
.kpi-title { font-size: 11px; font-weight: 650; letter-spacing: 0; }
.kpi-value { font-size: 32px; font-weight: 700; letter-spacing: 0; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kpi-value.model-name { font-size: 14px; }
.kpi-icon, .kpi .icon, .page-title-icon, .dz-icon { background: var(--accent-soft); color: var(--accent); border-radius: 6px; }
.btn { min-height: 36px; border-radius: 5px; font-size: 13px; font-weight: 550; padding: 7px 13px; box-shadow: none; }
.btn-sm { min-height: 30px; font-size: 12px; padding: 5px 10px; }
.btn-primary { color: #fff; background: var(--accent); border-color: var(--accent); }
.btn-primary:hover { color: #fff; background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-secondary { color: #fff; background: #68616b; border-color: #68616b; }
.btn-secondary:hover { color: #fff; background: #514b54; border-color: #514b54; }
.btn-dark { color: #fff; background: #272d34; border-color: #272d34; }
.btn-outline-primary, .btn-outline-secondary, .btn-light { color: #424a54; background: #fff; border-color: #cdd3da; }
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-light:hover { color: #24282e; background: #eceff2; border-color: #adb6c0; }
.btn-outline-primary { color: var(--accent); border-color: #dfb5c5; }
.btn-outline-primary:hover { color: var(--accent-hover); background: var(--accent-soft); border-color: #cc8fa7; }
.btn-success { color: #fff; background: #267351; border-color: #267351; }
.btn-success:hover { background: #1e5e42; }
.btn-outline-success { color: #267351; border-color: #8cbaa5; }
.btn-outline-success:hover { color: white; background: #267351; }
.btn-warning { color: #674400; background: #fff1cf; border-color: #e5cb8a; }
.btn:disabled, .btn.disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn-icon, .icon-btn { min-height: 34px; flex-shrink: 0; }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.form-control, .form-select { background-color: #fff; border: 1px solid #cdd3da; border-radius: 5px; font-size: 14px; min-height: 40px; color: #303740; }
.form-control-sm, .form-select-sm { min-height: 32px; font-size: 12px; }
.form-control:focus, .form-select:focus { border-color: #ce86a0; box-shadow: 0 0 0 3px rgba(173,61,104,.12); }
.form-label { display: block; color: #454d57; font-size: 12px; font-weight: 600; }
.form-text { margin-top: 6px; font-size: 12px; color: #69717b; }
.form-check-input { accent-color: var(--accent); }
.monitor-dashboard-actions { min-width: 0; max-width: 100%; margin-left: auto; }
.monitor-dashboard-actions #dashUrl { width: 280px; max-width: 100%; }
.badge { border-radius: 4px; font-weight: 600; font-size: 11px; line-height: 1.25; }
.badge.text-bg-primary, .badge.bg-primary { background: var(--accent-soft) !important; color: #94375b !important; }
.badge.text-bg-secondary { background: #eceff2 !important; color: #505963 !important; }
.badge.text-bg-success { background: #e6f2eb !important; color: #236044 !important; }
.badge.text-bg-danger { background: #fae9e9 !important; color: #a03535 !important; }
.badge.text-bg-warning { background: #fff2d7 !important; color: #805500 !important; }
.badge.text-bg-info { background: #e7f1f4 !important; color: #2f6372 !important; }
.badge.bg-success { background: #e6f2eb; color: #236044; }
.badge.bg-secondary { background: #eceff2; color: #505963; }
.badge.bg-danger { background: #fae9e9; color: #a03535; }
.alert { border-radius: 6px; font-size: 13px; }
.alert-info { color: #375d74; background: #eef4f8; border-color: #d4e1eb; }
.alert-success { color: #236044; background: #edf6f0; border-color: #cee5d6; }
.alert-warning { color: #805500; background: #fff7e6; border-color: #eeddb3; }
.alert-danger { color: #963636; background: #fff0f0; border-color: #efcccc; }
.table-responsive { max-width: 100%; overflow-x: auto; background: #fff; border: 1px solid var(--border); border-radius: 6px; }
.workspace-table-scroll { max-height: 65vh; overflow: auto; }
.workspace-table-scroll thead th { position: sticky; top: 0; z-index: 1; }
.table th:not(.text-center):not(.text-end) { text-align: left; }
.table { margin-bottom: 0; color: #3b434d; font-size: 13px; font-variant-numeric: tabular-nums; }
.table > :not(caption) > * > * { padding: 12px 14px; border-bottom-color: #e7eaee; }
.table thead th, #versionsTable thead th, #resultsTable thead th { background: #fcecf2; color: #82556a; font-size: 11px; font-weight: 650; white-space: nowrap; border-bottom: 1px solid var(--border); }
.table tbody tr:last-child > * { border-bottom: 0; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: #fffbfc; }
.table-hover > tbody > tr:hover > * { background: #fff1f6; }
.table td { overflow-wrap: anywhere; }
.table td code { white-space: normal; }
.pagination { gap: 4px; flex-wrap: wrap; }
.page-link { border-radius: 5px !important; color: #4b5562; font-size: 13px; border-color: #d8dfe5; }
.page-item:not(:first-child) .page-link { margin-left: 0; }
.page-item.active .page-link { background: var(--accent); border-color: var(--accent); color: white; }
.page-link:hover { color: var(--accent); background: var(--accent-soft); }
.slot-card, .dropzone { background: var(--surface-soft); border-radius: 6px; border-color: #e2bac9; }
.slot-card.dragover, .dropzone.dragover { border-color: var(--accent); background: var(--accent-soft); }
.drop-zone, .thumb, .explain-img, .result-img-wrap, .empty-state { border-radius: 6px; }
.metric-box, .insight-item { border-radius: 6px; background: #f8f9fa; border-color: #e0e4e8; }
.count-icon { background: var(--accent-soft); color: var(--accent); border-radius: 6px; }
.count-label { letter-spacing: 0; }
.evidence-img, .result-img { border-radius: 6px; }
.group-card { border-radius: 8px; box-shadow: none; border-color: var(--border); }
.group-header, .group-head { background: var(--surface-soft); }
.progress { background: #e9edf0; border-radius: 4px; }
.progress-bar, .distribution-fill { background: #bc6788; }
.modal-content, .page-loading-panel, .global-results-loading-panel { border: 1px solid #dce1e6; border-radius: 8px; box-shadow: 0 20px 60px rgba(25,30,36,.18); }
.modal-header, .modal-footer { background: var(--surface-soft); border-color: var(--border); }
.modal-body { padding: 24px; }
.modal-title { font-size: 18px; }
.modal-danger .modal-header { background: #fff0f0; color: #963636; }
.modal-danger .modal-title { color: inherit; }
.modal-danger .btn-close-white { filter: none; }
.modal-open { overflow: hidden; }
.global-results-spinner { border-top-color: var(--accent); border-right-color: #e8a2bb; }
.auth-bg { background: var(--bg); }
.auth-logo { background: var(--accent); border-radius: 6px; box-shadow: none; }
.auth-settings { padding-top: 32px; padding-bottom: 40px; }
/* Standalone sign-in keeps its existing image and interactions. */
body:has(.login) { padding-top: 0; background: var(--bg); }
.login { border-color: var(--border); box-shadow: 0 16px 48px -18px rgba(108,47,71,.18); }
.brand-mark { background: var(--accent); box-shadow: none; }
.image-strip { background: var(--accent-soft); border-bottom-color: var(--border); }
.login input { color: #303740; background: #fafbfc; border-color: #cdd3da; }
.login input:hover { border-color: #9da9b7; }
.login input:focus { border-color: #ce86a0; box-shadow: 0 0 0 3px rgba(173,61,104,.12); }
.login .submit { box-shadow: none; }
.brand-name { color: #303740; }
.image-caption { color: #94375b; }
@media (min-width: 768px) { .col-md-5 { flex: 0 0 auto; width: 41.666667%; } .col-md-7 { flex: 0 0 auto; width: 58.333333%; } }
@media (min-width: 992px) { .col-lg-5 { flex: 0 0 auto; width: 41.666667%; } .col-lg-7 { flex: 0 0 auto; width: 58.333333%; } }
@media (max-width: 1279px) {
  .appbar > .container { gap: 10px !important; }
  .appbar .workspace-nav-group { display: contents !important; }
  .quick-nav { order: 3; flex-basis: 100%; overflow-x: auto; padding-bottom: 2px; }
}
@media (max-width: 767px) {
  .container { padding-inline: 16px; }
  .appbar { padding: 12px 0 8px; }
  .appbar .quick-nav a { padding: 7px 10px; font-size: 12px; }
  .appbar .chip { display: none !important; }
  body > .container, body > .page-wrap { padding-top: 18px; }
  .hero-title { font-size: 22px; }
  .shell, .card-like, .page-shell, .panel-card, .section-card, .page-card { padding: 16px; }
  .table > :not(caption) > * > * { padding: 10px 12px; }
  .form-control, .form-select { font-size: 16px; }
  .modal-body { padding: 16px; }
  .monitor-dashboard-actions { width: 100%; }
  .monitor-dashboard-actions #dashUrl { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}