/* ==========================================================================
   CompanyNavigator Blazor UI
   Canonical stylesheet owner map:
   tokens and shell -> drawer/navigation -> search/grid -> imports ->
   startup overlay -> responsive rules.

   This file intentionally contains the authoritative base rules. Historical
   declarations that were fully superseded by an identical later selector have
   been removed without changing the effective cascade.
   ========================================================================== */

:root {
    --cn-appbar-height: 64px;
    --cn-drawer-width: 280px;
    --cn-page-padding-x: 12px;
    --cn-page-padding-y: 12px;
    --cn-radius-sm: 10px;
    --cn-radius-md: 14px;
    --cn-radius-lg: 18px;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    font-size: 16px;
    background: #101925;
}

/* Application startup gate -------------------------------------------------
   The chrome stays hidden until the central overlay finishes. This prevents a
   route flash beneath the first-session startup experience. */
.cn-application-shell {
    min-height: 100dvh;
}

.cn-application-chrome {
    min-height: 100dvh;
}

.cn-application-shell.cn-startup-pending .cn-application-chrome {
    visibility: hidden;
    pointer-events: none;
}

.flex-wrap {
    flex-wrap: wrap;
}

.cn-shell {
    height: 100vh;
    overflow: hidden;
}

.cn-shell.cn-light {
    --cn-bg: #f3f6fb;
    --cn-surface: #ffffff;
    --cn-surface-soft: #f7faff;
    --cn-text: #10213b;
    --cn-muted: #53647b;
    --cn-muted-2: #7b8899;
    --cn-border: rgba(43, 72, 116, 0.22);
    --cn-border-soft: rgba(43, 72, 116, 0.13);
    --cn-primary: #0b65e5;
    --cn-primary-soft: rgba(11, 101, 229, 0.10);
    --cn-success: #16a34a;
    --cn-success-bg: rgba(22, 163, 74, 0.12);
    --cn-danger: #dc2626;
    --cn-danger-bg: rgba(220, 38, 38, 0.12);
    --cn-info: #0b65e5;
    --cn-info-bg: rgba(11, 101, 229, 0.10);
}

.cn-shell.cn-dark {
    --cn-bg: #1f1f23;
    --cn-surface: #292b31;
    --cn-surface-soft: #30333a;
    --cn-text: #f3f6fb;
    --cn-muted: #c0cad8;
    --cn-muted-2: #95a1b1;
    --cn-border: rgba(170, 183, 202, 0.24);
    --cn-border-soft: rgba(170, 183, 202, 0.15);
    --cn-primary: #4f8df8;
    --cn-primary-soft: rgba(79, 141, 248, 0.16);
    --cn-success: #61c568;
    --cn-success-bg: rgba(97, 197, 104, 0.16);
    --cn-danger: #ef4444;
    --cn-danger-bg: rgba(239, 68, 68, 0.18);
    --cn-info: #5ea1ff;
    --cn-info-bg: rgba(94, 161, 255, 0.16);
}

.cn-shell,
.cn-shell .mud-layout,
.cn-shell .mud-main-content {
    background: var(--cn-bg) !important;
    color: var(--cn-text);
}

/* Header / brand ----------------------------------------------------------- */
.cn-brand-appbar {
    height: var(--cn-appbar-height) !important;
    min-height: var(--cn-appbar-height) !important;
    padding: 0 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #0b6ff0 0%, #075dcf 52%, #064da9 100%) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 4px 12px rgba(7, 84, 190, 0.16) !important;
}

.cn-brand-appbar .mud-toolbar {
    height: var(--cn-appbar-height) !important;
    min-height: var(--cn-appbar-height) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    align-items: center !important;
}

.cn-top-brand,
.cn-top-actions {
    display: flex;
    align-items: center;
}

.cn-top-brand {
    gap: 10px;
    min-width: 0;
    height: var(--cn-appbar-height);
}

.cn-compass-logo {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.cn-compass-logo img {
    width: 46px;
    height: 46px;
    display: block;
    object-fit: contain;
}

.cn-brand-title {
    color: #ffffff !important;
    margin-inline: 6px 10px !important;
    font-size: 1.24rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -0.025em !important;
    white-space: nowrap;
}

.cn-demo-chip {
    height: 28px !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.42) !important;
    background: rgba(255, 255, 255, 0.15) !important;
    font-size: 0.78rem !important;
    font-weight: 850 !important;
}

.cn-top-actions {
    gap: 8px;
    flex-wrap: nowrap;
    margin-left: 16px;
}

.cn-top-pill,
.cn-top-button {
    min-height: 32px !important;
    border-radius: 999px !important;
    border-color: rgba(255, 255, 255, 0.36) !important;
    background: rgba(255, 255, 255, 0.13) !important;
    color: #ffffff !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
}

.cn-online-dot {
    width: 9px;
    height: 9px;
    display: inline-block;
    margin-right: 6px;
    border-radius: 999px;
    background: #23d160;
    box-shadow: 0 0 0 3px rgba(35, 209, 96, 0.18);
}

.cn-theme-toggle {
    min-height: 34px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.34) !important;
    background: rgba(255, 255, 255, 0.13) !important;
    overflow: hidden;
}

.cn-theme-button {
    min-width: 74px !important;
    min-height: 32px !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    background: transparent !important;
    font-size: 0.8rem !important;
}

.cn-theme-button-active {
    color: #075dcc !important;
    background: #ffffff !important;
}

.cn-avatar {
    display: none;
}

/* Drawer ------------------------------------------------------------------ */
.cn-drawer {
    top: var(--cn-appbar-height) !important;
    width: var(--cn-drawer-width) !important;
    height: calc(100vh - var(--cn-appbar-height)) !important;
    background: var(--cn-surface) !important;
    border-right: 1px solid var(--cn-border-soft) !important;
    box-shadow: 14px 0 34px rgba(20, 47, 88, 0.055) !important;
    transition: width 180ms ease !important;
}

.cn-drawer.cn-drawer-collapsed {
    width: 78px !important;
}

.cn-drawer-inner {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 16px 18px 18px;
    overflow: hidden;
}

.cn-drawer-collapsed .cn-drawer-inner {
    padding: 16px 10px 18px;
}

.cn-nav-menu {
    flex: 0 0 auto;
    padding: 0 !important;
}

.cn-nav-section {
    margin: 28px 12px 12px;
    color: var(--cn-muted-2);
    font-size: 0.74rem;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.cn-nav-link,
.cn-nav-link.mud-nav-link {
    height: 64px;
    min-height: 64px;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 0 10px;
    padding: 0 22px !important;
    border-radius: 17px !important;
    color: var(--cn-muted) !important;
    background: rgba(83, 100, 123, 0.035) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    overflow: hidden;
    box-shadow: none !important;
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.cn-nav-link::before,
.cn-nav-link::after,
.cn-nav-link.mud-nav-link::before,
.cn-nav-link.mud-nav-link::after,
.cn-nav-link.mud-nav-link *::before,
.cn-nav-link.mud-nav-link *::after {
    background: transparent !important;
    box-shadow: none !important;
}

.cn-nav-link.mud-nav-link .mud-nav-link-icon {
    width: 42px !important;
    min-width: 42px !important;
    height: 64px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 16px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.cn-nav-link.mud-nav-link .mud-nav-link-text {
    height: 64px;
    min-height: 64px;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    line-height: 1 !important;
    white-space: nowrap;
}

.cn-nav-link .mud-icon-root {
    width: 24px;
    height: 24px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    color: currentColor !important;
    font-size: 23px !important;
    line-height: 1 !important;
}

.cn-nav-link:hover,
.cn-nav-link.mud-nav-link:hover,
.cn-nav-link.mud-nav-link-disabled:hover,
.cn-nav-link.mud-disabled:hover {
    color: var(--cn-primary) !important;
    background: rgba(11, 101, 229, 0.085) !important;
    box-shadow: none !important;
}

.cn-nav-link.active,
.cn-nav-link.mud-nav-link.active,
.cn-nav-link.mud-nav-link.mud-nav-link-active {
    color: var(--cn-primary) !important;
    background: rgba(11, 101, 229, 0.13) !important;
    box-shadow: none !important;
}

.cn-nav-link.mud-nav-link-disabled,
.cn-nav-link.mud-nav-link-disabled .mud-icon-root,
.cn-nav-link.mud-disabled,
.cn-nav-link.mud-disabled .mud-icon-root {
    color: var(--cn-muted-2) !important;
    opacity: 0.82 !important;
}

.cn-drawer-collapsed .cn-nav-section,
.cn-drawer-collapsed .cn-nav-link.mud-nav-link .mud-nav-link-text {
    display: none !important;
}

.cn-drawer-collapsed .cn-nav-link,
.cn-drawer-collapsed .cn-nav-link.mud-nav-link {
    width: 58px !important;
    height: 58px;
    min-height: 58px;
    justify-content: center !important;
    margin: 0 auto 10px;
    padding: 0 !important;
    border-radius: 17px !important;
}

.cn-drawer-collapsed .cn-nav-link.mud-nav-link .mud-nav-link-icon {
    width: 58px !important;
    min-width: 58px !important;
    height: 58px !important;
    margin: 0 !important;
}

.cn-drawer-card {
    flex: 0 0 auto;
    margin-top: auto;
    padding: 20px 18px;
    border: 1px solid var(--cn-border-soft);
    border-radius: var(--cn-radius-lg);
    background: linear-gradient(180deg, var(--cn-surface) 0%, var(--cn-surface-soft) 100%);
    text-align: center;
}

.cn-drawer-card-title {
    color: var(--cn-text);
    font-size: 1rem;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.cn-drawer-card-text {
    max-width: 178px;
    margin: 9px auto 0;
    color: var(--cn-muted);
    font-size: 0.87rem;
    line-height: 1.45;
}

.cn-drawer-collapsed .cn-drawer-card,
.cn-drawer-collapsed .cn-drawer-footer-text {
    display: none;
}

.cn-drawer-footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 14px;
    margin-top: 18px;
    padding: 16px 8px 0;
    border-top: 1px solid var(--cn-border-soft);
    color: var(--cn-muted);
    font-size: 0.74rem;
    line-height: 1.55;
}

.cn-drawer-collapsed .cn-drawer-footer {
    justify-content: center;
    align-items: center;
    margin-top: auto;
    padding: 16px 0 0;
}

.cn-drawer-toggle,
.cn-drawer-toggle.mud-icon-button {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    color: var(--cn-muted) !important;
    background: transparent !important;
}

.cn-drawer-toggle:hover,
.cn-drawer-toggle.mud-icon-button:hover {
    color: var(--cn-primary) !important;
    background: rgba(11, 101, 229, 0.085) !important;
}

.cn-drawer-toggle .mud-icon-root {
    font-size: 21px !important;
}

/* Main content ------------------------------------------------------------- */
.cn-shell .mud-main-content {
    height: 100vh;
    overflow: hidden !important;
    padding-top: var(--cn-appbar-height) !important;
}

.cn-main-container {
    width: 100%;
    max-width: none !important;
    height: calc(100vh - var(--cn-appbar-height));
    margin: 0 !important;
    padding: var(--cn-page-padding-y) var(--cn-page-padding-x) 20px !important;
    overflow: hidden;
    background: radial-gradient(circle at 90% 2%, rgba(11, 101, 229, 0.07), transparent 25%);
}

.cn-page-stack {
    height: 100%;
    min-height: 0;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    overflow: hidden;
}

.cn-company-search-page > .cn-search-summary-row {
    margin-top: 12px;
    margin-bottom: 10px;
}

.cn-company-search-page {
    padding-bottom: 0 !important;
}

.cn-company-search-page > .cn-viewport-shell {
    flex: 1 1 0;
    min-height: 0;
}


.cn-page-hero {
    min-width: 0;
    padding-top: 0;
    padding-bottom: 2px;
}

.cn-page-title {
    margin: 0 0 10px 0 !important;
    color: var(--cn-text);
    font-size: clamp(1.38rem, 1.05vw, 1.62rem) !important;
    line-height: 0.98 !important;
    font-weight: 850 !important;
    letter-spacing: -0.025em !important;
    transform: translateY(-4px);
}

.cn-page-subtitle {
    margin-top: 0 !important;
    color: var(--cn-muted) !important;
    font-size: 0.88rem !important;
    line-height: 1.18 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cards / KPI -------------------------------------------------------------- */
.cn-kpi-strip {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 10px;
    align-items: stretch;
}

.cn-kpi-card {
    min-height: 74px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--cn-border-soft);
    border-radius: var(--cn-radius-md);
    background: var(--cn-surface);
}

.cn-kpi-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    border-radius: var(--cn-radius-sm);
    color: #ffffff;
}

.cn-kpi-icon .mud-icon-root {
    font-size: 22px;
}

.cn-kpi-blue .cn-kpi-icon {
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
}

.cn-kpi-purple .cn-kpi-icon {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6);
}

.cn-kpi-teal .cn-kpi-icon {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
}

.cn-kpi-green .cn-kpi-icon {
    background: linear-gradient(135deg, #15803d, #22c55e);
}

.cn-kpi-label {
    color: var(--cn-muted);
    font-size: 0.76rem;
    font-weight: 650;
    letter-spacing: 0.01em;
}

.cn-kpi-value {
    color: var(--cn-text);
    font-size: 1.3rem;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.cn-kpi-subtitle {
    margin-top: 2px;
    color: var(--cn-muted);
    font-size: 0.74rem;
}

/* Search / filters --------------------------------------------------------- */
.cn-search-panel,
.cn-info-panel,
.cn-import-dropzone,
.cn-import-history-panel {
    flex: 0 0 auto;
    border: 1px solid var(--cn-border-soft);
    border-radius: var(--cn-radius-lg);
    background: var(--cn-surface);
}

.cn-filter-expander {
    overflow: visible;
}

.cn-filter-toolbar {
    min-height: 58px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    border-bottom: 1px solid var(--cn-border-soft);
    border-radius: var(--cn-radius-lg) var(--cn-radius-lg) 0 0;
    background: var(--cn-surface-soft);
}

.cn-filter-toolbar-summary {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    color: var(--cn-text);
    font-size: 0.96rem;
    font-weight: 700;
    white-space: nowrap;
}

.cn-filter-toolbar-summary .mud-icon-root {
    color: var(--cn-primary);
}

.cn-filter-toolbar-clear.mud-button-root {
    min-height: 34px !important;
    margin-left: 6px;
    padding-inline: 10px !important;
    color: var(--cn-text) !important;
    font-size: 0.82rem !important;
    font-weight: 750 !important;
}

.cn-filter-tab {
    min-width: 132px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-left: 1px solid var(--cn-border-soft);
    border-radius: 0 var(--cn-radius-lg) 0 0;
    color: var(--cn-primary);
    background: transparent;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
}

.cn-filter-body {
    padding: 16px 18px 14px;
}

.cn-additional-filter-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 30px;
    margin-top: 6px;
    padding-top: 0;
}

.cn-additional-filter-toggle .mud-divider {
    width: 100%;
}

.cn-additional-filter-toggle-button {
    min-height: 30px !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
    white-space: nowrap;
}

.cn-additional-filter-panel {
    padding-top: 8px;
}

.cn-additional-filter-section-title {
    display: block;
    margin-top: 4px;
    color: var(--cn-text);
    font-size: 0.82rem;
    font-weight: 750;
    letter-spacing: 0.02em;
}

.cn-financial-filter-group {
    display: grid;
    align-content: start;
    gap: 4px;
}

.cn-financial-filter-group-title {
    margin-left: 2px;
    margin-bottom: 0 !important;
    color: var(--cn-text);
    font-size: 0.76rem;
    font-weight: 400;
    line-height: 16px;
}

.cn-financial-filter-range {
    gap: 8px !important;
}

.cn-financial-filter-range .mud-input-control {
    min-width: 0;
}

/* Test-column switch -------------------------------------------------------
   The component is intentionally app-owned rather than a browser/native control:
   its inactive and active thumb positions remain unmistakable in every theme. */
.cn-test-columns-toggle {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 28px 0 0;
    padding: 0;
    border: 0;
    color: var(--cn-text);
    background: transparent;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.cn-test-columns-toggle:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--cn-primary) 65%, transparent);
    outline-offset: 4px;
    border-radius: 8px;
}

.cn-test-columns-toggle-track {
    position: relative;
    width: 44px;
    height: 24px;
    flex: 0 0 44px;
    display: inline-block;
    border: 1px solid color-mix(in srgb, var(--cn-muted) 38%, var(--cn-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--cn-muted) 30%, var(--cn-surface));
    box-shadow: inset 0 1px 2px rgba(15, 31, 58, 0.12);
    transition: background-color 150ms ease, border-color 150ms ease;
}

.cn-test-columns-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--cn-surface);
    box-shadow: 0 1px 3px rgba(15, 31, 58, 0.28);
    transition: transform 150ms ease;
}

.cn-test-columns-toggle--active .cn-test-columns-toggle-track {
    border-color: color-mix(in srgb, var(--cn-primary) 72%, var(--cn-border));
    background: var(--cn-primary);
}

.cn-test-columns-toggle--active .cn-test-columns-toggle-thumb {
    transform: translateX(20px);
}

.cn-test-columns-toggle:hover .cn-test-columns-toggle-track {
    border-color: color-mix(in srgb, var(--cn-primary) 48%, var(--cn-border));
}

.cn-test-columns-toggle-label {
    color: inherit;
}

.cn-info-panel {
    padding: 7px 14px;
    border-radius: var(--cn-radius-md);
}

.cn-import-alert {
    border-color: color-mix(in srgb, var(--cn-primary) 45%, transparent) !important;
    background: color-mix(in srgb, var(--cn-primary) 8%, transparent) !important;
}

.cn-filter-body .mud-grid {
    margin-left: -8px !important;
    margin-right: -8px !important;
}

.cn-filter-body .mud-grid > .mud-grid-item {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Advanced search mode dropdown ------------------------------------------- */
.cn-advanced-text-search {
    min-height: 48px;
}

.cn-advanced-search-row {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

.cn-text-addon-input-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 38px;
    margin-top: 7px;
    display: flex;
    align-items: center;
    border: 1px solid var(--cn-border);
    border-radius: 8px;
    background: var(--cn-surface);
    color: var(--cn-text);
}

.cn-advanced-text-search-with-mode .cn-text-addon-input-wrap {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.cn-text-addon-label {
    position: absolute;
    top: -12px;
    left: 12px;
    z-index: 2;
    padding: 0 5px;
    background: var(--cn-surface);
    color: var(--cn-text);
    font-size: 0.76rem;
    font-weight: 400;
    line-height: 16px;
}

.cn-text-addon-icon {
    flex: 0 0 36px;
    width: 36px;
    color: var(--cn-muted);
    font-size: 1.45rem !important;
}

.cn-text-addon-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0 4px 0 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--cn-text);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 38px;
}

.cn-text-addon-input::placeholder {
    color: color-mix(in srgb, var(--cn-muted) 72%, transparent);
}

.cn-text-addon-clear {
    flex: 0 0 32px;
    width: 32px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: color-mix(in srgb, var(--cn-muted) 92%, #000000 8%);
    cursor: pointer;
}

.cn-text-addon-clear .mud-icon-root {
    font-size: 1.25rem !important;
}

.cn-text-addon-suggestions {
    position: absolute;
    top: calc(100% + 6px);
    right: -1px;
    left: -1px;
    z-index: 90;
    max-height: 248px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--cn-border-soft);
    border-radius: 10px;
    background: var(--cn-surface);
    box-shadow: 0 16px 34px rgba(24, 52, 96, 0.18);
}

.cn-text-addon-suggestion {
    width: 100%;
    min-height: 34px;
    padding: 7px 10px;
    display: block;
    border: 0;
    border-radius: 7px;
    color: var(--cn-text);
    background: transparent;
    font: inherit;
    font-size: 0.88rem;
    text-align: left;
    cursor: pointer;
}

.cn-text-addon-suggestion:hover,
.cn-text-addon-suggestion-active {
    background: var(--cn-primary-soft);
    color: var(--cn-primary);
}

.cn-match-mode-slot {
    position: relative;
    flex: 0 0 136px;
    width: 136px;
    margin-top: 7px;
    margin-left: -1px;
}

