/* Buttons and compact actions */
.oc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.oc-button,
body.oc-admin input[type="submit"],
body.oc-admin input[type="button"],
body.oc-admin button:not(.oc-icon-button):not(.oc-sidebar-overlay),
.object-tools a,
.button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--oc-radius-sm);
  background: var(--oc-accent);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, .08);
  color: #fff !important;
  font-size: 12px;
  font-weight: 620;
  line-height: 1.2;
  cursor: pointer;
  transition-property: scale, background-color, box-shadow;
  transition-duration: 140ms;
  transition-timing-function: ease-out;
}
.oc-button:hover,
body.oc-admin input[type="submit"]:hover,
body.oc-admin button:not(.oc-icon-button):not(.oc-sidebar-overlay):hover,
.object-tools a:hover { background: var(--oc-accent-hover); }
.oc-button:active,
body.oc-admin input[type="submit"]:active,
body.oc-admin button:not(.oc-icon-button):not(.oc-sidebar-overlay):active,
.object-tools a:active { scale: .96; }
.oc-button--secondary,
body.oc-admin .button.cancel-link,
body.oc-admin a.button,
body.oc-admin button.button {
  background: var(--oc-surface) !important;
  box-shadow: var(--oc-shadow-ring);
  color: var(--oc-text) !important;
}
.oc-button--secondary:hover,
body.oc-admin a.button:hover,
body.oc-admin button.button:hover { background: var(--oc-surface-soft) !important; box-shadow: var(--oc-shadow-ring-hover); }
.oc-button--danger,
.deletelink-box a,
input[type="submit"].deletelink { background: var(--oc-danger) !important; color: #fff !important; }
.oc-button--wide { width: 100%; }
.oc-icon-button { display: inline-grid; width: 42px; height: 42px; place-items: center; padding: 0; }
.oc-link { color: var(--oc-accent) !important; font-weight: 600; text-underline-offset: 3px; }
.oc-link:hover { text-decoration: underline !important; }

/* Layout primitives */
.oc-stack { display: grid; gap: 34px; }
.oc-section { margin-top: 18px; }
.oc-grid { display: grid; gap: 24px; }
.oc-grid > *,
.oc-split > *,
.oc-stack > * { min-width: 0; }
.oc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oc-grid--metrics { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 22px; }
.oc-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 44px; align-items: start; }
.oc-card { min-width: 0; padding: 24px 0; border-top: 1px solid var(--oc-line); background: var(--oc-surface); }
.oc-card:first-child { border-top-color: transparent; }
.oc-card--flush { padding-bottom: 0; }
.oc-card > h2,
.oc-card-header h2 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.02em; }
.oc-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 18px; }
.oc-card-header--compact { padding-bottom: 16px; }
.oc-card-header--edge { padding-inline: 0; }
.oc-card-header p { margin: 5px 0 0; color: var(--oc-text-muted); font-size: 12px; }
.oc-narrow-form { max-width: 760px; }
.oc-metric { display: grid; min-width: 0; align-content: start; gap: 7px; padding: 2px 0 12px; background: transparent; }
a.oc-metric { transition-property: color, translate; transition-duration: 140ms; transition-timing-function: ease-out; }
a.oc-metric:hover { color: var(--oc-accent); translate: 0 -2px; }
.oc-metric-label { color: var(--oc-text-muted); font-size: 12px; }
.oc-metric-value { overflow-wrap: anywhere; color: var(--oc-text); font-size: clamp(25px, 2.3vw, 34px); font-weight: 590; letter-spacing: -.035em; line-height: 1.06; font-variant-numeric: tabular-nums; }
.oc-metric-detail { color: var(--oc-positive); font-size: 12px; font-variant-numeric: tabular-nums; }
.oc-metric-detail.is-neutral { color: var(--oc-text-muted); }
.oc-metric-detail.is-danger { color: var(--oc-danger); }
.oc-list { display: grid; margin: 0; padding: 0; }
.oc-list-item { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--oc-line); }
.oc-list-item:last-child { border-bottom: 0; }
.oc-list-item:hover { color: var(--oc-accent); }
.oc-list-item span:last-child { font-weight: 620; font-variant-numeric: tabular-nums; }
.oc-list-item > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.oc-list-item .oc-badge { max-width: 100%; height: auto; white-space: normal; }
.oc-kv { display: grid; grid-template-columns: minmax(130px, .65fr) minmax(0, 1.35fr); gap: 10px 18px; margin: 0; }
.oc-kv dt { color: var(--oc-text-muted); }
.oc-kv dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.oc-empty { padding: 30px 0; color: var(--oc-text-muted); font-size: 12px; text-align: center; }

