:root {
  --mc-ink: #23374d;
  --mc-primary: #244d70;
  --mc-muted: #6d7e8e;
  --mc-border: #e1e8ee;
  --tblr-primary: #244d70;
  --tblr-primary-rgb: 36, 77, 112;
  --tblr-body-color: #23374d;
  --tblr-border-color: #e1e8ee;
}

body { background: #f4f7fa; color: var(--mc-ink); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
[hidden] { display: none !important; }
a { color: var(--mc-primary); }
.navbar-vertical { background: #1d344a !important; overflow-y: auto !important; }
.navbar-vertical .container-fluid { align-items: stretch; }
.navbar-vertical .navbar-brand { padding: 24px 20px 22px; margin: 0; }
.navbar-brand-logo { max-height: 42px !important; }
.navbar-vertical nav { background: transparent !important; padding: 0; }
.navbar-vertical .navbar-nav { padding: 4px 12px; gap: 4px; width: 100%; }
.navbar-vertical .nav-link { min-height: 44px; padding: 11px 12px; border-radius: 8px; white-space: normal; color: #c5d2de; }
.navbar-vertical .nav-link-title { line-height: 1.4; font-size: 13px; }
.navbar-vertical .nav-link-icon { display: inline-flex !important; flex-shrink: 0; font-size: 15px; }
.navbar-vertical .nav-link.active { background: #ffffff12; color: #fff; }
.navbar-vertical .nav-link:hover { background: #ffffff09; color: #fff; }
.navbar-vertical a.btn[href$='/logout'] { border: 1px solid #ffffff25; background: transparent; color: #c5d2de; margin: 24px !important; justify-content: center; }
.navbar-vertical a.btn[href$='/logout']:hover { background: #ffffff12; color: #fff; }
.page-wrapper { min-width: 0; }
.page-wrapper > .container-fluid { padding: 0 32px 24px; }
.page-header { margin: 28px 0 0; }
.page-pretitle { font-size: 10px; font-weight: 600; letter-spacing: .1em; color: var(--mc-muted); margin-bottom: 6px; }
.page-title { font-size: 27px; font-weight: 650; letter-spacing: -.5px; line-height: 1.3; }
.page-body { margin: 0; padding: 0 32px 32px; }
.page-body > .container-fluid { padding: 0; }
.page-body > .container-fluid > .row { display: block; margin: 0; --tblr-gutter-x: 0; --tblr-gutter-y: 0; }
.page-body > .container-fluid > .row > * { padding: 0; margin-top: 0; }
.card { border: 1px solid var(--mc-border); border-radius: 12px; box-shadow: 0 2px 8px #20394e04; overflow: hidden; }
.card-header { min-height: 62px; padding: 18px 22px; gap: 16px; justify-content: space-between; flex-wrap: wrap; }
.card-title { font-size: 15px; font-weight: 600; }
.card-body { padding: 22px; }
.card-footer { padding: 16px 22px; background: #fff; border-top: 1px solid var(--mc-border); flex-wrap: wrap; }
.btn { min-height: 38px; border-radius: 7px; font-size: 13px; font-weight: 500; box-shadow: none; }
.btn-primary { --tblr-btn-bg: var(--mc-primary); --tblr-btn-border-color: var(--mc-primary); background: var(--mc-primary); border-color: var(--mc-primary); }
.btn-primary:hover { background: #1c3e5b; border-color: #1c3e5b; }
.btn-sm { min-height: 30px; font-size: 12px; }
.btn:focus-visible, .nav-link:focus-visible, .form-control:focus-visible, .form-select:focus-visible, summary:focus-visible { outline: 2px solid var(--mc-primary); outline-offset: 3px; }
.form-label { font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.form-control, .form-select { min-height: 42px; border: 1px solid #d6e0e8; border-radius: 7px; font-size: 13px; }
.form-control:focus, .form-select:focus { border-color: #7594af; box-shadow: 0 0 0 3px #244d7012; }
.form-check { min-height: 26px; padding-left: 26px; }
.form-check-input { width: 17px; height: 17px; margin-left: -26px; border-color: #a8b8c6; }
.form-check-input:checked { background-color: var(--mc-primary); border-color: var(--mc-primary); }
.form-check-label { font-size: 13px; line-height: 1.7; }
.mc-form { max-width: 720px; }
.mc-form-intro { padding-top: 24px; margin-top: 8px; border-top: 1px solid var(--mc-border); }
.mc-form-intro p { margin: 8px 0 20px; color: var(--mc-muted); font-size: 13px; }
textarea.form-control, pre, code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
textarea.form-control { padding: 14px; line-height: 1.7; font-size: 12px; }
pre { padding: 16px; background: #f5f8fa; border: 1px solid var(--mc-border); border-radius: 8px; color: var(--mc-ink); font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 340px; overflow: auto; }
code { color: var(--mc-primary); background: #eef3f7; padding: 3px 6px; border-radius: 4px; font-size: 11px; }
.table { font-size: 12px; --tblr-table-border-color: var(--mc-border); margin-bottom: 0; }
.table th { background: #f8fafc; color: var(--mc-muted); font-size: 10px; font-weight: 600; text-transform: none; letter-spacing: 0; white-space: nowrap; padding: 12px 18px; }
.table td { padding: 15px 18px; vertical-align: middle; line-height: 1.5; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #f9fbfd; }
.table td pre { margin: 12px 0 0; min-width: 280px; }
.table details summary { color: var(--mc-primary); cursor: pointer; white-space: nowrap; }
.mc-model-list { min-width: 0; }
.mc-model-list > .container-fluid { padding: 0; }
.mc-model-list .flex-grow-1.me-2 { margin-right: 0 !important; }
.mc-model-list .flex-grow-1 > .card > .card-header { display: none; }
.mc-no-bulk .dropdown.col-4:has(> #dropdownMenuButton:disabled) { display: none; }
.mc-no-bulk .card-table tr > :first-child { display: none; }
.mc-no-bulk .card-body.border-bottom:not(:has(#search-input)):not(:has(.alert)) { display: none; }
.mc-no-bulk .card-body > .d-flex > .text-muted { width: min(100%, 620px); }
.mc-model-list .card-table td { max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.mc-diagnostics .card-table td { white-space: normal; overflow-wrap: anywhere; }
.mc-diagnostics .card-table { min-width: 1080px; }
.mc-diagnostics .card-table tr > :is(:nth-child(3), :nth-child(4), :nth-child(7), :nth-child(8)) { white-space: nowrap; }
.mc-diagnostics .card-table tr > :nth-child(5) { min-width: 220px; }
.mc-diagnostics .card-table tr > :nth-child(6) { min-width: 360px; }
.mc-model-list .filter-sidebar-col { padding-left: 20px; flex-shrink: 0; min-width: 205px; }
.mc-model-list #filter-sidebar .card-body { padding: 14px 16px; font-size: 12px; max-height: min(72vh, 680px); overflow-y: auto; }
.mc-model-list #filter-sidebar a { padding: 7px 8px !important; border-radius: 5px; }
.mc-model-list #filter-sidebar a:hover { background: #f0f5f8; }
.mc-model-list .pagination { flex-wrap: wrap; }
.mc-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 5px; font-size: 11px; font-weight: 500; white-space: nowrap; line-height: 1.3; }
.mc-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.mc-badge-success { color: #28745e; background: #eaf5ef; }
.mc-badge-warning { color: #956519; background: #fff4dd; }
.mc-badge-danger { color: #ad4149; background: #fceef0; }
.mc-badge-muted { color: #6d7e8e; background: #eef2f5; }
.mc-badge-info { color: #346383; background: #eaf1f7; }
.alert { border-radius: 8px; line-height: 1.6; font-size: 13px; }
.mc-diagnostic-note { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 20px; color: #355b78; background: #edf4f9; border-color: #dbe8f1; }
.mc-diagnostic-note > i { margin-top: 5px; }
.mc-empty { text-align: center; color: var(--mc-muted); padding: 36px 20px !important; white-space: normal !important; }
.mc-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 24px; }
.mc-metric { position: relative; padding: 22px; }
.mc-metric-label { display: block; font-size: 12px; color: var(--mc-muted); }
.mc-metric strong { display: block; font-size: 29px; line-height: 1.3; margin: 12px 0 5px; letter-spacing: -.7px; font-weight: 650; font-variant-numeric: tabular-nums; }
.mc-metric small { color: var(--mc-muted); font-size: 11px; }
.mc-metric-icon { position: absolute; right: 20px; top: 18px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; color: #69879d; background: #eef4f8; }
.mc-metric-icon svg, .mc-action-icon svg { display: block; width: 20px; height: 20px; }
.mc-overview-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); gap: 22px; margin-bottom: 24px; }
.mc-overview-grid > .card { align-self: start; }
.mc-card-link { font-size: 12px; font-weight: 500; text-decoration: none; }
.mc-source { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--mc-border); }
.mc-source:last-child { border-bottom: 0; }
.mc-source strong { display: block; font-size: 13px; font-weight: 600; }
.mc-source small { display: block; margin-top: 5px; font-size: 11px; color: var(--mc-muted); }
.mc-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.mc-action { display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 22px; text-decoration: none; color: var(--mc-ink); transition: border-color .15s; }
.mc-action:hover { border-color: #9eb3c4; color: var(--mc-ink); text-decoration: none; }
.mc-action-icon { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; background: #edf3f7; color: var(--mc-primary); border-radius: 9px; }
.mc-action > div { flex: 1; }
.mc-action strong { display: block; font-size: 13px; font-weight: 600; }
.mc-action small { display: block; font-size: 11px; color: var(--mc-muted); margin-top: 5px; }
.mc-action > i:last-child { font-size: 11px; color: #9aaebd; }
.mc-login { min-height: 100svh; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at top, #e2edf4, #f5f7fa 70%); }
.mc-login-card { width: min(100%, 410px); }
.mc-login-card .card-body { padding: 36px; }
.mc-login-card h1 { font-size: 24px; font-weight: 650; margin: 22px 0 8px; letter-spacing: -.4px; }
.mc-login-card .mc-login-subtitle { margin: 0 0 28px; color: var(--mc-muted); font-size: 13px; }
.mc-login-card .form-footer { margin-top: 24px; }
.mc-secret { padding: 20px; background: #f3f7fa; border: 1px dashed #b7c9d7; border-radius: 9px; overflow-wrap: anywhere; user-select: all; }
.mc-secret code { background: transparent; font-size: 14px; }
.mc-skip-link { position: fixed; top: 12px; left: 12px; transform: translateY(-200%); z-index: 2000; padding: 12px 18px; border-radius: 7px; background: var(--mc-primary); color: #fff; }
.mc-skip-link:focus { transform: translateY(0); color: #fff; }

@media (max-width: 1199px) {
  .mc-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-overview-grid { grid-template-columns: 1fr; }
  .mc-actions { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .navbar-vertical { min-height: 0; padding: 0; }
  .navbar-vertical .navbar-brand { padding: 12px 16px; }
  .navbar-vertical .container-fluid { display: block; }
  .navbar-vertical nav { width: 100%; min-height: 0; }
  .navbar-vertical .navbar-toggler { position: absolute; right: 16px; top: -47px; padding: 10px; }
  .navbar-vertical a.btn[href$='/logout'] { margin: 12px !important; }
  .navbar-vertical:has(.navbar-collapse:not(.show)) a.btn[href$='/logout'] { display: none; }
  .page-wrapper > .container-fluid { padding: 0 18px 20px; }
  .page-body { padding: 0 18px 24px; }
  .page-header { margin: 22px 0 0; }
  .page-title { font-size: 23px; }
  .mc-metrics { gap: 12px; margin-bottom: 18px; }
  .mc-metric { padding: 18px; }
  .mc-metric strong { font-size: 25px; }
  .mc-metric-icon { display: none; }
  .mc-model-list .col-12 > .d-flex { flex-direction: column-reverse; gap: 18px; }
  .mc-model-list .filter-sidebar-col { width: 100%; padding-left: 0; }
  .mc-model-list #filter-sidebar .card-body { max-height: 180px; overflow-y: auto; }
  .mc-login-card .card-body { padding: 28px; }
}