.cn-match-mode-trigger {
    width: 100%;
    height: 38px;
    min-width: 0;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid color-mix(in srgb, var(--cn-primary) 26%, var(--cn-border));
    border-left-color: color-mix(in srgb, var(--cn-primary) 26%, var(--cn-border));
    border-radius: 0 8px 8px 0;
    color: color-mix(in srgb, var(--cn-primary) 74%, var(--cn-text));
    background: color-mix(in srgb, var(--cn-primary) 8%, var(--cn-surface));
    font-size: 0.84rem;
    font-weight: 600 !important;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
}

.cn-match-mode-trigger:hover {
    border-color: color-mix(in srgb, var(--cn-primary) 38%, var(--cn-border));
    background: color-mix(in srgb, var(--cn-primary) 13%, var(--cn-surface));
}

.cn-match-mode-trigger span,
.cn-match-mode-trigger .mud-icon-root {
    color: inherit !important;
    font-weight: 600 !important;
}

.cn-match-mode-trigger .mud-icon-root {
    font-size: 1rem !important;
}

.cn-advanced-text-search-disabled .cn-text-addon-input-wrap,
.cn-match-mode-trigger:disabled {
    opacity: 0.55;
    cursor: default;
}

.cn-match-mode-menu {
    position: absolute;
    top: 42px;
    right: 0;
    z-index: 80;
    width: 260px;
    padding: 8px;
    border: 1px solid var(--cn-border-soft);
    border-radius: 10px;
    background: var(--cn-surface);
    box-shadow: 0 18px 40px rgba(24, 52, 96, 0.18);
}

.cn-match-mode-menu-title {
    padding: 4px 6px 7px;
    color: var(--cn-text);
    font-size: 0.8rem;
    font-weight: 600;
}

.cn-match-mode-option {
    width: 100%;
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 8px;
    align-items: start;
    padding: 7px 6px;
    border: 0;
    border-radius: 8px;
    color: var(--cn-text);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.cn-match-mode-option strong {
    font-weight: 500;
}

.cn-match-mode-option small {
    display: block;
    margin-top: 2px;
    color: var(--cn-muted);
    font-size: 0.7rem;
}

.cn-match-mode-radio {
    width: 15px;
    height: 15px;
    margin-top: 2px;
    border: 2px solid color-mix(in srgb, var(--cn-muted) 55%, transparent);
    border-radius: 999px;
}

.cn-match-mode-option-active {
    background: var(--cn-primary-soft);
}

.cn-match-mode-option-active .cn-match-mode-radio {
    border-color: var(--cn-primary);
    box-shadow: inset 0 0 0 4px var(--cn-surface), inset 0 0 0 8px var(--cn-primary);
}

/* Results table ------------------------------------------------------------ */
.cn-loading-strip {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease;
}

.cn-loading-strip-active {
    min-height: 28px;
    opacity: 1;
}

.cn-loading-progress {
    flex: 1 1 auto;
    min-width: 140px;
}

.cn-loading-text {
    color: var(--cn-muted);
    white-space: nowrap;
}

.cn-grid-scroll-host {
    flex: 1 1 auto;
    min-height: 260px;
    overflow: auto;
    overscroll-behavior: contain;
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* Company-grid scrollbar visibility -----------------------------------------
   This styles only the browser-owned scrollbar of the actual grid scroll host.
   It deliberately does not alter scroll geometry, viewport calculations,
   debouncing, or the browser-owned native-scrollbar drag behavior. Firefox accepts the
   standards-based color/default-width properties; Chromium-family browsers
   also receive a 12px track. */
.cn-grid-scroll-host {
    scrollbar-width: auto;
    scrollbar-color:
        color-mix(in srgb, var(--cn-primary) 72%, var(--cn-text))
        color-mix(in srgb, var(--cn-surface-soft) 82%, var(--cn-border));
}

.cn-grid-scroll-host::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.cn-grid-scroll-host::-webkit-scrollbar-track,
.cn-grid-scroll-host::-webkit-scrollbar-corner {
    background: color-mix(in srgb, var(--cn-surface-soft) 82%, var(--cn-border));
}

.cn-grid-scroll-host::-webkit-scrollbar-thumb {
    min-height: 44px;
    border: 1px solid color-mix(in srgb, var(--cn-surface) 72%, var(--cn-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--cn-primary) 72%, var(--cn-text));
}

.cn-grid-scroll-host::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--cn-primary) 84%, var(--cn-text));
}

.cn-grid-panel {
    min-width: 1280px;
    overflow: visible;
    box-shadow: none;
}

.cn-company-table,
.cn-import-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9rem;
}

/* The virtual company grid uses one fixed column contract. Row data, browser-side
   skeletons and post-sort windows therefore keep exactly the same horizontal geometry. */
.cn-company-table {
    min-width: 1870px;
    table-layout: fixed;
}

.cn-company-table col.cn-grid-column-id { width: 92px; }
.cn-company-table col.cn-grid-column-name { width: 330px; }
.cn-company-table col.cn-grid-column-city { width: 170px; }
.cn-company-table col.cn-grid-column-zip { width: 108px; }
.cn-company-table col.cn-grid-column-country { width: 130px; }
.cn-company-table col.cn-grid-column-industry { width: 280px; }
.cn-company-table col.cn-grid-column-legal-form { width: 200px; }
.cn-company-table col.cn-grid-column-status { width: 140px; }
.cn-company-table col.cn-grid-column-hr-court { width: 220px; }
.cn-company-table col.cn-grid-column-register-id { width: 200px; }
.cn-company-table col.cn-grid-column-verification-text { width: 300px; }
.cn-company-table col.cn-grid-column-verification-currency { width: 150px; }

.cn-company-table.cn-company-table-with-verification {
    min-width: 3220px;
}

.cn-company-table th,
.cn-import-table th {
    padding: 9px 14px;
    text-align: left;
    color: var(--cn-text);
    background: color-mix(in srgb, var(--cn-primary) 12%, var(--cn-surface-soft));
    border-bottom: 1px solid color-mix(in srgb, var(--cn-primary) 24%, var(--cn-border));
    font-size: 0.8rem;
    font-weight: 850;
    white-space: nowrap;
}

.cn-company-table td,
.cn-import-table td {
    padding: 7px 14px;
    color: var(--cn-text);
    border-bottom: 1px solid var(--cn-border-soft);
    vertical-align: middle;
    white-space: nowrap;
}

.cn-company-table th,
.cn-company-table td {
    overflow: hidden;
    text-overflow: ellipsis;
}

.cn-company-row:nth-child(even) td {
    background: color-mix(in srgb, var(--cn-muted) 5%, transparent);
}

.cn-company-row:hover td,
.cn-company-row-selected td {
    background: color-mix(in srgb, var(--cn-primary) 10%, transparent) !important;
}

.cn-sort-header {
    appearance: none;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    font-weight: 850;
    cursor: pointer;
}

.cn-col-id {
    width: 92px;
}

.cn-col-name {
    min-width: 300px;
    max-width: 390px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cn-company-table-with-verification {
    min-width: 2600px;
}

.cn-hr-court-column {
    min-width: 190px;
    max-width: 250px;
}

.cn-register-id-column {
    min-width: 180px;
    max-width: 220px;
}

.cn-verification-text-column {
    min-width: 230px;
    max-width: 340px;
}

.cn-verification-currency-column {
    min-width: 150px;
}


.cn-empty-cell {
    padding: 28px !important;
    text-align: center;
    color: var(--cn-muted) !important;
}

.cn-status-pill {
    min-width: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cn-muted) 14%, transparent);
    color: var(--cn-text);
    font-size: 0.78rem;
    font-weight: 500;
}

.cn-status-active {
    color: var(--cn-success);
    background: var(--cn-success-bg);
}

.cn-status-muted {
    color: var(--cn-muted);
    background: color-mix(in srgb, var(--cn-muted) 20%, transparent);
}

.cn-status-info {
    color: var(--cn-info);
    background: var(--cn-info-bg);
}

.cn-status-danger {
    color: var(--cn-danger);
    background: var(--cn-danger-bg);
}

.cn-grid-scroll-sentinel {
    height: 1px;
}

.cn-scroll-hint {
    display: none !important;
}

/* Detail drawer ------------------------------------------------------------ */
.cn-detail-overlay {
    position: fixed;
    inset: var(--cn-appbar-height) 0 0 0;
    z-index: 1300;
    display: flex;
    justify-content: flex-end;
    background: rgba(15, 23, 42, 0.18);
}

.cn-detail-drawer {
    width: min(560px, 96vw);
    height: 100%;
    overflow-y: auto;
    background: var(--cn-surface);
    border-left: 1px solid var(--cn-border-soft);
    box-shadow: -8px 0 24px rgba(15, 23, 42, 0.12);
}

.cn-detail-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    background: var(--cn-surface);
    border-bottom: 1px solid var(--cn-border-soft);
}

.cn-detail-title {
    color: var(--cn-text);
    font-weight: 750 !important;
}

.cn-detail-loading {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--cn-muted);
}

.cn-detail-content {
    padding: 18px 20px 28px;
}

.cn-detail-section {
    margin-bottom: 14px;
    padding: 14px 16px;
    border: 1px solid var(--cn-border-soft);
    border-radius: var(--cn-radius-md);
    background: var(--cn-surface-soft);
}

.cn-detail-section h3 {
    margin: 0 0 8px;
    color: var(--cn-text);
    font-size: 0.98rem;
}

.cn-detail-row {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 12px;
    padding: 7px 0;
    border-top: 1px solid var(--cn-border-soft);
}

.cn-detail-row:first-of-type {
    border-top: 0;
}

.cn-detail-row span {
    color: var(--cn-muted);
}

.cn-detail-row strong {
    color: var(--cn-text);
    overflow-wrap: anywhere;
}

/* Imports ----------------------------------------------------------------- */

/* Hidden native file picker retained for accessible label activation. */
.cn-import-file-input {
    display: none;
}
.cn-import-history-panel {
    overflow: hidden;
}

.cn-import-history-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--cn-border-soft);
}

.cn-section-title {
    color: var(--cn-text);
    font-weight: 750 !important;
}

/* Responsive --------------------------------------------------------------- */
@media (max-width: 1260px) {
    .cn-top-brand {
        min-width: auto;
    }

    .cn-top-actions {
        gap: 6px;
    }

    .cn-top-pill,
    .cn-top-button,
    .cn-theme-button {
        font-size: 0.76rem !important;
    }

}

@media (max-width: 960px) {
    :root {
        --cn-page-padding-x: 12px;
        --cn-page-padding-y: 18px;
    }

    .cn-brand-title {
        font-size: 1.15rem !important;
    }

    .cn-demo-chip,
    .cn-top-pill,
    .cn-top-button,
    .cn-theme-toggle,
    .cn-avatar {
        display: none !important;
    }

}

/* Page header: title card + KPI strip ---------------------------------------- */

.cn-page-hero {
    min-width: 0;
    min-height: 74px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 16px;
    border: 1px solid var(--cn-border-soft);
    border-radius: var(--cn-radius-md);
    background: var(--cn-surface);
}

.cn-page-title {
    margin: 0 0 7px 0 !important;
    font-size: clamp(1.26rem, 0.95vw, 1.45rem) !important;
    line-height: 1.05 !important;
}

.cn-page-subtitle {
    margin: 0 !important;
    max-width: 100%;
    font-size: 0.86rem !important;
    line-height: 1.2 !important;
}

.cn-kpi-card {
    min-height: 74px;
}

/* Search metrics and surface depth --------------------------------------------
   Metric chips are intentionally neutral. Color remains reserved for actual
   state changes such as loading, errors, or result status. */
.cn-shell.cn-light {
    --cn-info-metric-bg: #f1f6fd;
    --cn-info-metric-border: rgba(43, 72, 116, 0.22);
    --cn-info-metric-shadow: rgba(19, 44, 84, 0.045);
}

.cn-shell.cn-dark {
    --cn-info-metric-bg: rgba(255, 255, 255, 0.075);
    --cn-info-metric-border: rgba(190, 205, 230, 0.22);
    --cn-info-metric-shadow: rgba(0, 0, 0, 0.18);
}

.cn-info-metric-chip.mud-chip {
    min-height: 30px !important;
    padding-inline: 10px !important;
    color: #ffffff !important;
    background: var(--cn-primary) !important;
    border-color: var(--cn-primary) !important;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--cn-primary) 24%, transparent) !important;
}

.cn-info-metric-chip-content {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    font-weight: 750;
    white-space: nowrap;
}

.cn-info-metric-chip-content .mud-icon-root {
    color: inherit !important;
}

.cn-info-detail-hint {
    color: var(--cn-muted);
    font-size: 0.78rem;
    font-weight: 650;
    white-space: nowrap;
}

@media (max-width: 1450px) {
    .cn-page-hero {
        padding-bottom: 12px;
    }

}

@media (max-width: 1050px) {
    .cn-kpi-strip {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
    }

}

/* Filter body spacing --------------------------------------------------------- */
.cn-filter-body {
    padding: 16px 18px 14px;
}

.cn-filter-body .mud-grid {
    margin-left: -7px !important;
    margin-right: -7px !important;
}

.cn-filter-body .mud-grid > .mud-grid-item {
    padding-left: 7px !important;
    padding-right: 7px !important;
}

.cn-filter-body .mud-input-slot,
.cn-filter-body .mud-input-adornment,
.cn-filter-body .mud-select-input {
    align-items: center !important;
}

.cn-filter-body .mud-input-input {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 38px !important;
}

/* Results grid density -------------------------------------------------------- */
.cn-grid-scroll-host {
    margin: 0;
}

.cn-company-table,
.cn-import-table {
    font-size: 0.88rem;
}