/* Badges, messages and progress */
.oc-badge { display: inline-flex; min-height: 24px; align-items: center; padding: 3px 9px; border-radius: 7px; background: #f2f2ee; color: #666861; font-size: 10px; font-weight: 620; white-space: nowrap; }
.oc-badge--positive { background: var(--oc-positive-bg); color: var(--oc-positive); }
.oc-badge--warning { background: var(--oc-warning-bg); color: var(--oc-warning); }
.oc-badge--danger { background: var(--oc-danger-bg); color: var(--oc-danger); }
.oc-badge--info { background: var(--oc-info-bg); color: var(--oc-info); }
.oc-badge--muted { background: var(--oc-surface-soft); color: var(--oc-text-muted); }
.oc-alert,
.messagelist li { margin: 0 0 14px; padding: 12px 14px; border: 0; border-radius: var(--oc-radius-sm); background: var(--oc-info-bg); color: var(--oc-info); font-size: 12px; }
.oc-alert--success,
.messagelist li.success { background: var(--oc-positive-bg); color: var(--oc-positive); }
.oc-alert--warning,
.messagelist li.warning { background: var(--oc-warning-bg); color: var(--oc-warning); }
.oc-alert--error,
.messagelist li.error { background: var(--oc-danger-bg); color: var(--oc-danger); }
.messagelist { margin: 0 0 20px !important; padding: 0 !important; }
.oc-progress { height: 5px; overflow: hidden; border-radius: 999px; background: #e6edfb; }
.oc-progress > span { display: block; width: var(--oc-progress, 0%); height: 100%; border-radius: inherit; background: var(--oc-accent); }

/* Forms and stock Django form layouts */
.oc-form-stack { display: grid; gap: 18px; }
.oc-field { display: grid; min-width: 0; gap: 7px; }
.oc-field > label,
.oc-field > span:first-child,
.form-row label { color: var(--oc-text); font-size: 12px; font-weight: 620; }
.oc-field input:not([type="checkbox"]):not([type="radio"]),
.oc-field textarea,
.oc-field select { width: 100%; min-width: 0; }
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
textarea,
select {
  min-height: 42px;
  max-width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--oc-line-strong);
  border-radius: var(--oc-radius-sm);
  background: var(--oc-surface);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .02);
  color: var(--oc-text);
}
textarea { min-height: 120px; resize: vertical; }
select { padding-right: 34px; }
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus {
  border-color: var(--oc-line-strong) !important;
  outline: 0;
  background: var(--oc-surface);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .02) !important;
}
input[readonly], textarea[readonly], select[disabled] { background: var(--oc-surface-soft); color: var(--oc-text-muted); }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--oc-accent); }
.help, p.help, form p.help, .form-row p { color: var(--oc-text-muted); font-size: 11px; }
.errorlist { margin: 5px 0 0; padding: 0; color: var(--oc-danger); font-size: 11px; }
.errorlist li { list-style: none; }
.aligned .form-row,
.form-row { padding: 17px 0; border-bottom: 1px solid var(--oc-line); }
.aligned .form-row:last-child,
.form-row:last-child { border-bottom: 0; }
.aligned label { width: 190px; }
.form-row.errors { margin-inline: -12px; padding-inline: 12px; border-radius: 8px; background: var(--oc-danger-bg); }
fieldset.module { margin: 0 0 36px; overflow: visible; }
.module h2,
.module caption,
.inline-group h2 { margin: 0; padding: 0 0 14px; border: 0; background: transparent; color: var(--oc-text); font-size: 16px; font-weight: 650; text-transform: none; }
.fieldset-description { padding: 0 0 14px; color: var(--oc-text-muted); }
.submit-row { position: sticky; bottom: 0; z-index: 10; display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 14px 0; border-top: 1px solid var(--oc-line); background: rgba(255, 255, 255, .97); }
.submit-row p { margin: 0; }
.submit-row input { margin: 0; }
.related-widget-wrapper { display: flex; align-items: center; gap: 5px; }
.related-widget-wrapper-link { display: inline-grid; width: 40px; height: 40px; place-items: center; border-radius: 8px; }
.selector { width: 100%; }
.selector-available, .selector-chosen { width: calc(50% - 35px); }
.calendarbox, .clockbox { border: 0 !important; border-radius: 10px; background: var(--oc-surface) !important; box-shadow: var(--oc-shadow-ring) !important; }
.select2-container--admin-autocomplete .select2-selection--single { min-height: 42px; border-color: var(--oc-line-strong); border-radius: 8px; background: var(--oc-surface); }

