/* Bootstrap 5 theme and application-specific layouts. */
:root { --bs-primary: #3563e9; --bs-primary-rgb: 53,99,233; --bs-body-color: #26364b; --bs-body-bg: #f4f6fa; --bs-border-color: #e4e9f1; --bs-font-sans-serif: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif; }
[x-cloak] { display: none !important; }
body { font-size: .9rem; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }
button, input, select, textarea { font: inherit; }
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar { width: 232px; flex-shrink: 0; background: #14263d; color: #adbed2; padding: 0 16px 20px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
.brand { display: flex; gap: 12px; align-items: center; min-height: 80px; flex-shrink: 0; margin-bottom: 24px; color: #fff; padding: 0 10px; font-size: 1.15rem; font-weight: 700; letter-spacing: -.4px; }
.brand:hover { color: white; }
.brand small { display: block; font-size: .7rem; color: #93a6bf; letter-spacing: 1.4px; font-weight: 400; margin-top: 5px; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 42px; border-radius: 12px; background: #3563e9; color: white; font-size: 1.4rem; box-shadow: 0 6px 20px #0c1b3033; }
.nav-section { font-size: .68rem; letter-spacing: 2px; padding: 0 16px 12px; color: #7f93af; }
.app-nav { flex-direction: column; gap: 8px; }
.app-nav .nav-link { color: #b6c5d8; min-height: 46px; padding: 12px 16px; border-radius: 9px; font-weight: 500; display: flex; align-items: center; gap: 12px; }
.app-nav .nav-link:hover { background: #203650; color: #fff; }
.app-nav .nav-link.active { background: #3563e9; color: white; box-shadow: 0 4px 12px #0a1a3133; }
.nav-icon { font-size: 1.2rem; line-height: 1; width: 20px; text-align: center; }
.sidebar-footer { margin-top: auto; padding: 20px 10px 0; border-top: 1px solid #2b3c53; font-size: .68rem; }
.sidebar-footer small { display: block; color: #6f86a4; margin: 9px 0 0 13px; font-size: .62rem; }
.status-dot { display: inline-block; width: 6px; height: 6px; background: #68cbb0; border-radius: 50%; margin-right: 6px; }
.app-workspace { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.workspace-header { height: 80px; flex-shrink: 0; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; background: #ffffffd9; border-bottom: 1px solid #e5eaf1; }
.workspace-label { font-size: .78rem; color: #66768d; }
.workspace-chip { font-size: .62rem; letter-spacing: 1px; font-weight: 600; color: #6a7b95; border: 1px solid #dfe6f1; border-radius: 6px; padding: 5px 9px; }
.app-content { padding: 24px 32px; width: 100%; max-width: 1720px; margin: 0 auto; flex: 1; }
.workspace-footer { padding: 16px 32px; display: flex; justify-content: space-between; color: #8a99ae; font-size: .68rem; }
.page-heading { margin-bottom: 24px; }
.page-title { font-size: 1.65rem; font-weight: 700; letter-spacing: -.6px; margin: 0 0 8px !important; }
.page-description { color: #7a889d; font-size: .82rem; margin: 0; line-height: 1.7; }
h3, h4 { font-size: 1rem; margin-bottom: 0; letter-spacing: -.2px; }
p { margin-bottom: .5rem; }
.card { border: 1px solid #e5eaf2 !important; border-radius: 14px !important; box-shadow: 0 3px 14px #16305a04 !important; min-width: 0; overflow: visible; }
.card > .border-bottom { border-color: #edf0f5 !important; }
.metric-value { font-size: 2.2rem; line-height: 1.15; font-weight: 700; letter-spacing: -1px; margin: 10px 0 0; font-variant-numeric: tabular-nums; }
.app-grid { display: grid; gap: 16px; }
.columns-1 { grid-template-columns: minmax(0,1fr); }
.columns-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.btn { --bs-btn-font-size: .82rem; --bs-btn-border-radius: .5rem; font-weight: 500; min-height: 36px; white-space: nowrap; transition: background-color .15s, box-shadow .15s; }
.btn-primary { --bs-btn-bg: #3563e9; --bs-btn-border-color: #3563e9; --bs-btn-hover-bg: #2851cb; --bs-btn-hover-border-color: #2851cb; }
.btn-light { --bs-btn-bg: #f4f6fa; --bs-btn-border-color: #e7ecf3; color: #53647c; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg { vertical-align: middle; }
.btn:focus-visible, .nav-link:focus-visible { outline: 3px solid #91b3fc; outline-offset: 3px; }
.form-control, .form-select { background-color: #fff; font-size: .82rem; border-color: #dce3ed; min-height: 40px; border-radius: 8px; }
.form-control:focus, .form-select:focus { border-color: #86a7ff; box-shadow: 0 0 0 .2rem #3563e916; }
.form-label { font-size: .78rem; color: #586b84; }
.form-check-input { cursor: pointer; flex-shrink: 0; margin-top: 0; }
.form-check-input:checked { background-color: #3563e9; border-color: #3563e9; }
.table-responsive { border-radius: inherit; }
.table { --bs-table-bg: transparent; --bs-table-hover-bg: #f5f8ff; --bs-table-border-color: #edf1f6; font-size: .82rem; }
.table th { background: #f8fafd; color: #76869c !important; font-size: .7rem; font-weight: 600 !important; white-space: nowrap; padding-top: 14px; padding-bottom: 14px; }
.table td { padding-top: 16px; padding-bottom: 16px; }
.table tr:last-child td { border-bottom: 0; }
.table .btn { min-height: 30px; padding: .3rem .5rem; border: 0; background: transparent; }
.table .btn:hover { background: #e9eef8; }
.badge { font-weight: 500; font-size: .68rem; letter-spacing: .1px; }
.caption { font-size: .72rem; }
.text-body-secondary { color: #718198 !important; }
.text-warning, .text-warning-emphasis { color: #9b6b08 !important; }
.dialog-backdrop { inset: 0; padding: 20px; overflow-y: auto; }
.dialog-layer { z-index: 1050; }
.dialog-shade { background: #10213880; backdrop-filter: blur(3px); }
.dialog-backdrop > .card { max-height: calc(100dvh - 40px); overflow-y: auto; margin: auto; box-shadow: 0 24px 80px #07132940 !important; }
.dialog-height { max-height: 80vh; }
.dialog-backdrop h3 { margin-bottom: 18px; }
.push-dialog { max-width: 560px; }
.push-dialog-header { background: linear-gradient(145deg, var(--bs-primary-bg-subtle), #fff 72%); }
.push-dialog-icon { width: 44px; height: 44px; color: var(--bs-primary); background: #fff; box-shadow: 0 6px 20px #0d6efd1f; }
.push-progress { height: 6px; background: #dbe7f7; }
.push-progress .progress-bar { transition: width .35s ease; }
.push-step-list { position: relative; }
.push-step { position: relative; min-height: 58px; padding: 8px 10px; border-radius: 12px; }
.push-step.is-active { background: var(--bs-primary-bg-subtle); }
.push-step.is-error { background: var(--bs-danger-bg-subtle); }
.push-step-marker { position: relative; z-index: 1; width: 32px; height: 32px; border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); }
.push-step:not(:last-child) .push-step-marker::after { content: ''; position: absolute; top: 31px; left: 50%; width: 2px; height: 26px; transform: translateX(-50%); background: var(--bs-border-color); }
.push-step.is-done:not(:last-child) .push-step-marker::after { background: var(--bs-success); opacity: .35; }
.push-step-dot { width: 8px; height: 8px; opacity: .45; }
.push-message { border: 1px solid transparent; }
.push-message-running { color: var(--bs-primary-text-emphasis); background: var(--bs-primary-bg-subtle); border-color: var(--bs-primary-border-subtle); }
.push-message-success { color: var(--bs-success-text-emphasis); background: var(--bs-success-bg-subtle); border-color: var(--bs-success-border-subtle); }
.push-message-error { color: var(--bs-danger-text-emphasis); background: var(--bs-danger-bg-subtle); border-color: var(--bs-danger-border-subtle); }
.push-message-pulse { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.push-message-running .push-message-pulse { animation: pulse 1.4s ease-in-out infinite; }
.clash-workspace { max-width: 1380px; margin: 0 auto; }
.clash-overview-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; align-items: stretch; }
.clash-overview-grid .group-select { width: min(100%, 260px); }
.clash-rule-note { display: flex; align-items: flex-start; gap: 14px; padding: 15px 16px; border: 1px solid #e1e8f2; border-radius: 10px; background: #f8fafd; }
.clash-rule-number { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 11px; background: var(--bs-primary); color: #fff; font-size: 1.1rem; font-weight: 700; box-shadow: 0 6px 16px #3563e933; }
.clash-summary-card { min-height: 100%; }
.clash-panel > .border-bottom { background: #fafbfd; }
.clash-panel pre { margin: 0; min-height: 220px; border-radius: 10px !important; }
.toast-container { z-index: 1100; }
.toast { box-shadow: 0 8px 30px #182e5826; }
pre { background: #18283d !important; color: #b5d8cf !important; font-size: .75rem; line-height: 1.8; border: 1px solid #263d57; }
.preview-height { max-height: 600px; }
.text-prewrap { white-space: pre-wrap; }
.stack-spacing > * + * { margin-top: 12px; }
.limit-xs { max-width: 240px; }.limit-md { max-width: 460px; }.limit-lg { max-width: 540px; }.limit-2xl { max-width: 680px; }.limit-3xl { max-width: 820px; }.limit-4xl { max-width: 1100px; }.limit-180 { max-width: 180px; }.limit-200 { max-width: 200px; }
.field-icon { left: 12px; }.field-action { right: 8px; }.input-action-space { padding-right: 60px !important; }.input-icon-space { padding-left: 36px !important; }
.cursor-pointer { cursor: pointer; }.cursor-disabled { cursor: not-allowed; }.transition-soft { transition: all .2s; }
.switch-off { transform: translateX(2px); }.switch-on { transform: translateX(16px); }
.spin { animation: spin 1s linear infinite; }.pulse { animation: pulse 1.8s infinite; }.fade-in { animation: enter .25s ease-out; }
@keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 50% { opacity: .45; } } @keyframes enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.skip-link:focus { position: fixed; top: 8px; left: 8px; background: white; padding: 12px; z-index: 1200; }
::-webkit-scrollbar { width: 7px; height: 7px; } ::-webkit-scrollbar-thumb { background: #c3cedd; border-radius: 7px; }
@media (min-width: 768px) { .columns-md-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }.columns-md-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }.columns-md-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }.span-md-3 { grid-column: span 3; } }
@media (min-width: 1200px) { .columns-lg-5 { grid-template-columns: repeat(5,minmax(0,1fr)); } }
@media (max-width: 1199px) { .app-sidebar { width: 210px; }.app-content { padding: 24px; }.workspace-header { padding: 0 24px; } }
@media (max-width: 767px) {
 .app-shell { flex-direction: column; }.app-sidebar { position: static; width: 100%; height: auto; padding: 16px; }.brand { padding: 0 4px 16px; }.brand-mark { height: 32px; width: 32px; font-size: 1.1rem; }.brand small,.nav-section,.sidebar-footer { display: none; }
 .app-nav { flex-direction: row; gap: 6px; }.app-nav .nav-link { flex: 1; justify-content: center; padding: 9px 4px; font-size: .72rem; gap: 5px; }.nav-icon { font-size: 1rem; width: auto; }
 .workspace-header { height: 52px; padding: 0 16px; }.workspace-chip { font-size: .5rem; }.app-content { padding: 22px 16px; }.workspace-footer { padding: 16px; }.page-title { font-size: 1.4rem; }
 .app-content .d-flex:not(.flex-column):not(.dialog-backdrop) { flex-wrap: wrap; }
 .app-content .d-flex > .form-control { min-width: 0; flex-basis: 160px; }
 .dialog-backdrop { padding: 12px; }.dialog-backdrop > .card { max-height: calc(100dvh - 24px); padding: 20px !important; }.table { min-width: 620px; }.dialog-backdrop .table { min-width: 760px; }
 .page-heading { margin-bottom: 16px; }.metric-value { font-size: 1.9rem; }
 .clash-overview-grid { grid-template-columns: 1fr; }.clash-rule-note { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; } }
.w-unit-1_5 { width: 0.375rem; }
.h-unit-1_5 { height: 0.375rem; }
.w-unit-2 { width: 0.5rem; }
.h-unit-2 { height: 0.5rem; }
.w-unit-2_5 { width: 0.625rem; }
.h-unit-2_5 { height: 0.625rem; }
.w-unit-3 { width: 0.75rem; }
.h-unit-3 { height: 0.75rem; }
.w-unit-3_5 { width: 0.875rem; }
.h-unit-3_5 { height: 0.875rem; }
.w-unit-4 { width: 1.0rem; }
.h-unit-4 { height: 1.0rem; }
.w-unit-5 { width: 1.25rem; }
.h-unit-5 { height: 1.25rem; }
.w-unit-6 { width: 1.5rem; }
.h-unit-6 { height: 1.5rem; }
.w-unit-9 { width: 2.25rem; }
.h-unit-9 { height: 2.25rem; }
.w-unit-10 { width: 2.5rem; }
.h-unit-10 { height: 2.5rem; }

.subscription-switch { border: 0; padding: 0; min-height: 20px; cursor: pointer; vertical-align: middle; }
.subscription-switch:focus-visible { outline: 3px solid #91b3fc; outline-offset: 3px; }
.subscription-switch > span { flex-shrink: 0; }

/* Collapsible navigation: icon rail on desktop, hidden links on mobile. */
.sidebar-toggle { position: absolute; right: -14px; top: 26px; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; min-height: 28px; padding: 0; flex-shrink: 0; color: #667b95; border: 1px solid #dce4ef; border-radius: 9px; background: #fff; box-shadow: 0 2px 6px #14263d14; transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
.sidebar-toggle:hover, .sidebar-toggle:active { color: #3563e9 !important; background: #edf2ff !important; border-color: #b9caf4 !important; }
.sidebar-toggle::before { content: ""; position: absolute; inset: -7px; }
.sidebar-toggle:focus-visible { outline: 3px solid #91b3fc; outline-offset: 3px; }
.sidebar-chevron { transform-origin: center; }
html[data-sidebar-collapsed="true"] .sidebar-chevron { transform: rotate(180deg); }
@media (min-width: 768px) {
 html[data-sidebar-collapsed="true"] .app-sidebar { width: 76px; padding-left: 12px; padding-right: 12px; }
 html[data-sidebar-collapsed="true"] .brand { padding-left: 0; padding-right: 0; justify-content: center; }
 html[data-sidebar-collapsed="true"] .brand-label,
 html[data-sidebar-collapsed="true"] .nav-label,
 html[data-sidebar-collapsed="true"] .nav-section,
 html[data-sidebar-collapsed="true"] .sidebar-footer { display: none; }
 html[data-sidebar-collapsed="true"] .app-nav .nav-link { justify-content: center; padding: 12px 0; }
}
@media (max-width: 767px) {
 html[data-sidebar-collapsed="true"] .app-nav { display: none; }
 html[data-sidebar-collapsed="true"] .brand { padding-bottom: 0; }
 .app-sidebar { position: relative; }
 .sidebar-toggle { top: 15px; right: 16px; width: 34px; height: 34px; color: #adbed2; background: #203650; border-color: #354963; box-shadow: none; }
 .sidebar-chevron { transform: rotate(90deg); }
 html[data-sidebar-collapsed="true"] .sidebar-chevron { transform: rotate(-90deg); }
 .app-sidebar .brand { min-height: 32px; margin: 0 44px 0 0; }
}

.table td { white-space: nowrap; }
.candidate-quality-table { table-layout: fixed; min-width: 880px; }
.candidate-quality-table td { white-space: normal; overflow-wrap: anywhere; }
.candidate-quality-table .caption { line-height: 1.6; }
.table td.px-4, .table th.px-4 { padding-left: 16px !important; padding-right: 16px !important; }
.table .limit-xs { max-width: 210px; }
.form-check-input { border-color: #aebbd0 !important; }
.group-select { width: auto; min-width: 150px; max-width: 100%; }

/* Subscription workspace: one filter surface and contextual actions. */
.subs-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 24px; }
.subs-heading .page-title { font-size: 1.45rem; }
.subs-heading .page-description { margin: 0; }
.subs-main-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.subs-main-actions .btn { font-size: .8rem; padding: 8px 14px; }
.subs-main-actions .dropdown-menu { min-width: 190px; padding: 6px; border-radius: 10px; }
.subs-main-actions .dropdown-item { font-size: .82rem; padding: 9px 12px; border-radius: 6px; }
.subs-filter-panel { background: #fff; border: 1px solid #e4e9f1; border-radius: 12px; margin-bottom: 16px; }
.subs-search-row { display: grid; grid-template-columns: minmax(190px, 2fr) repeat(4, minmax(90px, 1fr)) minmax(145px, 1.35fr); gap: 8px; padding: 16px; }
.subs-search-row:has(#subscription-reason) { grid-template-columns: minmax(190px, 2fr) repeat(5, minmax(90px, 1fr)) minmax(145px, 1.35fr); }
.subs-search-row > * { min-width: 0; }
.subs-search-row .form-control, .subs-search-row .form-select, .subs-search-row .btn { font-size: .78rem; min-height: 38px; }
.subs-list-toolbar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; padding: 0 16px; border-top: 1px solid #eef1f6; }
.subs-status-tabs { display: flex; gap: 22px; overflow-x: auto; }
.subs-status-tabs a { white-space: nowrap; color: #7b899c; padding: 14px 0 12px; border-bottom: 2px solid transparent; font-size: .8rem; }
.subs-status-tabs a:hover { color: #3563e9; }
.subs-status-tabs a.active { color: #3563e9; border-bottom-color: #3563e9; font-weight: 600; }
.subs-task-strip, .subs-selection-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 12px; border-radius: 9px; background: #edf3ff; color: #35588b; font-size: .78rem; }
.subs-table { font-size: .78rem; }
.subs-table thead th { background: #f8fafc; color: #8190a3 !important; font-size: .71rem; }
.subs-table td, .subs-table th { padding: 12px 10px !important; }
.subs-table td.px-4, .subs-table th.px-4 { padding-left: 10px !important; padding-right: 10px !important; }
.subs-table .limit-xs { max-width: 172px; }
.subs-table .caption { font-size: .69rem; }
.subs-copy-link { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; padding: 3px 7px; border: 1px solid #dfe6f0; border-radius: 6px; background: #f8fafc; color: #718198; font: inherit; font-size: .66rem; line-height: 1; transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease; }
.subs-copy-link svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.subs-copy-link:hover { color: #3563e9; background: #edf3ff; border-color: #bfd0ff; }
.subs-copy-link:active { transform: translateY(1px); }
.subs-copy-link:focus-visible { outline: 2px solid rgba(53,99,233,.3); outline-offset: 2px; }
.subs-copy-link.is-copied { color: #08734c; background: #e3f5ed; border-color: #a9dfc8; }
.subs-copy-link.is-error { color: #b23b49; background: #fdecef; border-color: #efbcc3; }
.subs-table th:last-child, .subs-table td:last-child { position: sticky; right: 0; background: #fff; z-index: 1; box-shadow: -5px 0 8px -8px #14263d; min-width: 64px; }
.subs-table th:last-child { background: #f8fafc; }
.subs-tag { background: #f0f3f7; color: #62758d; font-weight: 500; border: 1px solid #e5eaf1; }
.subs-tag:hover { background: #e9efff; color: #3563e9; }
.subs-quality-score { font-size: .86rem; color: #26364b; }
.subs-quality-badge { display: inline-flex; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 6px; font-size: .69rem; font-weight: 500; }
.subs-quality-badge strong { font-size: .82rem; font-variant-numeric: tabular-nums; }
.quality-excellent { color: #08734c; background: #e3f5ed; }
.quality-good { color: #315ab5; background: #eaf0ff; }
.quality-fair { color: #906008; background: #fff3d6; }
.quality-poor { color: #b23b49; background: #fdecef; }
.quality-unrated { color: #7b899c; background: #f0f3f7; }
.quality-workspace .quality-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.quality-kpi { min-width: 0; padding: 17px 19px; border: 1px solid #e4e9f1; border-radius: 12px; background: #fff; box-shadow: 0 3px 14px #14263d08; }
.quality-kpi > span, .quality-kpi small { display: block; color: #728198; font-size: .76rem; }
.quality-kpi strong { display: block; margin: 7px 0 4px; color: #24364d; font-size: 1.5rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.quality-analysis-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.quality-analysis-card { min-width: 0; padding: 20px; }
.quality-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.quality-section-head h3 { margin: 0 0 3px; font-size: 1rem; font-weight: 650; }
.quality-section-head p { margin: 0; color: #728198; font-size: .75rem; }
.quality-day-list { display: grid; gap: 11px; }
.quality-day-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px 110px; gap: 10px; align-items: center; font-size: .76rem; }
.quality-day-row time, .quality-day-row small { color: #728198; }
.quality-day-row strong, .quality-bucket-row strong { font-variant-numeric: tabular-nums; text-align: right; }
.quality-day-track, .quality-bucket-track { height: 9px; border-radius: 99px; background: #edf1f6; overflow: hidden; }
.quality-day-track span, .quality-bucket-track span { display: block; height: 100%; border-radius: inherit; }
.quality-day-track .is-excellent, .quality-bucket-track .excellent { background: #20a879; }
.quality-day-track .is-good, .quality-bucket-track .good { background: #5684ed; }
.quality-day-track .is-fair, .quality-bucket-track .fair { background: #e7aa42; }
.quality-day-track .is-poor, .quality-bucket-track .poor { background: #d96770; }
.quality-bucket-track .unrated { background: #9aa8bb; }
.quality-bucket-row { display: grid; grid-template-columns: 98px minmax(0, 1fr) 26px; gap: 10px; align-items: center; margin-bottom: 13px; font-size: .76rem; }
.quality-attention-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.quality-attention-item { display: flex; justify-content: space-between; gap: 12px; min-width: 0; padding: 10px 12px; border: 1px solid #e9edf3; border-radius: 8px; color: #26364b; text-decoration: none; }
.quality-attention-item:hover { border-color: #b7c8ee; background: #f8faff; }
.quality-attention-item > span { min-width: 0; }
.quality-attention-item strong, .quality-attention-item small, .quality-attention-item b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.quality-attention-item strong, .quality-attention-item b { font-size: .78rem; }
.quality-attention-item b { color: #b45c38; font-weight: 600; }
.quality-attention-item b, .quality-attention-item .attention-detail { white-space: normal; overflow-wrap: anywhere; }
.quality-attention-item small { color: #8090a3; font-size: .69rem; }
.quality-failure-chip { display: inline-flex; align-items: center; gap: 12px; padding: 8px 11px; border: 1px solid #eadbd7; border-radius: 8px; background: #fff9f7; color: #7c5047; font-size: .77rem; }
.quality-failure-chip strong { color: #a94335; font-variant-numeric: tabular-nums; }
.quality-failure-cell { max-width: 330px; white-space: normal !important; }
.quality-failure-cell small { display: block; color: #8390a3; font-size: .69rem; }
@media (max-width: 991px) { .quality-workspace .quality-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .quality-analysis-grid { grid-template-columns: 1fr; } }
@media (max-width: 575px) { .quality-workspace .quality-kpis, .quality-attention-grid { grid-template-columns: 1fr; } .quality-day-row { grid-template-columns: 38px minmax(0, 1fr) 30px; } .quality-day-row small { grid-column: 2 / -1; } }
.subs-row-actions summary { cursor: pointer; color: #637c9c; font-size: .73rem; list-style: none; }
.subs-row-actions summary::after { content: '⌄'; margin-left: 5px; }
.subs-row-actions > div { display: grid; gap: 4px; margin-top: 8px; }
.subs-row-actions .btn { font-size: .7rem; }
@media (max-width: 1199px) {
 .subs-search-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
 .subs-search-row:has(#subscription-reason) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
 .subs-search { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
 .subs-heading { align-items: flex-start; flex-direction: column; gap: 16px; }
 .subs-main-actions { width: 100%; }
 .subs-main-actions > .btn { flex: 1; }
 .subs-search-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
 .subs-search-row:has(#subscription-reason) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .subs-list-toolbar { padding: 0 12px 10px; gap: 8px; }
 .subs-status-tabs { width: 100%; justify-content: space-between; gap: 12px; }
 .subs-list-toolbar > .d-flex { width: 100%; justify-content: flex-end; }
 .subscriptions-workspace .subs-table .d-flex.flex-wrap { flex-wrap: wrap !important; }
}

@media (max-width: 767px) {
 .app-nav .nav-link { white-space: nowrap; font-size: .7rem; }
 .app-nav .nav-icon { display: none; }
 .app-content .table .d-flex { flex-wrap: nowrap !important; }
 .page-actions { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
 .filter-tabs { overflow-x: auto; flex-wrap: nowrap !important; padding-bottom: 4px; }
}
.auto-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:24px; }
.auto-overview { display:grid; grid-template-columns:1fr 1fr 1fr 2fr; border:1px solid #e2e8f0; border-radius:16px; background:#fff; margin-bottom:24px; padding:20px 0; }
.auto-overview > div { display:flex; flex-direction:column; justify-content:center; gap:8px; padding:0 24px; border-right:1px solid #edf1f5; }
.auto-overview > div:last-child { border:0; }
.auto-overview span { color:#748094; font-size:.75rem; }
.auto-overview strong { font-size:1.5rem; line-height:1.2; }
.auto-server a { font-size:.85rem; text-decoration:none; overflow-wrap:anywhere; }
.auto-tabs { display:flex; gap:28px; border-bottom:1px solid #dfe6ee; margin-bottom:20px; }
.auto-tabs button { border:0; border-bottom:2px solid transparent; padding:0 0 13px; color:#748094; background:transparent; font-weight:600; font-size:.9rem; }
.auto-tabs button.active { border-color:#2563eb; color:#2454a4; }
.auto-tabs button span { font-size:.7rem; margin-left:6px; background:#edf1f5; border-radius:5px; padding:2px 6px; }
.auto-task-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.auto-task-card { border:1px solid #e1e7ee; border-radius:14px; padding:22px; background:#fff; display:flex; flex-direction:column; }
.auto-schedule { color:#748094; font-size:.78rem; margin:12px 0 16px; overflow-wrap:anywhere; }
.auto-rule-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:20px; }
.auto-rule-chips span { background:#f3f6f9; color:#506079; border-radius:5px; padding:4px 7px; font-size:.7rem; }
.auto-next { margin-top:auto; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; font-size:.75rem; padding:15px 0; border-top:1px solid #edf1f5; }
.auto-next span { color:#748094; }.auto-next strong { font-weight:500; }
.auto-task-actions { display:flex; gap:8px; align-items:center; }
.auto-empty { padding:40px 20px; text-align:center; border:1px dashed #dbe3ec; background:#f9fbfd; border-radius:14px; }
.auto-help { font-size:.75rem; color:#748094; margin-top:22px; line-height:1.8; }.auto-help p { margin:12px 0 0; }
.auto-running { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:16px 20px; background:#eef5ff; border:1px solid #d7e6fc; border-radius:12px; margin-bottom:24px; }
.auto-history { background:#fff; border:1px solid #e1e7ee; border-radius:14px; padding:0 22px; }
.auto-history .auto-empty { margin:22px 0; }.auto-run-row { padding:20px 0; border-bottom:1px solid #edf1f5; }.auto-run-row:last-child { border:0; }
.auto-log { background:#f6f8fb; padding:14px; margin-top:12px; border-radius:8px; line-height:1.9; max-height:320px; overflow:auto; overflow-wrap:anywhere; }
.auto-dialog { display:flex; align-items:center; justify-content:center; padding:24px; }
.auto-editor { width:100%; max-width:760px; max-height:calc(100dvh - 48px); display:flex; flex-direction:column; background:white; border-radius:18px; box-shadow:0 24px 80px #14263d33; overflow:hidden; }
.auto-editor > header, .auto-editor > footer { display:flex; flex-shrink:0; align-items:center; justify-content:space-between; gap:20px; padding:22px 28px; }
.auto-editor > header { border-bottom:1px solid #e7edf3; }.auto-editor > footer { border-top:1px solid #e7edf3; background:#fafbfd; font-size:.8rem; }
.auto-editor-body { padding:24px 28px; overflow-y:auto; min-height:0; }
.auto-form-section { padding:22px 0 4px; border-top:1px solid #e7edf3; margin-top:8px; }
.auto-form-section h3 { font-size:.75rem; color:#91a1b4; display:flex; align-items:center; gap:10px; margin-bottom:20px; }.auto-form-section h3 span { font-size:.9rem; color:#253a54; font-weight:600; }
.auto-editor .form-label, .auto-editor .form-check { font-size:.82rem; }.auto-editor .form-text { font-size:.73rem; line-height:1.7; }
.auto-preview { max-width:560px; }.auto-preview-item { display:flex; justify-content:space-between; gap:18px; padding:14px 0; border-bottom:1px solid #edf1f5; }
.runtime-strategy-flow,.runtime-region-flow { display:flex; gap:.65rem; align-items:center; overflow-x:auto; padding-bottom:.25rem; }
.runtime-strategy-step { min-width:150px; display:flex; gap:.7rem; align-items:center; padding:.75rem; border:1px solid var(--bs-border-color); border-radius:.65rem; background:var(--bs-tertiary-bg); }
.runtime-strategy-step > span { display:grid; place-items:center; width:26px; height:26px; flex:0 0 26px; border-radius:50%; background:#dce4f5; color:#315ab5; font-weight:700; }
.runtime-strategy-step strong,.runtime-strategy-step small,.runtime-region-node small { display:block; }
.runtime-strategy-step small,.runtime-region-node small { color:var(--bs-secondary-color); font-size:.7rem; }
.runtime-strategy-step.is-active { border-color:#9eb5ee; background:#f0f4ff; }
.runtime-strategy-arrow { color:#8190a5; font-size:1.2rem; }
.runtime-region-node { min-width:92px; padding:.65rem .85rem; border-radius:.6rem; border:1px solid var(--bs-border-color); }
.runtime-region-node.is-up { border-color:#86cfb1; background:#edf9f3; }
.runtime-region-node.is-down { border-color:#e6a5ad; background:#fff0f1; }
.runtime-provider-meter { display:grid; grid-template-columns:minmax(70px,1fr) 46px; gap:.5rem; align-items:center; min-width:135px; }
.runtime-provider-meter .progress { height:7px; }
@media(min-width:1600px) { .auto-task-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:767px) {
 .auto-heading { align-items:flex-start; }.auto-heading > button { white-space:nowrap; }
 .auto-overview { grid-template-columns:1fr 1fr; gap:20px 0; }.auto-overview > div { padding:0 16px; }.auto-overview > div:nth-child(2) { border:0; }
 .auto-task-grid { grid-template-columns:1fr; }.auto-task-card { padding:18px; }
 .auto-dialog { padding:10px; }.auto-editor { max-height:calc(100dvh - 20px); border-radius:12px; }
 .auto-editor > header,.auto-editor > footer,.auto-editor-body { padding:18px; }.auto-editor > footer { gap:10px; flex-wrap:wrap; }
 .auto-preview-item { flex-direction:column; gap:6px; }
}
.policy-overview { grid-template-columns:repeat(3,minmax(0,1fr)); }
.automations-workspace .auto-heading { flex-wrap:wrap; }
@media(max-width:600px) { .policy-overview { grid-template-columns:1fr; }.policy-overview > div { border:0; } }
.header-actions { display:flex; align-items:center; gap:16px; flex-shrink:0; }
.header-shortcut { width:36px; height:36px; display:grid; place-items:center; border-radius:10px; color:#66768d; text-decoration:none; }
.header-shortcut:hover { color:#315ce7; background:#eef3ff; }
.header-divider { width:1px; height:26px; background:#e5eaf1; }
.profile-trigger { display:flex; align-items:center; gap:10px; padding:6px 8px; border:0; border-radius:12px; background:transparent; color:#52637a; text-align:left; }
.profile-trigger:hover, .profile-trigger[aria-expanded="true"] { background:#f0f4fa; }
.profile-avatar { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; border-radius:12px; background:#eaf0ff; color:#365fce; font-weight:700; font-size:15px; }
.profile-trigger-copy { display:grid; gap:1px; }
.profile-trigger-copy strong { max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; color:#24364f; font-weight:600; }
.profile-trigger-copy small { font-size:10px; color:#7a899b; }
.profile-menu { width:260px; max-width:calc(100vw - 32px); padding:8px; margin-top:10px !important; border:1px solid #e5eaf1; border-radius:14px; box-shadow:0 12px 40px #192b451a; }
.profile-menu-heading { padding:8px 12px; display:grid; gap:4px; overflow-wrap:anywhere; }
.profile-menu-heading strong { font-size:14px; color:#24364f; }
.profile-menu-heading span { font-size:12px; color:#7a899b; }
.profile-menu .dropdown-item { padding:10px 12px; border-radius:7px; font-size:13px; }
.profile-menu .dropdown-item span { display:block; font-size:11px; color:#8793a5; margin-top:2px; }
.profile-menu .dropdown-divider { border-color:#e5eaf1; margin:5px 4px; }
.account-workspace { max-width:920px; margin:0 auto; }
.profile-avatar-large { width:52px; height:52px; font-size:22px; border-radius:16px; }
.account-security-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:start; }
.account-workspace section, #security { scroll-margin-top:24px; }
@media (max-width:767px) { .profile-trigger-copy,.header-divider { display:none; } .header-actions { gap:4px; } .profile-trigger { gap:6px; padding:3px; } .profile-avatar { width:32px; height:32px; border-radius:10px; } .account-security-grid { grid-template-columns:1fr; gap:16px; } }

.account-workspace .card, .profile-menu { background:#fff; }

.harvest-layout { display:grid; grid-template-columns:245px minmax(0,1fr); gap:24px; align-items:start; }
.harvest-workspace { max-width:1440px; margin:0 auto; }
.harvest-learning-overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.harvest-learning-tile { min-width:0; padding:16px 18px; border:1px solid #e5eaf1; border-radius:12px; background:#f7f9fc; }
.harvest-learning-tile span,.harvest-learning-tile strong,.harvest-learning-tile small { display:block; }
.harvest-learning-tile span { color:#78879c; font-size:12px; }
.harvest-learning-tile strong { margin-top:4px; font-size:1.05rem; }
.harvest-learning-tile small { margin-top:4px; color:#66758a; line-height:1.4; }
.harvest-toolbar { box-shadow:var(--bs-box-shadow-sm) !important; }
.harvest-toolbar-item { min-height:34px; padding:4px 2px; }
.harvest-history { max-height:760px; overflow:auto; }
.harvest-task { width:100%; text-align:left; border:0; border-radius:10px; background:transparent; padding:14px 12px; color:#43546d; margin-bottom:4px; }
.harvest-task.active { background:#edf2ff; color:#315dd1; }
.harvest-task:hover { background:#f1f4f9; }
.harvest-stage-flow { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.harvest-stage { position:relative; display:flex; align-items:center; gap:8px; min-width:0; color:#8793a5; }
.harvest-stage::after { content:""; height:2px; flex:1; background:#e4e9f1; }
.harvest-stage:last-child::after { display:none; }
.harvest-stage span { display:grid; place-items:center; width:24px; height:24px; flex:0 0 24px; border-radius:50%; background:#edf0f4; font-size:11px; font-weight:700; }
.harvest-stage small { white-space:nowrap; font-size:11px; }
.harvest-stage.is-complete { color:#2b63ce; }
.harvest-stage.is-complete span { color:#fff; background:#3972da; }
.harvest-stage.is-complete::after { background:#92afe9; }
.harvest-metrics { display:grid; grid-template-columns:repeat(7,1fr); gap:10px; }
.harvest-metrics div { padding:12px; background:#f7f9fc; border-radius:10px; }
.harvest-metrics span { display:block; color:#78879c; font-size:12px; }
.harvest-metrics strong { display:block; font-size:24px; margin-top:4px; }
.harvest-log { max-height:220px; overflow:auto; white-space:pre-wrap; font-size:12px; color:#607086; }
.harvest-confidence { display:grid; grid-template-columns:minmax(120px,240px) 1fr; gap:10px; align-items:center; }
.harvest-confidence .progress { height:7px; }
.harvest-decision-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.harvest-decision-summary > div { padding:12px 14px; border-radius:10px; background:var(--bs-tertiary-bg); }
.harvest-decision-summary small,.harvest-decision-summary strong { display:block; }
.harvest-decision-summary small { color:var(--bs-secondary-color); }
.harvest-decision-summary strong { margin-top:3px; font-size:1.25rem; }
.harvest-source-profile { padding:12px 14px; border:1px solid var(--bs-border-color); border-radius:10px; }
.harvest-source-profile summary { cursor:pointer; font-size:.82rem; font-weight:600; }
.harvest-result-card { margin-top:10px; padding:16px 18px; border:1px solid #e8edf3; border-radius:12px; background:#fbfcfe; transition:border-color .15s ease,box-shadow .15s ease; }
.harvest-result-card:hover { border-color:#cbd8ed; box-shadow:0 6px 18px #2748750c; }
.harvest-result-provenance { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:10px; padding-top:9px; border-top:1px solid #e8edf3; color:#66758a; font-size:11px; }
.harvest-provenance-query { min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.harvest-result { padding:16px 0; border-top:1px solid #e7ecf3; }
.harvest-result summary { display:flex; justify-content:space-between; align-items:center; gap:16px; cursor:pointer; font-size:13px; }
.harvest-node-name { max-width:230px; overflow-wrap:anywhere; }
.harvest-history-board { overflow:hidden; border-radius:14px; }
.harvest-history-topbar { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 28px; border-bottom:1px solid #edf1f5; }
.harvest-history-filters { display:grid; grid-template-columns:minmax(180px,260px) 150px; gap:10px; }
.harvest-history-cards { padding:12px 28px 24px; }
.harvest-history-card { padding:20px 0; border-bottom:1px solid #edf1f5; }
.harvest-history-card:last-child { border-bottom:0; }
.harvest-history-card-main { display:grid; grid-template-columns:minmax(210px,1.25fr) minmax(300px,1.5fr) minmax(245px,1fr); align-items:center; gap:24px; }
.harvest-history-identity { display:flex; align-items:center; gap:14px; min-width:0; }
.harvest-history-card-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.harvest-history-card-stats div { padding-left:18px; border-left:1px solid #e5eaf1; }
.harvest-history-card-stats span,.harvest-history-card-stats strong { display:block; }
.harvest-history-card-stats span { color:#8490a2; font-size:11px; }
.harvest-history-card-stats strong { margin-top:2px; font-size:1rem; }
.harvest-history-actions { display:flex; justify-content:flex-end; align-items:center; gap:16px; white-space:nowrap; }
.harvest-history-card>.progress { height:3px; margin-top:14px; }
.harvest-history-pagination { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:18px; border-top:1px solid #edf1f5; }
.harvest-history-dialog { width:820px; }
.harvest-history-detail-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:22px 24px; border-bottom:1px solid #edf1f5; }
.harvest-history-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:20px 24px; }
.harvest-history-kpis div { padding:14px 16px; border-radius:10px; background:#f7f9fc; }
.harvest-history-kpis span,.harvest-history-kpis strong { display:block; }
.harvest-history-kpis span { color:#78879c; font-size:12px; }
.harvest-history-kpis strong { margin-top:3px; font-size:1.35rem; }
.harvest-history-notes { display:flex; align-items:center; flex-wrap:wrap; gap:8px 18px; margin:0 24px 20px; padding:12px 14px; border-radius:10px; background:#fff8e8; color:#80642a; font-size:12px; }
.harvest-history-log { margin:0 24px 24px; padding:14px 16px; border:1px solid #e5eaf1; border-radius:10px; }
.harvest-history-log summary { cursor:pointer; font-size:13px; font-weight:600; color:#526278; }
.harvest-modal { position:fixed; inset:0; z-index:1060; background:#14263d66; display:flex; align-items:center; justify-content:center; padding:24px; }
.harvest-dialog { display:flex; flex-direction:column; background:#fff; border-radius:16px; width:780px; max-width:100%; max-height:90vh; box-shadow:0 20px 80px #14263d33; }
@media(max-width:991px){.harvest-layout{grid-template-columns:1fr}.harvest-history{max-height:235px}.harvest-metrics{grid-template-columns:repeat(4,1fr)}.harvest-history-card-main{grid-template-columns:1fr auto;gap:18px}.harvest-history-card-stats{grid-column:1/-1;grid-row:2}.harvest-history-actions{grid-column:2;grid-row:1}}
@media(max-width:575px){.harvest-learning-overview{grid-template-columns:1fr}.harvest-stage-flow{overflow-x:auto;grid-template-columns:repeat(5,115px)}.harvest-metrics,.harvest-decision-summary,.harvest-history-kpis{grid-template-columns:repeat(2,1fr)}.harvest-confidence{grid-template-columns:1fr}.harvest-modal{padding:10px}.harvest-dialog{max-height:95vh}.harvest-result summary{align-items:start}.harvest-history-topbar{display:block;padding:20px}.harvest-history-filters{grid-template-columns:1fr;margin-top:16px}.harvest-history-cards{padding:6px 20px 20px}.harvest-history-card-main{display:block}.harvest-history-card-stats{margin:18px 0}.harvest-history-actions{justify-content:space-between;flex-wrap:wrap}.harvest-history-detail-head{padding:18px}.harvest-history-kpis{padding:16px}.harvest-history-notes,.harvest-history-log{margin-left:16px;margin-right:16px}}
.health-calendar {
  display: grid;
  grid-template-columns: repeat(15, minmax(18px, 1fr));
  gap: .35rem;
}
.health-day, .health-swatch {
  min-height: 28px;
  border-radius: .35rem;
  border: 1px solid transparent;
}
.health-day { display: grid; place-items: center; font-size: .65rem; color: var(--bs-secondary-color); }
.health-swatch { display: inline-block; width: 18px; min-height: 18px; }
.health-empty { background: var(--bs-tertiary-bg); }
.health-poor { background: #f4a6ad; }
.health-fair { background: #f4d27a; }
.health-good { background: #8fc5f4; }
.health-excellent { background: #7fd3ad; }
.health-failed { border-color: var(--bs-danger); box-shadow: inset 0 0 0 1px var(--bs-danger); }
@media (max-width: 767.98px) { .health-calendar { grid-template-columns: repeat(10, minmax(18px, 1fr)); } }
.monitor-period { width: 130px; }
.runtime-timeline { display: flex; align-items: stretch; gap: 2px; min-height: 44px; overflow-x: auto; }
.runtime-event-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; margin-top: .45rem; }
.runtime-correlation { max-height: 420px; overflow-y: auto; }
.runtime-log-list { max-height: 280px; overflow-y: auto; border: 1px solid var(--bs-border-color); border-radius: .5rem; }
.runtime-log-entry { padding: .65rem .75rem; border-bottom: 1px solid var(--bs-border-color); }
.runtime-log-entry:last-child { border-bottom: 0; }
.runtime-log-entry code { display: block; margin-top: .35rem; color: var(--bs-body-color); white-space: pre-wrap; overflow-wrap: anywhere; font-size: .72rem; }
.runtime-selected-node { max-width: 220px; }
.runtime-tick { flex: 1 0 5px; min-width: 5px; border-radius: 3px; background: var(--bs-tertiary-bg); }
.runtime-healthy { background: #45b887; }
.runtime-warning { background: #e3ad3e; }
.runtime-critical { background: #dc5964; }
.runtime-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }
.relationship-graph {
  display: block;
  min-height: 400px;
  background: color-mix(in srgb, var(--bs-secondary-bg) 45%, transparent);
  border-radius: var(--bs-border-radius-lg);
}

@media (max-width: 575.98px) {
  .relationship-graph { min-height: 340px; }
}
.heatmap-wrap { overflow-x: auto; }
.heatmap-grid { display: grid; gap: 2px; align-items: center; }
.heatmap-label { font-size: .72rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }
.heatmap-cell { width: 26px; height: 26px; border-radius: 3px; transition: opacity .12s; }
.heatmap-cell:hover { opacity: .72; cursor: default; }
.heatmap-header { font-size: .62rem; text-align: center; color: var(--bs-secondary-color); padding-bottom: 2px; }
.heatmap-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: middle; flex-shrink: 0; }
/* Runtime monitor: consistent hierarchy and responsive business workspace. */
.runtime-workspace .auto-heading { align-items:center; gap:16px; }
.runtime-workspace .auto-overview { grid-template-columns:repeat(5,minmax(0,1fr)); padding:0; overflow:hidden; }
.runtime-workspace .auto-overview > div { padding:18px; border-bottom:1px solid #edf1f5; justify-content:flex-start; min-width:0; gap:6px; }
.runtime-workspace .auto-overview > div:nth-child(5n) { border-right:0; }
.runtime-workspace .auto-overview strong { font-size:1.2rem; }
.runtime-workspace .auto-overview small { overflow-wrap:anywhere; }
.runtime-workspace .runtime-tabs { position:sticky; top:0; z-index:20; background:var(--bs-body-bg); padding-top:12px; gap:24px; overflow-x:auto; }
.runtime-workspace .runtime-tabs button { white-space:nowrap; }
.runtime-business-nav { display:flex; gap:8px; padding:12px; margin-bottom:20px; background:var(--bs-tertiary-bg); border-radius:12px; }
.runtime-business-nav button { border:0; padding:10px 18px; border-radius:8px; background:transparent; color:var(--bs-secondary-color); font-weight:600; }
.runtime-business-nav button.active { background:var(--bs-body-bg); color:var(--bs-primary); box-shadow:0 1px 4px #00000012; }
.runtime-node-details { padding:12px; background:var(--bs-tertiary-bg); border-radius:8px; }
.runtime-node-details summary { cursor:pointer; }
.runtime-settings-backdrop { position:fixed; inset:0; z-index:1060; background:#0006; display:flex; align-items:center; justify-content:center; padding:24px; }
.runtime-settings-dialog { width:min(1100px,100%); max-height:90vh; overflow-y:auto; }
.runtime-settings-dialog form > .mt-3:last-child { position:sticky; bottom:-24px; background:var(--bs-body-bg); padding:16px 0; border-top:1px solid var(--bs-border-color); }
@media (max-width:1199px) { .runtime-workspace .auto-overview { grid-template-columns:repeat(3,minmax(0,1fr)); } .runtime-workspace .auto-overview > div:nth-child(5n) { border-right:1px solid #edf1f5; } .runtime-workspace .auto-overview > div:nth-child(3n) { border-right:0; } }
@media (max-width:767px) { .runtime-workspace .auto-overview { grid-template-columns:repeat(2,minmax(0,1fr)); } .runtime-workspace .auto-overview > div { padding:14px; } .runtime-workspace .auto-overview > div:nth-child(3n) { border-right:1px solid #edf1f5; } .runtime-workspace .auto-overview > div:nth-child(2n) { border-right:0; } .runtime-workspace .auto-heading { flex-wrap:wrap; } .runtime-workspace .runtime-tabs { gap:18px; } .runtime-business-nav { overflow-x:auto; } .runtime-business-nav button { white-space:nowrap; padding:8px 12px; } .runtime-settings-backdrop { padding:10px; } .runtime-settings-dialog { max-height:95vh; } }
.runtime-live-panel {
  background: linear-gradient(135deg, rgba(76, 110, 245, .05), transparent 60%);
  overflow: hidden;
}
.runtime-signal-card {
  --signal-color: #64748b;
  position: relative;
  isolation: isolate;
  background: var(--bs-body-bg);
  border-color: color-mix(in srgb, var(--signal-color) 30%, var(--bs-border-color)) !important;
  transition: border-color .5s ease, box-shadow .5s ease, transform .25s ease;
}
.runtime-signal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--signal-color) 12%, transparent);
}
.runtime-signal-card.signal-active { --signal-color: #14b8a6; }
.runtime-signal-card.signal-warning { --signal-color: #d97706; }
.runtime-signal-card.signal-observing { --signal-color: #6366f1; }
.runtime-signal-visual {
  position: relative;
  height: 40px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--signal-color);
}
.signal-core {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 16px currentColor;
  margin: 0 20px 0 15px;
}
.signal-orbit {
  position: absolute;
  left: 0;
  width: 39px;
  height: 39px;
  border: 1px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: .5;
  animation: runtime-orbit 6s linear infinite;
}
.signal-wave {
  width: 4px;
  height: 12px;
  background: currentColor;
  border-radius: 3px;
  opacity: .55;
}
.signal-active .signal-wave { animation: runtime-wave 1.8s ease-in-out infinite; }
.signal-wave:nth-last-child(2) { animation-delay: .25s; }
.signal-wave:last-child { animation-delay: .5s; }
.runtime-flow-track {
  position: relative;
  height: 3px;
  margin: 16px 0;
  overflow: hidden;
  border-radius: 4px;
  background: color-mix(in srgb, var(--signal-color) 12%, transparent);
}
.runtime-flow-track span {
  position: absolute;
  width: 24%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--signal-color), transparent);
  opacity: 0;
}
.signal-active .runtime-flow-track span { animation: runtime-flow 3s linear infinite; }
.runtime-flow-track span:nth-child(2) { animation-delay: 1s; }
.runtime-flow-track span:nth-child(3) { animation-delay: 2s; }
.signal-stale .signal-orbit { animation: none; opacity: .2; }
.signal-stale .signal-core { box-shadow: none; opacity: .4; }
@keyframes runtime-orbit { to { transform: rotate(360deg); } }
@keyframes runtime-wave { 50% { transform: scaleY(1.8); opacity: .9; } }
@keyframes runtime-flow { from { transform: translateX(-110%); opacity: .6; } to { transform: translateX(520%); opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
  .runtime-signal-card, .runtime-signal-card:hover { transition: none; transform: none; }
  .runtime-signal-card .signal-orbit, .runtime-signal-card .signal-wave,
  .runtime-signal-card .runtime-flow-track span { animation: none; }
}
.runtime-data-engine {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 16px 0;
  padding: 16px;
  border-radius: 14px;
  background: radial-gradient(ellipse at 20% 0%, #173c53, transparent 75%), #0e1c30;
  color: #d3e5f6;
  border: 1px solid #29445e;
  box-shadow: inset 0 1px 0 #ffffff10;
}
.engine-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .18;
  background-image: linear-gradient(#6c9ab533 1px, transparent 1px), linear-gradient(90deg, #6c9ab533 1px, transparent 1px);
  background-size: 24px 24px;
}
.engine-heading, .engine-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: .65rem; color: #95abc2; }
.engine-heading { margin-bottom: 18px; }
.engine-heading > :first-child { letter-spacing: 2px; color: #a1e6ec; font-weight: 600; }
.engine-footer { border-top: 1px solid #29445e; padding-top: 12px; margin-top: 16px; }
.engine-lane { --lane-color: #7d91aa; display: grid; grid-template-columns: 82px minmax(40px, 1fr) 100px; gap: 12px; align-items: center; min-height: 44px; font-size: .73rem; }
.lane-flow { --lane-color: #3ce1c5; }
.lane-verify { --lane-color: #95a5ff; }
.lane-blocked { --lane-color: #ffbf69; }
.engine-terminal { display: flex; align-items: center; gap: 8px; }
.terminal-light { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--lane-color); }
.lane-flow .terminal-light, .lane-verify .terminal-light { box-shadow: 0 0 12px var(--lane-color); }
.engine-output { text-align: right; font-variant-numeric: tabular-nums; color: var(--lane-color); }
.engine-channel { position: relative; height: 28px; overflow: hidden; }
.channel-line { position: absolute; inset: 13px 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--lane-color), transparent); opacity: .35; }
.channel-packet { position: absolute; top: 10px; left: -14%; width: 12%; height: 7px; border-radius: 8px; background: linear-gradient(90deg, transparent, var(--lane-color)); opacity: 0; }
.lane-flow .channel-packet { animation: engine-packet var(--packet-duration, 3s) linear infinite; }
.lane-verify .channel-packet { animation: engine-packet 4.5s ease-in-out infinite; }
.channel-packet:nth-of-type(3) { animation-delay: -.7s; }
.channel-packet:nth-of-type(4) { animation-delay: -1.4s; }
.channel-packet:nth-of-type(5) { animation-delay: -2.1s; }
.channel-gate { position: absolute; left: 60%; top: 6px; width: 3px; height: 17px; border-radius: 3px; background: var(--lane-color); opacity: 0; }
.lane-blocked .channel-gate { opacity: .8; }
.lane-blocked .channel-line { background: repeating-linear-gradient(90deg, var(--lane-color) 0 5px, transparent 5px 10px); }
.engine-stale { opacity: .7; }
@keyframes engine-packet { from { transform: translateX(0); opacity: .2; } 20% { opacity: 1; } 80% { opacity: 1; } to { transform: translateX(980%); opacity: .2; } }
@media (max-width: 480px) { .runtime-data-engine { padding: 12px; } .engine-lane { grid-template-columns: 74px minmax(24px, 1fr) 82px; gap: 6px; font-size: .68rem; } }
@media (prefers-reduced-motion: reduce) { .runtime-data-engine .channel-packet { animation: none; } .lane-flow .channel-line, .lane-verify .channel-line { opacity: .75; } }
.live-topology { position: relative; height: 180px; margin: 4px 0 12px; }
.topology-wires { position: absolute; width: 100%; height: 100%; inset: 0; overflow: visible; }
.topology-wire, .topology-reserve-wire { fill: none; stroke: #406077; stroke-width: 2; }
.topology-reserve-wire { stroke-dasharray: 4 7; opacity: .6; }
.topology-pulse, .topology-reserve-pulse { fill: none; stroke: #45e4cc; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 12 148; opacity: 0; }
.topology-flowing .topology-pulse { opacity: .9; animation: topology-stream var(--packet-duration, 3s) linear infinite; }
.topology-pulse-out { animation-delay: -.8s !important; }
.topology-verifying .topology-reserve-pulse { stroke: #aaa8ff; opacity: .9; animation: topology-stream 4s linear infinite; }
.topology-blocked .topology-wire { stroke: #ffbf69; stroke-dasharray: 5 8; }
.topology-node { position: absolute; top: 32px; width: 27%; height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid #37536b; border-radius: 14px; background: linear-gradient(150deg,#1b334a,#112339); text-align: center; box-shadow: 0 8px 16px #0002; }
.topology-client { left: 0; }.topology-proxy { left: 36.5%; }.topology-cdn { right: 0; }
.topology-node strong { font-size: .7rem; }.topology-node small { font-size: .6rem; color: #a7bfd4; }
.topology-glyph { color: #80d6e4; font-size: 1.3rem; line-height: 1; }
.topology-route { width: 90%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.topology-confirmed .topology-cdn { border-color: #3ce1c5; box-shadow: 0 0 18px #3ce1c522; }
.topology-blocked .topology-proxy { border-color: #ffbf69; }
.topology-reserve { position: absolute; bottom: 4px; left: 30%; display: flex; align-items: center; gap: 6px; font-size: .61rem; background: #182b42; padding: 5px 8px; border: 1px solid #3b4c75; border-radius: 8px; }
.reserve-dot { width: 6px; height: 6px; border-radius: 50%; background: #aaa8ff; }
.topology-queue { position: absolute; top: 0; right: 0; color: #ffcb85; display: flex; gap: 5px; font-size: .6rem; }
.recovery-trace { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; margin-bottom: 8px; }
.trace-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: .6rem; color: #8da3b8; }
.trace-step:not(:last-child)::after { content: ''; position: absolute; left: calc(50% + 8px); right: calc(-50% + 8px); top: 6px; height: 1px; background: #3c5369; }
.trace-marker { width: 13px; height: 13px; border: 2px solid #52687d; border-radius: 50%; background: #112339; z-index: 1; }
.trace-done { color: #68e2cb; }.trace-done .trace-marker { border-color: #3ce1c5; background: #3ce1c533; }
.trace-active { color: #b8b5ff; }.trace-active .trace-marker { border-color: #aaa8ff; animation: trace-observe 2s ease-in-out infinite; }
.trace-risk { color: #ffbf69; }.trace-risk .trace-marker { border-color: #ffbf69; }
.engine-trace-caption { font-size: .6rem; line-height: 1.5; color: #9bb2c8; margin-bottom: 15px; }
@keyframes topology-stream { to { stroke-dashoffset: -160; } }
@keyframes trace-observe { 50% { box-shadow: 0 0 0 5px #aaa8ff22; } }
@media (prefers-reduced-motion: reduce) { .live-topology .topology-pulse, .live-topology .topology-reserve-pulse, .recovery-trace .trace-marker { animation: none; } }
.live-evidence-details { border-top: 1px solid var(--bs-border-color); padding-top: 12px; font-size: .75rem; }
.live-evidence-details summary { cursor: pointer; color: var(--bs-primary); }
.live-evidence-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.live-evidence-grid section { padding: 12px; border-radius: 10px; background: var(--bs-tertiary-bg); }
.live-evidence-grid dl { display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 7px; margin: 12px 0 0; font-size: .68rem; }
.live-evidence-grid dt { font-weight: 400; color: var(--bs-secondary-color); }.live-evidence-grid dd { margin: 0; }
.live-stage-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-weight: 600; margin: 18px 0 10px; }.live-stage-heading small { font-weight: 400; color: var(--bs-secondary-color); }
.live-candidate-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--bs-border-color); }
.live-action-row { display: flex; gap: 12px; position: relative; padding: 9px 0; }
.live-action-dot { margin-top: 5px; width: 8px; height: 8px; flex-shrink: 0; background: var(--bs-primary); border-radius: 50%; }
.live-action-row:not(:last-child)::before { content: ''; position: absolute; left: 3px; top: 21px; bottom: -6px; width: 1px; background: var(--bs-border-color); }
@media (max-width: 480px) { .live-evidence-grid { grid-template-columns: 1fr; } }
.live-processing-panel { border: 1px solid var(--bs-border-color); border-radius: 12px; padding: 12px; background: var(--bs-tertiary-bg); }
.live-processing-panel .progress { height: 5px; }.live-processing-panel .progress-bar { transition: width .35s ease; }
@media (prefers-reduced-motion: reduce) { .live-processing-panel .progress-bar { transition: none; } }

/* Real connection topology, inspired by SVG path-motion examples. */
.runtime-redesign .runtime-data-engine {background:#f7f9fc; color:#243449; border:1px solid #dbe3ed; box-shadow:none; padding:16px;}
.connection-canvas-heading {display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:12px;}
.connection-canvas-heading strong {font-size:.95rem;}
.connection-canvas-heading small {display:block; color:#68788d; margin-top:4px; font-size:.72rem;}
.connection-canvas-heading>span {font-size:.72rem; color:#64748b; max-width:200px;}
.connection-legend {display:flex; gap:16px; flex-wrap:wrap; color:#65758a; font-size:.7rem; margin-bottom:10px;}
.connection-flow-card {border:1px solid #d9e2ec; border-left:3px solid #94a3b8; border-radius:10px; padding:14px; overflow-wrap:anywhere; background:#fff; transition:border-color .2s;}
.connection-flowing {border-left-color:#16a085;}
.connection-waiting {border-left-color:#d79526;}
.connection-path-scroll {overflow-x:auto; padding:16px 0 8px;}
.connection-path {display:flex; align-items:center; width:max-content; min-width:100%;}
.connection-path-step {display:flex; align-items:center;}
.connection-path-node {display:flex; flex-direction:column; gap:6px; width:140px; min-height:78px; justify-content:center; padding:12px; border:1px solid #d9e2ec; border-radius:10px; background:#f8fafc;}
.connection-path-node strong {font-size:.74rem; overflow-wrap:anywhere; color:#26394f;}
.connection-path-node small {font-size:.65rem; color:#65758a; overflow-wrap:anywhere;}
.connection-link {width:64px; height:28px; flex:none; overflow:visible; color:#a8b5c5;}
.connection-edge,.connection-arrow {fill:none; stroke:currentColor; stroke-width:1.6;}
.connection-particle {display:none; fill:#159c83; offset-path:path('M60 14 H2');}
.connection-flowing .connection-link {color:#8cbeb3;}
.connection-flowing .connection-particle {display:block; animation:connection-download var(--connection-duration,3s) linear infinite;}
.connection-waiting .connection-link {color:#cf9e4d;}
.connection-waiting .connection-edge {stroke-dasharray:4 4;}
.connection-stale {opacity:.55; filter:grayscale(1);}
@keyframes connection-download {from {offset-distance:0%;opacity:0;} 12% {opacity:1;} 88% {opacity:1;} to {offset-distance:100%;opacity:0;}}
@media(max-width:480px) {.connection-path-node{width:120px;} .connection-link{width:48px;} .connection-canvas-heading{align-items:flex-start;flex-direction:column;}}
@media(prefers-reduced-motion:reduce) {.connection-flowing .connection-particle{animation:none;offset-distance:50%;} .connection-flow-card{transition:none;}}

/* Runtime redesign: summary first, progressive disclosure for evidence. */
.runtime-redesign { max-width:1440px; margin:0 auto; }
.runtime-redesign .auto-heading { padding:12px 0 18px; }
.runtime-redesign .runtime-tabs { position:sticky; top:0; z-index:10; background:var(--bs-body-bg); padding:8px; border:1px solid var(--bs-border-color); border-radius:12px; margin-bottom:24px; }
.runtime-redesign .runtime-signal-card { background:var(--bs-body-bg); box-shadow:none; border:1px solid var(--bs-border-color); padding:20px; }
.runtime-primary-decision {padding:14px 16px; background:var(--bs-tertiary-bg); border-left:3px solid #527fa8; border-radius:6px;}
.runtime-redesign .runtime-path-details,.runtime-redesign .runtime-decision-details,.runtime-redesign .live-evidence-details { border-top:1px solid var(--bs-border-color); padding-top:12px; }
.runtime-redesign summary {font-size:.85rem; font-weight:600; cursor:pointer; padding:8px 0;}
.runtime-redesign summary .caption {display:block; margin:4px 0 0 16px; font-weight:400; color:var(--bs-secondary-color);}
.runtime-redesign .runtime-metrics-details { border:1px solid var(--bs-border-color); border-radius:10px; padding:4px 16px; }
.runtime-redesign .auto-overview {margin-top:12px;}
.runtime-redesign .live-evidence-grid dl {font-size:.8rem; grid-template-columns:110px minmax(0,1fr);}
.runtime-redesign .engine-heading {font-size:.7rem;}
@media(max-width:767px) { .runtime-redesign .runtime-tabs {position:static; overflow-x:auto; flex-wrap:nowrap;} .runtime-redesign .runtime-signal-card {padding:16px;} }

/* Neon topology treatment, inspired by xyflow Turbo Flow. */
.runtime-redesign .runtime-data-engine {background:radial-gradient(ellipse at 15% 0%,#182f4a 0,transparent 60%),#080f1c;color:#d5e4f5;border-color:#263b56;}
.connection-canvas-heading small,.connection-canvas-heading>span,.connection-legend {color:#93aac5;}
.connection-flow-card {background:linear-gradient(135deg,#111f33,#0b1424);border-color:#2a3b55;box-shadow:inset 0 1px 0 #ffffff08;}
.connection-path-scroll {background-image:radial-gradient(#54709835 1px,transparent 1px);background-size:18px 18px;border-radius:8px;}
.connection-path-node {position:relative;background:linear-gradient(#101c30,#101c30) padding-box,linear-gradient(120deg,#8257bc,#388baa) border-box;border:1px solid transparent;box-shadow:0 0 12px #326ea520,inset 0 1px 0 #ffffff08;}
.connection-path-node strong {color:#e3edfa;}.connection-path-node small {color:#9bb0cb;}
.connection-node-port {position:absolute;width:8px;height:8px;right:-5px;top:50%;border-radius:50%;background:#172941;border:1px solid #78a6cc;}
.connection-flowing .connection-path-node {background:linear-gradient(#101e31,#101e31) padding-box,linear-gradient(120deg,#9b60ec,#31dfc7) border-box;box-shadow:0 0 18px #2de1c520,0 0 9px #a75dfc14;}
.connection-flowing .connection-node-port {background:#53e7d0;box-shadow:0 0 8px #43e3cc;}
.connection-flowing .connection-link {color:#467e98;}
.connection-particle {fill:#83fff0;filter:drop-shadow(0 0 3px #37eacb);}
.connection-particle-secondary {animation-delay:calc(var(--connection-duration,3s) * -.5)!important;fill:#c9a9ff;}
.connection-energy {display:none;fill:none;stroke:#57dddf;stroke-width:2;stroke-dasharray:8 50;filter:drop-shadow(0 0 3px #37eacb);}
.connection-flowing .connection-energy {display:block;animation:connection-energy var(--connection-duration,3s) linear infinite;}
.connection-waiting .connection-path-node {background:linear-gradient(#211c19,#171922) padding-box,linear-gradient(120deg,#a07135,#d6aa59) border-box;}
.connection-waiting .connection-node-port {border-color:#e9b461;}
.connection-waiting .connection-link {color:#b78a49;}
@keyframes connection-energy {from{stroke-dashoffset:0;}to{stroke-dashoffset:58;}}
@media(prefers-reduced-motion:reduce){.connection-flowing .connection-energy{animation:none;}.connection-flowing .connection-particle{animation:none!important;}}

/* Optimizer evidence stays within each subscription card. */
.runtime-optimizer-card { min-width:0; overflow-wrap:anywhere; }
.runtime-optimizer-heading { display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; }
.runtime-optimizer-status { max-width:100%; white-space:normal; text-align:left; line-height:1.5; overflow-wrap:anywhere; }
.runtime-optimizer-details { min-width:0; }
.runtime-optimizer-details summary { cursor:pointer; line-height:1.5; }
.runtime-optimizer-detail-body { max-height:320px; overflow-y:auto; overscroll-behavior:contain; margin-top:.5rem; padding-right:.5rem; }