.cn-company-table th {
    height: 34px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.cn-company-table td {
    height: 32px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.cn-status-pill {
    min-width: 24px;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: 7px;
    font-size: 0.74rem;
    font-weight: 450;
    line-height: 1.15;
}

/* Result / loading info strip: structural layout ----------------------------- */
.cn-main-container {
    padding-left: var(--cn-page-padding-x) !important;
    padding-right: var(--cn-page-padding-x) !important;
}

.cn-info-panel {
    padding: 6px 12px !important;
}

.cn-info-row {
    width: 100%;
    min-height: 28px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.cn-info-left {
    flex: 0 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.cn-info-spinner {
    margin-right: 2px;
}

.cn-info-progress-wrap {
    flex: 1 1 auto;
    min-width: 180px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.cn-info-progress-wrap .cn-info-detail-hint {
    text-align: center;
}

.cn-info-progress {
    width: 100%;
    height: 4px !important;
    border-radius: 999px !important;
    overflow: hidden;
}

/* The integrated info-row progress replaces the older standalone loading strip. */
.cn-loading-strip,
.cn-loading-strip-active,
.cn-loading-progress,
.cn-loading-text {
    display: none !important;
}

.cn-nav-link.mud-nav-link-disabled,
.cn-nav-link.mud-disabled {
    cursor: default !important;
    pointer-events: auto !important;
}

/* Drawer width transition and collapsed state -------------------------------- */
.cn-shell.cn-drawer-is-expanded {
    --cn-drawer-width: 280px;
}

.cn-shell.cn-drawer-is-collapsed {
    --cn-drawer-width: 78px;
}

.cn-shell .mud-drawer.cn-drawer,
.cn-shell .cn-drawer {
    width: var(--cn-drawer-width) !important;
    max-width: var(--cn-drawer-width) !important;
    min-width: var(--cn-drawer-width) !important;
    overflow: visible !important;
    box-shadow: 8px 0 22px rgba(15, 31, 58, 0.18) !important;
    transition: width 180ms ease, min-width 180ms ease, max-width 180ms ease !important;
}

.cn-shell .mud-drawer.cn-drawer .cn-drawer-inner,
.cn-shell .mud-drawer.cn-drawer-collapsed .cn-drawer-inner {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.cn-shell .mud-main-content {
    margin-left: var(--cn-drawer-width) !important;
    width: calc(100vw - var(--cn-drawer-width)) !important;
    max-width: calc(100vw - var(--cn-drawer-width)) !important;
    transition: margin-left 180ms ease, width 180ms ease, max-width 180ms ease !important;
}

.cn-shell.cn-drawer-is-collapsed .cn-main-container,
.cn-shell.cn-drawer-is-expanded .cn-main-container {
    width: 100% !important;
    max-width: none !important;
}

.cn-page-title:focus,
.cn-page-title:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Nav links: layout, MudBlazor overrides, and color tokens combined --------- */
.cn-shell.cn-light {
    --cn-nav-item-bg: #e4ebf4;
    --cn-nav-item-hover-bg: #d8e5f7;
    --cn-nav-item-active-bg: #cfe0f8;
}

.cn-shell.cn-dark {
    --cn-nav-item-bg: rgba(255, 255, 255, 0.072);
    --cn-nav-item-hover-bg: rgba(79, 141, 248, 0.175);
    --cn-nav-item-active-bg: rgba(79, 141, 248, 0.235);
}

.cn-nav-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.cn-nav-link,
.cn-nav-link.mud-nav-link {
    height: 64px !important;
    min-height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 0 10px !important;
    padding: 0 22px !important;
    border-radius: 17px !important;
    color: var(--cn-muted) !important;
    background: var(--cn-nav-item-bg) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.cn-nav-link:hover,
.cn-nav-link.mud-nav-link:hover,
.cn-nav-link.active,
.cn-nav-link.mud-nav-link.active,
.cn-nav-link.mud-nav-link.mud-nav-link-active {
    color: var(--cn-primary) !important;
    box-shadow: none !important;
}

.cn-nav-link:hover,
.cn-nav-link.mud-nav-link:hover {
    background: var(--cn-nav-item-hover-bg) !important;
}

.cn-nav-link.active,
.cn-nav-link.mud-nav-link.active,
.cn-nav-link.mud-nav-link.mud-nav-link-active {
    background: var(--cn-nav-item-active-bg) !important;
}

.cn-nav-link > .mud-nav-link,
.cn-nav-link .mud-nav-link:not(.cn-nav-link) {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: inherit !important;
    color: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.cn-nav-link > .mud-nav-link:hover,
.cn-nav-link > .mud-nav-link:focus,
.cn-nav-link > .mud-nav-link:focus-visible,
.cn-nav-link > .mud-nav-link.mud-nav-link-active,
.cn-nav-link .mud-nav-link:not(.cn-nav-link):hover,
.cn-nav-link .mud-nav-link:not(.cn-nav-link):focus,
.cn-nav-link .mud-nav-link:not(.cn-nav-link):focus-visible,
.cn-nav-link .mud-nav-link:not(.cn-nav-link).mud-nav-link-active {
    color: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.cn-nav-link *,
.cn-nav-link *:hover,
.cn-nav-link *:focus,
.cn-nav-link *:focus-visible {
    box-shadow: none !important;
    outline: none !important;
}

.cn-nav-link .mud-nav-link-icon,
.cn-nav-link.mud-nav-link .mud-nav-link-icon {
    width: 42px !important;
    min-width: 42px !important;
    height: 64px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 16px 0 0 !important;
    padding: 0 !important;
    color: inherit !important;
    background: transparent !important;
}

.cn-nav-link .mud-nav-link-text,
.cn-nav-link.mud-nav-link .mud-nav-link-text {
    height: 64px !important;
    min-height: 64px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    background: transparent !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.cn-nav-link .mud-icon-root,
.cn-nav-link.mud-nav-link .mud-icon-root {
    width: 25px !important;
    height: 25px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    color: inherit !important;
    font-size: 25px !important;
    line-height: 25px !important;
}

/* Full-width navigation ripple -------------------------------------------------
   MudNavLink hosts the ripple inside the link. Keep the link itself and its
   ripple container on the same full-size rounded surface so the press effect
   never stops before the right edge. */
.cn-nav-menu {
    width: 100% !important;
    align-items: stretch !important;
}

.cn-nav-link,
.cn-nav-link.mud-nav-link {
    width: 100% !important;
    max-width: none !important;
    align-self: stretch !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.cn-nav-link .mud-ripple-container,
.cn-nav-link.mud-nav-link .mud-ripple-container {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    border-radius: inherit !important;
    pointer-events: none !important;
}

.cn-nav-link .mud-ripple,
.cn-nav-link.mud-nav-link .mud-ripple,
.cn-nav-link .mud-focus-ripple,
.cn-nav-link.mud-nav-link .mud-focus-ripple {
    display: block !important;
    border-radius: inherit !important;
}

/* Collapsed drawer: center icons, hide labels -------------------------------- */
.cn-shell.cn-drawer-is-collapsed .cn-drawer-inner {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.cn-shell.cn-drawer-is-collapsed .cn-nav-section,
.cn-shell.cn-drawer-is-collapsed .cn-drawer-card,
.cn-shell.cn-drawer-is-collapsed .cn-drawer-footer-text,
.cn-shell.cn-drawer-is-collapsed .cn-nav-link .mud-nav-link-text,
.cn-shell.cn-drawer-is-collapsed .cn-nav-link.mud-nav-link .mud-nav-link-text {
    display: none !important;
}

.cn-shell.cn-drawer-is-collapsed .cn-nav-link,
.cn-shell.cn-drawer-is-collapsed .cn-nav-link.mud-nav-link {
    width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
}

.cn-shell.cn-drawer-is-collapsed .cn-nav-link > .mud-nav-link,
.cn-shell.cn-drawer-is-collapsed .cn-nav-link .mud-nav-link:not(.cn-nav-link) {
    justify-content: center !important;
}

.cn-shell.cn-drawer-is-collapsed .cn-nav-link .mud-nav-link-icon,
.cn-shell.cn-drawer-is-collapsed .cn-nav-link.mud-nav-link .mud-nav-link-icon {
    width: 58px !important;
    min-width: 58px !important;
    height: 58px !important;
    margin: 0 !important;
}

.cn-shell.cn-drawer-is-collapsed .cn-nav-link .mud-icon-root,
.cn-shell.cn-drawer-is-collapsed .cn-nav-link.mud-nav-link .mud-icon-root {
    width: 30px !important;
    height: 30px !important;
    font-size: 30px !important;
    line-height: 30px !important;
}

.cn-shell.cn-drawer-is-collapsed .cn-drawer-footer {
    justify-content: center !important;
    align-items: center !important;
    margin-top: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.cn-drawer-card-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    border-radius: 0;
    background: transparent;
}

.cn-drawer-card-icon img {
    width: 48px;
    height: 48px;
    display: block;
    object-fit: contain;
    filter: grayscale(1) saturate(0) opacity(0.72);
}

/* Standard card borders ----------------------------------------------------
   Borders stay independent from shadow strength. The card shadow itself is
   defined once at the end of this file. */
.cn-shell.cn-light {
    --cn-card-border: rgba(42, 72, 112, 0.22);
    --cn-card-border-soft: rgba(42, 72, 112, 0.16);
}

.cn-shell.cn-dark {
    --cn-card-border: rgba(190, 205, 230, 0.22);
    --cn-card-border-soft: rgba(190, 205, 230, 0.16);
}

.cn-page-hero,
.cn-kpi-card,
.cn-search-panel,
.cn-info-panel,
.cn-import-dropzone,
.cn-import-history-panel,
.cn-viewport-shell,
.cn-drawer-card {
    border-color: var(--cn-card-border-soft) !important;
}

.cn-filter-toolbar,
.cn-company-table th,
.cn-import-table th {
    border-bottom-color: var(--cn-card-border-soft) !important;
}

/* Result / loading info strip: fixed geometry -------------------------------
   The content may change from metric chips to a loading state, but the card itself
   must never change height or push the grid below it. */
.cn-info-panel {
    box-sizing: border-box !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 8px 12px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
}

.cn-info-row {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
}

.cn-info-left,
.cn-info-progress-wrap {
    min-height: 0 !important;
    align-items: center !important;
}

.cn-info-left {
    flex-wrap: nowrap !important;
    overflow: hidden !important;
}

.cn-info-actions {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    margin-left: auto;
}

.cn-info-actions .mud-button-root {
    min-height: 34px !important;
    padding-inline: 15px !important;
    font-weight: 800 !important;
    white-space: nowrap;
}

.cn-info-spinner {
    width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 24px !important;
}

.cn-info-progress-wrap {
    height: 100% !important;
}

/* Imports page --------------------------------------------------------------
   Compact import controls at the top (drop zone + KPI column in a fixed-height
   row), import history as the primary scrollable workspace below it. */
.cn-imports-page {
    height: 100%;
    min-height: 0;
    padding: 0 0 14px;
}

.cn-imports-hero {
    flex: 0 0 auto;
}

.cn-imports-hero-content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 52px;
}

.cn-import-refresh-button {
    flex: 0 0 auto;
}

/* Upload row: drop zone + KPI column, fixed height so a result message never
   shifts the layout or overlaps the history grid below it. Overflow stays
   visible on these layout containers so card shadows are not clipped; the
   dropzone panel and KPI cards each manage their own internal overflow. */
.cn-import-overview-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    height: 206px;
    flex: 0 0 206px;
    gap: 12px;
    overflow: visible;
}

.cn-import-dropzone-host,
.cn-imports-kpi-column {
    min-width: 0;
    min-height: 0;
    height: 100%;
}

.cn-import-overview-dropzone.cn-import-dropzone-panel {
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--cn-card-border-soft);
    border-radius: var(--cn-radius-lg);
    background: var(--cn-surface);
}

.cn-import-upload-main {
    height: 100%;
}

.cn-import-dropzone-target {
    height: 100%;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    column-gap: 22px;
    align-items: center;
    padding: 18px 30px 18px 44px;
    border: 0;
    border-radius: 15px;
    cursor: pointer;
}

.cn-import-overview-dropzone .cn-import-dropzone-target:hover {
    background: color-mix(in srgb, var(--cn-primary-soft) 30%, transparent);
}

.cn-import-dropzone-visual {
    display: flex;
    justify-content: center;
}

.cn-import-dropzone-icon {
    width: 80px;
    height: 80px;
    min-width: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--cn-primary);
    background: var(--cn-primary-soft);
}

.cn-import-dropzone-icon .mud-icon-root {
    font-size: 2.1rem !important;
}

.cn-import-dropzone-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    text-align: left;
}

.cn-import-dropzone-title {
    color: var(--cn-text);
    font-size: 1.1rem;
    line-height: 1.2;
    font-weight: 750;
}

.cn-import-dropzone-subtitle {
    color: var(--cn-muted);
    font-size: 0.85rem;
}

.cn-import-dropzone-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.cn-import-dropzone-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding-inline: 13px;
    border-radius: 999px;
    color: var(--cn-muted);
    background: color-mix(in srgb, var(--cn-muted) 12%, transparent);
    font-size: 0.74rem;
    font-weight: 650;
}

.cn-import-dropzone-actions {
    display: flex;
    align-items: center;
}

.cn-import-dropzone-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding-inline: 22px;
    border-radius: 12px;
    color: #ffffff;
    background: var(--cn-primary);
    font-size: 0.92rem;
    font-weight: 750;
    box-shadow: none;
    transition: box-shadow 140ms ease;
}

.cn-import-dropzone-button:hover {
    box-shadow: 0 3px 8px rgba(11, 101, 229, 0.16);
}

.cn-import-dropzone-button:active {
    box-shadow: none;
}

.cn-import-upload-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 30px 14px 44px;
    color: var(--cn-muted);
    font-size: 0.82rem;
}

/* Drag feedback: the browser owns the drag ghost; this gives the drop area a
   clear but restrained active state. */
.cn-import-dropzone-host.cn-import-dropzone-drag-active .cn-import-overview-dropzone,
.cn-import-overview-dropzone.cn-import-dropzone-drag-active {
    border-color: color-mix(in srgb, var(--cn-primary) 58%, var(--cn-border));
    box-shadow: 0 8px 20px color-mix(in srgb, var(--cn-primary) 14%, var(--cn-shadow));
}

.cn-import-dropzone-host.cn-import-dropzone-drag-active .cn-import-dropzone-target,
.cn-import-overview-dropzone.cn-import-dropzone-drag-active .cn-import-dropzone-target {
    background: color-mix(in srgb, var(--cn-primary-soft) 44%, transparent);
}

/* KPI column ------------------------------------------------------------------ */
.cn-imports-kpi-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.cn-import-side-kpi {
    min-height: 0 !important;
    padding: 8px 10px !important;
    gap: 9px !important;
    border-radius: 12px !important;
}

.cn-import-side-kpi:last-child {
    grid-column: 1 / -1;
}

.cn-import-side-kpi .cn-kpi-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
}

.cn-import-side-kpi .cn-kpi-icon .mud-icon-root {
    font-size: 1.1rem !important;
}

.cn-import-side-kpi > div:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding-block: 1px;
}

.cn-import-side-kpi .cn-kpi-label {
    margin-bottom: 3px;
    font-size: 0.74rem;
    line-height: 1.15;
}

.cn-import-side-kpi .cn-kpi-value {
    font-size: 1.12rem;
    line-height: 1;
}

/* Import history: the primary scrollable workspace --------------------------- */
.cn-import-history-panel {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.cn-import-feedback-slot {
    flex: 0 0 auto;
    padding: 8px 10px 0;
}

.cn-import-feedback-slot .cn-import-alert {
    margin: 0 !important;
}

.cn-import-history-classic .cn-import-history-header {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 10px 14px;
}

.cn-import-history-classic .cn-import-history-header > .flex-wrap {
    margin-right: 16px;
}

.cn-import-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow-y: auto;
    overflow-x: auto;
}

.cn-import-table-polished {
    width: 100%;
    min-width: 1180px;
    table-layout: fixed;
}

.cn-import-file-column {
    width: auto;
}

.cn-import-source-column {
    width: 164px;
}

.cn-import-date-column {
    width: 210px;
}

.cn-import-status-column {
    width: 98px;
}

.cn-import-parsed-column {
    width: 86px;
}

.cn-import-imported-column {
    width: 98px;
}

.cn-import-table-polished th,
.cn-import-table-polished td {
    padding: 8px 11px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cn-import-table-polished th {
    font-weight: 650;
}

.cn-import-file-cell,
.cn-import-file-cell span {
    min-width: 0;
    font-weight: 400;
}

.cn-import-file-cell span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cn-import-number-cell {
    text-align: right;
}

/* Import upload confirmation -------------------------------------------------- */
.cn-import-alert.mud-alert {
    color: var(--cn-primary) !important;
}

.cn-import-alert.mud-alert .mud-alert-message {
    color: var(--cn-primary) !important;
    font-weight: 650 !important;
}

.cn-import-alert.mud-alert .mud-alert-icon,
.cn-import-alert.mud-alert .mud-icon-root {
    color: var(--cn-primary) !important;
}

/* Import table empty state --------------------------------------------------- */
.cn-import-table-empty-cell {
    height: clamp(220px, 36vh, 360px);
    padding: 28px 24px !important;
    text-align: center;
    vertical-align: middle;
}

.cn-import-table-empty-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--cn-muted);
    line-height: 1.5;
}

.cn-import-table-empty-message > span:first-child {
    color: var(--cn-text);
    font-weight: 650;
}

@media (max-width: 1250px) {
    .cn-import-overview-layout {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .cn-import-dropzone-target {
        grid-template-columns: 84px minmax(0, 1fr) auto;
        column-gap: 16px;
        padding-left: 30px;
        padding-right: 20px;
    }

    .cn-import-source-column {
        width: 148px;
    }

}

@media (max-width: 1030px) {
    .cn-import-overview-layout {
        height: auto;
        flex-basis: auto;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    .cn-import-dropzone-host,
    .cn-imports-kpi-column {
        height: auto;
    }

    .cn-import-dropzone-target {
        height: auto;
        min-height: 182px;
    }

    .cn-imports-kpi-column {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: auto;
    }

    .cn-import-side-kpi {
        min-height: 72px !important;
    }

}

@media (max-width: 760px) {
    .cn-import-dropzone-target {
        min-height: 228px;
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        padding: 22px;
    }

    .cn-import-dropzone-visual,
    .cn-import-dropzone-copy,
    .cn-import-dropzone-actions {
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .cn-import-dropzone-tags {
        justify-content: center;
    }

    .cn-imports-kpi-column {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cn-import-source-column,
    .cn-import-date-column,
    .cn-import-parsed-column {
        display: none;
    }

    .cn-import-history-classic .cn-import-history-header > .flex-wrap {
        margin-right: 0;
    }

}

/* Companies page empty state polish ----------------------------------------- */
.cn-empty-cell-rich {
    padding: 0 !important;
}

.cn-company-empty-state {
    min-height: clamp(260px, 42vh, 420px);
    display: grid;
    place-items: center;
    padding: 36px 24px 44px;
    text-align: center;
    color: var(--cn-muted);
}

.cn-company-empty-state-card {
    width: min(100%, 560px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 36px;
    border: 1px solid color-mix(in srgb, var(--cn-primary) 15%, var(--cn-border-soft));
    border-radius: 22px;
    background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--cn-primary) 9%, transparent) 0%, transparent 54%),
        color-mix(in srgb, var(--cn-surface-soft) 80%, var(--cn-surface));
    box-shadow: 0 18px 38px color-mix(in srgb, var(--cn-shadow) 72%, transparent);
}

.cn-company-empty-state-icon {
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border: 1px solid color-mix(in srgb, var(--cn-primary) 20%, transparent);
    border-radius: 50%;
    color: var(--cn-primary);
    background: var(--cn-primary-soft);
}

.cn-company-empty-state-icon .mud-icon-root {
    font-size: 2.1rem !important;
}

.cn-company-empty-state-title {
    margin: 0 !important;
    color: var(--cn-text) !important;
    font-weight: 900 !important;
    letter-spacing: -0.015em;
}

.cn-company-empty-state-text {
    max-width: 410px;
    margin-top: 8px !important;
    color: var(--cn-muted) !important;
    line-height: 1.6 !important;
}

.cn-company-empty-state-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--cn-info) 22%, var(--cn-border-soft));
    border-radius: 999px;
    color: var(--cn-info);
    background: var(--cn-info-bg);
    font-size: 0.8rem;
    font-weight: 800;
}

.cn-company-empty-state-hint .mud-icon-root {
    font-size: 1rem !important;
}

/* Approved startup overlay C + current PDF toolbar/viewer are deliberately preserved below. */
/* Startup overlay -----------------------------------------------------------
   The UI stays available while the backend prepares its search foundation.
   The composition intentionally fits as a fixed desktop card; only narrow or
   low-height viewports fall back to document scrolling. */
.cn-startup-overlay {
    position: fixed;
    z-index: 3000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(16px, 3vw, 36px);
    overflow: hidden;
    color: #eaf2ff;
    background:
        radial-gradient(circle at 50% 48%, rgba(88, 179, 255, 0.18), transparent 34%),
        radial-gradient(circle at 16% 12%, rgba(135, 176, 222, 0.15), transparent 33%),
        radial-gradient(circle at 84% 80%, rgba(111, 157, 211, 0.13), transparent 37%),
        linear-gradient(148deg, #1a2a3e 0%, #2b3e55 51%, #1b2a3d 100%);
}

.cn-startup-overlay::before,
.cn-startup-overlay::after {
    position: absolute;
    pointer-events: none;
    content: "";
}

.cn-startup-overlay::before {
    inset: 0;
    opacity: 0.34;
    background-image: linear-gradient(rgba(207, 222, 240, 0.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(207, 222, 240, 0.032) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.68), transparent 84%);
}

.cn-startup-overlay::after {
    width: min(58vw, 820px);
    height: min(58vw, 820px);
    right: -24vw;
    bottom: -33vw;
    border: 1px solid rgba(166, 202, 238, 0.14);
    border-radius: 50%;
    box-shadow: 0 0 0 58px rgba(166, 202, 238, 0.040),
        0 0 0 116px rgba(166, 202, 238, 0.022);
}

.cn-startup-shell {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: min(100%, 980px);
    max-height: calc(100dvh - 32px);
    overflow: hidden;
    border: 1px solid rgba(127, 198, 255, 0.30);
    border-radius: 22px;
    background: radial-gradient(circle at 81% 6%, rgba(53, 198, 255, 0.13), transparent 28%),
        linear-gradient(152deg, rgba(14, 34, 66, 0.975), rgba(5, 16, 35, 0.99));
    box-shadow: 0 28px 78px rgba(3, 12, 28, 0.48),
        0 0 42px rgba(70, 174, 255, 0.10),
        0 0 0 1px rgba(255, 255, 255, 0.028) inset,
        0 1px 0 rgba(188, 232, 255, 0.10) inset;
}

.cn-startup-shell::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    background: linear-gradient(104deg, rgba(60, 161, 255, 0.075), transparent 31%, transparent 68%, rgba(61, 208, 255, 0.05));
}

.cn-startup-shell:focus,
.cn-startup-shell:focus-visible,
.cn-startup-shell *:focus {
    outline: none;
}

/* Brand row ----------------------------------------------------------------- */
.cn-startup-brand-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 72px;
    padding: 18px 28px;
    border-bottom: 1px solid rgba(130, 190, 245, 0.13);
    background: linear-gradient(90deg, rgba(7, 22, 47, 0.7), rgba(8, 21, 43, 0.22));
}

.cn-startup-brand {
    display: inline-flex;
    align-items: center;
    gap: 28px;
    font-size: 2.2rem;
    font-weight: 620;
}

.cn-startup-brand-mark {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    overflow: hidden;
    border: 1px solid rgba(75, 204, 255, 0.28);
    border-radius: 17px;
    background: radial-gradient(circle at 34% 30%, rgba(66, 218, 255, 0.43), rgba(18, 67, 125, 0.55) 58%, rgba(7, 23, 49, 0.78));
    box-shadow: 0 0 24px rgba(42, 188, 255, 0.13);
    transform: translateX(-8px);
}

.cn-startup-brand-mark .mud-icon-root {
    position: relative;
    z-index: 1;
    color: #76ddff;
    font-size: 2.35rem;
    filter: drop-shadow(0 0 8px rgba(92, 213, 255, 0.58));
}

.cn-startup-sweep {
    position: absolute;
    inset: -44%;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(96, 220, 255, 0.72) 18deg, transparent 62deg);
    animation: cn-startup-rotate 3.1s linear infinite;
}

.cn-startup-brand-name {
    display: inline-block;
    color: #f4f8ff;
    transform: translateY(-2px);
}

.cn-startup-ui-ready {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #76ddff;
    font-size: 0.88rem;
    font-weight: 820;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.cn-startup-ready-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #55c9ff;
    box-shadow: 0 0 0 5px rgba(85, 201, 255, 0.12), 0 0 14px rgba(85, 201, 255, 0.76);
}

/* Hero ---------------------------------------------------------------------- */
.cn-startup-body {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
    padding: 24px 28px 20px;
}

.cn-startup-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.46fr) minmax(220px, 0.54fr);
    align-items: center;
    gap: clamp(18px, 3vw, 40px);
    min-height: 180px;
}

.cn-startup-copy {
    min-width: 0;
}

.cn-startup-title {
    max-width: none;
    margin: 0 !important;
    color: #f5f8ff !important;
    font-size: clamp(1.38rem, 2.35vw, 2rem) !important;
    font-weight: 650 !important;
    line-height: 1.14 !important;
    letter-spacing: -0.034em !important;
    white-space: nowrap;
}

.cn-startup-title strong {
    color: #55c9ff;
    font-weight: 860;
    text-shadow: 0 0 24px rgba(67, 197, 255, 0.20);
}

.cn-startup-subtitle {
    max-width: 520px;
    margin-top: 11px !important;
    color: #a6bcd8 !important;
    font-size: 0.94rem !important;
    line-height: 1.52 !important;
}

.cn-startup-connection-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    margin-top: 17px;
    padding: 9px 14px;
    overflow: hidden;
    border: 1px solid rgba(81, 193, 255, 0.24);
    border-radius: 999px;
    color: #c9e6ff;
    background: linear-gradient(90deg, rgba(14, 51, 92, 0.64), rgba(11, 31, 62, 0.56));
    box-shadow: 0 8px 28px rgba(3, 17, 39, 0.34), inset 0 1px 0 rgba(210, 245, 255, 0.06);
    font-size: 0.8rem;
    font-weight: 660;
}

.cn-startup-retry-button {
    align-self: flex-start;
    margin-top: 14px;
}