/* Changelists, filters and data tables */
.oc-data-shell { min-width: 0; background: var(--oc-surface); }
.oc-data-tabs { display: flex; min-height: 46px; align-items: stretch; border-bottom: 1px solid var(--oc-line); }
.oc-data-tabs > span { position: relative; display: inline-flex; min-width: 104px; align-items: center; gap: 8px; padding: 0 12px; color: var(--oc-text-muted); }
.oc-data-tabs > span.is-active { color: var(--oc-text); font-weight: 620; }
.oc-data-tabs > span.is-active::after { content: ""; position: absolute; inset: auto 0 -1px; height: 2px; background: var(--oc-accent); }
.oc-data-tabs b { color: var(--oc-text-muted); font-weight: 470; font-variant-numeric: tabular-nums; }
.oc-data-tools { display: grid; min-height: 70px; grid-template-columns: minmax(260px, 1fr) auto; align-items: center; gap: 18px; }
.oc-data-tool-actions { display: flex; align-items: center; gap: 8px; }
#toolbar { min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; }
#toolbar form { display: flex; align-items: center; gap: 8px; }
.oc-search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.oc-search-control { display: flex; width: min(100%, 520px); min-width: 220px; flex: 1; align-items: center; gap: 8px; padding-left: 12px; border-radius: var(--oc-radius-sm); background: var(--oc-surface); box-shadow: var(--oc-shadow-ring); }
.oc-search-control span { color: var(--oc-text-muted); font-size: 18px; }
#toolbar #searchbar { width: 100%; min-height: 42px; padding-left: 0; border: 0; background: transparent; box-shadow: none !important; }
#toolbar .oc-search-control button { min-width: 58px; min-height: 42px; padding-inline: 10px; border-radius: 0 8px 8px 0; background: transparent; box-shadow: none; color: var(--oc-text) !important; }
#toolbar .oc-search-control button:hover { background: var(--oc-surface-hover); }
.oc-result-count { padding: 0 6px; color: var(--oc-text-muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oc-filter-menu { position: relative; min-width: 108px; }
.oc-filter-menu > summary { display: flex; min-height: 42px; cursor: pointer; list-style: none; align-items: center; justify-content: center; gap: 7px; padding: 7px 12px; border-radius: var(--oc-radius-sm); box-shadow: var(--oc-shadow-ring); font-size: 12px; font-weight: 620; }
.oc-filter-menu > summary:hover { box-shadow: var(--oc-shadow-ring-hover); }
.oc-filter-menu > summary::-webkit-details-marker { display: none; }
.oc-filter-menu > summary > span:last-child { transition-property: transform; transition-duration: 140ms; }
.oc-filter-menu[open] > summary > span:last-child { transform: rotate(180deg); }
.oc-filter-indicator { width: 7px; height: 7px; overflow: hidden; border-radius: 50%; background: var(--oc-accent); color: transparent; }
.oc-filter-grid { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; display: grid; width: min(840px, calc(100vw - var(--oc-sidebar-width) - 64px)); max-height: min(640px, 72vh); grid-template-columns: repeat(3, minmax(180px, 1fr)); overflow: auto; border-radius: var(--oc-radius-lg); background: var(--oc-surface); box-shadow: var(--oc-shadow-ring-hover); }
.oc-filter-heading { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; }
.oc-filter-heading .oc-link { margin-left: auto; font-size: 11px; }
.oc-filter-section { min-width: 0; padding: 14px; border-top: 1px solid var(--oc-line); }
.oc-filter-section + .oc-filter-section { border-left: 1px solid var(--oc-line); }
.oc-filter-section h3 { margin: 0 0 7px !important; padding: 0 !important; font-size: 11px; font-weight: 650; }
.oc-filter-section ul { margin: 0 !important; padding: 0 !important; }
.oc-filter-section li { margin: 1px 0; list-style: none; }
.oc-filter-section li a { display: flex; min-height: 34px; align-items: center; padding: 5px 7px; border-radius: 7px; color: var(--oc-text-muted); font-size: 11px; }
.oc-filter-section li.selected a, .oc-filter-section li a:hover { background: var(--oc-active); color: var(--oc-accent); }
.oc-date-hierarchy { padding: 10px 0; border-bottom: 1px solid var(--oc-line); }
.object-tools { display: flex; align-items: center; gap: 8px; margin: 0 !important; padding: 0 !important; }
.object-tools li { display: flex; list-style: none; }
.object-tools a { min-height: 42px; justify-content: space-between; padding-inline: 14px; }
.object-tools a { text-transform: none; }
.change-form .object-tools { justify-content: flex-end; margin-top: -70px !important; margin-bottom: 34px !important; }
.change-form .object-tools a { background: var(--oc-surface) !important; box-shadow: var(--oc-shadow-ring); color: var(--oc-text) !important; }
.actions { display: flex; min-height: 56px; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 !important; padding: 8px 0 !important; border: 0; border-top: 1px solid var(--oc-line); border-bottom: 1px solid var(--oc-line); background: transparent; color: var(--oc-text-muted); }
.actions label { display: flex; align-items: center; gap: 9px; color: var(--oc-text-muted); font-size: 11px; }
.actions select { min-width: 230px; min-height: 36px; }
.actions button { min-height: 36px !important; }
body.oc-admin .actions button.button {
  background: var(--oc-surface) !important;
  box-shadow: var(--oc-shadow-ring);
  color: var(--oc-text) !important;
}
.actions .action-counter { margin-left: auto; color: var(--oc-text-muted); font-size: 11px; }
.oc-table-wrap,
#changelist-form .results { width: 100%; overflow-x: auto; }
.oc-table-wrap--flush { border-radius: 0; box-shadow: none; }
.oc-table,
#result_list,
.module table,
.inline-group table { width: 100%; border-collapse: collapse; border-spacing: 0; background: transparent; }
.oc-table th, .oc-table td,
#result_list th, #result_list td,
.module table th, .module table td,
.inline-group table th, .inline-group table td { height: 54px; padding: 8px 14px; border: 0; border-bottom: 1px solid var(--oc-line); color: var(--oc-text); font-size: 12px; vertical-align: middle; }
.oc-table th,
#result_list thead th,
.module table thead th,
.inline-group table thead th { position: sticky; top: 0; z-index: 1; height: 42px; background: #fff; color: var(--oc-text-muted); font-size: 10px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.oc-table th,
#result_list thead th,
.module table thead th,
.inline-group table thead th { letter-spacing: 0; text-transform: none; }
#result_list thead th a { color: inherit; }
#result_list thead th.sorted { color: var(--oc-text); border-bottom-color: var(--oc-accent); }
#result_list tbody tr,
.oc-table tbody tr { background: var(--oc-surface); transition-property: background-color; transition-duration: 110ms; }
#result_list tbody tr:hover,
.oc-table tbody tr:hover { background: var(--oc-surface-hover); }
#result_list tbody tr:last-child td,
#result_list tbody tr:last-child th,
.oc-table tbody tr:last-child td { border-bottom: 0; }
#result_list tbody a { color: var(--oc-text); font-weight: 600; }
#result_list tbody a:hover { color: var(--oc-accent); text-decoration: underline !important; text-underline-offset: 3px; }
#result_list .action-checkbox,
#result_list .action-checkbox-column { width: 48px; padding-inline: 14px; text-align: center; }
.oc-table td,
#result_list td { font-variant-numeric: tabular-nums; }
#result_list tbody select { min-height: 36px; padding-block: 5px; }
.changelist-footer { min-height: 48px; border-top: 1px solid var(--oc-line); }
.paginator { min-height: 48px; margin: 0 !important; padding: 7px 0 !important; border: 0; color: var(--oc-text-muted) !important; font-size: 11px; }
.paginator a,
.paginator .this-page { display: inline-grid; min-width: 34px; min-height: 34px; place-items: center; margin: 0 2px; border-radius: 7px; }
.paginator a:hover,
.paginator .this-page { background: var(--oc-active); color: var(--oc-accent); }

/* Standard detail, inline, chat and focused pages */
.inline-group { margin: 34px 0; padding: 0; overflow: visible; }
.inline-related { border: 0 !important; border-top: 1px solid var(--oc-line) !important; }
.inline-related h3 { min-height: 44px; margin: 0; padding: 11px 14px; background: transparent; color: var(--oc-text); }
.inline-deletelink { color: var(--oc-danger) !important; }
.add-row { padding: 12px 14px !important; border-top: 1px solid var(--oc-line); }
#change-history .module,
.delete-confirmation form > div,
.delete-confirmation #content > ul,
#content-related { padding: 0; }
.delete-confirmation ul { padding-left: 20px; }
.delete-confirmation .cancel-link { display: inline-flex; min-height: 40px; align-items: center; padding: 8px 14px; }
#content-related { float: none; width: auto; margin: 18px 0 0; }
.quiet, a.quiet { color: var(--oc-text-muted) !important; }
.nowrap { white-space: nowrap; }
.oc-code { overflow: auto; padding: 13px 0; color: var(--oc-text); font: 12px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; }
.oc-tabs { display: flex; gap: 20px; overflow-x: auto; border-bottom: 1px solid var(--oc-line); }
.oc-tabs a, .oc-tabs button { display: inline-flex; min-height: 40px; align-items: center; padding: 7px 10px; border: 0; background: transparent !important; box-shadow: none !important; color: var(--oc-text-muted) !important; font-weight: 600; white-space: nowrap; }
.oc-tabs .is-active, .oc-tabs [aria-selected="true"] { color: var(--oc-accent) !important; box-shadow: inset 0 -2px var(--oc-accent) !important; }
.oc-chat-messages { display: flex; min-height: 320px; max-height: 520px; flex-direction: column; gap: 10px; overflow-y: auto; padding: 18px 0; }
.oc-chat-bubble { max-width: min(82%, 720px); padding: 11px 13px; border-radius: 12px; background: var(--oc-surface-soft); }
.oc-chat-bubble--user { align-self: flex-end; background: var(--oc-info-bg); }
.oc-chat-bubble--agent { align-self: flex-start; }
.oc-chat-author { margin-bottom: 3px; color: var(--oc-text-muted); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.oc-chat-content { white-space: pre-wrap; overflow-wrap: anywhere; }
.oc-chat-form { padding: 16px 0; border-top: 1px solid var(--oc-line); }
.oc-chat-error { flex: 1; margin: 0; color: var(--oc-danger); }
.oc-model-catalog { max-height: 680px; }
.oc-model-catalog table { min-width: 1220px; }
.oc-model-catalog thead { position: sticky; top: 0; z-index: 2; }
.oc-model-catalog code { overflow-wrap: anywhere; white-space: normal; }

/* Login */
.login .oc-stage { margin-left: 0; }
.login .oc-main { min-height: 100vh; }
.login .oc-content { max-width: none; padding: 0; }
.oc-login-wrap { display: grid; min-height: 100vh; place-items: center; padding: 32px; background: var(--oc-sidebar); }
.oc-login-card { width: min(100%, 420px); padding: 34px; border-radius: 18px; background: var(--oc-surface); box-shadow: var(--oc-shadow-ring); }
.oc-login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 42px; }
.oc-login-brand > div { display: grid; }
.oc-login-brand strong { font-size: 18px; font-weight: 720; letter-spacing: -.045em; }
.oc-login-brand small { color: var(--oc-text-muted); font-size: 10px; }
.oc-login-copy h1 { margin: 0; font-size: 34px; font-weight: 650; letter-spacing: -.04em; }
.oc-login-copy p { margin: 10px 0 26px; color: var(--oc-text-muted); }
.oc-login-note { margin: 22px 0 0; color: var(--oc-text-soft); font-size: 10px; text-align: center; }

/* Dashboard charts and status strip */
.dashboard #content { max-width: 1760px; }
.oc-dashboard-heading { align-items: center; }
.oc-period-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.oc-period-date,
.oc-period-select { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--oc-radius-sm); background: #fff; box-shadow: var(--oc-shadow-ring); color: var(--oc-text); font-size: 12px; }
.oc-period-select select { min-height: 28px; padding: 0 26px 0 0; border: 0; background: transparent; box-shadow: none; }
.oc-dashboard-metrics { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: 24px; padding-bottom: 26px; border-bottom: 1px solid var(--oc-line); }
.oc-dashboard-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--oc-line); }
.oc-chart-panel { min-width: 0; padding: 28px 28px 24px 0; }
.oc-chart-panel + .oc-chart-panel { padding-right: 0; padding-left: 28px; border-left: 1px solid var(--oc-line); }
.oc-chart-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.oc-chart-header h2 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.02em; }
.oc-chart-value { font-size: 24px; font-weight: 590; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oc-chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 9px; color: var(--oc-text-muted); font-size: 10px; }
.oc-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.oc-chart-swatch { width: 9px; height: 9px; border-radius: 2px; background: var(--oc-chart-color); }
.oc-chart-bars { display: grid; min-width: 0; height: 224px; grid-template-columns: repeat(var(--oc-chart-columns), minmax(3px, 1fr)); align-items: end; gap: clamp(2px, .55vw, 7px); padding: 10px 0 26px; border-bottom: 1px solid var(--oc-line); }
.oc-chart-column { position: relative; display: flex; height: 100%; min-width: 0; align-items: flex-end; }
.oc-chart-stack { display: flex; width: 100%; height: 100%; flex-direction: column-reverse; justify-content: flex-start; }
.oc-chart-segment { width: 100%; min-height: 0; height: calc(var(--oc-chart-height) * 1%); background: var(--oc-chart-color); }
.oc-chart-column:hover .oc-chart-segment { filter: saturate(1.1); }
.oc-chart-label { position: absolute; top: calc(100% + 8px); left: 50%; color: var(--oc-text-soft); font-size: 9px; white-space: nowrap; translate: -50% 0; }
.oc-chart-empty { display: grid; height: 224px; place-items: center; border-bottom: 1px solid var(--oc-line); color: var(--oc-text-muted); font-size: 12px; }
.oc-status-strip { display: grid; grid-template-columns: 105px repeat(4, minmax(0, 1fr)); align-items: center; gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--oc-line); }
.oc-status-strip h2 { margin: 0; font-size: 17px; font-weight: 650; }
.oc-status-item { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 10px; }
.oc-status-icon { display: inline-grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: var(--oc-info-bg); color: var(--oc-accent); font-size: 18px; }
.oc-status-item.is-positive .oc-status-icon { background: var(--oc-positive-bg); color: var(--oc-positive); }
.oc-status-item.is-danger .oc-status-icon { background: var(--oc-danger-bg); color: var(--oc-danger); }
.oc-status-copy { display: grid; }
.oc-status-copy strong { font-size: 22px; font-weight: 590; line-height: 1; font-variant-numeric: tabular-nums; }
.oc-status-copy span { margin-top: 4px; color: var(--oc-text-muted); font-size: 10px; }
.oc-dashboard-section { padding: 24px 0 0; }
.oc-dashboard-section-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 10px; }
.oc-dashboard-section-header h2 { margin: 0; font-size: 17px; font-weight: 650; }
.oc-run-project { display: grid; gap: 2px; }
.oc-run-project small { color: var(--oc-text-muted); }

@media (max-width: 1180px) {
  .oc-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc-split { grid-template-columns: minmax(0, 1fr); }
  .oc-dashboard-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}