.cn-startup-connection-pill .mud-progress-circular {
    flex: 0 0 auto;
    color: #3dc8ff !important;
}

/* Search visual ------------------------------------------------------------- */
.cn-startup-visual {
    position: relative;
    width: min(100%, 270px);
    aspect-ratio: 1;
    justify-self: end;
    display: grid;
    place-items: center;
    isolation: isolate;
}

.cn-startup-visual::before,
.cn-startup-visual::after {
    position: absolute;
    z-index: -2;
    border-radius: 50%;
    content: "";
}

.cn-startup-visual::before {
    inset: 13%;
    background: radial-gradient(circle, rgba(51, 193, 255, 0.20), rgba(24, 105, 204, 0.035) 57%, transparent 72%);
    filter: blur(2px);
}

.cn-startup-visual::after {
    inset: 0;
    background: radial-gradient(circle at 53% 48%, rgba(58, 200, 255, 0.10), transparent 58%);
    box-shadow: 0 0 54px rgba(42, 182, 255, 0.11);
}

.cn-startup-visual-orbit {
    position: absolute;
    border: 1px solid rgba(101, 208, 255, 0.16);
    border-radius: 50%;
}

.cn-startup-visual-orbit-outer {
    inset: 2%;
    border-style: dashed;
    opacity: 0.72;
    animation: cn-startup-rotate-reverse 18s linear infinite;
}

.cn-startup-visual-orbit-middle {
    inset: 16%;
    border-color: rgba(73, 184, 255, 0.20);
}

.cn-startup-visual-orbit-inner {
    inset: 29%;
    border-color: rgba(115, 222, 255, 0.24);
}

.cn-startup-visual-core {
    position: relative;
    z-index: 3;
    width: 76px;
    height: 76px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(107, 222, 255, 0.42);
    border-radius: 26px;
    color: #76dcff;
    background: radial-gradient(circle at 35% 28%, rgba(84, 219, 255, 0.40), rgba(16, 75, 141, 0.54) 60%, rgba(6, 27, 59, 0.90));
    box-shadow: 0 0 0 10px rgba(54, 188, 255, 0.04),
        0 0 32px rgba(49, 194, 255, 0.28),
        inset 0 1px 0 rgba(240, 253, 255, 0.28);
}

.cn-startup-visual-core .mud-icon-root {
    font-size: 2rem !important;
    filter: drop-shadow(0 0 9px rgba(104, 222, 255, 0.54));
}

.cn-startup-visual-node {
    position: absolute;
    z-index: 2;
    width: 8px;
    height: 8px;
    border: 2px solid rgba(167, 240, 255, 0.82);
    border-radius: 50%;
    background: #2fc2ff;
    box-shadow: 0 0 0 4px rgba(47, 194, 255, 0.10), 0 0 14px rgba(47, 194, 255, 0.84);
}

.cn-startup-visual-node-one {
    top: 15%;
    right: 18%;
}

.cn-startup-visual-node-two {
    right: 10%;
    bottom: 29%;
}

.cn-startup-visual-node-three {
    bottom: 17%;
    left: 26%;
}

.cn-startup-visual-node-four {
    top: 29%;
    left: 10%;
}

.cn-startup-visual-line {
    position: absolute;
    z-index: 1;
    height: 1px;
    transform-origin: left center;
    background: linear-gradient(90deg, rgba(63, 200, 255, 0.04), rgba(98, 218, 255, 0.62), rgba(63, 200, 255, 0.04));
    box-shadow: 0 0 9px rgba(72, 201, 255, 0.22);
}

.cn-startup-visual-line-one {
    width: 86px;
    top: 31%;
    left: 47%;
    transform: rotate(-29deg);
}

.cn-startup-visual-line-two {
    width: 100px;
    top: 61%;
    left: 49%;
    transform: rotate(24deg);
}

.cn-startup-visual-line-three {
    width: 96px;
    top: 64%;
    left: 20%;
    transform: rotate(-37deg);
}

.cn-startup-visual-caption {
    position: absolute;
    bottom: 4%;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(164, 218, 250, 0.72);
    font-size: 0.64rem;
    font-weight: 760;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Progress ------------------------------------------------------------------ */
.cn-startup-overlay-failed .cn-startup-shell {
    border-color: rgba(255, 164, 98, 0.38);
}

.cn-startup-overlay-failed .cn-startup-connection-pill {
    color: #ffe0cf;
    border-color: rgba(255, 151, 94, 0.36);
    background: rgba(82, 34, 18, 0.52);
}

.cn-startup-overlay-failed .cn-startup-connection-pill .mud-progress-circular {
    color: #ff9c68 !important;
}

.cn-startup-progress-panel {
    position: relative;
    display: grid;
    row-gap: 9px;
    min-height: 134px;
    padding: 16px 18px;
    overflow: hidden;
    border: 1px solid rgba(122, 191, 246, 0.16);
    border-radius: 18px;
    background: linear-gradient(104deg, rgba(12, 44, 82, 0.46), rgba(7, 21, 45, 0.68));
    box-shadow: inset 0 1px 0 rgba(197, 236, 255, 0.045), 0 10px 30px rgba(1, 9, 22, 0.20);
}

.cn-startup-progress-panel::after {
    position: absolute;
    top: -60px;
    right: 9%;
    width: 210px;
    height: 160px;
    pointer-events: none;
    border-radius: 50%;
    content: "";
    background: radial-gradient(circle, rgba(55, 197, 255, 0.11), transparent 66%);
}

.cn-startup-progress-heading {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #9cb9d7;
    font-size: 0.72rem;
    font-weight: 720;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.cn-startup-progress-heading .mud-icon-root {
    color: #4fcbff;
}

.cn-startup-activity {
    position: relative;
    z-index: 1;
    color: #f1f7ff;
    font-size: 1rem;
    font-weight: 760;
    letter-spacing: -0.012em;
}

.cn-startup-progress-track {
    position: relative;
    z-index: 1;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(118, 162, 208, 0.16);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

.cn-startup-progress-track > span {
    width: var(--cn-startup-progress-width);
    position: absolute;
    inset: 0 auto 0 0;
    min-width: 3px;
    border-radius: inherit;
    background: linear-gradient(90deg, #1b72dc 0%, #35c4ff 68%, #d0f8ff 100%);
    box-shadow: 0 0 16px rgba(54, 197, 255, 0.68);
    transition: width 0.28s ease-out;
}

.cn-startup-progress-indeterminate > span {
    width: 34%;
    background: linear-gradient(90deg, transparent, #36c5ff 52%, transparent);
    animation: cn-startup-flow 1.2s linear infinite;
}

.cn-startup-progress-caption {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: #8ea8c5;
    font-size: 0.73rem;
    font-variant-numeric: tabular-nums;
}

.cn-startup-progress-caption span:last-child {
    color: #6bd3ff;
    font-weight: 780;
}

/* Process rail -------------------------------------------------------------- */
.cn-startup-steps {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    padding: 14px 18px 18px;
    border-top: 1px solid rgba(129, 186, 240, 0.13);
    background: linear-gradient(180deg, rgba(4, 13, 29, 0.34), rgba(3, 10, 23, 0.60));
}

.cn-startup-step {
    position: relative;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    min-height: 66px;
    padding: 11px 10px;
    overflow: hidden;
    border: 1px solid rgba(119, 175, 229, 0.11);
    border-radius: 14px;
    color: #849cb9;
    background: rgba(9, 26, 52, 0.30);
}

.cn-startup-step + .cn-startup-step {
    border-left: 1px solid rgba(119, 175, 229, 0.11);
}

.cn-startup-step .mud-icon-root {
    color: #6580a0;
    font-size: 1.24rem;
}

.cn-startup-step strong {
    display: block;
    color: #e1ecfa;
    font-size: 0.76rem;
    font-weight: 760;
    line-height: 1.2;
}

.cn-startup-step span {
    display: block;
    margin-top: 3px;
    color: #839dbd;
    font-size: 0.67rem;
    line-height: 1.28;
}

.cn-startup-step-complete {
    border-color: rgba(76, 219, 144, 0.20);
    background: linear-gradient(130deg, rgba(27, 126, 91, 0.18), rgba(9, 38, 50, 0.23));
}

.cn-startup-step-complete .mud-icon-root {
    color: #57df98;
    filter: drop-shadow(0 0 8px rgba(78, 223, 147, 0.34));
}

.cn-startup-step-active {
    border-color: rgba(58, 192, 255, 0.34);
    background: linear-gradient(130deg, rgba(23, 125, 213, 0.22), rgba(12, 53, 93, 0.42));
    box-shadow: inset 0 1px 0 rgba(193, 242, 255, 0.10), 0 0 22px rgba(25, 168, 255, 0.08);
}

.cn-startup-step-active .mud-icon-root {
    color: #50cbff;
    animation: cn-startup-pulse 1.45s ease-in-out infinite;
}

.cn-startup-step-active::after {
    position: absolute;
    right: 12px;
    bottom: 0;
    left: 12px;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, transparent, #42c5ff, transparent);
    background-size: 200% 100%;
    animation: cn-startup-flow 1.6s linear infinite;
}

@keyframes cn-startup-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

@keyframes cn-startup-rotate-reverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }

}

@keyframes cn-startup-flow {
    from {
        background-position: 110% 0;
    }

    to {
        background-position: -110% 0;
    }

}

@keyframes cn-startup-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.12);
        opacity: 0.66;
    }

}

@media (prefers-reduced-motion: reduce) {
    .cn-startup-sweep,
    .cn-startup-visual-orbit-outer,
    .cn-startup-progress-indeterminate > span,
    .cn-startup-step-active .mud-icon-root,
    .cn-startup-step-active::after {
        animation: none;
    }

}

@media (max-width: 900px) {
    .cn-startup-title {
        white-space: normal;
    }

}

@media (max-width: 760px) {
    .cn-startup-brand-row {
        min-height: 66px;
        padding: 16px 20px;
    }

    .cn-startup-body {
        padding: 20px;
    }

    .cn-startup-hero-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        min-height: 0;
    }

    .cn-startup-visual {
        width: min(100%, 190px);
        justify-self: center;
        order: -1;
    }

    .cn-startup-title {
        font-size: clamp(1.3rem, 6.1vw, 1.75rem) !important;
    }

    .cn-startup-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 12px;
    }

}

@media (max-height: 720px), (max-width: 760px) {
    .cn-startup-overlay {
        display: block;
        overflow: auto;
    }

    .cn-startup-shell {
        max-height: none;
        margin: auto;
        overflow: visible;
    }

}

@media (max-width: 480px) {
    .cn-startup-brand-name {
        font-size: 0.94rem;
    }

    .cn-startup-ui-ready {
        font-size: 0.60rem;
        letter-spacing: 0.08em;
    }

    .cn-startup-connection-pill {
        display: flex;
        width: 100%;
        box-sizing: border-box;
    }

    .cn-startup-steps {
        grid-template-columns: 1fr;
    }

}

/* Shared page-hero and filter-toolbar layout --------------------------------- */
.cn-page-hero {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.cn-page-hero-copy {
    min-width: 0;
}


/* Filter toolbar command ownership ------------------------------------------
   Desktop actions live in the header to avoid a separate action row below the
   filter fields. The responsive rules below preserve a readable stacked layout. */
.cn-filter-toolbar-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
}

.cn-filter-toolbar-commands {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-right: 10px;
    border-right: 1px solid var(--cn-border-soft);
}

.cn-filter-toolbar-commands .mud-button-root {
    min-height: 34px !important;
    padding-inline: 12px !important;
    white-space: nowrap;
}

.cn-filter-toolbar-commands .cn-test-columns-toggle {
    min-height: 34px;
    margin: 0;
    gap: 7px;
    font-size: .82rem;
}

.cn-filter-toolbar-commands .cn-test-columns-toggle-track {
    width: 38px;
    height: 22px;
    flex-basis: 38px;
}

.cn-filter-toolbar-commands .cn-test-columns-toggle-thumb {
    width: 14px;
    height: 14px;
}

.cn-filter-toolbar-commands .cn-test-columns-toggle--active .cn-test-columns-toggle-thumb {
    transform: translateX(16px);
}

/* Dense wide-desktop filter grid: the eight primary fields use one calm row
   without shrinking text inputs on normal laptop widths. */
@media (min-width: 1680px) {
    .cn-primary-filter-grid > .mud-grid-item {
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }
}


@media (max-width: 1450px) {
    .cn-page-hero {
        min-height: 70px;
    }

}

@media (max-width: 900px) {
    .cn-page-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .cn-filter-toolbar {
        grid-template-columns: 1fr;
    }

    .cn-filter-toolbar-actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: stretch;
    }

    .cn-filter-toolbar-commands {
        flex: 1 1 auto;
        flex-wrap: wrap;
        padding-right: 0;
        border-right: 0;
    }

    .cn-filter-toolbar-actions .cn-filter-tab {
        flex: 1 1 0;
    }

    .cn-page-subtitle {
        white-space: normal;
    }


}

/* Standard card shadow control ---------------------------------------------
   This is the ONLY place for the normal light/dark card shadow.
   - Opacity: change the rgba alpha values below.
   - Depth: change the two offset/blur values in --cn-card-shadow.
   Special effects (drawer, menus, startup screen, dialogs and hover states)
   intentionally keep their own shadows because they are not normal page cards. */
.cn-shell.cn-light {
    --cn-shadow: rgba(20, 41, 75, 0.1);
    --cn-shadow-crisp: rgba(20, 41, 75, 0.10);
    --cn-card-shadow: 0 2px 4px var(--cn-shadow-crisp), 0 10px 24px var(--cn-shadow);
}

.cn-shell.cn-dark {
    --cn-shadow: rgba(0, 0, 0, 0.44);
    --cn-shadow-crisp: rgba(0, 0, 0, 0.34);
    --cn-card-shadow: 0 2px 4px var(--cn-shadow-crisp), 0 10px 24px var(--cn-shadow);
}

.cn-main-container,
.cn-page-stack {
    box-sizing: border-box !important;
}

.cn-page-stack {
    padding-bottom: 14px !important;
}

.cn-company-search-page {
    padding-bottom: 0 !important;
}

.cn-page-hero,
.cn-kpi-card,
.cn-search-panel,
.cn-info-panel,
.cn-import-dropzone,
.cn-import-history-panel,
.cn-viewport-shell,
.cn-drawer-card,
.cn-import-overview-dropzone.cn-import-dropzone-panel,
.cn-technical-fact-card,
.cn-technical-principle-card {
    box-shadow: var(--cn-card-shadow) !important;
}

.cn-viewport-shell {
    margin-bottom: 0 !important;
}

/* Unified card spacing -------------------------------------------------------
   The Company Search screen uses one deliberate spacing rhythm between every
   card-level surface: top summary cards, filter panel, info strip and grid.
   This removes the former mix of 8px, 10px, 14px and an extra summary-row
   bottom padding. */
.cn-shell {
    --cn-card-gap: 12px;
}

.cn-page-stack {
    gap: var(--cn-card-gap) !important;
}


.cn-kpi-strip {
    gap: var(--cn-card-gap) !important;
}




/* Unified view headers -----------------------------------------------------
   Company Search, Imports and Performance Lab share one full-width card
   contract: title and subtitle on the left, contextual information in the
   middle, and actions on the right. Only the interior content differs. */
.cn-view-header {
    --cn-view-header-height: 76px;
    --cn-view-header-padding-x: 16px;
    flex: 0 0 auto;
    box-sizing: border-box;
    height: var(--cn-view-header-height);
    min-height: var(--cn-view-header-height);
    padding: 12px var(--cn-view-header-padding-x);
}

/* One deliberate view-header typography contract keeps Company Search,
   Imports, Performance Lab and Technical Overview visually aligned. */
.cn-view-header .cn-page-title {
    margin: 0 0 5px 0 !important;
    color: var(--cn-text);
    font-size: 1.42rem !important;
    font-weight: 850 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.05 !important;
    transform: none;
}

.cn-view-header .cn-page-subtitle {
    margin: 0 !important;
    color: var(--cn-muted) !important;
    font-size: .84rem !important;
    line-height: 1.2 !important;
}

.cn-company-search-header {
    display: grid;
    grid-template-columns: minmax(260px, 1.05fr) minmax(620px, 2.45fr) auto;
    align-items: stretch;
    gap: 0;
    padding: 0 10px 0 16px;
}

.cn-company-search-header .cn-page-hero-copy {
    align-self: center;
    min-width: 0;
    padding-right: 16px;
}

.cn-company-search-header-kpis {
    align-self: stretch;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 !important;
}

.cn-company-search-header-kpis .cn-kpi-card {
    min-width: 0;
    min-height: 0;
    gap: 10px;
    padding: 0 14px;
    border: 0 !important;
    border-left: 1px solid var(--cn-card-border-soft) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.cn-company-search-header-kpis .cn-kpi-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 10px;
}

.cn-company-search-header-kpis .cn-kpi-label {
    font-size: .70rem;
}

.cn-company-search-header-kpis .cn-kpi-value {
    font-size: 1.16rem;
}

.cn-company-search-header-kpis .cn-kpi-subtitle {
    font-size: .68rem;
}

.cn-company-search-refresh-button {
    align-self: center;
    min-width: 102px;
    min-height: 42px !important;
    margin-left: 14px;
    border-radius: 11px !important;
    font-size: .80rem !important;
    font-weight: 780 !important;
}

.cn-performance-header {
    flex: 0 0 auto;
    min-height: 74px;
}

@media (max-width: 1380px) {
    .cn-company-search-header {
        grid-template-columns: minmax(230px, .92fr) minmax(530px, 2.2fr) auto;
    }

    .cn-company-search-header-kpis .cn-kpi-card {
        gap: 8px;
        padding-inline: 10px;
    }

    .cn-company-search-header-kpis .cn-kpi-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .cn-company-search-header-kpis .cn-kpi-value {
        font-size: 1.05rem;
    }
}

@media (max-width: 1120px) {
    .cn-company-search-header {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        padding: 12px 16px;
    }

    .cn-company-search-header-kpis {
        grid-column: 1 / -1;
        grid-row: 2;
        min-height: 62px;
        padding-top: 10px;
        border-top: 1px solid var(--cn-card-border-soft);
    }

    .cn-company-search-header-kpis .cn-kpi-card:first-child {
        border-left: 0 !important;
    }

    .cn-company-search-refresh-button {
        margin-left: 0;
    }
}

@media (max-width: 720px) {
    .cn-company-search-header {
        grid-template-columns: 1fr;
    }

    .cn-company-search-refresh-button {
        justify-self: stretch;
        width: 100%;
    }

    .cn-company-search-header-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-column: auto;
        grid-row: auto;
        padding-top: 0;
        border-top: 0;
    }

    .cn-company-search-header-kpis .cn-kpi-card {
        min-height: 62px;
        padding-block: 8px;
        border-top: 1px solid var(--cn-card-border-soft) !important;
    }

    .cn-company-search-header-kpis .cn-kpi-card:nth-child(odd) {
        border-left: 0 !important;
    }
}

/* Reference viewport grid ---------------------------------------------------
   Header and body deliberately have separate owners. The header remains outside
   the physical scroll surface; JavaScript mirrors only horizontal body movement.
   The body keeps the bounded physical spacer and virtual row window. */
.cn-viewport-shell {
    position: relative;
    isolation: isolate;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 260px;
    overflow: hidden;
    border: 1px solid var(--cn-border-soft);
    border-radius: var(--cn-radius-md);
    background: var(--cn-surface);
}

.cn-viewport-body-frame {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.cn-viewport-body-frame > .cn-grid-scroll-host {
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
}

.cn-grid-header-host {
    position: relative;
    z-index: 20;
    flex: 0 0 auto;
    width: var(--cn-viewport-client-width, 100%);
    min-width: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    border-bottom: 1px solid color-mix(in srgb, var(--cn-primary) 24%, var(--cn-border));
    background: var(--cn-surface);
}

.cn-grid-header-panel {
    min-width: 1280px;
    overflow: visible;
    box-shadow: none;
}

.cn-grid-header-host .cn-company-table {
    transform: translate3d(var(--cn-viewport-header-translate-x, 0px), 0, 0);
    transform-origin: top left;
    will-change: transform;
}

.cn-grid-header-host .cn-company-table thead {
    position: relative;
    z-index: 1;
}

.cn-grid-header-host .cn-company-table th {
    box-sizing: border-box;
    height: var(--cn-viewport-header-height);
    min-height: var(--cn-viewport-header-height);
    max-height: var(--cn-viewport-header-height);
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: middle;
}

.cn-viewport-host {
    position: relative;
    contain: layout paint style;
    --cn-viewport-canvas-top: 0px;
    --cn-viewport-window-translate: 0px;
    --cn-viewport-horizontal-offset: 0px;
    --cn-viewport-client-width: 100%;
    --cn-viewport-row-height: 40px;
    --cn-viewport-header-height: 34px;
}

.cn-viewport-spacer {
    position: relative;
    min-width: 1280px;
    overflow: hidden;
}

.cn-viewport-spacer[data-verification-columns="true"] {
    /*
     * The spacer is the only in-flow child that contributes to the native
     * scroll width. The virtual canvas is absolutely positioned and therefore
     * deliberately does not own this geometry.
     */
    width: 3220px;
}

.cn-viewport-body-canvas {
    position: absolute !important;
    inset: 0 auto auto 0;
    width: 100%;
    min-width: 1280px;
    transform: translate3d(0, var(--cn-viewport-canvas-top), 0);
    will-change: transform;
}

.cn-viewport-body-canvas .cn-company-table tbody {
    transform: translate3d(0, var(--cn-viewport-window-translate), 0);
    transform-origin: top left;
    will-change: transform;
}

.cn-viewport-body-canvas .cn-company-table tr.cn-company-row {
    height: var(--cn-viewport-row-height);
    min-height: var(--cn-viewport-row-height);
    max-height: var(--cn-viewport-row-height);
}

.cn-viewport-body-canvas .cn-company-table tr.cn-company-row > td {
    box-sizing: border-box;
    height: var(--cn-viewport-row-height);
    min-height: var(--cn-viewport-row-height);
    max-height: var(--cn-viewport-row-height);
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: middle;
}

/*
 * The browser placeholder is deliberately a sibling of .cn-grid-scroll-host.
 * It is fixed to the visible body frame rather than nested in the scrolled spacer,
 * so a native scrollbar drag does not require a vertical counter-transform on every
 * scroll event. JavaScript changes only this surface's size and horizontal offset.
 */
.cn-viewport-body-frame > .cn-viewport-browser-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 30;
    overflow: hidden;
    box-sizing: border-box;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    border-radius: 0;
    background: var(--cn-surface);
    border-inline: 1px solid color-mix(in srgb, var(--cn-primary) 20%, var(--cn-border-soft));
    transform: translate3d(0px, 0px, 0px);
    will-change: auto;
}

.cn-viewport-body-frame > .cn-viewport-browser-skeleton.cn-viewport-browser-skeleton-visible {
    visibility: visible;
    opacity: 1;
}

/*
 * A drag placeholder is intentionally static while the native scrollbar thumb moves.
 * This compact status pill makes that state explicit without claiming a measurable progress value.
 */
.cn-viewport-browser-skeleton-status {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 30px;
    max-width: calc(100% - 28px);
    padding: 0 12px;
    border: 1px solid color-mix(in srgb, var(--cn-primary) 30%, var(--cn-border-soft));
    border-radius: 999px;
    color: var(--cn-text);
    background: color-mix(in srgb, var(--cn-surface) 88%, var(--cn-primary) 12%);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--cn-text) 14%, transparent);
    transform: translate(-50%, -50%);
    font-size: .78rem;
    font-weight: 760;
    letter-spacing: .01em;
    line-height: 1;
    white-space: nowrap;
}

.cn-viewport-browser-skeleton-status-spinner {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    border: 2px solid color-mix(in srgb, var(--cn-primary) 26%, transparent);
    border-right-color: var(--cn-primary);
    border-radius: 999px;
    animation: cn-viewport-browser-skeleton-status-spin 780ms linear infinite;
}

@keyframes cn-viewport-browser-skeleton-status-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cn-viewport-browser-skeleton-status-spinner {
        animation: none;
    }
}

.cn-viewport-browser-skeleton-rows {
    display: grid;
    grid-auto-rows: var(--cn-viewport-row-height);
    width: max-content;
    min-width: 100%;
    align-content: start;
    min-height: 0;
    overflow: hidden;
    transform: translate3d(0px, 0px, 0px);
    will-change: transform;
    background: var(--cn-surface);
}

.cn-viewport-browser-skeleton-row {
    display: grid;
    grid-template-columns: 92px 330px 170px 108px 130px 280px 200px 140px 220px 200px;
    box-sizing: border-box;
    min-width: 1870px;
    height: var(--cn-viewport-row-height);
    min-height: var(--cn-viewport-row-height);
    max-height: var(--cn-viewport-row-height);
    align-items: center;
    padding: 0 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--cn-primary) 16%, var(--cn-border-soft));
    background: color-mix(in srgb, var(--cn-primary) 7%, var(--cn-surface));
}

.cn-viewport-browser-skeleton-row:nth-child(even) {
    background: color-mix(in srgb, var(--cn-primary) 11%, var(--cn-surface));
}

.cn-viewport-browser-skeleton[data-verification-columns="true"] .cn-viewport-browser-skeleton-row {
    grid-template-columns:
        92px 330px 170px 108px 130px 280px 200px 140px 220px 200px
        300px 300px 300px 150px 150px 150px;
    min-width: 3220px;
}

.cn-viewport-browser-skeleton-cell {
    display: block;
    height: 11px;
    margin: 0 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cn-primary) 34%, var(--cn-surface-soft));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--cn-primary) 12%, transparent);
}

.cn-viewport-browser-skeleton-cell:nth-child(2),
.cn-viewport-browser-skeleton-cell:nth-child(6) {
    width: 78%;
}

.cn-viewport-browser-skeleton-cell:nth-child(9),
.cn-viewport-browser-skeleton-cell:nth-child(10),
.cn-viewport-browser-skeleton-cell:nth-child(11) {
    width: 42%;
}

.cn-viewport-body-canvas .cn-company-table tr.cn-company-row-skeleton,
.cn-viewport-body-canvas .cn-company-table tr.cn-company-row-skeleton > td {
    box-sizing: border-box;
    height: var(--cn-viewport-row-height);
    min-height: var(--cn-viewport-row-height);
    max-height: var(--cn-viewport-row-height);
    padding: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--cn-primary) 16%, var(--cn-border-soft));
    background: color-mix(in srgb, var(--cn-primary) 7%, var(--cn-surface));
}

.cn-viewport-body-canvas .cn-company-table tr.cn-company-row-skeleton:nth-child(even) > td {
    background: color-mix(in srgb, var(--cn-primary) 11%, var(--cn-surface));
}

.cn-viewport-window-skeleton-bar {
    display: block;
    height: 11px;
    margin: 0 16px;
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--cn-primary) 34%, var(--cn-surface-soft)) 0 4%,
            transparent 4% 6%,
            color-mix(in srgb, var(--cn-primary) 34%, var(--cn-surface-soft)) 6% 24%,
            transparent 24% 28%,
            color-mix(in srgb, var(--cn-primary) 34%, var(--cn-surface-soft)) 28% 45%,
            transparent 45% 49%,
            color-mix(in srgb, var(--cn-primary) 34%, var(--cn-surface-soft)) 49% 66%,
            transparent 66% 70%,
            color-mix(in srgb, var(--cn-primary) 34%, var(--cn-surface-soft)) 70% 86%,
            transparent 86% 89%,
            color-mix(in srgb, var(--cn-primary) 34%, var(--cn-surface-soft)) 89% 100%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--cn-primary) 12%, transparent);
}


/* ==========================================================================
   Sort transition, execution-mode lifecycle, and prepared Performance page
   ========================================================================== */

.cn-grid-sort-transition {
    position: relative;
}

.cn-grid-sort-transition .cn-company-table tbody {
    opacity: 0.56;
    transition: opacity 120ms ease;
    pointer-events: none;
}

.cn-grid-sort-transition-indicator {
    position: absolute;
    z-index: 30;
    top: calc(var(--cn-viewport-header-height) + 10px);
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid color-mix(in srgb, var(--cn-primary) 36%, var(--cn-border-soft));
    border-radius: 999px;
    background: color-mix(in srgb, var(--cn-surface) 94%, var(--cn-primary) 6%);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--cn-shadow) 44%, transparent);
    color: var(--cn-text);
    font-size: 0.78rem;
    font-weight: 750;
    pointer-events: none;
    transform: translateX(-50%);
}

/* Execution-mode status ---------------------------------------------------
   The app-bar mode status deliberately uses the same visual treatment as the
   other shell pills. Its text communicates the lifecycle state; the detailed
   mode controls on the Performance page retain their dedicated mode palette. */
.cn-top-pill.cn-execution-mode-status {
    width: 236px;
    min-width: 236px;
    max-width: 236px;
    height: 32px !important;
    min-height: 32px !important;
    justify-content: center;
    border-color: rgba(255, 255, 255, 0.36) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.13) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: 0;
    white-space: nowrap;
}

.cn-top-pill.cn-execution-mode-status .mud-chip-content {
    width: 100%;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cn-shell.cn-light .cn-top-pill.cn-execution-mode-status-preparing,
.cn-shell.cn-light .cn-top-pill.cn-execution-mode-status-ready,
.cn-shell.cn-light .cn-top-pill.cn-execution-mode-status-failed,
.cn-shell.cn-dark .cn-top-pill.cn-execution-mode-status-preparing,
.cn-shell.cn-dark .cn-top-pill.cn-execution-mode-status-ready,
.cn-shell.cn-dark .cn-top-pill.cn-execution-mode-status-failed {
    border-color: rgba(255, 255, 255, 0.36) !important;
    background: rgba(255, 255, 255, 0.13) !important;
    color: #ffffff !important;
}

/* Performance Lab ---------------------------------------------------------
   The surrounding card language deliberately follows the active application
   theme. Only the actual instrument surfaces stay permanently dark, so SVG
   gauges retain one reliable premium rendering in Light and Dark mode. */
.cn-performance-page {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cn-card-gap);
    overflow: hidden;
    box-sizing: border-box;
    padding-bottom: var(--cn-card-gap);
}

/* Operation overlay: visible only while a real Benchmark or execution-mode
   transition is active. Counts are sourced directly from benchmark/lifecycle
   state; it never simulates progress. */
.cn-performance-operation-overlay {
    position: fixed;
    z-index: 1400;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 28px;
    box-sizing: border-box;
    cursor: progress;
    background: rgba(4, 13, 24, .52);
    backdrop-filter: blur(5px);
}

.cn-performance-operation-card {
    width: min(100%, 520px);
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 17px;
    padding: 23px 24px 20px;
    border: 1px solid rgba(105, 177, 241, .34);
    border-radius: 18px;
    color: #f2f8ff;
    background:
        radial-gradient(circle at 8% 0%, rgba(78, 179, 255, .15), transparent 42%),
        linear-gradient(145deg, rgba(13, 34, 55, .98), rgba(5, 17, 29, .98));
    box-shadow: 0 24px 70px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.cn-performance-operation-icon {
    position: relative;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(103, 205, 246, .36);
    border-radius: 16px;
    color: #b6ecff;
    background: rgba(26, 122, 173, .16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 22px rgba(55, 187, 245, .14);
}

.cn-performance-operation-icon .mud-icon-root {
    position: relative;
    z-index: 1;
}

.cn-performance-operation-spinner {
    position: absolute;
    inset: -6px;
    border: 2px solid rgba(113, 216, 255, .18);
    border-top-color: #73ddff;
    border-right-color: #73ddff;
    border-radius: 999px;
    animation: cn-performance-operation-spin 850ms linear infinite;
}

.cn-performance-operation-copy {
    min-width: 0;
}

.cn-performance-operation-eyebrow {
    display: block;
    color: #77d8ff;
    font-size: .70rem;
    font-weight: 850;
    letter-spacing: .12em;
    line-height: 1.2;
    text-transform: uppercase;
}

.cn-performance-operation-copy h2 {
    margin: 6px 0 0;
    color: #f6fbff;
    font-size: 1.25rem;
    font-weight: 860;
    letter-spacing: -.025em;
    line-height: 1.18;
}

.cn-performance-operation-copy p {
    margin: 8px 0 0;
    color: #b9cee1;
    font-size: .84rem;
    font-weight: 620;
    line-height: 1.48;
}

.cn-performance-operation-progress-block {
    grid-column: 1 / -1;
    display: grid;
    gap: 9px;
    margin-top: 1px;
}

.cn-performance-operation-progress {
    height: 7px;
    overflow: hidden;
    border: 1px solid rgba(125, 189, 234, .21);
    border-radius: 999px;
    background: rgba(1, 9, 17, .48);
}

.cn-performance-operation-progress .mud-progress-linear {
    height: 100% !important;
}

.cn-performance-operation-progress .mud-progress-linear-bar {
    background: linear-gradient(90deg, #3caee8, #76ecdf, #ffe07b) !important;
}

.cn-performance-operation-progress-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    color: #a9c1d7;
    font-size: .76rem;
    font-weight: 720;
}

.cn-performance-operation-progress-meta strong {
    color: #f4fbff;
    font-size: .94rem;
    font-weight: 850;
    letter-spacing: -.01em;
    white-space: nowrap;
}

@keyframes cn-performance-operation-spin {
    to {
        transform: rotate(360deg);
    }
}

.cn-performance-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 22px;
}

.cn-performance-header .cn-page-title {
    font-size: clamp(1.55rem, 1.85vw, 2.05rem);
    font-weight: 880;
    letter-spacing: -.035em;
}

.cn-performance-header-status-slot {
    min-width: 0;
    display: flex;
    justify-content: center;
}

.cn-performance-header-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--cn-border);
    border-radius: 999px;
    color: var(--cn-text);
    background: var(--cn-surface-soft);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    font-size: .80rem;
    font-weight: 800;
    white-space: nowrap;
}

.cn-performance-header-status-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 999px;
    background: #6c86a2;
    box-shadow: 0 0 0 3px rgba(108, 134, 162, .14);
}

.cn-performance-header-status-ready {
    border-color: rgba(0, 137, 202, .30);
    color: #09658f;
    background: rgba(41, 177, 230, .11);
}

.cn-shell.cn-dark .cn-performance-header-status-ready {
    color: #c8f1ff;
    background: rgba(17, 107, 155, .30);
}

.cn-performance-header-status-ready .cn-performance-header-status-dot {
    background: #20b8ee;
    box-shadow: 0 0 0 3px rgba(32, 184, 238, .14), 0 0 12px rgba(32, 184, 238, .30);
}

.cn-performance-header-status-preparing {
    border-color: rgba(226, 122, 35, .35);
    color: #995318;
    background: rgba(240, 146, 55, .12);
}

.cn-shell.cn-dark .cn-performance-header-status-preparing {
    color: #ffe0bd;
    background: rgba(122, 71, 26, .24);
}

.cn-performance-header-status-preparing .cn-performance-header-status-dot {
    background: #ec8b35;
    box-shadow: 0 0 0 3px rgba(236, 139, 53, .16), 0 0 12px rgba(236, 139, 53, .28);
}

.cn-performance-header-status-failed {
    border-color: rgba(210, 64, 83, .38);
    color: #a21832;
    background: rgba(223, 70, 90, .10);
}

.cn-shell.cn-dark .cn-performance-header-status-failed {
    color: #ffd7dc;
    background: rgba(124, 34, 50, .27);
}

.cn-performance-header-status-failed .cn-performance-header-status-dot {
    background: #e95d72;
    box-shadow: 0 0 0 3px rgba(233, 93, 114, .16);
}

.cn-performance-header-mode-control {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 22px;
    min-height: 46px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.cn-performance-header-mode-selector {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-height: 40px;
    padding-left: 22px;
    border-left: 1px solid var(--cn-border-soft);
}

.cn-performance-header-mode-label {
    padding: 0;
    color: var(--cn-muted);
    font-size: .75rem;
    font-weight: 830;
    letter-spacing: .075em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cn-performance-header-mode-unavailable {
    padding: 0 8px 0 2px;
    color: var(--cn-danger);
    font-size: .72rem;
    font-weight: 720;
    white-space: nowrap;
}

.cn-performance-mode-toggle {
    overflow: hidden;
    border: 1px solid var(--cn-border-soft) !important;
    border-radius: 11px !important;
    background: var(--cn-surface) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}

.cn-performance-mode-toggle .mud-button-root.cn-performance-mode-button {
    min-width: 126px;
    min-height: 40px;
    padding: 0 15px;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--cn-muted) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: .84rem !important;
    font-weight: 850 !important;
    letter-spacing: .008em;
    opacity: 1 !important;
    transition: color 150ms ease, background 150ms ease, box-shadow 150ms ease !important;
}

.cn-performance-mode-toggle .mud-button-root.cn-performance-mode-button:hover:not(:disabled) {
    color: var(--cn-text) !important;
    background: var(--cn-primary-soft) !important;
}

.cn-performance-mode-toggle .mud-button-root.cn-performance-mode-button:disabled:not(.cn-performance-mode-button-active) {
    color: var(--cn-muted-2) !important;
}

.cn-performance-mode-toggle .mud-button-root.cn-performance-mode-button-reference.cn-performance-mode-button-active,
.cn-performance-mode-toggle .mud-button-root.cn-performance-mode-button-reference.cn-performance-mode-button-active:disabled,
.cn-performance-mode-toggle .mud-button-root.cn-performance-mode-button-reference.cn-performance-mode-button-active.mud-disabled {
    color: #f5fbff !important;
    background: linear-gradient(135deg, #1674d0, #3d9ff4) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .17), 0 0 16px rgba(61, 159, 244, .18) !important;
}

.cn-performance-mode-toggle .mud-button-root.cn-performance-mode-button-optimize.cn-performance-mode-button-active,
.cn-performance-mode-toggle .mud-button-root.cn-performance-mode-button-optimize.cn-performance-mode-button-active:disabled,
.cn-performance-mode-toggle .mud-button-root.cn-performance-mode-button-optimize.cn-performance-mode-button-active.mud-disabled {
    color: #fff8ed !important;
    background: linear-gradient(135deg, #b95014, #f28a30) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 18px rgba(242, 138, 48, .22) !important;
}

.cn-performance-lab-shell {
    --cn-lab-surface-deep: #07131f;
    --cn-lab-border: rgba(107, 143, 183, .20);
    --cn-lab-border-soft: rgba(107, 143, 183, .14);
    --cn-lab-text: #f2f7ff;
    --cn-lab-muted: #9ab1c9;
    --cn-lab-muted-strong: #c5d7e9;
    --cn-lab-blue: #63b6ff;
    --cn-lab-cyan: #52d9e9;
    --cn-lab-amber: #ff9c45;
    --cn-lab-violet: #b192ff;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
    background: transparent;
}

.cn-performance-lab-preparing {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) minmax(120px, .28fr);
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 13px;
    border: 1px solid rgba(226, 122, 35, .34);
    border-radius: var(--cn-radius-md);
    color: #80400e;
    background: rgba(240, 146, 55, .10);
    box-shadow: var(--cn-card-shadow);
    font-size: .77rem;
    font-weight: 690;
}

.cn-shell.cn-dark .cn-performance-lab-preparing {
    color: #ffd8b0;
    background: rgba(107, 61, 24, .25);
}

.cn-performance-lab-preparing-progress {
    height: 4px !important;
    border-radius: 999px;
    overflow: hidden;
}

.cn-performance-lab-preparing-progress .mud-progress-linear-bar {
    background: linear-gradient(90deg, #e56c1e, #ffb16b) !important;
}

.cn-performance-lab-preparing .mud-icon-root {
    color: #d76f21;
}

.cn-shell.cn-dark .cn-performance-lab-preparing .mud-icon-root {
    color: #ffac60;
}

.cn-performance-lab-error-alert {
    margin: 0 !important;
    border-radius: var(--cn-radius-md) !important;
    box-shadow: var(--cn-card-shadow);
}

/* Scenario strip ------------------------------------------------------------ */
.cn-performance-scenario-panel,
.cn-performance-instrument,
.cn-performance-panel {
    min-width: 0;
    border: 1px solid var(--cn-card-border-soft);
    border-radius: var(--cn-radius-md);
    color: var(--cn-text);
    background: var(--cn-surface);
    box-shadow: var(--cn-card-shadow);
}

.cn-shell.cn-dark .cn-performance-scenario-panel,
.cn-shell.cn-dark .cn-performance-instrument,
.cn-shell.cn-dark .cn-performance-panel {
    background: var(--cn-surface);
}

.cn-performance-scenario-panel {
    display: grid;
    grid-template-columns: minmax(320px, 1.05fr) minmax(210px, .55fr) minmax(230px, .62fr) auto;
    align-items: center;
    gap: 18px;
    min-height: 104px;
    padding: 14px 18px 16px;
}

.cn-performance-panel-eyebrow,
.cn-performance-instrument-eyebrow {
    display: inline-flex;
    align-items: center;
    color: var(--cn-primary);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .11em;
    line-height: 1.2;
    text-transform: uppercase;
}

.cn-performance-scenario-primary h2,
.cn-performance-panel h2 {
    margin: 5px 0 0;
    color: var(--cn-text);
    font-size: 1.18rem;
    font-weight: 850;
    letter-spacing: -.015em;
    line-height: 1.2;
}

.cn-performance-scenario-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 12px;
}

.cn-performance-scenario-facts > div {
    display: grid;
    gap: 4px;
    min-width: 118px;
    padding: 0 18px;
    border-left: 1px solid var(--cn-card-border-soft);
}

.cn-performance-scenario-facts > div:first-child {
    padding-left: 0;
    border-left: 0;
}

.cn-performance-scenario-facts span,
.cn-performance-run-result-label {
    color: var(--cn-muted);
    font-size: .68rem;
    font-weight: 820;
    letter-spacing: .09em;
    line-height: 1.2;
    text-transform: uppercase;
}

.cn-performance-scenario-facts strong {
    color: var(--cn-text);
    font-size: .84rem;
    font-weight: 850;
    line-height: 1.2;
    white-space: nowrap;
}

.cn-performance-scenario-state-block {
    display: grid;
    align-self: stretch;
    align-content: center;
    justify-items: center;
    gap: 7px;
    min-width: 0;
    padding: 10px 22px;
    border-left: 1px solid var(--cn-card-border-soft);
    border-right: 1px solid var(--cn-card-border-soft);
    text-align: center;
}

.cn-performance-scenario-state {
    display: block;
    color: #b15d18;
    font-size: 1.04rem;
    font-weight: 880;
    letter-spacing: -.015em;
    line-height: 1.15;
    white-space: nowrap;
}

.cn-shell.cn-dark .cn-performance-scenario-state {
    color: #ffd2a5;
}

.cn-performance-scenario-timestamp {
    color: var(--cn-muted);
    font-size: .78rem;
    font-weight: 760;
    line-height: 1.2;
    white-space: nowrap;
}

.cn-performance-scenario-result {
    display: grid;
    justify-items: center;
    gap: 9px;
    min-width: 0;
    text-align: center;
}

.cn-performance-scenario-result strong {
    color: var(--cn-primary);
    font-size: clamp(1.60rem, 1.90vw, 2.25rem);
    font-weight: 880;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.045em;
    line-height: 1;
    white-space: nowrap;
}

.cn-performance-run-result-detail {
    color: var(--cn-muted);
    font-size: .79rem;
    font-weight: 680;
    line-height: 1.35;
}

/* Four equal timing instruments -------------------------------------------- */
.cn-performance-gauge-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    /* The timing deck is the flexible desktop row. It receives every remaining
       viewport pixel after the scenario, compact benchmark row and lifecycle
       summary have taken their natural space. */
    flex: 1 1 0;
    min-height: clamp(250px, 30vh, 360px);
}

.cn-performance-gauge-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    padding: 14px 16px 13px;
    overflow: visible;
    border-color: rgba(115, 151, 188, .34);
    color: var(--cn-lab-text);
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 255, 255, .035), transparent 48%),
        linear-gradient(145deg, #0a1a2b, var(--cn-lab-surface-deep));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), var(--cn-card-shadow);
}

.cn-performance-gauge-card-header {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 0 2px;
}

.cn-performance-gauge-card-header span {
    color: #a9c1d9;
    font-size: .78rem;
    font-weight: 830;
    letter-spacing: .09em;
    line-height: 1.2;
    text-transform: uppercase;
}

.cn-performance-gauge-card-header h3 {
    margin: 0;
    color: #f5fbff;
    font-size: 1.02rem;
    font-weight: 870;
    letter-spacing: -.01em;
    line-height: 1.15;
}

.cn-performance-gauge-card .cn-performance-gauge {
    display: grid;
    align-self: stretch;
    align-content: center;
    justify-items: center;
    min-height: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.cn-performance-gauge-card .cn-performance-gauge::before {
    opacity: .42;
}

.cn-performance-gauge-face {
    position: relative;
    z-index: 1;
    display: block;
    width: min(100%, clamp(190px, 25vh, 290px));
    max-width: 100%;
    aspect-ratio: 1;
    align-self: center;
    justify-self: center;
}

.cn-performance-gauge-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.cn-performance-gauge-track,
.cn-performance-gauge-value {
    stroke-width: 10;
    stroke-linecap: round;
}

.cn-performance-gauge-track {
    stroke: rgba(142, 177, 214, .16);
}

.cn-performance-gauge-value {
    stroke-width: 11;
    filter: drop-shadow(0 0 9px var(--cn-gauge-glow));
}

.cn-performance-gauge-tick {
    stroke: rgba(173, 204, 236, .24);
    stroke-width: 1.1;
}

.cn-performance-gauge-tick-major {
    stroke: rgba(211, 231, 252, .48);
    stroke-width: 1.8;
}

.cn-performance-gauge-gradient-start {
    stop-color: var(--cn-gauge-start);
}

.cn-performance-gauge-gradient-end {
    stop-color: var(--cn-gauge-end);
}

.cn-performance-gauge {
    --cn-gauge-start: #ff6f25;
    --cn-gauge-end: #ffd768;
    --cn-gauge-glow: rgba(255, 145, 52, .42);
    --cn-gauge-readout: #fff8ec;
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 0;
    container-type: size;
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    align-content: center;
    gap: 5px;
    color: var(--cn-gauge-readout);
}

.cn-performance-gauge::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    opacity: .64;
    background: radial-gradient(circle at 50% 118%, var(--cn-gauge-glow), transparent 45%);
}

.cn-performance-gauge-amber {
    --cn-gauge-start: #ee611e;
    --cn-gauge-end: #ffda72;
    --cn-gauge-glow: rgba(255, 151, 55, .25);
    --cn-gauge-readout: #fff7e9;
}

.cn-performance-gauge-cyan {
    --cn-gauge-start: #1a9fbd;
    --cn-gauge-end: #70f0e3;
    --cn-gauge-glow: rgba(79, 227, 214, .24);
    --cn-gauge-readout: #eaffff;
}

.cn-performance-gauge-blue {
    --cn-gauge-start: #2b70d5;
    --cn-gauge-end: #8bc7ff;
    --cn-gauge-glow: rgba(84, 166, 255, .24);
    --cn-gauge-readout: #edf6ff;
}

.cn-performance-gauge-violet {
    --cn-gauge-start: #7951dc;
    --cn-gauge-end: #d2bcff;
    --cn-gauge-glow: rgba(169, 129, 255, .25);
    --cn-gauge-readout: #f6eeff;
}

.cn-performance-gauge-readout {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    pointer-events: none;
    text-align: center;
}

.cn-performance-gauge-label {
    display: block;
    max-width: calc(100% - 20px);
    overflow: hidden;
    color: #b7cce1;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.14px;
    line-height: 1.1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cn-performance-gauge-value-text {
    display: block;
    max-width: calc(100% - 20px);
    overflow: visible;
    color: var(--cn-gauge-readout);
    font-size: 46px;
    font-weight: 880;
    letter-spacing: -1.75px;
    line-height: .98;
    white-space: nowrap;
}

.cn-performance-gauge-value-text.cn-performance-gauge-value-medium {
    font-size: 39px;
    letter-spacing: -1.4px;
}

.cn-performance-gauge-value-text.cn-performance-gauge-value-compact {
    font-size: 32px;
    letter-spacing: -1.1px;
}

.cn-performance-gauge-unit {
    display: block;
    color: var(--cn-gauge-end);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .9px;
    line-height: 1;
    text-transform: uppercase;
}

.cn-performance-gauge-supporting {
    display: none;
}

/* Benchmark chart and direct comparison ------------------------------------ */
.cn-performance-lower-grid {
    display: grid;
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    align-items: stretch;
    /* The benchmark workspace stays compact so the timing instruments own the
       remaining desktop height rather than leaving unused canvas below. */
    flex: 0 0 clamp(174px, 19vh, 212px);
    min-height: 0;
    gap: 10px;
}

.cn-performance-panel {
    display: flex;
    min-height: 0;
    height: auto;
    box-sizing: border-box;
    flex-direction: column;
    padding: 15px 16px;
}

.cn-performance-lower-grid > .cn-performance-panel {
    height: 100%;
}

.cn-performance-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.cn-performance-panel-header > .mud-icon-root {
    flex: 0 0 auto;
    color: var(--cn-primary);
}

.cn-performance-comparison-body {
    display: grid;
    gap: 7px;
    margin-top: 8px;
}

.cn-performance-comparison-series {
    display: grid;
    grid-template-columns: 114px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.cn-performance-comparison-copy {
    display: grid;
    gap: 3px;
}

.cn-performance-comparison-copy strong {
    color: var(--cn-text);
    font-size: 1.42rem;
    font-weight: 880;
    letter-spacing: -.045em;
    line-height: 1;
}

.cn-performance-comparison-copy strong small {
    font-size: .66em;
    font-weight: 820;
    letter-spacing: 0;
}

.cn-performance-comparison-copy .cn-performance-comparison-value-pending {
    color: var(--cn-muted);
    font-size: 1rem;
    letter-spacing: 0;
}

.cn-performance-comparison-copy > span:last-child {
    color: var(--cn-muted);
    font-size: .71rem;
    font-weight: 700;
    line-height: 1.2;
}

.cn-performance-comparison-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cn-muted);
    font-size: .72rem;
    font-weight: 830;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cn-performance-comparison-label::before {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 999px;
    content: "";
}

.cn-performance-comparison-label-reference::before {
    background: #f79240;
}

.cn-performance-comparison-label-optimize::before {
    background: #54d9ea;
}

.cn-performance-comparison-track {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cn-surface-soft) 84%, var(--cn-border-soft));
}

.cn-performance-comparison-pending {
    min-height: 38px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border: 1px dashed var(--cn-card-border-soft);
    border-radius: 9px;
    color: var(--cn-muted);
    background: var(--cn-surface-soft);
    font-size: .72rem;
    font-weight: 730;
    line-height: 1.25;
}

.cn-performance-comparison-fill {
    display: block;
    height: 100%;
    min-width: 8px;
    border-radius: inherit;
}

.cn-performance-comparison-fill-reference {
    background: linear-gradient(90deg, #d9671e, #ffb26d);
}

.cn-performance-comparison-fill-optimize {
    background: linear-gradient(90deg, #149eba, #72eee4);
}

.cn-performance-improvement-card {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) minmax(0, auto);
    align-items: center;
    gap: 10px;
    min-height: 46px;
    margin-top: 8px;
    padding: 7px 10px;
    border: 1px solid rgba(24, 145, 191, .28);
    border-radius: 12px;
    color: #0c6687;
    background: rgba(39, 174, 221, .11);
}

.cn-shell.cn-dark .cn-performance-improvement-card {
    color: #d5f6ff;
    background: linear-gradient(135deg, rgba(12, 105, 139, .38), rgba(6, 45, 68, .54));
}

.cn-performance-improvement-card .mud-icon-root {
    color: #149cbf;
}

.cn-shell.cn-dark .cn-performance-improvement-card .mud-icon-root {
    color: #73e2f4;
}

.cn-performance-improvement-card > div {
    display: grid;
    gap: 2px;
}

.cn-performance-improvement-card strong {
    font-size: 1.42rem;
    font-weight: 880;
    letter-spacing: -.05em;
    line-height: 1;
}

.cn-performance-improvement-card span {
    color: currentColor;
    font-size: .74rem;
    font-weight: 760;
    line-height: 1.25;
    opacity: .82;
}

.cn-performance-improvement-card .cn-performance-improvement-detail {
    color: currentColor;
    font-size: .75rem;
    text-align: right;
    white-space: nowrap;
    opacity: .9;
}

.cn-performance-chart-panel {
    min-height: 0;
}

.cn-performance-chart-wrap {
    display: flex;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    margin-top: 8px;
    padding: 6px 8px 2px;
    overflow: hidden;
    border: 1px solid rgba(115, 151, 188, .34);
    border-radius: 12px;
    background: linear-gradient(145deg, #0a1a2b, #07131f);
}

.cn-performance-chart-wrap svg {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: visible;
}

.cn-performance-chart-grid {
    stroke: rgba(139, 184, 227, .16);
    stroke-width: 1;
}

.cn-performance-chart-axis-label,
.cn-performance-chart-run-label,
.cn-performance-chart-empty-label {
    fill: #a6bbd0;
    font-size: 13px;
    font-weight: 720;
}

.cn-performance-chart-run-label {
    fill: #d0deed;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .02em;
}

.cn-performance-chart-empty-label {
    font-size: 13px;
}

.cn-performance-chart-reference-line,
.cn-performance-chart-optimize-line {
    fill: none;
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cn-performance-chart-reference-line {
    stroke: #f79240;
    filter: drop-shadow(0 0 5px rgba(247, 146, 64, .30));
}

.cn-performance-chart-optimize-line {
    stroke: #54d9ea;
    filter: drop-shadow(0 0 5px rgba(84, 217, 234, .26));
}

.cn-performance-chart-reference-point {
    fill: #ffb06d;
    stroke: #642907;
    stroke-width: 1.4;
}

.cn-performance-chart-optimize-point {
    fill: #91f3f6;
    stroke: #0a536b;
    stroke-width: 1.4;
}

.cn-performance-chart-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    margin-top: 5px;
    color: var(--cn-muted);
    font-size: .80rem;
    font-weight: 750;
}

.cn-performance-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.cn-performance-chart-legend i {
    display: inline-block;
    width: 24px;
    height: 4px;
    border-radius: 999px;
}

.cn-performance-chart-legend-reference {
    background: #f79240;
}

.cn-performance-chart-legend-optimize {
    background: #54d9ea;
}

/* Compact backend phase timings inside the comparison workspace ----------- */
.cn-performance-comparison-phase-section {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--cn-card-border-soft);
}

.cn-performance-comparison-phase-header h3 {
    margin: 3px 0 0;
    color: var(--cn-text);
    font-size: .82rem;
    font-weight: 840;
    letter-spacing: -.01em;
    line-height: 1.2;
}

.cn-performance-comparison-phase-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px dashed var(--cn-card-border-soft);
    border-radius: 10px;
    color: var(--cn-muted);
    background: var(--cn-surface-soft);
    font-size: .76rem;
    font-weight: 720;
    text-align: center;
}

.cn-performance-comparison-phase-metrics {
    display: grid;
    min-height: 0;
    flex: 1 1 auto;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: minmax(66px, 1fr);
    gap: 8px;
    margin-top: 6px;
}

.cn-performance-comparison-phase-metric {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    gap: 5px;
    padding: 8px;
    border: 1px solid var(--cn-card-border-soft);
    border-radius: 10px;
    background: var(--cn-surface-soft);
}

.cn-performance-comparison-phase-metric > span {
    display: inline-flex;
    min-width: 0;
    align-items: flex-start;
    gap: 6px;
    color: var(--cn-muted);
    font-size: .74rem;
    font-weight: 800;
    line-height: 1.2;
}

.cn-performance-comparison-phase-metric > span .mud-icon-root {
    flex: 0 0 auto;
    color: var(--cn-primary);
    font-size: .90rem !important;
}

.cn-performance-comparison-phase-metric strong {
    display: grid;
    min-height: 34px;
    place-items: center;
    color: var(--cn-text);
    font-size: clamp(1.35rem, 1.55vw, 1.80rem);
    font-weight: 880;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.035em;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.cn-performance-index-lifecycle-panel {
    flex: 0 0 auto;
    height: auto;
    gap: 0;
    padding: 13px 16px;
}

.cn-performance-index-lifecycle-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 840;
    white-space: nowrap;
}

.cn-performance-index-lifecycle-status-current {
    border-color: color-mix(in srgb, var(--cn-primary) 30%, transparent);
    color: var(--cn-primary);
    background: var(--cn-primary-soft);
}

.cn-performance-index-lifecycle-status-progress {
    border-color: color-mix(in srgb, var(--cn-warning) 34%, transparent);
    color: var(--cn-warning);
    background: color-mix(in srgb, var(--cn-warning) 10%, var(--cn-surface));
}

.cn-performance-index-lifecycle-status-muted {
    border-color: var(--cn-card-border-soft);
    color: var(--cn-muted);
    background: var(--cn-surface-soft);
}

.cn-performance-index-lifecycle-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.cn-performance-index-lifecycle-grid > div {
    display: grid;
    gap: 6px;
    min-width: 0;
    min-height: 58px;
    padding: 10px;
    border: 1px solid var(--cn-card-border-soft);
    border-radius: 11px;
    background: var(--cn-surface-soft);
}

.cn-performance-index-lifecycle-grid span {
    color: var(--cn-muted);
    font-size: .68rem;
    font-weight: 820;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.cn-performance-index-lifecycle-grid strong {
    overflow: hidden;
    color: var(--cn-text);
    font-size: .94rem;
    font-weight: 860;
    letter-spacing: -.015em;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cn-performance-index-lifecycle-caption {
    margin: 8px 0 0;
    color: var(--cn-muted);
    font-size: .72rem;
    line-height: 1.45;
}

.cn-performance-index-lifecycle-active,
.cn-performance-index-lifecycle-empty,
.cn-performance-index-lifecycle-memory-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 9px 10px;
    border: 1px solid var(--cn-card-border-soft);
    border-radius: 11px;
    color: var(--cn-muted);
    background: var(--cn-surface-soft);
    font-size: .77rem;
    font-weight: 720;
    line-height: 1.4;
}

.cn-performance-index-lifecycle-active .mud-progress-circular,
.cn-performance-index-lifecycle-memory-note .mud-icon-root {
    color: var(--cn-primary);
}

.cn-performance-index-lifecycle-memory-note strong {
    color: var(--cn-text);
    font-weight: 840;
}

/* Benchmark guide ----------------------------------------------------------- */
.cn-performance-guide-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 15px;
    margin-right: 0;
    align-self: start;
    justify-self: end;
    margin-top: 2px;
    border: 1px solid var(--cn-primary);
    border-radius: 9px;
    color: #ffffff;
    background: var(--cn-primary);
    font: inherit;
    font-size: .75rem;
    font-weight: 820;
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.cn-performance-guide-button:hover {
    border-color: color-mix(in srgb, var(--cn-primary) 78%, #ffffff);
    color: #ffffff;
    background: color-mix(in srgb, var(--cn-primary) 86%, #0a3e8e);
}

.cn-performance-guide-button .mud-icon-root {
    color: currentColor;
}

.cn-performance-guide-button:focus-visible,
.cn-performance-guide-close:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--cn-primary) 38%, transparent);
    outline-offset: 2px;
}

.cn-performance-guide-backdrop {
    position: fixed;
    z-index: 1500;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 28px;
    box-sizing: border-box;
    background: rgba(3, 12, 22, .54);
    backdrop-filter: blur(5px);
}

.cn-performance-guide-dialog {
    width: min(100%, 820px);
    max-height: min(820px, calc(100vh - 56px));
    overflow: auto;
    border: 1px solid color-mix(in srgb, var(--cn-primary) 28%, var(--cn-card-border-soft));
    border-radius: 20px;
    color: var(--cn-text);
    background: var(--cn-surface);
    box-shadow: 0 28px 90px rgba(0, 0, 0, .40), var(--cn-card-shadow);
}

.cn-performance-guide-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 28px 30px 20px;
    border-bottom: 1px solid var(--cn-card-border-soft);
}

.cn-performance-guide-dialog-header h2 {
    margin: 6px 0 0;
    color: var(--cn-text);
    font-size: 1.72rem;
    font-weight: 880;
    letter-spacing: -.03em;
    line-height: 1.15;
}

.cn-performance-guide-close {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--cn-card-border-soft);
    border-radius: 11px;
    color: var(--cn-muted);
    background: var(--cn-surface-soft);
    cursor: pointer;
}

.cn-performance-guide-close:hover {
    color: var(--cn-text);
    background: var(--cn-primary-soft);
}

.cn-performance-guide-dialog-body {
    display: grid;
    gap: 16px;
    padding: 24px 30px 30px;
}

.cn-performance-guide-intro {
    margin: 0;
    color: var(--cn-muted);
    font-size: 1rem;
    font-weight: 720;
    line-height: 1.55;
}

.cn-performance-guide-section {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
    padding: 17px 18px;
    border: 1px solid var(--cn-card-border-soft);
    border-radius: 14px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--cn-primary-soft) 50%, var(--cn-surface)) 0%, var(--cn-surface) 76%);
}

.cn-performance-guide-section-icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 12px;
    color: var(--cn-primary);
    background: color-mix(in srgb, var(--cn-primary-soft) 82%, #ffffff);
}

.cn-performance-guide-section h3 {
    margin: 1px 0 9px;
    color: var(--cn-text);
    font-size: 1rem;
    font-weight: 860;
    letter-spacing: -.012em;
}

.cn-performance-guide-section p {
    margin: 0;
    color: var(--cn-muted);
    font-size: .91rem;
    font-weight: 650;
    line-height: 1.52;
}

.cn-performance-guide-definition-list {
    display: grid;
    gap: 10px;
    margin: 0;
}

.cn-performance-guide-definition-list > div {
    display: grid;
    grid-template-columns: 154px minmax(0, 1fr);
    gap: 12px;
}

.cn-performance-guide-definition-list dt {
    color: var(--cn-text);
    font-size: .88rem;
    font-weight: 830;
}

.cn-performance-guide-definition-list dd {
    margin: 0;
    color: var(--cn-muted);
    font-size: .88rem;
    font-weight: 650;
    line-height: 1.45;
}

.cn-performance-guide-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 18px;
    color: var(--cn-muted);
    font-size: .90rem;
    font-weight: 650;
    line-height: 1.46;
}

.cn-performance-guide-list li::marker {
    color: var(--cn-primary);
}

.cn-performance-guide-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 2px;
}

.cn-performance-guide-facts > div {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid var(--cn-card-border-soft);
    border-radius: 12px;
    background: var(--cn-surface-soft);
}

.cn-performance-guide-facts span {
    color: var(--cn-muted);
    font-size: .68rem;
    font-weight: 820;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.cn-performance-guide-facts strong {
    color: var(--cn-text);
    font-size: .92rem;
    font-weight: 840;
    line-height: 1.3;
}

@media (max-width: 1420px) {
    .cn-performance-scenario-panel {
        grid-template-columns: minmax(280px, 1fr) minmax(180px, .55fr) minmax(200px, .62fr) auto;
        gap: 16px;
    }

    .cn-performance-gauge-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .cn-performance-gauge-card {
        min-height: 0;
    }
}

@media (max-width: 1120px) {
    .cn-performance-index-lifecycle-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1120px) {
    /* A stacked tablet layout cannot honestly fit every card into one viewport.
       It therefore scrolls as one complete page instead of clipping or creating
       a horizontally hidden four-card gauge deck. */
    .cn-performance-page {
        overflow: auto;
        padding-bottom: var(--cn-card-gap);
    }

    .cn-performance-lab-shell {
        flex: 0 0 auto;
        overflow: visible;
    }

    .cn-performance-scenario-panel,
    .cn-performance-lower-grid {
        grid-template-columns: 1fr;
    }

    .cn-performance-gauge-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        flex: 0 0 auto;
        min-height: 0;
    }

    .cn-performance-gauge-card {
        min-height: 290px;
    }

    .cn-performance-lower-grid {
        flex: 0 0 auto;
    }

    .cn-performance-scenario-panel {
        gap: 16px;
    }

    .cn-performance-scenario-state-block {
        justify-items: start;
        padding: 0;
        border: 0;
        text-align: left;
    }

    .cn-performance-scenario-result {
        padding-top: 16px;
        border-top: 1px solid var(--cn-card-border-soft);
    }

    .cn-performance-scenario-guide-button {
        width: max-content;
    }
}

@media (max-width: 820px) {
    .cn-performance-page {
        overflow: auto;
    }

    .cn-performance-header {
        grid-template-columns: 1fr;
        align-items: stretch;
        min-height: 0;
        padding: 12px 16px;
    }

    .cn-performance-header-status-slot {
        justify-content: flex-start;
    }

    .cn-performance-header-mode-control {
        justify-self: start;
    }

    .cn-performance-header-mode-selector {
        padding-left: 0;
        border-left: 0;
    }

    .cn-performance-lab-shell {
        flex: 0 0 auto;
        overflow: visible;
    }

    .cn-performance-scenario-facts > div {
        min-width: 0;
        flex: 1 1 140px;
    }
}

@media (max-width: 640px) {
    .cn-performance-header-status-slot,
    .cn-performance-header-mode-control {
        width: 100%;
        box-sizing: border-box;
        justify-content: space-between;
    }

    .cn-performance-header-mode-selector {
        flex: 1 1 auto;
        justify-content: flex-end;
    }

    .cn-performance-mode-toggle {
        flex: 1 1 auto;
    }

    .cn-performance-mode-toggle .mud-button-root.cn-performance-mode-button {
        min-width: 0;
        width: 50%;
    }

    .cn-performance-lab-preparing {
        grid-template-columns: 18px minmax(0, 1fr);
        padding: 10px 12px;
    }

    .cn-performance-lab-preparing-progress {
        grid-column: 1 / -1;
    }

    .cn-performance-gauge-grid {
        grid-template-columns: 1fr;
    }

    .cn-performance-gauge-card {
        min-height: 280px;
        padding: 14px;
    }

    .cn-performance-scenario-panel,
    .cn-performance-panel {
        padding: 16px;
    }

    .cn-performance-scenario-facts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .cn-performance-scenario-facts > div {
        padding: 0;
        border: 0;
    }

    .cn-performance-improvement-card {
        grid-template-columns: 24px minmax(0, 1fr);
    }

    .cn-performance-improvement-card .cn-performance-improvement-detail {
        grid-column: 2;
        text-align: left;
        white-space: normal;
    }

    .cn-performance-guide-backdrop {
        padding: 12px;
    }

    .cn-performance-guide-dialog-header,
    .cn-performance-guide-dialog-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .cn-performance-guide-section {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 12px;
        padding: 14px;
    }

    .cn-performance-guide-section-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    .cn-performance-guide-definition-list > div {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .cn-performance-guide-facts {
        grid-template-columns: 1fr;
    }

    .cn-performance-guide-button span {
        display: none;
    }

    .cn-performance-guide-button {
        width: 34px;
        padding: 0;
    }
}

@media (max-width: 450px) {
    .cn-performance-gauge-card {
        min-height: 276px;
    }

   .cn-performance-scenario-result strong {
        font-size: 2.65rem;
    }

    .cn-performance-comparison-phase-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cn-performance-index-lifecycle-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Technical Overview --------------------------------------------------------
   The technical briefing is a first-class view, not a transient dialog. The
   PDF remains the primary reference; the native snapshot is a complementary
   orientation tab for the live demo. The document workspace deliberately uses
   a neutral light canvas and fills the available working area without an
   extra card frame, inset margin, or rounded viewer border. */
.cn-technical-overview-page {
    min-height: 0;
    gap: 0 !important;
    padding-bottom: 0 !important;
}

.cn-technical-overview-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: var(--cn-card-gap);
}

.cn-technical-overview-header .cn-page-hero-copy {
    min-width: 0;
}

.cn-technical-overview-open-pdf {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 8px 13px;
    border: 1px solid color-mix(in srgb, var(--cn-primary) 42%, var(--cn-card-border-soft));
    border-radius: 11px;
    color: var(--cn-primary);
    background: color-mix(in srgb, var(--cn-primary) 8%, var(--cn-surface));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
    font-size: .78rem;
    font-weight: 780;
    letter-spacing: .01em;
    text-decoration: none;
    transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.cn-technical-overview-open-pdf:hover {
    border-color: var(--cn-primary);
    background: color-mix(in srgb, var(--cn-primary) 14%, var(--cn-surface));
    transform: translateY(-1px);
}

.cn-technical-overview-workspace {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    overflow: hidden;
    color-scheme: light;
    background: #ffffff;
}

.cn-technical-overview-tabs {
    width: 100%;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #ffffff;
}

.cn-technical-overview-tabs .mud-tabs-toolbar {
    flex: 0 0 auto;
    min-height: 56px;
    padding-inline: 16px;
    border-bottom: 1px solid #d8e0ea;
    background: #ffffff;
}

.cn-technical-overview-tabs .mud-tab {
    min-height: 56px;
    padding-inline: 14px;
    color: #52657e;
    font-size: .91rem;
    font-weight: 820;
    letter-spacing: .005em;
    text-transform: none;
}

.cn-technical-overview-tabs .mud-tab .mud-icon-root {
    font-size: 1.28rem !important;
}

.cn-technical-overview-tabs .mud-tab.mud-tab-active {
    color: #0b65e5;
}

.cn-technical-overview-tabs .mud-tabs-slider {
    height: 3px;
    background: #0b65e5;
}

.cn-technical-overview-tabs .mud-tabs-panels {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: #ffffff;
}

.cn-technical-overview-tabs .mud-tab-panel {
    height: 100%;
    min-height: 0;
}

.cn-technical-pdf-workspace {
    height: 100%;
    min-height: 0;
    display: flex;
    padding: 0;
    background: #ffffff;
}

.cn-technical-pdf-frame {
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    display: block;
    border: 0;
    border-radius: 0;
    color-scheme: light;
    background: #ffffff;
}

.cn-technical-snapshot {
    height: 100%;
    min-height: 0;
    overflow: auto;
    padding: clamp(18px, 2.2vw, 30px);
    background:
        radial-gradient(circle at 96% 0%, color-mix(in srgb, var(--cn-primary) 10%, transparent), transparent 25%),
        var(--cn-surface);
}

.cn-technical-snapshot-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 2px 2px 22px;
}

.cn-technical-snapshot-kicker {
    display: inline-flex;
    color: var(--cn-primary);
    font-size: .68rem;
    font-weight: 840;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.cn-technical-snapshot-intro h2 {
    max-width: 680px;
    margin: 7px 0 7px;
    color: var(--cn-text);
    font-size: clamp(1.35rem, 1.75vw, 1.85rem);
    font-weight: 860;
    letter-spacing: -.035em;
    line-height: 1.12;
}

.cn-technical-snapshot-intro p {
    max-width: 760px;
    margin: 0;
    color: var(--cn-muted);
    font-size: .90rem;
    line-height: 1.55;
}

.cn-technical-snapshot-badge {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--cn-primary) 42%, var(--cn-card-border-soft));
    border-radius: 999px;
    color: var(--cn-primary);
    background: var(--cn-primary-soft);
    font-size: .72rem;
    font-weight: 760;
    white-space: nowrap;
}

.cn-technical-snapshot-badge .mud-icon-root {
    font-size: .98rem !important;
}

.cn-technical-fact-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

/* Snapshot cards deliberately reuse the global standard-card shadow so this
   secondary tab keeps the same surface hierarchy as Search and Imports. */
.cn-technical-fact-card {
    min-width: 0;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    padding: 18px 20px;
    border: 1px solid var(--cn-card-border-soft);
    border-radius: 14px;
    background: color-mix(in srgb, var(--cn-surface-soft) 74%, var(--cn-surface));
}

.cn-technical-fact-card > .mud-icon-root {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    border-radius: 10px;
    color: var(--cn-primary);
    background: var(--cn-primary-soft);
    font-size: 1.28rem !important;
}

.cn-technical-fact-label {
    color: var(--cn-muted);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .042em;
    text-transform: uppercase;
}

.cn-technical-fact-card strong {
    margin-top: 6px;
    color: var(--cn-text);
    font-size: clamp(1.34rem, 1.25vw, 1.52rem);
    font-weight: 860;
    letter-spacing: -.032em;
    line-height: 1.12;
}

.cn-technical-fact-card p {
    margin: auto 0 0;
    color: var(--cn-muted);
    font-size: .82rem;
    line-height: 1.45;
}

.cn-technical-principle-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.cn-technical-principle-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 13px;
    padding: 18px 20px;
    border: 1px solid var(--cn-card-border-soft);
    border-radius: 14px;
    background: var(--cn-surface);
}

.cn-technical-principle-card > .mud-icon-root {
    color: var(--cn-primary);
    font-size: 1.34rem !important;
}

.cn-technical-principle-card h3 {
    margin: 0;
    color: var(--cn-text);
    font-size: 1rem;
    font-weight: 830;
    line-height: 1.25;
}

.cn-technical-principle-card p {
    margin: 6px 0 0;
    color: var(--cn-muted);
    font-size: .82rem;
    line-height: 1.5;
}

@media (max-width: 1180px) {
    .cn-technical-fact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cn-technical-principle-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .cn-view-header {
        height: auto;
        min-height: var(--cn-view-header-height);
    }
}

@media (max-width: 820px) {
    .cn-technical-overview-page {
        overflow: auto;
    }

    .cn-technical-overview-workspace {
        flex: 0 0 auto;
        min-height: 620px;
        overflow: visible;
    }

    .cn-technical-overview-tabs .mud-tabs-panels {
        overflow: visible;
    }

    .cn-technical-pdf-workspace {
        min-height: 620px;
    }

    .cn-technical-snapshot-intro {
        flex-direction: column;
    }
}

@media (max-width: 620px) {
    .cn-technical-overview-header {
        align-items: stretch;
        flex-direction: column;
    }

    .cn-technical-overview-open-pdf {
        width: 100%;
        box-sizing: border-box;
    }

    .cn-technical-fact-grid {
        grid-template-columns: 1fr;
    }

    .cn-technical-fact-card {
        min-height: 156px;
    }
}

/* Performance Lab direct benchmark -----------------------------------------
   The action starts one fixed, self-contained benchmark. No capture/session
   workflow is exposed to the user interface. */
.cn-performance-run-button {
    min-width: 164px !important;
    min-height: 44px !important;
    padding-inline: 18px !important;
    border-color: var(--cn-primary) !important;
    border-radius: 11px !important;
    color: #ffffff !important;
    background: var(--cn-primary) !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--cn-primary) 25%, transparent) !important;
    font-size: .84rem !important;
    font-weight: 850 !important;
    letter-spacing: .008em;
    white-space: nowrap;
}

.cn-performance-run-button:hover:not(:disabled) {
    color: #ffffff !important;
    background: color-mix(in srgb, var(--cn-primary) 88%, #053b83) !important;
}

.cn-performance-run-button:disabled {
    opacity: .58 !important;
}

@media (max-width: 1180px) {
    .cn-performance-header-mode-control {
        gap: 14px;
    }

    .cn-performance-header-mode-selector {
        gap: 8px;
        padding-left: 14px;
    }

    .cn-performance-run-button {
        min-width: 132px !important;
        padding-inline: 12px !important;
    }
}


/* Operations Logs ----------------------------------------------------------
   Read-only operational history. This section owns only the Logs route and
   deliberately does not alter Import lifecycle, Company Search or Lab styles. */
.cn-logs-page {
    min-height: 0;
    height: 100%;
}

.cn-logs-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.cn-logs-refresh-button {
    flex: 0 0 auto;
    min-height: 38px !important;
    padding-inline: 15px !important;
    border-radius: 11px !important;
    font-size: .82rem !important;
    font-weight: 820 !important;
}

.cn-logs-alert {
    flex: 0 0 auto;
    margin: 0 !important;
}

.cn-logs-overview {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.cn-logs-summary-card {
    min-width: 0;
    min-height: 84px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    border: 1px solid var(--cn-card-border-soft, var(--cn-border-soft));
    border-radius: 14px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--cn-surface) 88%, var(--cn-surface-soft)), var(--cn-surface));
    box-shadow: 0 7px 18px rgba(18, 40, 72, .055);
}

.cn-logs-summary-card > .mud-icon-root {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.26rem !important;
}

.cn-logs-summary-card span,
.cn-logs-summary-card small {
    display: block;
    min-width: 0;
    color: var(--cn-muted);
    line-height: 1.18;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cn-logs-summary-card span {
    font-size: .72rem;
    font-weight: 820;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.cn-logs-summary-card strong {
    display: block;
    margin: 3px 0 2px;
    color: var(--cn-text);
    font-size: 1.38rem;
    font-weight: 860;
    letter-spacing: -.035em;
    line-height: 1;
}

.cn-logs-summary-card small {
    font-size: .72rem;
}

.cn-logs-summary-imports > .mud-icon-root {
    color: #1c7df0;
    background: rgba(28, 125, 240, .12);
}

.cn-logs-summary-completed > .mud-icon-root {
    color: #138a5d;
    background: rgba(19, 138, 93, .12);
}

.cn-logs-summary-failed > .mud-icon-root {
    color: #d14444;
    background: rgba(209, 68, 68, .12);
}

.cn-logs-summary-tasks > .mud-icon-root {
    color: #7857d7;
    background: rgba(120, 87, 215, .13);
}

.cn-shell.cn-dark .cn-logs-summary-card {
    box-shadow: 0 9px 22px rgba(0, 0, 0, .18);
}

.cn-logs-workspace {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    overflow: hidden;
    border: 1px solid var(--cn-card-border-soft, var(--cn-border-soft));
    border-radius: 16px;
    background: var(--cn-surface);
    box-shadow: 0 12px 30px rgba(18, 40, 72, .055);
}

.cn-logs-tabs {
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.cn-logs-tabs .mud-tabs-toolbar {
    flex: 0 0 auto;
    min-height: 56px;
    padding-inline: 12px;
    border-bottom: 1px solid var(--cn-card-border-soft, var(--cn-border-soft));
    background: color-mix(in srgb, var(--cn-surface-soft) 72%, var(--cn-surface));
}

.cn-logs-tabs .mud-tab {
    min-height: 56px;
    padding-inline: 16px;
    color: var(--cn-muted);
    font-size: .88rem;
    font-weight: 820;
    letter-spacing: .004em;
    text-transform: none;
}

.cn-logs-tabs .mud-tab.mud-tab-active {
    color: var(--cn-primary);
}

.cn-logs-tabs .mud-tabs-slider {
    height: 3px;
    background: var(--cn-primary);
}

.cn-logs-tabs .mud-tabs-panels,
.cn-logs-tabs .mud-tab-panel {
    min-height: 0;
    height: 100%;
}

.cn-logs-tabs .mud-tabs-panels {
    flex: 1 1 auto;
    overflow: hidden;
}

.cn-logs-panel {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.cn-logs-panel-header {
    flex: 0 0 auto;
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--cn-card-border-soft, var(--cn-border-soft));
}

.cn-logs-panel-header .cn-section-title {
    margin: 0 0 4px !important;
    color: var(--cn-text);
    font-size: .98rem !important;
    font-weight: 840 !important;
}

.cn-logs-panel-header code {
    color: var(--cn-primary);
    font-size: .74rem;
}

.cn-logs-loading {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    color: var(--cn-muted);
    font-size: .76rem;
    font-weight: 760;
}

.cn-logs-table-wrap {
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
}

.cn-logs-table {
    width: 100%;
    min-width: 1040px;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--cn-text);
    font-size: .82rem;
}

.cn-logs-table th,
.cn-logs-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--cn-card-border-soft, var(--cn-border-soft));
    text-align: left;
    vertical-align: middle;
}

.cn-logs-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: var(--cn-muted);
    background: color-mix(in srgb, var(--cn-surface-soft) 82%, var(--cn-surface));
    font-size: .68rem;
    font-weight: 880;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cn-logs-table tbody tr {
    background: var(--cn-surface);
    transition: background-color 120ms ease;
}

.cn-logs-table tbody tr:hover {
    background: color-mix(in srgb, var(--cn-primary) 5%, var(--cn-surface));
}

.cn-logs-table tbody tr:last-child td {
    border-bottom: 0;
}

.cn-logs-number-cell {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cn-logs-file-cell,
.cn-logs-company-cell {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cn-logs-file-cell .mud-icon-root {
    flex: 0 0 auto;
    color: var(--cn-primary);
    font-size: 1.1rem !important;
}

.cn-logs-file-cell span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cn-logs-company-cell {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
}

.cn-logs-company-cell strong {
    max-width: 290px;
    overflow: hidden;
    color: var(--cn-text);
    font-weight: 790;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cn-logs-company-cell small {
    color: var(--cn-muted-2);
    font-size: .70rem;
    font-variant-numeric: tabular-nums;
}

.cn-logs-status {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 820;
    white-space: nowrap;
}

.cn-logs-status-success {
    color: var(--cn-success);
    border-color: color-mix(in srgb, var(--cn-success) 34%, transparent);
    background: var(--cn-success-bg);
}

.cn-logs-status-failed {
    color: var(--cn-danger);
    border-color: color-mix(in srgb, var(--cn-danger) 34%, transparent);
    background: var(--cn-danger-bg);
}

.cn-logs-status-progress {
    color: var(--cn-primary);
    border-color: color-mix(in srgb, var(--cn-primary) 34%, transparent);
    background: var(--cn-primary-soft);
}

.cn-logs-status-muted {
    color: var(--cn-muted);
    border-color: var(--cn-card-border-soft, var(--cn-border-soft));
    background: var(--cn-surface-soft);
}

.cn-logs-details-cell {
    max-width: 340px;
    overflow: hidden;
    color: var(--cn-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cn-logs-empty-row td {
    height: 210px;
    padding: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

.cn-logs-empty-row span,
.cn-logs-empty-row small {
    display: block;
}

.cn-logs-empty-row span {
    color: var(--cn-text);
    font-size: .92rem;
    font-weight: 800;
}

.cn-logs-empty-row small {
    margin-top: 5px;
    color: var(--cn-muted);
    font-size: .78rem;
}

.cn-logs-import-file-column {
    width: 29%;
}

.cn-logs-import-source-column {
    width: 12%;
}

.cn-logs-date-column {
    width: 15%;
    white-space: nowrap;
}

.cn-logs-duration-column {
    width: 9%;
    white-space: nowrap;
}

.cn-logs-number-column {
    width: 8%;
}

.cn-logs-status-column {
    width: 10%;
}

.cn-logs-company-column {
    width: 24%;
}

.cn-logs-task-column {
    width: 15%;
}

.cn-logs-details-column {
    width: 26%;
}

.cn-logs-action-column {
    width: 52px;
}

.cn-logs-action-header,
.cn-logs-action-cell {
    width: 52px;
    padding-inline: 8px !important;
    text-align: center !important;
}

.cn-logs-row-action,
.cn-logs-detail-close {
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--cn-primary) 24%, transparent);
    border-radius: 9px;
    color: var(--cn-primary);
    background: color-mix(in srgb, var(--cn-primary) 7%, var(--cn-surface));
    cursor: pointer;
}

.cn-logs-row-action {
    opacity: 0;
    transform: translateX(4px);
    transition: opacity 120ms ease, transform 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.cn-logs-table tbody tr:hover .cn-logs-row-action,
.cn-logs-row-action:focus-visible {
    opacity: 1;
    transform: translateX(0);
}

.cn-logs-row-action:hover,
.cn-logs-detail-close:hover {
    border-color: color-mix(in srgb, var(--cn-primary) 56%, transparent);
    background: var(--cn-primary-soft);
}

.cn-logs-row-action:focus-visible,
.cn-logs-detail-close:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--cn-primary) 30%, transparent);
    outline-offset: 2px;
}

.cn-logs-row-action .mud-icon-root,
.cn-logs-detail-close .mud-icon-root {
    font-size: 1.05rem !important;
}

.cn-logs-detail-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    justify-content: flex-end;
    padding: 18px;
    background: rgba(9, 25, 47, .36);
    backdrop-filter: blur(2px);
}

.cn-logs-detail-sheet {
    width: min(580px, calc(100vw - 36px));
    height: 100%;
    max-height: 920px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--cn-card-border-soft, var(--cn-border-soft));
    border-radius: 18px;
    color: var(--cn-text);
    background: var(--cn-surface);
    box-shadow: 0 26px 70px rgba(7, 23, 45, .34);
}

.cn-logs-detail-header {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--cn-card-border-soft, var(--cn-border-soft));
    background: linear-gradient(135deg, color-mix(in srgb, var(--cn-primary) 9%, var(--cn-surface)), var(--cn-surface));
}

.cn-logs-detail-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--cn-primary);
    font-size: .68rem;
    font-weight: 860;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cn-logs-detail-title {
    margin: 0 !important;
    color: var(--cn-text);
    font-size: 1.08rem !important;
    font-weight: 860 !important;
    line-height: 1.22 !important;
    overflow-wrap: anywhere;
}

.cn-logs-detail-close {
    flex: 0 0 auto;
}

.cn-logs-detail-content {
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
    padding: 18px 20px 22px;
}

.cn-logs-detail-section + .cn-logs-detail-section {
    margin-top: 22px;
}

.cn-logs-detail-section h3 {
    margin: 0 0 10px;
    color: var(--cn-text);
    font-size: .78rem;
    font-weight: 860;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.cn-logs-detail-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.cn-logs-detail-id {
    color: var(--cn-muted);
    font-size: .76rem;
    font-weight: 760;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cn-logs-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.cn-logs-detail-grid > div {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--cn-card-border-soft, var(--cn-border-soft));
    border-radius: 11px;
    background: color-mix(in srgb, var(--cn-surface-soft) 56%, var(--cn-surface));
}

.cn-logs-detail-grid dt {
    margin: 0 0 4px;
    color: var(--cn-muted);
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cn-logs-detail-grid dd {
    margin: 0;
    color: var(--cn-text);
    font-size: .82rem;
    font-weight: 710;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.cn-logs-detail-pre {
    min-height: 46px;
    margin: 0;
    padding: 12px;
    overflow: auto;
    border: 1px solid var(--cn-card-border-soft, var(--cn-border-soft));
    border-radius: 11px;
    color: var(--cn-text);
    background: color-mix(in srgb, var(--cn-surface-soft) 66%, var(--cn-surface));
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .74rem;
    line-height: 1.52;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (hover: none), (pointer: coarse) {
    .cn-logs-row-action {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 1080px) {
    .cn-logs-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .cn-logs-page {
        overflow: auto;
    }

    .cn-logs-hero,
    .cn-logs-panel-header {
        align-items: stretch;
        flex-direction: column;
    }

    .cn-logs-refresh-button {
        width: 100%;
    }

    .cn-logs-workspace {
        flex: 0 0 auto;
        min-height: 550px;
        overflow: visible;
    }

    .cn-logs-tabs .mud-tabs-panels {
        overflow: visible;
    }
}

@media (max-width: 620px) {
    .cn-logs-detail-backdrop {
        padding: 0;
    }

    .cn-logs-detail-sheet {
        width: 100vw;
        max-height: 100%;
        border-radius: 0;
    }

    .cn-logs-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .cn-logs-overview {
        grid-template-columns: 1fr;
    }

    .cn-logs-summary-card {
        min-height: 78px;
    }
}


/* ==========================================================================
   System Health
   ========================================================================== */

.cn-health-page {
    min-height: 0;
    padding-bottom: 18px;
}

.cn-health-hero,
.cn-health-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.cn-health-refresh-button {
    flex: 0 0 auto;
}

.cn-health-alert {
    margin: 0;
}

.cn-health-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.cn-health-summary-card {
    min-width: 0;
    min-height: 96px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px;
    border: 1px solid var(--cn-card-border-soft, var(--cn-border-soft));
    border-radius: 16px;
    color: var(--cn-text);
    background: color-mix(in srgb, var(--cn-surface) 94%, var(--cn-surface-soft));
    box-shadow: var(--cn-card-shadow);
}

.cn-health-summary-card > .mud-icon-root {
    width: 38px;
    height: 38px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--cn-primary) 22%, transparent);
    border-radius: 12px;
    color: var(--cn-primary);
    background: color-mix(in srgb, var(--cn-primary) 8%, var(--cn-surface));
    font-size: 1.35rem;
}

.cn-health-summary-card > div {
    min-width: 0;
}

.cn-health-summary-card span,
.cn-health-summary-card strong,
.cn-health-summary-card small {
    display: block;
}

.cn-health-summary-card span {
    margin-bottom: 3px;
    color: var(--cn-muted);
    font-size: .69rem;
    font-weight: 840;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cn-health-summary-card strong {
    overflow: hidden;
    color: var(--cn-text);
    font-size: 1rem;
    font-weight: 860;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cn-health-summary-card small {
    margin-top: 4px;
    overflow: hidden;
    color: var(--cn-muted);
    font-size: .76rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cn-health-summary-ok {
    border-color: color-mix(in srgb, var(--cn-success) 28%, var(--cn-card-border-soft, var(--cn-border-soft)));
}

.cn-health-summary-ok > .mud-icon-root {
    border-color: color-mix(in srgb, var(--cn-success) 32%, transparent);
    color: var(--cn-success);
    background: var(--cn-success-bg);
}

.cn-health-summary-progress {
    border-color: color-mix(in srgb, var(--cn-primary) 28%, var(--cn-card-border-soft, var(--cn-border-soft)));
}

.cn-health-summary-progress > .mud-icon-root {
    border-color: color-mix(in srgb, var(--cn-primary) 30%, transparent);
    color: var(--cn-primary);
    background: var(--cn-primary-soft);
}

.cn-health-summary-database > .mud-icon-root {
    border-color: color-mix(in srgb, var(--cn-info) 32%, transparent);
    color: var(--cn-info);
    background: color-mix(in srgb, var(--cn-info) 10%, var(--cn-surface));
}

.cn-health-summary-mode > .mud-icon-root {
    border-color: color-mix(in srgb, var(--cn-warning) 34%, transparent);
    color: var(--cn-warning);
    background: color-mix(in srgb, var(--cn-warning) 11%, var(--cn-surface));
}

.cn-health-summary-danger {
    border-color: color-mix(in srgb, var(--cn-danger) 30%, var(--cn-card-border-soft, var(--cn-border-soft)));
}

.cn-health-summary-danger > .mud-icon-root {
    border-color: color-mix(in srgb, var(--cn-danger) 32%, transparent);
    color: var(--cn-danger);
    background: var(--cn-danger-bg);
}

.cn-health-summary-muted > .mud-icon-root {
    border-color: var(--cn-card-border-soft, var(--cn-border-soft));
    color: var(--cn-muted);
    background: var(--cn-surface-soft);
}

.cn-health-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}

.cn-health-panel {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--cn-card-border-soft, var(--cn-border-soft));
    border-radius: 18px;
    background: var(--cn-surface);
    box-shadow: var(--cn-card-shadow);
}

.cn-health-panel-header {
    align-items: flex-start;
    margin-bottom: 16px;
}

.cn-health-panel-header code {
    color: var(--cn-primary);
    font-size: .73rem;
}

.cn-health-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    color: var(--cn-muted);
    font-size: .76rem;
    font-weight: 760;
}

.cn-health-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 840;
    white-space: nowrap;
}

.cn-health-status-ok {
    border-color: color-mix(in srgb, var(--cn-success) 34%, transparent);
    color: var(--cn-success);
    background: var(--cn-success-bg);
}

.cn-health-status-progress {
    border-color: color-mix(in srgb, var(--cn-primary) 34%, transparent);
    color: var(--cn-primary);
    background: var(--cn-primary-soft);
}

.cn-health-status-danger {
    border-color: color-mix(in srgb, var(--cn-danger) 34%, transparent);
    color: var(--cn-danger);
    background: var(--cn-danger-bg);
}

.cn-health-status-muted {
    border-color: var(--cn-card-border-soft, var(--cn-border-soft));
    color: var(--cn-muted);
    background: var(--cn-surface-soft);
}

.cn-health-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.cn-health-detail-grid > div {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--cn-card-border-soft, var(--cn-border-soft));
    border-radius: 12px;
    background: color-mix(in srgb, var(--cn-surface-soft) 58%, var(--cn-surface));
}

.cn-health-detail-grid dt {
    margin: 0 0 4px;
    color: var(--cn-muted);
    font-size: .66rem;
    font-weight: 840;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cn-health-detail-grid dd {
    margin: 0;
    color: var(--cn-text);
    font-size: .82rem;
    font-weight: 710;
    line-height: 1.38;
    overflow-wrap: anywhere;
}

.cn-health-progress {
    margin-top: 18px;
}

.cn-health-index-lifecycle {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--cn-card-border-soft, var(--cn-border-soft));
}

.cn-health-index-lifecycle-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.cn-health-index-lifecycle-header .mud-typography-subtitle2 {
    color: var(--cn-text);
    font-weight: 840;
}

.cn-health-index-lifecycle-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0 0;
}

.cn-health-index-lifecycle-grid > div {
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--cn-card-border-soft, var(--cn-border-soft));
    border-radius: 10px;
    background: color-mix(in srgb, var(--cn-surface-soft) 58%, var(--cn-surface));
}

.cn-health-index-lifecycle-grid dt {
    margin: 0 0 4px;
    color: var(--cn-muted);
    font-size: .62rem;
    font-weight: 840;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cn-health-index-lifecycle-grid dd {
    margin: 0;
    overflow: hidden;
    color: var(--cn-text);
    font-size: .79rem;
    font-weight: 820;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cn-health-index-lifecycle-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 14px;
    margin-top: 12px;
    color: var(--cn-muted);
    font-size: .73rem;
    line-height: 1.4;
}

.cn-health-index-lifecycle-summary strong {
    color: var(--cn-text);
    font-weight: 820;
}

.cn-health-index-lifecycle-active,
.cn-health-preparation-ready-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--cn-primary) 24%, var(--cn-card-border-soft, var(--cn-border-soft)));
    border-radius: 11px;
    color: var(--cn-muted);
    background: color-mix(in srgb, var(--cn-primary) 6%, var(--cn-surface));
    font-size: .77rem;
    font-weight: 720;
    line-height: 1.4;
}

.cn-health-index-lifecycle-active .mud-progress-circular,
.cn-health-preparation-ready-note .mud-icon-root {
    color: var(--cn-primary);
}

.cn-health-indeterminate-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 12px;
    border: 1px solid var(--cn-card-border-soft, var(--cn-border-soft));
    border-radius: 11px;
    color: var(--cn-muted);
    background: var(--cn-surface-soft);
    font-size: .78rem;
    line-height: 1.4;
}

.cn-health-indeterminate-note .mud-icon-root {
    margin-top: 1px;
    color: var(--cn-primary);
    font-size: 1rem;
}

.cn-health-startup-failure {
    margin-top: 14px;
}

.cn-health-contract-note {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--cn-text);
    background: linear-gradient(135deg, color-mix(in srgb, var(--cn-primary) 7%, var(--cn-surface)), var(--cn-surface));
}

.cn-health-contract-note > .mud-icon-root {
    color: var(--cn-primary);
    font-size: 1.25rem;
}

.cn-health-contract-note .mud-typography-subtitle2 {
    margin-bottom: 3px;
    color: var(--cn-text);
    font-weight: 840;
}

.cn-health-empty {
    min-height: 240px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 8px;
    padding: 32px;
    border: 1px dashed var(--cn-card-border-soft, var(--cn-border-soft));
    border-radius: 18px;
    color: var(--cn-text);
    text-align: center;
    background: color-mix(in srgb, var(--cn-surface-soft) 56%, var(--cn-surface));
}

.cn-health-empty > .mud-icon-root {
    margin-bottom: 4px;
    color: var(--cn-muted);
    font-size: 2rem;
}

/* Optimize preparation lives in the Health workspace only. */
.cn-health-optimize-panel {
    border-color: color-mix(in srgb, var(--cn-primary) 26%, var(--cn-card-border-soft, var(--cn-border-soft)));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--cn-primary) 5%, var(--cn-surface)), var(--cn-surface));
}

.cn-health-preparation-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: var(--cn-muted);
    font-size: .78rem;
    font-weight: 720;
    line-height: 1.4;
}

.cn-health-preparation-live .mud-progress-circular {
    color: var(--cn-primary);
}

.cn-health-resume-alert,
.cn-health-resume-notice {
    margin-top: 14px;
}

.cn-health-resume-alert-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.cn-health-resume-alert-content > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.cn-health-resume-alert-content strong {
    color: var(--cn-text);
    font-size: .8rem;
    font-weight: 860;
}

.cn-health-resume-alert-content span {
    color: var(--cn-muted);
    font-size: .76rem;
    line-height: 1.4;
}

.cn-health-resume-alert .mud-button-root {
    flex: 0 0 auto;
    min-height: 34px;
    white-space: nowrap;
}

.cn-health-resume-spinner {
    margin-right: 6px;
}

/* Import-pipeline monitoring remains read-only and is scoped to the Health workspace. */
.cn-health-import-panel {
    border-color: color-mix(in srgb, var(--cn-info) 24%, var(--cn-card-border-soft, var(--cn-border-soft)));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--cn-info) 5%, var(--cn-surface)), var(--cn-surface));
}

.cn-health-import-error {
    margin: 0;
}

.cn-health-import-list {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.cn-health-import-job {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--cn-card-border-soft, var(--cn-border-soft));
    border-radius: 11px;
    background: color-mix(in srgb, var(--cn-surface-soft) 56%, var(--cn-surface));
}

.cn-health-import-job > .mud-icon-root {
    color: var(--cn-info);
    font-size: 1.1rem;
}

.cn-health-import-job > div {
    min-width: 0;
}

.cn-health-import-job strong,
.cn-health-import-job span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cn-health-import-job strong {
    color: var(--cn-text);
    font-size: .81rem;
    font-weight: 820;
}

.cn-health-import-job span,
.cn-health-import-job time {
    color: var(--cn-muted);
    font-size: .72rem;
    line-height: 1.35;
}

.cn-health-import-job time {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cn-health-import-live,
.cn-health-import-last-result {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    color: var(--cn-muted);
    font-size: .78rem;
    font-weight: 720;
    line-height: 1.4;
}

.cn-health-import-live .mud-progress-circular {
    color: var(--cn-info);
}

.cn-health-import-last-result > .mud-icon-root {
    color: var(--cn-success);
    font-size: 1.1rem;
}

.cn-health-import-last-result strong,
.cn-health-import-last-result span {
    display: block;
}

.cn-health-import-last-result strong {
    color: var(--cn-text);
    font-size: .8rem;
    font-weight: 840;
}

.cn-health-import-last-result span {
    color: var(--cn-muted);
    font-size: .74rem;
    line-height: 1.35;
}

.cn-health-import-logs-link {
    margin-top: 16px;
}

@media (max-width: 1180px) {
    .cn-health-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .cn-health-index-lifecycle-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cn-health-hero,
    .cn-health-panel-header {
        align-items: stretch;
        flex-direction: column;
    }

    .cn-health-refresh-button {
        width: 100%;
    }

    .cn-health-workspace {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .cn-health-resume-alert-content {
        align-items: stretch;
        flex-direction: column;
    }

    .cn-health-resume-alert .mud-button-root {
        width: 100%;
    }

    .cn-health-import-job {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .cn-health-import-job time {
        grid-column: 2;
    }
}

@media (max-width: 560px) {
    .cn-health-overview,
    .cn-health-detail-grid {
        grid-template-columns: 1fr;
    }

    .cn-health-summary-card {
        min-height: 84px;
    }
}

/* ==========================================================================
   Company Search – final grid vertical rhythm
   ========================================================================== */

.cn-company-search-page > .cn-search-summary-row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.cn-company-search-page > .cn-search-summary-row .cn-kpi-strip {
    margin-top: 14px !important;
}

.cn-company-search-page > .cn-viewport-shell {
    margin-bottom: 0 !important;
}

.cn-company-search-page .cn-viewport-shell,
.cn-company-search-page .cn-viewport-body-frame,
.cn-company-search-page .cn-grid-scroll-host {
    min-height: 0;
}

.cn-company-search-page .cn-grid-scroll-host {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}